@rancher/shell 0.1.4 → 0.2.1

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

@@ -1,13 +1,12 @@
 <script>
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
-
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
-import { CATALOG, UI_PLUGIN, SCHEMA } from '@shell/config/types';
+import { CATALOG, UI_PLUGIN, SERVICE } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-
+import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
 import ActionMenu from '@shell/components/ActionMenu';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
@@ -19,7 +18,16 @@ import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins';
 import RemoveUIPlugins from './RemoveUIPlugins';
-import { isUIPlugin, uiPluginHasAnnotation, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import {
+  isUIPlugin,
+  uiPluginAnnotation,
+  uiPluginHasAnnotation,
+  isSupportedChartVersion,
+  UI_PLUGIN_NAMESPACE,
+  UI_PLUGIN_CHART_ANNOTATIONS
+} from '@shell/config/uiplugins';
+
+const MAX_DESCRIPTION_LENGTH = 200;
 
 export default {
   components: {
@@ -48,7 +56,9 @@ export default {
       menuTargetElement: null,
       menuTargetEvent:   null,
       menuOpen:          false,
+      hasService:        false,
       defaultIcon:       require('~shell/assets/images/generic-plugin.svg'),
+      reloadRequired:    false,
     };
   },
 
@@ -57,8 +67,12 @@ export default {
   async fetch() {
     const hash = {};
 
-    if (this.hasPluginCRD) {
-      hash.plugins = this.$store.dispatch('management/findAll', { type: UI_PLUGIN });
+    const isSetup = await this.updateInstallStatus();
+
+    if (isSetup) {
+      if (this.$store.getters['management/schemaFor'](UI_PLUGIN)) {
+        hash.plugins = this.$store.dispatch('management/findAll', { type: UI_PLUGIN });
+      }
     }
 
     hash.load = await this.$store.dispatch('catalog/load');
@@ -76,8 +90,14 @@ export default {
 
     this.charts = Object.values(c);
 
+    // If there are no plugins installed, default to the catalog view
+    if (this.plugins.length === 0) {
+      this.$refs.tabs?.select('available');
+    }
+
     this.loading = false;
   },
+
   computed: {
     pluginDeveloper: mapPref(PLUGIN_DEVELOPER),
 
@@ -87,17 +107,25 @@ export default {
     menuActions() {
       const menuActions = [];
 
+      // Add link to go to the Repos view of the local cluster
+      menuActions.push({
+        action:  'manageRepos',
+        label:   this.t('plugins.manageRepos'),
+        enabled: true
+      });
+
       // Only show Developer Load action if the user has this enabled in preferences
       if (this.pluginDeveloper) {
+        menuActions.push( { divider: true });
         menuActions.push({
           action:  'devLoad',
           label:   this.t('plugins.developer.label'),
           enabled: true
         });
-        menuActions.push( { divider: true });
       }
 
-      if (this.hasPluginCRD) {
+      if (this.hasService) {
+        menuActions.push( { divider: true });
         menuActions.push({
           action:  'removePluginSupport',
           label:   this.t('plugins.setup.remove.label'),
@@ -108,14 +136,6 @@ export default {
       return menuActions;
     },
 
-    // Is the Plugin CRD available ?
-    hasPluginCRD() {
-      const schemas = this.$store.getters[`management/all`](SCHEMA);
-      const crd = schemas.find(s => s.id === UI_PLUGIN);
-
-      return !!crd;
-    },
-
     list() {
       const all = this.available;
 
@@ -151,8 +171,11 @@ export default {
       all = all.filter(c => !uiPluginHasAnnotation(c, CATALOG_ANNOTATIONS.HIDDEN, 'true'));
 
       all = all.map((chart) => {
+        // Label can be overridden by chart annotation
+        const label = uiPluginAnnotation(UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
           name:           chart.chartNameDisplay,
+          label,
           description:    chart.chartDescription,
           id:             chart.id,
           versions:       [],
@@ -167,6 +190,9 @@ export default {
         item.versions = [...chart.versions];
         item.chart = chart;
 
+        // Filter the versions, leaving only those that are compatible with this Rancher
+        item.versions = item.versions.filter(version => isSupportedChartVersion(version));
+
         if (this.latest) {
           item.icon = chart.icon || this.latest.annotations['catalog.cattle.io/ui-icon'];
         }
@@ -178,6 +204,9 @@ export default {
         return item;
       });
 
+      // Remove charts with no installable versions
+      all = all.filter(c => c.versions.length > 0);
+
       // Check that all of the loaded plugins are represented
       this.uiplugins.forEach((p) => {
         const chart = all.find(c => c.name === p.name);
@@ -186,7 +215,9 @@ export default {
           // A pluign is loaded, but there is no chart, so add an item so that it shows up
           const item = {
             name:           p.name,
+            label:          p.name,
             description:    p.metadata?.description,
+            icon:           p.metadata?.icon,
             id:             p.id,
             versions:       [],
             displayVersion: p.metadata?.version || '-',
@@ -200,22 +231,36 @@ export default {
 
       // Go through the CRs for the plugins and wire them into the catalog
       this.plugins.forEach((p) => {
-        if (!p.removed) {
-          const chart = all.find(c => c.name === p.name);
+        const chart = all.find(c => c.name === p.name);
 
-          if (chart) {
-            chart.installed = true;
-            chart.uiplugin = p;
-            chart.displayVersion = p.version;
+        if (chart) {
+          chart.installed = true;
+          chart.uiplugin = p;
+          chart.displayVersion = p.version;
 
-            // Can't do this here
-            chart.installing = this.installing[chart.name];
+          // Can't do this here
+          chart.installing = this.installing[chart.name];
 
-            // Check for upgrade
-            if (chart.versions.length && p.version !== chart.versions[0].version) {
-              chart.upgrade = chart.versions[0].version;
-            }
+          // Check for upgrade
+          if (chart.versions.length && p.version !== chart.versions[0].version) {
+            chart.upgrade = chart.versions[0].version;
           }
+        } else {
+          // No chart, so add a card for the plugin based on its Custom resource being present
+          const item = {
+            name:           p.name,
+            label:          p.name,
+            description:    p.description || '-',
+            id:             `${ p.name }-${ p.version }`,
+            versions:       [],
+            displayVersion: p.version || '-',
+            installed:      true,
+            installing:     false,
+            builtin:        false,
+            uiplugin:       p,
+          };
+
+          all.push(item);
         }
       });
 
@@ -224,7 +269,13 @@ export default {
         const chart = all.find(c => c.name === e);
 
         if (chart) {
-          chart.error = !!this.uiErrors[e];
+          const error = this.uiErrors[e];
+
+          if (error && typeof error === 'string') {
+            chart.error = this.t(this.uiErrors[e]);
+          } else {
+            chart.error = false;
+          }
         }
       });
 
@@ -237,6 +288,13 @@ export default {
         }
       });
 
+      // Clamp the lengths of the descriptions
+      all.forEach((plugin) => {
+        if (plugin.description && plugin.description.length > MAX_DESCRIPTION_LENGTH) {
+          plugin.description = `${ plugin.description.substr(0, MAX_DESCRIPTION_LENGTH) } ...`;
+        }
+      });
+
       // Sort by name
       return sortBy(all, 'name', false);
     },
@@ -262,7 +320,10 @@ export default {
           Vue.set(this.errors, plugin.name, error);
 
           if (active) {
-            this.updatePluginInstallStatus(plugin.name, op.status.action);
+            // Can use the status directly, apart from upgrade, which maps to install
+            const status = op.status.action === 'upgrade' ? 'install' : op.status.action;
+
+            this.updatePluginInstallStatus(plugin.name, status);
           } else if (op.status.action === 'uninstall') {
             // Uninstall has finished
             this.updatePluginInstallStatus(plugin.name, false);
@@ -275,32 +336,63 @@ export default {
       });
     },
 
-    plugins(neu) {
+    plugins(neu, old) {
       const installed = this.$store.getters['uiplugins/plugins'];
+      const shouldHaveLoaded = (installed || []).filter(p => !this.uiErrors[p.name] && !p.builtin);
+      let changes = 0;
+
+      // Did the user remove an extension
+      if (neu?.length < shouldHaveLoaded.length) {
+        changes++;
+      }
 
       neu.forEach((plugin) => {
-        const existing = installed.find(p => !p.removed && p.name === plugin.name);
+        const existing = installed.find(p => !p.removed && p.name === plugin.name && p.version === plugin.version);
 
         if (!existing && plugin.isCached) {
-          this.$plugin.loadAsyncByNameAndVersion(plugin.name, plugin.version).catch((e) => {
-            console.error(`Failed to load plugin ${ plugin.name } (${ plugin.version })`); // eslint-disable-line no-console
-          });
+          if (!this.uiErrors[plugin.name]) {
+            changes++;
+          }
 
           this.updatePluginInstallStatus(plugin.name, false);
         }
       });
+
+      if (changes > 0 ) {
+        Vue.set(this, 'reloadRequired', true);
+      }
     },
   },
 
   // Forget the types when we leave the page
   beforeDestroy() {
-    this.$store.dispatch('cluster/forgetType', UI_PLUGIN);
-    this.$store.dispatch('cluster/forgetType', CATALOG.OPERATION);
-    this.$store.dispatch('cluster/forgetType', CATALOG.APP);
-    this.$store.dispatch('cluster/forgetType', CATALOG.CLUSTER_REPO);
+    this.$store.dispatch('management/forgetType', UI_PLUGIN);
+    this.$store.dispatch('management/forgetType', CATALOG.OPERATION);
+    this.$store.dispatch('management/forgetType', CATALOG.APP);
+    this.$store.dispatch('management/forgetType', CATALOG.CLUSTER_REPO);
   },
 
   methods:    {
+    async updateInstallStatus() {
+      let hasService;
+
+      try {
+        const service = await this.$store.dispatch('management/find', {
+          type:  SERVICE,
+          id:   `${ UI_PLUGIN_NAMESPACE }/ui-plugin-operator`,
+          opt:  { force: true },
+        });
+
+        hasService = !!service;
+      } catch (e) {
+        hasService = false;
+      }
+
+      Vue.set(this, 'hasService', hasService);
+
+      return hasService;
+    },
+
     filterChanged(f) {
       this.view = f.selectedName;
     },
@@ -368,6 +460,21 @@ export default {
         this.menuTargetElement = undefined;
         this.menuTargetEvent = undefined;
       }
+    },
+
+    reload() {
+      this.$router.go();
+    },
+
+    manageRepos() {
+      this.$router.push({
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  'local',
+          product:  APP_PRODUCT,
+          resource: CATALOG.CLUSTER_REPO
+        }
+      });
     }
   }
 };
@@ -377,18 +484,27 @@ export default {
   <div class="plugins">
     <div class="plugin-header">
       <h2>{{ t('plugins.title') }}</h2>
+      <div v-if="reloadRequired" class="plugin-reload-banner mr-20">
+        <i class="icon icon-checkmark mr-10" />
+        <span>
+          {{ t('plugins.reload') }}
+        </span>
+        <button class="ml-10 btn btn-sm role-primary" @click="reload()">
+          {{ t('generic.reload') }}
+        </button>
+      </div>
       <button
-        v-if="hasPluginCRD && hasMenuActions"
+        v-if="hasService && hasMenuActions"
         ref="actions"
         aria-haspopup="true"
         type="button"
-        class="btn actions"
+        class="btn actions role-secondary"
         @click="setMenu"
       >
         <i class="icon icon-actions" />
       </button>
       <ActionMenu
-        v-if="hasPluginCRD && hasMenuActions"
+        v-if="hasService && hasMenuActions"
         :custom-actions="menuActions"
         :open="menuOpen"
         :use-custom-target-element="true"
@@ -397,17 +513,18 @@ export default {
         @close="setMenu(false)"
         @devLoad="showDeveloperLoaddDialog"
         @removePluginSupport="removePluginSupport"
+        @manageRepos="manageRepos"
       />
     </div>
 
     <PluginInfoPanel ref="infoPanel" />
 
-    <div v-if="!hasPluginCRD">
+    <div v-if="!hasService">
       <div v-if="loading" class="data-loading">
         <i class="icon-spin icon icon-spinner" />
         <t k="generic.loading" :raw="true" />
       </div>
-      <SetupUIPlugins v-else class="setup-message" />
+      <SetupUIPlugins v-else class="setup-message" @done="updateInstallStatus" />
     </div>
     <div v-else>
       <Tabbed ref="tabs" :tabs-only="true" @changed="filterChanged">
@@ -425,7 +542,7 @@ export default {
           v-if="list.length === 0"
           :vertical="true"
           :subtle="true"
-          icon="icon-gear"
+          icon="icon-extension"
           :message="emptyMessage"
         />
         <template v-else>
@@ -446,28 +563,24 @@ export default {
             </div>
             <div class="plugin-metadata">
               <div class="plugin-name">
-                {{ plugin.name }}
+                {{ plugin.label }}
               </div>
               <div>{{ plugin.description }}</div>
-              <div v-if="plugin.builtin" class="plugin-builtin">
-                {{ t('plugins.labels.builtin') }}
-              </div>
               <div class="plugin-version">
-                <div v-if="plugin.installing" class="plugin-installing">
-                  <i class="version-busy icon icon-spin icon-spinner" />
-                  <div v-if="plugin.installing='install'">
-                    {{ t('plugins.labels.installing') }}
-                  </div>
-                  <div v-else>
-                    {{ t('plugins.labels.uninstalling') }}
-                  </div>
-                </div>
+                <span v-if="plugin.installing === 'uninstall'" class="plugin-installing">
+                  -
+                </span>
                 <span v-else>
                   <span>{{ plugin.displayVersion }}</span>
                   <span v-if="plugin.upgrade" v-tooltip="t('plugins.upgradeAvailable')"> -> {{ plugin.upgrade }}</span>
                 </span>
               </div>
-              <div class="plugin-badges">
+              <div v-if="plugin.builtin" class="plugin-badges">
+                <div class="plugin-builtin">
+                  {{ t('plugins.labels.builtin') }}
+                </div>
+              </div>
+              <div v-else class="plugin-badges">
                 <div v-if="!plugin.certified" v-tooltip="t('plugins.descriptions.third-party')">
                   {{ t('plugins.labels.third-party') }}
                 </div>
@@ -477,17 +590,25 @@ export default {
               </div>
               <div class="plugin-spacer" />
               <div class="plugin-actions">
-                <div v-if="plugin.error" v-tooltip="t('plugins.loadError')" class="plugin-error">
-                  <i class="icon icon-warning" />
-                </div>
+                <template v-if="plugin.error">
+                  <div v-tooltip="plugin.error" class="plugin-error">
+                    <i class="icon icon-warning" />
+                  </div>
+                </template>
                 <div v-if="plugin.helmError" v-tooltip="t('plugins.helmError')" class="plugin-error">
                   <i class="icon icon-warning" />
                 </div>
 
                 <div class="plugin-spacer" />
 
-                <div v-if="plugin.installing">
-                  <!-- Don't show any buttons -->
+                <div v-if="plugin.installing" class="plugin-installing">
+                  <i class="version-busy icon icon-spin icon-spinner" />
+                  <div v-if="plugin.installing ==='install'">
+                    {{ t('plugins.labels.installing') }}
+                  </div>
+                  <div v-else>
+                    {{ t('plugins.labels.uninstalling') }}
+                  </div>
                 </div>
                 <div v-else-if="plugin.installed" class="plugin-buttons">
                   <button v-if="!plugin.builtin" class="btn role-secondary" @click="showUninstallDialog(plugin, $event)">
@@ -515,7 +636,7 @@ export default {
     <InstallDialog ref="installDialog" @closed="didInstall" @update="updatePluginInstallStatus" />
     <UninstallDialog ref="uninstallDialog" @closed="didUninstall" @update="updatePluginInstallStatus" />
     <DeveloperInstallDialog ref="developerInstallDialog" @closed="didInstall" />
-    <RemoveUIPlugins ref="removeUIPlugins" />
+    <RemoveUIPlugins ref="removeUIPlugins" @done="updateInstallStatus" />
   </div>
 </template>
 
@@ -535,6 +656,30 @@ export default {
     }
   }
 
+  .plugin-reload-banner {
+    align-items: center;
+    background-color: var(--success-banner-bg);
+    display: flex;
+    padding: 0 10px;
+    border-radius: 5px;
+    min-height: 36px;
+
+    > i {
+      color: var(--success);
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    > button {
+      line-height: 30px;
+      min-height: 30px;
+    }
+  }
+
+  .plugin-complete {
+    font-size: 18px;
+  }
+
   .plugin-list {
     display: flex;
     flex-wrap: wrap;
@@ -560,6 +705,12 @@ export default {
       flex: 1;
       margin-bottom: 0;
     }
+
+    .btn.actions {
+      line-height: 36px;
+      min-height: 36px;
+      padding: 0 10px;
+    }
   }
 
   .plugin {
@@ -636,15 +787,15 @@ export default {
         height: 16px;
         width: 16px;
       }
+    }
 
-      .plugin-installing {
-        align-items: center;
-        display: flex;
+    .plugin-installing {
+      align-items: center;
+      display: flex;
 
-        > div {
-          font-size: 14px;
-          margin-left: 5px;
-        }
+      > div {
+        font-size: 14px;
+        margin-left: 5px;
       }
     }