@rancher/shell 0.1.0

package/components/formatter/LiveExpiryDate.vue

@@ -0,0 +1,69 @@
+<script>
+import day from 'dayjs';
+import { safeSetTimeout } from '@shell/utils/time';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: '',
+    },
+    row: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  data() {
+    return { state: this.update() };
+  },
+
+  computed: {
+    stateValue() {
+      return this.state;
+    }
+  },
+
+  watch: {
+    value() {
+      this.update();
+    }
+  },
+
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
+
+  methods: {
+    update() {
+      const state = this.row.state;
+
+      clearTimeout(this.timer);
+      if (state !== 'expired' && this.value) {
+        // Not expired and has an expiry date, so set a timer to update the state once its expired
+        const expiry = day(this.value);
+        const now = day();
+        const timeToExpire = expiry.diff(now);
+
+        this.timer = safeSetTimeout(timeToExpire, this.update, this);
+      }
+
+      const out = {};
+
+      out.expiresAt = this.value;
+      out.isExpired = state === 'expired';
+      this.state = out;
+
+      return out;
+    }
+  }
+};
+</script>
+
+<template>
+  <span v-if="stateValue.isExpired" class="text-error">
+    <LiveDate :value="stateValue.expiresAt" :add-suffix="true" />
+  </span>
+  <LiveDate v-else-if="stateValue.expiresAt" :value="stateValue.expiresAt" :add-suffix="false" />
+  <span v-else v-t="'generic.never'" class="text-muted" />
+</template>

package/components/formatter/MachineSummaryGraph.vue

@@ -0,0 +1,43 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+
+export default {
+  components: { ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <v-popover
+    class="text-center hand"
+    placement="top"
+    :open-group="row.id"
+    trigger="click"
+    offset="1"
+  >
+    <ProgressBarMulti v-if="row.stateParts" :values="row.stateParts" class="mb-5" />
+    <span v-if="row.desired === row.ready">{{ row.ready }}</span>
+    <span v-else>{{ row.ready }} of {{ row.desired }}</span>
+
+    <template #popover>
+      <table class="fixed">
+        <tbody>
+          <tr v-for="obj in row.stateParts" :key="obj.label">
+            <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>
+</template>

package/components/formatter/Number.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     [String, Number],
+      default: ''
+    },
+
+    prefix: {
+      type:    String,
+      default: ''
+    },
+
+    suffix: {
+      type:    String,
+      default: ''
+    },
+  },
+
+  computed: {},
+};
+</script>
+
+<template>
+  <span v-if="!value" class="text-muted">
+    &mdash;
+  </span>
+  <span v-else>
+    {{ t('generic.number', {value, prefix, suffix}) }}
+  </span>
+</template>

package/components/formatter/Percentage.vue

@@ -0,0 +1,25 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      default: () => {}
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    {{ value }}%
+  </span>
+</template>

package/components/formatter/PercentageBar.vue

@@ -0,0 +1,41 @@
+<script>
+import PercentageBarComponent from '../PercentageBar';
+
+/**
+ * This is a wrapper around the PercentageBar component which provides the interface
+ * that formatters are expected to have.
+ */
+export default {
+  components: { PercentageBarComponent },
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      default: () => {}
+    },
+    col: {
+      type:     Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    percentage() {
+      return Number.parseFloat(this.value);
+    }
+  }
+};
+</script>
+
+<template>
+  <p v-if="!value || value === '0'">
+    {{ t('generic.na') }}
+  </p>
+  <PercentageBarComponent
+    v-else
+    :value="percentage"
+    :show-percentage="true"
+  />
+</template>

package/components/formatter/PodImages.vue

@@ -0,0 +1,56 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    value: {
+      type:     [Array, String],
+      default: () => {
+        return [];
+      }
+    },
+
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    images() {
+      if ( this.row?.imageNames ) {
+        return this.row.imageNames;
+      } else {
+        return this.value;
+      }
+    },
+    imageLabels() {
+      if (Array.isArray(this.images) && this.images.length > 1) {
+        let imagesNames = '';
+
+        this.images.forEach((name, i) => {
+          imagesNames += `&#8226; ${ name }<br>`;
+        });
+
+        return imagesNames;
+      }
+
+      return null;
+    }
+  }
+
+};
+</script>
+
+<template>
+  <span>
+    <span>{{ images[0] }}</span><br>
+    <span
+      v-if="images.length-1>0"
+      v-tooltip.bottom="imageLabels"
+      class="plus-more"
+    >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
+  </span>
+</template>

package/components/formatter/PodsUsage.vue

@@ -0,0 +1,49 @@
+<script>
+import { POD } from '@shell/config/types';
+export default {
+  name:  'PodsUsage',
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      loading:   true,
+      podsUsage: null
+    };
+  },
+  methods: {
+    async startDelayedLoading() {
+      if (this.row?.isReady) {
+        const req = await this.$store.dispatch('management/request', { url: `/k8s/clusters/${ this.row?.id }/v1/counts` });
+
+        this.loading = false;
+        const usedPods = req.data?.[0]?.counts[POD]?.summary?.count || 0;
+        const totalPods = this.row?.status?.allocatable?.pods;
+
+        if (totalPods) {
+          this.podsUsage = `${ usedPods }/${ totalPods }`;
+        } else {
+          this.podsUsage = '—';
+        }
+      } else {
+        this.loading = false;
+        this.podsUsage = '—';
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <i v-if="loading" class="icon icon-spinner icon-spin" />
+  <p v-else>
+    {{ podsUsage }}
+  </p>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/components/formatter/Port.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:    Array,
+      default: () => []
+    }
+  },
+  data() {
+    const { hostPort = '', protocol = '' } = this.value[0] || {};
+
+    return { hostPort, protocol };
+  }
+};
+</script>
+
+<template>
+  <div v-if="hostPort">
+    {{ hostPort+'/'+protocol }}
+  </div>
+  <div v-else>
+    —
+  </div>
+</template>

package/components/formatter/Principal.vue

