@rancher/shell 0.1.2 → 0.1.4

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

@@ -0,0 +1,284 @@
+<script>
+import ChartReadme from '@shell/components/ChartReadme';
+import { Banner } from '@components/Banner';
+import LazyImage from '@shell/components/LazyImage';
+
+export default {
+  components: {
+    Banner,
+    ChartReadme,
+    LazyImage
+  },
+
+  data() {
+    return {
+      showSlideIn:  false,
+      info:         undefined,
+      infoVersion:  undefined,
+      versionInfo:  undefined,
+      versionError: undefined,
+      defaultIcon:  require('~shell/assets/images/generic-plugin.svg'),
+    };
+  },
+
+  methods: {
+    show(info) {
+      this.info = info;
+      this.showSlideIn = true;
+      this.version = null;
+      this.versionInfo = null;
+      this.versionError = null;
+
+      this.loadPluginVersionInfo();
+    },
+
+    hide() {
+      this.showSlideIn = false;
+    },
+
+    async loadPluginVersionInfo(version) {
+      this.versionError = false;
+      this.versionInfo = undefined;
+
+      const versionName = version || this.info.displayVersion;
+
+      this.infoVersion = versionName;
+
+      if (!this.info.chart) {
+        return;
+      }
+
+      try {
+        this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
+          repoType:  this.info.chart.repoType,
+          repoName:  this.info.chart.repoName,
+          chartName: this.info.chart.chartName,
+          versionName
+        });
+        // Here we set us versionInfo. The returned
+        // object contains everything all info
+        // about a currently installed app, and it has the
+        // following keys:
+        //
+        // - appReadme: A short overview of what the app does. This
+        //   forms the first few paragraphs of the chart info when
+        //   you install a Helm chart app through Rancher.
+        // - chart: Metadata about the Helm chart, including the
+        //   name and version.
+        // - readme: This is more detailed information that appears
+        //   under the heading "Chart Information (Helm README)" when
+        //   you install or upgrade a Helm chart app through Rancher,
+        //   below the app README.
+        // - values: All Helm chart values for the currently installed
+        //   app.
+      } catch (e) {
+        this.versionError = true;
+        console.error('Unable to fetch VersionInfo: ', e); // eslint-disable-line no-console
+      }
+    }
+  }
+};
+</script>
+<template>
+  <div class="plugin-info-panel">
+    <div v-if="showSlideIn" class="glass" @click="hide()" />
+    <div class="slideIn" :class="{'hide': false, 'slideIn__show': showSlideIn}">
+      <div v-if="info">
+        <div class="plugin-header">
+          <div class="plugin-icon">
+            <LazyImage
+              v-if="info.icon"
+              :initial-src="defaultIcon"
+              :error-src="defaultIcon"
+              :src="info.icon"
+              class="icon plugin-icon-img"
+            />
+            <img
+              v-else
+              :src="defaultIcon"
+              class="icon plugin-icon-img"
+            />
+          </div>
+          <div class="plugin-title">
+            <h2 class="slideIn__header">
+              {{ info.name }}
+            </h2>
+            <p class="plugin-description">
+              {{ info.description }}
+            </p>
+          </div>
+          <div class="plugin-close">
+            <div class="slideIn__header__buttons">
+              <div class="slideIn__header__button" @click="showSlideIn = false">
+                <i class="icon icon-close" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <Banner v-if="!info.certified" color="warning" :label="t('plugins.descriptions.third-party')" class="mt-10" />
+          <Banner v-if="info.experimental" color="warning" :label="t('plugins.descriptions.experimental')" class="mt-10" />
+        </div>
+
+        <h3 v-if="info.versions">
+          {{ t('plugins.info.versions') }}
+        </h3>
+        <div class="plugin-versions mb-10">
+          <div v-for="v in info.versions" :key="v.version">
+            <a
+              class="version-link"
+              :class="{'version-active': v.version === infoVersion}"
+              @click="loadPluginVersionInfo(v.version)"
+            >
+              {{ v.version }}
+            </a>
+          </div>
+        </div>
+
+        <div v-if="versionError">
+          {{ t('plugins.info.versionError') }}
+        </div>
+        <div v-else>
+          <h3>
+            {{ t('plugins.info.detail') }}
+          </h3>
+          <ChartReadme v-if="versionInfo" :version-info="versionInfo" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .plugin-info-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    $slideout-width: 35%;
+    $title-height: 50px;
+    $padding: 5px;
+    $slideout-width: 35%;
+    $header-height: 54px;
+
+    .glass {
+      z-index: 9;
+      position: fixed;
+      top: $header-height;
+      height: calc(100% - $header-height);
+      left: 0;
+      width: 100%;
+      opacity: 0;
+    }
+
+    .slideIn {
+      border-left: var(--header-border-size) solid var(--header-border);
+      position: fixed;
+      top: $header-height;
+      right: -$slideout-width;
+      height: calc(100% - $header-height);
+      background-color: var(--topmenu-bg);
+      width: $slideout-width;
+      z-index: 10;
+      display: flex;
+      flex-direction: column;
+
+      padding: 10px;
+
+      transition: right .5s ease;
+
+      h3 {
+        font-size: 14px;
+        margin: 15px 0 10px 0;
+        opacity: 0.7;
+        text-transform: uppercase;
+      }
+
+      .plugin-header {
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        padding-bottom: 20px;
+
+        .plugin-title {
+          flex: 1;
+        }
+      }
+
+      .plugin-icon {
+        font-size: 40px;
+        margin-right:10px;
+        color: #888;
+
+        .plugin-icon-img {
+          height: 40px;
+          width: 40px;
+        }
+      }
+
+      .plugin-versions {
+        display: flex;
+      }
+
+      .plugin-description {
+        font-size: 15px;
+      }
+
+      .version-link {
+        cursor: pointer;
+        border: 1px solid var(--link);
+        padding: 2px 8px;
+        border-radius: 5px;
+        user-select: none;
+        margin-right: 5px;
+
+        &.version-active {
+          color: var(--link-text);
+          background: var(--link);
+        }
+      }
+
+      &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &__buttons {
+          display: flex;
+        }
+
+        &__button {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 2px;
+          > i {
+            font-size: 20px;
+            opacity: 0.5;
+          }
+          &:hover {
+            background-color: var(--wm-closer-hover-bg);
+          }
+        }
+      }
+
+      .chart-content__tabs {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        height: 0;
+
+        padding-bottom: 10px;
+
+        ::v-deep .chart-readmes {
+          flex: 1;
+          overflow: auto;
+        }
+      }
+
+      &__show {
+        right: 0;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,130 @@
+<script>
+import { CATALOG, UI_PLUGIN } from '@shell/config/types';
+import Dialog from '@shell/components/Dialog.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import {
+  UI_PLUGIN_NAMESPACE,
+  UI_PLUGIN_CHARTS,
+  UI_PLUGINS_REPO_NAME,
+  UI_PLUGINS_REPO_URL,
+} from '@shell/config/uiplugins';
+
+export default {
+  components: {
+    Checkbox,
+    Dialog,
+  },
+
+  async fetch() {
+    if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
+      const repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
+
+      this.defaultRepo = repos.find(r => r.name === UI_PLUGINS_REPO_NAME && r.spec.gitRepo === UI_PLUGINS_REPO_URL);
+    }
+  },
+
+  data() {
+    return {
+      errors:      [],
+      defaultRepo: undefined,
+      removeRepo:  false,
+    };
+  },
+
+  methods: {
+    async removeChart(name) {
+      const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+      const found = apps.find((app) => {
+        return app.namespace === UI_PLUGIN_NAMESPACE && app.name === name;
+      });
+
+      if (found) {
+        return found.remove();
+      }
+
+      // TODO - Return rejected promise - error
+      return null;
+    },
+
+    showDialog() {
+      this.removeRepo = !!this.defaultRepo;
+      this.$modal.show('confirm-uiplugins-remove');
+    },
+
+    async doRemove(btnCb) {
+      this.errors = [];
+
+      // Remove the charts in the reverse order that we install them in
+      const uninstall = [...UI_PLUGIN_CHARTS].reverse();
+
+      for (let i = 0; i < uninstall.length; i++) {
+        const chart = uninstall[i];
+
+        try {
+          await this.removeChart(chart);
+        } catch (e) {
+          this.errors.push(e.message);
+        }
+      }
+
+      if (this.removeRepo && this.defaultRepo) {
+        try {
+          await this.defaultRepo.remove();
+        } catch (e) {
+          this.errors.push(e.message);
+        }
+      }
+
+      this.$store.dispatch('management/forgetType', UI_PLUGIN);
+
+      await new Promise(resolve => setTimeout(resolve, 5000));
+
+      btnCb(true);
+
+      this.$router.push(
+        {
+          path:  this.$route.path,
+          force: true,
+        },
+      );
+    },
+  }
+};
+</script>
+<template>
+  <Dialog
+    name="confirm-uiplugins-remove"
+    :title="t('plugins.setup.remove.title')"
+    mode="disable"
+    @okay="doRemove"
+  >
+    <template>
+      <p>
+        {{ t('plugins.setup.remove.prompt') }}
+      </p>
+      <div v-if="!!defaultRepo" class="mt-20">
+        <Checkbox v-model="removeRepo" :primary="true" label-key="plugins.setup.remove.registry.title" />
+        <div class="checkbox-info">
+          {{ t('plugins.setup.remove.registry.prompt') }}
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</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/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>