mirror of https://github.com/portainer/portainer
219 lines
6.3 KiB
JavaScript
219 lines
6.3 KiB
JavaScript
import { buildOption } from '@/portainer/components/BoxSelector';
|
|
import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
|
|
import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
|
|
import { isBE } from '@/portainer/feature-flags/feature-flags.service';
|
|
|
|
class KubeCreateCustomTemplateViewController {
|
|
/* @ngInject */
|
|
constructor($async, $state, Authentication, CustomTemplateService, FormValidator, ModalService, Notifications, ResourceControlService) {
|
|
Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, ModalService, Notifications, ResourceControlService });
|
|
|
|
this.methodOptions = [
|
|
buildOption('method_editor', 'svg-custom', 'Web editor', 'Use our Web editor', 'editor'),
|
|
buildOption('method_upload', 'svg-upload', 'Upload', 'Upload from your computer', 'upload'),
|
|
];
|
|
|
|
this.templates = null;
|
|
this.isTemplateVariablesEnabled = isBE;
|
|
|
|
this.state = {
|
|
method: 'editor',
|
|
actionInProgress: false,
|
|
formValidationError: '',
|
|
isEditorDirty: false,
|
|
isTemplateValid: true,
|
|
};
|
|
|
|
this.formValues = {
|
|
FileContent: '',
|
|
File: null,
|
|
Title: '',
|
|
Description: '',
|
|
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.handleChange({ FileContent: content });
|
|
this.parseTemplate(content);
|
|
this.state.isEditorDirty = true;
|
|
}
|
|
|
|
parseTemplate(templateStr) {
|
|
if (!this.isTemplateVariablesEnabled) {
|
|
return;
|
|
}
|
|
|
|
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 = {
|
|
...this.formValues,
|
|
...values,
|
|
};
|
|
});
|
|
}
|
|
|
|
async createCustomTemplate() {
|
|
return this.$async(async () => {
|
|
const { method } = this.state;
|
|
|
|
if (!this.validateForm(method)) {
|
|
return;
|
|
}
|
|
|
|
this.state.actionInProgress = true;
|
|
try {
|
|
const formValues = { ...this.formValues, Variables: null };
|
|
if (this.formValues.Variables.length > 0) {
|
|
formValues.Variables = JSON.stringify(this.formValues.Variables);
|
|
}
|
|
|
|
const customTemplate = await this.createCustomTemplateByMethod(method, formValues);
|
|
|
|
const accessControlData = this.formValues.AccessControlData;
|
|
const userDetails = this.Authentication.getUserDetails();
|
|
const userId = userDetails.ID;
|
|
await this.ResourceControlService.applyResourceControl(userId, accessControlData, customTemplate.ResourceControl);
|
|
|
|
this.Notifications.success('Custom template successfully created');
|
|
this.state.isEditorDirty = false;
|
|
this.$state.go('kubernetes.templates.custom');
|
|
} catch (err) {
|
|
this.Notifications.error('Failure', err, 'Failed creating custom template');
|
|
} finally {
|
|
this.state.actionInProgress = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
createCustomTemplateByMethod(method, template) {
|
|
template.Type = 3;
|
|
|
|
switch (method) {
|
|
case 'editor':
|
|
return this.createCustomTemplateFromFileContent(template);
|
|
case 'upload':
|
|
return this.createCustomTemplateFromFileUpload(template);
|
|
}
|
|
}
|
|
|
|
createCustomTemplateFromFileContent(template) {
|
|
return this.CustomTemplateService.createCustomTemplateFromFileContent(template);
|
|
}
|
|
|
|
createCustomTemplateFromFileUpload(template) {
|
|
return this.CustomTemplateService.createCustomTemplateFromFileUpload(template);
|
|
}
|
|
|
|
validateForm(method) {
|
|
this.state.formValidationError = '';
|
|
|
|
if (method === 'editor' && this.formValues.FileContent === '') {
|
|
this.state.formValidationError = 'Template file content must not be empty';
|
|
return false;
|
|
}
|
|
|
|
const title = this.formValues.Title;
|
|
const isNotUnique = this.templates.some((template) => template.Title === title);
|
|
if (isNotUnique) {
|
|
this.state.formValidationError = 'A template with the same name already exists';
|
|
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);
|
|
|
|
if (error) {
|
|
this.state.formValidationError = error;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
async $onInit() {
|
|
return this.$async(async () => {
|
|
const { fileContent, type } = this.$state.params;
|
|
|
|
this.formValues.FileContent = fileContent;
|
|
this.parseTemplate(fileContent);
|
|
if (type) {
|
|
this.formValues.Type = +type;
|
|
}
|
|
|
|
try {
|
|
this.templates = await this.CustomTemplateService.customTemplates(3);
|
|
} catch (err) {
|
|
this.Notifications.error('Failure loading', err, 'Failed loading custom templates');
|
|
}
|
|
|
|
this.state.loading = false;
|
|
|
|
window.addEventListener('beforeunload', this.onBeforeOnload);
|
|
});
|
|
}
|
|
|
|
$onDestroy() {
|
|
window.removeEventListener('beforeunload', this.onBeforeOnload);
|
|
}
|
|
|
|
isEditorDirty() {
|
|
return this.state.method === 'editor' && this.formValues.FileContent && this.state.isEditorDirty;
|
|
}
|
|
|
|
onBeforeOnload(event) {
|
|
if (this.isEditorDirty()) {
|
|
event.preventDefault();
|
|
event.returnValue = '';
|
|
}
|
|
}
|
|
|
|
uiCanExit() {
|
|
if (this.isEditorDirty()) {
|
|
return this.ModalService.confirmWebEditorDiscard();
|
|
}
|
|
}
|
|
}
|
|
|
|
export default KubeCreateCustomTemplateViewController;
|