Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

feat(kube): introduce custom templates [EE-1125] (#5434)

Browse source 
* feat(kube): introduce custom templates

refactor(customtemplates): use build option

chore(deps): upgrade yaml parser

feat(customtemplates): add and edit RC to kube templates

fix(kube): show docker icon

fix(custom-templates): save rc

* fix(kube/templates): route to correct routes
This commit is contained in:
Chaim Lev-Ari 2021-09-02 08:28:51 +03:00 • committed by GitHub
parent a176ec5ace
commit e4fe4f9a43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1562 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/kubernetes/custom-templates/kube-edit-custom-template-view/index.js Normal file
View file

@ -0,0 +1,6 @@
import controller from './kube-edit-custom-template-view.controller.js';
export const kubeEditCustomTemplateView = {
templateUrl: './kube-edit-custom-template-view.html',
controller,
};

143
app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js Normal file
View file

@ -0,0 +1,143 @@
import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
import { ResourceControlViewModel } from '@/portainer/models/resourceControl/resourceControl';
class KubeEditCustomTemplateViewController {
/* @ngInject */
constructor($async, $state, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
Object.assign(this, { $async, $state, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
this.formValues = null;
this.state = {
formValidationError: '',
isEditorDirty: false,
};
this.templates = [];
this.getTemplate = this.getTemplate.bind(this);
this.submitAction = this.submitAction.bind(this);
this.onChangeFileContent = this.onChangeFileContent.bind(this);
this.onBeforeUnload = this.onBeforeUnload.bind(this);
}
getTemplate() {
return this.$async(async () => {
try {
const { id } = this.$state.params;
const [template, file] = await Promise.all([this.CustomTemplateService.customTemplate(id), this.CustomTemplateService.customTemplateFile(id)]);
template.FileContent = file;
this.formValues = template;
this.oldFileContent = this.formValues.FileContent;
this.formValues.ResourceControl = new ResourceControlViewModel(template.ResourceControl);
this.formValues.AccessControlData = new AccessControlFormData();
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve custom template data');
}
});
}
validateForm() {
this.state.formValidationError = '';
if (!this.formValues.FileContent) {
this.state.formValidationError = 'Template file content must not be empty';
return false;
}
const title = this.formValues.Title;
const id = this.$state.params.id;
const isNotUnique = this.templates.some((template) => template.Title === title && template.Id != id);
if (isNotUnique) {
this.state.formValidationError = `A template with the name ${title} already exists`;
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;
}
submitAction() {
return this.$async(async () => {
if (!this.validateForm()) {
return;
}
this.actionInProgress = true;
try {
await this.CustomTemplateService.updateCustomTemplate(this.formValues.Id, this.formValues);
const userDetails = this.Authentication.getUserDetails();
const userId = userDetails.ID;
await this.ResourceControlService.applyResourceControl(userId, this.formValues.AccessControlData, this.formValues.ResourceControl);
this.Notifications.success('Custom template successfully updated');
this.state.isEditorDirty = false;
this.$state.go('kubernetes.templates.custom');
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to update custom template');
} finally {
this.actionInProgress = false;
}
});
}
onChangeFileContent(value) {
if (stripSpaces(this.formValues.FileContent) !== stripSpaces(value)) {
this.formValues.FileContent = value;
this.state.isEditorDirty = true;
}
}
async $onInit() {
this.$async(async () => {
this.getTemplate();
try {
this.templates = await this.CustomTemplateService.customTemplates();
} catch (err) {
this.Notifications.error('Failure loading', err, 'Failed loading custom templates');
}
window.addEventListener('beforeunload', this.onBeforeUnload);
});
}
isEditorDirty() {
return this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty;
}
uiCanExit() {
if (this.isEditorDirty()) {
return this.ModalService.confirmWebEditorDiscard();
}
}
onBeforeUnload(event) {
if (this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
event.preventDefault();
event.returnValue = '';
return '';
}
}
$onDestroy() {
window.removeEventListener('beforeunload', this.onBeforeUnload);
}
}
export default KubeEditCustomTemplateViewController;
function stripSpaces(str = '') {
return str.replace(/(\r\n|\n|\r)/gm, '');
}

60
app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html Normal file
View file

@ -0,0 +1,60 @@
<rd-header>
<rd-header-title title-text="Edit Custom Template">
<a data-toggle="tooltip" title="Refresh" ui-sref="kubernetes.templates.custom.edit({id:$ctrl.formValues.Id})" ui-sref-opts="{reload: true}">
<i class="fa fa-sync" aria-hidden="true"></i>
</a>
</rd-header-title>
<rd-header-content> <a ui-sref="kubernetes.templates.custom">Custom templates</a> &gt; {{ $ctrl.formValues.Title }} </rd-header-content>
</rd-header>
<div class="row" ng-if="$ctrl.formValues">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal" name="$ctrl.form">
<custom-template-common-fields form-values="$ctrl.formValues"></custom-template-common-fields>
<web-editor-form
identifier="template-editor"
value="$ctrl.formValues.FileContent"
on-change="($ctrl.onChangeFileContent)"
ng-required="true"
yml="true"
placeholder="# Define or paste the content of your manifest file here"
>
<editor-description>
<p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>
<p>
You can get more information about Kubernetes file format in the
<a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
</p>
</editor-description>
</web-editor-form>
<por-access-control-form form-data="$ctrl.formValues.AccessControlData" resource-control="$ctrl.formValues.ResourceControl"></por-access-control-form>
<div class="col-sm-12 form-section-title">
Actions
</div>
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="$ctrl.actionInProgress || $ctrl.form.$invalid || !$ctrl.formValues.Title || !$ctrl.formValues.FileContent"
ng-click="$ctrl.submitAction()"
button-spinner="$ctrl.actionInProgress"
>
<span ng-hide="$ctrl.actionInProgress">Update the template</span>
<span ng-show="$ctrl.actionInProgress">Update in progress...</span>
</button>
<span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px;">
{{ $ctrl.state.formValidationError }}
</span>
</div>
</div>
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>