dashboard-shell-shell 0.0.1

package/components/formatter/MachineSummaryGraph.vue

@@ -0,0 +1,108 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+
+export default {
+  components: { ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+    horizontal: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    ready() {
+      // Ensure we never show more ready machines than desired
+      // If w can address in backedn, we could revert this in the future
+      const ready = this.row?.ready || 0;
+      const desired = this.row?.desired || 0;
+
+      return ready > desired ? desired : ready;
+    }
+  },
+};
+</script>
+
+<template>
+  <v-dropdown
+    class="text-center hand machine-summary-graph"
+    placement="top"
+    :show-group="row.id"
+    :triggers="['click']"
+    offset="1"
+  >
+    <template #popper>
+      <table class="fixed">
+        <tbody>
+          <tr
+            v-for="(obj, i) in row.stateParts"
+            :key="i"
+          >
+            <td
+              class="text-left pr-20"
+              :class="{[obj.textColor]: true}"
+            >
+              {{ obj.label }}
+            </td>
+            <td class="text-right">
+              {{ obj.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+
+    <div
+      class="content"
+      :class="{ horizontal }"
+    >
+      <ProgressBarMulti
+        v-if="row.stateParts"
+        :values="row.stateParts"
+        class="progress-bar"
+      />
+      <span
+        v-if="row.desired === ready"
+        class="count"
+      >{{ ready }}</span>
+      <span
+        v-else
+        class="count"
+      >{{ ready }} of {{ row.desired }}</span>
+    </div>
+  </v-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .machine-summary-graph {
+    display: flex;
+    align-items: center;
+
+    .content {
+      .progress-bar {
+        margin-bottom: 5px;
+      }
+
+      &.horizontal {
+        // When horizontal, put the number before the graph
+        align-items: center;
+        direction: rtl;
+        display: flex;
+
+        > * {
+          direction: ltr;
+        }
+
+        .progress-bar {
+          margin-bottom: 0;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+</style>

package/components/formatter/Number.vue

@@ -0,0 +1,34 @@
+<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' || isNaN(value)">
+    {{ t('generic.na') }}
+  </p>
+  <PercentageBarComponent
+    v-else
+    :modelValue="percentage"
+    :show-percentage="true"
+  />
+</template>

package/components/formatter/PodImages.vue

@@ -0,0 +1,72 @@
+<script>
+import { mapGetters } from 'vuex';
+
+// For the main image hat we show, use these to ignore istio proxy images so that
+// we are more likely to show the important main iamge and not the istio sidecar
+const IGNORE_IMAGES = ['istio/proxy', 'gcr.io/istio-release/proxy', 'mirrored-istio-proxy'];
+
+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;
+    },
+    mainImage() {
+      const images = this.images;
+      const filter = images.filter((image) => !IGNORE_IMAGES.find((i) => image.includes(i)));
+
+      return filter.length > 0 ? filter[0] : images[0];
+    }
+  }
+
+};
+</script>
+
+<template>
+  <span class="formatter-pod-images">
+    <span>{{ mainImage }}</span><br>
+    <span
+      v-if="images.length-1>0"
+      v-clean-tooltip.bottom="imageLabels"
+      class="plus-more"
+    >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
+  </span>
+</template>
+
+<style scoped>
+  .formatter-pod-images {
+    word-break: break-all;
+  }
+</style>

package/components/formatter/PodsUsage.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name:  'PodsUsage',
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+  computed: {
+    podsUsage() {
+      const usedPods = this.row?.mgmt?.status?.requested?.pods;
+      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
+
+      if (!this.row?.isReady || !totalPods) {
+        return '—';
+      }
+
+      return `${ usedPods || 0 }/${ totalPods }`;
+    }
+  }
+};
+</script>
+
+<template>
+  <p>
+    <span>{{ podsUsage }}</span>
+  </p>
+</template>

package/components/formatter/Principal.vue

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

package/components/formatter/PrincipalGroupBindings.vue

@@ -0,0 +1,59 @@
+<script>
+import { NORMAN, MANAGEMENT } from '@shell/config/types';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+  },
+  computed: {
+
+    boundRoles() {
+      // need to use getter to fetch all NORMAN.PRINCIPAL, otherwise `rancher/byId` is not reactive...
+      const principals = this.$store.getters['rancher/all'](NORMAN.PRINCIPAL);
+      const globalRoleBindings = this.$store.getters['management/all'](MANAGEMENT.GLOBAL_ROLE_BINDING);
+
+      const principal = principals.find((x) => x.id === this.value);
+
+      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"
+      :key="role.id"
+    >
+      <router-link :to="role.detailLocation">
+        {{ role.label }}
+      </router-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/RKETemplateName.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="rke-template">
+    <span>{{ value.displayName }}</span>
+    <i
+      v-if="value.upgrade"
+      v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: value.upgrade })"
+      class="template-upgrade-icon icon-alert icon"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .rke-template {
+    align-items: center;
+    display: inline-flex;
+
+    .template-upgrade-icon {
+      border: 1px solid var(--warning);
+      border-radius: 50%;
+      color: var(--warning);
+      margin-left: 4px;
+      font-size: 14px;
+      padding: 2px;
+    }
+  }
+</style>

package/components/formatter/ReceiverIcons.vue

@@ -0,0 +1,132 @@
+<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"
+      :key="i"
+    >
+      <div
+        class="logo"
+      >
+        <img :src="type.logo">
+      </div>
+      <span>
+        <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,20 @@
+<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>