mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
refactor(app): migrate env var form section [EE-6232] (#10499)
* refactor(app): migrate env var form section [EE-6232] * allow undoing delete in inputlist
This commit is contained in:
Ali
GitHub
parent
6228314e3c
commit
488393007f
16 changed files with 274 additions and 209 deletions
|
|
@ -108,14 +108,14 @@ class KubernetesApplicationHelper {
|
|||
|
||||
/* #region ENV VARIABLES FV <> ENV */
|
||||
static generateEnvFromEnvVariables(envVariables) {
|
||||
_.remove(envVariables, (item) => item.NeedsDeletion);
|
||||
_.remove(envVariables, (item) => item.needsDeletion);
|
||||
const env = _.map(envVariables, (item) => {
|
||||
const res = new KubernetesApplicationEnvPayload();
|
||||
res.name = item.Name;
|
||||
if (item.Value === undefined) {
|
||||
res.name = item.name;
|
||||
if (item.value === undefined) {
|
||||
delete res.value;
|
||||
} else {
|
||||
res.value = item.Value;
|
||||
res.value = item.value;
|
||||
}
|
||||
return res;
|
||||
});
|
||||
|
|
@ -128,10 +128,10 @@ class KubernetesApplicationHelper {
|
|||
return;
|
||||
}
|
||||
const res = new KubernetesApplicationEnvironmentVariableFormValue();
|
||||
res.Name = item.name;
|
||||
res.Value = item.value;
|
||||
res.IsNew = false;
|
||||
res.NameIndex = item.name;
|
||||
res.name = item.name;
|
||||
res.value = item.value;
|
||||
res.isNew = false;
|
||||
res.nameIndex = item.name;
|
||||
return res;
|
||||
});
|
||||
return _.without(envVariables, undefined);
|
||||
|
|
|
|||
|
|
@ -70,12 +70,11 @@ export class KubernetesApplicationConfigurationFormValue {
|
|||
* KubernetesApplicationEnvironmentVariableFormValue Model
|
||||
*/
|
||||
const _KubernetesApplicationEnvironmentVariableFormValue = Object.freeze({
|
||||
Name: '',
|
||||
Value: '',
|
||||
IsSecret: false,
|
||||
NeedsDeletion: false,
|
||||
IsNew: true,
|
||||
NameIndex: '', // keep the original name for sorting
|
||||
name: '',
|
||||
value: '',
|
||||
needsDeletion: false,
|
||||
isNew: true,
|
||||
nameIndex: '', // keep the original name for sorting
|
||||
});
|
||||
|
||||
export class KubernetesApplicationEnvironmentVariableFormValue {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,9 @@ import { YAMLInspector } from '@/react/kubernetes/components/YAMLInspector';
|
|||
import { ApplicationsStacksDatatable } from '@/react/kubernetes/applications/ListView/ApplicationsStacksDatatable';
|
||||
import { NodesDatatable } from '@/react/kubernetes/cluster/HomeView/NodesDatatable';
|
||||
import { StackName } from '@/react/kubernetes/DeployView/StackName/StackName';
|
||||
import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema';
|
||||
|
||||
import { EnvironmentVariablesFieldset } from '@@/form-components/EnvironmentVariablesFieldset';
|
||||
|
||||
export const ngModule = angular
|
||||
.module('portainer.kubernetes.react.components', [])
|
||||
|
|
@ -174,3 +177,12 @@ withFormValidation(
|
|||
['values', 'onChange', 'appName', 'selector', 'isEditMode', 'namespace'],
|
||||
kubeServicesValidation
|
||||
);
|
||||
|
||||
withFormValidation(
|
||||
ngModule,
|
||||
EnvironmentVariablesFieldset,
|
||||
'kubeEnvironmentVariablesFieldset',
|
||||
['canUndoDelete'],
|
||||
// use kubeEnvVarValidationSchema instead of envVarValidation to add a regex matches rule
|
||||
kubeEnvVarValidationSchema
|
||||
);
|
||||
|
|
|
|||
|
|
@ -383,103 +383,12 @@
|
|||
<div class="col-sm-12 vertical-center">
|
||||
<label class="control-label !pt-0 text-left">Environment variables</label>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 form-inline mt-2">
|
||||
<div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables | orderBy: 'NameIndex'" class="mt-2">
|
||||
<div style="margin-top: 2px">
|
||||
<div class="col-sm-4 input-group input-group-sm mr-2">
|
||||
<div class="input-group col-sm-12 input-group-sm" ng-class="{ striked: envVar.NeedsDeletion }">
|
||||
<span class="input-group-addon required">name</span>
|
||||
<input
|
||||
type="text"
|
||||
name="environment_variable_name_{{ $index }}"
|
||||
class="form-control"
|
||||
ng-model="envVar.Name"
|
||||
ng-change="ctrl.onChangeEnvironmentName()"
|
||||
ng-pattern="/^[-._a-zA-Z][-._a-zA-Z0-9]*$/"
|
||||
placeholder="foo"
|
||||
ng-disabled="ctrl.formValues.Containers.length > 1"
|
||||
data-cy="k8sAppCreate-envVarName_{{ $index }}"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4 input-group input-group-sm mr-2" ng-class="{ striked: envVar.NeedsDeletion }">
|
||||
<span class="input-group-addon">value</span>
|
||||
<input
|
||||
type="text"
|
||||
name="environment_variable_value_{{ $index }}"
|
||||
class="form-control"
|
||||
ng-model="envVar.Value"
|
||||
placeholder="bar"
|
||||
ng-disabled="ctrl.formValues.Containers.length > 1"
|
||||
data-cy="k8sAppCreate-envVarValue_{{ $index }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-2 input-group input-group-sm" ng-if="ctrl.formValues.Containers.length <= 1">
|
||||
<button
|
||||
ng-if="!envVar.NeedsDeletion"
|
||||
class="btn btn-md btn-dangerlight btn-only-icon !ml-0"
|
||||
type="button"
|
||||
ng-click="ctrl.removeEnvironmentVariable(envVar)"
|
||||
>
|
||||
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
|
||||
</button>
|
||||
<button
|
||||
ng-if="envVar.NeedsDeletion"
|
||||
class="btn btn-sm btn-light btn-only-icon"
|
||||
type="button"
|
||||
ng-click="ctrl.restoreEnvironmentVariable(envVar)"
|
||||
data-cy="k8sAppCreate-removeEnvVarButton_{{ $index }}"
|
||||
>
|
||||
<pr-icon icon="'rotate-cw'" size="'md'"></pr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ng-show="
|
||||
kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
|
||||
ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
|
||||
"
|
||||
>
|
||||
<div class="col-sm-8 input-group input-group-sm">
|
||||
<div
|
||||
class="small"
|
||||
style="margin-top: 5px"
|
||||
ng-show="
|
||||
kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
|
||||
ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
|
||||
"
|
||||
>
|
||||
<ng-messages for="kubernetesApplicationCreationForm['environment_variable_name_' + $index].$error">
|
||||
<p ng-message="required" class="text-warning vertical-center"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'" class-="vertical-center"></pr-icon> Environment variable name is required.</p
|
||||
>
|
||||
<p ng-message="pattern" class="text-warning vertical-center"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This field must consist of alphabetic characters, digits, '_', '-', or '.', and must
|
||||
not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.</p
|
||||
>
|
||||
</ng-messages>
|
||||
<p class="text-warning vertical-center" ng-if="ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This environment variable is already defined.</p
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 mt-2">
|
||||
<span
|
||||
ng-if="ctrl.formValues.Containers.length <= 1"
|
||||
class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0"
|
||||
ng-click="ctrl.addEnvironmentVariable()"
|
||||
data-cy="k8sAppCreate-addEnvVarButton"
|
||||
>
|
||||
<pr-icon icon="'plus'" size="'sm'"></pr-icon> Add environment variable
|
||||
</span>
|
||||
<div class="col-sm-11 col-lg-10 mt-2">
|
||||
<kube-environment-variables-fieldset
|
||||
values="ctrl.formValues.EnvironmentVariables"
|
||||
on-change="(ctrl.onEnvironmentVariableChange)"
|
||||
can-undo-delete="true"
|
||||
></kube-environment-variables-fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #endregion -->
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ class KubernetesCreateApplicationController {
|
|||
this.supportGlobalDeployment = this.supportGlobalDeployment.bind(this);
|
||||
this.onChangePlacementType = this.onChangePlacementType.bind(this);
|
||||
this.onServicesChange = this.onServicesChange.bind(this);
|
||||
this.onEnvironmentVariableChange = this.onEnvironmentVariableChange.bind(this);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
|
|
@ -359,30 +360,14 @@ class KubernetesCreateApplicationController {
|
|||
/* #endregion */
|
||||
|
||||
/* #region ENVIRONMENT UI MANAGEMENT */
|
||||
addEnvironmentVariable() {
|
||||
this.formValues.EnvironmentVariables.push(new KubernetesApplicationEnvironmentVariableFormValue());
|
||||
}
|
||||
|
||||
restoreEnvironmentVariable(item) {
|
||||
item.NeedsDeletion = false;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
onChangeEnvironmentName() {
|
||||
this.state.duplicates.environmentVariables.refs = KubernetesFormValidationHelper.getDuplicates(_.map(this.formValues.EnvironmentVariables, 'Name'));
|
||||
this.state.duplicates.environmentVariables.hasRefs = Object.keys(this.state.duplicates.environmentVariables.refs).length > 0;
|
||||
onEnvironmentVariableChange(enviromnentVariables) {
|
||||
return this.$async(async () => {
|
||||
const newEnvVars = enviromnentVariables.map((envVar) => {
|
||||
const newEnvVar = new KubernetesApplicationEnvironmentVariableFormValue();
|
||||
return { newEnvVar, ...envVar };
|
||||
});
|
||||
this.formValues.EnvironmentVariables = newEnvVars;
|
||||
});
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue