@rancher/shell 0.1.0

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

@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils';
+import { UNITS } from '@shell/utils/units';
+import UnitInput from '@shell/components/form/UnitInput.vue';
+import LabeledInput from '@shell/components/form/LabeledInput.vue';
+
+describe('component: UnitInput', () => {
+  it('should renders', () => {
+    const wrapper = mount(UnitInput, { propsData: { value: 1 } });
+
+    expect(wrapper.isVisible()).toBe(true);
+  });
+
+  it('should emit input event on value change', async() => {
+    const wrapper = mount(UnitInput, { propsData: { value: 1, delay: 0 } });
+    const input = wrapper.find('input');
+
+    await input.setValue(2);
+    await input.setValue(4);
+
+    expect(wrapper.emitted('input')).toHaveLength(2);
+  });
+
+  it.each([
+    ['view', true],
+    ['edit', false],
+  ])('should contain input disabled status %p when in %p mode', (mode, status) => {
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1,
+        delay: 0,
+        mode
+      }
+    });
+    const inputElement = wrapper.find('input').element as HTMLInputElement;
+
+    expect(inputElement.disabled).toStrictEqual(status);
+  });
+
+  it.each([
+    ['1000m', '1'],
+    ['2G', '2000000000'],
+    ['3', '3'],
+  ])('should parse values with SI modifier %p and return %p', (value, expected) => {
+    const wrapper = mount(UnitInput, { propsData: { value, delay: 0 } });
+    const label = wrapper.findComponent(LabeledInput);
+
+    expect(label.props('value')).toBe(expected);
+  });
+
+  it('should display prefix before unit', () => {
+    const inputExponent = 2;
+    const baseUnit = 'B';
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1,
+        inputExponent,
+        baseUnit,
+        delay: 0
+      }
+    });
+    const expectedUnits = `${ UNITS[inputExponent] }${ baseUnit }`;
+
+    const suffixDiv = wrapper.find('.addon');
+
+    expect(suffixDiv.element.textContent).toContain(expectedUnits);
+  });
+
+  it.each([
+    [true, '3G'],
+    [false, 3000000000],
+  ])('should (%p) force use of SI modifier and return %p', async(outputModifier, expected) => {
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1, inputExponent: 3, outputModifier: !outputModifier, delay: 0
+      }
+    });
+    const inputWrapper = wrapper.find('input');
+
+    await wrapper.setProps({ outputModifier });
+    await inputWrapper.setValue(3);
+
+    expect(wrapper.emitted('input')![0][0]).toBe(expected);
+  });
+
+  it('should display defined SI unit', async() => {
+    const inputExponent = 3;
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value:          1,
+        inputExponent,
+        outputModifier: true,
+        delay:          0
+      }
+    });
+
+    await wrapper.find('input').setValue(2);
+
+    expect(wrapper.emitted('input')![0][0]).toContain(UNITS[inputExponent]);
+  });
+
+  it.each([
+    [1024, 'MiB'],
+    [1000, 'MB'],
+  ])('based on increment %p and exponent M, it should use binary modifier and return unit %p', (increment, expected) => {
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1, inputExponent: 2, increment, delay: 0
+      }
+    });
+
+    expect(wrapper.find('.addon').text()).toBe(expected);
+  });
+
+  it.each([
+    ['string'],
+    ['number'],
+  ])('should force emission of value type as %p', (outputAs) => {
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1, inputExponent: 3, outputAs, delay: 0
+      }
+    });
+
+    wrapper.find('input').setValue(2);
+
+    expect(typeof wrapper.emitted('input')![0][0]).toBe(outputAs);
+  });
+
+  it.each([
+    [undefined, 'MB'],
+    ['Coolio', 'MCoolio'],
+  ])('should appended base unit %p value to SI modifier and return %p', (baseUnit, expected) => {
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1, baseUnit, inputExponent: 2, delay: 0
+      }
+    });
+    const addonText = wrapper.find('.addon').text();
+
+    expect(addonText).toBe(expected);
+  });
+
+  it('should display suffix outside of the value', () => {
+    const suffix = 'seconds';
+    const wrapper = mount(UnitInput, {
+      propsData: {
+        value: 1, suffix, delay: 0
+      }
+    });
+    const addonText = wrapper.find('.addon').text();
+
+    wrapper.find('input').setValue(1);
+
+    expect(addonText).toBe(suffix);
+    expect(wrapper.emitted('input')![0][0]).not.toContain(suffix);
+  });
+
+  it('should format value to a valid integer', () => {
+    const wrapper = mount(UnitInput, { propsData: { delay: 0 } });
+    const value = '096';
+    const expectation = 96;
+
+    wrapper.find('input').setValue(value);
+
+    expect(wrapper.emitted('input')![0][0]).toBe(expectation);
+  });
+
+  it('should not correct value to a valid integer while typing', () => {
+    const value = 5096;
+    const delay = 1;
+    const wrapper = mount(UnitInput, { propsData: { delay } });
+
+    jest.useFakeTimers();
+    wrapper.find('input').setValue('4096');
+    wrapper.find('input').setValue('096');
+    wrapper.find('input').setValue(value);
+    jest.advanceTimersByTime(delay);
+    jest.useRealTimers();
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe(value);
+  });
+});

