@rancher/shell 0.2.5 → 0.3.1

package/components/formatter/LiveDuration.vue

@@ -0,0 +1,78 @@
+<script>
+import day from 'dayjs';
+import { elapsedTime } from '@shell/utils/time';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  mounted() {
+    // Set initial value;
+    if (this.value.startTime) {
+      this.liveUpdate(day());
+    }
+  },
+
+  data() {
+    return { label: '-' };
+  },
+
+  computed: {
+    dayValue() {
+      if (!this.value.startTime) {
+        return null;
+      }
+
+      return day(this.value.startTime);
+    }
+  },
+
+  watch: {
+    value() {
+      if (this.value.startTime) {
+        this.liveUpdate(day());
+      }
+    }
+  },
+
+  methods: {
+    liveUpdate(now) {
+      if (!this.dayValue) {
+        this.label = '-';
+
+        return 300;
+      }
+
+      const { label, diff } = this.getDuration(this.dayValue, now);
+
+      this.label = label;
+
+      return diff;
+    },
+    getDuration(value, from) {
+      const now = day();
+
+      from = from || now;
+      const seconds = Math.abs(value.diff(now, 'seconds'));
+
+      return elapsedTime(seconds);
+    },
+  }
+};
+</script>
+
+<template>
+  <span v-if="value.staticValue">
+    {{ value.staticValue }}
+  </span>
+  <span
+    v-else
+    class="live-date"
+  >
+    {{ label }}
+  </span>
+</template>

package/components/formatter/LivePodRestarts.vue

@@ -15,7 +15,7 @@ export default {
     return { loading: true, restarts: 0 };
   },
 
-  methods:  {
+  methods: {
     startDelayedLoading() {
       this.loading = false;
     },

package/components/formatter/Number.vue

@@ -2,7 +2,7 @@
 export default {
   props: {
     value: {
-      type:     [String, Number],
+      type:    [String, Number],
       default: ''
     },
 

package/components/formatter/Percentage.vue

@@ -3,7 +3,7 @@
 export default {
   props: {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {
@@ -11,7 +11,7 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },

package/components/formatter/PercentageBar.vue

@@ -9,15 +9,15 @@ export default {
   components: { PercentageBarComponent },
   props:      {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     }
   },

package/components/formatter/PodImages.vue

@@ -8,7 +8,7 @@ const IGNORE_IMAGES = ['istio/proxy', 'gcr.io/istio-release/proxy', 'mirrored-is
 export default {
   props: {
     value: {
-      type:     [Array, String],
+      type:    [Array, String],
       default: () => {
         return [];
       }

package/components/formatter/Principal.vue

@@ -5,7 +5,7 @@ export default {
   components: { PrincipalComponent },
   props:      {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
   },

package/components/formatter/PrincipalGroupBindings.vue

@@ -2,9 +2,9 @@
 import { NORMAN, MANAGEMENT } from '@shell/config/types';
 
 export default {
-  props:      {
+  props: {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
   },

package/components/formatter/QualityText.vue

@@ -2,7 +2,7 @@
 export default {
   props: {
     value: {
-      type:     [String, Number],
+      type:    [String, Number],
       default: ''
     },
 

package/components/formatter/ReceiverIcons.vue

@@ -2,9 +2,9 @@
 import { RECEIVERS_TYPES } from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue';
 import { MONITORING } from '@shell/config/types';
 export default {
-  props:      {
+  props: {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {

package/components/formatter/Scale.vue

@@ -36,7 +36,7 @@ export default {
     }
   },
 
-  methods:  {
+  methods: {
     scaleDown() {
       this.row.scaleDown();
     },

package/components/formatter/ScanResult.vue

@@ -1,7 +1,7 @@
 <script>
 import { get } from '@shell/utils/object';
 export default {
-  props:      {
+  props: {
     value: {
       type:    [String, Number],
       default: null,

package/components/formatter/SecretData.vue

@@ -4,7 +4,7 @@ export default {
   components: { DateComponent },
   props:      {
     value: {
-      type:     [Object, String],
+      type:    [Object, String],
       default: null,
     },
     row: {

package/components/formatter/ServiceType.vue

@@ -12,7 +12,7 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },

package/components/formatter/Shortened.vue

@@ -9,7 +9,7 @@ export default {
     },
 
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
 

package/components/formatter/VerticalScroll.vue

@@ -3,8 +3,8 @@ export default {
   props:
     {
       value: {
-        type:     String,
-        default:  ''
+        type:    String,
+        default: ''
       }
     }
 };

package/components/formatter/VirtualServiceGateways.vue

@@ -76,10 +76,10 @@ export default {
       const routeName = 'c-cluster-product-resource-namespace-id';
       const params = {
         ...routeParams,
-        product:   'istio',
-        resource:  ISTIO.GATEWAY,
+        product:  'istio',
+        resource: ISTIO.GATEWAY,
         namespace,
-        id:        name
+        id:       name
       };
 
       return { name: routeName, params };

package/components/formatter/Weight.vue

@@ -6,7 +6,7 @@ export default {
 
   props: {
     value: {
-      type:     Number,
+      type:    Number,
       default: 0,
     },
     row: {
@@ -14,7 +14,7 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -5,7 +5,7 @@ import Tag from '@shell/components/Tag';
 export default {
   props: {
     value: {
-      type:     [Array, String],
+      type:    [Array, String],
       default: null,
     },
   },

package/components/formatter/WorkloadHealthScale.vue

@@ -52,7 +52,7 @@ export default {
     },
   },
 
-  methods:  {
+  methods: {
     liveUpdate() {
       if (this.loading) {
         return 5;
@@ -144,7 +144,7 @@ export default {
           top:    0,
           left:   0,
           right:  window.innerWidth || document.documentElement.clientWidth,
-          bottom:  window.innerHeight || document.documentElement.clientHeight,
+          bottom: window.innerHeight || document.documentElement.clientHeight,
         });
 
         if (insideWindow) {
@@ -261,15 +261,17 @@ $width: 150px;
       }
     }
 
+    $icon-width: 21px;
+
     .health {
-      width: $width - $height; // height is width of icon;
+      width: $width - $icon-width;
       margin-left: 5px;
     }
     .icon {
-      font-size: $height;
-      width: $height;
+      width: $icon-width;
       color: var(--primary);
       margin-top: 1px;
+      padding: 0 5px 0 3px; // It would be better to display flex here... but the icon looks a pixel off to the right
     }
   }
 

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import Date from '@shell/components/formatter/Date.vue';
+import dayjs from 'dayjs';
+
+describe('component: Date formatter', () => {
+  it.each([
+    'ddd, MMM D YYYY',
+    'MMM YYYY'
+  ])('should use date format pref', async(dateFormat) => {
+    const inputTime = dayjs().toString();
+    const expectedDate = dayjs(inputTime).format(dateFormat);
+    const wrapper = await mount(Date, {
+      propsData: { value: inputTime, showTime: false },
+      mocks:     { $store: { getters: { 'prefs/get': () => dateFormat } } }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(expectedDate);
+  });
+
+  it.each([
+    'h:mm:ss a',
+    'hh:mm'
+  ])('should use time format pref', async(timeFormat) => {
+    const inputTime = dayjs().toString();
+    const expectedDate = dayjs(inputTime).format(timeFormat);
+    const wrapper = await mount(Date, {
+      propsData: { value: inputTime, showDate: false },
+      mocks:     { $store: { getters: { 'prefs/get': () => timeFormat } } }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(expectedDate);
+  });
+
+  it.each([
+    'div',
+    'hr'
+  ])('use custom tag provided by tagName prop', async(tagName) => {
+    const wrapper = await mount(Date, {
+      propsData: { value: dayjs().toString(), tagName },
+      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+    });
+    const element = wrapper.find(tagName);
+
+    expect(element).toBeDefined();
+  });
+
+  it.each([
+    true,
+    false
+  ])('should render day and time on different lines if configured', async(multiline) => {
+    const wrapper = await mount(Date, {
+      propsData: { value: dayjs().toString(), multiline },
+      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+    });
+
+    expect(wrapper.find('br').exists()).toBe(multiline);
+  });
+});

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

@@ -0,0 +1,72 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
+
+describe('component: LinkDetail', () => {
+  it('should display the value', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: { row: { detailLocation: location }, value: 'test-name' },
+      stubs:     { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.text()).toBe('test-name');
+  });
+
+  it('should use rows detailLocation to render a link', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: { row: { detailLocation: location } },
+      stubs:     { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe(location);
+  });
+
+  it('should render the value in a span if no location is provided', async() => {
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: null }, value: 'test-name', col: { }
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+    const span = wrapper.find('span span');
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.exists()).toBe(false);
+
+    expect(span.element.innerHTML).toContain('test-name');
+  });
+
+  it('should use getCustomDetailLink if defined', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe('custom-link');
+  });
+
+  it('should use reference to find location if defined', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe('other-location');
+  });
+});

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

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import LiveDate from '@shell/components/formatter/LiveDate.vue';
+import dayjs from 'dayjs';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const defaultMock = {
+  $store: {
+    getters: {
+      'prefs/get':   jest.fn(),
+      'i18n/t':      ( unitKey: string, { count }: any) => unitKey.split('.')[1] + (count > 1 ? 's' : ''),
+      'i18n/exists': () => false,
+
+    }
+  },
+};
+
+describe('component: LiveDate', () => {
+  it('should show a dash if no date is provided', () => {
+    const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('-');
+  });
+
+  it('should say just now when the time provided is the current time', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: dayjs().toString() }
+    });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('Just now');
+  });
+
+  it('should display difference between value and current time', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000 } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('5 secs');
+  });
+
+  // this test calls a component method directly: we're testing this because it's how 'live' formatters are used in sortabletable
+  it('should recompute and update the displayed value when prompted', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: dayjs().toString() }
+    });
+
+    let element = wrapper.find('span');
+
+    expect(element.text()).toContain('Just now');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await wrapper.vm.liveUpdate(Date.now());
+
+    element = wrapper.find('span');
+    expect(element.text()).toContain('1 sec');
+  });
+
+  it('should include ago suffix if enabled', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000, addSuffix: true } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('5 secs ago');
+  });
+
+  it.each([
+    [86400000, '1 day'],
+    [82800000, '23 hours'],
+    [3540000, '59 mins']
+  ])('should use the largest sensible time unit', async(msAgo, displayValue) => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: Date.now() - msAgo }
+    });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain(displayValue);
+  });
+});

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

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import Si from '@shell/components/formatter/Si.vue';
+
+describe('component: Si formatter', () => {
+  it('should format integers as Bytes', async() => {
+    const wrapper = await mount(Si, { propsData: { value: 13 } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('13 B');
+  });
+
+  it.each([
+    ['1024 Mi', '1 GiB'],
+    ['1024', '1 KiB'],
+    ['2048 GiB', '2 TiB']
+  ])('should parse and re-format Si input strings', async(input, out) => {
+    const wrapper = await mount(Si, { propsData: { value: input, needParseSi: true } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(out);
+  });
+
+  it('should allow additional si formatting opts', async() => {
+    const wrapper = await mount(Si, {
+      propsData: {
+        value: '1 TiB', needParseSi: true, opts: { maxExponent: 3 }
+      }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('1024 GiB');
+  });
+});

package/components/graph/LinePlot.vue

@@ -2,7 +2,7 @@
 import * as d3 from 'd3';
 export default {
   props: {
-    graphWidth:      {
+    graphWidth: {
       type:     Number,
       required: true
     },

package/components/graph/ProgressArc.vue

@@ -6,7 +6,7 @@ export default {
       type:    Number,
       default: 0
     },
-    graphWidth:      {
+    graphWidth: {
       type:     Number,
       required: true
     },
@@ -37,10 +37,10 @@ export default {
       const arc = d3.arc();
 
       return arc({
-        innerRadius:  vm.innerRadius,
-        outerRadius:  vm.outerRadius,
-        endAngle:     2 * (Math.PI),
-        startAngle:   0
+        innerRadius: vm.innerRadius,
+        outerRadius: vm.outerRadius,
+        endAngle:    2 * (Math.PI),
+        startAngle:  0
       });
     },
     arc() {

package/components/nav/GlobalLoading.vue

@@ -6,7 +6,7 @@ export default {
 
   data: () => ({ loading: false }),
 
-  methods:    {
+  methods: {
     start() {
       this.loading = true;
     },

package/components/nav/Header.vue

@@ -49,7 +49,7 @@ export default {
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:         null
+      navHeaderRight:    null,
     };
   },
 
@@ -296,7 +296,6 @@ export default {
 <template>
   <header
     ref="header"
-    class="header-layout"
   >
     <div>
       <TopLevelMenu v-if="isMultiCluster || !isSingleProduct" />
@@ -672,8 +671,6 @@ export default {
 
         .vs__dropdown-toggle .vs__actions:after {
           color: var(--body-text) !important;
-          font-size: 1.5rem;
-          padding-right: 4px;
         }
 
         .vs__dropdown-toggle {
@@ -817,6 +814,11 @@ export default {
             background-color: var(--success);
             color: var(--success-text);
           }
+
+          img {
+            height: 20px;
+            width: 20px;
+          }
         }
       }