1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00

feat(k8s): front end backport to CE

This commit is contained in:
Felix Han 2021-08-31 11:10:22 +12:00 committed by Dmitry Salakhov
parent b5c59c8982
commit a5058e8f1e
17 changed files with 159 additions and 69 deletions

View file

@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationsView', {
controllerAs: 'ctrl',
bindings: {
$transition$: '<',
endpoint: '<',
},
});

View file

@ -7,7 +7,7 @@ import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
class KubernetesApplicationsController {
/* @ngInject */
constructor($async, $state, Notifications, KubernetesApplicationService, Authentication, ModalService, LocalStorage) {
constructor($async, $state, Notifications, KubernetesApplicationService, Authentication, ModalService, LocalStorage, StackService) {
this.$async = $async;
this.$state = $state;
this.Notifications = Notifications;
@ -16,6 +16,7 @@ class KubernetesApplicationsController {
this.Authentication = Authentication;
this.ModalService = ModalService;
this.LocalStorage = LocalStorage;
this.StackService = StackService;
this.onInit = this.onInit.bind(this);
this.getApplications = this.getApplications.bind(this);
@ -66,6 +67,9 @@ class KubernetesApplicationsController {
for (const application of selectedItems) {
try {
await this.KubernetesApplicationService.delete(application);
if (application.StackId) {
await this.StackService.remove({ Id: application.StackId }, false, this.endpoint.Id);
}
this.Notifications.success('Application successfully removed', application.Name);
const index = this.applications.indexOf(application);
this.applications.splice(index, 1);

View file

@ -21,6 +21,8 @@
class-name="text-muted"
url="ctrl.stack.GitConfig.URL"
config-file-path="ctrl.stack.GitConfig.ConfigFilePath"
additional-files="ctrl.stack.AdditionalFiles"
type="application"
></git-form-info-panel>
<div class="col-sm-12 form-section-title" ng-if="ctrl.state.appType === ctrl.KubernetesDeploymentTypes.APPLICATION_FORM">
Namespace
@ -55,11 +57,11 @@
<!-- #endregion -->
<!-- #region Git repository -->
<kubernetes-app-git-form
<kubernetes-redeploy-app-git-form
ng-if="ctrl.state.appType === ctrl.KubernetesDeploymentTypes.GIT"
stack="ctrl.stack"
namespace="ctrl.formValues.ResourcePool.Namespace.Name"
></kubernetes-app-git-form>
></kubernetes-redeploy-app-git-form>
<!-- #endregion -->
<!-- #region web editor -->

View file

@ -34,32 +34,16 @@
<box-selector radio-name="method" ng-model="ctrl.state.BuildMethod" options="ctrl.methodOptions" data-cy="k8sAppDeploy-buildSelector"></box-selector>
<!-- repository -->
<div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
<div class="col-sm-12 form-section-title">
Git repository
</div>
<git-form-url-field value="ctrl.formValues.RepositoryURL" on-change="(ctrl.onRepoUrlChange)"></git-form-url-field>
<git-form-ref-field value="ctrl.formValues.RepositoryReferenceName" on-change="(ctrl.onRepoRefChange)"></git-form-ref-field>
<div class="form-group">
<span class="col-sm-12 text-muted small">
Indicate the path to the yaml file from the root of your repository.
</span>
</div>
<div class="form-group">
<label for="stack_repository_path" class="col-sm-2 control-label text-left">Manifest path</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
ng-model="ctrl.formValues.FilePathInRepository"
id="stack_manifest_path"
placeholder="deployment.yml"
data-cy="k8sAppDeploy-gitManifestPath"
/>
</div>
</div>
<git-form-auth-fieldset model="ctrl.formValues" on-change="(ctrl.onChangeFormValues)"></git-form-auth-fieldset>
</div>
<git-form
ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
model="ctrl.formValues"
on-change="(ctrl.onChangeFormValues)"
additional-file="true"
auto-update="true"
show-auth-explanation="true"
path-text-title="Manifest path"
path-placeholder="deployment.yml"
></git-form>
<!-- !repository -->
<!-- editor -->

View file

@ -1,20 +1,22 @@
import angular from 'angular';
import _ from 'lodash-es';
import stripAnsi from 'strip-ansi';
import uuidv4 from 'uuid/v4';
import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods } from 'Kubernetes/models/deploy';
import { buildOption } from '@/portainer/components/box-selector';
class KubernetesDeployController {
/* @ngInject */
constructor($async, $state, $window, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
constructor($async, $state, $window, $analytics, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService, WebhookHelper) {
this.$async = $async;
this.$state = $state;
this.$window = $window;
this.$analytics = $analytics;
this.ModalService = ModalService;
this.Notifications = Notifications;
this.EndpointProvider = EndpointProvider;
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
this.StackService = StackService;
this.WebhookHelper = WebhookHelper;
this.deployOptions = [
buildOption('method_kubernetes', 'fa fa-cubes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES),
@ -35,7 +37,19 @@ class KubernetesDeployController {
isEditorDirty: false,
};
this.formValues = {};
this.formValues = {
RepositoryURL: '',
RepositoryReferenceName: '',
RepositoryAuthentication: true,
RepositoryUsername: '',
RepositoryPassword: '',
AdditionalFiles: [],
ComposeFilePathInRepository: 'deployment.yml',
RepositoryAutomaticUpdates: true,
RepositoryMechanism: 'Interval',
RepositoryFetchInterval: '5m',
RepositoryWebhookURL: this.WebhookHelper.returnStackWebhookUrl(uuidv4()),
};
this.ManifestDeployTypes = KubernetesDeployManifestTypes;
this.BuildMethods = KubernetesDeployBuildMethods;
this.endpointId = this.EndpointProvider.endpointID();
@ -45,16 +59,12 @@ class KubernetesDeployController {
this.onChangeFileContent = this.onChangeFileContent.bind(this);
this.getNamespacesAsync = this.getNamespacesAsync.bind(this);
this.onChangeFormValues = this.onChangeFormValues.bind(this);
this.onRepoUrlChange = this.onRepoUrlChange.bind(this);
this.onRepoRefChange = this.onRepoRefChange.bind(this);
}
disableDeploy() {
const isGitFormInvalid =
this.state.BuildMethod === KubernetesDeployBuildMethods.GIT &&
(!this.formValues.RepositoryURL ||
!this.formValues.FilePathInRepository ||
(this.formValues.RepositoryAuthentication && (!this.formValues.RepositoryUsername || !this.formValues.RepositoryPassword)));
(!this.formValues.RepositoryURL || !this.formValues.FilePathInRepository || (this.formValues.RepositoryAuthentication && !this.formValues.RepositoryPassword));
const isWebEditorInvalid = this.state.BuildMethod === KubernetesDeployBuildMethods.WEB_EDITOR && _.isEmpty(this.formValues.EditorContent);
return isGitFormInvalid || isWebEditorInvalid || _.isEmpty(this.formValues.Namespace) || this.state.actionInProgress;
@ -67,14 +77,6 @@ class KubernetesDeployController {
};
}
onRepoUrlChange(value) {
this.onChangeFormValues({ RepositoryURL: value });
}
onRepoRefChange(value) {
this.onChangeFormValues({ RepositoryReferenceName: value });
}
onChangeFileContent(value) {
this.formValues.EditorContent = value;
this.state.isEditorDirty = true;
@ -91,6 +93,11 @@ class KubernetesDeployController {
this.state.actionInProgress = true;
try {
//Analytics
const metadata = {
format: this.state.DeployType === this.ManifestDeployTypes.COMPOSE ? 'compose' : 'manifest',
};
const method = this.state.BuildMethod === this.BuildMethods.GIT ? KubernetesDeployRequestMethods.REPOSITORY : KubernetesDeployRequestMethods.STRING;
const payload = {
@ -99,6 +106,7 @@ class KubernetesDeployController {
};
if (method === KubernetesDeployRequestMethods.REPOSITORY) {
metadata.type = 'git';
payload.RepositoryURL = this.formValues.RepositoryURL;
payload.RepositoryReferenceName = this.formValues.RepositoryReferenceName;
payload.RepositoryAuthentication = this.formValues.RepositoryAuthentication ? true : false;
@ -106,11 +114,26 @@ class KubernetesDeployController {
payload.RepositoryUsername = this.formValues.RepositoryUsername;
payload.RepositoryPassword = this.formValues.RepositoryPassword;
}
payload.FilePathInRepository = this.formValues.FilePathInRepository;
payload.ManifestFile = this.formValues.ComposeFilePathInRepository;
payload.AdditionalFiles = this.formValues.AdditionalFiles;
if (this.formValues.RepositoryAutomaticUpdates) {
payload.AutoUpdate = {};
if (this.formValues.RepositoryMechanism === `Interval`) {
payload.AutoUpdate.Interval = this.formValues.RepositoryFetchInterval;
metadata['automatic-updates'] = 'polling';
} else if (this.formValues.RepositoryMechanism === `Webhook`) {
payload.AutoUpdate.Webhook = this.formValues.RepositoryWebhookURL;
metadata['automatic-updates'] = 'webhook';
}
} else {
metadata['automatic-updates'] = 'off';
}
} else {
metadata.type = 'web-editor';
payload.StackFileContent = this.formValues.EditorContent;
}
this.$analytics.eventTrack('kubernetes-application-advanced-deployment', { category: 'kubernetes', metadata: metadata });
await this.StackService.kubernetesDeploy(this.endpointId, method, payload);
this.Notifications.success('Manifest successfully deployed');
@ -158,6 +181,19 @@ class KubernetesDeployController {
}
}
async onInit() {
this.state = {
DeployType: KubernetesDeployManifestTypes.KUBERNETES,
BuildMethod: KubernetesDeployBuildMethods.GIT,
tabLogsDisabled: true,
activeTab: 0,
viewReady: false,
isEditorDirty: false,
};
this.ManifestDeployTypes = KubernetesDeployManifestTypes;
this.BuildMethods = KubernetesDeployBuildMethods;
this.endpointId = this.EndpointProvider.endpointID();
await this.getNamespaces();
this.state.viewReady = true;