package/components/formatter/AppSummaryGraph.vue

@@ -0,0 +1,136 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+import { colorForState, stateDisplay, stateSort } from '@shell/plugins/dashboard-store/resource-class';
+import { sortBy } from '@shell/utils/sort';
+
+export default {
+  components: { ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    labelKey: {
+      type:    String,
+      default: null
+    },
+
+    linkTo: {
+      type:    Object,
+      default: null
+    }
+  },
+
+  computed: {
+    show() {
+      return this.stateParts.length > 0;
+    },
+
+    stateParts() {
+      const out = {};
+
+      for ( const r of this.row.deployedResources ) {
+        const textColor = colorForState(r.state, r.error, r.transitioning);
+        const state = stateDisplay(r.state);
+        const key = `${ textColor }/${ state }`;
+
+        if ( out[key] ) {
+          out[key].value += 1;
+        } else {
+          out[key] = {
+            key,
+            label:     state,
+            color:     textColor.replace(/text-/, 'bg-'),
+            textColor,
+            value:     1,
+            sort:      stateSort(textColor, state),
+          };
+        }
+      }
+
+      return sortBy(Object.values(out), 'sort:desc');
+    },
+
+    colorParts() {
+      const out = {};
+
+      for ( const p of this.stateParts ) {
+        if ( out[p.color] ) {
+          out[p.color].value += 1;
+        } else {
+          out[p.color] = {
+            color: p.color,
+            value: p.value,
+            sort:  p.sort,
+          };
+        }
+      }
+
+      return sortBy(Object.values(out), 'sort:desc');
+    },
+
+    displayLabel() {
+      const count = this.row?.deployedResources?.length || 0;
+
+      if ( this.labelKey ) {
+        return this.t(this.labelKey, { count });
+      }
+
+      return `${ count }`;
+    }
+  },
+};
+</script>
+
+<template>
+  <v-popover
+    v-if="show"
+    class="text-center hand"
+    placement="top"
+    :open-group="row.id"
+    :trigger="show ? 'click' : 'manual'"
+    offset="1"
+  >
+    <ProgressBarMulti :values="colorParts" class="mb-5" />
+    <n-link v-if="linkTo" :to="linkTo">
+      {{ displayLabel }}
+    </n-link>
+    <span v-else>{{ displayLabel }}</span>
+
+    <template #popover>
+      <table v-if="show" class="fixed">
+        <tbody>
+          <tr v-for="obj in stateParts" :key="obj.key">
+            <td class="text-left pr-20" :class="{[obj.textColor]: true}">
+              {{ obj.label }}
+            </td>
+            <td class="text-right">
+              {{ obj.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </v-popover>
+  <div v-else class="text-center text-muted">
+    &mdash;
+  </div>
+</template>
+
+<style lang="scss">
+  .col-scale {
+    position: relative;
+
+    .trigger {
+      width: 100%;
+    }
+  }
+
+  .scale {
+    margin: 0;
+    padding: 0;
+    line-height: initial;
+  }
+</style>

package/components/formatter/AttachVMWithName.vue

@@ -0,0 +1,46 @@
+<script>
+import { HCI } from '@shell/config/types';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    const vmList = this.$store.getters['harvester/all'](HCI.VM) || [];
+
+    return { vmList };
+  },
+
+  computed: {
+    vm() {
+      const vm = this.vmList.find( V => V.id === `${ this.row.metadata.namespace }/${ this.value }`);
+
+      return vm;
+    },
+
+    to() {
+      return this.vm?.detailLocation;
+    },
+  }
+};
+</script>
+
+<template>
+  <n-link v-if="to" :to="to">
+    {{ value }}
+  </n-link>
+
+  <span v-else>
+    {{ value }}
+  </span>
+</template>

package/components/formatter/BadgeStateFormatter.vue

@@ -0,0 +1,60 @@
+<script>
+import BadgeState from '@shell/components/BadgeState';
+import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+export default {
+  components: { BadgeState },
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      default: () => {}
+    },
+
+    arbitrary: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      stateDisplay:    '',
+      stateBackground: ''
+    };
+  },
+
+  watch: {
+    value: {
+      handler() {
+        if (this.arbitrary) {
+          const color = colorForState(this.value);
+
+          this.stateDisplay = stateDisplay(this.value);
+          this.stateBackground = color.replace('text-', 'bg-');
+        }
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="arbitrary">
+      <BadgeState
+        v-if="value"
+        :color="stateBackground"
+        :label="stateDisplay"
+      />
+    </div>
+    <BadgeState v-else :value="row" />
+  </div>
+</template>

package/components/formatter/Capitalize.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    }
+  },
+  computed: {
+    capitalized() {
+      return this.value.charAt(0).toUpperCase() + this.value.slice(1);
+    }
+  }
+};
+</script>
+
+<template>
+  <span>
+    {{ capitalized }}
+  </span>
+</template>

