github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

warning message placement and persisted folders heading (#9233)

Browse Source
pull/9244/head
Prabhat Khera 1 year ago committed by GitHub
parent 704d70c99b
commit 9fac997300
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 205 additions and 204 deletions
Show Stats Download Patch File Download Diff File

409
app/kubernetes/views/applications/create/createApplication.html
Unescape View File

@ -631,6 +631,13 @@
</div> </div>
<!-- !has-override --> <!-- !has-override -->
</div> </div>
<div class="my-2 w-full">
<p class="vertical-center text-muted text-xs" ng-if="ctrl.secrets.length === 0">
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
There are no secrets available in this namespace.
</p>
</div>
<!-- !config-element --> <!-- !config-element -->
<div class="col-sm-12 !p-0"> <div class="col-sm-12 !p-0">
<button <button
@ -644,236 +651,230 @@
<pr-icon icon="'plus'" size="'sm'"></pr-icon> Add Secret <pr-icon icon="'plus'" size="'sm'"></pr-icon> Add Secret
</button> </button>
</div> </div>
<div class="my-2 w-full">
<p class="vertical-center text-muted text-xs" ng-if="ctrl.secrets.length === 0">
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
There are no secrets available in this namespace.
</p>
</div>
<!-- #endregion --> <!-- #endregion -->
<!-- #region PERSISTED FOLDERS --> <!-- #region PERSISTED FOLDERS -->
<div class="form-group" ng-if="!ctrl.storageClassAvailable()"> <div class="form-group">
<div class="col-sm-12 small text-muted vertical-center"> <div class="col-sm-12 vertical-center mb-2 pt-2.5" style="margin-top: 5px">
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
No storage option is available to persist data, contact your administrator to enable a storage option.
</div>
</div>
<div class="form-group" ng-if="ctrl.storageClassAvailable()">
<div class="col-sm-12 vertical-center mb-2 pt-2.5" style="margin-top: 5px" ng-if="!ctrl.allQuotasExhaustedAndNoVolumesAvailable()">
<label class="control-label !pt-0 text-left">Persisted folders</label> <label class="control-label !pt-0 text-left">Persisted folders</label>
</div> </div>
<div class="col-sm-12" style="margin-top: 5px" ng-if="ctrl.allQuotasExhaustedAndNoVolumesAvailable()"> <div class="col-sm-12 small text-muted vertical-center mt-1" ng-if="!ctrl.storageClassAvailable()">
<span class="small text-muted vertical-center"> <pr-icon icon="'info'" mode="'primary'"></pr-icon>
<pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon> No storage option is available to persist data, contact your administrator to enable a storage option.
This namespace has exhausted its storage capacity. Contact your administrator to expand the capacity of the namespace.
</span>
</div> </div>
<div class="col-sm-12 form-inline" style="margin-top: 10px" ng-repeat="persistedFolder in ctrl.formValues.PersistedFolders"> <div class="row" ng-if="ctrl.storageClassAvailable()">
<div style="margin-top: 2px"> <div class="col-sm-12" style="margin-top: 5px" ng-if="ctrl.allQuotasExhaustedAndNoVolumesAvailable()">
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }"> <span class="small text-muted vertical-center">
<span class="input-group-addon required">path in container</span> <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
<input This namespace has exhausted its storage capacity. Contact your administrator to expand the capacity of the namespace.
type="text" </span>
class="form-control" </div>
name="persisted_folder_path_{{ $index }}"
ng-model="persistedFolder.ContainerPath"
ng-change="ctrl.onChangePersistedFolderPath()"
ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
placeholder="/data"
required
data-cy="k8sAppCreate-containerPathInput_{{ $index }}"
/>
</div>
<div <div class="col-sm-12 form-inline" style="margin-top: 10px" ng-repeat="persistedFolder in ctrl.formValues.PersistedFolders">
class="input-group col-sm-2 input-group-sm" <div style="margin-top: 2px">
ng-if=" <div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }">
!ctrl.isEditAndExistingPersistedFolder($index) && <span class="input-group-addon required">path in container</span>
ctrl.application.ApplicationType !== ctrl.ApplicationTypes.STATEFULSET && <input
ctrl.formValues.Containers.length <= 1 type="text"
" class="form-control"
> name="persisted_folder_path_{{ $index }}"
<span class="btn-group btn-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }"> ng-model="persistedFolder.ContainerPath"
<label ng-change="ctrl.onChangePersistedFolderPath()"
class="btn btn-light" ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
ng-model="persistedFolder.UseNewVolume" placeholder="/data"
uib-btn-radio="true" required
ng-change="ctrl.useNewVolume($index)" data-cy="k8sAppCreate-containerPathInput_{{ $index }}"
ng-disabled="ctrl.isNewVolumeButtonDisabled($index)" />
>New volume</label </div>
>
<label
class="btn btn-light"
ng-model="persistedFolder.UseNewVolume"
uib-btn-radio="false"
ng-change="ctrl.useExistingVolume($index)"
ng-disabled="ctrl.isExistingVolumeButtonDisabled()"
>Existing volume</label
>
</span>
</div>
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }" ng-if="persistedFolder.UseNewVolume"> <div
<span class="input-group-addon required">requested size</span> class="input-group col-sm-2 input-group-sm"
<input ng-if="
type="number" !ctrl.isEditAndExistingPersistedFolder($index) &&
class="form-control !rounded-none" ctrl.application.ApplicationType !== ctrl.ApplicationTypes.STATEFULSET &&
name="persisted_folder_size_{{ $index }}" ctrl.formValues.Containers.length <= 1
ng-model="persistedFolder.Size" "
placeholder="20" >
min="0" <span class="btn-group btn-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }">
required <label
ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1" class="btn btn-light"
ng-change="ctrl.onChangeVolumeRequestedSize()" ng-model="persistedFolder.UseNewVolume"
/> uib-btn-radio="true"
<span class="input-group-addon !rounded-r-[5px] !p-0"> ng-change="ctrl.useNewVolume($index)"
<select ng-disabled="ctrl.isNewVolumeButtonDisabled($index)"
class="form-control !h-[28px] w-12 !rounded-r-[5px] !border-none text-xs" >New volume</label
ng-model="persistedFolder.SizeUnit" >
ng-style="{ height: '100%', cursor: ctrl.isEditAndExistingPersistedFolder($index) ? 'not-allowed' : 'auto' }" <label
ng-options="unit for unit in ctrl.state.availableSizeUnits" class="btn btn-light"
ng-model="persistedFolder.UseNewVolume"
uib-btn-radio="false"
ng-change="ctrl.useExistingVolume($index)"
ng-disabled="ctrl.isExistingVolumeButtonDisabled()"
>Existing volume</label
>
</span>
</div>
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }" ng-if="persistedFolder.UseNewVolume">
<span class="input-group-addon required">requested size</span>
<input
type="number"
class="form-control !rounded-none"
name="persisted_folder_size_{{ $index }}"
ng-model="persistedFolder.Size"
placeholder="20"
min="0"
required
ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1" ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
ng-change="ctrl.onChangeVolumeRequestedSize()" ng-change="ctrl.onChangeVolumeRequestedSize()"
></select> />
</span> <span class="input-group-addon !rounded-r-[5px] !p-0">
</div> <select
class="form-control !h-[28px] w-12 !rounded-r-[5px] !border-none text-xs"
<div class="input-group col-sm-2 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }" ng-if="persistedFolder.UseNewVolume"> ng-model="persistedFolder.SizeUnit"
<span class="input-group-addon">storage</span> ng-style="{ height: '100%', cursor: ctrl.isEditAndExistingPersistedFolder($index) ? 'not-allowed' : 'auto' }"
<select ng-options="unit for unit in ctrl.state.availableSizeUnits"
ng-if="ctrl.hasMultipleStorageClassesAvailable()" ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
class="form-control" ng-change="ctrl.onChangeVolumeRequestedSize()"
ng-model="persistedFolder.StorageClass" ></select>
ng-options="storageClass as storageClass.Name for storageClass in ctrl.storageClasses" </span>
ng-disabled="ctrl.state.isEdit || ctrl.formValues.Containers.length > 1" </div>
data-cy="k8sAppCreate-storageSelect_{{ $index }}"
></select>
<input
ng-if="!ctrl.hasMultipleStorageClassesAvailable()"
type="text"
class="form-control"
disabled
ng-model="persistedFolder.StorageClass.Name"
data-cy="k8sAppCreate-storageClassNameInput_{{ $index }}"
/>
</div>
<div class="input-group col-sm-5 input-group-sm" ng-if="!persistedFolder.UseNewVolume" ng-class="{ striked: persistedFolder.NeedsDeletion }"> <div class="input-group col-sm-2 input-group-sm" ng-class="{ striked: persistedFolder.NeedsDeletion }" ng-if="persistedFolder.UseNewVolume">
<span class="input-group-addon">volume</span> <span class="input-group-addon">storage</span>
<select <select
class="form-control" ng-if="ctrl.hasMultipleStorageClassesAvailable()"
name="existing_volumes_{{ $index }}" class="form-control"
ng-model="ctrl.formValues.PersistedFolders[$index].ExistingVolume" ng-model="persistedFolder.StorageClass"
ng-options="vol as vol.PersistentVolumeClaim.Name for vol in ctrl.availableVolumes" ng-options="storageClass as storageClass.Name for storageClass in ctrl.storageClasses"
ng-change="ctrl.onChangeExistingVolumeSelection()" ng-disabled="ctrl.state.isEdit || ctrl.formValues.Containers.length > 1"
ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1" data-cy="k8sAppCreate-storageSelect_{{ $index }}"
required ></select>
> <input
<option selected disabled hidden value="">Select a volume</option> ng-if="!ctrl.hasMultipleStorageClassesAvailable()"
</select> type="text"
</div> class="form-control"
disabled
ng-model="persistedFolder.StorageClass.Name"
data-cy="k8sAppCreate-storageClassNameInput_{{ $index }}"
/>
</div>
<div class="input-group col-sm-1 input-group-sm"> <div class="input-group col-sm-5 input-group-sm" ng-if="!persistedFolder.UseNewVolume" ng-class="{ striked: persistedFolder.NeedsDeletion }">
<div ng-if="!ctrl.isEditAndStatefulSet() && !ctrl.state.useExistingVolume[$index] && ctrl.formValues.Containers.length <= 1"> <span class="input-group-addon">volume</span>
<button <select
ng-if="!persistedFolder.NeedsDeletion" class="form-control"
class="btn btn-sm btn-dangerlight !ml-0 h-[30px]" name="existing_volumes_{{ $index }}"
type="button" ng-model="ctrl.formValues.PersistedFolders[$index].ExistingVolume"
ng-click="ctrl.removePersistedFolder($index)" ng-options="vol as vol.PersistentVolumeClaim.Name for vol in ctrl.availableVolumes"
data-cy="k8sAppCreate-rmPersistentFolderButton" ng-change="ctrl.onChangeExistingVolumeSelection()"
> ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
<pr-icon icon="'trash-2'" size="'md'"></pr-icon> required
</button>
<button
ng-if="persistedFolder.NeedsDeletion"
class="btn btn-sm btn-primary"
type="button"
ng-click="ctrl.restorePersistedFolder($index)"
data-cy="k8sAppCreate-restorePersistentButton"
> >
<pr-icon icon="'rotate-cw'"></pr-icon> <option selected disabled hidden value="">Select a volume</option>
</button> </select>
</div> </div>
</div>
</div>
<div <div class="input-group col-sm-1 input-group-sm">
class="flex flex-row gap-x-1" <div ng-if="!ctrl.isEditAndStatefulSet() && !ctrl.state.useExistingVolume[$index] && ctrl.formValues.Containers.length <= 1">
ng-show=" <button
kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid || ng-if="!persistedFolder.NeedsDeletion"
ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined || class="btn btn-sm btn-dangerlight !ml-0 h-[30px]"
kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid || type="button"
ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined || ng-click="ctrl.removePersistedFolder($index)"
kubernetesApplicationCreationForm['existing_volumes_' + $index].$invalid || data-cy="k8sAppCreate-rmPersistentFolderButton"
ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined >
" <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
> </button>
<div class="input-group col-sm-3 input-group-sm"> <button
<div ng-if="persistedFolder.NeedsDeletion"
class="small text-warning" class="btn btn-sm btn-primary"
style="margin-top: 5px" type="button"
ng-show=" ng-click="ctrl.restorePersistedFolder($index)"
kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid || ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined data-cy="k8sAppCreate-restorePersistentButton"
" >
> <pr-icon icon="'rotate-cw'"></pr-icon>
<ng-messages for="kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$error"> </button>
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Path is required.</p> </div>
</ng-messages>
<p class="vertical-center" ng-if="ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined"
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This path is already defined.</p
>
</div> </div>
</div> </div>
<div class="input-group col-sm-offset-3 col-sm-3 input-group-sm"> <div
<div class="flex flex-row gap-x-1"
class="small text-warning" ng-show="
style="margin-top: 5px" kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid ||
ng-show=" ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined ||
kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid || ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid ||
" ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined ||
> kubernetesApplicationCreationForm['existing_volumes_' + $index].$invalid ||
<ng-messages for="kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$error"> ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Size is required.</p> "
<p class="vertical-center" ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This value must be greater than zero.</p> >
</ng-messages> <div class="input-group col-sm-3 input-group-sm">
<p class="vertical-center" ng-if="ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined"> <div
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> class="small text-warning"
You can only request up to style="margin-top: 5px"
{{ ctrl.state.storages.availabilities[persistedFolder.StorageClass.Name] | kubernetesAppStorageRequestSizeHumanReadable }} for ng-show="
{{ persistedFolder.StorageClass.Name }} kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid || ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined
</p> "
>
<ng-messages for="kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$error">
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Path is required.</p>
</ng-messages>
<p class="vertical-center" ng-if="ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined"
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This path is already defined.</p
>
</div>
</div> </div>
<div
class="small text-warning" <div class="input-group col-sm-offset-3 col-sm-3 input-group-sm">
ng-show="kubernetesApplicationCreationForm['existing_volumes_' + $index].$invalid || ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined" <div
> class="small text-warning"
<ng-messages for="kubernetesApplicationCreationForm['existing_volumes_' + $index].$error"> style="margin-top: 5px"
<p ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Volume is required.</p> ng-show="
</ng-messages> kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid || ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined
<p ng-if="ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined" "
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This volume is already used.</p
> >
<ng-messages for="kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$error">
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Size is required.</p>
<p class="vertical-center" ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This value must be greater than zero.</p>
</ng-messages>
<p class="vertical-center" ng-if="ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
You can only request up to
{{ ctrl.state.storages.availabilities[persistedFolder.StorageClass.Name] | kubernetesAppStorageRequestSizeHumanReadable }} for
{{ persistedFolder.StorageClass.Name }}
</p>
</div>
<div
class="small text-warning"
ng-show="kubernetesApplicationCreationForm['existing_volumes_' + $index].$invalid || ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined"
>
<ng-messages for="kubernetesApplicationCreationForm['existing_volumes_' + $index].$error">
<p ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Volume is required.</p>
</ng-messages>
<p ng-if="ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined"
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This volume is already used.</p
>
</div>
</div> </div>
</div>
<div class="input-group col-sm-1 input-group-sm"> </div> <div class="input-group col-sm-1 input-group-sm"> </div>
</div>
</div> </div>
</div>
<div class="col-sm-12 mt-2"> <div class="col-sm-12 mt-2">
<span <span
class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0" class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0"
ng-click="ctrl.addPersistedFolder()" ng-click="ctrl.addPersistedFolder()"
ng-if="ctrl.isAddPersistentFolderButtonShowed()" ng-if="ctrl.isAddPersistentFolderButtonShowed()"
data-cy="k8sAppCreate-addPersistentFolderButton" data-cy="k8sAppCreate-addPersistentFolderButton"
> >
<pr-icon icon="'plus'" size="'sm'"></pr-icon> Add persisted folder <pr-icon icon="'plus'" size="'sm'"></pr-icon> Add persisted folder
</span> </span>
</div>
</div> </div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->

Write Preview
Loading…
Cancel
Save