1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 08:19:40 +02:00

refactor(custom-templates): render template variables [EE-2602] (#6937)

This commit is contained in:
Chaim Lev-Ari 2022-05-31 13:00:47 +03:00 committed by GitHub
parent 71c0e8e661
commit 1ccdb64938
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 829 additions and 47 deletions

View file

@ -1,5 +1,6 @@
import { buildOption } from '@/portainer/components/BoxSelector';
import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
class KubeCreateCustomTemplateViewController {
/* @ngInject */
@ -18,6 +19,7 @@ class KubeCreateCustomTemplateViewController {
actionInProgress: false,
formValidationError: '',
isEditorDirty: false,
isTemplateValid: true,
};
this.formValues = {
@ -28,26 +30,54 @@ class KubeCreateCustomTemplateViewController {
Note: '',
Logo: '',
AccessControlData: new AccessControlFormData(),
Variables: [],
};
this.onChangeFile = this.onChangeFile.bind(this);
this.onChangeFileContent = this.onChangeFileContent.bind(this);
this.onChangeMethod = this.onChangeMethod.bind(this);
this.onBeforeOnload = this.onBeforeOnload.bind(this);
this.handleChange = this.handleChange.bind(this);
this.onVariablesChange = this.onVariablesChange.bind(this);
}
onChangeMethod(method) {
this.state.method = method;
this.formValues.Variables = [];
}
onChangeFileContent(content) {
this.formValues.FileContent = content;
this.handleChange({ FileContent: content });
this.parseTemplate(content);
this.state.isEditorDirty = true;
}
parseTemplate(templateStr) {
const variables = getTemplateVariables(templateStr);
const isValid = !!variables;
this.state.isTemplateValid = isValid;
if (isValid) {
this.onVariablesChange(intersectVariables(this.formValues.Variables, variables));
}
}
onVariablesChange(value) {
this.handleChange({ Variables: value });
}
onChangeFile(file) {
this.handleChange({ File: file });
}
handleChange(values) {
return this.$async(async () => {
this.formValues.File = file;
this.formValues = {
...this.formValues,
...values,
};
});
}
@ -113,6 +143,11 @@ class KubeCreateCustomTemplateViewController {
return false;
}
if (!this.state.isTemplateValid) {
this.state.formValidationError = 'Template is not valid';
return false;
}
const isAdmin = this.Authentication.isAdmin();
const accessControlData = this.formValues.AccessControlData;
const error = this.FormValidator.validateAccessControl(accessControlData, isAdmin);
@ -130,6 +165,7 @@ class KubeCreateCustomTemplateViewController {
const { fileContent, type } = this.$state.params;
this.formValues.FileContent = fileContent;
this.parseTemplate(fileContent);
if (type) {
this.formValues.Type = +type;
}

View file

@ -36,6 +36,12 @@
<file-upload-description> You can upload a Manifest file from your computer. </file-upload-description>
</file-upload-form>
<custom-templates-variables-definition-field
value="$ctrl.formValues.Variables"
on-change="($ctrl.onVariablesChange)"
is-variables-names-from-parent="$ctrl.state.method === 'editor'"
></custom-templates-variables-definition-field>
<por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>
<!-- actions -->
@ -45,7 +51,7 @@
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="$ctrl.state.actionInProgress || $ctrl.form.$invalid || ($ctrl.state.method === 'editor' && !$ctrl.formValues.FileContent)"
ng-disabled="!$ctrl.state.isTemplateValid ||$ctrl.state.actionInProgress || $ctrl.form.$invalid || ($ctrl.state.method === 'editor' && !$ctrl.formValues.FileContent)"
ng-click="$ctrl.createCustomTemplate()"
button-spinner="$ctrl.state.actionInProgress"
>