dashboard-shell-shell 0.0.1

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -0,0 +1,107 @@
+<script>
+import { NODE } from '@shell/config/types';
+import Tag from '@shell/components/Tag';
+
+export default {
+  props: {
+    value: {
+      type:    [Array, String],
+      default: null,
+    },
+  },
+
+  components: { Tag },
+
+  computed: {
+    nodes() {
+      return this.$store.getters['cluster/all'](NODE);
+    },
+    // value may be JSON from "field.cattle.io/publicEndpoints" label
+    parsed() {
+      const nodes = this.nodes;
+      const nodeWithExternal = nodes.find((node) => !!node.externalIp) || {};
+      const externalIp = nodeWithExternal.externalIp;
+
+      if ( this.value && this.value.length ) {
+        let out ;
+
+        try {
+          out = JSON.parse(this.value);
+
+          out.forEach((endpoint) => {
+            let protocol = 'http';
+
+            if (endpoint.port === 443) {
+              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) {
+              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 }`;
+            }
+          });
+
+          return out;
+        } catch (err) {
+          return this.value[0];
+        }
+      }
+
+      return null;
+    }
+  },
+};
+</script>
+
+<template>
+  <span>
+    <template
+      v-for="(endpoint, i) in parsed"
+      :key="i"
+    >
+      <Tag
+        v-if="endpoint.display"
+        :key="endpoint.display"
+        class="endpoint-tag"
+      >{{ endpoint.display }}</Tag>
+      <a
+        v-else
+        :key="endpoint.link"
+        class="endpoint-link"
+        :href="endpoint.link"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >{{ endpoint.linkDisplay }}</a>
+    </template>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.endpoint-tag {
+  display: inline-block;
+}
+.endpoint-tag:not(:first-of-type) {
+  margin: 2px 4px 0 2px;
+}
+.endpoint-link:after {
+  content: ',\a0';
+  display: inline-block;
+  color: var(--default-text);
+}
+.endpoint-link:last-of-type:after {
+  content: '';
+}
+
+</style>

package/components/formatter/WorkloadHealthScale.vue

@@ -0,0 +1,339 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+import PlusMinus from '@shell/components/form/PlusMinus';
+import { POD, SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
+import { ucFirst } from '@shell/utils/string';
+
+const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
+const INVALID_TYPES = [POD];
+
+export default {
+  components: { PlusMinus, ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      required: true
+    },
+    rowKey: {
+      type:     String,
+      required: true
+    },
+  },
+
+  beforeUnmount() {
+    document.removeEventListener('click', this.onClickOutside);
+  },
+
+  data() {
+    return {
+      disabled: false,
+      expanded: false,
+      loading:  true,
+      cParts:   [],
+    };
+  },
+
+  computed: {
+    id() {
+      return `${ this.rowKey }-workload-health-scale`.replaceAll('-', '');
+    },
+
+    canScale() {
+      return !!SCALABLE_TYPES.includes(this.row.type) && this.row.canUpdate;
+    },
+
+    canShow() {
+      return !INVALID_TYPES.includes(this.row.type);
+    },
+
+    parts() {
+      return this.cParts;
+    },
+  },
+
+  methods: {
+    liveUpdate() {
+      if (this.loading) {
+        return 5;
+      }
+
+      this.cParts = Object.entries(this.row.jobGauges || this.row.podGauges || [])
+        .map(([name, value]) => ({
+          color: `bg-${ value.color }`,
+          value: value.count || 0,
+          label: ucFirst(name)
+        })).filter((x) => x.value > 0);
+
+      return 5;
+    },
+    startDelayedLoading() {
+      this.loading = false;
+      this.liveUpdate();
+    },
+
+    onClickOutside(event) {
+      const { [`root-${ this.id }`]: component } = this.$refs;
+
+      if (!component || component.contains(event.target)) {
+        return;
+      }
+      this.expanded = false;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    async scaleDown() {
+      await this.scale(false);
+    },
+    async scaleUp() {
+      await this.scale(true);
+    },
+    async scale(isUp) {
+      this['disabled'] = true;
+      try {
+        if (isUp) {
+          await this.row.scaleUp();
+        } else {
+          await this.row.scaleDown();
+        }
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('workload.list.errorCannotScale', { direction: isUp ? 'up' : 'down', workloadName: this.row.name }),
+          err
+        },
+        { root: true });
+      }
+      this['disabled'] = false;
+    },
+
+    insideBounds(bounding, bounds) {
+      return bounding.top >= bounds.top &&
+        bounding.left >= bounds.left &&
+        bounding.right <= bounds.right &&
+        bounding.bottom <= bounds.bottom;
+    },
+
+  },
+
+  watch: {
+    expanded(neu) {
+      if (neu) {
+        document.addEventListener('click', this.onClickOutside);
+      } else {
+        document.removeEventListener('click', this.onClickOutside);
+      }
+
+      // If the drop down content appears outside of the window then move it to be above the trigger
+      // Do this is three steps
+      // expanded: false & expanded-checked = false - Content does not appear in DOM
+      // expanded: true & expanded-checked = false - Content appears in DOM (so it's location can be calculated to be in or out of an area) but isn't visible (user doesn't see content blip from below to above trigger)
+      // expanded: true & expanded-checked = true - Content appears in DOM and is visible (it's final location is known so user can see)
+      setTimeout(() => { // There be beasts without this (classes don't get applied... so drop down never gets shown)
+        const dropdown = document.getElementById(this.id);
+
+        if (!neu) {
+          dropdown.classList.remove('expanded-checked');
+
+          return;
+        }
+
+        // Ensure drop down will be inside of the window, otherwise show above the trigger
+        const bounding = dropdown.getBoundingClientRect();
+        const insideWindow = this.insideBounds(bounding, {
+          top:    0,
+          left:   0,
+          right:  window.innerWidth || document.documentElement.clientWidth,
+          bottom: window.innerHeight || document.documentElement.clientHeight,
+        });
+
+        if (insideWindow) {
+          dropdown.classList.remove('out-of-view');
+        } else {
+          dropdown.classList.add('out-of-view');
+        }
+
+        // This will trigger the actual display of the drop down (after we've calculated if it goes below or above trigger)
+        dropdown.classList.add('expanded-checked');
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="!canShow" />
+  <div
+    v-else-if="loading"
+    class="hs-popover__loader"
+  >
+    <i class="icon icon-spinner" />
+  </div>
+  <div
+    v-else
+    :id="`root-${id}`"
+    :ref="`root-${id}`"
+    class="hs-popover"
+  >
+    <div
+      id="trigger"
+      class="hs-popover__trigger"
+      aria-role="button"
+      tabindex="0"
+      :class="{expanded}"
+      :aria-roledescription="t('workload.scaleWorkloads')"
+      :aria-label="t('workload.healthScaleToggle')"
+      :aria-expanded="expanded"
+      @click="expanded = !expanded"
+      @keyup.enter="expanded = !expanded"
+      @keydown.space.prevent="expanded = !expanded"
+    >
+      <ProgressBarMulti
+        v-if="parts"
+        class="health"
+        :values="parts"
+        :show-zeros="true"
+        :aria-describedby="t('workload.healthWorkloads')"
+      />
+      <i :class="{icon: true, 'icon-chevron-up': expanded, 'icon-chevron-down': !expanded}" />
+    </div>
+    <div
+      :id="id"
+      class="hs-popover__content"
+      :class="{expanded, [id]:true}"
+    >
+      <div>
+        <div
+          v-for="(obj, i) in parts"
+          :key="i"
+          class="counts"
+        >
+          <span class="counts-label">{{ obj.label }}</span>
+          <span>{{ obj.value }}</span>
+        </div>
+        <div
+          v-if="canScale"
+          class="text-center scale"
+        >
+          <span>{{ t('tableHeaders.scale') }} </span>
+          <PlusMinus
+            :value="row.spec.replicas"
+            :disabled="disabled"
+            @minus="scaleDown"
+            @plus="scaleUp"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+$height: 30px;
+$width: 150px;
+
+.hs-popover {
+  position: relative;
+
+  &__loader {
+    align-items: center;
+    border: solid thin var(--sortable-table-top-divider);
+    display: flex;
+    height: $height;
+    width: $width;
+
+    > i {
+      font-size: 16px;
+      height: 16px;
+      margin-left: 5px;
+      width: 16px;
+    }
+  }
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+
+    width: $width;
+    height: $height;
+
+    border: solid thin var(--sortable-table-top-divider);
+
+    &.expanded {
+      background-color: var(--sortable-table-row-bg);
+    }
+    &:not(.expanded):hover {
+      background-color: var(--accent-btn);
+      .icon {
+        color: unset;
+      }
+    }
+
+    $icon-width: 21px;
+
+    .health {
+      width: $width - $icon-width;
+      margin-left: 5px;
+    }
+    .icon {
+      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
+    }
+  }
+
+  &__content {
+    z-index: 14;
+    width: $width;
+
+    border: solid thin var(--sortable-table-top-divider);
+    background-color: var(--sortable-table-row-bg);
+
+    position: absolute;
+    margin-top: -1px;
+
+    display: none;
+    visibility: hidden;
+    &.expanded {
+      display: inline;
+    }
+    &.expanded-checked {
+      visibility: visible;
+    }
+
+    &.out-of-view {
+      // Flip to show drop down above trigger
+      bottom: 0;
+      margin-bottom: $height - 1px;
+    }
+
+    & > div {
+      padding: 10px;
+    }
+
+    .counts {
+      display: flex;
+      justify-content: space-between;
+
+      &-label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .scale {
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+  }
+}
+
+</style>

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, { props: { 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, { props: { value } });
+
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(false);
+  });
+});

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

@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import ClusterLink from '@shell/components/formatter/ClusterLink.vue';
+
+describe('component: ClusterLink', () => {
+  const UNAVAILABLE_MACHINES_ICON_SELECTOR = '[data-testid="unavailable-machines-alert-icon"]';
+  const TEMPLATE_UPGRADE_ICON_SELECTOR = '[data-testid="rke-template-upgrade-alert-icon"]';
+  const CONDITION_HAS_ERROR_ICON_SELECTOR = '[data-testid="conditions-has-error-icon"]';
+
+  describe('unavailable machines alert icon', () => {
+    const testCases = [
+      [undefined, false],
+      [0, false],
+      [1, true],
+      [5, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on on the number of unavailable machines',
+      (unavailableMachines, expected) => {
+        const wrapper = mount(ClusterLink, {
+          props: {
+            row: {
+              hasError:           false,
+              status:             {},
+              unavailableMachines,
+              rkeTemplateUpgrade: undefined
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(UNAVAILABLE_MACHINES_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+
+  describe('template upgrade alert icon', () => {
+    const testCases = [
+      [undefined, false],
+      ['any', true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on rkeTemplateUpgrade',
+      (rkeTemplateUpgrade, expected) => {
+        const wrapper = mount(ClusterLink, {
+          props: {
+            row: {
+              hasError:            false,
+              status:              {},
+              unavailableMachines: 0,
+              rkeTemplateUpgrade
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(TEMPLATE_UPGRADE_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+
+  describe('conditions has error icon', () => {
+    const MOCKED_CONDITIONS_1 = [{
+      status: '', type: 'Ready', reason: 'Waiting', error: true // When the only existing error has a type "Ready" and reason "Waiting"
+    }];
+    const MOCKED_CONDITIONS_2 = [{
+      status: 'any', type: 'any', error: true
+    }];
+
+    const testCases = [
+      [[], false],
+      [MOCKED_CONDITIONS_1, false],
+      [MOCKED_CONDITIONS_2, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on the status conditions',
+      (conditions, expected) => {
+        const wrapper = mount(ClusterLink, {
+          props: {
+            row: {
+              hasError:            true,
+              status:              { conditions },
+              unavailableMachines: 0
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(CONDITION_HAS_ERROR_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+});

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, {
+      props:  { value: inputTime, showTime: false },
+      global: { 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, {
+      props:  { value: inputTime, showDate: false },
+      global: { 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, {
+      props:  { value: dayjs().toString(), tagName },
+      global: { 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, {
+      props:  { value: dayjs().toString(), multiline },
+      global: { 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, {
+      props:  { row: { detailLocation: location }, value: 'test-name' },
+      global: { stubs: { 'router-link': 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, {
+      props:  { row: { detailLocation: location } },
+      global: { stubs: { 'router-link': 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, {
+      props: {
+        row: { detailLocation: null }, value: 'test-name', col: { }
+      },
+      global: { stubs: { 'router-link': 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, {
+      props: {
+        row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
+      },
+      global: { stubs: { 'router-link': 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, {
+      props: {
+        row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe('other-location');
+  });
+});