@rancher/shell 0.1.3 → 0.1.4

package/pages/c/_cluster/uiplugins/SetupUIPlugins.vue

@@ -0,0 +1,253 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import IconMessage from '@shell/components/IconMessage.vue';
+import { CATALOG, UI_PLUGIN } from '@shell/config/types';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import Dialog from '@shell/components/Dialog.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
+import {
+  UI_PLUGIN_NAMESPACE,
+  UI_PLUGIN_CHARTS,
+  UI_PLUGIN_OPERATOR_REPO_NAME,
+  UI_PLUGINS_REPO_NAME,
+  UI_PLUGINS_REPO_URL,
+  UI_PLUGINS_REPO_BRANCH,
+} from '@shell/config/uiplugins';
+
+export default {
+  components: {
+    AsyncButton,
+    Checkbox,
+    IconMessage,
+    Dialog,
+  },
+
+  async fetch() {
+    // Check to see that the charts we need are available
+    const c = this.$store.getters['catalog/rawCharts'];
+    const charts = Object.values(c);
+    const found = [];
+
+    UI_PLUGIN_CHARTS.forEach((c) => {
+      const f = charts.find(chart => chart.repoName === UI_PLUGIN_OPERATOR_REPO_NAME & chart.chartName === c);
+
+      if (f) {
+        found.push(f);
+      }
+    });
+
+    this.haveCharts = (found.length === UI_PLUGIN_CHARTS.length);
+
+    if (this.haveCharts) {
+      this.installCharts = found;
+
+      if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
+        await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO });
+      }
+    }
+
+    this.loading = false;
+  },
+
+  data() {
+    return {
+      loading:                 true,
+      haveCharts:              false,
+      installCharts:           [],
+      errors:                  [],
+      addRepo:                 true,
+      buttonState:             ASYNC_BUTTON_STATES.ACTION,
+    };
+  },
+
+  computed: {
+    hasRancherUIPluginsRepo() {
+      // Look to see if the Rancher UI Plugins repository is already installed
+      const repos = this.$store.getters['catalog/repos'];
+
+      return !!repos.find(r => r.name === UI_PLUGINS_REPO_NAME);
+    }
+  },
+
+  methods: {
+    async installChart(installChart) {
+      const version = installChart.versions[0];
+      const repoType = version.repoType;
+      const repoName = version.repoName;
+      const repo = this.$store.getters['catalog/repo']({ repoType, repoName });
+
+      const chart = {
+        chartName:   installChart.chartName,
+        version:     version.version,
+        releaseName: installChart.chartName,
+        annotations: {
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: repoType,
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: repoName
+        },
+        values: {}
+      };
+
+      const input = {
+        charts:    [chart],
+        wait:      true,
+        namespace: UI_PLUGIN_NAMESPACE,
+      };
+
+      const action = 'install';
+      const res = await repo.doAction(action, input);
+      const operationId = `${ res.operationNamespace }/${ res.operationName }`;
+
+      await repo.waitForOperation(operationId);
+
+      return this.$store.dispatch(`management/find`, {
+        type: CATALOG.OPERATION,
+        id:   operationId
+      });
+    },
+
+    enable() {
+      this.errors = [];
+
+      // Reset checkbox bsed on if the repo is already installed
+      this.addRepo = !this.hasRancherUIPluginsRepo;
+
+      this.$modal.show('confirm-uiplugins-setup');
+    },
+
+    async dialogClosed(ok) {
+      this.errors = [];
+
+      // User wants to proceed
+      if (ok) {
+        this.buttonState = ASYNC_BUTTON_STATES.WAITING;
+
+        if (this.addRepo) {
+          await this.addDefaultHelmRepository();
+        }
+
+        await this.installPluginCharts();
+
+        await new Promise(resolve => setTimeout(resolve, 5000));
+
+        this.$store.dispatch('management/forgetType', UI_PLUGIN);
+
+        this.buttonState = this.errors.length > 0 ? ASYNC_BUTTON_STATES.ERROR : ASYNC_BUTTON_STATES.ACTION;
+
+        this.$router.push(
+          {
+            path:  this.$route.path,
+            force: true,
+          },
+        );
+      }
+    },
+
+    async addDefaultHelmRepository() {
+      const name = UI_PLUGINS_REPO_NAME;
+
+      try {
+        const pluginCR = await this.$store.dispatch('management/create', {
+          type:     CATALOG.CLUSTER_REPO,
+          metadata: { name },
+          spec:     {
+            gitBranch: UI_PLUGINS_REPO_BRANCH,
+            gitRepo:   UI_PLUGINS_REPO_URL,
+          }
+        });
+
+        return pluginCR.save();
+      } catch (e) {
+        console.error(e); // eslint-disable-line no-console
+
+        this.errors.push(e.message);
+      }
+    },
+
+    async installPluginCharts() {
+      for (let i = 0; i < this.installCharts.length; i++) {
+        const chart = this.installCharts[i];
+
+        try {
+          await this.installChart(chart);
+        } catch (e) {
+          this.errors.push(e.message);
+        }
+      }
+
+      return new Promise(resolve => setTimeout(resolve, 2000));
+    }
+  }
+};
+</script>
+<template>
+  <div>
+    <IconMessage
+      :vertical="true"
+      :subtle="false"
+      icon="icon-gear"
+    >
+      <template v-slot:message>
+        <h2>
+          {{ t('plugins.setup.title') }}
+        </h2>
+        <div v-if="!loading">
+          <div v-if="!haveCharts">
+            <p>
+              {{ t('plugins.setup.prompt.cant') }}
+            </p>
+          </div>
+          <div v-else>
+            <p>
+              {{ t('plugins.setup.prompt.can') }}
+            </p>
+            <AsyncButton
+              mode="enable"
+              :manual="true"
+              :current-phase="buttonState"
+              class="enable-plugin-support"
+              @click="enable"
+            />
+          </div>
+          <div v-for="(e, i) in errors" :key="i" class="plugin-setup-error">
+            {{ e }}
+          </div>
+        </div>
+      </template>
+    </IconMessage>
+    <Dialog
+      name="confirm-uiplugins-setup"
+      :title="t('plugins.setup.install.title')"
+      @closed="dialogClosed"
+    >
+      <template>
+        <p>
+          {{ t('plugins.setup.install.prompt') }}
+        </p>
+        <div v-if="!hasRancherUIPluginsRepo" class="mt-20">
+          <Checkbox v-model="addRepo" :primary="true" label-key="plugins.setup.install.addRancherRepo" />
+          <div class="checkbox-info">
+            {{ t('plugins.setup.install.airgap') }}
+          </div>
+        </div>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .enable-plugin-support {
+    font-size: 14px;
+    margin-top: 20px;
+  }
+
+  .plugin-setup-error {
+    font-size: 14px;
+    color: var(--error);
+    margin: 10px 0 0 0;
+  }
+
+  .checkbox-info {
+    margin-left: 20px;
+    opacity: 0.7;
+  }
+</style>

