@rancher/shell 1.2.3 → 2.0.1

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

@@ -4,10 +4,10 @@ import { mapGetters } from 'vuex';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
-import { CATALOG, UI_PLUGIN, SERVICE, MANAGEMENT } from '@shell/config/types';
+import { CATALOG, UI_PLUGIN, MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { fetchOrCreateSetting } from '@shell/utils/settings';
-import { getVersionData } from '@shell/config/version';
+import { getVersionData, isRancherPrime } from '@shell/config/version';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
 import ActionMenu from '@shell/components/ActionMenu';
@@ -22,8 +22,7 @@ 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';
-import RemoveUIPlugins from './RemoveUIPlugins';
+import SetupUIPlugins from './SetupUIPlugins.vue';
 import AddExtensionRepos from './AddExtensionRepos';
 import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
@@ -39,6 +38,7 @@ import {
   UI_PLUGINS_REPO_URL,
   UI_PLUGINS_PARTNERS_REPO_URL
 } from '@shell/config/uiplugins';
+import TabTitle from '@shell/components/TabTitle';
 
 const MAX_DESCRIPTION_LENGTH = 200;
 
@@ -66,8 +66,8 @@ export default {
     Tabbed,
     UninstallDialog,
     SetupUIPlugins,
-    RemoveUIPlugins,
     AddExtensionRepos,
+    TabTitle
   },
 
   data() {
@@ -75,7 +75,6 @@ export default {
       TABS_VALUES,
       kubeVersion:                    null,
       view:                           '',
-      charts:                         [],
       installing:                     {},
       errors:                         {},
       plugins:                        [], // The installed plugins
@@ -85,7 +84,7 @@ export default {
       menuTargetElement:              null,
       menuTargetEvent:                null,
       menuOpen:                       false,
-      hasService:                     false,
+      hasFeatureFlag:                 true,
       defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
       reloadRequired:                 false,
       rancherVersion:                 getVersionData()?.Version,
@@ -93,8 +92,6 @@ export default {
     };
   },
 
-  layout: 'plain',
-
   async fetch() {
     const hash = {};
 
@@ -117,7 +114,7 @@ export default {
     }
 
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
-      hash.repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO });
+      hash.repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO }, { force: true });
     }
 
     const res = await allHash(hash);
@@ -129,10 +126,6 @@ export default {
 
     this.addExtensionReposBannerSetting = await fetchOrCreateSetting(this.$store, SETTING.ADD_EXTENSION_REPOS_BANNER_DISPLAY, 'true', true) || {};
 
-    const c = this.$store.getters['catalog/rawCharts'];
-
-    this.charts = Object.values(c);
-
     // If there are no plugins installed, default to the catalog view
     if (this.plugins.length === 0) {
       this.$refs.tabs?.select(TABS_VALUES.AVAILABLE);
@@ -148,8 +141,22 @@ export default {
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    charts() {
+      const c = this.$store.getters['catalog/rawCharts'];
+
+      if ( c ) {
+        return Object.values(c);
+      }
+
+      return null;
+    },
+
     showAddReposBanner() {
-      return this.addExtensionReposBannerSetting?.value === 'true' && (!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL) || !this.repos.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL));
+      const hasExtensionReposBannerSetting = this.addExtensionReposBannerSetting?.value === 'true';
+      const uiPluginsRepoNotFound = isRancherPrime() && !this.repos?.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL);
+      const uiPluginsPartnersRepoNotFound = !this.repos?.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL);
+
+      return hasExtensionReposBannerSetting && (uiPluginsRepoNotFound || uiPluginsPartnersRepoNotFound);
     },
 
     applyDarkModeBg() {
@@ -196,15 +203,6 @@ export default {
         });
       }
 
-      if (this.hasService) {
-        menuActions.push( { divider: true });
-        menuActions.push({
-          action:  'removePluginSupport',
-          label:   this.t('plugins.setup.remove.label'),
-          enabled: true
-        });
-      }
-
       return menuActions;
     },
 
