@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -17,6 +17,8 @@ export interface Props {
 }
 </script>
 <script setup lang="ts">
+const editBttnDataTestId = 'save-configuration-bttn';
+const componentTestid = 'configuration-drawer-tabbed';
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
 const store = useStore();
@@ -38,11 +40,14 @@ const title = computed(() => {
 
 const activeTab = ref<string>(configTabProps ? 'config-tab' : 'yaml-tab');
 
+const isConfig = computed(() => {
+  return activeTab.value === 'config-tab';
+});
+
 const action = computed(() => {
-  const isConfig = activeTab.value === 'config-tab';
-  const ariaLabel = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
-  const label = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
-  const action = isConfig ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
+  const ariaLabel = isConfig.value ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const label = isConfig.value ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const action = isConfig.value ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
 
   return {
     ariaLabel,
@@ -50,6 +55,11 @@ const action = computed(() => {
     action
   };
 });
+
+const canEdit = computed(() => {
+  return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
+});
+
 </script>
 <template>
   <Drawer
@@ -68,6 +78,8 @@ const action = computed(() => {
       <Tabbed
         class="tabbed"
         :useHash="false"
+        :showExtensionTabs="false"
+        :componentTestid="componentTestid"
         @changed="({selectedName}) => {activeTab = selectedName;}"
       >
         <ConfigTab
@@ -82,8 +94,10 @@ const action = computed(() => {
     </template>
     <template #additional-actions>
       <RcButton
+        v-if="canEdit"
         :primary="true"
         :aria-label="action.ariaLabel"
+        :data-testid="editBttnDataTestId"
         @click="action.action"
       >
         {{ action.label }}

package/components/InstallHelmCharts.vue

@@ -0,0 +1,656 @@
+<script>
+import { mapGetters } from 'vuex';
+import throttle from 'lodash/throttle';
+
+import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { WINDOWS } from '@shell/store/catalog';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+
+import AsyncButton from '@shell/components/AsyncButton';
+import Loading from '@shell/components/Loading';
+
+import { isPrerelease } from '@shell/utils/version';
+import { set } from '@shell/utils/object';
+import { defaultCmdOpts as defaultOpts } from '@shell/pages/c/_cluster/apps/charts/install.vue';
+
+/**
+ * Assumptions made by this component
+ * If not in a cluster context, you want to install things in the mgmt cluster
+ * You want to use the latest non-pre-release version of the chart
+ * You want global values (rancher values) configured just as they would be when using the full install experience
+ * Slots:
+ * errors - this component doesn't render errors but it tracks them and provides a slot for the parent component to render errors if needed
+ * cant install - rendered when the user can't create repos or cant see app resources or cant do the install action on the target repo
+ * ready to install - rendered when  a chart is available and the user appears to have permission to install it; this slot lets parent components expose some values customization
+ */
+
+const defaultCmdOpts = { ...defaultOpts, timeout: '600s' };
+
+const MAX_TRIES = 5;
+const RETRY_WAIT = 500;
+
+export default {
+  name: 'InstallHelmCharts',
+
+  components: { AsyncButton, Loading },
+
+  emits: ['done'],
+
+  props: {
+    // vuex store  management or cluster
+    store: {
+      type:    String,
+      default: 'cluster'
+    },
+
+    chartName: {
+      type:     String,
+      required: true
+    },
+
+    repoUrl: {
+      type:     String,
+      required: true
+    },
+
+    repoName: {
+      type:     String,
+      required: true
+    },
+
+    repoType: {
+      type:    String,
+      default: 'cluster'
+    },
+
+    // if not set will use chart targetNamespace. If neither this prop nor chart's targetNamespace are defined, will use default
+    targetNamespace: {
+      type:    String,
+      default: null
+    },
+
+    // consuming component can supply some values to merge with chart values
+    extraValues: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    // how long in ms to show a done/success label between each step
+    delay: {
+      type:    Number,
+      default: 1000
+    },
+
+    chartDisplayName: {
+      type:    String,
+      default: null
+    },
+
+    repoDisplayName: {
+      type:    String,
+      default: null
+    }
+
+  },
+
+  async fetch() {
+    // check if the user can even load repos
+    const repoSchema = this.$store.getters[`${ this.store }/schemaFor`](CATALOG.CLUSTER_REPO);
+
+    if (repoSchema && repoSchema?.resourceActions?.install) {
+      this.canCreateRepos = true;
+
+      this.throttledRefreshCharts = throttle(() => {
+        try {
+          this.$store.dispatch('catalog/load', { force: true });
+        } catch (e) {
+          this.$store.dispatch('growl/fromError', { err: e });
+        }
+      }, 500, { trailing: false });
+
+      if (!this.targetRepo || !this.chart) {
+        this.throttledRefreshCharts();
+      }
+
+      // server url and project ids are used in global values
+      try {
+        this.serverUrlSetting = await this.$store.dispatch(`${ this.store }/find`, {
+          type: MANAGEMENT.SETTING,
+          id:   SETTING.SERVER_URL,
+        });
+      } catch (e) {
+        this.$store.dispatch('growl/fromError', { err: e });
+      }
+
+      await this.$store.dispatch(`${ this.store }/findAll`, { type: MANAGEMENT.PROJECT });
+    }
+  },
+
+  data() {
+    const repo = this.repoDisplayName || this.repoName;
+    const chart = this.chartDisplayName || this.chartName;
+    const stageNames = {
+      ADD_REPO:    'addRepo',
+      LOAD_CHARTS: 'loadCharts',
+      INSTALL:     'install',
+      WAIT:        'waitForLogs'
+    };
+
+    return {
+      throttledRefreshCharts: null,
+
+      // check the cluster repo schema
+      canCreateRepos: false,
+
+      serverUrlSetting: null,
+      versionInfo:      null,
+      userValues:       {},
+      // payload for 'install' action on clusterrepo resource
+      // contains array of chart install info as well as some helm install opts that are set by default in the regular chart install ui
+      installCmd:       { charts: [], ...defaultCmdOpts },
+
+      // disable the button and show a loading spinner while
+      // creating repo
+      // fetching charts from the repo
+      // making the 'install' api call
+      // waiting for logs
+      doingButtonAction: false,
+
+      loadingCharts:  false,
+      waitingForLogs: false,
+
+      // app has been installed, either by this component or elsewhere
+      isInstalled:      false,
+      //  app installation has been initiated  by this component
+      didInstall:       false,
+      installedVersion: '',
+
+      installOperationName:      '',
+      installOperationNamespace: '',
+      operation:                 {}, // crd used to view helm install logs
+      logsReady:                 false,
+      stageNames,
+      stages:                    {
+        [stageNames.ADD_REPO]: {
+          actionLabel:  this.t('catalog.install.button.stages.addRepo.action', { repo }),
+          waitingLabel: this.t('catalog.install.button.stages.addRepo.waiting', { repo }),
+          successLabel: this.t('catalog.install.button.stages.addRepo.success', { repo }),
+          errorLabel:   this.t('catalog.install.button.stages.addRepo.error', { repo }),
+          action:       this.addRepository
+        },
+        [stageNames.LOAD_CHARTS]: {
+          actionLabel:  this.t('catalog.install.button.stages.loadCharts.action', { repo }),
+          waitingLabel: this.t('catalog.install.button.stages.loadCharts.waiting', { repo }),
+          successLabel: this.t('catalog.install.button.stages.loadCharts.success', { chart }),
+          errorLabel:   this.t('catalog.install.button.stages.loadCharts.error', { chart }),
+          action:       this.fetchRepoCharts
+        },
+        // using action label for 'success' here  and in waitForLogs to hack around a timing issue where the success message briefly shows
+        [stageNames.INSTALL]: {
+          actionLabel:  this.t('catalog.install.button.stages.installChart.action', { chart }),
+          waitingLabel: this.t('catalog.install.button.stages.installChart.waiting', { chart }),
+          successLabel: this.t('catalog.install.button.stages.installChart.action', { chart }),
+          errorLabel:   this.t('catalog.install.button.stages.installChart.error', { chart }),
+          action:       this.installChart
+        },
+        [stageNames.WAIT]: {
+          actionLabel:  this.t('catalog.install.button.stages.waitForLogs.action', { chart }),
+          waitingLabel: this.t('catalog.install.button.stages.waitForLogs.waiting', { chart }),
+          successLabel: this.t('catalog.install.button.stages.waitForLogs.action', { chart }),
+          errorLabel:   this.t('catalog.install.button.stages.waitForLogs.error', { chart }),
+          action:       () => this.logsReady ? this.openLogs() : this.waitForLogs()
+        }
+      },
+
+      errors: [],
+      btnCb:  () => {}
+    };
+  },
+
+  watch: {
+    targetRepo: {
+      handler(neu) {
+        if (neu) {
+          if (!this.chart) {
+            this.doingButtonAction = true;
+            this.fetchRepoCharts();
+          }
+        }
+      },
+      immediate: true
+    },
+
+    chart: {
+      handler(neu) {
+        if (neu) {
+          this.fetchVersionInfo();
+        }
+      },
+      immediate: true
+    },
+
+    versionInfo(neu) {
+      this.checkIfInstalled();
+
+      const { chart: chartInfo } = neu;
+
+      this.installCmd.charts[0] = {
+        chartName:   this.chartName,
+        releaseName: chartInfo.name,
+        version:     chartInfo.version,
+        annotations: {
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: this.repoType,
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: this.repoName
+        },
+
+      };
+
+      this.installCmd.namespace = this.targetNamespace || this.chart?.targetNamespace || 'default';
+    }
+  },
+
+  methods: {
+    async addRepository() {
+      this.errors = [];
+      this.doingButtonAction = true;
+
+      try {
+        const repoObj = await this.$store.dispatch(`${ this.store }/create`, {
+          type:     CATALOG.CLUSTER_REPO,
+          metadata: { name: this.repoName },
+          spec:     { url: this.repoUrl },
+        });
+
+        try {
+          await repoObj.save();
+        } catch (e) {
+          this.$store.dispatch('growl/fromError', { err: e });
+
+          this.errors.push(e);
+          this.doingButtonAction = false;
+
+          this.btnCb(false);
+
+          return;
+        }
+
+        this.throttledRefreshCharts();
+      } catch (e) {
+        this.$store.dispatch('growl/fromError', { err: e });
+
+        this.errors.push(e);
+        this.doingButtonAction = false;
+
+        this.btnCb(false);
+      }
+    },
+
+    // it takes time to fetch a repo's charts when the repo resource is created
+    // so we retry loading the chart info using the "refresh" clusterrepo model action
+    async fetchRepoCharts() {
+      this.doingButtonAction = true;
+      let tries = 0;
+
+      while (tries < MAX_TRIES) {
+        try {
+          tries++;
+          await this.targetRepo.refresh();
+          if (this.chart) {
+            break;
+          }
+          await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+        } catch (err) {
+          // some errors here are expected
+          // we only show error state when while block finishes and still no chart found
+        }
+      }
+
+      // tried all our tries and the chart still isn't found - tell users something has gone wrong
+      if (!this.chart) {
+        this.btnCb(false);
+        this.$store.dispatch('growl/fromError', { err: this.t('catalog.install.button.errors.fetchChart') });
+
+        this.doingButtonAction = false;
+      } else {
+        this.btnCb(true);
+      }
+    },
+
+    // once a chart is located fetch installation info from the repo
+    async fetchVersionInfo() {
+      try {
+        // assume we want the latest non-prerelease version
+        const targetVersion = (this.chart?.versions || []).find((v) => v.version && !isPrerelease(v.version))?.version;
+
+        if (!targetVersion) {
+          return;
+        }
+        this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
+          repoType:    this.repoType,
+          repoName:    this.repoName,
+          chartName:   this.chartName,
+          versionName: targetVersion
+        });
+      } catch (e) {
+        this.$store.dispatch('growl/fromError', { err: e });
+        this.errors.push(e);
+        this.doingButtonAction = false;
+      }
+    },
+
+    /**
+     * Check if the chart is already installed
+     * also check if the user can install charts generally, and can install charts from this repo
+     * If the chart has provides-gvr annotation, check that
+     * if no gvr annotation, look for an app with id targetNamespce/targetName
+     * if app is found, tell the user which version is installed
+     */
+    async checkIfInstalled() {
+      const chartInfo = this.versionInfo?.chart || {};
+
+      if (chartInfo.annotations?.[CATALOG_ANNOTATIONS.PROVIDES]) {
+        this.isInstalled = this.$store.getters['catalog/isInstalled']({ gvr: chartInfo?.annotations?.[CATALOG_ANNOTATIONS.PROVIDES] });
+      } else {
+        const appSchema = this.$store.getters[`${ this.store }/schemaFor`](CATALOG.APP);
+
+        if (!appSchema) {
+          this.canInstallChart = false;
+        } else {
+          try {
+            const app = await this.$store.dispatch(`${ this.store }/find`, { type: CATALOG.APP, id: `${ this.targetNamespace || this.chart?.targetNamespace || 'default' }/${ this.chartName }` });
+
+            if (app) {
+              this.installedVersion = app?.spec?.chart?.metadata?.appVersion;
+              this.isInstalled = true;
+            }
+          } catch {
+          }
+        }
+      }
+
+      this.doingButtonAction = false;
+    },
+
+    async installChart() {
+      this.doingButtonAction = true;
+      this.errors = [];
+
+      if (this.isInstalled) {
+        this.doingButtonAction = false;
+
+        this.errors.push(this.t('catalog.install.button.errors.alreadyInstalled'));
+        this.$store.dispatch('growl/fromError', { err: this.t('catalog.install.button.errors.alreadyInstalled') });
+
+        return;
+      }
+      let res;
+
+      try {
+        this.didInstall = true;
+        // should only be values that differ from default
+        this.installCmd.charts[0].values = {
+          ...this.getGlobalValues(), ...this.extraValues, ...this.userValues
+        };
+        res = await this.targetRepo.doAction('install', this.installCmd);
+      } catch (err) {
+        this.btnCb(false);
+        this.errors.push(err);
+        this.doingButtonAction = false;
+
+        return;
+      }
+
+      this.installOperationName = res.operationName;
+      this.installOperationNamespace = res.operationNamespace;
+      await this.waitForLogs();
+      this.btnCb(true);
+
+      setTimeout(() => this.$emit('done', { namespace: res.operationNamespace, name: res.operationName }), this.delay);
+    },
+
+    // find the helm operation and check if logs  are available
+    async waitForLogs() {
+      const { installOperationName, installOperationNamespace } = this;
+      const operationId = `${ installOperationNamespace }/${ installOperationName }`;
+
+      await this.targetRepo.waitForOperation(operationId);
+
+      this.operation = await this.$store.dispatch(`${ this.store }/find`, {
+        type: CATALOG.OPERATION,
+        id:   operationId
+      });
+
+      try {
+        await this.operation.waitForLink('logs');
+        this.logsReady = true;
+        this.doingButtonAction = false;
+      } catch (e) {
+        // The wait times out eventually, move on...
+        this.doingButtonAction = false;
+        this.errors.push(this.t('catalog.install.button.errors.timeoutWaiting'));
+        this.$store.dispatch('growl/fromError', { err: this.t('catalog.install.button.errors.timeoutWaiting') });
+      }
+    },
+
+    // set some global values based off the target cluster's configuration
+    getGlobalValues() {
+      let clusterId = '';
+      let clusterName = '';
+
+      if (this.currentCluster) {
+        clusterId = this.currentCluster?.id;
+        clusterName = this.currentCluster.nameDisplay;
+      } else {
+        clusterId = 'local';
+        clusterName = 'local';
+      }
+
+      const serverUrl = this.serverUrlSetting?.value || '';
+      const rkePathPrefix = this.currentCluster?.spec?.rancherKubernetesEngineConfig?.prefixPath || '';
+      const rkeWindowsPathPrefix = this.currentCluster?.spec?.rancherKubernetesEngineConfig?.winPrefixPath || '';
+      const isWindows = (this.currentCluster?.workerOSs || []).includes(WINDOWS);
+
+      const projects = this.$store.getters[`${ this.store }/all`](MANAGEMENT.PROJECT);
+
+      const systemProjectId = projects.find((p) => p.spec?.chartDisplayName === 'System')?.id?.split('/')?.[1] || '';
+
+      const values = {
+        global: {
+          cattle: {
+            clusterName,
+            clusterId,
+            url: serverUrl,
+            rkePathPrefix,
+            rkeWindowsPathPrefix,
+            systemProjectId
+          }
+        }
+      };
+
+      if (isWindows) {
+        values.global.cattle.windows = { enabled: true };
+      }
+
+      return values;
+    },
+
+    // this method is passed to a slot parent components can use to expose some chart configuration options
+    setValue(key, val) {
+      set(this.userValues, key, val);
+    },
+
+    openLogs() {
+      this.operation.openLogs();
+      this.btnCb(true);
+    },
+
+    // go to the full chart install/upgrade experience
+    goToInstall() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.goToInstall(null, 'local');
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      charts: 'catalog/charts',
+      repos:  'catalog/repos',
+      t:      'i18n/t'
+    }),
+
+    currentCluster() {
+      const storeCluster = this.$store.getters['currentCluster'];
+
+      if (storeCluster) {
+        return storeCluster;
+      }
+
+      return this.$store.getters[`management/byId`](MANAGEMENT.CLUSTER, 'local' );
+    },
+
+    chart() {
+      if (this.targetRepo) {
+        return this.$store.getters['catalog/chart']({
+          repoName:  this.repoName,
+          repoType:  this.repoType,
+          chartName: this.chartName
+        });
+      }
+
+      return null;
+    },
+
+    targetRepo() {
+      return this.$store.getters['catalog/repo']({ repoType: this.repoType, repoName: this.repoName });
+    },
+
+    canInstallChart() {
+      const appSchema = this.$store.getters[`${ this.store }/schemaFor`](CATALOG.APP);
+
+      return appSchema && this.targetRepo && this.targetRepo?.actions?.install;
+    },
+
+    /**
+     * Determine what set of labels and what action to use with the button depending on what catalog resources the component has available
+     * There are 4 stages of chart installation:
+     * creating the repo
+     * getting charts from the repo + configuring the chart
+     * initializing the installation and waiting for logs
+     * offering logs
+     */
+    buttonStage() {
+      if (!this.targetRepo) {
+        return this.stageNames.ADD_REPO;
+      }
+
+      if (!this.chart || (!this.didInstall && this.doingButtonAction)) {
+        return this.stageNames.LOAD_CHARTS;
+      }
+
+      if (!this.installOperationName) {
+        return this.stageNames.INSTALL;
+      }
+
+      return this.stageNames.WAIT;
+    },
+
+    // at each stage of installing the chart, the button may be in one of 3 states
+    // action (blue, ready to be clicked)
+    // waiting (disabled with a loading spinner, doing the thing it was clicked to do)
+    // error  (red, re-enabled, showing generic error label)
+    buttonPhase() {
+      if (this.errors.length) {
+        return 'error';
+      }
+
+      if (this.doingButtonAction) {
+        return 'waiting';
+      }
+
+      return 'action';
+    },
+
+    // the user has permission to install charts, the chart has been found, and it has not been installed already
+    readyToInstall() {
+      return this.canInstallChart && !this.isInstalled && this.chart && !this.doingButtonAction && this.buttonStage === this.stageNames.INSTALL;
+    },
+  },
+
+}
+;
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <!-- the user doesn't have permission either to create repos or install charts generally or install from this repo -->
+  <div v-else-if="!canCreateRepos && !doingButtonAction">
+    <slot name="cant-install">
+      <span>{{ t('catalog.install.button.canNotCreateRepos', ) }}</span>
+    </slot>
+  </div>
+  <div v-else-if="!canInstallChart && !doingButtonAction && targetRepo">
+    <slot name="cant-install">
+      <span>{{ t('catalog.install.button.canNotInstallApps', {repo: repoName} ) }}</span>
+    </slot>
+  </div>
+
+  <!-- the chart is already installed -->
+  <div
+    v-else-if="isInstalled && !installOperationName"
+  >
+    <span>{{ t('catalog.install.button.alreadyInstalled', {chart: chartName, version: installedVersion}) }}
+      <a
+        aria-label="go to chart installation page"
+        @click="goToInstall"
+      >
+        {{ t('catalog.install.button.viewDetails') }}
+      </a>
+    </span>
+  </div>
+
+  <div v-else>
+    <div
+      v-if="readyToInstall"
+    >
+      <!-- the chart is ready to be installed, and installation has not yet begun -->
+      <slot
+        :set-value="setValue"
+        :values="userValues"
+        name="values"
+      />
+    </div>
+    <div v-if="errors && errors.length">
+      <slot
+        :errors="errors"
+        name="errors"
+      />
+    </div>
+    <AsyncButton
+      v-if="canCreateRepos && buttonStage === stageNames.ADD_REPO || canInstallChart && buttonStage !== stageNames.ADD_REPO"
+      :current-phase="buttonPhase"
+      :action-label="stages[buttonStage].actionLabel"
+      :waiting-label="stages[buttonStage].waitingLabel"
+      :success-label="stages[buttonStage].successLabel"
+      :error-label="stages[buttonStage].errorLabel"
+      :delay="delay"
+      type="button"
+      class="btn role-primary"
+      @click="cb=>{btnCb=cb;stages[buttonStage].action()}"
+    />
+    <div>
+      <button
+        v-if="readyToInstall"
+        type="button"
+        class="btn btn-sm role-link"
+        @click="goToInstall"
+      >
+        {{ t('catalog.install.button.customizeInstall') }}
+      </button>
+    </div>
+  </div>
+</template>