Merge pull request #8 from krumIO/fix/APPLAUNCHER-21__fail_to_load_issue

fix: for APPLAUNCHER-21 fixed routing and error handling

.vscode/settings.json

@@ -2,12 +2,7 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.codeActionsOnSave": {
-    "source.fixAll": false,
-    "source.fixAll.eslint": true
-  },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
   "eslint.enable": true,
   "eslint.rules.customizations": [
     {

package.json

@@ -20,12 +20,13 @@
     "clean": "./node_modules/@rancher/shell/scripts/clean",
     "build-pkg": "./node_modules/@rancher/shell/scripts/build-pkg.sh",
     "serve-pkgs": "./node_modules/@rancher/shell/scripts/serve-pkgs",
-    "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish"
+    "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
+    "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@rancher/shell": "^0.3.17",
     "@types/lodash": "4.14.184",
     "css-loader": "6.7.3"
   }
-}
+}

pkg/app-launcher/config/app-launcher.ts

@@ -1 +1,2 @@
 export const PRODUCT_NAME = 'app-launcher';
+export const BLANK_CLUSTER = '_';

pkg/app-launcher/index.ts

@@ -1,6 +1,6 @@
 import { importTypes } from '@rancher/auto-import';
 import { IPlugin } from '@shell/core/types';
-import routes from './routing/extension-routing';
+import extensionRouting from './routing/extension-routing';
 
 // Init the package
 export default function (plugin: IPlugin) {
@@ -11,5 +11,5 @@ export default function (plugin: IPlugin) {
   // Load a product
   plugin.addProduct(require('./product'));
   // Add Vue routes
-  plugin.addRoutes(routes);
+  plugin.addRoutes(extensionRouting);
 }

pkg/app-launcher/pages/app-launcher.vue → pkg/app-launcher/pages/index.vue

@@ -14,27 +14,40 @@ export default {
       loading: true,
     };
   },
-  async fetch() {
-    const allClusters = await this.$store.dispatch(`management/findAll`, {
-      type: MANAGEMENT.CLUSTER,
-    });
-
-    this.servicesByCluster = await Promise.all(
-      allClusters
-        .filter((cluster) => cluster.isReady)
-        .map(async (cluster) => ({
-          name: `${this.$store.getters['i18n/t']('nav.group.cluster')} ${
-            cluster.spec.displayName
-          }`,
-          id: cluster.id,
-          services: (
-            await this.$store.dispatch('cluster/request', {
-              url: `/k8s/clusters/${cluster.id}/v1/services`,
-            })
-          ).data,
-        }))
-    );
-    this.loading = false;
+  async mounted() {
+    console.log('mounted');
+    try {
+      const allClusters = await this.getClusters();
+      this.servicesByCluster = await this.getServicesByCluster(allClusters);
+    } catch (error) {
+      console.error('Error fetching clusters', error);
+    } finally{
+      this.loading = false;
+    };
+  },
+  methods: {
+    async getClusters() {
+      return await this.$store.dispatch(`management/findAll`, {
+        type: MANAGEMENT.CLUSTER,
+      });
+    },
+    async getServicesByCluster(allClusters) {
+      return await Promise.all(
+        allClusters
+          .filter((cluster) => cluster.isReady)
+          .map(async (cluster) => ({
+            name: `${this.$store.getters['i18n/t']('nav.group.cluster')} ${
+              cluster.spec.displayName
+            }`,
+            id: cluster.id,
+            services: (
+              await this.$store.dispatch('cluster/request', {
+                url: `/k8s/clusters/${cluster.id}/v1/services`,
+              })
+            ).data,
+          }))
+      );
+    },
   },
   layout: 'plain',
 };
@@ -43,14 +56,8 @@ export default {
 <template>
   <Loading v-if="loading" />
   <div v-else>
-    <div
-      v-for="cluster in servicesByCluster"
-      :key="cluster.id"
-      style="margin-bottom: 2rem"
-    >
-      <h1
-        class="cluster-header hack-to-keep-header-above-app-launcher-card-dropdown-button"
-      >
+    <div v-for="cluster in servicesByCluster" :key="cluster.id" style="margin-bottom: 2rem">
+      <h1 class="cluster-header hack-to-keep-header-above-app-launcher-card-dropdown-button">
         {{ cluster.name }}
       </h1>
       <div class="services-by-cluster-grid">

pkg/app-launcher/product.ts

@@ -1,6 +1,6 @@
 import { IPlugin } from '@shell/core/types';
-import { PRODUCT_NAME } from './config/app-launcher';
-import { MAIN_APP_LAUNCHER_LOCATION } from './routing/extension-routing';
+import { PRODUCT_NAME, BLANK_CLUSTER } from './config/app-launcher';
+// import { MAIN_APP_LAUNCHER_LOCATION } from './routing/extension-routing';
 
 export function init($plugin: IPlugin, store: any) {
   const { product } = $plugin.DSL(store, PRODUCT_NAME);
@@ -10,7 +10,15 @@ export function init($plugin: IPlugin, store: any) {
     category: 'global',
     icon: 'apps',
     inStore: 'management',
-    to: MAIN_APP_LAUNCHER_LOCATION,
-    weight: 3,
+    weight: 100,
+    to: {
+      name: `${ PRODUCT_NAME }-c-cluster`,
+      path: `/${ PRODUCT_NAME }/c/:cluster/dashboard`,
+      params: {
+        product: PRODUCT_NAME,
+        cluster: BLANK_CLUSTER,
+        pkg: PRODUCT_NAME
+      }
+    },
   });
 }

pkg/app-launcher/routing/extension-routing.ts

@@ -1,13 +1,17 @@
-import type { RouteConfig } from 'vue-router';
-import { PRODUCT_NAME } from '../config/app-launcher';
-import AppLauncher from "../pages/app-launcher.vue";
+import Dashboard from '../pages/index.vue';
+import { PRODUCT_NAME, BLANK_CLUSTER } from '../config/app-launcher';
 
-const MAIN_APP_LAUNCHER_LOCATION: RouteConfig = {
-  component: () => AppLauncher,
-  name: PRODUCT_NAME,
-  path: `/${PRODUCT_NAME}`,
-};
-const routes = [MAIN_APP_LAUNCHER_LOCATION];
+const routes = [
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster`,
+    path:      `/${ PRODUCT_NAME }/c/:cluster`,
+    component: Dashboard,
+    meta:      {
+      product: PRODUCT_NAME,
+      cluster: BLANK_CLUSTER,
+      pkg:     PRODUCT_NAME
+    }
+  }
+];
 
-export { MAIN_APP_LAUNCHER_LOCATION };
-export default routes;
+export default routes;