package/components/formatter/Checked.vue

@@ -0,0 +1,20 @@
+<script>
+
+export default {
+  props:      {
+    value: {
+      type:    Boolean,
+      default: true
+    },
+  }
+};
+</script>
+
+<template>
+  <span v-if="value">
+    <i class="icon icon-lg icon-checkmark" />
+  </span>
+  <span v-else class="text-muted">
+    &mdash;
+  </span>
+</template>

package/components/formatter/CloudInitType.vue

@@ -0,0 +1,27 @@
+<script>
+import { HCI } from '@shell/config/labels-annotations';
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    displayLabel() {
+      return this.value?.[HCI.CLOUD_INIT] === 'user' ? this.t('harvester.cloudTemplate.userData') : this.t('harvester.cloudTemplate.networkData');
+    }
+  },
+};
+</script>
+
+<template>
+  <span> {{ displayLabel }} </span>
+</template>

package/components/formatter/ClusterLink.vue

@@ -0,0 +1,92 @@
+<script>
+import { get } from '@shell/utils/object';
+
+export default {
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    reference: {
+      type:    String,
+      default: null,
+    }
+  },
+  computed:   {
+    to() {
+      if ( this.row && this.reference ) {
+        return get(this.row, this.reference);
+      }
+
+      return this.row?.detailLocation;
+    },
+
+    clusterHasIssues() {
+      return this.row.status?.conditions?.some(condition => condition.error === true);
+    },
+
+    statusErrorConditions() {
+      if (this.clusterHasIssues) {
+        return this.row?.status.conditions.filter(condition => condition.error === true);
+      }
+
+      return false;
+    },
+
+    formattedConditions() {
+      if (this.clusterHasIssues) {
+        const filteredConditions = this.statusErrorConditions;
+        const formattedTooltip = [];
+
+        filteredConditions
+          .forEach((c) => {
+            formattedTooltip.push(`<p>${ [c.type] } (${ c.status })</p>`);
+          });
+
+        return formattedTooltip.toString().replaceAll(',', '');
+      }
+
+      return false;
+    },
+  },
+
+};
+
+</script>
+<template>
+  <span>
+    <n-link v-if="to" :to="to">
+      {{ value }}
+    </n-link>
+    <span v-else>{{ value }}</span>
+    <i
+      v-if="clusterHasIssues"
+      v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
+      class="conditions-alert-icon icon-error icon-lg"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .conditions-alert-icon {
+    color: var(--error);
+    padding-left: 2px;
+  }
+  ::v-deep {
+    .labeled-tooltip, .status-icon {
+      position: relative;
+      display: inline;
+      left: auto;
+      right: auto;
+      top: 2px;
+      bottom: auto;
+    }
+  }
+  .mytooltip ul {
+    outline: 1px dashed red;
+  }
+</style>

package/components/formatter/CopyToClipboard.vue

@@ -0,0 +1,18 @@
+<script>
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+
+export default {
+  components: { CopyToClipboardText },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+  }
+};
+</script>
+
+<template>
+  <CopyToClipboardText :text="value" />
+</template>

package/components/formatter/Date.vue

@@ -0,0 +1,74 @@
+<script>
+import day from 'dayjs';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { escapeHtml } from '@shell/utils/string';
+
+export default {
+  props: {
+    tagName: {
+      type:    String,
+      default: 'span',
+    },
+
+    value: {
+      type:     [String, Date],
+      default: ''
+    },
+
+    multiline: {
+      type:    Boolean,
+      default: false,
+    },
+
+    emptyTextKey: {
+      type:    String,
+      default: ''
+    },
+
+    showDate: {
+      type:    Boolean,
+      default: true,
+    },
+
+    showTime: {
+      type:    Boolean,
+      default: true,
+    },
+
+  },
+
+  computed: {
+
+    date() {
+      if ( !this.value ) {
+        return this.emptyTextKey ? this.$store.getters['i18n/t'](this.emptyTextKey) : '';
+      }
+
+      const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
+
+      return day(this.value).format(dateFormat);
+    },
+
+    time() {
+      if ( !this.value ) {
+        return '';
+      }
+
+      const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
+
+      return day(this.value).format(timeFormat);
+    }
+  },
+};
+</script>
+
+<template>
+  <component :is="tagName">
+    <template v-if="showDate">
+      {{ date }}<br v-if="multiline" /><span v-else>&nbsp;</span>
+    </template>
+    <template v-if="showTime">
+      {{ time }}
+    </template>
+  </component>
+</template>