feat(ui): renovate the Docker volume creation page EE-3514 (#7380)

pull/7186/head
andres-portainer 2022-08-01 14:46:09 -03:00 committed by GitHub
parent 1e78234f04
commit ff32e87b97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 20 deletions

View File

@ -13,7 +13,7 @@
</div>
</div>
<div class="form-group" ng-if="$ctrl.model.UseRegistry">
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2">Image</label>
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image</label>
<div ng-class="$ctrl.inputClass" class="col-sm-8">
<div class="input-group">
<span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
@ -47,12 +47,12 @@
<div ng-if="!$ctrl.model.UseRegistry">
<div class="form-group">
<span class="small">
<p class="text-muted mb-5" style="margin-left: 15px">
<p class="text-muted ml-4">
<pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
When using advanced mode, image and repository <b>must be</b> publicly available.
</p>
</span>
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2">Image </label>
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image </label>
<div ng-class="$ctrl.inputClass" class="col-sm-8">
<input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
</div>
@ -75,10 +75,10 @@
<div class="col-sm-12">
<p>
<a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
<i class="fa fa-database space-right" aria-hidden="true"></i> Simple mode
<pr-icon icon="'database'" feather="true"> </pr-icon> Simple mode
</a>
<a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
<i class="fa fa-globe space-right" aria-hidden="true"></i> Advanced mode
<pr-icon icon="'globe'" feather="true"> </pr-icon> Advanced mode
</a>
</p>
</div>

View File

@ -4,7 +4,7 @@
<div class="col-sm-12 form-section-title"> CIFS Settings </div>
<!-- address-input -->
<div class="form-group col-md-12">
<label for="cifs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
<label for="cifs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
<div class="col-sm-10 col-md-11">
<input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="cifs_address" placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx" required />
</div>
@ -19,7 +19,7 @@
<!-- !address-input -->
<!-- mount-point-input -->
<div class="form-group col-md-12">
<label for="cifs_share" class="col-sm-2 col-md-1 control-label text-left">Share</label>
<label for="cifs_share" class="col-sm-2 col-md-1 control-label text-left required">Share</label>
<div class="col-sm-10 col-md-11">
<input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required />
</div>
@ -49,7 +49,7 @@
<!-- !version-input -->
<!-- username -->
<div class="form-group col-md-12">
<label for="cifs_username" class="col-sm-2 col-md-1 control-label text-left">Username</label>
<label for="cifs_username" class="col-sm-2 col-md-1 control-label text-left required">Username</label>
<div class="col-sm-10 col-md-11">
<input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required />
</div>

View File

@ -4,7 +4,7 @@
<div class="col-sm-12 form-section-title"> NFS Settings </div>
<!-- address-input -->
<div class="form-group col-md-12">
<label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
<label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
<div class="col-sm-10 col-md-11">
<input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
</div>
@ -34,7 +34,7 @@
<!-- !version-input -->
<!-- mount-point-input -->
<div class="form-group col-md-12">
<label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left">Mount point</label>
<label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left required">Mount point</label>
<div class="col-sm-10 col-md-11">
<input
type="text"

View File

@ -38,6 +38,24 @@ angular.module('portainer.docker').controller('CreateVolumeController', [
$scope.formValues.DriverOptions.splice(index, 1);
};
$scope.onUseNFSChange = onUseNFSChange;
function onUseNFSChange(checked) {
return $scope.$evalAsync(() => {
$scope.formValues.NFSData.useNFS = checked;
$scope.formValues.CIFSData.useCIFS = false;
});
}
$scope.onUseCIFSChange = onUseCIFSChange;
function onUseCIFSChange(checked) {
return $scope.$evalAsync(() => {
$scope.formValues.CIFSData.useCIFS = checked;
$scope.formValues.NFSData.useNFS = false;
});
}
function validateForm(accessControlData, isAdmin) {
$scope.state.formValidationError = '';
var error = '';

View File

@ -57,22 +57,14 @@
<!-- !driver-options -->
<!-- nfs-management -->
<div class="form-group col-md-12">
<label for="useNFS" class="control-label text-left"> Use NFS volume </label>
<label class="switch" style="margin-left: 20px">
<input type="checkbox" name="useNFS" ng-model="formValues.NFSData.useNFS" ng-click="formValues.CIFSData.useCIFS = false" />
<i></i>
</label>
<por-switch-field checked="formValues.NFSData.useNFS" label="'Use NFS volume'" on-change="(onUseNFSChange)"></por-switch-field>
<div ng-if="formValues.NFSData.useNFS" class="small text-muted" style="margin-top: 10px"> Ensure <code>nfs-utils</code> are installed on your hosts. </div>
</div>
<volumes-nfs-form data="formValues.NFSData" ng-show="formValues.Driver === 'local'"></volumes-nfs-form>
<!-- !nfs-management -->
<!-- cifs-management -->
<div class="form-group col-md-12">
<label for="useCIFS" class="control-label text-left"> Use CIFS volume </label>
<label class="switch" style="margin-left: 20px">
<input type="checkbox" name="useCIFS" ng-model="formValues.CIFSData.useCIFS" ng-click="formValues.NFSData.useNFS = false" />
<i></i>
</label>
<por-switch-field checked="formValues.CIFSData.useCIFS" label="'Use CIFS volume'" on-change="(onUseCIFSChange)"></por-switch-field>
<div ng-if="formValues.CIFSData.useCIFS" class="small text-muted" style="margin-top: 10px"> Ensure <code>cifs-utils</code> are installed on your hosts. </div>
</div>
<volumes-cifs-form data="formValues.CIFSData" ng-show="formValues.Driver === 'local'"></volumes-cifs-form>