feat(k8s): front end backport to CE

pull/5563/head
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;

View File

@ -4,8 +4,8 @@
</span>
</div>
<div class="form-group">
<label for="stack_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
<label for="stack_repository_path" class="col-sm-2 control-label text-left">{{ $ctrl.textTitle }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$ctrl.value" ng-change="$ctrl.onChange($ctrl.value)" id="stack_repository_path" placeholder="docker-compose.yml" />
<input type="text" class="form-control" ng-model="$ctrl.value" ng-change="$ctrl.onChange($ctrl.value)" id="stack_repository_path" placeholder="{{ $ctrl.placeholder }}" />
</div>
</div>

View File

@ -1,6 +1,8 @@
export const gitFormComposePathField = {
templateUrl: './git-form-compose-path-field.html',
bindings: {
textTitle: '@',
placeholder: '@',
value: '<',
onChange: '<',
},

View File

@ -1,7 +1,7 @@
<div class="form-group" ng-class="$ctrl.className">
<div class="col-sm-12">
<p>
This stack was deployed from the git repository <code>{{ $ctrl.url }}</code>
This {{ $ctrl.type }} was deployed from the git repository <code>{{ $ctrl.url }}</code>
.
</p>
<p>
@ -9,7 +9,7 @@
<code
>{{ $ctrl.configFilePath }}<span ng-if="$ctrl.additionalFiles.length > 0">,{{ $ctrl.additionalFiles.join(',') }}</span></code
>
in git and pull from here to update the stack.
in git and pull from here to update the {{ $ctrl.type }}.
</p>
</div>
</div>

View File

@ -5,5 +5,6 @@ export const gitFormInfoPanel = {
configFilePath: '<',
additionalFiles: '<',
className: '@',
type: '@',
},
};

View File

@ -4,7 +4,12 @@
</div>
<git-form-url-field value="$ctrl.model.RepositoryURL" on-change="($ctrl.onChangeURL)"></git-form-url-field>
<git-form-ref-field value="$ctrl.model.RepositoryReferenceName" on-change="($ctrl.onChangeRefName)"></git-form-ref-field>
<git-form-compose-path-field value="$ctrl.model.ComposeFilePathInRepository" on-change="($ctrl.onChangeComposePath)"></git-form-compose-path-field>
<git-form-compose-path-field
text-title="{{ $ctrl.pathTextTitle }}"
placeholder="{{ $ctrl.pathPlaceholder }}"
value="$ctrl.model.ComposeFilePathInRepository"
on-change="($ctrl.onChangeComposePath)"
></git-form-compose-path-field>
<git-form-additional-files-panel ng-if="$ctrl.additionalFile" model="$ctrl.model" on-change="($ctrl.onChange)"></git-form-additional-files-panel>
<git-form-auth-fieldset model="$ctrl.model" on-change="($ctrl.onChange)" show-auth-explanation="$ctrl.showAuthExplanation"></git-form-auth-fieldset>
<git-form-auto-update-fieldset ng-if="$ctrl.autoUpdate" model="$ctrl.model" on-change="($ctrl.onChange)"></git-form-auto-update-fieldset>

View File

@ -4,6 +4,8 @@ export const gitForm = {
templateUrl: './git-form.html',
controller,
bindings: {
pathTextTitle: '@',
pathPlaceholder: '@',
model: '<',
onChange: '<',
additionalFile: '<',

View File

@ -1,13 +0,0 @@
import angular from 'angular';
import controller from './kubernetes-app-git-form.controller';
const kubernetesAppGitForm = {
templateUrl: './kubernetes-app-git-form.html',
controller,
bindings: {
namespace: '<',
stack: '<',
},
};
angular.module('portainer.app').component('kubernetesAppGitForm', kubernetesAppGitForm);

View File

@ -1,16 +1,18 @@
class KubernetesAppGitFormController {
import uuidv4 from 'uuid/v4';
class KubernetesRedeployAppGitFormController {
/* @ngInject */
constructor($async, $state, StackService, ModalService, Notifications) {
constructor($async, $state, $analytics, StackService, ModalService, Notifications, WebhookHelper) {
this.$async = $async;
this.$state = $state;
this.StackService = StackService;
this.ModalService = ModalService;
this.Notifications = Notifications;
this.WebhookHelper = WebhookHelper;
this.state = {
saveGitSettingsInProgress: false,
redeployInProgress: false,
showConfig: true,
showConfig: false,
isEdit: false,
};
@ -19,6 +21,13 @@ class KubernetesAppGitFormController {
RepositoryAuthentication: false,
RepositoryUsername: '',
RepositoryPassword: '',
// auto upadte
AutoUpdate: {
RepositoryAutomaticUpdates: false,
RepositoryMechanism: 'Interval',
RepositoryFetchInterval: '5m',
RepositoryWebhookURL: '',
},
};
this.onChange = this.onChange.bind(this);
@ -39,6 +48,20 @@ class KubernetesAppGitFormController {
async pullAndRedeployApplication() {
return this.$async(async () => {
try {
//Analytics
const metadata = {};
if (this.formValues.AutoUpdate.RepositoryAutomaticUpdates) {
if (this.formValues.AutoUpdate.RepositoryMechanism === `Interval`) {
metadata['automatic-updates'] = 'polling';
} else if (this.formValues.AutoUpdate.RepositoryMechanism === `Webhook`) {
metadata['automatic-updates'] = 'webhook';
}
} else {
metadata['automatic-updates'] = 'off';
}
this.$analytics.eventTrack('kubernetes-application-edit', { category: 'kubernetes', metadata: metadata });
const confirmed = await this.ModalService.confirmAsync({
title: 'Are you sure?',
message: 'Any changes to this application will be overriden by the definition in git and may cause a service interruption. Do you wish to continue',
@ -84,6 +107,23 @@ class KubernetesAppGitFormController {
$onInit() {
this.formValues.RefName = this.stack.GitConfig.ReferenceName;
// Init auto update
if (this.stack.AutoUpdate && (this.stack.AutoUpdate.Interval || this.stack.AutoUpdate.Webhook)) {
this.formValues.AutoUpdate.RepositoryAutomaticUpdates = true;
if (this.stack.AutoUpdate.Interval) {
this.formValues.AutoUpdate.RepositoryMechanism = `Interval`;
this.formValues.AutoUpdate.RepositoryFetchInterval = this.stack.AutoUpdate.Interval;
} else if (this.stack.AutoUpdate.Webhook) {
this.formValues.AutoUpdate.RepositoryMechanism = `Webhook`;
this.formValues.AutoUpdate.RepositoryWebhookURL = this.WebhookHelper.returnStackWebhookUrl(this.stack.AutoUpdate.Webhook);
}
}
if (!this.formValues.AutoUpdate.RepositoryWebhookURL) {
this.formValues.AutoUpdate.RepositoryWebhookURL = this.WebhookHelper.returnStackWebhookUrl(uuidv4());
}
if (this.stack.GitConfig && this.stack.GitConfig.Authentication) {
this.formValues.RepositoryUsername = this.stack.GitConfig.Authentication.Username;
this.formValues.RepositoryAuthentication = true;
@ -92,4 +132,4 @@ class KubernetesAppGitFormController {
}
}
export default KubernetesAppGitFormController;
export default KubernetesRedeployAppGitFormController;

View File

@ -9,7 +9,7 @@
</p>
</div>
</div>
<git-form-auto-update-fieldset model="$ctrl.formValues.AutoUpdate" on-change="($ctrl.onChange)"></git-form-auto-update-fieldset>
<div class="form-group">
<div class="col-sm-12">
<p>
@ -36,6 +36,7 @@
<button
class="btn btn-sm btn-primary"
ng-click="$ctrl.pullAndRedeployApplication()"
ng-if="!$ctrl.formValues.AutoUpdate.RepositoryAutomaticUpdates"
ng-disabled="$ctrl.isSubmitButtonDisabled() || !$ctrl.redeployGitForm.$valid"
style="margin-top: 7px; margin-left: 0;"
button-spinner="ctrl.state.redeployInProgress"

View File

@ -0,0 +1,13 @@
import angular from 'angular';
import controller from './kubernetes-redeploy-app-git-form.controller';
const kubernetesRedeployAppGitForm = {
templateUrl: './kubernetes-redeploy-app-git-form.html',
controller,
bindings: {
stack: '<',
namespace: '<',
},
};
angular.module('portainer.app').component('kubernetesRedeployAppGitForm', kubernetesRedeployAppGitForm);

View File

@ -277,7 +277,17 @@ angular.module('portainer.app').factory('StackService', [
StackFileContent: stackFile,
};
} else {
const autoUpdate = {};
if (gitConfig.AutoUpdate && gitConfig.AutoUpdate.RepositoryAutomaticUpdates) {
if (gitConfig.AutoUpdate.RepositoryMechanism === 'Interval') {
autoUpdate.Interval = gitConfig.AutoUpdate.RepositoryFetchInterval;
} else if (gitConfig.AutoUpdate.RepositoryMechanism === 'Webhook') {
autoUpdate.Webhook = gitConfig.AutoUpdate.RepositoryWebhookURL.split('/').reverse()[0];
}
}
payload = {
AutoUpdate: autoUpdate,
RepositoryReferenceName: gitConfig.RefName,
RepositoryAuthentication: gitConfig.RepositoryAuthentication,
RepositoryUsername: gitConfig.RepositoryUsername,

View File

@ -113,6 +113,8 @@
additional-file="true"
auto-update="true"
show-auth-explanation="true"
path-text-title="Compose path"
path-placeholder="docker-compose.yml"
></git-form>
<custom-template-selector