feat(config): separate configmaps and secrets [EE-5078] (#9029)

app/kubernetes/views/configurations/secret/edit/secret.html

@@ -0,0 +1,187 @@
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Secret details'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    {
+      label:ctrl.configuration.Namespace,
+      link: 'kubernetes.resourcePools.resourcePool',
+      linkParams:{ id: ctrl.configuration.Namespace }
+    },
+    { label:'ConfigMaps and Secrets', link:'kubernetes.configurations', linkParams:{ tab: 'secrets' } },
+    ctrl.configuration.Name,
+     ]"
+  reload="true"
+>
+</page-header>
+
+<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
+
+<div ng-if="ctrl.state.viewReady">
+  <div class="row">
+    <div class="col-sm-12">
+      <rd-widget>
+        <rd-widget-body classes="no-padding">
+          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
+            <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)" data-cy="k8sConfigDetail-configTab">
+              <uib-tab-heading>
+                <pr-icon icon="'lock'"></pr-icon>
+                Secret
+              </uib-tab-heading>
+              <div style="padding: 20px">
+                <table class="table" data-cy="k8sConfigDetail-configTable">
+                  <tbody>
+                    <tr>
+                      <td class="w-[40%] !border-none !pl-0">Name</td>
+                      <td class="!border-none">
+                        {{ ctrl.configuration.Name }}
+                        <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="!pl-0">Namespace</td>
+                      <td>
+                        <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
+                        <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>
+                      </td>
+                    </tr>
+                    <tr ng-if="ctrl.secretTypeName">
+                      <td class="!pl-0">Secret Type</td>
+                      <td>
+                        {{ ctrl.secretTypeName }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </uib-tab>
+            <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)" data-cy="k8sConfigDetail-eventsTab">
+              <uib-tab-heading>
+                <pr-icon icon="'history'"></pr-icon>
+                Events
+                <div ng-if="ctrl.hasEventWarnings()">
+                  <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
+                  {{ ctrl.state.eventWarningCount }} warning(s)
+                </div>
+              </uib-tab-heading>
+              <kubernetes-events-datatable
+                title-text="Events"
+                title-icon="history"
+                dataset="ctrl.events"
+                table-key="kubernetes.configuration.events"
+                order-by="Date"
+                reverse-order="true"
+                loading="ctrl.state.eventsLoading"
+                refresh-callback="ctrl.getEvents"
+              >
+              </kubernetes-events-datatable>
+            </uib-tab>
+            <uib-tab index="2" ng-if="ctrl.configuration.Yaml" classes="btn-sm" select="ctrl.showEditor()" data-cy="k8sConfigDetail-yamlTab">
+              <uib-tab-heading>
+                <pr-icon icon="'code'"></pr-icon>
+                YAML
+              </uib-tab-heading>
+              <div class="px-5 !pt-5" ng-if="ctrl.state.showEditorTab">
+                <kubernetes-yaml-inspector key="configuration-yaml" data="ctrl.configuration.Yaml"></kubernetes-yaml-inspector>
+              </div>
+            </uib-tab>
+          </uib-tabset>
+        </rd-widget-body>
+      </rd-widget>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <rd-widget>
+        <rd-widget-body>
+          <form ng-if="!ctrl.isSystemConfig()" class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off">
+            <div class="col-sm-12 !p-0">
+              <annotations-be-teaser></annotations-be-teaser>
+            </div>
+
+            <kubernetes-configuration-data
+              ng-if="ctrl.formValues"
+              form-values="ctrl.formValues"
+              is-docker-config="ctrl.state.isDockerConfig"
+              is-valid="ctrl.state.isDataValid"
+              on-change-validation="ctrl.isFormValid()"
+              is-creation="false"
+              is-editor-dirty="ctrl.state.isEditorDirty"
+            ></kubernetes-configuration-data>
+
+            <div class="form-group" ng-if="ctrl.state.secretWarningMessage">
+              <div class="col-sm-12 small text-warning vertical-center pt-5">
+                <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
+                <span>{{ ctrl.state.secretWarningMessage }}</span>
+              </div>
+            </div>
+
+            <!-- summary -->
+            <kubernetes-summary-view
+              ng-if="!(!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress)"
+              form-values="ctrl.formValues"
+            ></kubernetes-summary-view>
+
+            <!-- actions -->
+            <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Actions </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm !ml-0"
+                  ng-disabled="!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress"
+                  ng-click="ctrl.updateConfiguration()"
+                  button-spinner="ctrl.state.actionInProgress"
+                  data-cy="k8sConfigDetail-updateConfig"
+                >
+                  <span ng-hide="ctrl.state.actionInProgress">Update {{ ctrl.configuration.Kind | kubernetesConfigurationKindText }}</span>
+                  <span ng-show="ctrl.state.actionInProgress">Update in progress...</span>
+                </button>
+              </div>
+            </div>
+            <!-- !actions -->
+          </form>
+          <div ng-if="ctrl.isSystemConfig()">
+            <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Data </div>
+            <table class="table">
+              <tbody>
+                <tr class="text-muted">
+                  <td style="width: 10%; border-top: none">Key</td>
+                  <td style="width: 90%; border-top: none">Value</td>
+                </tr>
+
+                <tr ng-repeat="item in ctrl.formValues.Data track by $index">
+                  <td>{{ item.Key }}</td>
+                  <td>
+                    <div style="white-space: pre-wrap">{{ item.Value }}</div>
+                    <div style="margin-top: 2px">
+                      <span class="btn btn-primary btn-xs" ng-click="ctrl.copyConfigurationValue($index)"> <pr-icon icon="'copy'" class-name="'mr-0.5'"></pr-icon>Copy </span>
+                      <span id="copyValueNotification_{{ $index }}" style="display: none; color: #23ae89; margin-left: 5px" class="small">
+                        <pr-icon icon="'check'"></pr-icon> copied
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </rd-widget-body>
+      </rd-widget>
+    </div>
+  </div>
+
+  <div class="row" ng-if="ctrl.configuration.Used">
+    <div class="col-sm-12">
+      <kubernetes-integrated-applications-datatable
+        dataset="ctrl.configuration.Applications"
+        table-key="kubernetes.configurations.applications"
+        order-by="Name"
+        refresh-callback="ctrl.getApplications"
+        title-text="Applications using this secret"
+        title-icon="svg-laptopcode"
+      >
+      </kubernetes-integrated-applications-datatable>
+    </div>
+  </div>
+</div>

