@rancher/shell 2.0.0 → 3.0.0-rc.1

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

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
@@ -428,7 +427,7 @@ export default {
           const active = op.metadata.state?.transitioning;
           const error = op.metadata.state?.error;
 
-          Vue.set(this.errors, plugin.name, error);
+          this.errors[plugin.name] = error;
 
           if (active) {
             // Can use the status directly, apart from upgrade, which maps to install
@@ -470,13 +469,13 @@ export default {
       });
 
       if (changes > 0) {
-        Vue.set(this, 'reloadRequired', true);
+        this['reloadRequired'] = true;
       }
     }
   },
 
   // Forget the types when we leave the page
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('management/forgetType', UI_PLUGIN);
     this.$store.dispatch('management/forgetType', CATALOG.OPERATION);
     this.$store.dispatch('management/forgetType', CATALOG.APP);
@@ -504,7 +503,7 @@ export default {
         this.refreshCharts(forceChartsUpdate);
       }
 
-      Vue.set(this, 'hasFeatureFlag', hasFeatureFlag);
+      this['hasFeatureFlag'] = hasFeatureFlag;
 
       return hasFeatureFlag;
     },
@@ -576,7 +575,7 @@ export default {
     },
 
     updatePluginInstallStatus(name, status) {
-      Vue.set(this.installing, name, status);
+      this.installing[name] = status;
     },
 
     setMenu(event) {
@@ -771,200 +770,198 @@ export default {
             :weight="17"
           />
         </Tabbed>
-        <template>
-          <div
-            v-if="loading"
-            class="data-loading"
-          >
-            <i class="icon-spin icon icon-spinner" />
-            <t
-              k="generic.loading"
-              :raw="true"
-            />
-          </div>
-          <div
-            v-else
-            class="plugin-list"
-            :class="{'v-margin': !list.length}"
-          >
-            <IconMessage
-              v-if="list.length === 0"
-              :vertical="true"
-              :subtle="true"
-              icon="icon-extension"
-              :message="emptyMessage"
-            />
-            <template v-else>
+        <div
+          v-if="loading"
+          class="data-loading"
+        >
+          <i class="icon-spin icon icon-spinner" />
+          <t
+            k="generic.loading"
+            :raw="true"
+          />
+        </div>
+        <div
+          v-else
+          class="plugin-list"
+          :class="{'v-margin': !list.length}"
+        >
+          <IconMessage
+            v-if="list.length === 0"
+            :vertical="true"
+            :subtle="true"
+            icon="icon-extension"
+            :message="emptyMessage"
+          />
+          <template v-else>
+            <div
+              v-for="(plugin, i) in list"
+              :key="i"
+              class="plugin"
+              :data-testid="`extension-card-${plugin.name}`"
+              @click="showPluginDetail(plugin)"
+            >
+              <!-- plugin icon -->
               <div
-                v-for="(plugin, i) in list"
-                :key="plugin.name + i"
-                class="plugin"
-                :data-testid="`extension-card-${plugin.name}`"
-                @click="showPluginDetail(plugin)"
+                class="plugin-icon"
+                :class="applyDarkModeBg"
               >
-                <!-- plugin icon -->
-                <div
-                  class="plugin-icon"
-                  :class="applyDarkModeBg"
+                <LazyImage
+                  v-if="plugin.icon"
+                  :initial-src="defaultIcon"
+                  :error-src="defaultIcon"
+                  :src="plugin.icon"
+                  class="icon plugin-icon-img"
+                />
+                <img
+                  v-else
+                  :src="defaultIcon"
+                  class="icon plugin-icon-img"
                 >
-                  <LazyImage
-                    v-if="plugin.icon"
-                    :initial-src="defaultIcon"
-                    :error-src="defaultIcon"
-                    :src="plugin.icon"
-                    class="icon plugin-icon-img"
-                  />
-                  <img
-                    v-else
-                    :src="defaultIcon"
-                    class="icon plugin-icon-img"
-                  >
+              </div>
+              <!-- plugin card -->
+              <div class="plugin-metadata">
+                <!-- plugin basic info -->
+                <div class="plugin-name">
+                  {{ plugin.label }}
                 </div>
-                <!-- plugin card -->
-                <div class="plugin-metadata">
-                  <!-- plugin basic info -->
-                  <div class="plugin-name">
-                    {{ plugin.label }}
-                  </div>
-                  <div>{{ plugin.description }}</div>
-                  <div class="plugin-version">
+                <div>{{ plugin.description }}</div>
+                <div class="plugin-version">
+                  <span
+                    v-if="plugin.installing"
+                    class="plugin-installing"
+                  >
+                    -
+                  </span>
+                  <span v-else>
+                    <span>{{ plugin.displayVersion }}</span>
                     <span
-                      v-if="plugin.installing"
-                      class="plugin-installing"
+                      v-if="plugin.upgrade"
+                      v-clean-tooltip="t('plugins.upgradeAvailable')"
+                    > -> {{ plugin.upgrade }}</span>
+                    <p
+                      v-if="plugin.installedError"
+                      class="incompatible"
                     >
-                      -
-                    </span>
-                    <span v-else>
-                      <span>{{ plugin.displayVersion }}</span>
-                      <span
-                        v-if="plugin.upgrade"
-                        v-clean-tooltip="t('plugins.upgradeAvailable')"
-                      > -> {{ plugin.upgrade }}</span>
-                      <p
-                        v-if="plugin.installedError"
-                        class="incompatible"
-                      >
-                        <i class="icon icon-warning icon-lg text-warning" />
-                        <span>{{ plugin.installedError }}</span>
-                      </p>
-                      <p
-                        v-else-if="plugin.incompatibleRancherVersion"
-                        class="incompatible"
-                      >{{ plugin.incompatibleRancherVersion }}</p>
-                      <p
-                        v-else-if="plugin.incompatibleKubeVersion"
-                        class="incompatible"
-                      >{{ plugin.incompatibleKubeVersion }}</p>
-                    </span>
+                      <i class="icon icon-warning icon-lg text-warning" />
+                      <span>{{ plugin.installedError }}</span>
+                    </p>
+                    <p
+                      v-else-if="plugin.incompatibleRancherVersion"
+                      class="incompatible"
+                    >{{ plugin.incompatibleRancherVersion }}</p>
+                    <p
+                      v-else-if="plugin.incompatibleKubeVersion"
+                      class="incompatible"
+                    >{{ plugin.incompatibleKubeVersion }}</p>
+                  </span>
+                </div>
+                <!-- plugin badges -->
+                <div
+                  v-if="plugin.builtin"
+                  class="plugin-badges"
+                >
+                  <div class="plugin-builtin">
+                    {{ t('plugins.labels.builtin') }}
                   </div>
-                  <!-- plugin badges -->
+                </div>
+                <div
+                  v-else
+                  class="plugin-badges"
+                >
                   <div
-                    v-if="plugin.builtin"
-                    class="plugin-badges"
+                    v-if="!plugin.certified"
+                    v-clean-tooltip="t('plugins.descriptions.third-party')"
                   >
-                    <div class="plugin-builtin">
-                      {{ t('plugins.labels.builtin') }}
-                    </div>
+                    {{ t('plugins.labels.third-party') }}
                   </div>
                   <div
-                    v-else
-                    class="plugin-badges"
+                    v-if="plugin.experimental"
+                    v-clean-tooltip="t('plugins.descriptions.experimental')"
                   >
-                    <div
-                      v-if="!plugin.certified"
-                      v-clean-tooltip="t('plugins.descriptions.third-party')"
-                    >
-                      {{ t('plugins.labels.third-party') }}
-                    </div>
-                    <div
-                      v-if="plugin.experimental"
-                      v-clean-tooltip="t('plugins.descriptions.experimental')"
-                    >
-                      {{ t('plugins.labels.experimental') }}
-                    </div>
+                    {{ t('plugins.labels.experimental') }}
                   </div>
-                  <div class="plugin-spacer" />
-                  <!-- plugin badges -->
-                  <div class="plugin-actions">
-                    <template v-if="plugin.error">
-                      <div
-                        v-clean-tooltip="plugin.error"
-                        class="plugin-error"
-                      >
-                        <i class="icon icon-warning" />
-                      </div>
-                    </template>
-                    <!-- plugin status -->
+                </div>
+                <div class="plugin-spacer" />
+                <!-- plugin badges -->
+                <div class="plugin-actions">
+                  <template v-if="plugin.error">
                     <div
-                      v-if="plugin.helmError"
-                      v-clean-tooltip="t('plugins.helmError')"
+                      v-clean-tooltip="plugin.error"
                       class="plugin-error"
                     >
                       <i class="icon icon-warning" />
                     </div>
+                  </template>
+                  <!-- plugin status -->
+                  <div
+                    v-if="plugin.helmError"
+                    v-clean-tooltip="t('plugins.helmError')"
+                    class="plugin-error"
+                  >
+                    <i class="icon icon-warning" />
+                  </div>
 
-                    <div class="plugin-spacer" />
+                  <div class="plugin-spacer" />
 
-                    <div
-                      v-if="plugin.installing"
-                      class="plugin-installing"
-                    >
-                      <i class="version-busy icon icon-spin icon-spinner" />
-                      <div v-if="plugin.installing ==='install'">
-                        {{ t('plugins.labels.installing') }}
-                      </div>
-                      <div v-else>
-                        {{ t('plugins.labels.uninstalling') }}
-                      </div>
+                  <div
+                    v-if="plugin.installing"
+                    class="plugin-installing"
+                  >
+                    <i class="version-busy icon icon-spin icon-spinner" />
+                    <div v-if="plugin.installing ==='install'">
+                      {{ t('plugins.labels.installing') }}
                     </div>
-                    <!-- plugin buttons -->
-                    <div
-                      v-else-if="plugin.installed"
-                      class="plugin-buttons"
-                    >
-                      <button
-                        v-if="!plugin.builtin"
-                        class="btn role-secondary"
-                        :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
-                        @click="showUninstallDialog(plugin, $event)"
-                      >
-                        {{ t('plugins.uninstall.label') }}
-                      </button>
-                      <button
-                        v-if="plugin.upgrade"
-                        class="btn role-secondary"
-                        :data-testid="`extension-card-update-btn-${plugin.name}`"
-                        @click="showInstallDialog(plugin, 'update', $event)"
-                      >
-                        {{ t('plugins.update.label') }}
-                      </button>
-                      <button
-                        v-if="!plugin.upgrade && plugin.installableVersions && plugin.installableVersions.length > 1"
-                        class="btn role-secondary"
-                        :data-testid="`extension-card-rollback-btn-${plugin.name}`"
-                        @click="showInstallDialog(plugin, 'rollback', $event)"
-                      >
-                        {{ t('plugins.rollback.label') }}
-                      </button>
+                    <div v-else>
+                      {{ t('plugins.labels.uninstalling') }}
                     </div>
-                    <div
-                      v-else-if="plugin.installableVersions && plugin.installableVersions.length"
-                      class="plugin-buttons"
+                  </div>
+                  <!-- plugin buttons -->
+                  <div
+                    v-else-if="plugin.installed"
+                    class="plugin-buttons"
+                  >
+                    <button
+                      v-if="!plugin.builtin"
+                      class="btn role-secondary"
+                      :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
+                      @click="showUninstallDialog(plugin, $event)"
                     >
-                      <button
-                        class="btn role-secondary"
-                        :data-testid="`extension-card-install-btn-${plugin.name}`"
-                        @click="showInstallDialog(plugin, 'install', $event)"
-                      >
-                        {{ t('plugins.install.label') }}
-                      </button>
-                    </div>
+                      {{ t('plugins.uninstall.label') }}
+                    </button>
+                    <button
+                      v-if="plugin.upgrade"
+                      class="btn role-secondary"
+                      :data-testid="`extension-card-update-btn-${plugin.name}`"
+                      @click="showInstallDialog(plugin, 'update', $event)"
+                    >
+                      {{ t('plugins.update.label') }}
+                    </button>
+                    <button
+                      v-if="!plugin.upgrade && plugin.installableVersions && plugin.installableVersions.length > 1"
+                      class="btn role-secondary"
+                      :data-testid="`extension-card-rollback-btn-${plugin.name}`"
+                      @click="showInstallDialog(plugin, 'rollback', $event)"
+                    >
+                      {{ t('plugins.rollback.label') }}
+                    </button>
+                  </div>
+                  <div
+                    v-else-if="plugin.installableVersions && plugin.installableVersions.length"
+                    class="plugin-buttons"
+                  >
+                    <button
+                      class="btn role-secondary"
+                      :data-testid="`extension-card-install-btn-${plugin.name}`"
+                      @click="showInstallDialog(plugin, 'install', $event)"
+                    >
+                      {{ t('plugins.install.label') }}
+                    </button>
                   </div>
                 </div>
               </div>
-            </template>
-          </div>
-        </template>
+            </div>
+          </template>
+        </div>
       </template>
     </div>
 
@@ -1221,11 +1218,11 @@ export default {
       }
     }
   }
-  ::v-deep .checkbox-label {
+  :deep() .checkbox-label {
     font-weight: normal !important;
   }
 
-  ::v-deep .add-repos-banner .banner__content {
+  :deep() .add-repos-banner .banner__content {
     display: flex;
     justify-content: space-between;
     align-items: center;

package/pages/diagnostic.vue

@@ -1,7 +1,6 @@
 <script>
 import { CAPI, MANAGEMENT } from '@shell/config/types';
 import AsyncButton from '@shell/components/AsyncButton';
-import PromptModal from '@shell/components/PromptModal';
 import { downloadFile } from '@shell/utils/download';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { sortBy } from '@shell/utils/sort';
@@ -9,7 +8,7 @@ import { sortBy } from '@shell/utils/sort';
 export default {
   name: 'Diagnostic',
 
-  components: { AsyncButton, PromptModal },
+  components: { AsyncButton },
 
   async fetch() {
     const provClusters = await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
@@ -164,7 +163,7 @@ export default {
           const countIndex = cluster?.counts?.findIndex((c) => c.resource === res.item.resource);
 
           if ( (countIndex && countIndex !== -1) || countIndex === 0 ) {
-            this.$set(cluster?.counts[countIndex], 'durationMs', res.durationMs);
+            cluster.counts[countIndex]['durationMs'] = res.durationMs;
           }
         }
       });
@@ -341,8 +340,8 @@ export default {
       </h2>
       <div class="resources-count-container">
         <table
-          v-for="cluster in finalCounts"
-          :key="cluster.id"
+          v-for="(cluster, i) in finalCounts"
+          :key="i"
           class="full-width"
         >
           <thead @click="toggleTable(cluster.id)">
@@ -376,8 +375,8 @@ export default {
             </tr>
 
             <tr
-              v-for="item in cluster.counts"
-              :key="item.resource"
+              v-for="(item, j) in cluster.counts"
+              :key="j"
             >
               <template v-if="item.count > 0">
                 <td scope="row">
@@ -391,8 +390,6 @@ export default {
         </table>
       </div>
     </div>
-
-    <PromptModal />
   </div>
 </template>
 

package/pages/fail-whale.vue

@@ -7,11 +7,12 @@ 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';
+import PromptModal from '@shell/components/PromptModal';
 
 export default {
 
   components: {
-    BrandImage, FixedBanner, GrowlManager, Header
+    BrandImage, FixedBanner, GrowlManager, Header, PromptModal
   },
   mixins: [Brand, BrowserTabVisibility],
 
@@ -59,6 +60,7 @@ export default {
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
+    <PromptModal />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"

package/pages/home.vue

@@ -34,7 +34,7 @@ export default {
     BadgeState,
     CommunityLinks,
     SingleClusterInfo,
-    TabTitle
+    TabTitle,
   },
 
   mixins: [PageHeaderActions],
@@ -82,7 +82,10 @@ export default {
     ];
 
     return {
-      HIDE_HOME_PAGE_CARDS, fullVersion, pageActions, vendor: getVendor(),
+      HIDE_HOME_PAGE_CARDS,
+      fullVersion,
+      pageActions,
+      vendor: getVendor(),
     };
   },
 
@@ -91,10 +94,6 @@ 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);
     },
@@ -211,15 +210,7 @@ export default {
     },
 
     kubeClusters() {
-      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;
-      });
+      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
     }
   },
 
@@ -230,7 +221,7 @@ export default {
   },
 
   // Forget the types when we leave the page
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('management/forgetType', CAPI.MACHINE);
     this.$store.dispatch('management/forgetType', MANAGEMENT.NODE);
     this.$store.dispatch('management/forgetType', MANAGEMENT.NODE_POOL);
@@ -527,7 +518,7 @@ export default {
   }
 
   .set-login-page, .whats-new {
-    > ::v-deep .banner__content {
+    > :deep() .banner__content {
       display: flex;
 
       > div {

package/pages/index.vue

@@ -7,39 +7,40 @@ const validRoute = (route, router) => {
 };
 
 export default {
-  middleware({
-    redirect, store, app, route
-  } ) {
-    const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
-    const versionInfo = getVersionInfo(store);
-    const isSingleProduct = store.getters['isSingleProduct'];
+  beforeMount() {
+    const seenWhatsNew = this.$store.getters['prefs/get'](SEEN_WHATS_NEW);
+    const versionInfo = getVersionInfo(this.$store);
+    const isSingleProduct = this.$store.getters['isSingleProduct'];
     const dashboardHome = { name: 'home' };
 
     // If this is a new version, then take the user to the home page to view the release notes
     if (versionInfo.fullVersion !== seenWhatsNew && !isSingleProduct) {
-      return redirect(dashboardHome);
+      return this.$router.replace(dashboardHome);
     }
 
-    const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
-    const targetRoute = app.router.resolve(afterLoginRouteObject);
+    const afterLoginRouteObject = this.$store.getters['prefs/afterLoginRoute'];
+    const targetRoute = afterLoginRouteObject ? this.$router.resolve(afterLoginRouteObject) : null;
 
     // If target route is /, then we will loop with endless redirect - so detect that here and
     // redirect to /home, which is what we would do below, if there was no `afterLoginRouteObject`
-    if (targetRoute?.route?.fullPath === '/') {
-      return redirect(dashboardHome);
+    if (targetRoute?.fullPath === '/') {
+      return this.$router.replace(dashboardHome);
     }
 
     // Confirm this is a valid route (it could have come from an uninstalled plugin)
-    if (validRoute(afterLoginRouteObject, app.router)) {
+    if (validRoute(afterLoginRouteObject, this.$router)) {
       // Take the user to the configured login route
-      return redirect(afterLoginRouteObject);
+      return this.$router.replace(afterLoginRouteObject);
     }
 
-    if (validRoute(isSingleProduct?.afterLoginRoute, app.router)) {
-      return redirect(isSingleProduct.afterLoginRoute);
+    if (validRoute(isSingleProduct?.afterLoginRoute, this.$router)) {
+      return this.$router.replace(isSingleProduct.afterLoginRoute);
     }
 
-    return redirect(dashboardHome);
+    return this.$router.replace(dashboardHome);
   }
 };
 </script>
+<template>
+  <div />
+</template>