@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/components/fleet/dashboard/ResourcePanel.vue

@@ -0,0 +1,376 @@
+<script lang="ts">
+import { markRaw, PropType } from 'vue';
+import { mapGetters } from 'vuex';
+import { lcFirst } from '@shell/utils/string';
+import {
+  Chart, ChartOptions, ChartEvent, TooltipItem, registerables
+} from 'chart.js';
+import { BadgeState } from '@components/BadgeState';
+import FleetUtils from '@shell/utils/fleet';
+import { FleetDashboardResourceStates, FleetDashboardState } from '@shell/types/fleet';
+
+type ChartOptionsType = ChartOptions<'doughnut'>;
+type ChartType = Chart<'doughnut', any[], ChartOptionsType>;
+
+interface DataType {
+  chartId: string,
+  chart: ChartType | null
+}
+
+type StatePanel = FleetDashboardState & { count: number }
+
+Chart.register(...registerables);
+
+export default {
+
+  name: 'FleetDashboardResourcePanel',
+
+  emits: ['click:state'],
+
+  components: { BadgeState },
+
+  props: {
+    states: {
+      type:    Array as PropType<FleetDashboardResourceStates[]>,
+      default: () => []
+    },
+
+    workspace: {
+      type:    String,
+      default: ''
+    },
+
+    type: {
+      type:    String,
+      default: ''
+    },
+
+    showChart: {
+      type:    Boolean,
+      default: true
+    },
+
+    selectable: {
+      type:    Boolean,
+      default: true
+    },
+
+    selectedStates: {
+      type:    Object as PropType<Record<string, boolean>>,
+      default: () => ({})
+    },
+  },
+
+  data(): DataType {
+    return {
+      chartId: `${ this.workspace }-${ this.type }`,
+      chart:   null,
+    };
+  },
+
+  mounted() {
+    if (this.showChart) {
+      const container = document.getElementById(`${ this.chartId }-container`);
+
+      if (!container) {
+        return;
+      }
+
+      const canvas = document.createElement('canvas');
+
+      canvas.id = this.chartId;
+      canvas.className = 'chart';
+
+      container.append(canvas);
+
+      const data = this.buildChartData();
+      const options: ChartOptionsType = {
+        responsive: true,
+        elements:   {
+          arc: {
+            borderWidth:      4,
+            borderColor:      this.bgColor,
+            hoverBorderColor: this.bgColor,
+          }
+        },
+        plugins: {
+          legend:  { display: false },
+          title:   { display: false },
+          tooltip: {
+            yAlign:    'bottom',
+            callbacks: {
+              title: (ctx: TooltipItem<'doughnut'>[]) => {
+                const v = ctx[0];
+
+                return `${ v?.formattedValue } ${ lcFirst(v.label) }`;
+              },
+              label: () => '',
+            }
+          }
+        },
+        cutout:  13,
+        onHover: (event: any) => {
+          if (this.selectable && event?.native?.target?.style) {
+            event.native.target.style.cursor = 'pointer';
+          }
+        },
+        onClick: (_: ChartEvent, element?: { index: number }[]) => {
+          const idx = element?.[0]?.index;
+
+          if (idx === undefined) {
+            return;
+          }
+
+          const state = this.statePanels.find(({ index }) => idx === index);
+
+          this.selectState(state);
+        },
+        animations: { borderColor: { duration: 0 } }
+      };
+
+      const chart = new Chart(canvas, {
+        type: 'doughnut',
+        data,
+        options,
+      }) as ChartType;
+
+      this.chart = markRaw(chart);
+    }
+  },
+
+  computed: {
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    statePanels() {
+      const out: StatePanel[] = [];
+
+      this.states.forEach((state) => {
+        const {
+          statePanel,
+          resources
+        } = state;
+
+        const exists = out.find((s) => s.id === statePanel.id);
+
+        if (exists) {
+          exists.count += resources.length;
+        } else {
+          out.push({
+            ...statePanel,
+            count: resources.length
+          });
+        }
+      });
+
+      return out;
+    },
+
+    count() {
+      return this.statePanels.reduce((acc, state) => acc + state.count, 0);
+    },
+
+    typeLabel() {
+      return this.t(`typeLabel."${ this.type }"`, { count: this.count });
+    },
+  },
+
+  watch: {
+    statePanels: {
+      handler: 'updateStates',
+      deep:    true,
+    },
+    theme() {
+      if (this.chart) {
+        this.chart.update();
+      }
+    },
+  },
+
+  methods: {
+    buildChartData() {
+      const chartStates = FleetUtils.dashboardStates;
+
+      const labels = chartStates.map(({ label }) => label);
+      const backgroundColor = chartStates.map(({ color }) => color);
+
+      const data = this.getChartStates(this.statePanels);
+
+      return {
+        labels,
+        datasets: [
+          {
+            data,
+            backgroundColor,
+          },
+        ],
+      };
+    },
+
+    updateStates(value: StatePanel[]) {
+      if (this.chart) {
+        this.chart.data.datasets.forEach((dataset) => {
+          dataset.data = this.getChartStates(value);
+        });
+
+        this.chart.update();
+      }
+    },
+
+    getChartStates(states: StatePanel[]) {
+      return FleetUtils.dashboardStates.map(({ id }) => states.find((s) => s.id === id)?.count || 0);
+    },
+
+    selectState(state?: StatePanel) {
+      if (!this.selectable) {
+        return;
+      }
+
+      this.$emit('click:state', state?.id);
+    },
+
+    onClickBadge(state: StatePanel) {
+      this.selectState(state);
+    },
+
+    bgColor() {
+      return getComputedStyle(document.body).getPropertyValue('--body-bg');
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="panel">
+    <div
+      v-if="showChart"
+      :id="chartId + '-container'"
+      :data-testid="'chart-container'"
+      class="panel-chart-container"
+    />
+    <div class="details">
+      <div
+        class="description"
+        :data-testid="'description'"
+      >
+        <span class="count">{{ count }}</span>
+        <span class="label">{{ typeLabel }}</span>
+      </div>
+      <div class="states">
+        <BadgeState
+          v-for="(state, i) in statePanels"
+          :key="i"
+          class="badge"
+          :tabindex="selectable ? 0 : undefined"
+          :role="selectable ? 'button' : undefined"
+          :aria-label="selectable ? t('fleet.dashboard.state') + '-' + state.id : undefined"
+          :class="{
+            ['selectable']: selectable,
+            ['selected']: selectable && selectedStates?.[state.id]
+          }"
+          :color="state.stateBackground"
+          :label="` ${ state.count } `"
+          :icon="state.icon"
+          @click="onClickBadge(state)"
+          @keydown.space.enter.stop.prevent="onClickBadge(state)"
+        >
+          <template
+            v-if="selectable && selectedStates?.[state.id]"
+            #content-right
+          >
+            <i class="icon icon-close ml-5" />
+          </template>
+        </BadgeState>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .panel {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .panel-chart-container {
+      padding: 3px;
+      min-width: 80px;
+      width: 80px;
+    }
+
+    .details {
+      padding: 5px;
+
+      .description {
+        .count {
+          font-size: 25px;
+          font-weight: bold;
+          margin-right: 4px;
+        }
+
+        .label {
+          font-size: 20px;
+        }
+      }
+
+      .states {
+        display: flex;
+        align-items: center;
+        margin-top: 4px;
+
+        .badge {
+          margin: 2px 5px 2px 2px;
+          border: 0;
+
+          &:focus-visible {
+            @include focus-outline;
+          }
+
+          &.selectable {
+            cursor: pointer;
+          }
+
+          &.bg-error {
+            background: var(--click-badge-error-bg);
+            color: var(--click-badge-error);
+          }
+
+          &.bg-warning {
+            background: var(--click-badge-warning-bg);
+            color: var(--click-badge-warning);
+          }
+
+          &.bg-success {
+            background: var(--click-badge-success-bg);
+            color: var(--click-badge-success);
+          }
+
+          &.bg-info {
+            background: var(--click-badge-info-bg);
+            color: var(--click-badge-info);
+          }
+
+          &.selected {
+            margin: 0 5px 0 0;
+
+            &.bg-error {
+              border: 2px solid var(--click-badge-error-border);
+            }
+
+            &.bg-warning {
+              border: 2px solid var(--click-badge-warning-border);
+            }
+
+            &.bg-success {
+              border: 2px solid var(--click-badge-success-border);
+            }
+
+            &.bg-info {
+              border: 2px solid var(--click-badge-info-border);
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>

package/components/form/ArrayList.vue

@@ -380,6 +380,12 @@ export default {
               </button>
             </slot>
           </div>
+          <slot
+            name="value-sub-row"
+            :row="row"
+            :mode="mode"
+            :isView="isView"
+          />
         </div>
       </template>
       <div v-else>

package/components/form/SimpleSecretSelector.vue

@@ -75,8 +75,11 @@ export default {
       key:                props.initialKey,
       none:               NONE,
       SECRET,
+      /**
+       * Of type @ResourceLabeledSelectSettings
+       */
       allSecretsSettings: {
-        mapResult: (secrets) => {
+        updateResources: (secrets) => {
           const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
           const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -85,9 +88,12 @@ export default {
           return mappedSecrets;
         }
       },
+      /**
+       * Of type @ResourceLabeledSelectPaginateSettings
+       */
       paginateSecretsSetting: {
         requestSettings: this.paginatePageOptions,
-        mapResult:       (secrets) => {
+        updateResources: (secrets) => {
           const mappedSecrets = this.mapSecrets(secrets);
 
           this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here

package/components/form/ValueFromResource.vue

@@ -25,6 +25,20 @@ export default {
         return { valueFrom: {} };
       }
     },
+    options: {
+      type:    Array,
+      default: () => {
+        return [
+          { value: 'simple', label: 'Key/Value Pair' },
+          { value: 'resourceFieldRef', label: 'Resource' },
+          { value: 'configMapKeyRef', label: 'ConfigMap Key' },
+          { value: 'secretKeyRef', label: 'Secret key' },
+          { value: 'fieldRef', label: 'Pod Field' },
+          { value: 'secretRef', label: 'Secret' },
+          { value: 'configMapRef', label: 'ConfigMap' },
+        ];
+      },
+    },
     allConfigMaps: {
       type:    Array,
       default: () => []
@@ -46,15 +60,6 @@ export default {
 
   data() {
     return {
-      typeOpts: [
-        { value: 'simple', label: 'Key/Value Pair' },
-        { value: 'resourceFieldRef', label: 'Resource' },
-        { value: 'configMapKeyRef', label: 'ConfigMap Key' },
-        { value: 'secretKeyRef', label: 'Secret key' },
-        { value: 'fieldRef', label: 'Pod Field' },
-        { value: 'secretRef', label: 'Secret' },
-        { value: 'configMapRef', label: 'ConfigMap' },
-      ],
       secrets:         this.allSecrets,
       resourceKeyOpts: ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'],
     };
@@ -70,7 +75,7 @@ export default {
     } else if (props.value.value) {
       type.value = 'simple';
     } else if (props.value.valueFrom) {
-      type.value = Object.keys((props.value.valueFrom))[0] || 'simple';
+      type.value = Object.keys((props.value.valueFrom))[0] || props.options[0].value || 'simple';
     }
 
     const refName = ref('');
@@ -84,13 +89,13 @@ export default {
     switch (type.value) {
     case 'resourceFieldRef':
       name.value = props.value.name;
-      refName.value = props.value.valueFrom[type.value].containerName;
-      key.value = props.value.valueFrom[type.value].resource || '';
+      refName.value = props.value.valueFrom?.[type.value]?.containerName;
+      key.value = props.value.valueFrom?.[type.value]?.resource || '';
       break;
     case 'configMapKeyRef':
       name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
+      key.value = props.value.valueFrom?.[type.value]?.key || '';
+      refName.value = props.value.valueFrom?.[type.value]?.name;
       referenced.value = props.allConfigMaps.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -101,12 +106,12 @@ export default {
     case 'secretRef':
     case 'configMapRef':
       name.value = props.value.prefix;
-      refName.value = props.value[type.value].name;
+      refName.value = props.value[type.value]?.name;
       break;
     case 'secretKeyRef':
       name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
+      key.value = props.value.valueFrom?.[type.value]?.key || '';
+      refName.value = props.value.valueFrom?.[type.value]?.name;
       referenced.value = props.allSecrets.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -269,6 +274,10 @@ export default {
     extraColumn() {
       return ['resourceFieldRef', 'configMapKeyRef', 'secretKeyRef'].includes(this.type);
     },
+
+    hideVariableName() {
+      return this.options?.find((opt) => opt.value === this.type)?.hideVariableName || false;
+    }
   },
 };
 </script>
@@ -280,7 +289,7 @@ export default {
         v-model:value="type"
         :mode="mode"
         :multiple="false"
-        :options="typeOpts"
+        :options="options"
         option-label="label"
         :searchable="false"
         :reduce="e=>e.value"
@@ -289,7 +298,10 @@ export default {
       />
     </div>
 
-    <div class="name">
+    <div
+      v-if="!hideVariableName"
+      class="name"
+    >
       <LabeledInput
         v-model:value="name"
         :label="nameLabel"

package/components/formatter/FleetApplicationClustersReady.vue

@@ -0,0 +1,77 @@
+<script>
+
+export default {
+  name: 'FleetApplicationClustersReady',
+
+  components: {},
+
+  props: {
+    value: {
+      type:    Number,
+      default: 0
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    },
+  },
+
+  methods: {
+    parseTargetMode(row) {
+      return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.application.warningTooltip.clusterGroup') : this.t('fleet.application.warningTooltip.cluster');
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="!row.clusterInfo"
+    class="text-muted"
+  >&mdash;</span>
+  <span
+    v-else-if="row.clusterInfo.unready"
+    class="text-warning"
+  >{{ row.clusterInfo.ready }}/{{
+    row.clusterInfo.total }}</span>
+  <span
+    v-else
+    class="cluster-count-info"
+  >
+    {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
+    <i
+      v-if="!row.clusterInfo.total"
+      v-clean-tooltip.bottom="parseTargetMode(row)"
+      class="icon icon-warning"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.cluster-count-info {
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-left: 5px;
+    font-size: 22px;
+    color: var(--warning);
+  }
+}
+</style>

package/components/formatter/FleetApplicationSource.vue

@@ -0,0 +1,71 @@
+<script>
+import Link from '@shell/components/formatter/Link';
+import Shortened from '@shell/components/formatter/Shortened';
+
+export default {
+  name: 'FleetApplicationSource',
+
+  components: {
+    Link,
+    Shortened,
+  },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    }
+  },
+};
+</script>
+
+<template>
+  <template v-if="row.source.showLink">
+    <Link
+      class="source-link"
+      label-key="source.display"
+      before-icon-key="source.icon"
+      url-key="source.value"
+      :row="row"
+      :value="row.source.value || ''"
+    />
+    <template v-if="row.source.value && row.sourceSub.value">
+      <div class="text-muted">
+        <Shortened
+          long-value-key="sourceSub.value"
+          :row="row"
+          :value="row.sourceSub.display"
+        />
+      </div>
+    </template>
+  </template>
+  <span v-else>
+    {{ row.source.value }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.source-link {
+  width: fit-content;
+}
+</style>

package/components/formatter/FleetSummaryGraph.vue

@@ -119,4 +119,11 @@ export default {
   padding: 0;
   line-height: initial;
 }
+
+.hand {
+  .progress, .progress > .piece {
+    height: 6px;
+    border-right: 1px solid var(--body-bg);
+  }
+}
 </style>