Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 12:25:22 +02:00
Code Issues Releases Activity

refactor(ui): replace ng selectors with react-select [EE-3608] (#7203)

Browse source 
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari 2022-09-21 10:10:58 +03:00 • committed by GitHub
parent 1e21961e6a
commit ceaee4e175
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1188 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/kubernetes/views/configure/configure.html
View file

@ -299,19 +299,12 @@
</div>
</td>
<td>
<span
isteven-multi-select
input-model="class.availableAccessModes"
output-model="class.AccessModes"
button-label="Name"
item-label="Description"
tick-property="selected"
directive-id="{{ class.Name }}"
helper-elements=""
translation="{nothingSelected: 'Not configured'}"
data-cy="kubeSetup-storageAccessSelect{{ class.Name }}"
>
</span>
<storage-access-mode-selector
options="ctrl.availableAccessModes"
value="class.AccessModes"
on-change="(ctrl.onChangeStorageClassAccessMode)"
storage-class-name="class.Name"
></storage-access-mode-selector>
</td>
<td>
<div style="margin: 5px">

23
app/kubernetes/views/configure/configureController.js
View file

@ -45,6 +45,7 @@ class KubernetesConfigureController {
this.limitedFeatureAutoWindow = FeatureId.HIDE_AUTO_UPDATE_WINDOW;
this.onToggleAutoUpdate = this.onToggleAutoUpdate.bind(this);
this.onChangeEnableResourceOverCommit = this.onChangeEnableResourceOverCommit.bind(this);
this.onChangeStorageClassAccessMode = this.onChangeStorageClassAccessMode.bind(this);
}
/* #endregion */
@ -263,6 +264,18 @@ class KubernetesConfigureController {
});
}
onChangeStorageClassAccessMode(storageClassName, accessModes) {
return this.$scope.$evalAsync(() => {
const storageClass = this.StorageClasses.find((item) => item.Name === storageClassName);
if (!storageClass) {
throw new Error('Storage class not found');
}
storageClass.AccessModes = accessModes;
});
}
/* #region ON INIT */
async onInit() {
this.state = {
@ -288,18 +301,14 @@ class KubernetesConfigureController {
};
try {
this.availableAccessModes = new KubernetesStorageClassAccessPolicies();
[this.StorageClasses, this.endpoint] = await Promise.all([this.KubernetesStorageService.get(this.state.endpointId), this.EndpointService.endpoint(this.state.endpointId)]);
_.forEach(this.StorageClasses, (item) => {
item.availableAccessModes = new KubernetesStorageClassAccessPolicies();
const storage = _.find(this.endpoint.Kubernetes.Configuration.StorageClasses, (sc) => sc.Name === item.Name);
if (storage) {
item.selected = true;
_.forEach(storage.AccessModes, (access) => {
const mode = _.find(item.availableAccessModes, { Name: access });
if (mode) {
mode.selected = true;
}
});
item.AccessModes = storage.AccessModes.map((name) => this.availableAccessModes.find((accessMode) => accessMode.Name === name));
}
});

22
app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
View file

@ -52,25 +52,19 @@
</span>
</div>
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label text-left"> Select user(s) and/or team(s) </label>
<label class="col-sm-3 col-lg-2 control-label text-left" for="users-selector"> Select user(s) and/or team(s) </label>
<div class="col-sm-9 col-lg-4">
<span class="small text-muted" ng-if="ctrl.availableUsersAndTeams.length === 0">
No user nor team access has been set on the environment. Head over to the
<a ui-sref="portainer.endpoints">Environments view</a> to manage them.
</span>
<span
isteven-multi-select
<namespace-access-users-selector
ng-if="ctrl.availableUsersAndTeams.length > 0"
input-model="ctrl.availableUsersAndTeams"
output-model="ctrl.formValues.multiselectOutput"
button-label="icon Name"
item-label="icon Name"
tick-property="ticked"
helper-elements="filter"
search-property="Name"
translation="{nothingSelected: 'Select one or more users and/or teams', search: 'Search...'}"
>
</span>
input-id="users-selector"
value="ctrl.formValues.multiselectOutput"
options="ctrl.availableUsersAndTeams"
on-change="(ctrl.onUsersAndTeamsChange)"
></namespace-access-users-selector>
</div>
</div>
@ -80,7 +74,7 @@
<button
type="submit"
class="btn btn-primary btn-sm !ml-0 vertical-center"
ng-disabled="(ctrl.availableUsersAndTeams | filter:{ticked:true}).length === 0 || ctrl.actionInProgress"
ng-disabled="ctrl.formValues.multiselectOutput.length === 0 || ctrl.actionInProgress"
ng-click="ctrl.authorizeAccess()"
button-spinner="ctrl.actionInProgress"
>

12
app/kubernetes/views/resource-pools/access/resourcePoolAccessController.js
View file

@ -6,9 +6,10 @@ import KubernetesConfigMapHelper from 'Kubernetes/helpers/configMapHelper';
class KubernetesResourcePoolAccessController {
/* @ngInject */
constructor($async, $state, Notifications, KubernetesResourcePoolService, KubernetesConfigMapService, GroupService, AccessService) {
constructor($async, $state, $scope, Notifications, KubernetesResourcePoolService, KubernetesConfigMapService, GroupService, AccessService) {
this.$async = $async;
this.$state = $state;
this.$scope = $scope;
this.Notifications = Notifications;
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
this.KubernetesConfigMapService = KubernetesConfigMapService;
@ -19,7 +20,7 @@ class KubernetesResourcePoolAccessController {
this.onInit = this.onInit.bind(this);
this.authorizeAccessAsync = this.authorizeAccessAsync.bind(this);
this.unauthorizeAccessAsync = this.unauthorizeAccessAsync.bind(this);
this.onUsersAndTeamsChange = this.onUsersAndTeamsChange.bind(this);
this.unauthorizeAccess = this.unauthorizeAccess.bind(this);
}
@ -72,6 +73,7 @@ class KubernetesResourcePoolAccessController {
return false;
});
}
this.availableUsersAndTeams = _.without(endpointAccesses.authorizedUsersAndTeams, ...this.authorizedUsersAndTeams);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve namespace information');
@ -100,6 +102,12 @@ class KubernetesResourcePoolAccessController {
}
}
onUsersAndTeamsChange(value) {
this.$scope.$evalAsync(() => {
this.formValues.multiselectOutput = value;
});
}
authorizeAccess() {
return this.$async(this.authorizeAccessAsync);
}

21
app/kubernetes/views/resource-pools/create/createResourcePool.html
View file

@ -403,7 +403,7 @@
</div>
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label text-left !pt-0"> Select registries </label>
<label class="col-sm-3 col-lg-2 control-label text-left !pt-0" for="registries-selector"> Select registries </label>
<div class="col-sm-8 col-lg-9">
<span class="small text-muted" ng-if="!$ctrl.registries.length && $ctrl.state.isAdmin">
No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
@ -411,20 +411,13 @@
<span class="small text-muted" ng-if="!$ctrl.registries.length && !$ctrl.state.isAdmin">
No registries available. Contact your administrator to create a container registry.
</span>
<span
isteven-multi-select
ng-if="$ctrl.registries.length"
input-model="$ctrl.registries"
output-model="$ctrl.formValues.Registries"
button-label="Name"
item-label="Name"
tick-property="Checked"
helper-elements="filter"
search-property="Name"
translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
data-cy="namespaceCreate-registrySelect"
<create-namespace-registries-selector
input-id="'registries-selector'"
value="$ctrl.formValues.Registries"
on-change="($ctrl.onRegistriesChange)"
options="$ctrl.registries"
>
</span>
</create-namespace-registries-selector>
</div>
</div>
<!-- #endregion -->

7
app/kubernetes/views/resource-pools/create/createResourcePoolController.js
View file

@ -39,6 +39,7 @@ class KubernetesCreateResourcePoolController {
this.onToggleStorageQuota = this.onToggleStorageQuota.bind(this);
this.onToggleLoadBalancerQuota = this.onToggleLoadBalancerQuota.bind(this);
this.onToggleResourceQuota = this.onToggleResourceQuota.bind(this);
this.onRegistriesChange = this.onRegistriesChange.bind(this);
}
/* #endregion */
@ -92,6 +93,12 @@ class KubernetesCreateResourcePoolController {
});
}
onRegistriesChange(registries) {
return this.$scope.$evalAsync(() => {
this.formValues.Registries = registries;
});
}
addHostname(ingressClass) {
ingressClass.Hosts.push(new KubernetesResourcePoolIngressClassHostFormValue());
}

22
app/kubernetes/views/resource-pools/edit/resourcePool.html
View file

@ -364,27 +364,21 @@
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label text-left !pt-0"> Select registries </label>
<div class="col-sm-8 col-lg-9">
<label class="col-sm-3 col-lg-2 control-label text-left !pt-0" for="registries-selector"> Select registries </label>
<div class="col-sm-9 col-lg-4">
<span class="small text-muted" ng-if="!ctrl.registries.length && ctrl.isAdmin">
No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
</span>
<span class="small text-muted" ng-if="!ctrl.registries.length && !ctrl.isAdmin">
No registries available. Contact your administrator to create a container registry.
</span>
<span
isteven-multi-select
ng-if="ctrl.registries.length"
input-model="ctrl.registries"
output-model="ctrl.formValues.Registries"
button-label="Name"
item-label="Name"
tick-property="Checked"
helper-elements="filter"
search-property="Name"
translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
<create-namespace-registries-selector
input-id="'registries-selector'"
value="ctrl.formValues.Registries"
on-change="(ctrl.onRegistriesChange)"
options="ctrl.registries"
>
</span>
</create-namespace-registries-selector>
</div>
</div>
</div>

7
app/kubernetes/views/resource-pools/edit/resourcePoolController.js
View file

@ -73,6 +73,7 @@ class KubernetesResourcePoolController {
this.getEvents = this.getEvents.bind(this);
this.onToggleLoadBalancersQuota = this.onToggleLoadBalancersQuota.bind(this);
this.onToggleStorageQuota = this.onToggleStorageQuota.bind(this);
this.onRegistriesChange = this.onRegistriesChange.bind(this);
}
/* #endregion */
@ -101,6 +102,12 @@ class KubernetesResourcePoolController {
}
/* #endregion */
onRegistriesChange(registries) {
return this.$scope.$evalAsync(() => {
this.formValues.Registries = registries;
});
}
onToggleLoadBalancersQuota(checked) {
return this.$scope.$evalAsync(() => {
this.formValues.UseLoadBalancersQuota = checked;