@rancher/shell 0.5.3 → 1.2.0

package/components/form/__tests__/KeyValue.test.ts

@@ -47,7 +47,7 @@ describe('component: KeyValue', () => {
       stubs:      { CodeMirror: true }
     });
 
-    const inputFieldTextArea = wrapper.find('[data-testid="text-area-auto-grow"]');
+    const inputFieldTextArea = wrapper.find('[data-testid="value-multiline"]');
 
     inputFieldTextArea.setValue('bar\n');
 

package/components/formatter/Checked.vue

@@ -2,24 +2,16 @@
 
 export default {
   props: {
-    // When sortabletable calculates these values it converts null and undefined to ''
-    // passing '' to a prop typed as Boolean coerces it to true
     value: {
-      type:    [String, Boolean],
+      type:    Boolean,
       default: true
     },
-  },
-
-  computed: {
-    checked() {
-      return this.value === true || this.value === 'true';
-    }
-  },
+  }
 };
 </script>
 
 <template>
-  <span v-if="checked">
+  <span v-if="value">
     <i class="icon icon-checkmark" />
   </span>
   <span

package/components/formatter/ClusterProvider.vue

@@ -6,6 +6,23 @@ export default {
       required: true
     },
   },
+  data(props) {
+    const mgmt = props.row?.mgmt;
+
+    return {
+      // The isImported getter on the provisioning cluster
+      // model doesn't work for imported K3s clusters, in
+      // which case it returns 'k3s' instead of 'imported.'
+      // This is the workaround.
+      isImported: mgmt?.providerForEmberParam === 'import' ||
+        // when imported cluster is GKE
+        !!mgmt?.spec?.gkeConfig?.imported ||
+        // or AKS
+        !!mgmt?.spec?.aksConfig?.imported ||
+        // or EKS
+        !!mgmt?.spec?.eksConfig?.imported
+    };
+  },
 };
 </script>
 
