feat(app): sort environment variables (#4815)

* feat(app): sort environment variables

* feat(k8s/application): improve the sorting for the env variables when creating/editing application

* feat(k8s/application): update the removal of the env var

* feat(docker/service): improve the sorting order for env var in service edition view
pull/4889/head
Alice Groux 2021-02-18 14:46:26 +01:00 committed by GitHub
parent 86335a4357
commit 387bbeceba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 24 additions and 15 deletions

View File

@ -96,6 +96,7 @@ angular.module('portainer.docker').controller('ContainerController', [
});
}
$scope.container.Config.Env = _.sortBy($scope.container.Config.Env, _.toLower);
const inSwarm = $scope.container.Config.Labels['com.docker.swarm.service.id'];
const autoRemove = $scope.container.HostConfig.AutoRemove;
const admin = Authentication.isAdmin();

View File

@ -154,6 +154,7 @@ angular.module('portainer.docker').controller('ImageController', [
.then(function success(data) {
$scope.image = data.image;
$scope.history = data.history;
$scope.image.Env = _.sortBy($scope.image.Env, _.toLower);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve image details');

View File

@ -19,7 +19,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="var in service.EnvironmentVariables">
<tr ng-repeat="var in service.EnvironmentVariables | orderBy: 'originalKey'">
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon fit-text-size">name</span>
@ -39,7 +39,7 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, $index)" ng-disabled="isUpdating">
<button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, var)" ng-disabled="isUpdating">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</span>

View File

@ -115,8 +115,9 @@ angular.module('portainer.docker').controller('ServiceController', [
service.EnvironmentVariables.push({ key: '', value: '', originalValue: '' });
updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
};
$scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, index) {
var removedElement = service.EnvironmentVariables.splice(index, 1);
$scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, item) {
const index = service.EnvironmentVariables.indexOf(item);
const removedElement = service.EnvironmentVariables.splice(index, 1);
if (removedElement !== null) {
updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
}

View File

@ -130,6 +130,7 @@ class KubernetesApplicationHelper {
res.Name = item.name;
res.Value = item.value;
res.IsNew = false;
res.NameIndex = item.name;
return res;
});
return _.without(envVariables, undefined);

View File

@ -79,6 +79,7 @@ const _KubernetesApplicationEnvironmentVariableFormValue = Object.freeze({
IsSecret: false,
NeedsDeletion: false,
IsNew: true,
NameIndex: '', // keep the original name for sorting
});
export class KubernetesApplicationEnvironmentVariableFormValue {

View File

@ -142,7 +142,7 @@
</div>
<div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables" style="margin-top: 2px;">
<div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables | orderBy: 'NameIndex'" style="margin-top: 2px;">
<div class="col-sm-4 input-group input-group-sm" style="vertical-align: top;">
<div class="input-group col-sm-12 input-group-sm" ng-class="{ striked: envVar.NeedsDeletion }">
<span class="input-group-addon">name</span>
@ -191,10 +191,10 @@
</div>
<div class="input-group col-sm-2 input-group-sm" ng-if="ctrl.formValues.Containers.length <= 1">
<button ng-if="!envVar.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeEnvironmentVariable($index)">
<button ng-if="!envVar.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeEnvironmentVariable(envVar)">
<i class="fa fa-trash-alt" aria-hidden="true"></i>
</button>
<button ng-if="envVar.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreEnvironmentVariable($index)">
<button ng-if="envVar.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreEnvironmentVariable(envVar)">
<i class="fa fa-trash-restore" aria-hidden="true"></i>
</button>
</div>

View File

@ -165,15 +165,19 @@ class KubernetesCreateApplicationController {
this.formValues.EnvironmentVariables.push(new KubernetesApplicationEnvironmentVariableFormValue());
}
restoreEnvironmentVariable(index) {
this.formValues.EnvironmentVariables[index].NeedsDeletion = false;
restoreEnvironmentVariable(item) {
item.NeedsDeletion = false;
}
removeEnvironmentVariable(index) {
if (this.state.isEdit && !this.formValues.EnvironmentVariables[index].IsNew) {
this.formValues.EnvironmentVariables[index].NeedsDeletion = true;
} else {
this.formValues.EnvironmentVariables.splice(index, 1);
removeEnvironmentVariable(item) {
const index = this.formValues.EnvironmentVariables.indexOf(item);
if (index !== -1) {
const envVar = this.formValues.EnvironmentVariables[index];
if (!envVar.IsNew) {
envVar.NeedsDeletion = true;
} else {
this.formValues.EnvironmentVariables.splice(index, 1);
}
}
this.onChangeEnvironmentName();
}

View File

@ -406,7 +406,7 @@
<td style="width: 25%;">Configuration</td>
</tr>
<tbody ng-repeat="container in ctrl.application.Containers" style="border-top: 0;">
<tr ng-repeat="envvar in container.Env track by $index">
<tr ng-repeat="envvar in container.Env | orderBy: 'name'">
<td>
{{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT"