@rancher/shell 0.1.2 → 0.1.3

package/layouts/default.vue

@@ -16,19 +16,20 @@ import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import {
-  COUNT, SCHEMA, MANAGEMENT, UI, CATALOG, HCI
+  COUNT, SCHEMA, MANAGEMENT, UI, CATALOG
 } from '@shell/config/types';
 import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
 import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
 import isEqual from 'lodash/isEqual';
 import { ucFirst } from '@shell/utils/string';
 import { getVersionInfo, markSeenReleaseNotes } from '@shell/utils/version';
 import { sortBy } from '@shell/utils/sort';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import { getProductFromRoute } from '@shell/middleware/authenticated';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -51,15 +52,19 @@ export default {
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
+  // Note - This will not run on route change
   data() {
     return {
-      groups:         [],
-      gettingGroups:  false,
-      wantNavSync:    false,
+      groups:                        [],
+      gettingGroups:                 false,
+      wantNavSync:                   false,
     };
   },
 
-  middleware: ['authenticated'],
+  // Note - These will run on route change
+  middleware: [
+    'authenticated'
+  ],
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
@@ -98,7 +103,7 @@ export default {
     },
 
     allSchemas() {
-      const managementReady = this.$store.getters['managementReady'];
+      const managementReady = this.managementReady;
       const product = this.$store.getters['currentProduct'];
 
       if ( !managementReady || !product ) {
@@ -117,7 +122,7 @@ export default {
     },
 
     counts() {
-      const managementReady = this.$store.getters['managementReady'];
+      const managementReady = this.managementReady;
       const product = this.$store.getters['currentProduct'];
 
       if ( !managementReady || !product ) {
@@ -143,14 +148,12 @@ export default {
     },
 
     displayVersion() {
-      let { displayVersion } = getVersionInfo(this.$store);
-
-      if (this.isVirtualProduct && this.isSingleProduct) {
-        const setting = this.$store.getters['harvester/byId'](HCI.SETTING, 'server-version');
-
-        displayVersion = setting?.value || 'unknown';
+      if (this.isSingleProduct?.getVersionInfo) {
+        return this.isSingleProduct?.getVersionInfo(this.$store);
       }
 
+      const { displayVersion } = getVersionInfo(this.$store);
+
       return displayVersion;
     },
 
@@ -167,32 +170,54 @@ export default {
     },
 
     supportLink() {
-      const product = this.$store.getters['currentProduct'].name;
+      const product = this.$store.getters['currentProduct'];
+
+      if (product?.supportRoute) {
+        return { ...product.supportRoute, params: { ...product.supportRoute.params, cluster: this.clusterId } };
+      }
 
-      return { name: `c-cluster-${ product }-support` };
+      return { name: `c-cluster-${ product?.name }-support` };
     },
 
     unmatchedRoute() {
       return !this.$route?.matched?.length;
-    }
+    },
+
+    /**
+     * When navigation involves unloading one cluster and loading another, clusterReady toggles from true->false->true in middleware (before new route content renders)
+     * Prevent rendering "outlet" until the route changes to avoid re-rendering old route content after its cluster is unloaded
+     */
+    clusterAndRouteReady() {
+      return this.clusterReady &&
+        this.clusterId === this.$route?.params?.cluster &&
+        this.currentProduct?.name === getProductFromRoute(this.$route);
+    },
 
   },
 
   watch: {
-    counts() {
-      this.queueUpdate();
+    counts(a, b) {
+      if ( a !== b ) {
+        this.queueUpdate();
+      }
     },
 
-    allSchemas() {
-      this.queueUpdate();
+    allSchemas(a, b) {
+      if ( a !== b ) {
+        this.queueUpdate();
+      }
     },
 
-    allNavLinks() {
-      this.queueUpdate();
+    allNavLinks(a, b) {
+      if ( a !== b ) {
+        this.queueUpdate();
+      }
     },
 
-    favoriteTypes() {
-      this.queueUpdate();
+    favoriteTypes(a, b) {
+      if ( !isEqual(a, b) ) {
+        this.queueUpdate();
+      }
     },
 
     locale(a, b) {
@@ -315,7 +340,6 @@ export default {
       if ( this.gettingGroups ) {
         return;
       }
-
       this.gettingGroups = true;
 
       if ( !this.clusterReady ) {
@@ -370,6 +394,7 @@ export default {
 
         for ( const mode of modes ) {
           const types = this.$store.getters['type-map/allTypes'](productId, mode) || {};
+
           const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, namespaces, currentType);
 
           if ( productId === EXPLORER || !this.isExplorer ) {
@@ -615,7 +640,7 @@ export default {
           {{ displayVersion }}
         </div>
       </nav>
-      <main v-if="clusterReady">
+      <main v-if="clusterAndRouteReady">
         <nuxt class="outlet" />
         <ActionMenu />
         <PromptRemove />

package/layouts/error.vue

@@ -35,7 +35,11 @@ export default {
       return;
     }
 
-    this.ready = true;
+    // Avoid scenarios where the 404 error will blip up whilst the authenticated middleware is determining if there's an alternative valid
+    // route
+    setTimeout(() => {
+      this.ready = true;
+    }, 1000);
   },
 
   head() {

package/layouts/home.vue

@@ -7,6 +7,7 @@ import { mapPref, DEV } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import { mapState } from 'vuex';
 
 export default {
 
@@ -29,7 +30,10 @@ export default {
     };
   },
 
-  computed: { dev: mapPref(DEV) },
+  computed: {
+    dev: mapPref(DEV),
+    ...mapState(['managementReady']),
+  },
 
   methods: {
     toggleTheme() {
@@ -47,7 +51,7 @@ export default {
     <AzureWarning />
 
     <div class="dashboard-content">
-      <Header :simple="true" />
+      <Header v-if="managementReady" :simple="true" />
 
       <main>
         <nuxt class="outlet" />

package/list/harvesterhci.io.management.cluster.vue

@@ -3,16 +3,19 @@ import BrandImage from '@shell/components/BrandImage';
 import TypeDescription from '@shell/components/TypeDescription';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import { NAME as VIRTUAL } from '@shell/config/product/harvester';
-import { CAPI, HCI, VIRTUAL_HARVESTER_PROVIDER, MANAGEMENT } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
+import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   components: {
     BrandImage,
     ResourceTable,
     Masthead,
-    TypeDescription
+    TypeDescription,
+    Loading
   },
 
   props:      {
@@ -22,14 +25,30 @@ export default {
     },
   },
 
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await allHash({
+      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
+      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
+    });
+
+    this.hciClusters = hash.hciClusters;
+    this.mgmtClusters = hash.mgmtClusters;
+  },
+
   data() {
     const resource = CAPI.RANCHER_CLUSTER;
 
     return {
+      navigating:   false,
       VIRTUAL,
+      hciDashboard: HCI.DASHBOARD,
       resource,
-      hResource:  HCI.CLUSTER,
-      realSchema: this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
+      hResource:    HCI.CLUSTER,
+      realSchema:   this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
+      hciClusters:  [],
+      mgmtClusters: []
     };
   },
 
@@ -51,16 +70,8 @@ export default {
     },
 
     rows() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const clusters = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER);
-      const manageClusters = this.$store.getters[`${ inStore }/all`](MANAGEMENT.CLUSTER);
-
-      return clusters.filter((c) => {
-        const cluster = manageClusters.find(cluster => cluster?.metadata?.name === c?.status?.clusterName);
-
-        if (cluster?.status?.provider && cluster?.status?.provider !== VIRTUAL_HARVESTER_PROVIDER) {
-          return false;
-        }
+      return this.hciClusters.filter((c) => {
+        const cluster = this.mgmtClusters.find(cluster => cluster?.metadata?.name === c?.status?.clusterName);
 
         return isHarvesterCluster(cluster);
       });
@@ -69,12 +80,33 @@ export default {
     typeDisplay() {
       return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.row?.length || 0 });
     },
+  },
+
+  methods: {
+    async goToCluster(row) {
+      const timeout = setTimeout(() => {
+        // Don't show loading indicator for quickly fetched plugins
+        this.navigating = row.id;
+      }, 1000);
+
+      try {
+        await row.goToCluster();
+
+        clearTimeout(timeout);
+        this.navigating = false;
+      } catch {
+        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
+        clearTimeout(timeout);
+        this.navigating = false;
+      }
+    }
   }
 };
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <Masthead
       :schema="realSchema"
       :resource="resource"
@@ -99,27 +131,17 @@ export default {
       v-if="rows && rows.length"
       :schema="schema"
       :rows="rows"
-      :sub-rows="true"
       :is-creatable="true"
       :namespaced="false"
     >
       <template #col:name="{row}">
         <td>
-          <span>
-            <n-link
-              v-if="row.isReady"
-              :to="{
-                name: `c-cluster-${VIRTUAL}`,
-                params: {
-                  cluster: row.status.clusterName,
-                }
-              }"
-            >
-              {{ row.nameDisplay }}
-            </n-link>
+          <span class="cluster-link">
+            <a v-if="row.isReady" class="link" :disabled="navigating" @click="goToCluster(row)">{{ row.nameDisplay }}</a>
             <span v-else>
               {{ row.nameDisplay }}
             </span>
+            <i class="icon icon-spinner icon-spin ml-5" :class="{'navigating': navigating === row.id}" />
           </span>
         </td>
       </template>
@@ -129,29 +151,43 @@ export default {
           class="btn btn-sm role-primary"
           :to="row.detailLocation"
         >
-          {{ t('harvester.virtualizationManagement.manage') }}
+          {{ t('harvesterManager.manage') }}
         </n-link>
       </template>
     </ResourceTable>
     <div v-else>
       <div class="no-clusters">
-        {{ t('harvester.manager.cluster.none') }}
+        {{ t('harvesterManager.cluster.none') }}
       </div>
       <hr class="info-section" />
       <div class="logo">
         <BrandImage file-name="harvester.png" height="64" />
       </div>
       <div class="tagline">
-        <div>{{ t('harvester.manager.cluster.description') }}</div>
+        <div>{{ t('harvesterManager.cluster.description') }}</div>
       </div>
       <div class="tagline sub-tagline">
-        <div v-html="t('harvester.manager.cluster.learnMore', {}, true)"></div>
+        <div v-html="t('harvesterManager.cluster.learnMore', {}, true)"></div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      // Use visibility to avoid the columns re-adjusting when the icon is shown
+      visibility: hidden;
+
+      &.navigating {
+        visibility: visible;
+      }
+    }
+
+  }
   .no-clusters {
     text-align: center;
   }
@@ -178,4 +214,9 @@ export default {
       text-align: center;
     }
   }
+
+ .link {
+    cursor: pointer;
+  }
+
 </style>

package/list/namespace.vue

@@ -17,14 +17,12 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
+    ...mapGetters(['currentProduct']),
 
     filterRow() {
-      if (this.isVirtualCluster) {
+      if (this.currentProduct.hideSystemResources) {
         return this.rows.filter( (N) => {
-          const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(N.metadata.name);
-
-          return !N.isSystem && !N.isFleetManaged && !isSettingSystemNamespace;
+          return !N.isSystem && !N.isFleetManaged;
         });
       } else {
         return this.rows;

package/machine-config/amazonec2.vue

@@ -632,6 +632,7 @@ export default {
               <div>
                 <Checkbox
                   v-model="value.httpEndpoint"
+                  value-when-true="enabled"
                   :mode="mode"
                   :disabled="disabled"
                   :label="t('cluster.machineConfig.amazonEc2.httpEndpoint')"
@@ -640,6 +641,7 @@ export default {
               <div>
                 <Checkbox
                   v-model="value.httpTokens"
+                  value-when-true="required"
                   :mode="mode"
                   :disabled="!value.httpEndpoint || disabled"
                   :label="t('cluster.machineConfig.amazonEc2.httpTokens')"