@rancher/shell 1.2.0 → 2.0.0

package/components/formatter/FleetSummaryGraph.vue

@@ -3,6 +3,7 @@ import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import { ucFirst } from '@shell/utils/string';
 import { colorForState, stateSort } from '@shell/plugins/dashboard-store/resource-class';
 import { sortBy } from '@shell/utils/sort';
+import { FLEET } from '@shell/config/types';
 
 export default {
   components: { ProgressBarMulti },
@@ -12,15 +13,27 @@ 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 || {};
     },
 
     show() {
-      return this.stateParts.length > 0 && this.row.targetClusters?.length;
+      return this.stateParts.length > 0 && (this.row.type === FLEET.CLUSTER || this.row.targetClusters?.length);
     },
 
     stateParts() {
@@ -73,7 +86,7 @@ export default {
           >
             <td
               class="text-left pr-20"
-              :class="{[obj.textColor]: true}"
+              :class="{ [obj.textColor]: true }"
             >
               {{ obj.label }}
             </td>
@@ -94,17 +107,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/ImagePercentageBar.vue

@@ -37,10 +37,6 @@ export default {
       }];
     },
 
-    state() {
-      return this.row.stateDisplay;
-    },
-
     completed() {
       return Number.parseFloat(this.value) === 100 && !this.failed;
     },

package/components/formatter/IngressTarget.vue

@@ -1,5 +1,5 @@
 <script>
-import { WORKLOAD_TYPES } from '@shell/config/types';
+import { INGRESS, WORKLOAD_TYPES } from '@shell/config/types';
 import IngressFullPath from '@shell/components/formatter/IngressFullPath';
 
 export default {
@@ -18,7 +18,18 @@ export default {
   },
 
   async fetch() {
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    let promises = [];
+
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
+    }
+    const ingressSchema = this.$store.getters[`cluster/schemaFor`](INGRESS);
+
+    if (ingressSchema) {
+      promises.push(ingressSchema.fetchResourceFields());
+    }
+    await Promise.all(promises);
   },
 
   computed: {
@@ -37,7 +48,7 @@ export default {
 
 <template>
   <div
-    v-if="value"
+    v-if="value && !$fetchState.pending"
     class="ingress-target"
     :reactivity="workloads.length"
   >
@@ -48,12 +59,12 @@ export default {
     >
       <IngressFullPath :row="path" />
       <i class="icon icon-chevron-right" />
-      <nuxt-link
+      <router-link
         v-if="path.serviceName && path.serviceTargetTo"
         :to="path.serviceTargetTo"
       >
         {{ path.serviceName }}
-      </nuxt-link>
+      </router-link>
       <span v-else-if="path.serviceName">
         {{ path.serviceName }}
       </span>
@@ -63,12 +74,12 @@ export default {
       class="target"
     >
       {{ t('ingress.target.default') }} <i class="icon icon-chevron-right" />
-      <nuxt-link
+      <router-link
         v-if="defaultService.targetTo"
         :to="defaultService.targetTo"
       >
         {{ defaultService.name }}
-      </nuxt-link>
+      </router-link>
       <span v-else>
         {{ defaultService.name }}
       </span>

package/components/formatter/Link.vue

@@ -135,7 +135,7 @@ export default {
 </script>
 
 <template>
-  <n-link
+  <router-link
     v-if="isInternal && href"
     :to="href"
     class="link-text-icon"
@@ -151,7 +151,7 @@ export default {
       :class="afterIconClass"
       class="suffix"
     />
-  </n-link>
+  </router-link>
   <a
     v-else-if="href"
     :href="href"

package/components/formatter/LinkDetail.vue

@@ -42,12 +42,12 @@ export default {
 
 <template>
   <span>
-    <n-link
+    <router-link
       v-if="to"
       :to="to"
     >
       {{ value }}
-    </n-link>
+    </router-link>
     <span v-else>
       {{ value }}
       <template v-if="!value && col.dashIfEmpty">

package/components/formatter/LinkDetailImage.vue

@@ -20,9 +20,9 @@ export default {
 
 <template>
   <span>
-    <nuxt-link :to="row.detailLocation">
+    <router-link :to="row.detailLocation">
       {{ value }}
-    </nuxt-link>
+    </router-link>
     <br>
     <span class="text-small text-muted">
       {{ row.imageDisplay }}

package/components/formatter/LinkName.vue

@@ -53,12 +53,12 @@ export default {
 
 <template>
   <span v-if="value">
-    <nuxt-link
+    <router-link
       v-if="canViewResource"
       :to="url"
     >
       {{ value }}
-    </nuxt-link>
+    </router-link>
     <template v-else>
       {{ value }}
     </template>

package/components/formatter/LiveDuration.vue

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

package/components/formatter/PercentageBar.vue

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

package/components/formatter/PrincipalGroupBindings.vue

@@ -38,12 +38,12 @@ export default {
 <template>
   <div class="pgb">
     <template v-for="(role, i) in boundRoles">
-      <nuxt-link
+      <router-link
         :key="role.id"
         :to="role.detailLocation"
       >
         {{ role.label }}
-      </nuxt-link>
+      </router-link>
       <template v-if="i + 1 < boundRoles.length">
         ,&nbsp;
       </template>

package/components/formatter/SecretType.vue

@@ -29,12 +29,12 @@ export default {
 </script>>
 
 <template>
-  <nuxt-link
+  <router-link
     v-if="serviceAccountLink"
     :to="serviceAccountLink"
   >
     {{ typeDisplay }}
-  </nuxt-link>
+  </router-link>
   <div v-else>
     {{ typeDisplay }}
   </div>

package/components/formatter/VirtualServiceGateways.vue

@@ -95,9 +95,9 @@ export default {
       :key="gateway"
     >
       <template v-if="i < 5">
-        <nuxt-link :to="gatewayLinks(gateway)">
+        <router-link :to="gatewayLinks(gateway)">
           {{ gatewayLinks(gateway).params.id }}
-        </nuxt-link>
+        </router-link>
         <span v-if="i<gateways.length-1 && i < 4">,</span>
       </template>
     </span>

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -27,6 +27,7 @@ export default {
 
         try {
           out = JSON.parse(this.value);
+
           out.forEach((endpoint) => {
             let protocol = 'http';
 
@@ -34,10 +35,19 @@ export default {
               protocol = 'https';
             }
 
-            if (endpoint.addresses) {
+            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) {
               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 }`;
             }
@@ -49,26 +59,6 @@ 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;
     }
   },
@@ -90,7 +80,7 @@ export default {
         :href="endpoint.link"
         target="_blank"
         rel="nofollow noopener noreferrer"
-      ><span v-if="endpoint.port">{{ endpoint.port }}/</span>{{ endpoint.protocol }}</a>
+      >{{ endpoint.linkDisplay }}</a>
     </template>
   </span>
 </template>

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

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import Checked from '@shell/components/formatter/Checked.vue';
+
+describe('component: Checked', () => {
+  it.each([true, 'true'])('should display a checkmark when the value is true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(true);
+  });
+
+  it.each([false, '', 'abc'])('should not display a checkmark when the value is anything other than true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(false);
+  });
+});

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

@@ -6,7 +6,7 @@ describe('component: LinkDetail', () => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
       propsData: { row: { detailLocation: location }, value: 'test-name' },
-      stubs:     { nLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -18,7 +18,7 @@ describe('component: LinkDetail', () => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
       propsData: { row: { detailLocation: location } },
-      stubs:     { nLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -31,7 +31,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: null }, value: 'test-name', col: { }
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
     const span = wrapper.find('span span');
 
@@ -48,7 +48,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -62,7 +62,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);

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

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import WorkloadDetailEndpoints from '@shell/components/formatter/WorkloadDetailEndpoints.vue';
+import Tag from '@shell/components/Tag';
+
+describe('component: WorkloadDetailEndpoints', () => {
+  const withIngressAndHostname = [{
+    addresses: [
+      '172.18.0.3'
+    ],
+    port:        80,
+    protocol:    'HTTP',
+    serviceName: 'kube-public:tetris',
+    ingressName: 'kube-public:tetris',
+    hostname:    'tetris.kube-public.172.18.0.3.sslip.io',
+    path:        '/',
+    allNodes:    false,
+  }];
+
+  const withoutIngress = [
+    {
+      addresses: [
+        '172.18.0.3'
+      ],
+      port:        80,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    },
+    {
+      addresses: [
+        '172.18.0.3'
+      ],
+      port:        443,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    }
+  ];
+
+  const withoutAddresses = [
+    {
+      port:        443,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    }
+  ];
+
+  const basicNodesOutput = [
+    { externalIp: 'some-external-ip' }
+  ];
+
+  it.each([
+    [withIngressAndHostname, [], ['http://tetris.kube-public.172.18.0.3.sslip.io/']],
+    [withoutIngress, [], ['http://172.18.0.3:80', 'https://172.18.0.3:443']],
+    [withoutAddresses, basicNodesOutput, ['https://some-external-ip:443']],
+  ])('should display a link given the appropriate conditions', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
+    const wrapper = mount(WorkloadDetailEndpoints, {
+      propsData: { value: JSON.stringify(value) },
+      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput } } }
+    });
+
+    wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
+      expect(endpoint.link).toBe(expectationArr[i]);
+    });
+  });
+
+  it.each([
+    [withoutAddresses, [], ['[some-translation]:443']],
+  ])('should render a Tag component with the appropriate content', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
+    const wrapper = mount(WorkloadDetailEndpoints, {
+      propsData: { value: JSON.stringify(value) },
+      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput, 'i18n/t': () => 'some-translation' } } }
+    });
+
+    wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
+      expect(endpoint.display).toBe(expectationArr[i]);
+      expect(wrapper.findComponent(Tag).exists()).toBe(true);
+    });
+  });
+});

package/components/nav/Group.vue

@@ -212,13 +212,13 @@ export default {
       @click="groupSelected()"
     >
       <slot name="header">
-        <n-link
+        <router-link
           v-if="hasOverview"
           :to="group.children[0].route"
           :exact="group.children[0].exact"
         >
           <h6 v-clean-html="group.labelDisplay || group.label" />
-        </n-link>
+        </router-link>
         <h6
           v-else
           v-clean-html="group.labelDisplay || group.label"
@@ -293,7 +293,8 @@ export default {
 
     > A {
       display: block;
-      padding-left: 16px;
+      box-sizing:border-box;
+      height: 100%;
       &:hover{
         text-decoration: none;
       }
@@ -302,6 +303,7 @@ export default {
       }
       > H6 {
         text-transform: none;
+        padding: 8px 0 8px 16px;
       }
     }
   }
@@ -313,6 +315,7 @@ export default {
         background-color: var(--primary-hover-bg);
 
         h6 {
+          padding: 8px 0 8px 16px;
           font-weight: bold;
           color: var(--primary-hover-text);
         }
@@ -330,7 +333,6 @@ export default {
   .accordion {
     &.depth-0 {
       > .header {
-        padding: 8px 0;
 
         &.noHover {
           cursor: default;
@@ -338,7 +340,7 @@ export default {
 
         > H6 {
           text-transform: none;
-          padding-left: 16px;
+          padding: 8px 0 8px 16px;
         }
 
         > I {
@@ -390,8 +392,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.nuxt-link-active,
-  .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.router-link-active,
+  .header ::v-deep > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {