mirror of https://github.com/portainer/portainer
refactor(settings): kube settings panel
fix(settings/kube): limit featuresrefactor/EE-2270/EE-5502/settings-components
Chaim Lev-Ari
parent
8f322e3c17
commit
4623f27bff
|
|
@ -0,0 +1,12 @@
|
|||
import angular from 'angular';
|
||||
|
||||
import controller from './kube-settings-panel.controller';
|
||||
|
||||
angular.module('portainer.app').component('kubeSettingsPanel', {
|
||||
templateUrl: './kube-settings-panel.html',
|
||||
controller,
|
||||
bindings: {
|
||||
settings: '<',
|
||||
onSubmit: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { FeatureId } from '@/react/portainer/feature-flags/enums';
|
||||
|
||||
/* @ngInject */
|
||||
export default function KubeSettingsPanelController($scope, $async) {
|
||||
this.onToggleAddWithForm = onToggleAddWithForm.bind(this);
|
||||
this.onToggleHideWebEditor = onToggleHideWebEditor.bind(this);
|
||||
this.onToggleHideFileUpload = onToggleHideFileUpload.bind(this);
|
||||
this.onTogglePerEnvOverride = onTogglePerEnvOverride.bind(this);
|
||||
this.saveKubernetesSettings = saveKubernetesSettings.bind(this);
|
||||
this.$onInit = $onInit.bind(this);
|
||||
|
||||
this.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS;
|
||||
|
||||
this.state = {
|
||||
availableKubeconfigExpiryOptions: [
|
||||
{
|
||||
key: '1 day',
|
||||
value: '24h',
|
||||
},
|
||||
{
|
||||
key: '7 days',
|
||||
value: `${24 * 7}h`,
|
||||
},
|
||||
{
|
||||
key: '30 days',
|
||||
value: `${24 * 30}h`,
|
||||
},
|
||||
{
|
||||
key: '1 year',
|
||||
value: `${24 * 30 * 12}h`,
|
||||
},
|
||||
{
|
||||
key: 'No expiry',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
actionInProgress: false,
|
||||
};
|
||||
|
||||
this.formValues = {
|
||||
KubeconfigExpiry: undefined,
|
||||
HelmRepositoryURL: undefined,
|
||||
GlobalDeploymentOptions: {
|
||||
hideAddWithForm: false,
|
||||
perEnvOverride: false,
|
||||
hideWebEditor: false,
|
||||
hideFileUpload: false,
|
||||
},
|
||||
};
|
||||
|
||||
function onToggleAddWithForm(checked) {
|
||||
$scope.$evalAsync(() => {
|
||||
this.formValues.GlobalDeploymentOptions.hideAddWithForm = checked;
|
||||
this.formValues.GlobalDeploymentOptions.hideWebEditor = checked;
|
||||
this.formValues.GlobalDeploymentOptions.hideFileUpload = checked;
|
||||
});
|
||||
}
|
||||
|
||||
function onToggleHideWebEditor(checked) {
|
||||
$scope.$evalAsync(() => {
|
||||
this.formValues.GlobalDeploymentOptions.hideWebEditor = !checked;
|
||||
});
|
||||
}
|
||||
|
||||
function onToggleHideFileUpload(checked) {
|
||||
$scope.$evalAsync(() => {
|
||||
this.formValues.GlobalDeploymentOptions.hideFileUpload = !checked;
|
||||
});
|
||||
}
|
||||
|
||||
function onTogglePerEnvOverride(checked) {
|
||||
$scope.$evalAsync(() => {
|
||||
this.formValues.GlobalDeploymentOptions.perEnvOverride = checked;
|
||||
});
|
||||
}
|
||||
|
||||
async function saveKubernetesSettings() {
|
||||
$async(async () => {
|
||||
this.state.actionInProgress = true;
|
||||
await this.onSubmit(this.formValues, 'Kubernetes settings updated');
|
||||
this.state.actionInProgress = false;
|
||||
});
|
||||
}
|
||||
|
||||
function $onInit() {
|
||||
if (this.settings.GlobalDeploymentOptions) {
|
||||
this.formValues.GlobalDeploymentOptions = this.settings.GlobalDeploymentOptions;
|
||||
}
|
||||
this.formValues.KubeconfigExpiry = this.settings.KubeconfigExpiry;
|
||||
this.formValues.HelmRepositoryURL = this.settings.HelmRepositoryURL;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="svg-kube" title-text="Kubernetes settings"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal">
|
||||
<!-- helm charts -->
|
||||
<div class="col-sm-12 form-section-title"> Helm Repository </div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
You can specify the URL to your own helm repository here. See the
|
||||
<a href="https://helm.sh/docs/topics/chart_repository/" target="_blank">official documentation</a> for more details.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="helmrepository_url" class="col-sm-2 control-label text-left"> URL </label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" ng-model="$ctrl.formValues.HelmRepositoryURL" id="helmrepository_url" placeholder="https://charts.bitnami.com/bitnami" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !helm charts -->
|
||||
<!-- kubeconfig -->
|
||||
<div class="col-sm-12 form-section-title"> Kubeconfig </div>
|
||||
<div class="form-group">
|
||||
<label for="kubeconfig_expiry" class="col-sm-2 control-label text-left"> Kubeconfig expiry </label>
|
||||
<div class="col-sm-10">
|
||||
<select
|
||||
id="kubeconfig_expiry"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.formValues.KubeconfigExpiry"
|
||||
ng-options="opt.value as opt.key for opt in $ctrl.state.availableKubeconfigExpiryOptions"
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !kubeconfig -->
|
||||
<!-- deployment options -->
|
||||
<div class="col-sm-12 form-section-title"> Deployment Options </div>
|
||||
<div class="form-group">
|
||||
<por-switch-field
|
||||
label="'Enforce code-based deployment'"
|
||||
checked="$ctrl.formValues.GlobalDeploymentOptions.hideAddWithForm"
|
||||
name="'toggle_hideAddWithForm'"
|
||||
feature-id="$ctrl.enforceDeploymentOptions"
|
||||
on-change="($ctrl.onToggleAddWithForm)"
|
||||
field-class="'col-sm-10'"
|
||||
label-class="'col-sm-2'"
|
||||
tooltip="'Hides the \'Add with form\' buttons and prevents adding/editing of resources via forms'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
<div class="form-group flex flex-col gap-y-1" ng-if="$ctrl.formValues.GlobalDeploymentOptions.hideAddWithForm">
|
||||
<por-switch-field
|
||||
label="'Allow web editor and custom template use'"
|
||||
checked="!$ctrl.formValues.GlobalDeploymentOptions.hideWebEditor"
|
||||
name="'toggle_hideWebEditor'"
|
||||
on-change="($ctrl.onToggleHideWebEditor)"
|
||||
field-class="'col-sm-10'"
|
||||
label-class="'col-sm-2 !pl-4'"
|
||||
></por-switch-field>
|
||||
<por-switch-field
|
||||
label="'Allow specifying of a manifest via a URL'"
|
||||
checked="!$ctrl.formValues.GlobalDeploymentOptions.hideFileUpload"
|
||||
name="'toggle_hideFileUpload'"
|
||||
on-change="($ctrl.onToggleHideFileUpload)"
|
||||
field-class="'col-sm-10'"
|
||||
label-class="'col-sm-2 !pl-4'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
<div class="form-group" limited-feature-dir="{{::$ctrl.enforceDeploymentOptions}}" limited-feature-class="hidden">
|
||||
<por-switch-field
|
||||
label="'Allow per environment override'"
|
||||
checked="$ctrl.formValues.GlobalDeploymentOptions.perEnvOverride"
|
||||
name="'toggle_perEnvOverride'"
|
||||
on-change="($ctrl.onTogglePerEnvOverride)"
|
||||
field-class="'col-sm-10'"
|
||||
label-class="'col-sm-2'"
|
||||
tooltip="'Allows overriding of deployment options in the Cluster setup screen of each environment'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
<!-- ! deployment options -->
|
||||
<!-- actions -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-sm !ml-0"
|
||||
ng-click="$ctrl.saveKubernetesSettings()"
|
||||
ng-disabled="$ctrl.state.actionInProgress"
|
||||
button-spinner="$ctrl.state.actionInProgress"
|
||||
data-cy="settings-saveKubeSettingsButton"
|
||||
>
|
||||
<span ng-hide="$ctrl.state.actionInProgress">Save Kubernetes settings</span>
|
||||
<span ng-show="$ctrl.state.actionInProgress">Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,81 +2,7 @@
|
|||
|
||||
<application-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></application-settings-panel>
|
||||
|
||||
<!-- kube settings -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="svg-kube" title-text="Kubernetes settings"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal">
|
||||
<!-- helm charts -->
|
||||
<div class="col-sm-12 form-section-title"> Helm Repository </div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
You can specify the URL to your own helm repository here. See the
|
||||
<a href="https://helm.sh/docs/topics/chart_repository/" target="_blank">official documentation</a> for more details.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="helmrepository_url" class="col-sm-2 control-label text-left"> URL </label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" ng-model="settings.HelmRepositoryURL" id="helmrepository_url" placeholder="https://charts.bitnami.com/bitnami" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !helm charts -->
|
||||
<!-- kube -->
|
||||
<div class="col-sm-12 form-section-title"> Kubeconfig </div>
|
||||
<div class="form-group">
|
||||
<label for="kubeconfig_expiry" class="col-sm-2 control-label text-left"> Kubeconfig expiry </label>
|
||||
<div class="col-sm-10">
|
||||
<select
|
||||
id="kubeconfig_expiry"
|
||||
class="form-control"
|
||||
ng-model="formValues.KubeconfigExpiry"
|
||||
ng-options="opt.value as opt.key for opt in state.availableKubeconfigExpiryOptions"
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ! kube -->
|
||||
<!-- deployment options -->
|
||||
<div class="col-sm-12 form-section-title"> Deployment Options </div>
|
||||
<div class="form-group">
|
||||
<por-switch-field
|
||||
label="'Enforce code-based deployment'"
|
||||
name="'toggle_hideAddWithForm'"
|
||||
feature-id="enforceDeploymentOptions"
|
||||
disabled="true"
|
||||
checked="false"
|
||||
field-class="'col-sm-10'"
|
||||
label-class="'col-sm-2'"
|
||||
tooltip="'Hides the \'Add with form\' buttons and prevents adding/editing of resources via forms'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
<!-- !deployment options -->
|
||||
<!-- actions -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-click="saveKubernetesSettings()"
|
||||
ng-disabled="state.kubeSettingsActionInProgress"
|
||||
button-spinner="state.kubeSettingsActionInProgress"
|
||||
data-cy="settings-saveKubeSettingsButton"
|
||||
>
|
||||
<span ng-hide="state.kubeSettingsActionInProgress">Save Kubernetes settings</span>
|
||||
<span ng-show="state.kubeSettingsActionInProgress">Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
<kube-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></kube-settings-panel>
|
||||
|
||||
<ssl-ca-file-settings></ssl-ca-file-settings>
|
||||
<ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
|
||||
|
|
|
|||
|
|
@ -21,28 +21,7 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
|
||||
$scope.state = {
|
||||
actionInProgress: false,
|
||||
availableKubeconfigExpiryOptions: [
|
||||
{
|
||||
key: '1 day',
|
||||
value: '24h',
|
||||
},
|
||||
{
|
||||
key: '7 days',
|
||||
value: `${24 * 7}h`,
|
||||
},
|
||||
{
|
||||
key: '30 days',
|
||||
value: `${24 * 30}h`,
|
||||
},
|
||||
{
|
||||
key: '1 year',
|
||||
value: `${24 * 30 * 12}h`,
|
||||
},
|
||||
{
|
||||
key: 'No expiry',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
|
||||
backupInProgress: false,
|
||||
featureLimited: false,
|
||||
showHTTPS: !window.ddExtension,
|
||||
|
|
@ -51,8 +30,6 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
$scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
|
||||
|
||||
$scope.formValues = {
|
||||
KubeconfigExpiry: undefined,
|
||||
HelmRepositoryURL: undefined,
|
||||
BlackListedLabels: [],
|
||||
labelName: '',
|
||||
labelValue: '',
|
||||
|
|
@ -111,18 +88,46 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
});
|
||||
};
|
||||
|
||||
// only update the values from the kube settings widget. In future separate the api endpoints
|
||||
$scope.saveKubernetesSettings = function () {
|
||||
const kubeSettingsPayload = {
|
||||
KubeconfigExpiry: $scope.formValues.KubeconfigExpiry,
|
||||
HelmRepositoryURL: $scope.formValues.HelmRepositoryURL,
|
||||
GlobalDeploymentOptions: $scope.formValues.GlobalDeploymentOptions,
|
||||
};
|
||||
|
||||
$scope.state.kubeSettingsActionInProgress = true;
|
||||
updateSettings(kubeSettingsPayload, 'Kubernetes settings updated');
|
||||
$scope.saveS3BackupSettings = function () {
|
||||
const payload = getS3SettingsPayload();
|
||||
BackupService.saveS3Settings(payload)
|
||||
.then(function success() {
|
||||
Notifications.success('Success', 'S3 Backup settings successfully saved');
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to save S3 backup settings');
|
||||
})
|
||||
.finally(function final() {
|
||||
$scope.state.backupInProgress = false;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.exportBackup = function () {
|
||||
const payload = getS3SettingsPayload();
|
||||
BackupService.exportBackup(payload)
|
||||
.then(function success() {
|
||||
Notifications.success('Success', 'Exported backup to S3 successfully');
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to export backup to S3');
|
||||
})
|
||||
.finally(function final() {
|
||||
$scope.state.backupInProgress = false;
|
||||
});
|
||||
};
|
||||
|
||||
function getS3SettingsPayload() {
|
||||
return {
|
||||
Password: $scope.formValues.passwordProtectS3 ? $scope.formValues.passwordS3 : '',
|
||||
CronRule: $scope.formValues.scheduleAutomaticBackups ? $scope.formValues.cronRule : '',
|
||||
AccessKeyID: $scope.formValues.accessKeyId,
|
||||
SecretAccessKey: $scope.formValues.secretAccessKey,
|
||||
Region: $scope.formValues.region,
|
||||
BucketName: $scope.formValues.bucketName,
|
||||
S3CompatibleHost: $scope.formValues.s3CompatibleHost,
|
||||
};
|
||||
}
|
||||
|
||||
function updateSettings(settings, successMessage = 'Settings updated') {
|
||||
// ignore CloudApiKeys to avoid overriding them
|
||||
//
|
||||
|
|
@ -141,7 +146,6 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
Notifications.error('Failure', err, 'Unable to update settings');
|
||||
})
|
||||
.finally(function final() {
|
||||
$scope.state.kubeSettingsActionInProgress = false;
|
||||
$scope.state.actionInProgress = false;
|
||||
});
|
||||
}
|
||||
|
|
@ -152,8 +156,6 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
var settings = data;
|
||||
$scope.settings = settings;
|
||||
|
||||
$scope.formValues.KubeconfigExpiry = settings.KubeconfigExpiry;
|
||||
$scope.formValues.HelmRepositoryURL = settings.HelmRepositoryURL;
|
||||
$scope.formValues.BlackListedLabels = settings.BlackListedLabels;
|
||||
})
|
||||
.catch(function error(err) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue