dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/PromptRemove.vue

@@ -44,6 +44,7 @@ export default {
       chartsToRemoveIsApp: false,
       chartsDeleteCrd:     false,
       showModal:           false,
+      cachedDoneLocation:  null
     };
   },
   computed: {
@@ -222,6 +223,7 @@ export default {
       this.error = '';
       this.chartsDeleteCrd = false;
       this.chartsToRemoveIsApp = false;
+      this.cachedDoneLocation = null;
       this.$store.commit('action-menu/togglePromptRemove');
     },
 
@@ -229,6 +231,8 @@ export default {
       if (this.doneLocation) {
         // doneLocation will recompute to undefined when delete request completes
         this.cachedDoneLocation = { ...this.doneLocation };
+      } else {
+        this.cachedDoneLocation = null;
       }
 
       if (this.hasCustomRemove && this.$refs?.customPrompt?.remove) {
@@ -296,7 +300,7 @@ export default {
       }
     },
     done() {
-      if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
+      if (!isEmpty(this.cachedDoneLocation) && this.currentRouter) {
         this.currentRouter.push(this.cachedDoneLocation);
       }
       this.close();
@@ -386,7 +390,7 @@ export default {
             class="mt-10"
           >
             <span
-              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
             />
           </div>
         </div>
@@ -460,8 +464,8 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 90%;
-      margin-left: 3px;
+      width: 100%;
+      // margin-left: 3px;
     }
 
     .actions {

package/components/PromptRestore.vue

@@ -7,7 +7,7 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -47,14 +47,13 @@ export default {
   },
 
   computed: {
-    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
+    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
 
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
-      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -79,9 +78,7 @@ export default {
       }
     },
     restoreModeOptions() {
-      const etcdOption = this.isRke2 ? 'none' : 'etcd';
-
-      return [etcdOption, 'kubernetesVersion', 'all'];
+      return ['none', 'kubernetesVersion', 'all'];
     }
   },
 
@@ -112,20 +109,12 @@ export default {
       }
 
       const cluster = this.toRestore?.[0];
-      let promise;
-
-      if (!cluster?.isRke2) {
-        promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
-          return snapshots.filter((s) => s.state === STATES_ENUM.ACTIVE && s.clusterId === cluster.metadata.name);
-        });
-      } else {
-        promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
-          const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
+      const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
+        const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
-          );
-        });
-      }
+        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        );
+      });
 
       // Map of snapshots by name
       const allSnapshots = await promise.then((snapshots) => {
@@ -154,30 +143,19 @@ export default {
 
     async apply(buttonDone) {
       try {
-        if ( this.isRke2 ) {
-          const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
-
-          await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
-
-          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:       now + 1,
-            name:             this.snapshot.name,
-            restoreRKEConfig: this.restoreMode,
-          });
-
-          await cluster.save();
-        } else {
-          await this.$store.dispatch('rancher/request', {
-            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method: 'post',
-            data:   {
-              etcdBackupId:     this.snapshot.id,
-              restoreRkeConfig: this.restoreMode,
-            },
-          });
-        }
+        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+          generation:       now + 1,
+          name:             this.snapshot.name,
+          restoreRKEConfig: this.restoreMode,
+        });
+
+        await cluster.save();
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),

package/components/RelatedResources.vue

@@ -1,6 +1,6 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { STATES_ENUM, colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME, NAMESPACE, STATE, TYPE } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
@@ -70,9 +70,9 @@ export default {
       const out = [];
 
       for ( const r of this.filteredRelationships) {
-        const state = r.state || 'active';
-        const stateColor = colorForState(state, r.error, r.transitioning);
         const type = r[`${ this.direction }Type`];
+        const state = r.state || this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`])?.state || STATES_ENUM.MISSING;
+        const stateColor = colorForState(state, r.error, r.transitioning);
         const schema = this.$store.getters[`${ inStore }/schemaFor`](type);
 
         let name = r[`${ this.direction }Id`];
@@ -104,7 +104,6 @@ export default {
 
         out.push({
           type,
-          real:     this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`]),
           id:       r[`${ this.direction }Id`],
           state,
           metadata: { namespace, name },
