mirror of https://github.com/portainer/portainer
feat(app): Prevent web editor related views from being accidentally closed (#4715)
* feat(app): when leaving a view with unsaved changed, a modal prompt the user with a confirmation message feat(app): when leaving a view with unsaved changes, a modal prompt the user with a confirmation message * feat(app/web-editor): fix the modal behaviour when editing a stack details * feat(app/web-editor): add a reusable function confirmWebEditorDiscard in modal service * feat(docker/stack): fix missing dependencypull/4935/head
parent
d0d38990c7
commit
a7ed6222b0
|
@ -5,9 +5,11 @@ import angular from 'angular';
|
|||
|
||||
class CreateConfigController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
constructor($async, $state, $transition$, $window, ModalService, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
this.$state = $state;
|
||||
this.$transition$ = $transition$;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.Notifications = Notifications;
|
||||
this.ConfigService = ConfigService;
|
||||
this.Authentication = Authentication;
|
||||
|
@ -24,6 +26,7 @@ class CreateConfigController {
|
|||
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.editorUpdate = this.editorUpdate.bind(this);
|
||||
|
@ -31,6 +34,12 @@ class CreateConfigController {
|
|||
}
|
||||
|
||||
async $onInit() {
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
if (!this.$transition$.params().id) {
|
||||
this.formValues.displayCodeEditor = true;
|
||||
return;
|
||||
|
@ -53,6 +62,12 @@ class CreateConfigController {
|
|||
}
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
addLabel() {
|
||||
this.formValues.Labels.push({ name: '', value: '' });
|
||||
}
|
||||
|
@ -122,6 +137,7 @@ class CreateConfigController {
|
|||
const userId = userDetails.ID;
|
||||
await this.ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
|
||||
this.Notifications.success('Config successfully created');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('docker.configs', {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to create config');
|
||||
|
@ -130,6 +146,7 @@ class CreateConfigController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.formValues.ConfigContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
angular.module('portainer.docker').controller('BuildImageController', [
|
||||
'$scope',
|
||||
'$state',
|
||||
'$window',
|
||||
'ModalService',
|
||||
'BuildService',
|
||||
'Notifications',
|
||||
'HttpRequestHelper',
|
||||
function ($scope, $state, BuildService, Notifications, HttpRequestHelper) {
|
||||
function ($scope, $window, ModalService, BuildService, Notifications, HttpRequestHelper) {
|
||||
$scope.state = {
|
||||
BuildType: 'editor',
|
||||
actionInProgress: false,
|
||||
activeTab: 0,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
$scope.formValues = {
|
||||
|
@ -20,6 +22,12 @@ angular.module('portainer.docker').controller('BuildImageController', [
|
|||
NodeName: null,
|
||||
};
|
||||
|
||||
$window.onbeforeunload = () => {
|
||||
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
$scope.addImageName = function () {
|
||||
$scope.formValues.ImageNames.push({ Name: '' });
|
||||
};
|
||||
|
@ -93,6 +101,13 @@ angular.module('portainer.docker').controller('BuildImageController', [
|
|||
|
||||
$scope.editorUpdate = function (cm) {
|
||||
$scope.formValues.DockerFileContent = cm.getValue();
|
||||
$scope.state.isEditorDirty = true;
|
||||
};
|
||||
|
||||
this.uiCanExit = async function () {
|
||||
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
|
||||
return ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
@ -72,6 +72,7 @@ export class EdgeJobFormController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.model.FileContent = cm.getValue();
|
||||
this.isEditorDirty = true;
|
||||
}
|
||||
|
||||
associateEndpoint(endpoint) {
|
||||
|
|
|
@ -14,5 +14,6 @@ angular.module('portainer.edge').component('edgeJobForm', {
|
|||
formAction: '<',
|
||||
formActionLabel: '@',
|
||||
actionInProgress: '<',
|
||||
isEditorDirty: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -6,5 +6,6 @@ export class EditEdgeStackFormController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.model.StackFileContent = cm.getValue();
|
||||
this.isEditorDirty = true;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,5 +10,6 @@ angular.module('portainer.edge').component('editEdgeStackForm', {
|
|||
actionInProgress: '<',
|
||||
submitAction: '<',
|
||||
edgeGroups: '<',
|
||||
isEditorDirty: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
form-action="$ctrl.create"
|
||||
form-action-label="Create edge job"
|
||||
action-in-progress="$ctrl.state.actionInProgress"
|
||||
is-editor-dirty="$ctrl.state.isEditorDirty"
|
||||
></edge-job-form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
export class CreateEdgeJobViewController {
|
||||
/* @ngInject */
|
||||
constructor($async, $q, $state, EdgeJobService, GroupService, Notifications, TagService) {
|
||||
constructor($async, $q, $state, $window, ModalService, EdgeJobService, GroupService, Notifications, TagService) {
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.model = {
|
||||
|
@ -17,6 +18,8 @@ export class CreateEdgeJobViewController {
|
|||
this.$async = $async;
|
||||
this.$q = $q;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.Notifications = Notifications;
|
||||
this.GroupService = GroupService;
|
||||
this.EdgeJobService = EdgeJobService;
|
||||
|
@ -37,6 +40,7 @@ export class CreateEdgeJobViewController {
|
|||
try {
|
||||
await this.createEdgeJob(method, this.model);
|
||||
this.Notifications.success('Edge job successfully created');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('edge.jobs', {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to create Edge job');
|
||||
|
@ -52,6 +56,12 @@ export class CreateEdgeJobViewController {
|
|||
return this.EdgeJobService.createEdgeJobFromFileUpload(model);
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.model.FileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
try {
|
||||
const [groups, tags] = await Promise.all([this.GroupService.groups(), this.TagService.tags()]);
|
||||
|
@ -60,5 +70,11 @@ export class CreateEdgeJobViewController {
|
|||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve page data');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.model.FileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
form-action="$ctrl.update"
|
||||
form-action-label="Update Edge job"
|
||||
action-in-progress="$ctrl.state.actionInProgress"
|
||||
is-editor-dirty="$ctrl.state.isEditorDirty"
|
||||
></edge-job-form>
|
||||
</uib-tab>
|
||||
|
||||
|
|
|
@ -2,15 +2,18 @@ import _ from 'lodash-es';
|
|||
|
||||
export class EdgeJobController {
|
||||
/* @ngInject */
|
||||
constructor($async, $q, $state, EdgeJobService, EndpointService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
|
||||
constructor($async, $q, $state, $window, ModalService, EdgeJobService, EndpointService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
showEditorTab: false,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.$async = $async;
|
||||
this.$q = $q;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.EdgeJobService = EdgeJobService;
|
||||
this.EndpointService = EndpointService;
|
||||
this.FileSaver = FileSaver;
|
||||
|
@ -43,6 +46,7 @@ export class EdgeJobController {
|
|||
try {
|
||||
await this.EdgeJobService.updateEdgeJob(model);
|
||||
this.Notifications.success('Edge job successfully updated');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('edge.jobs', {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to update Edge job');
|
||||
|
@ -121,6 +125,12 @@ export class EdgeJobController {
|
|||
this.state.showEditorTab = true;
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
const { id, tab } = this.$state.params;
|
||||
this.state.activeTab = tab;
|
||||
|
@ -138,6 +148,7 @@ export class EdgeJobController {
|
|||
]);
|
||||
|
||||
edgeJob.FileContent = file.FileContent;
|
||||
this.oldFileContent = edgeJob.FileContent;
|
||||
this.edgeJob = edgeJob;
|
||||
this.groups = groups;
|
||||
this.tags = tags;
|
||||
|
@ -152,5 +163,11 @@ export class EdgeJobController {
|
|||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve endpoint list');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,8 @@ import _ from 'lodash-es';
|
|||
|
||||
export class CreateEdgeStackViewController {
|
||||
/* @ngInject */
|
||||
constructor($state, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async) {
|
||||
Object.assign(this, { $state, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async });
|
||||
constructor($state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async) {
|
||||
Object.assign(this, { $state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async });
|
||||
|
||||
this.formValues = {
|
||||
Name: '',
|
||||
|
@ -24,6 +24,7 @@ export class CreateEdgeStackViewController {
|
|||
formValidationError: '',
|
||||
actionInProgress: false,
|
||||
StackType: null,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.edgeGroups = null;
|
||||
|
@ -41,6 +42,12 @@ export class CreateEdgeStackViewController {
|
|||
this.onChangeMethod = this.onChangeMethod.bind(this);
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
try {
|
||||
this.edgeGroups = await this.EdgeGroupService.groups();
|
||||
|
@ -55,6 +62,12 @@ export class CreateEdgeStackViewController {
|
|||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve Templates');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
createStack() {
|
||||
|
@ -97,6 +110,7 @@ export class CreateEdgeStackViewController {
|
|||
await this.createStackByMethod(name, method);
|
||||
|
||||
this.Notifications.success('Stack successfully deployed');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('edge.stacks');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Deployment error', err, 'Unable to deploy stack');
|
||||
|
@ -149,5 +163,6 @@ export class CreateEdgeStackViewController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.formValues.StackFileContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
model="$ctrl.formValues"
|
||||
action-in-progress="$ctrl.state.actionInProgress"
|
||||
submit-action="$ctrl.deployStack"
|
||||
is-editor-dirty="$ctrl.state.isEditorDirty"
|
||||
></edit-edge-stack-form>
|
||||
</div>
|
||||
</uib-tab>
|
||||
|
|
|
@ -2,9 +2,11 @@ import _ from 'lodash-es';
|
|||
|
||||
export class EditEdgeStackViewController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, EdgeGroupService, EdgeStackService, EndpointService, Notifications) {
|
||||
constructor($async, $state, $window, ModalService, EdgeGroupService, EdgeStackService, EndpointService, Notifications) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.EdgeGroupService = EdgeGroupService;
|
||||
this.EdgeStackService = EdgeStackService;
|
||||
this.EndpointService = EndpointService;
|
||||
|
@ -16,6 +18,7 @@ export class EditEdgeStackViewController {
|
|||
this.state = {
|
||||
actionInProgress: false,
|
||||
activeTab: 0,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.deployStack = this.deployStack.bind(this);
|
||||
|
@ -38,9 +41,22 @@ export class EditEdgeStackViewController {
|
|||
EdgeGroups: this.stack.EdgeGroups,
|
||||
Prune: this.stack.Prune,
|
||||
};
|
||||
this.oldFileContent = this.formValues.StackFileContent;
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve stack data');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.formValues.StackFileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.formValues.StackFileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
filterStackEndpoints(groupIds, groups) {
|
||||
|
@ -64,6 +80,7 @@ export class EditEdgeStackViewController {
|
|||
}
|
||||
await this.EdgeStackService.updateStack(this.stack.Id, this.formValues);
|
||||
this.Notifications.success('Stack successfully deployed');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('edge.stacks');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Deployment error', err, 'Unable to deploy stack');
|
||||
|
|
|
@ -5,5 +5,6 @@ angular.module('portainer.kubernetes').component('kubernetesConfigurationData',
|
|||
formValues: '=',
|
||||
isValid: '=',
|
||||
isCreation: '=',
|
||||
isEditorDirty: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -44,6 +44,7 @@ class KubernetesConfigurationDataController {
|
|||
|
||||
async editorUpdateAsync(cm) {
|
||||
this.formValues.DataYaml = cm.getValue();
|
||||
this.isEditorDirty = true;
|
||||
}
|
||||
|
||||
editorUpdate(cm) {
|
||||
|
|
|
@ -114,11 +114,13 @@
|
|||
<a href="https://kubernetes.io/docs/concepts/configuration/secret/#secret-types" target="_blank">official documentation</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<kubernetes-configuration-data
|
||||
ng-if="ctrl.formValues"
|
||||
form-values="ctrl.formValues"
|
||||
is-valid="ctrl.state.isDataValid"
|
||||
is-creation="true"
|
||||
is-editor-dirty="ctrl.state.isEditorDirty"
|
||||
></kubernetes-configuration-data>
|
||||
|
||||
<!-- actions -->
|
||||
|
|
|
@ -6,9 +6,11 @@ import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelpe
|
|||
|
||||
class KubernetesCreateConfigurationController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, Notifications, Authentication, KubernetesConfigurationService, KubernetesResourcePoolService, KubernetesNamespaceHelper) {
|
||||
constructor($async, $state, $window, ModalService, Notifications, Authentication, KubernetesConfigurationService, KubernetesResourcePoolService, KubernetesNamespaceHelper) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.Notifications = Notifications;
|
||||
this.Authentication = Authentication;
|
||||
this.KubernetesConfigurationService = KubernetesConfigurationService;
|
||||
|
@ -47,6 +49,7 @@ class KubernetesCreateConfigurationController {
|
|||
}
|
||||
await this.KubernetesConfigurationService.create(this.formValues);
|
||||
this.Notifications.success('Configuration succesfully created');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('kubernetes.configurations');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to create configuration');
|
||||
|
@ -71,12 +74,19 @@ class KubernetesCreateConfigurationController {
|
|||
return this.$async(this.getConfigurationsAsync);
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (!this.formValues.IsSimple && this.formValues.DataYaml && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async onInit() {
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
viewReady: false,
|
||||
alreadyExist: false,
|
||||
isDataValid: true,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.formValues = new KubernetesConfigurationFormValues();
|
||||
|
@ -93,6 +103,12 @@ class KubernetesCreateConfigurationController {
|
|||
} finally {
|
||||
this.state.viewReady = true;
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (!this.formValues.IsSimple && this.formValues.DataYaml && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
|
|
|
@ -82,6 +82,7 @@
|
|||
form-values="ctrl.formValues"
|
||||
is-valid="ctrl.state.isDataValid"
|
||||
is-creation="false"
|
||||
is-editor-dirty="ctrl.state.isEditorDirty"
|
||||
></kubernetes-configuration-data>
|
||||
|
||||
<!-- actions -->
|
||||
|
|
|
@ -11,6 +11,7 @@ class KubernetesConfigurationController {
|
|||
constructor(
|
||||
$async,
|
||||
$state,
|
||||
$window,
|
||||
clipboard,
|
||||
Notifications,
|
||||
LocalStorage,
|
||||
|
@ -25,6 +26,7 @@ class KubernetesConfigurationController {
|
|||
) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.clipboard = clipboard;
|
||||
this.Notifications = Notifications;
|
||||
this.LocalStorage = LocalStorage;
|
||||
|
@ -143,6 +145,7 @@ class KubernetesConfigurationController {
|
|||
this.formValues.Id = this.configuration.Id;
|
||||
this.formValues.Name = this.configuration.Name;
|
||||
this.formValues.Type = this.configuration.Type;
|
||||
this.oldDataYaml = this.formValues.DataYaml;
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve configuration');
|
||||
} finally {
|
||||
|
@ -221,6 +224,12 @@ class KubernetesConfigurationController {
|
|||
});
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async onInit() {
|
||||
try {
|
||||
this.state = {
|
||||
|
@ -234,6 +243,7 @@ class KubernetesConfigurationController {
|
|||
activeTab: 0,
|
||||
currentName: this.$state.$current.name,
|
||||
isDataValid: true,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.state.activeTab = this.LocalStorage.getActiveTab('configuration');
|
||||
|
@ -252,6 +262,12 @@ class KubernetesConfigurationController {
|
|||
} finally {
|
||||
this.state.viewReady = true;
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
|
|
|
@ -5,9 +5,11 @@ import { KubernetesDeployManifestTypes } from 'Kubernetes/models/deploy';
|
|||
|
||||
class KubernetesDeployController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
|
||||
constructor($async, $state, $window, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.Notifications = Notifications;
|
||||
this.EndpointProvider = EndpointProvider;
|
||||
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
|
||||
|
@ -26,6 +28,7 @@ class KubernetesDeployController {
|
|||
|
||||
async editorUpdateAsync(cm) {
|
||||
this.formValues.EditorContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
|
||||
editorUpdate(cm) {
|
||||
|
@ -46,6 +49,7 @@ class KubernetesDeployController {
|
|||
const compose = this.state.DeployType === this.ManifestDeployTypes.COMPOSE;
|
||||
await this.StackService.kubernetesDeploy(this.endpointId, this.formValues.Namespace, this.formValues.EditorContent, compose);
|
||||
this.Notifications.success('Manifest successfully deployed');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('kubernetes.applications');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Unable to deploy manifest', err, 'Unable to deploy resources');
|
||||
|
@ -73,12 +77,19 @@ class KubernetesDeployController {
|
|||
return this.$async(this.getNamespacesAsync);
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.formValues.EditorContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async onInit() {
|
||||
this.state = {
|
||||
DeployType: KubernetesDeployManifestTypes.KUBERNETES,
|
||||
tabLogsDisabled: true,
|
||||
activeTab: 0,
|
||||
viewReady: false,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.formValues = {};
|
||||
|
@ -88,6 +99,12 @@ class KubernetesDeployController {
|
|||
await this.getNamespaces();
|
||||
|
||||
this.state.viewReady = true;
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.formValues.EditorContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
|
|
|
@ -37,6 +37,23 @@ angular.module('portainer.app').factory('ModalService', [
|
|||
});
|
||||
};
|
||||
|
||||
service.confirmWebEditorDiscard = confirmWebEditorDiscard;
|
||||
function confirmWebEditorDiscard() {
|
||||
const options = {
|
||||
title: 'Are you sure ?',
|
||||
message: 'You currently have unsaved changes in the editor. Are you sure you want to leave?',
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Yes',
|
||||
className: 'btn-danger',
|
||||
},
|
||||
},
|
||||
};
|
||||
return new Promise((resolve) => {
|
||||
service.confirm({ ...options, callback: (confirmed) => resolve(confirmed) });
|
||||
});
|
||||
}
|
||||
|
||||
service.confirmAsync = confirmAsync;
|
||||
function confirmAsync(options) {
|
||||
return new Promise((resolve) => {
|
||||
|
|
|
@ -3,8 +3,20 @@ import { AccessControlFormData } from 'Portainer/components/accessControlForm/po
|
|||
|
||||
class CreateCustomTemplateViewController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager) {
|
||||
Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager });
|
||||
constructor($async, $state, $window, Authentication, ModalService, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager) {
|
||||
Object.assign(this, {
|
||||
$async,
|
||||
$state,
|
||||
$window,
|
||||
Authentication,
|
||||
ModalService,
|
||||
CustomTemplateService,
|
||||
FormValidator,
|
||||
Notifications,
|
||||
ResourceControlService,
|
||||
StackService,
|
||||
StateManager,
|
||||
});
|
||||
|
||||
this.formValues = {
|
||||
Title: '',
|
||||
|
@ -29,6 +41,7 @@ class CreateCustomTemplateViewController {
|
|||
actionInProgress: false,
|
||||
fromStack: false,
|
||||
loading: true,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
this.templates = [];
|
||||
|
||||
|
@ -73,6 +86,7 @@ class CreateCustomTemplateViewController {
|
|||
await this.ResourceControlService.applyResourceControl(userId, accessControlData, customTemplate.ResourceControl);
|
||||
|
||||
this.Notifications.success('Custom template successfully created');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('docker.templates.custom');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'A template with the same name already exists');
|
||||
|
@ -133,6 +147,7 @@ class CreateCustomTemplateViewController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.formValues.FileContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
|
@ -161,6 +176,18 @@ class CreateCustomTemplateViewController {
|
|||
}
|
||||
|
||||
this.state.loading = false;
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.state.Method === 'editor' && this.formValues.FileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.state.Method === 'editor' && this.formValues.FileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -5,12 +5,13 @@ import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resou
|
|||
|
||||
class EditCustomTemplateViewController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
|
||||
Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
|
||||
constructor($async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
|
||||
Object.assign(this, { $async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
|
||||
|
||||
this.formValues = null;
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
};
|
||||
this.templates = [];
|
||||
|
||||
|
@ -32,6 +33,7 @@ class EditCustomTemplateViewController {
|
|||
]);
|
||||
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) {
|
||||
|
@ -84,6 +86,7 @@ class EditCustomTemplateViewController {
|
|||
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('docker.templates.custom');
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to update custom template');
|
||||
|
@ -93,7 +96,14 @@ class EditCustomTemplateViewController {
|
|||
}
|
||||
|
||||
editorUpdate(cm) {
|
||||
this.formValues.fileContent = cm.getValue();
|
||||
this.formValues.FileContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
|
@ -104,6 +114,12 @@ class EditCustomTemplateViewController {
|
|||
} catch (err) {
|
||||
this.Notifications.error('Failure loading', err, 'Failed loading custom templates');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -9,6 +9,8 @@ angular
|
|||
$scope,
|
||||
$state,
|
||||
$async,
|
||||
$window,
|
||||
ModalService,
|
||||
StackService,
|
||||
Authentication,
|
||||
Notifications,
|
||||
|
@ -42,6 +44,13 @@ angular
|
|||
StackType: null,
|
||||
editorYamlValidationError: '',
|
||||
uploadYamlValidationError: '',
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
$window.onbeforeunload = () => {
|
||||
if ($scope.state.Method === 'editor' && $scope.formValues.StackFileContent && $scope.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
$scope.addEnvironmentVariable = function () {
|
||||
|
@ -148,6 +157,7 @@ angular
|
|||
})
|
||||
.then(function success() {
|
||||
Notifications.success('Stack successfully deployed');
|
||||
$scope.state.isEditorDirty = false;
|
||||
$state.go('docker.stacks');
|
||||
})
|
||||
.catch(function error(err) {
|
||||
|
@ -161,6 +171,7 @@ angular
|
|||
$scope.editorUpdate = function (cm) {
|
||||
$scope.formValues.StackFileContent = cm.getValue();
|
||||
$scope.state.editorYamlValidationError = StackHelper.validateYAML($scope.formValues.StackFileContent, $scope.containerNames);
|
||||
$scope.state.isEditorDirty = true;
|
||||
};
|
||||
|
||||
async function onFileLoadAsync(event) {
|
||||
|
@ -221,5 +232,11 @@ angular
|
|||
}
|
||||
}
|
||||
|
||||
this.uiCanExit = async function () {
|
||||
if ($scope.state.Method === 'editor' && $scope.formValues.StackFileContent && $scope.state.isEditorDirty) {
|
||||
return ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
};
|
||||
|
||||
initView();
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@ angular.module('portainer.app').controller('StackController', [
|
|||
'$q',
|
||||
'$scope',
|
||||
'$state',
|
||||
'$window',
|
||||
'$transition$',
|
||||
'StackService',
|
||||
'NodeService',
|
||||
|
@ -18,11 +19,13 @@ angular.module('portainer.app').controller('StackController', [
|
|||
'GroupService',
|
||||
'ModalService',
|
||||
'StackHelper',
|
||||
'ContainerHelper',
|
||||
function (
|
||||
$async,
|
||||
$q,
|
||||
$scope,
|
||||
$state,
|
||||
$window,
|
||||
$transition$,
|
||||
StackService,
|
||||
NodeService,
|
||||
|
@ -46,6 +49,7 @@ angular.module('portainer.app').controller('StackController', [
|
|||
externalStack: false,
|
||||
showEditorTab: false,
|
||||
yamlError: false,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
$scope.formValues = {
|
||||
|
@ -53,6 +57,12 @@ angular.module('portainer.app').controller('StackController', [
|
|||
Endpoint: null,
|
||||
};
|
||||
|
||||
$window.onbeforeunload = () => {
|
||||
if ($scope.stackFileContent && $scope.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
$scope.duplicateStack = function duplicateStack(name, endpointId) {
|
||||
var stack = $scope.stack;
|
||||
var env = FormHelper.removeInvalidEnvVars(stack.Env);
|
||||
|
@ -171,6 +181,7 @@ angular.module('portainer.app').controller('StackController', [
|
|||
StackService.updateStack(stack, stackFile, env, prune)
|
||||
.then(function success() {
|
||||
Notifications.success('Stack successfully deployed');
|
||||
$scope.state.isEditorDirty = false;
|
||||
$state.reload();
|
||||
})
|
||||
.catch(function error(err) {
|
||||
|
@ -190,8 +201,12 @@ angular.module('portainer.app').controller('StackController', [
|
|||
};
|
||||
|
||||
$scope.editorUpdate = function (cm) {
|
||||
if ($scope.stackFileContent !== cm.getValue()) {
|
||||
$scope.state.isEditorDirty = true;
|
||||
}
|
||||
$scope.stackFileContent = cm.getValue();
|
||||
$scope.state.yamlError = StackHelper.validateYAML($scope.stackFileContent, $scope.containerNames);
|
||||
$scope.state.isEditorDirty = true;
|
||||
};
|
||||
|
||||
$scope.stopStack = stopStack;
|
||||
|
@ -369,6 +384,12 @@ angular.module('portainer.app').controller('StackController', [
|
|||
});
|
||||
}
|
||||
|
||||
this.uiCanExit = async function () {
|
||||
if ($scope.stackFileContent && $scope.state.isEditorDirty) {
|
||||
return ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
};
|
||||
|
||||
async function initView() {
|
||||
var stackName = $transition$.params().name;
|
||||
$scope.stackName = stackName;
|
||||
|
|
Loading…
Reference in New Issue