@rancher/shell 0.1.2 → 0.1.4

package/layouts/default.vue

@@ -1,7 +1,12 @@
 <script>
 import debounce from 'lodash/debounce';
 import { mapState, mapGetters } from 'vuex';
-import { mapPref, DEV, FAVORITE_TYPES, AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
+import {
+  mapPref,
+  FAVORITE_TYPES,
+  AFTER_LOGIN_ROUTE,
+  THEME_SHORTCUT
+} from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
 import WindowManager from '@shell/components/nav/WindowManager';
@@ -16,19 +21,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 +57,20 @@ export default {
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
+  // Note - This will not run on route change
   data() {
     return {
-      groups:         [],
-      gettingGroups:  false,
-      wantNavSync:    false,
+      noLocaleShortcut: process.env.dev || false,
+      groups:           [],
+      gettingGroups:    false,
+      wantNavSync:      false,
     };
   },
 
-  middleware: ['authenticated'],
+  // Note - These will run on route change
+  middleware: [
+    'authenticated'
+  ],
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
@@ -73,8 +84,8 @@ export default {
       return this.$store.getters['activeNamespaceCache'];
     },
 
-    dev:            mapPref(DEV),
-    favoriteTypes:  mapPref(FAVORITE_TYPES),
+    themeShortcut:    mapPref(THEME_SHORTCUT),
+    favoriteTypes:    mapPref(FAVORITE_TYPES),
 
     pageActions() {
       const pageActions = [];
@@ -98,7 +109,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 +128,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 +154,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 +176,54 @@ export default {
     },
 
     supportLink() {
-      const product = this.$store.getters['currentProduct'].name;
+      const product = this.$store.getters['currentProduct'];
 
-      return { name: `c-cluster-${ product }-support` };
+      if (product?.supportRoute) {
+        return { ...product.supportRoute, params: { ...product.supportRoute.params, cluster: this.clusterId } };
+      }
+
+      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 +346,6 @@ export default {
       if ( this.gettingGroups ) {
         return;
       }
-
       this.gettingGroups = true;
 
       if ( !this.clusterReady ) {
@@ -370,6 +400,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,15 +646,15 @@ export default {
           {{ displayVersion }}
         </div>
       </nav>
-      <main v-if="clusterReady">
+      <main v-if="clusterAndRouteReady">
         <nuxt class="outlet" />
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
         <AssignTo />
         <PromptModal />
-        <button v-if="dev" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
-        <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
+        <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
         <button v-shortkey.once="['f8']" class="hide" @shortkey="wheresMyDebugger()" />
         <button v-shortkey.once="['`']" class="hide" @shortkey="toggleShell" />
       </main>

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

@@ -3,10 +3,11 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
-import { mapPref, DEV } from '@shell/store/prefs';
+import { mapPref, THEME_SHORTCUT } 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 {
 
@@ -25,16 +26,23 @@ export default {
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
-      name: this.$route.name
+      name:             this.$route.name,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
-  computed: { dev: mapPref(DEV) },
+  computed: {
+    themeShortcut: mapPref(THEME_SHORTCUT),
+    ...mapState(['managementReady']),
+  },
 
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
     },
+    toggleNoneLocale() {
+      this.$store.dispatch('i18n/toggleNone');
+    },
   }
 
 };
@@ -47,7 +55,7 @@ export default {
     <AzureWarning />
 
     <div class="dashboard-content">
-      <Header :simple="true" />
+      <Header v-if="managementReady" :simple="true" />
 
       <main>
         <nuxt class="outlet" />
@@ -55,7 +63,8 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
-    <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+    <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+    <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
   </div>
 </template>
 

package/layouts/plain.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapPref, DEV } from '@shell/store/prefs';
+import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import Header from '@shell/components/nav/Header';
 import PromptRemove from '@shell/components/PromptRemove';
@@ -33,16 +33,20 @@ export default {
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
-      name: this.$route.name,
+      name:             this.$route.name,
+      noLocaleShortcut: process.env.dev || false,
     };
   },
 
-  computed: { dev: mapPref(DEV) },
+  computed: { themeShortcut: mapPref(THEME_SHORTCUT) },
 
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
-    }
+    },
+    toggleNoneLocale() {
+      this.$store.dispatch('i18n/toggleNone');
+    },
   }
 };
 </script>
@@ -62,7 +66,8 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <AssignTo />
-        <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
       </main>
     </div>
 

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/management.cattle.io.setting.vue

@@ -4,13 +4,13 @@ import { MANAGEMENT } from '@shell/config/types';
 import { ALLOWED_SETTINGS } from '@shell/config/settings';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
-import { DEV } from '@shell/store/prefs';
+import { VIEW_IN_API } from '@shell/store/prefs';
 
 export default {
   components: { Banner, Loading },
 
   async fetch() {
-    const isDev = this.$store.getters['prefs/get'](DEV);
+    const viewInApi = this.$store.getters['prefs/get'](VIEW_IN_API);
     const rows = await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.SETTING });
     const t = this.$store.getters['i18n/t'];
     // Map settings from array to object keyed by id
@@ -51,7 +51,7 @@ export default {
       }
       // There are only 2 actions that can be enabled - Edit Setting or View in API
       // If neither is available for this setting then we hide the action menu button
-      s.hasActions = (!s.readOnly || isDev) && setting.availableActions?.length;
+      s.hasActions = (!s.readOnly || viewInApi) && setting.availableActions?.length;
       settings.push(s);
     }
 

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/list/provisioning.cattle.io.cluster.vue

@@ -149,7 +149,7 @@ export default {
       <template #cell:explorer="{row}">
         <span v-if="row.mgmt && row.mgmt.isHarvester"></span>
         <n-link
-          v-else-if="row.mgmt && row.mgmt.isReady"
+          v-else-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
           class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"

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')"