@@ -174,14 +173,10 @@ export default {
     :groupable="false"
   >
     <template #cell:state="{row}">
-      <BadgeState
-        v-if="row.real"
-        :value="row.real"
-      />
-      <BadgeState
-        v-else
-        :value="row"
-      />
+      <BadgeState :value="row" />
+    </template>
+    <template #cell:name="{row}">
+      <span>{{ row.name }}</span>
     </template>
   </ResourceTable>
 </template>

package/components/Resource/Detail/Additional.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  items: string[];
+}
+</script>
+
+<script setup lang="ts">
+
+const { items } = defineProps<Props>();
+
+const first = computed(() => items[0]);
+const tooltipValue = computed(() => {
+  let rows = '';
+
+  items.forEach((item) => {
+    rows += `&#8226; ${ item }<br>`;
+  });
+
+  return rows;
+});
+</script>
+
+<template>
+  <div class="additional">
+    <div class="initial">
+      {{ first }}
+    </div>
+    <div
+      v-if="items.length > 1"
+      v-clean-tooltip.bottom="tooltipValue"
+      class="more text-muted"
+    >
+      {{ t('generic.plusMore', {n: items.length-1}) }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.more {
+  margin-top: 4px;
+  cursor: help;
+  font-size: 0.8em;
+}
+</style>

package/components/Resource/Detail/Card/PodsCard/Bubble.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="bubble">
+    <slot name="default" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.bubble {
+    border-radius: 40%;
+    background-color: var(--bubble-bg);
+    padding: 2px 6px;
+}
+</style>

package/components/Resource/Detail/Card/PodsCard/composable.ts

@@ -0,0 +1,30 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { toValue } from 'vue';
+import { useStore } from 'vuex';
+
+export type ScaleFn = () => Promise<void>;
+export const useScaling = (workloadName: string, scaleUpFn: ScaleFn, scaleDownFn: ScaleFn) => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const scale = (scaleFn: () => Promise<void>, workloadName: string, direction: 'up' | 'down') => {
+    return async() => {
+      try {
+        await scaleFn();
+      } catch (err) {
+        store.dispatch('growl/fromError', {
+          title: i18n.t('workload.list.errorCannotScale', { workloadName, direction }),
+          err
+        },
+        { root: true });
+      }
+    };
+  };
+
+  const workloadNameValue = toValue(workloadName);
+
+  return {
+    scaleUp:   scale(() => scaleUpFn(), workloadNameValue, 'up'),
+    scaleDown: scale(() => scaleDownFn(), workloadNameValue, 'down')
+  };
+};

package/components/Resource/Detail/Card/PodsCard/index.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { StateColor } from '@shell/utils/style';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+  pods?: any[];
+  showScaling?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = withDefaults(defineProps<Props>(), { pods: undefined, showScaling: false });
+const emit = defineEmits(['decrease', 'increase']);
+
+const segmentAccumulator = computed(() => {
+  interface Value {
+    count: number;
+  }
+  const accumulator: {[key in StateColor]?: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    const color: StateColor = pod.stateSimpleColor;
+
+    accumulator[color] = accumulator[color] || { count: 0 };
+    accumulator[color].count++;
+  });
+
+  return accumulator;
+});
+
+const rowAccumulator = computed(() => {
+  interface Value {
+    count: number;
+    color: StateColor;
+  }
+  const accumulator: {[key in string]: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    accumulator[pod.stateDisplay] = accumulator[pod.stateDisplay] || { count: 0 };
+    accumulator[pod.stateDisplay].count++;
+    accumulator[pod.stateDisplay].color = pod.stateSimpleColor.replace('text-', '') as StateColor;
+  });
+
+  return accumulator;
+});
+
+const percent = (count: number, total: number) => {
+  return count / total * 100;
+};
+
+const count = computed(() => props.pods?.length || 0);
+
+const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
+const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
+  color,
+  percent: percent(segmentAccumulator.value[color]?.count || 0, count.value)
+})));
+
+const rowStates = computed(() => {
+  return Object.keys(rowAccumulator.value);
+});
+
+const rows = computed(() => {
+  return rowStates.value.map((state) => ({
+    color:   rowAccumulator.value[state].color,
+    label:   state,
+    count:   rowAccumulator.value[state].count,
+    percent: percent(rowAccumulator.value[state].count, count.value)
+  }));
+});
+
+</script>
+
+<template>
+  <Card :title="i18n.t('component.resource.detail.card.podsCard.title')">
+    <template
+      v-if="props.showScaling"
+      #heading-action
+    >
+      <Scaler
+        :ariaResourceName="i18n.t('component.resource.detail.card.podsCard.ariaResourceName')"
+        :value="count"
+        :min="0"
+        @increase="(newValue) => emit('increase', newValue)"
+        @decrease="(newValue) => emit('decrease', newValue)"
+      />
+    </template>
+    <StatusBar :segments="segments" />
+    <VerticalGap />
+    <div class="pod-distribution">
+      <StatusRow
+        v-for="(row, i) in rows"
+        :key="i"
+        :color="row.color"
+        :label="row.label"
+        :count="row.count"
+        :percent="row.percent"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.pod-distribution {
+    display: flex;
+    flex-direction: column;
+}
+</style>