package/pages/c/_cluster/uiplugins/UninstallDialog.vue

@@ -0,0 +1,115 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { CATALOG } from '@shell/config/types';
+
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+
+export default {
+  components: { AsyncButton },
+
+  data() {
+    return { plugin: undefined, busy: false };
+  },
+
+  methods: {
+    showDialog(plugin) {
+      this.plugin = plugin;
+      this.busy = false;
+      this.$modal.show('uninstallPluginDialog');
+    },
+    closeDialog(result) {
+      this.$modal.hide('uninstallPluginDialog');
+      this.$emit('closed', result);
+    },
+    async uninstall() {
+      this.busy = true;
+
+      const plugin = this.plugin;
+
+      // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
+      if (plugin.uiplugin?.isDeveloper) {
+        // Delete the custom resource
+        await plugin.uiplugin.remove();
+      }
+
+      // Find the app for this plugin
+      const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+
+      const pluginApp = apps.find((app) => {
+        return app.namespace === UI_PLUGIN_NAMESPACE && app.name === plugin.name;
+      });
+
+      if (pluginApp) {
+        await pluginApp.remove();
+
+        await this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
+      }
+
+      // Unload the plugin code
+      this.$plugin.removePlugin(plugin.name);
+
+      this.closeDialog(plugin);
+    }
+  }
+};
+</script>
+
+<template>
+  <modal
+    name="uninstallPluginDialog"
+    height="auto"
+    :scrollable="true"
+  >
+    <div v-if="plugin" class="plugin-install-dialog">
+      <h4 class="mt-10">
+        {{ t('plugins.uninstall.title', { name: plugin.name }) }}
+      </h4>
+      <div class="mt-10 dialog-panel">
+        <div class="dialog-info">
+          <p>
+            {{ t('plugins.uninstall.prompt') }}
+          </p>
+        </div>
+        <div class="dialog-buttons">
+          <button :disabled="busy" class="btn role-secondary" @click="closeDialog(false)">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="uninstall"
+            @click="uninstall()"
+          />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-install-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+
+      .dialog-info {
+        flex: 1;
+      }
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>