@@ -0,0 +1,19 @@
+<script>
+import PrincipalComponent from '@shell/components/auth/Principal';
+
+export default {
+  components: { PrincipalComponent },
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <PrincipalComponent :key="value" :value="value" :use-muted="false" />
+  </div>
+</template>

package/components/formatter/PrincipalGroupBindings.vue

@@ -0,0 +1,53 @@
+<script>
+import { NORMAN, MANAGEMENT } from '@shell/config/types';
+
+export default {
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+  },
+  computed: {
+
+    boundRoles() {
+      const principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
+      const globalRoleBindings = this.$store.getters['management/all'](MANAGEMENT.GLOBAL_ROLE_BINDING);
+
+      return globalRoleBindings
+        // Bindings for this group
+        .filter(globalRoleBinding => globalRoleBinding.groupPrincipalName === principal.id)
+        // Display name of role associated with binding
+        .map((binding) => {
+          const role = this.$store.getters['management/byId'](MANAGEMENT.GLOBAL_ROLE, binding.globalRoleName);
+
+          return {
+            detailLocation: role.detailLocation,
+            label:          role ? role.displayName : role.id, // nameDisplay contains principal name, not required here
+          };
+        })
+        .sort((a, b) => a.label.localeCompare(b.label));
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="pgb">
+    <template v-for="(role, i) in boundRoles">
+      <nuxt-link :key="role.id" :to="role.detailLocation">
+        {{ role.label }}
+      </nuxt-link>
+      <template v-if="i + 1 < boundRoles.length">
+        ,&nbsp;
+      </template>
+    </template>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.pgb{
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

package/components/formatter/QualityText.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     [String, Number],
+      default: ''
+    },
+
+    qualityFn: {
+      type:    Function,
+      default: () => 'error'
+    },
+  },
+};
+</script>
+
+<template>
+  <span :class="`text-${qualityFn(value)}`">
+    {{ value }}
+  </span>
+</template>

package/components/formatter/ReceiverIcons.vue

@@ -0,0 +1,124 @@
+<script>
+import { RECEIVERS_TYPES } from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue';
+import { MONITORING } from '@shell/config/types';
+export default {
+  props:      {
+    value: {
+      type:     String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    }
+  },
+  computed: {
+
+    types() {
+    // get count and logo for all configured types in every receiver in the alertmanagerconfig
+      if (this.row?.type === MONITORING.ALERTMANAGERCONFIG) {
+        const receivers = this.row?.spec?.receivers;
+
+        if (receivers && receivers.length > 0) {
+          return receivers.reduce((totals, receiver) => {
+            const counts = this.getReceiverTypes(receiver);
+
+            Object.keys(counts).forEach((type) => {
+              if (!totals[type]) {
+                totals[type] = {
+                  count: counts[type].count,
+                  logo:  counts[type].logo
+                };
+              } else {
+                totals[type].count += counts[type].count;
+              }
+            });
+
+            return totals;
+          }, {});
+        }
+
+        return null;
+      } else {
+        // if not alertmanagerconfig, this is an individual receiver
+        return this.getReceiverTypes(this.row);
+      }
+    }
+  },
+  methods: {
+    // get count and logo for each type configured in a given receiver
+    getReceiverTypes(receiver) {
+      // iterate through predefined types and sum the number configured in this receiver
+      const types = RECEIVERS_TYPES
+        .reduce((types, type) => {
+          if (type.name !== 'custom' && receiver?.[type.key]?.length > 0) {
+            types[this.t(type.label)] = { count: receiver?.[type.key]?.length, logo: type.logo };
+          }
+
+          return types;
+        }, {});
+
+      // if there are keys other than those defined in RECEIVERS_TYPES and 'name', assume they're custom types and sum them under "custom"
+      const expectedKeys = RECEIVERS_TYPES.map(type => type.key).filter(key => key !== 'custom');
+
+      expectedKeys.push('name');
+      const customKeys = Object.keys(receiver)
+        .filter(key => !expectedKeys.includes(key));
+
+      if (customKeys.length > 0) {
+        const customType = RECEIVERS_TYPES.find(type => type.name === 'custom');
+        const customLabel = this.t(customType.label);
+
+        types[customLabel] = { count: customKeys.length, logo: customType.logo };
+      }
+
+      return types;
+    },
+
+    countDisplay(type, count) {
+      if (count > 1) {
+        return `${ type }(x${ count })`;
+      }
+
+      return type;
+    }
+  }
+};
+</script>
+
+<template>
+  <span class="name-container">
+    <template v-for="(type, key, i) in types">
+      <div :key="key" class="logo">
+        <img :src="type.logo" />
+      </div>
+      <span :key="key+i">
+        <span v-if="i<Object.keys(types).length-1" class="comma">
+          {{ `${countDisplay(key, type.count)}, ` }}
+        </span>
+        <span v-else>
+          {{ countDisplay(key, type.count) }}
+        </span>
+      </span>
+
+    </template>
+  </span>
+</template>
+
+<style scoped lang='scss'>
+  .logo{
+    display: inline;
+    height: 1.3em;
+
+    img{
+      height: 1.3em;
+    }
+  }
+  .name-container{
+    display: flex;
+    align-items: center;
+  }
+  .comma{
+    margin-right: 2px;
+  }
+</style>

package/components/formatter/RunBookLink.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<template>
+  <a v-if="value.runbook_url" rel="nofollow noopener noreferrer" target="_blank" :href="value.runbook_url">{{ value.message || value.description }} <i class="icon icon-external-link" /></a>
+  <span v-else>{{ value.message || value.description }}</span>
+</template>

package/components/formatter/Scale.vue

@@ -0,0 +1,108 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+
+export default {
+  components: { ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: null
+    }
+  },
+
+  computed: {
+    canAdjust() {
+      const row = this.row;
+
+      if ( !row.scales ) {
+        return false;
+      }
+
+      if ( row.scales.global || row.scales.auto ) {
+        return false;
+      }
+
+      return true;
+    },
+
+    showHover() {
+      return this.row.complexScale || this.canAdjust;
+    }
+  },
+
+  methods:  {
+    scaleDown() {
+      this.row.scaleDown();
+    },
+
+    scaleUp() {
+      this.row.scaleUp();
+    },
+  },
+};
+</script>
+
+<template>
+  <v-popover :class="{'hand': showHover}" placement="top" :open-group="row.id" :trigger="showHover ? 'click' : 'manual'" offset="1">
+    <span>
+      <ProgressBarMulti v-if="row.complexScale" :values="row.scaleParts" />
+      <p v-if="row.scales && row.scales.global" class="scale">Global</p>
+      <span v-else class="scale">
+        {{ row.scales.current }}
+        <div v-if="row.scales.auto" class="text-small text-muted">
+          ({{ row.scales.desired }})
+        </div>
+        <span v-else-if="row.showDesiredScale">
+          <i class="icon icon-chevron-right" />
+          {{ row.scales.desired }}
+        </span>
+      </span>
+    </span>
+
+    <template #popover>
+      <div v-if="canAdjust" class="text-center pb-5">
+        <button type="button" class="btn btn-sm bg-primary scale-btn" @click="scaleDown">
+          <i class="icon icon-minus" />
+        </button>
+        <button type="button" class="btn btn-sm bg-primary scale-btn" @click="scaleUp">
+          <i class="icon icon-plus" />
+        </button>
+      </div>
+      <table v-if="row.complexScale" class="fixed">
+        <tbody>
+          <tr v-for="obj in row.scaleParts" :key="obj.label">
+            <td :class="{'text-left': true, [obj.textColor]: true}">
+              {{ obj.label }}
+            </td>
+            <td class="text-right">
+              {{ obj.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </v-popover>
+</template>
+
+<style lang="scss">
+  .col-scale {
+    position: relative;
+
+    .trigger {
+      width: 100%;
+    }
+  }
+
+  .scale {
+    margin: 0;
+    padding: 0;
+    line-height: initial;
+  }
+
+</style>