@@ -229,6 +227,7 @@ export default {
 
     // Message to display when the tab view is empty (depends on the tab)
     emptyMessage() {
+      // i18n-uses plugins.empty.*
       return this.t(`plugins.empty.${ this.view }`);
     },
 
@@ -461,7 +460,7 @@ export default {
       neu.forEach((plugin) => {
         const existing = installed.find((p) => !p.removed && p.name === plugin.name && p.version === plugin.version);
 
-        if (!existing && plugin.isCached) {
+        if (!existing && plugin.isInitialized) {
           if (!this.uiErrors[plugin.name]) {
             changes++;
           }
@@ -487,46 +486,33 @@ export default {
   methods: {
     async refreshCharts(forceChartsUpdate = false) {
       // we might need to force the request, so that we know at all times if what's the status of the offical and partners repos (installed or not)
-      // tied to the SetupUIPlugins, AddExtensionRepos and RemoveUIPlugins checkboxes
+      // tied to the SetupUIPlugins, AddExtensionRepos checkboxes
       await this.$store.dispatch('catalog/load', { reset: true, force: forceChartsUpdate });
-      const c = this.$store.getters['catalog/rawCharts'];
-
-      this.charts = Object.values(c);
     },
 
     async updateInstallStatus(forceChartsUpdate = false) {
-      let hasService;
+      let hasFeatureFlag;
 
       try {
-        const service = await this.$store.dispatch('management/find', {
-          type: SERVICE,
-          id:   `${ UI_PLUGIN_NAMESPACE }/ui-plugin-operator`,
-          opt:  { force: true },
-        });
-
-        hasService = !!service;
+        hasFeatureFlag = this.$store.getters['features/get']('uiextension');
       } catch (e) {
-        hasService = false;
+        console.warn('Failed to check for feature flag', e); // eslint-disable-line no-console
+        hasFeatureFlag = false;
       }
 
-      if (hasService || forceChartsUpdate) {
+      if ( hasFeatureFlag || forceChartsUpdate ) {
         this.refreshCharts(forceChartsUpdate);
       }
 
-      Vue.set(this, 'hasService', hasService);
+      Vue.set(this, 'hasFeatureFlag', hasFeatureFlag);
 
-      return hasService;
+      return hasFeatureFlag;
     },
 
     filterChanged(f) {
       this.view = f.selectedName;
     },
 
-    removePluginSupport() {
-      this.refreshCharts(true);
-      this.$refs.removeUIPlugins.showDialog();
-    },
-
     // Developer Load is in the action menu
     showDeveloperLoadDialog() {
       this.$refs.developerInstallDialog.showDialog();
@@ -660,7 +646,9 @@ export default {
       </template>
       <template v-else>
         <h2 data-testid="extensions-page-title">
-          {{ t('plugins.title') }}
+          <TabTitle breadcrumb="vendor-only">
+            {{ t('plugins.title') }}
+          </TabTitle>
         </h2>
       </template>
       <div class="actions-container">
@@ -681,7 +669,7 @@ export default {
             {{ t('generic.reload') }}
           </button>
         </div>
-        <div v-if="hasService && hasMenuActions">
+        <div v-if="hasFeatureFlag && hasMenuActions">
           <button
             ref="actions"
             aria-haspopup="true"
@@ -700,7 +688,6 @@ export default {
             :custom-target-event="menuTargetEvent"
             @close="setMenu(false)"
             @devLoad="showDeveloperLoadDialog"
-            @removePluginSupport="removePluginSupport"
             @manageRepos="manageRepos"
             @addRancherRepos="showAddExtensionReposDialog"
             @manageExtensionView="manageExtensionView"
@@ -711,7 +698,7 @@ export default {
 
     <PluginInfoPanel ref="infoPanel" />
 
-    <div v-if="!hasService">
+    <div v-if="!hasFeatureFlag">
       <div
         v-if="loading"
         class="data-loading"
@@ -725,6 +712,7 @@ export default {
       <SetupUIPlugins
         v-else
         class="setup-message"
+        :has-feature-flag="hasFeatureFlag"
         @done="updateInstallStatus(true)"
         @refreshCharts="refreshCharts(true)"
       />
@@ -1004,10 +992,6 @@ export default {
       ref="developerInstallDialog"
       @closed="didInstall"
     />
-    <RemoveUIPlugins
-      ref="removeUIPlugins"
-      @done="updateInstallStatus"
-    />
     <AddExtensionRepos
       ref="addExtensionReposDialog"
       @done="updateInstallStatus(true)"

package/pages/diagnostic.vue

@@ -7,8 +7,7 @@ import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/u
 import { sortBy } from '@shell/utils/sort';
 
 export default {
-  name:   'Diagnostic',
-  layout: 'plain',
+  name: 'Diagnostic',
 
   components: { AsyncButton, PromptModal },
 
@@ -216,6 +215,7 @@ export default {
         'digitalocean',
         'linode',
         'targetRoute', // contains circular references, isn't useful (added later to store)
+        '$router', // also contains a circular reference to $store, not useful for diagnostics
       ];
 
       const clearListsKeys = [

package/pages/fail-whale.vue

@@ -2,11 +2,18 @@
 import BrandImage from '@shell/components/BrandImage';
 import { mapGetters, mapState } from 'vuex';
 import { stringify } from '@shell/utils/error';
+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 BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 
 export default {
-  layout: 'home',
 
-  components: { BrandImage },
+  components: {
+    BrandImage, FixedBanner, GrowlManager, Header
+  },
+  mixins: [Brand, BrowserTabVisibility],
 
   data() {
     const store = this.$store;
@@ -25,6 +32,8 @@ export default {
   computed: {
     ...mapState(['error']),
     ...mapGetters(['isSingleProduct']),
+    ...mapState(['managementReady']),
+    ...mapGetters(['showTopLevelMenu']),
 
     home() {
       if (this.isSingleProduct?.afterLoginRoute) {
@@ -48,48 +57,68 @@ export default {
 </script>
 
 <template>
-  <div v-if="error">
-    <main class="main-layout error">
-      <div class="text-center">
-        <BrandImage
-          file-name="error-desert-landscape.svg"
-          width="900"
-          height="300"
-        />
-        <h1 v-if="error.status">
-          HTTP Error {{ error.status }}: {{ error.statusText }}
-        </h1>
-        <h1 v-else>
-          Error
-        </h1>
-        <h2
+  <div class="dashboard-root">
+    <FixedBanner :header="true" />
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
+      <Header
+        v-if="managementReady"
+        :simple="true"
+      />
+
+      <main class="main-layout">
+        <div
           v-if="error"
-          class="text-secondary mt-20"
-        >
-          {{ displayError }}
-        </h2>
-        <p class="mt-20">
-          <a
-            :href="home"
-            class="btn role-primary"
-          >
-            {{ t('nav.home') }}
-          </a>
-        </p>
-        <hr
-          class="custom-content"
-          :style="styles"
+          class="outlet"
         >
-        <p class="mt-20">
-          <a
-            class="btn role-secondary"
-            @click="$router.push(previousRoute.fullPath)"
-          >
-            {{ t('nav.failWhale.reload') }}
-          </a>
-        </p>
-      </div>
-    </main>
+          <main class="main-layout error">
+            <div class="text-center">
+              <BrandImage
+                file-name="error-desert-landscape.svg"
+                width="900"
+                height="300"
+              />
+              <h1 v-if="error.status">
+                HTTP Error {{ error.status }}: {{ error.statusText }}
+              </h1>
+              <h1 v-else>
+                Error
+              </h1>
+              <h2
+                v-if="error"
+                class="text-secondary mt-20"
+              >
+                {{ displayError }}
+              </h2>
+              <p class="mt-20">
+                <a
+                  :href="home"
+                  class="btn role-primary"
+                >
+                  {{ t('nav.home') }}
+                </a>
+              </p>
+              <hr
+                class="custom-content"
+                :style="styles"
+              >
+              <p class="mt-20">
+                <a
+                  class="btn role-secondary"
+                  @click="$router.push(previousRoute.fullPath)"
+                >
+                  {{ t('nav.failWhale.reload') }}
+                </a>
+              </p>
+            </div>
+          </main>
+        </div>
+      </main>
+    </div>
+    <FixedBanner :footer="true" />
+    <GrowlManager />
   </div>
 </template>
 
@@ -131,4 +160,36 @@ export default {
       top: -12px;
     }
   }
+
+  .dashboard-root {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .dashboard-content {
+    display: grid;
+    flex-grow:1;
+
+    grid-template-areas:
+      "header"
+      "main";
+
+    grid-template-columns: auto;
+    grid-template-rows:    var(--header-height) auto;
+
+    > HEADER {
+      grid-area: header;
+    }
+  }
+
+  MAIN {
+    grid-area: main;
+    overflow: auto;
+
+    .outlet {
+      min-height: 100%;
+      padding: 0;
+    }
+  }
 </style>

package/pages/home.vue

@@ -19,6 +19,7 @@ import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
+import TabTitle from '@shell/components/TabTitle';
 
 import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
 
@@ -33,6 +34,7 @@ export default {
     BadgeState,
     CommunityLinks,
     SingleClusterInfo,
+    TabTitle
   },
 
   mixins: [PageHeaderActions],
@@ -89,6 +91,10 @@ export default {
     ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    mgmtClusters() {
+      return this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
+    },
+
     provClusters() {
       return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
     },
@@ -164,15 +170,16 @@ export default {
         },
         {
           label:     this.t('landing.clusters.provider'),
+          subLabel:  this.t('landing.clusters.distro'),
           value:     'mgmt.status.provider',
           name:      'Provider',
           sort:      ['mgmt.status.provider'],
           formatter: 'ClusterProvider'
         },
         {
-          label: this.t('landing.clusters.kubernetesVersion'),
-          value: 'kubernetesVersion',
-          name:  'Kubernetes Version'
+          label:    this.t('landing.clusters.kubernetesVersion'),
+          subLabel: this.t('landing.clusters.architecture'),
+          name:     'kubernetesVersion',
         },
         {
           label: this.t('tableHeaders.cpu'),
@@ -204,7 +211,15 @@ export default {
     },
 
     kubeClusters() {
-      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
+      const filteredClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
+
+      return filteredClusters.map((provCluster) => {
+        const mgmtCluster = this.mgmtClusters?.find((c) => provCluster.mgmt?.id === c.id);
+
+        provCluster.description = provCluster.description || mgmtCluster?.description;
+
+        return provCluster;
+      });
     }
   },
 
@@ -298,6 +313,12 @@ export default {
     v-if="managementReady"
     class="home-page"
   >
+    <TabTitle
+      :show-child="false"
+      :breadcrumb="false"
+    >
+      {{ vendor }}
+    </TabTitle>
     <BannerGraphic
       :small="true"
       :title="t('landing.welcomeToRancher', {vendor})"
@@ -382,49 +403,71 @@ export default {
                   #header-middle
                 >
                   <div class="table-heading">
-                    <n-link
+                    <router-link
                       v-if="canManageClusters"
                       :to="manageLocation"
                       class="btn btn-sm role-secondary"
                       data-testid="cluster-management-manage-button"
                     >
                       {{ t('cluster.manageAction') }}
-                    </n-link>
-                    <n-link
+                    </router-link>
+                    <router-link
                       v-if="canCreateCluster"
                       :to="importLocation"
                       class="btn btn-sm role-primary"
                       data-testid="cluster-create-import-button"
                     >
                       {{ t('cluster.importAction') }}
-                    </n-link>
-                    <n-link
+                    </router-link>
+                    <router-link
                       v-if="canCreateCluster"
                       :to="createLocation"
                       class="btn btn-sm role-primary"
                       data-testid="cluster-create-button"
                     >
                       {{ t('generic.create') }}
-                    </n-link>
+                    </router-link>
                   </div>
                 </template>
                 <template #col:name="{row}">
-                  <td>
+                  <td class="col-name">
                     <div class="list-cluster-name">
-                      <span v-if="row.mgmt">
-                        <n-link
+                      <p
+                        v-if="row.mgmt"
+                        class="cluster-name"
+                      >
+                        <router-link
                           v-if="row.mgmt.isReady && !row.hasError"
                           :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
                         >
                           {{ row.nameDisplay }}
-                        </n-link>
+                        </router-link>
                         <span v-else>{{ row.nameDisplay }}</span>
-                      </span>
-                      <i
-                        v-if="row.unavailableMachines"
-                        v-clean-tooltip="row.unavailableMachines"
-                        class="conditions-alert-icon icon-alert icon"
-                      />
+                        <i
+                          v-if="row.unavailableMachines"
+                          v-clean-tooltip="row.unavailableMachines"
+                          class="conditions-alert-icon icon-alert icon"
+                        />
+                      </p>
+                      <p
+                        v-if="row.description"
+                        class="cluster-description"
+                      >
+                        {{ row.description }}
+                      </p>
+                    </div>
+                  </td>
+                </template>
+                <template #col:kubernetesVersion="{row}">
+                  <td class="col-name">
+                    <span>
+                      {{ row.kubernetesVersion }}
+                    </span>
+                    <div
+                      v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+                      class="text-muted"
+                    >
+                      {{ row.architecture.label }}
                     </div>
                   </td>
                 </template>
@@ -445,9 +488,9 @@ export default {
                   </td>
                 </template>
                 <!-- <template #cell:explorer="{row}">
-                  <n-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
+                  <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
                     {{ t('landing.clusters.explore') }}
-                  </n-link>
+                  </router-link>
                   <button v-else :disabled="true" class="btn btn-sm role-primary">
                     {{ t('landing.clusters.explore') }}
                   </button>
@@ -525,9 +568,23 @@ export default {
     white-space: nowrap;
   }
 
+  .col-name {
+    max-width: 280px;
+  }
+
   .list-cluster-name {
-    align-items: center;
-    display: flex;
+
+    .cluster-name {
+      display: flex;
+      align-items: center;
+    }
+
+    .cluster-description {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--muted);
+    }
 
     .conditions-alert-icon {
       color: var(--error);

package/pages/prefs.vue

@@ -16,11 +16,11 @@ import {
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
-  layout:     'plain',
   components: {
-    BackLink, ButtonGroup, LabeledSelect, Checkbox, LandingPagePreference, LocaleSelector
+    BackLink, ButtonGroup, LabeledSelect, Checkbox, LandingPagePreference, LocaleSelector, TabTitle
   },
   mixins: [BackRoute],
   data() {
@@ -174,9 +174,13 @@ export default {
   <div>
     <BackLink :link="backLink" />
     <h1
-      v-t="'prefs.title'"
       class="mb-20"
-    />
+    >
+      <TabTitle breadcrumb="vendor-only">
+        {{ t('prefs.title') }}
+      </TabTitle>
+    </h1>
+
     <!-- Language -->
     <div class="mt-10 mb-10">
       <h4 v-t="'prefs.language'" />