diff --git a/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.controller.js b/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.controller.js
new file mode 100644
index 000000000..809fca7e9
--- /dev/null
+++ b/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.controller.js
@@ -0,0 +1,51 @@
+/* @ngInject */
+export default function HiddenContainersPanelController($async) {
+ this.addFilteredContainerLabel = addFilteredContainerLabel.bind(this);
+ this.removeFilteredContainerLabel = removeFilteredContainerLabel.bind(this);
+ this.$onInit = $onInit.bind(this);
+ this.handleSubmit = handleSubmit.bind(this);
+
+ this.state = {
+ actionInProgress: false,
+ };
+
+ this.formValues = {
+ BlackListedLabels: [],
+ labelName: '',
+ labelValue: '',
+ };
+
+ this.state = {
+ actionInProgress: false,
+ };
+
+ function addFilteredContainerLabel() {
+ const label = {
+ name: this.formValues.labelName,
+ value: this.formValues.labelValue,
+ };
+
+ const filteredSettings = [...this.formValues.BlackListedLabels, label];
+ this.handleSubmit(filteredSettings);
+ this.formValues.labelName = '';
+ this.formValues.labelValue = '';
+ }
+
+ function removeFilteredContainerLabel(index) {
+ const filteredSettings = this.formValues.BlackListedLabels.filter((item, i) => i !== index);
+ this.handleSubmit(filteredSettings);
+ }
+
+ function handleSubmit(labels) {
+ return $async(async () => {
+ this.state.actionInProgress = true;
+ await this.onSubmit({ BlackListedLabels: labels }, 'Hidden container settings updated');
+ this.formValues.BlackListedLabels = labels;
+ this.state.actionInProgress = false;
+ });
+ }
+
+ function $onInit() {
+ this.formValues.BlackListedLabels = this.settings.BlackListedLabels;
+ }
+}
diff --git a/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.html b/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.html
new file mode 100644
index 000000000..bffb16ce3
--- /dev/null
+++ b/app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.html
@@ -0,0 +1,61 @@
+
diff --git a/app/portainer/views/settings/components/hidden-containers-panel/index.js b/app/portainer/views/settings/components/hidden-containers-panel/index.js
new file mode 100644
index 000000000..2ddab3a0d
--- /dev/null
+++ b/app/portainer/views/settings/components/hidden-containers-panel/index.js
@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+import controller from './hidden-containers-panel.controller';
+
+angular.module('portainer.app').component('hiddenContainersPanel', {
+ templateUrl: './hidden-containers-panel.html',
+ controller,
+ bindings: {
+ settings: '<',
+ onSubmit: '<',
+ },
+});
diff --git a/app/portainer/views/settings/settings.html b/app/portainer/views/settings/settings.html
index 039fb9899..76b325b91 100644
--- a/app/portainer/views/settings/settings.html
+++ b/app/portainer/views/settings/settings.html
@@ -7,66 +7,7 @@
-
-
+
diff --git a/app/portainer/views/settings/settingsController.js b/app/portainer/views/settings/settingsController.js
index 2c1845249..315e2cbce 100644
--- a/app/portainer/views/settings/settingsController.js
+++ b/app/portainer/views/settings/settingsController.js
@@ -30,9 +30,6 @@ angular.module('portainer.app').controller('SettingsController', [
$scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
$scope.formValues = {
- BlackListedLabels: [],
- labelName: '',
- labelValue: '',
passwordProtect: false,
password: '',
backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
@@ -49,23 +46,6 @@ angular.module('portainer.app').controller('SettingsController', [
$scope.state.featureLimited = limited;
};
- $scope.removeFilteredContainerLabel = function (index) {
- const filteredSettings = $scope.formValues.BlackListedLabels.filter((_, i) => i !== index);
- const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
- updateSettings(filteredSettingsPayload, 'Hidden container settings updated');
- };
-
- $scope.addFilteredContainerLabel = function () {
- var label = {
- name: $scope.formValues.labelName,
- value: $scope.formValues.labelValue,
- };
-
- const filteredSettings = [...$scope.formValues.BlackListedLabels, label];
- const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
- updateSettings(filteredSettingsPayload, 'Hidden container settings updated');
- };
-
$scope.downloadBackup = function () {
const payload = {};
if ($scope.formValues.passwordProtect) {
@@ -135,12 +115,11 @@ angular.module('portainer.app').controller('SettingsController', [
// which may override the cloud provider API keys
settings.CloudApiKeys = undefined;
return SettingsService.update(settings)
- .then(function success(response) {
+ .then(function success() {
Notifications.success('Success', successMessage);
StateManager.updateLogo(settings.LogoURL);
StateManager.updateSnapshotInterval(settings.SnapshotInterval);
StateManager.updateEnableTelemetry(settings.EnableTelemetry);
- $scope.formValues.BlackListedLabels = response.BlackListedLabels;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to update settings');
@@ -152,11 +131,8 @@ angular.module('portainer.app').controller('SettingsController', [
function initView() {
SettingsService.settings()
- .then(function success(data) {
- var settings = data;
+ .then(function success(settings) {
$scope.settings = settings;
-
- $scope.formValues.BlackListedLabels = settings.BlackListedLabels;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve application settings');