@rancher/shell 0.3.11 → 0.3.12

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

@@ -0,0 +1,183 @@
+<script>
+import { mapGetters } from 'vuex';
+import isEmpty from 'lodash/isEmpty';
+
+import ResourceManager from '@shell/mixins/resource-manager';
+import { SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
+import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { UI_PLUGIN_CATALOG } from '@shell/config/table-headers';
+
+import ActionMenu from '@shell/components/ActionMenu';
+import ResourceTable from '@shell/components/ResourceTable';
+
+export default {
+  name: 'CatalogList',
+
+  props: {
+    plugins: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  components: { ActionMenu, ResourceTable },
+
+  mixins: [ResourceManager],
+
+  data() {
+    const actions = [
+      {
+        action:  'uninstall',
+        label:   this.t('plugins.uninstall.label'),
+        icon:    'icon icon-trash',
+        enabled: true,
+      }
+    ];
+
+    return {
+      actions,
+      catalogHeaders:    UI_PLUGIN_CATALOG,
+      menuTargetElement: null,
+      menuTargetEvent:   null,
+      menuOpen:          false,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ allRepos: 'catalog/repos' }),
+
+    namespacedDeployments() {
+      return this.$store.getters['management/all'](WORKLOAD_TYPES.DEPLOYMENT).filter(dep => dep.metadata.namespace === UI_PLUGIN_NAMESPACE);
+    },
+
+    namespacedServices() {
+      return this.$store.getters['management/all'](SERVICE).filter(svc => svc.metadata.namespace === UI_PLUGIN_NAMESPACE);
+    },
+
+    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 (pluginName) {
+            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
+            };
+            const keys = ['deployment', 'service', 'repo'];
+
+            resources.forEach((resource, i) => {
+              out[keys[i]] = resource?.filter(item => item.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] === pluginName)[0];
+            });
+
+            if (!isEmpty(out?.deployment)) {
+              out.deploymentImage = out.deployment.spec?.template?.spec?.containers[0]?.image;
+
+              rows.push(out);
+            }
+          }
+        });
+      }
+
+      return rows;
+    }
+  },
+
+  methods: {
+    setMenu(event) {
+      this.menuOpen = !!event;
+
+      if (event) {
+        this.menuTargetElement = this.$refs.catalogActions;
+        this.menuTargetEvent = event;
+      } else {
+        this.menuTargetElement = undefined;
+        this.menuTargetEvent = undefined;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row mt-20">
+    <div class="col span-12">
+      <ResourceTable
+        :headers="catalogHeaders"
+        :rows="catalogRows"
+        :paging="true"
+        :rows-per-page="10"
+        :table-actions="false"
+        key-field="name"
+      >
+        <template #header-left>
+          <div>
+            <button
+              class="btn bg-primary mr-10"
+              type="button"
+              aria-haspopup="dialog"
+              data-testid="extensions-catalog-load-dialog"
+              @click="$emit('showCatalogLoadDialog')"
+            >
+              {{ t('plugins.manageCatalog.imageLoad.load') }}
+            </button>
+          </div>
+        </template>
+        <template #row-actions="{row}">
+          <button
+            ref="catalogActions"
+            aria-haspopup="true"
+            type="button"
+            class="btn btn-sm role-multi-action actions"
+            data-testid="extensions-page-catalog-row-menu"
+            @click="setMenu"
+          >
+            <i class="icon icon-actions" />
+          </button>
+          <ActionMenu
+            :custom-actions="actions"
+            :open="menuOpen"
+            :use-custom-target-element="true"
+            :custom-target-element="menuTargetElement"
+            :custom-target-event="menuTargetEvent"
+            @close="setMenu(false)"
+            @uninstall="e => $emit('showUninstallDialog', row, e.event)"
+          />
+        </template>
+      </ResourceTable>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sub-row {
+  border-bottom: 1px solid var(--sortable-table-top-divider);
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+
+  section {
+    margin-bottom: 1.5rem;
+  }
+
+  .title {
+    margin-bottom: 0.5rem;
+  }
+}
+</style>

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

@@ -1,8 +1,10 @@
 <script>
-import AsyncButton from '@shell/components/AsyncButton';
-import { CATALOG } from '@shell/config/types';
+import { mapGetters } from 'vuex';
 
-import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+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';
 
 export default {
   components: { AsyncButton },
@@ -11,6 +13,8 @@ export default {
     return { plugin: undefined, busy: false };
   },
 
+  computed: { ...mapGetters({ allCharts: 'catalog/charts' }) },
+
   methods: {
     showDialog(plugin) {
       this.plugin = plugin;
@@ -29,7 +33,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) {
+      if (plugin.uiplugin?.isDeveloper || (plugin.catalog && plugin.uiplugin)) {
         // Delete the custom resource
         await plugin.uiplugin.remove();
       }
@@ -37,13 +41,28 @@ export default {
       // 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;
+      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;
       });
 
-      if (pluginApp) {
+      if (plugin.catalog) {
+        await this.removePluginImageResources(plugin.uiplugin);
+      }
+
+      if (pluginApps.length) {
         try {
-          await pluginApp.remove();
+          pluginApps.forEach(app => app.remove());
         } catch (e) {
           this.$store.dispatch('growl/error', {
             title:   this.t('plugins.error.generic'),
@@ -56,6 +75,28 @@ 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());
+          }
+        }
+      }
     }
   }
 };
@@ -77,7 +118,7 @@ export default {
       <div class="mt-10 dialog-panel">
         <div class="dialog-info">
           <p>
-            {{ t('plugins.uninstall.prompt') }}
+            {{ plugin.catalog ? t('plugins.uninstall.custom') : t('plugins.uninstall.prompt') }}
           </p>
         </div>
         <div class="dialog-buttons">