@rancher/shell 0.3.23 → 0.3.25

package/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -0,0 +1,182 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { CATALOG, UI_PLUGIN, SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
+import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { allHash } from '@shell/utils/promise';
+
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  components: { AsyncButton },
+
+  async fetch() {
+    if ( this.$store.getters['management/schemaFor'](UI_PLUGIN) ) {
+      const plugins = this.$store.dispatch('management/findAll', { type: UI_PLUGIN });
+
+      this.plugins = plugins || [];
+    }
+  },
+
+  data() {
+    return {
+      catalog: undefined, busy: false, plugins: null
+    };
+  },
+
+  computed: {
+    ...mapGetters({ allCharts: 'catalog/charts' }),
+
+    pluginsFromCatalogImage() {
+      return this.plugins.filter((p) => p.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE]);
+    }
+  },
+
+  methods: {
+    showDialog(catalog) {
+      this.catalog = catalog;
+      this.busy = false;
+      this.$modal.show('uninstallCatalogDialog');
+    },
+
+    closeDialog(result) {
+      this.$modal.hide('uninstallCatalogDialog');
+      this.$emit('closed', result);
+
+      if ( result ) {
+        this.$emit('refresh');
+      }
+    },
+
+    async uninstall() {
+      this.busy = true;
+
+      const catalog = this.catalog;
+      const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+      const pluginApps = apps.filter((app) => {
+        if ( app.namespace === UI_PLUGIN_NAMESPACE ) {
+          // Find the related apps from the deployed helm repository
+          const charts = this.allCharts.filter((chart) => chart.repoName === catalog.repo?.metadata?.name);
+
+          return charts.some((chart) => chart.chartName === app.metadata.name);
+        }
+
+        return false;
+      });
+
+      await this.removeCatalogResources(catalog);
+
+      if ( pluginApps.length ) {
+        try {
+          pluginApps.forEach((app) => {
+            this.$emit('update', app.name, 'uninstall');
+            app.remove();
+          });
+        } catch (e) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('plugins.error.generic'),
+            message: e.message ? e.message : e,
+            timeout: 10000
+          }, { root: true });
+        }
+
+        await this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
+      }
+
+      this.closeDialog(catalog);
+    },
+
+    async removeCatalogResources(catalog) {
+      const selector = `${ UI_PLUGIN_LABELS.CATALOG_IMAGE }=${ catalog.name }`;
+      const namespace = UI_PLUGIN_NAMESPACE;
+
+      if ( selector ) {
+        const hash = await allHash({
+          deployment: this.$store.dispatch('management/findMatching', {
+            type: WORKLOAD_TYPES.DEPLOYMENT, selector, namespace
+          }),
+          service: this.$store.dispatch('management/findMatching', {
+            type: SERVICE, selector, namespace
+          }),
+          repo: this.$store.dispatch('management/findMatching', { type: CATALOG.CLUSTER_REPO, selector })
+        });
+
+        for ( const resource of Object.keys(hash) ) {
+          if ( hash[resource] ) {
+            hash[resource].forEach((r) => r.remove());
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <modal
+    name="uninstallCatalogDialog"
+    height="auto"
+    :scrollable="true"
+  >
+    <div
+      v-if="catalog"
+      class="plugin-install-dialog"
+    >
+      <h4 class="mt-10">
+        {{ t('plugins.uninstall.title', { name: catalog.name }) }}
+      </h4>
+      <div class="mt-10 dialog-panel">
+        <div class="dialog-info">
+          <p>
+            {{ t('plugins.uninstall.catalog') }}
+          </p>
+        </div>
+        <div class="dialog-buttons">
+          <button
+            :disabled="busy"
+            class="btn role-secondary"
+            data-testid="uninstall-ext-modal-cancel-btn"
+            @click="closeDialog(false)"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="uninstall"
+            data-testid="uninstall-ext-modal-uninstall-btn"
+            @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>

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

@@ -13,13 +13,6 @@ import ResourceTable from '@shell/components/ResourceTable';
 export default {
   name: 'CatalogList',
 
-  props: {
-    plugins: {
-      type:     Array,
-      required: true
-    }
-  },
-
   components: { ActionMenu, ResourceTable },
 
   mixins: [ResourceManager],
@@ -27,7 +20,7 @@ export default {
   data() {
     const actions = [
       {
-        action:  'uninstall',
+        action:  'showCatalogUninstallDialog',
         label:   this.t('plugins.uninstall.label'),
         icon:    'icon icon-trash',
         enabled: true,
@@ -57,36 +50,26 @@ export default {
     catalogRows() {
       const rows = [];
 
-      if (this.plugins.length) {
-        // Find the resources associated with the image by the CATALOG_IMAGE label
-        this.plugins.forEach((plugin) => {
-          const resources = [this.namespacedDeployments, this.namespacedServices, this.allRepos];
-          const pluginName = plugin.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE];
+      if ( !isEmpty(this.namespacedDeployments) ) {
+        this.namespacedDeployments.forEach((deploy) => {
+          const resources = [this.namespacedServices, this.allRepos];
+          const deployName = deploy.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE];
 
-          if (pluginName) {
+          if ( deployName ) {
             const out = {
-              uiplugin:        plugin,
-              catalog:         true,
-              name:            pluginName,
-              state:           plugin.metadata?.state?.name,
-              cacheState:      plugin.status?.cacheState,
-              version:         plugin.spec?.plugin?.version,
-              deployment:      null,
-              deploymentImage: null,
-              service:         null,
-              repo:            null
+              name:    deployName,
+              state:   deploy.metadata?.state?.name,
+              image:   deploy.spec?.template?.spec?.containers[0]?.image,
+              service: null,
+              repo:    null
             };
-            const keys = ['deployment', 'service', 'repo'];
+            const keys = ['service', 'repo'];
 
             resources.forEach((resource, i) => {
-              out[keys[i]] = resource?.filter((item) => item.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] === pluginName)[0];
+              out[keys[i]] = resource?.filter((item) => item.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] === deployName)[0];
             });
 
-            if (!isEmpty(out?.deployment)) {
-              out.deploymentImage = out.deployment.spec?.template?.spec?.containers[0]?.image;
-
-              rows.push(out);
-            }
+            rows.push(out);
           }
         });
       }
@@ -153,7 +136,7 @@ export default {
             :custom-target-element="menuTargetElement"
             :custom-target-event="menuTargetEvent"
             @close="setMenu(false)"
-            @uninstall="e => $emit('showUninstallDialog', row, e.event)"
+            @showCatalogUninstallDialog="e => $emit('showCatalogUninstallDialog', row, e.event)"
           />
         </template>
       </ResourceTable>

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

@@ -2,9 +2,8 @@
 import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
-import { CATALOG, SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
-import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
-import { allHash } from '@shell/utils/promise';
+import { CATALOG } from '@shell/config/types';
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 
 export default {
   components: { AsyncButton },
@@ -33,7 +32,7 @@ export default {
       this.$emit('update', plugin.name, 'uninstall');
 
       // 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 || (plugin.catalog && plugin.uiplugin)) {
+      if (plugin.uiplugin?.isDeveloper) {
         // Delete the custom resource
         await plugin.uiplugin.remove();
       }
@@ -41,28 +40,13 @@ export default {
       // Find the app for this plugin
       const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
 
-      const pluginApps = apps.filter((app) => {
-        if (plugin.catalog && app.namespace === UI_PLUGIN_NAMESPACE) {
-          // Find the related apps from the deployed helm repository
-          const charts = this.allCharts.filter((chart) => chart.repoName === plugin.repo?.metadata?.name);
-
-          return charts.some((chart) => chart.chartName === app.metadata.name);
-        }
-
-        if (app.namespace === UI_PLUGIN_NAMESPACE && app.name === plugin.name) {
-          return app;
-        }
-
-        return false;
+      const pluginApp = apps.find((app) => {
+        return app.namespace === UI_PLUGIN_NAMESPACE && app.name === plugin.name;
       });
 
-      if (plugin.catalog) {
-        await this.removePluginImageResources(plugin.uiplugin);
-      }
-
-      if (pluginApps.length) {
+      if (pluginApp) {
         try {
-          pluginApps.forEach((app) => app.remove());
+          await pluginApp.remove();
         } catch (e) {
           this.$store.dispatch('growl/error', {
             title:   this.t('plugins.error.generic'),
@@ -75,28 +59,6 @@ export default {
       }
 
       this.closeDialog(plugin);
-    },
-    async removePluginImageResources(plugin) {
-      const selector = `${ UI_PLUGIN_LABELS.CATALOG_IMAGE }=${ plugin.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] }`;
-      const namespace = UI_PLUGIN_NAMESPACE;
-
-      if (selector) {
-        const hash = await allHash({
-          deployment: this.$store.dispatch('management/findMatching', {
-            type: WORKLOAD_TYPES.DEPLOYMENT, selector, namespace
-          }),
-          service: this.$store.dispatch('management/findMatching', {
-            type: SERVICE, selector, namespace
-          }),
-          repo: this.$store.dispatch('management/findMatching', { type: CATALOG.CLUSTER_REPO, selector })
-        });
-
-        for (const resource of Object.keys(hash)) {
-          if (hash[resource]) {
-            hash[resource].forEach((r) => r.remove());
-          }
-        }
-      }
     }
   }
 };
@@ -118,7 +80,7 @@ export default {
       <div class="mt-10 dialog-panel">
         <div class="dialog-info">
           <p>
-            {{ plugin.catalog ? t('plugins.uninstall.custom') : t('plugins.uninstall.prompt') }}
+            {{ t('plugins.uninstall.prompt') }}
           </p>
         </div>
         <div class="dialog-buttons">

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

@@ -19,6 +19,7 @@ import { BadgeState } from '@components/BadgeState';
 import UninstallDialog from './UninstallDialog.vue';
 import InstallDialog from './InstallDialog.vue';
 import CatalogLoadDialog from './CatalogList/CatalogLoadDialog.vue';
+import CatalogUninstallDialog from './CatalogList/CatalogUninstallDialog.vue';
 import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins';
@@ -35,7 +36,6 @@ import {
   isChartVersionHigher,
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHART_ANNOTATIONS,
-  UI_PLUGIN_LABELS,
   UI_PLUGINS_REPO_URL,
   UI_PLUGINS_PARTNERS_REPO_URL
 } from '@shell/config/uiplugins';
@@ -58,6 +58,7 @@ export default {
     CatalogList,
     Banner,
     CatalogLoadDialog,
+    CatalogUninstallDialog,
     InstallDialog,
     LazyImage,
     PluginInfoPanel,
@@ -318,7 +319,11 @@ export default {
             builtin:        !!p.builtin,
           };
 
-          all.push(item);
+          // Built-in plugins can chose to be hidden - used where we implement as extensions
+          // but don't want to shows them individually on the extensions page
+          if (!(item.builtin && rancher[UI_PLUGIN_CHART_ANNOTATIONS.HIDDEN_BUILTIN])) {
+            all.push(item);
+          }
         }
       });
 
@@ -326,11 +331,6 @@ export default {
       this.plugins.forEach((p) => {
         const chart = all.find((c) => c.name === p.name);
 
-        // Plugin is a container image, do not add to charts
-        if (p.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE]) {
-          return;
-        }
-
         if (chart) {
           chart.installed = true;
           chart.uiplugin = p;
@@ -409,10 +409,6 @@ export default {
 
       // Sort by name
       return sortBy(all, 'name', false);
-    },
-
-    pluginsFromCatalogImage() {
-      return this.plugins.filter((p) => p.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE]);
     }
   },
 
@@ -464,15 +460,11 @@ export default {
 
       neu.forEach((plugin) => {
         const existing = installed.find((p) => !p.removed && p.name === plugin.name && p.version === plugin.version);
-        const isCustomImage = plugin.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE];
 
         if (!existing && plugin.isCached) {
-          if (!this.uiErrors[plugin.name] && !isCustomImage) {
+          if (!this.uiErrors[plugin.name]) {
             changes++;
           }
-          if (isCustomImage) {
-            this.refreshCharts(true);
-          }
 
           this.updatePluginInstallStatus(plugin.name, false);
         }
@@ -481,7 +473,7 @@ export default {
       if (changes > 0) {
         Vue.set(this, 'reloadRequired', true);
       }
-    },
+    }
   },
 
   // Forget the types when we leave the page
@@ -550,6 +542,10 @@ export default {
       this.$refs.catalogLoadDialog.showDialog();
     },
 
+    showCatalogUninstallDialog(ev) {
+      this.$refs.catalogUninstallDialog.showDialog(ev);
+    },
+
     showInstallDialog(plugin, mode, ev) {
       ev.target?.blur();
       ev.preventDefault();
@@ -667,50 +663,49 @@ export default {
           {{ t('plugins.title') }}
         </h2>
       </template>
-      <div
-        v-if="reloadRequired"
-        class="plugin-reload-banner mr-20"
-        data-testid="extension-reload-banner"
-      >
-        <i class="icon icon-checkmark mr-10" />
-        <span>
-          {{ t('plugins.reload') }}
-        </span>
-        <button
-          class="ml-10 btn btn-sm role-primary"
-          data-testid="extension-reload-banner-reload-btn"
-          @click="reload()"
-        >
-          {{ t('generic.reload') }}
-        </button>
-      </div>
-      <div
-        v-if="hasService && hasMenuActions"
-        class="actions-container"
-      >
-        <button
-          ref="actions"
-          aria-haspopup="true"
-          type="button"
-          class="btn role-multi-action actions"
-          data-testid="extensions-page-menu"
-          @click="setMenu"
+      <div class="actions-container">
+        <div
+          v-if="reloadRequired"
+          class="plugin-reload-banner mr-20"
+          data-testid="extension-reload-banner"
         >
-          <i class="icon icon-actions" />
-        </button>
-        <ActionMenu
-          :custom-actions="menuActions"
-          :open="menuOpen"
-          :use-custom-target-element="true"
-          :custom-target-element="menuTargetElement"
-          :custom-target-event="menuTargetEvent"
-          @close="setMenu(false)"
-          @devLoad="showDeveloperLoadDialog"
-          @removePluginSupport="removePluginSupport"
-          @manageRepos="manageRepos"
-          @addRancherRepos="showAddExtensionReposDialog"
-          @manageExtensionView="manageExtensionView"
-        />
+          <i class="icon icon-checkmark mr-10" />
+          <span>
+            {{ t('plugins.reload') }}
+          </span>
+          <button
+            class="ml-10 btn btn-sm role-primary"
+            data-testid="extension-reload-banner-reload-btn"
+            @click="reload()"
+          >
+            {{ t('generic.reload') }}
+          </button>
+        </div>
+        <div v-if="hasService && hasMenuActions">
+          <button
+            ref="actions"
+            aria-haspopup="true"
+            type="button"
+            class="btn role-multi-action actions"
+            data-testid="extensions-page-menu"
+            @click="setMenu"
+          >
+            <i class="icon icon-actions" />
+          </button>
+          <ActionMenu
+            :custom-actions="menuActions"
+            :open="menuOpen"
+            :use-custom-target-element="true"
+            :custom-target-element="menuTargetElement"
+            :custom-target-event="menuTargetEvent"
+            @close="setMenu(false)"
+            @devLoad="showDeveloperLoadDialog"
+            @removePluginSupport="removePluginSupport"
+            @manageRepos="manageRepos"
+            @addRancherRepos="showAddExtensionReposDialog"
+            @manageExtensionView="manageExtensionView"
+          />
+        </div>
       </div>
     </div>
 
@@ -737,9 +732,8 @@ export default {
     <div v-else>
       <template v-if="showCatalogList">
         <CatalogList
-          :plugins="pluginsFromCatalogImage"
           @showCatalogLoadDialog="showCatalogLoadDialog"
-          @showUninstallDialog="showUninstallDialog"
+          @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
         />
       </template>
       <template v-else>
@@ -814,8 +808,8 @@ export default {
             />
             <template v-else>
               <div
-                v-for="plugin in list"
-                :key="plugin.name"
+                v-for="(plugin, i) in list"
+                :key="plugin.name + i"
                 class="plugin"
                 :data-testid="`extension-card-${plugin.name}`"
                 @click="showPluginDetail(plugin)"
@@ -999,6 +993,12 @@ export default {
     <CatalogLoadDialog
       ref="catalogLoadDialog"
       @closed="didInstall"
+      @refresh="() => reloadRequired = true"
+    />
+    <CatalogUninstallDialog
+      ref="catalogUninstallDialog"
+      @closed="didUninstall"
+      @refresh="() => reloadRequired = true"
     />
     <DeveloperInstallDialog
       ref="developerInstallDialog"

package/pages/diagnostic.vue

@@ -120,9 +120,6 @@ export default {
       systemInformation.jsMemory.value += `, ${ this.t('about.diagnostic.systemInformation.memUsedJsHeapSize', { usedJSHeapSize: window?.performance?.memory?.usedJSHeapSize }) }`;
     }
 
-    // scroll logs container to the bottom
-    this.scrollLogsToBottom();
-
     return {
       systemInformation,
       topFifteenForResponseTime: null,
@@ -130,16 +127,9 @@ export default {
       finalCounts:               null,
       includeResponseTimes:      true,
       storeMapping:              this.$store?._modules?.root?.state,
-      latestLogs:                console.logs // eslint-disable-line no-console
     };
   },
 
-  watch: {
-    latestLogs() {
-      this.scrollLogsToBottom();
-    }
-  },
-
   computed: {
     clusterCount() {
       return this.finalCounts?.length;
@@ -147,14 +137,6 @@ export default {
   },
 
   methods: {
-    scrollLogsToBottom() {
-      this.$nextTick(() => {
-        const logsContainer = document.querySelector('.logs-container');
-
-        logsContainer.scrollTop = logsContainer.scrollHeight;
-      });
-    },
-
     generateKey(data) {
       const randomize = Math.random() * 10000;
 
@@ -166,7 +148,6 @@ export default {
       const fileName = 'rancher-diagnostic-data.json';
       const data = {
         systemInformation: this.systemInformation,
-        logs:              this.latestLogs,
         storeMapping:      this.parseStoreData(this.storeMapping),
         resourceCounts:    this.finalCounts,
         responseTimes:     this.responseTimes
@@ -411,26 +392,6 @@ export default {
       </div>
     </div>
 
-    <!-- Logs -->
-    <div class="mb-40">
-      <h2 class="mb-20">
-        {{ t('about.diagnostic.logs.subtitle') }}
-      </h2>
-      <ul class="logs-container">
-        <li
-          v-for="logEntry in latestLogs"
-          :key="generateKey(logEntry.timestamp)"
-          :class="logEntry.type"
-        >
-          <span class="log-entry-type">{{ logEntry.type }} :: </span>
-          <span
-            v-for="(arg, i) in logEntry.data"
-            :key="i"
-          >{{ arg }}</span>
-        </li>
-      </ul>
-    </div>
-
     <PromptModal />
   </div>
 </template>

package/pages/home.vue

@@ -192,7 +192,7 @@ export default {
           label:        this.t('tableHeaders.pods'),
           name:         'pods',
           value:        '',
-          sort:         ['status.allocatable.pods', 'status.available.pods'],
+          sort:         ['status.allocatable.pods', 'status.requested.pods'],
           formatter:    'PodsUsage',
           delayLoading: true
         },