@@ -28,7 +45,7 @@ export default {
     <template v-else-if="row.isCustom">
       {{ t('cluster.provider.custom') }}
     </template>
-    <template v-else-if="row.isImported">
+    <template v-else-if="isImported">
       {{ t('cluster.provider.imported') }}
     </template>
     <div class="text-muted">

package/components/formatter/FleetSummaryGraph.vue

@@ -12,22 +12,10 @@ export default {
       type:     Object,
       required: true
     },
-
-    clusterLabel: {
-      type:     String,
-      required: false,
-      default:  null,
-    }
   },
 
   computed: {
     summary() {
-      if (this.clusterLabel) {
-        return this.row.clusterResourceStatus.find((x) => {
-          return x.clusterLabel === this.clusterLabel;
-        })?.status.resourceCounts || {};
-      }
-
       return this.row.status?.resourceCounts || {};
     },
 
@@ -85,7 +73,7 @@ export default {
           >
             <td
               class="text-left pr-20"
-              :class="{ [obj.textColor]: true }"
+              :class="{[obj.textColor]: true}"
             >
               {{ obj.label }}
             </td>
@@ -106,17 +94,17 @@ export default {
 </template>
 
 <style lang="scss">
-.col-scale {
-  position: relative;
+  .col-scale {
+    position: relative;
 
-  .trigger {
-    width: 100%;
+    .trigger {
+      width: 100%;
+    }
   }
-}
 
-.scale {
-  margin: 0;
-  padding: 0;
-  line-height: initial;
-}
+  .scale {
+    margin: 0;
+    padding: 0;
+    line-height: initial;
+  }
 </style>

package/components/formatter/LiveDate.vue

@@ -34,6 +34,16 @@ export default {
     showTooltip: {
       type:    Boolean,
       default: true
+    },
+
+    /**
+     * Determines if the live date should behave like a countdown by comparing
+     * the provided value and the current date. When the countdown reaches 0, a
+     * "-" is rendered.
+     */
+    isCountdown: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -104,6 +114,12 @@ export default {
         return 300;
       }
 
+      if (this.isCountdown && now.valueOf() > this.dayValue?.valueOf()) {
+        this.label = '-';
+
+        return 300;
+      }
+
       const diff = diffFrom(this.dayValue, now);
       const prefix = (diff.diff < 0 || !this.addPrefix ? '' : '-');
 

package/components/formatter/LiveDuration.vue

@@ -57,7 +57,7 @@ export default {
       const now = day();
 
       from = from || now;
-      const seconds = Math.abs(value.diff(from, 'seconds'));
+      const seconds = Math.abs(value.diff(now, 'seconds'));
 
       return elapsedTime(seconds);
     },

package/components/formatter/PercentageBar.vue

@@ -30,7 +30,7 @@ export default {
 </script>
 
 <template>
-  <p v-if="!value || value === '0' || isNaN(value)">
+  <p v-if="!value || value === '0'">
     {{ t('generic.na') }}
   </p>
   <PercentageBarComponent

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -27,7 +27,6 @@ export default {
 
         try {
           out = JSON.parse(this.value);
-
           out.forEach((endpoint) => {
             let protocol = 'http';
 
@@ -35,19 +34,10 @@ export default {
               protocol = 'https';
             }
 
-            const linkDefaultDisplay = endpoint.port ? `${ endpoint.port }/${ endpoint.protocol }` : endpoint.protocol;
-
-            // If there's an ingress and it has a hostname, we use the hostname address instead
-            // https://github.com/rancher/dashboard/issues/8087
-            if (endpoint.ingressName && endpoint.hostname) {
-              endpoint.link = `${ protocol }://${ endpoint.hostname }${ endpoint.path }`;
-              endpoint.linkDisplay = endpoint.link;
-            } else if (endpoint.addresses && endpoint.addresses.length) {
+            if (endpoint.addresses) {
               endpoint.link = `${ protocol }://${ endpoint.addresses[0] }:${ endpoint.port }`;
-              endpoint.linkDisplay = linkDefaultDisplay;
             } else if (externalIp) {
               endpoint.link = `${ protocol }://${ externalIp }:${ endpoint.port }`;
-              endpoint.linkDisplay = linkDefaultDisplay;
             } else {
               endpoint.display = `[${ this.t('servicesPage.anyNode') }]:${ endpoint.port }`;
             }
@@ -59,6 +49,26 @@ export default {
         }
       }
 
+      return null;
+    },
+
+    protocol() {
+      const { parsed } = this;
+
+      if ( parsed) {
+        if (this.parsed[0].protocol) {
+          return this.parsed[0].protocol;
+        }
+
+        const match = parsed.match(/^([^:]+):\/\//);
+
+        if ( match ) {
+          return match[1];
+        } else {
+          return 'link';
+        }
+      }
+
       return null;
     }
   },
@@ -80,7 +90,7 @@ export default {
         :href="endpoint.link"
         target="_blank"
         rel="nofollow noopener noreferrer"
-      >{{ endpoint.linkDisplay }}</a>
+      ><span v-if="endpoint.port">{{ endpoint.port }}/</span>{{ endpoint.protocol }}</a>
     </template>
   </span>
 </template>

package/components/formatter/__tests__/ClusterProvider.test.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import ClusterProvider from '@shell/components/formatter/ClusterProvider.vue';
+
+describe('component: ClusterProvider', () => {
+  const importedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: true } } } };
+  const importedAksClusterInfo = { mgmt: { spec: { aksConfig: { imported: true } } } };
+  const importedEksClusterInfo = { mgmt: { spec: { eksConfig: { imported: true } } } };
+  const notImportedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: false } } } };
+  const importedClusterInfoWithProviderForEmberParam = { mgmt: { providerForEmberParam: 'import' } };
+
+  describe('isImported', () => {
+    const testCases = [
+      [importedGkeClusterInfo, true],
+      [importedAksClusterInfo, true],
+      [importedEksClusterInfo, true],
+      [notImportedGkeClusterInfo, false],
+      [importedClusterInfoWithProviderForEmberParam, true],
+      [{}, false],
+    ];
+
+    it.each(testCases)('should return the isImported value properly based on the props data', (row, expected) => {
+      const wrapper = mount(ClusterProvider, { propsData: { row } });
+
+      expect(wrapper.vm.$data.isImported).toBe(expected);
+    }
+    );
+  });
+});

package/components/nav/Group.vue

@@ -390,8 +390,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.router-link-active,
-  .header ::v-deep > .child.router-link-exact-active {
+  .body ::v-deep > .child.nuxt-link-active,
+  .header ::v-deep > .child.nuxt-link-exact-active {
     padding: 0;
 
     A, A I {

package/components/nav/Header.vue

@@ -311,7 +311,7 @@ export default {
         product: this.currentProduct.name,
         cluster: this.currentCluster,
       };
-      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
+      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);
@@ -432,7 +432,6 @@ export default {
       >
         <BrandImage
           class="side-menu-logo-img"
-          data-testid="header-side-menu__brand-img"
           file-name="rancher-logo.svg"
         />
       </div>
@@ -442,6 +441,7 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
+
       <div
         v-if="showFilter"
         class="top"

package/components/nav/Jump.vue

@@ -2,8 +2,7 @@
 import debounce from 'lodash/debounce';
 import Group from '@shell/components/nav/Group';
 import { isMac } from '@shell/utils/platform';
-import { BOTH, TYPE_MODES } from '@shell/store/type-map';
-import { COUNT } from '@shell/config/types';
+import { BOTH, ALL } from '@shell/store/type-map';
 
 export default {
   components: { Group },
@@ -32,26 +31,17 @@ export default {
   methods: {
     updateMatches() {
       const clusterId = this.$store.getters['clusterId'];
-      const productId = this.$store.getters['productId'];
-      const product = this.$store.getters['currentProduct'];
+      const isAllNamespaces = this.$store.getters['isAllNamespaces'];
+      const product = this.$store.getters['productId'];
 
-      const allTypesByMode = this.$store.getters['type-map/allTypes'](productId, [TYPE_MODES.ALL]) || {};
-      const allTypes = allTypesByMode[TYPE_MODES.ALL];
-      const out = this.$store.getters['type-map/getTree'](productId, TYPE_MODES.ALL, allTypes, clusterId, BOTH, null, this.value);
+      let namespaces = null;
 
-      // Suplement the output with count info. Usualy the `Type` component would handle this individualy... but scales real bad so give it
-      // some help
-      const counts = this.$store.getters[`${ product.inStore }/all`](COUNT)?.[0]?.counts || {};
+      if ( !isAllNamespaces ) {
+        namespaces = Object.keys(this.$store.getters['activeNamespaceCache']);
+      }
 
-      out.forEach((o) => {
-        o.children?.forEach((t) => {
-          const count = counts[t.name];
-
-          t.count = count ? count.summary.count || 0 : null;
-          t.byNamespace = count ? count.namespaces : {};
-          t.revision = count ? count.revision : null;
-        });
-      });
+      const allTypes = this.$store.getters['type-map/allTypes'](product) || {};
+      const out = this.$store.getters['type-map/getTree'](product, ALL, allTypes, clusterId, BOTH, namespaces, null, this.value);
 
       this.groups = out;
 

package/components/nav/TopLevelMenu.vue

@@ -13,7 +13,6 @@ import { getVersionInfo } from '@shell/utils/version';
 import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
-import { getProductFromRoute } from '@shell/middleware/authenticated';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
 
@@ -52,11 +51,13 @@ export default {
     ...mapGetters(['clusterId']),
     ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']),
     ...mapGetters({ features: 'features/get' }),
+
     value: {
       get() {
         return this.$store.getters['productId'];
       },
     },
+
     sideMenuStyle() {
       return {
         marginBottom: this.globalBannerSettings?.footerFont,
@@ -73,7 +74,6 @@ export default {
         const {
           showFooter, showHeader, bannerFooter, bannerHeader, banner
         } = parsed;
-
         // add defaults to accomodate older JSON structures for banner definitions without breaking the UI
         // https://github.com/rancher/dashboard/issues/10140
         const bannerHeaderFontSize = bannerHeader?.fontSize || banner?.fontSize || '14px';
@@ -169,6 +169,7 @@ export default {
 
       return `min-height: ${ height }px`;
     },
+
     clusterFilterCount() {
       return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length;
     },
@@ -245,15 +246,7 @@ export default {
 
     hasSupport() {
       return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
-    },
-
-    isCurrRouteClusterExplorer() {
-      return this.$route?.name?.startsWith('c-cluster');
-    },
-
-    productFromRoute() {
-      return getProductFromRoute(this.$route);
-    },
+    }
   },
 
   watch: {
@@ -284,16 +277,6 @@ export default {
       return `${ lineHeightInEm }em`;
     },
 
-    checkActiveRoute(obj, isClusterRoute) {
-      // for Cluster links in main nav: check if route is a cluster explorer one + check if route cluster matches cluster obj id + check if curr product matches route product
-      if (isClusterRoute) {
-        return this.isCurrRouteClusterExplorer && this.$route?.params?.cluster === obj?.id && this.productFromRoute === this.currentProduct?.name;
-      }
-
-      // for remaining main nav items, check if curr product matches route product is enough
-      return this.productFromRoute === obj?.value;
-    },
-
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -373,10 +356,7 @@ export default {
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
           <div class="side-menu-logo">
-            <BrandImage
-              data-testid="side-menu__brand-img"
-              file-name="rancher-logo.svg"
-            />
+            <BrandImage file-name="rancher-logo.svg" />
           </div>
         </div>
 
@@ -425,10 +405,6 @@ export default {
                   v-model="clusterFilter"
                   :placeholder="t('nav.search.placeholder')"
                 >
-                <i
-                  class="magnifier icon icon-search"
-                  :class="{ active: clusterFilter }"
-                />
                 <i
                   v-if="clusterFilter"
                   class="icon icon-close"
@@ -463,7 +439,6 @@ export default {
               <nuxt-link
                 class="option"
                 :to="a.to"
-                :class="{'active-menu-link': checkActiveRoute(a) }"
               >
                 <IconOrSvg
                   :icon="a.icon"
@@ -495,7 +470,6 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -545,7 +519,6 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -623,7 +596,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -651,7 +623,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -681,7 +652,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -793,7 +763,6 @@ export default {
 
      &.menu-open {
       width: 300px;
-      box-shadow: 3px 1px 3px var(--shadow);
     }
 
     .title {
@@ -801,6 +770,7 @@ export default {
       height: 55px;
       flex: 0 0 55px;
       width: 100%;
+      border-bottom: 1px solid var(--nav-border);
       justify-content: flex-start;
       align-items: center;
 
@@ -901,7 +871,7 @@ export default {
           margin-right: 16px;
         }
 
-        &.router-link-active, &.active-menu-link {
+        &.nuxt-link-active {
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -953,31 +923,13 @@ export default {
         position: relative;
         > input {
           background-color: transparent;
+          margin-bottom: 8px;
           padding-right: 35px;
-          padding-left: 25px;
-          height: 32px;
-        }
-        > .magnifier {
-          position: absolute;
-          top: 12px;
-          left: 8px;
-          width: 12px;
-          height: 12px;
-          font-size: 12px;
-          opacity: 0.4;
-
-          &.active {
-            opacity: 1;
-
-            &:hover {
-              color: var(--body-text);
-            }
-          }
         }
         > i {
           position: absolute;
-          font-size: 12px;
-          top: 12px;
+          font-size: $clear-search-size;
+          top: 11px;
           right: 8px;
           opacity: 0.7;
           cursor: pointer;
@@ -1014,10 +966,10 @@ export default {
           height: 42px;
 
           .search {
-            transition: all 0.25s ease-in-out;
+            transition: all 0.5s ease-in-out;
             transition-delay: 2s;
             width: 72%;
-            height: 36px;
+            height: 42px;
 
             input {
               height: 100%;
@@ -1043,7 +995,7 @@ export default {
               font-size: 14px;
             }
 
-            .router-link-active {
+            .nuxt-link-active {
               &:hover {
                 text-decoration: none;
               }
@@ -1073,7 +1025,7 @@ export default {
             hr {
               margin: 0;
               width: 94%;
-              transition: all 0.25s ease-in-out;
+              transition: all 0.5s ease-in-out;
               max-width: 100%;
             }
           }
@@ -1100,7 +1052,7 @@ export default {
           text-transform: uppercase;
 
           span {
-            transition: all 0.25s ease-in-out;
+            transition: all 0.5s ease-in-out;
             display: flex;
             max-height: 16px;
           }
@@ -1109,7 +1061,7 @@ export default {
             margin: 0;
             max-width: 50px;
             width: 0;
-            transition: all 0.25s ease-in-out;
+            transition: all 0.5s ease-in-out;
           }
         }
 
@@ -1221,12 +1173,12 @@ export default {
   }
 
   .fade-enter-active, .fade-leave-active {
-    transition: all 0.25s;
+    transition: all 0.2s;
     transition-timing-function: ease;
   }
 
   .fade-leave-active {
-    transition: all 0.25s;
+    transition: all 0.4s;
   }
 
   .fade-leave-to {

package/components/nav/Type.vue

@@ -1,8 +1,9 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
-import { TYPE_MODES } from '@shell/store/type-map';
+import { FAVORITE, USED } from '@shell/store/type-map';
+import { linkActiveClass } from '@shell/config/router';
 
-const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
+const showFavoritesFor = [FAVORITE, USED];
 
 export default {
 
@@ -30,6 +31,7 @@ export default {
       near:     false,
       over:     false,
       menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
+      linkActiveClass
     };
   },
 
@@ -90,23 +92,12 @@ export default {
     },
 
     showCount() {
-      return this.count !== undefined;
+      return typeof this.type.count !== 'undefined';
     },
 
     namespaceIcon() {
       return this.type.namespaced;
     },
-
-    count() {
-      if (this.type.count !== undefined) {
-        return this.type.count;
-      }
-
-      const inStore = this.$store.getters['currentStore'](this.type.name);
-
-      return this.$store.getters[`${ inStore }/count`]({ name: this.type.name });
-    }
-
   },
 
   methods: {
@@ -143,7 +134,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isCurrent}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
     :exact="type.exact"
   >
     <a
@@ -173,7 +164,7 @@ export default {
           v-if="namespaceIcon"
           class="icon icon-namespace namespaced"
         />
-        {{ count }}
+        {{ type.count }}
       </span>
     </a>
   </n-link>