package/components/Resource/Detail/Card/ResourceUsageCard/composable.ts

@@ -0,0 +1,51 @@
+import { Props } from '@shell/components/Resource/Detail/Card/ResourceUsageCard/index.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export const useCpuUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:     i18n.t('component.resource.detail.card.resourceUsage.cpu'),
+      used:      1.20,
+      available: 1.93
+    };
+  }).value;
+};
+
+export const useMemoryUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:              i18n.t('component.resource.detail.card.resourceUsage.memory'),
+      used:               870,
+      available:          3290,
+      availableFormatter: (n: number) => (n / 1000).toFixed(2),
+      unit:               'GiB',
+    };
+  }).value;
+};
+
+export const usePodUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:     i18n.t('component.resource.detail.card.resourceUsage.pods'),
+      used:      9,
+      available: 17
+    };
+  }).value;
+};

package/components/Resource/Detail/Card/ResourceUsageCard/index.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import PercentageBar from '@shell/components/Resource/Detail/PercentageBar.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+    title: string;
+    unit?: string;
+    used: number;
+    usedFormatter?: (n: number) => string;
+    available: number;
+    availableFormatter?: (n: number) => string
+}
+</script>
+<script setup lang="ts">
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    usedFormatter:      (n: number) => n.toString(),
+    availableFormatter: (n: number) => n.toString(),
+    unit:               undefined
+  }
+);
+
+const percentage = computed(() => {
+  const numerator = props.used || 0;
+  const denominator = props.available || 0;
+
+  return denominator === 0 ? 0 : Math.floor((numerator / denominator) * 100);
+});
+
+const used = computed(() => props.usedFormatter(props.used));
+const available = computed(() => props.availableFormatter(props.available));
+</script>
+
+<template>
+  <Card :title="props.title">
+    <div class="numerical">
+      <div class="used">
+        {{ i18n.t('component.resource.detail.card.resourceUsage.used') }}
+      </div>
+      <div class="data">
+        <span class="amount">{{ i18n.t('component.resource.detail.card.resourceUsage.amount', {used, available}) }}</span>
+        <span
+          v-if="props.unit"
+          class="unit"
+        >
+          {{ props.unit }}
+        </span>
+        <span class="spacer">/</span>
+        <span class="percentage">{{ percentage }}%</span>
+      </div>
+    </div>
+    <PercentageBar :percent="percentage" />
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.numerical {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-bottom: 8px;
+
+  .spacer {
+    margin: 0 8px;
+  }
+
+  .percentage {
+    font-weight: bold;
+  }
+}
+</style>

package/components/Resource/Detail/Card/Scaler.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface Props {
+  ariaResourceName: string;
+  value?: number;
+  min?: number;
+  max?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0, min: undefined, max: undefined
+});
+const emit = defineEmits(['decrease', 'increase']);
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <div class="scaler">
+    <button
+      class="decrease"
+      :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.decrease', {resourceName: props.ariaResourceName})"
+      :disabled="!!props.min && (props.value <= props.min)"
+      @click="() => emit('decrease', props.value - 1)"
+    >
+      <i class="icon icon-sm icon-minus" />
+    </button>
+    <div class="value">
+      {{ props.value }}
+    </div>
+    <button
+      class="increase"
+      :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.increase', {resourceName: props.ariaResourceName})"
+      :disabled="!!props.max && (props.value >= props.max)"
+      @click="() => emit('increase', props.value + 1)"
+    >
+      <i class="icon icon-sm icon-plus" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.scaler {
+  display: inline-flex;
+  align-items: center;
+  background-color: hsl(from var(--primary) h s calc(l + 30));
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--primary);
+  overflow: hidden;
+
+  button {
+    all: initial;
+    cursor: pointer;
+    background: none;
+    height: 100%;
+    width: 32px;
+    height: 32px;
+
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--primary);
+
+    i.icon {
+      font-size: 0.6em;
+    }
+
+    &:hover {
+      background-color: hsl(from var(--primary) h s calc(l + 20));
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      background: var(--disabled-bg);
+      color: var(--disabled-text);
+    }
+  }
+
+  .value {
+    color: initial;
+    cursor: default;
+    padding: 4px;
+    padding-top: 5px;
+  }
+}
+</style>