app/kubernetes/views/configurations/secret/edit/secret.js

@@ -0,0 +1,8 @@
+angular.module('portainer.kubernetes').component('kubernetesSecretView', {
+  templateUrl: './secret.html',
+  controller: 'KubernetesSecretController',
+  controllerAs: 'ctrl',
+  bindings: {
+    $transition$: '<',
+  },
+});

app/kubernetes/views/configurations/secret/edit/secretController.js

@@ -0,0 +1,308 @@
+import angular from 'angular';
+import _ from 'lodash-es';
+
+import { KubernetesConfigurationFormValues } from 'Kubernetes/models/configuration/formvalues';
+import { KubernetesConfigurationKinds, KubernetesSecretTypeOptions } from 'Kubernetes/models/configuration/models';
+import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelper';
+import KubernetesConfigurationConverter from 'Kubernetes/converters/configuration';
+import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
+import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
+
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { confirmUpdate, confirmWebEditorDiscard } from '@@/modals/confirm';
+import { isConfigurationFormValid } from '../../validation';
+
+class KubernetesSecretController {
+  /* @ngInject */
+  constructor(
+    $async,
+    $state,
+    $window,
+    clipboard,
+    Notifications,
+    LocalStorage,
+    KubernetesConfigurationService,
+    KubernetesSecretService,
+    KubernetesResourcePoolService,
+    KubernetesApplicationService,
+    KubernetesEventService
+  ) {
+    this.$async = $async;
+    this.$state = $state;
+    this.$window = $window;
+    this.clipboard = clipboard;
+    this.Notifications = Notifications;
+    this.LocalStorage = LocalStorage;
+    this.KubernetesConfigurationService = KubernetesConfigurationService;
+    this.KubernetesResourcePoolService = KubernetesResourcePoolService;
+    this.KubernetesApplicationService = KubernetesApplicationService;
+    this.KubernetesEventService = KubernetesEventService;
+    this.KubernetesConfigurationKinds = KubernetesConfigurationKinds;
+    this.KubernetesSecretTypeOptions = KubernetesSecretTypeOptions;
+    this.KubernetesSecretService = KubernetesSecretService;
+
+    this.onInit = this.onInit.bind(this);
+    this.getConfigurationAsync = this.getConfigurationAsync.bind(this);
+    this.getEvents = this.getEvents.bind(this);
+    this.getEventsAsync = this.getEventsAsync.bind(this);
+    this.getApplications = this.getApplications.bind(this);
+    this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
+    this.updateConfiguration = this.updateConfiguration.bind(this);
+    this.updateConfigurationAsync = this.updateConfigurationAsync.bind(this);
+  }
+
+  isSystemNamespace() {
+    return KubernetesNamespaceHelper.isSystemNamespace(this.configuration.Namespace);
+  }
+
+  isSystemConfig() {
+    return this.isSystemNamespace() || this.configuration.IsRegistrySecret;
+  }
+
+  selectTab(index) {
+    this.LocalStorage.storeActiveTab('configuration', index);
+  }
+
+  showEditor() {
+    this.state.showEditorTab = true;
+    this.selectTab(2);
+  }
+
+  copyConfigurationValue(idx) {
+    this.clipboard.copyText(this.formValues.Data[idx].Value);
+    $('#copyValueNotification_' + idx)
+      .show()
+      .fadeOut(2500);
+  }
+
+  isFormValid() {
+    const [isValid, warningMessage] = isConfigurationFormValid(this.state.alreadyExist, this.state.isDataValid, this.formValues);
+    this.state.secretWarningMessage = warningMessage;
+    return isValid;
+  }
+
+  // TODO: refactor
+  // It looks like we're still doing a create/delete process but we've decided to get rid of this
+  // approach.
+  async updateConfigurationAsync() {
+    try {
+      this.state.actionInProgress = true;
+      if (
+        this.formValues.Kind !== this.configuration.Kind ||
+        this.formValues.ResourcePool.Namespace.Name !== this.configuration.Namespace ||
+        this.formValues.Name !== this.configuration.Name
+      ) {
+        await this.KubernetesConfigurationService.create(this.formValues);
+        await this.KubernetesConfigurationService.delete(this.configuration);
+        this.Notifications.success('Success', `Secret successfully updated`);
+        this.$state.go(
+          'kubernetes.secrets.secret',
+          {
+            namespace: this.formValues.ResourcePool.Namespace.Name,
+            name: this.formValues.Name,
+          },
+          { reload: true }
+        );
+      } else {
+        await this.KubernetesConfigurationService.update(this.formValues, this.configuration);
+        this.Notifications.success('Success', `Secret successfully updated`);
+        this.$state.reload(this.$state.current);
+      }
+    } catch (err) {
+      this.Notifications.error('Failure', err, `Unable to update Secret`);
+    } finally {
+      this.state.actionInProgress = false;
+    }
+  }
+
+  updateConfiguration() {
+    if (this.configuration.Used) {
+      confirmUpdate(
+        `The changes will be propagated to ${this.configuration.Applications.length} running ${pluralize(
+          this.configuration.Applications.length,
+          'application'
+        )}. Are you sure you want to update this Secret?`,
+        (confirmed) => {
+          if (confirmed) {
+            return this.$async(this.updateConfigurationAsync);
+          }
+        }
+      );
+    } else {
+      return this.$async(this.updateConfigurationAsync);
+    }
+  }
+
+  async getConfigurationAsync() {
+    try {
+      this.state.configurationLoading = true;
+      const name = this.$transition$.params().name;
+      const namespace = this.$transition$.params().namespace;
+      try {
+        const secret = await this.KubernetesSecretService.get(namespace, name);
+        this.configuration = KubernetesConfigurationConverter.secretToConfiguration(secret);
+        this.formValues.Data = secret.Data;
+      } catch (err) {
+        if (err.status === 403) {
+          this.$state.go('kubernetes.configurations', { tab: 'secrets' });
+          throw new Error('Not authorized to edit secret');
+        }
+      }
+      this.formValues.ResourcePool = _.find(this.resourcePools, (resourcePool) => resourcePool.Namespace.Name === this.configuration.Namespace);
+      this.formValues.Id = this.configuration.Id;
+      this.formValues.Name = this.configuration.Name;
+      this.formValues.Type = this.configuration.Type;
+      this.formValues.Kind = this.configuration.Kind;
+      this.oldDataYaml = this.formValues.DataYaml;
+
+      return this.configuration;
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve secret');
+    } finally {
+      this.state.configurationLoading = false;
+    }
+  }
+
+  getConfiguration() {
+    return this.$async(this.getConfigurationAsync);
+  }
+
+  async getApplicationsAsync(namespace) {
+    try {
+      this.state.applicationsLoading = true;
+      const applications = await this.KubernetesApplicationService.get(namespace);
+      this.configuration.Applications = KubernetesConfigurationHelper.getUsingApplications(this.configuration, applications);
+      KubernetesConfigurationHelper.setConfigurationUsed(this.configuration);
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve applications');
+    } finally {
+      this.state.applicationsLoading = false;
+    }
+  }
+
+  getApplications(namespace) {
+    return this.$async(this.getApplicationsAsync, namespace);
+  }
+
+  hasEventWarnings() {
+    return this.state.eventWarningCount;
+  }
+
+  async getEventsAsync(namespace) {
+    try {
+      this.state.eventsLoading = true;
+      this.events = await this.KubernetesEventService.get(namespace);
+      this.events = _.filter(this.events, (event) => event.Involved.uid === this.configuration.Id);
+      this.state.eventWarningCount = KubernetesEventHelper.warningCount(this.events);
+    } catch (err) {
+      this.Notifications('Failure', err, 'Unable to retrieve events');
+    } finally {
+      this.state.eventsLoading = false;
+    }
+  }
+
+  getEvents(namespace) {
+    return this.$async(this.getEventsAsync, namespace);
+  }
+
+  tagUsedDataKeys() {
+    const configName = this.$transition$.params().name;
+    const usedDataKeys = _.uniq(
+      this.configuration.Applications.flatMap((app) =>
+        app.Env.filter((e) => e.valueFrom && e.valueFrom.configMapKeyRef && e.valueFrom.configMapKeyRef.name === configName).map((e) => e.name)
+      )
+    );
+
+    this.formValues.Data = this.formValues.Data.map((variable) => {
+      if (!usedDataKeys.includes(variable.Key)) {
+        return variable;
+      }
+
+      return { ...variable, Used: true };
+    });
+  }
+
+  async uiCanExit() {
+    if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
+      return confirmWebEditorDiscard();
+    }
+  }
+
+  async onInit() {
+    try {
+      this.state = {
+        actionInProgress: false,
+        configurationLoading: true,
+        applicationsLoading: true,
+        eventsLoading: true,
+        showEditorTab: false,
+        viewReady: false,
+        eventWarningCount: 0,
+        activeTab: 0,
+        currentName: this.$state.$current.name,
+        isDataValid: true,
+        isEditorDirty: false,
+        isDockerConfig: false,
+        secretWarningMessage: '',
+      };
+
+      this.state.activeTab = this.LocalStorage.getActiveTab('configuration');
+
+      this.formValues = new KubernetesConfigurationFormValues();
+
+      this.resourcePools = await this.KubernetesResourcePoolService.get();
+      const configuration = await this.getConfiguration();
+      if (configuration) {
+        await this.getApplications(this.configuration.Namespace);
+        await this.getEvents(this.configuration.Namespace);
+      }
+
+      // after loading the configuration, check if it is a docker config secret type
+      if (
+        this.formValues.Kind === this.KubernetesConfigurationKinds.SECRET &&
+        (this.formValues.Type === this.KubernetesSecretTypeOptions.DOCKERCONFIGJSON.value || this.formValues.Type === this.KubernetesSecretTypeOptions.DOCKERCFG.value)
+      ) {
+        this.state.isDockerConfig = true;
+      }
+      // convert the secret type to a human readable value
+      if (this.formValues.Type) {
+        const secretTypeValues = Object.values(this.KubernetesSecretTypeOptions);
+        const secretType = secretTypeValues.find((secretType) => secretType.value === this.formValues.Type);
+        this.secretTypeName = secretType ? secretType.name : this.formValues.Type;
+      } else {
+        this.secretTypeName = '';
+      }
+
+      if (this.formValues.Type === this.KubernetesSecretTypeOptions.SERVICEACCOUNTTOKEN.value) {
+        this.formValues.ServiceAccountName = configuration.ServiceAccountName;
+      }
+
+      this.tagUsedDataKeys();
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to load view data');
+    } finally {
+      this.state.viewReady = true;
+    }
+
+    this.$window.onbeforeunload = () => {
+      if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
+        return '';
+      }
+    };
+  }
+
+  $onInit() {
+    return this.$async(this.onInit);
+  }
+
+  $onDestroy() {
+    if (this.state.currentName !== this.$state.$current.name) {
+      this.LocalStorage.storeActiveTab('configuration', 0);
+    }
+    this.state.isEditorDirty = false;
+  }
+}
+
+export default KubernetesSecretController;
+angular.module('portainer.kubernetes').controller('KubernetesSecretController', KubernetesSecretController);