Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 23:35:31 +02:00
Code Issues Releases Activity

refactor(settings): migrate hidden containers panel to react [EE-5507] (#9119)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-07-10 03:39:11 +07:00 • committed by GitHub
parent eefb4c4287
commit 8b11e1678e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 230 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/portainer/react/components/settings.ts
View file

@ -9,6 +9,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
import { ApplicationSettingsPanel } from '@/react/portainer/settings/SettingsView/ApplicationSettingsPanel';
import { KubeSettingsPanel } from '@/react/portainer/settings/SettingsView/KubeSettingsPanel';
import { HelmCertPanel } from '@/react/portainer/settings/SettingsView/HelmCertPanel';
import { HiddenContainersPanel } from '@/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersPanel';
export const settingsModule = angular
.module('portainer.app.react.components.settings', [])
@ -26,6 +27,10 @@ export const settingsModule = angular
r2a(withReactQuery(ApplicationSettingsPanel), ['onSuccess'])
)
.component('helmCertPanel', r2a(withReactQuery(HelmCertPanel), []))
.component(
'hiddenContainersPanel',
r2a(withUIRouter(withReactQuery(HiddenContainersPanel)), [])
)
.component(
'kubeSettingsPanel',
r2a(withUIRouter(withReactQuery(KubeSettingsPanel)), [])

60
app/portainer/views/settings/settings.html
View file

@ -8,65 +8,7 @@
<ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-header icon="box" title-text="Hidden containers"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal" ng-submit="addFilteredContainerLabel()" name="addTagForm">
<div class="form-group">
<span class="col-sm-12 text-muted small"> You can hide containers with specific labels from Portainer UI. You need to specify the label name and value. </span>
</div>
<div class="form-group">
<label for="header_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-11 col-md-4">
<input type="text" required class="form-control" id="header_name" name="label_name" ng-model="formValues.labelName" placeholder="e.g. com.example.foo" />
</div>
<label for="header_value" class="col-sm-1 control-label text-left">Value</label>
<div class="col-sm-11 col-md-4">
<input type="text" class="form-control" id="header_value" ng-model="formValues.labelValue" placeholder="e.g. bar" />
</div>
<div class="col-sm-12 col-md-2">
<button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.labelName"><pr-icon icon="'plus'" class-name="'mr-1'"></pr-icon>Add filter</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 table-responsive">
<table class="table-hover table">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="label in formValues.BlackListedLabels">
<td>{{ label.name }}</td>
<td>{{ label.value }}</td>
<td>
<button type="button" class="btn btn-danger btn-xs" ng-click="removeFilteredContainerLabel($index)">
<pr-icon icon="'trash-2'" class-name="'mr-1'"></pr-icon>
Remove</button
>
</td>
</tr>
<tr ng-if="formValues.BlackListedLabels.length === 0">
<td colspan="3" class="text-muted text-center">No filter available.</td>
</tr>
<tr ng-if="!formValues.BlackListedLabels">
<td colspan="3" class="text-muted text-center">Loading...</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- !filtered-labels -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<hidden-containers-panel></hidden-containers-panel>
<!-- backup -->
<backup-settings-panel></backup-settings-panel>

86
app/portainer/views/settings/settingsController.js
View file

@ -1,78 +1,20 @@
import angular from 'angular';
angular.module('portainer.app').controller('SettingsController', [
'$scope',
'Notifications',
'SettingsService',
'StateManager',
function ($scope, Notifications, SettingsService, StateManager) {
$scope.updateSettings = updateSettings;
$scope.handleSuccess = handleSuccess;
angular.module('portainer.app').controller('SettingsController', SettingsController);
$scope.state = {
actionInProgress: false,
showHTTPS: !window.ddExtension,
};
/* @ngInject */
function SettingsController($scope, StateManager) {
$scope.handleSuccess = handleSuccess;
$scope.formValues = {
BlackListedLabels: [],
labelName: '',
labelValue: '',
};
$scope.state = {
showHTTPS: !window.ddExtension,
};
$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');
};
function updateSettings(settings, successMessage = 'Settings updated') {
return SettingsService.update(settings)
.then(function success(settings) {
Notifications.success('Success', successMessage);
handleSuccess(settings);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to update settings');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
function handleSuccess(settings) {
if (settings) {
StateManager.updateLogo(settings.LogoURL);
StateManager.updateSnapshotInterval(settings.SnapshotInterval);
StateManager.updateEnableTelemetry(settings.EnableTelemetry);
}
function handleSuccess(settings) {
if (settings) {
StateManager.updateLogo(settings.LogoURL);
StateManager.updateSnapshotInterval(settings.SnapshotInterval);
StateManager.updateEnableTelemetry(settings.EnableTelemetry);
$scope.formValues.BlackListedLabels = settings.BlackListedLabels;
}
}
function initView() {
SettingsService.settings()
.then(function success(data) {
var settings = data;
$scope.settings = settings;
$scope.formValues.BlackListedLabels = settings.BlackListedLabels;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve application settings');
});
}
initView();
},
]);
}
}