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

package/components/FilterPanel.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { DefineComponent } from 'vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+/**
+ * Generic type for the passed components as props
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentType = DefineComponent<any, any, any>;
+
+/**
+ * A single filter option for a group (e.g., a single checkbox).
+ */
+type FilterOption = {
+  /** Value to apply when selected */
+  value?: string;
+  /** Optional custom component to render for this option (e.g., link or button) */
+  component?: ComponentType;
+  /** Props passed to the custom component */
+  componentProps?: Record<string, unknown>;
+  /** Label to show next to the checkbox, or a custom component next to the checkbox */
+  label?: string | { component: ComponentType; componentProps: Record<string, unknown>; };
+};
+
+/**
+ * A group of filter options (e.g., Repositories, Categories).
+ */
+type FilterGroup = {
+  /** Key that maps to the filters object (e.g., 'repos', 'categories') */
+  key: string;
+  /** Title for the filter group */
+  title: string;
+  /** The available options within this group */
+  options: FilterOption[];
+};
+
+/**
+ * Props accepted by the filter panel.
+ */
+const props = defineProps<{
+  /** Two-way bound filters */
+  modelValue: Record<string, string[]>;
+  /** The list of filter groups to display */
+  filters: FilterGroup[];
+}>();
+
+/**
+ * Event emitted by the component.
+ */
+const emit = defineEmits<{(e: 'update:modelValue', val: Record<string, string[]>): void;}>();
+
+/**
+ * Handles updating the selected filters for a given filter group key.
+ *
+ * @param key - The key of the filter group being updated (e.g., 'tags').
+ * @param value - The updated list of selected values (e.g. ['monitoring', 'networking']).
+ */
+const updateFilter = (key: string, value: string[]) => {
+  const newValue = { ...props.modelValue, [key]: value };
+
+  emit('update:modelValue', newValue);
+};
+
+</script>
+
+<template>
+  <div class="filter-panel">
+    <div
+      v-for="filter in filters"
+      :key="filter.key"
+      class="filter-panel-filter-group"
+      data-testid="filter-panel-filter-group"
+    >
+      <h4 class="filter-panel-filter-group-title">
+        {{ filter.title }}
+      </h4>
+      <div
+        v-for="(option, i) in filter.options"
+        :key="`${filter.key}-${i}`"
+        class="filter-panel-filter-option"
+      >
+        <template v-if="option.component">
+          <component
+            :is="option.component"
+            v-bind="option.componentProps"
+            data-testid="filter-panel-custom-component"
+          />
+        </template>
+        <template v-else-if="option.label">
+          <Checkbox
+            :key="i"
+            class="filter-panel-filter-checkbox"
+            :label="typeof option.label === 'string' ? option.label : undefined"
+            :value="modelValue[filter.key]"
+            :value-when-true="option.value"
+            data-testid="filter-panel-filter-checkbox"
+            @update:value="updateFilter(filter.key, $event)"
+          >
+            <template #label>
+              <span v-if="typeof option.label === 'string'">{{ option.label }}</span>
+              <component
+                :is="option.label.component"
+                v-else
+                v-bind="option.label.componentProps"
+              />
+            </template>
+          </Checkbox>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.filter-panel {
+  display: flex;
+  min-width: 250px;
+  height: max-content;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: var(--sortable-table-header-bg);
+
+  &-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+
+    &-title {
+      margin-bottom: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 23px;
+    }
+  }
+
+  &-filter-option {
+    width: 100%;
+
+    .filter-panel-filter-checkbox {
+
+      .checkbox-label span {
+        max-width: 200px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        color: var(--link-text-secondary);
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>

package/components/{fleet/ForceDirectedTreeChart/index.vue → ForceDirectedTreeChart.vue}

@@ -2,7 +2,6 @@
 import * as d3 from 'd3';
 import { STATES } from '@shell/plugins/dashboard-store/resource-class';
 import { BadgeState } from '@components/BadgeState';
-import { getChartIcon } from './chartIcons.js';
 
 export default {
   name:       'ForceDirectedTreeChart',
@@ -17,8 +16,24 @@ export default {
       required: true
     }
   },
+
+  async fetch() {
+    this.canViewChart = await this.fdcConfig.checkSchemaPermissions(this.$store);
+
+    if (this.canViewChart) {
+      // set watcher for the chart data
+      this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, (newValue) => {
+        this.watcherFunction(newValue);
+      }, {
+        deep:      true,
+        immediate: true
+      });
+    }
+  },
+
   data() {
     return {
+      canViewChart:                        null,
       dataWatcher:                         undefined,
       parsedInfo:                          undefined,
       root:                                undefined,
@@ -37,7 +52,7 @@ export default {
   },
   methods: {
     watcherFunction(newValue) {
-      if (newValue.length) {
+      if (newValue?.length) {
         if (!this.isChartFirstRendered) {
           this.parsedInfo = this.fdcConfig.parseData(this.data);
 
@@ -158,16 +173,11 @@ export default {
         .attr('r', this.setNodeRadius);
 
       nodeEnter.append('circle')
-        .attr('r', (d) => {
-          return this.setNodeRadius(d) - 5;
-        })
+        .attr('r', (d) => this.setNodeRadius(d) - 5)
         .attr('class', 'node-hover-layer');
 
-      nodeEnter.append('svg').html((d) => {
-        const icon = this.fdcConfig.fetchNodeIcon(d);
-
-        return getChartIcon(icon);
-      })
+      nodeEnter.append('svg')
+        .html((d) => this.fdcConfig.fetchNodeIcon(d))
         .attr('x', this.nodeImagePosition)
         .attr('y', this.nodeImagePosition)
         .attr('height', this.nodeImageSize)
@@ -177,9 +187,7 @@ export default {
 
       this.simulation.nodes(this.allNodesData);
       this.simulation.force('link', d3.forceLink()
-        .id((d) => {
-          return d.id;
-        })
+        .id((d) => d.id)
         .distance(100)
         .links(this.allLinks)
       );
@@ -188,10 +196,10 @@ export default {
       const lowerCaseStatus = d.data?.state ? d.data.state.toLowerCase() : 'unkown_status';
       const defaultClassArray = ['node'];
 
-      if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) {
-        defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`);
-      } else {
+      if (d?.data?.muteStatus) {
         defaultClassArray.push(`node-default-fill`);
+      } else if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) {
+        defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`);
       }
 
       // node active (clicked)
@@ -334,14 +342,6 @@ export default {
     this.svg = d3.select('#tree').append('svg')
       .attr('viewBox', `0 0 ${ this.fdcConfig.chartWidth } ${ this.fdcConfig.chartHeight }`)
       .attr('preserveAspectRatio', 'none');
-
-    // set watcher for the chart data
-    this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, function(newValue) {
-      this.watcherFunction(newValue);
-    }, {
-      deep:      true,
-      immediate: true
-    });
   },
   unmounted() {
     this.dataWatcher();
@@ -353,20 +353,26 @@ export default {
   <div>
     <div
       class="chart-container"
-      data-testid="gitrepo_graph"
+      data-testid="resource-graph"
     >
       <!-- loading status container -->
       <div
         v-if="!isChartFirstRenderAnimationFinished"
         class="loading-container"
       >
-        <p v-show="!isChartFirstRendered">
-          {{ t('fleet.fdc.loadingChart') }}
+        <p v-if="canViewChart === false">
+          {{ t('graph.noPermissions') }}
+        </p>
+        <p v-else-if="!isChartFirstRendered">
+          {{ t('graph.loading') }}
         </p>
-        <p v-show="isChartFirstRendered && !isChartFirstRenderAnimationFinished">
-          {{ t('fleet.fdc.renderingChart') }}
+        <p v-else-if="!isChartFirstRenderAnimationFinished">
+          {{ t('graph.rendering') }}
         </p>
-        <i class="mt-10 icon-spinner icon-spin" />
+        <i
+          v-if="canViewChart !== false"
+          class="mt-10 icon-spinner icon-spin"
+        />
       </div>
       <!-- main div for svg container -->
       <div id="tree" />
@@ -416,6 +422,9 @@ export default {
               >
                 <p>{{ item.value }}</p>
               </td>
+              <td v-else-if="item.type === 'resource-type'">
+                {{ t(`typeLabel."${ item.valueKey }"`, { count: 1 }) }}
+              </td>
               <!-- default template -->
               <td v-else>
                 {{ item.value }}
@@ -478,32 +487,29 @@ export default {
         }
       }
 
-      &.repo.active > circle {
-        transform: scale(1.2);
-      }
-
       &.bundle.active > circle {
         transform: scale(1.35);
       }
 
-      &.bundle-deployment.active > circle {
+      &.bundledeployment.active > circle {
         transform: scale(1.6);
       }
 
-      &.node-default-fill > circle,
-      &.repo > circle {
+      &.node-default-fill > circle {
+        transform: scale(1.2);
         fill: var(--muted);
       }
-      &:not(.repo).node-success > circle {
+
+      &.node-success > circle {
         fill: var(--success);
       }
-      &:not(.repo).node-info > circle {
+      &.node-info > circle {
         fill: var(--info);
       }
-      &:not(.repo).node-warning > circle {
+      &.node-warning > circle {
         fill: var(--warning);
       }
-      &:not(.repo).node-error > circle {
+      &.node-error > circle {
         fill: var(--error);
       }
 

package/components/IconOrSvg.vue

@@ -61,41 +61,16 @@ export default {
   },
 
   methods: {
+    getComputedStyleFor(cssVar) {
+      return normalizeHex(mapStandardColors((window.getComputedStyle(document.body).getPropertyValue(cssVar)).trim()));
+    },
+
     setColor() {
-      const currTheme = this.$store.getters['prefs/theme'];
-      let uiColor, hoverColor;
-
-      // grab css vars values based on the actual stylesheets, depending on the theme applied
-      // use for loops to minimize computation
-      for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
-        let found = false;
-        const stylesheet = document.styleSheets[i];
-
-        if (stylesheet && stylesheet.cssRules) {
-          for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
-            const cssRules = stylesheet.cssRules[x];
-
-            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
-              cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
-              (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
-              // grab the colors to be used on the icon from the css rules
-              uiColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].color).trim());
-              hoverColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].hover).trim());
-
-              // normalize hex colors (#xxx to #xxxxxx)
-              uiColor = normalizeHex(uiColor);
-              hoverColor = normalizeHex(hoverColor);
-
-              found = true;
-              break;
-            }
-          }
-        }
-        if (found) {
-          break;
-        } else {
-          continue;
-        }
+      const uiColor = this.getComputedStyleFor(colors[this.color].color);
+      const hoverColor = this.getComputedStyleFor(colors[this.color].hover);
+
+      if (!uiColor || !hoverColor) {
+        return;
       }
 
       const uiColorRGB = colorToRgb(uiColor);
@@ -142,7 +117,11 @@ export default {
           }
           a.option:hover > img.${ className } {
             ${ hoverFilter };
-          }      `;
+          }
+          a.option.active-menu-link > img.${ className } {
+            ${ hoverFilter };
+          }
+        `;
 
         const styleSheet = document.createElement('style');
 

package/components/PromptRemove.vue

@@ -43,6 +43,7 @@ export default {
       chartsToRemoveIsApp: false,
       chartsDeleteCrd:     false,
       showModal:           false,
+      cachedDoneLocation:  null
     };
   },
   computed: {
@@ -220,6 +221,7 @@ export default {
       this.error = '';
       this.chartsDeleteCrd = false;
       this.chartsToRemoveIsApp = false;
+      this.cachedDoneLocation = null;
       this.$store.commit('action-menu/togglePromptRemove');
     },
 
@@ -227,6 +229,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) {
@@ -294,7 +298,7 @@ export default {
       }
     },
     done() {
-      if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
+      if (!isEmpty(this.cachedDoneLocation) && this.currentRouter) {
         this.currentRouter.push(this.cachedDoneLocation);
       }
       this.close();

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;
+};