@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/components/Resource/Detail/Card/StateCard/composables.ts

@@ -1,11 +1,26 @@
 import { Count, Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.types';
-import { useI18n } from '@shell/composables/useI18n';
-import { INGRESS, SERVICE } from '@shell/config/types';
 import { isHigherAlert, StateColor } from '@shell/utils/style';
-import { computed, Ref, toValue } from 'vue';
-import { useStore } from 'vuex';
-import { Props as StateCardProps } from '@shell/components/Resource/Detail/Card/StateCard/types';
 import { RouteLocationRaw } from 'vue-router';
+import { simpleColorForState, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+
+interface Tuple extends Count {
+  color: StateColor;
+}
+
+export interface SummaryCountValue {
+  total: number;
+  namespace?: Record<string, number>;
+}
+
+export interface SummaryEntry {
+  property: string;
+  counts: Record<string, SummaryCountValue>;
+}
+
+export interface SummaryResult {
+  count: number;
+  summary: SummaryEntry[] | null;
+}
 
 export function useResourceCardRow(label: string, resources: any[], stateColorKey = 'stateSimpleColor', stateDisplayKey = 'stateDisplay', to?: RouteLocationRaw): ResourceRowProps {
   const agg: any = {};
@@ -20,12 +35,9 @@ export function useResourceCardRow(label: string, resources: any[], stateColorKe
     agg[state].count++;
   });
 
-  interface Tuple extends Count {
-    color: StateColor;
-  }
   const tuples: Tuple[] = Object.values(agg);
 
-  tuples.sort((left: any, right: any) => {
+  tuples.sort((left: Tuple, right: Tuple) => {
     if (isHigherAlert(left.color, right.color)) {
       return -1;
     }
@@ -49,94 +61,52 @@ export function useResourceCardRow(label: string, resources: any[], stateColorKe
   };
 }
 
-export interface Pairs {
-    label: string;
-    to?: RouteLocationRaw;
-    resources: any[];
-}
-
-export function useDefaultResources(pairs: Ref<Pairs[]>) {
-  const pairsValue = toValue(pairs);
-  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, undefined, undefined, to)));
-
-  return rows;
-}
-
-export function useResourcePair(label: string, type: string, resources?: any[]) {
-  const store = useStore();
+/**
+ * Builds a ResourceRowProps from relationship state data.
+ * Each relationship entry includes a `state` field (e.g. "active", "error").
+ */
+export function useResourceCardRowFromRelationships(label: string, relationships: any[], to?: RouteLocationRaw): ResourceRowProps {
+  if (!relationships.length) {
+    return {
+      label, color: undefined, counts: undefined, to
+    };
+  }
 
-  return computed(() => {
-    if (!resources) {
-      return undefined;
-    }
+  const agg: Record<string, { color: StateColor; label: string; count: number }> = {};
 
-    const resourcesValue = toValue(resources);
+  relationships.forEach((r: any) => {
+    const state = (r.state || 'missing').toLowerCase();
+    const color = simpleColorForState(state) as StateColor;
+    const display = (stateDisplayFn(state) as string)?.toLowerCase() || state;
 
-    return {
-      label,
-      resources: resourcesValue,
-      to:        (resourcesValue?.length > 0) ? {
-        name:   'c-cluster-product-resource',
-        params: {
-          cluster:  store.getters.currentCluster.id,
-          product:  store.getters.currentProduct.name,
-          resource: type
-        }
-      } : undefined,
+    agg[state] = agg[state] || {
+      color, label: display, count: 0
     };
+    agg[state].count++;
   });
-}
 
-export function useDefaultWorkloadResources(services?: any[], ingresses?: any[], referredToBy?: any[], refersTo?: any[]): StateCardProps {
-  const store = useStore();
-  const i18n = useI18n(store);
-
-  const pairs: Ref<(Pairs | undefined)[]> = computed(() => [
-    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.services'), SERVICE, services).value,
-    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.ingresses'), INGRESS, ingresses).value,
-    referredToBy ? {
-      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.referredToBy'),
-      resources: toValue(referredToBy || []),
-      to:        { hash: '#related' }
-    } : undefined,
-    refersTo ? {
-      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.refersTo'),
-      resources: toValue(refersTo || []),
-      to:        { hash: '#related' }
-    } : undefined
-  ]);
-
-  const remainingPairs = computed(() => pairs.value.filter((p: (Pairs | undefined)): p is Pairs => p !== undefined));
-
-  const rows = useDefaultResources(remainingPairs);
+  const tuples: Tuple[] = Object.values(agg);
 
-  return {
-    title: 'Resources',
-    rows:  rows.value
-  };
-}
+  tuples.sort((left: Tuple, right: Tuple) => {
+    if (isHigherAlert(left.color, right.color)) {
+      return -1;
+    }
 
-export function useDefaultWorkloadInsightsCardProps(): StateCardProps {
-  const store = useStore();
-  const i18n = useI18n(store);
-
-  const rows: ResourceRowProps[] = [
-    {
-      label:  i18n.t('component.resource.detail.card.insightsCard.rows.conditions'),
-      to:     '#conditions',
-      color:  'disabled',
-      counts: [{ label: 'Available', count: 1 }, { label: 'Progressing', count: 1 }]
-    },
-    {
-      label:  i18n.t('component.resource.detail.card.insightsCard.rows.events'),
-      to:     '#events',
-      color:  'disabled',
-      counts: [{ label: 'Normal', count: 2 }]
+    if (left.color !== right.color) {
+      return 1;
     }
-  ];
+
+    if (left.count === right.count) {
+      return 0;
+    }
+
+    return left.count > right.count ? -1 : 1;
+  });
 
   return {
-    title: i18n.t('component.resource.detail.card.insightsCard.title'),
-    rows
+    label,
+    color:  tuples.length ? tuples[0].color : undefined,
+    counts: tuples.length ? tuples : undefined,
+    to
   };
 }

package/components/Resource/Detail/Card/StatusCard/__tests__/StatusCard.test.ts

@@ -3,6 +3,7 @@ import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.
 import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
 import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
 import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('component: StatusCard', () => {
   const mockResource = (stateDisplay: string, stateSimpleColor: string) => ({
@@ -106,4 +107,64 @@ describe('component: StatusCard', () => {
       expect(wrapper.findComponent(Scaler).exists()).toBe(false);
     });
   });
+
+  describe('with summaryData', () => {
+    it('should render StatusBar and StatusRows from summary counts', () => {
+      const summaryData: SummaryResult = {
+        count:   5,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, error: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(true);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should use summaryData over resources when both are provided', () => {
+      const summaryData: SummaryResult = {
+        count:   4,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, completed: { total: 1 } } }]
+      };
+      const resources = [
+        mockResource('Running', 'text-success'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should fall back to resources when summaryData has no summary', () => {
+      const summaryData: SummaryResult = { count: 0, summary: null };
+      const resources = [
+        mockResource('Running', 'text-success'),
+        mockResource('Error', 'text-error'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should show noResourcesMessage when summaryData has no counts', () => {
+      const summaryData: SummaryResult = { count: 0, summary: [] };
+
+      const wrapper = mountCard({ summaryData, noResourcesMessage: 'No pods' });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(false);
+      expect(wrapper.find('.text-deemphasized').text()).toBe('No pods');
+    });
+
+    it('should render a single state from summary', () => {
+      const summaryData: SummaryResult = {
+        count:   2,
+        summary: [{ property: 'metadata.state.name', counts: { active: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(1);
+    });
+  });
 });

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

@@ -8,10 +8,13 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { colorForState as colorForStateFn, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export interface Props {
   title: string;
   resources?: any[];
+  summaryData?: SummaryResult | null;
   showScaling?: boolean;
   noResourcesMessage?: string;
 }
@@ -23,23 +26,47 @@ const i18n = useI18n(store);
 
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
+  summaryData:        undefined,
   showScaling:        false,
   noResourcesMessage: undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
+const summaryStateCounts = computed(() => {
+  const summary = props.summaryData?.summary;
+
+  if (!summary?.length) {
+    return null;
+  }
+
+  const entry = summary.find((s) => s.property === 'metadata.state.name');
+
+  return entry?.counts || null;
+});
+
 const segmentAccumulator = computed(() => {
   interface Value {
     count: number;
   }
   const accumulator: {[key in StateColor]?: Value} = {};
-
-  props.resources?.forEach((resource: any) => {
-    const color: StateColor = resource.stateSimpleColor;
-
-    accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count++;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color: StateColor = resource.stateSimpleColor || 'disabled';
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count++;
+    });
+  }
 
   return accumulator;
 });
@@ -50,21 +77,40 @@ const rowAccumulator = computed(() => {
     color: StateColor;
   }
   const accumulator: {[key in string]: Value} = {};
-
-  props.resources?.forEach((resource: any) => {
-    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
-    accumulator[resource.stateDisplay].count++;
-    accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const display = stateDisplayFn(state) as string;
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[display] = accumulator[display] || { count: 0, color };
+      accumulator[display].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color = (resource.stateSimpleColor?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, color };
+      accumulator[resource.stateDisplay].count++;
+    });
+  }
 
   return accumulator;
 });
 
 const percent = (count: number, total: number) => {
-  return count / total * 100;
+  return total > 0 ? count / total * 100 : 0;
 };
 
-const count = computed(() => props.resources?.length || 0);
+const count = computed(() => {
+  if (summaryStateCounts.value) {
+    return props.summaryData?.count ?? 0;
+  }
+
+  return props.resources?.length ?? 0;
+});
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -103,6 +103,8 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
+      display: flex;
+      align-items: center;
       gap: 8px;
 
       // Hide clearfix pseudo-elements inherited from the global .row class

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -110,9 +110,12 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     }
 
     .row {
-        display: block;
-        width: 100%;
         display: inline-block;
+        width: 100%;
+
+        &::before, &::after {
+            display: none;
+        }
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -92,18 +92,14 @@ const previewId = randomStr();
     max-width: calc(100%);
   }
 
-  .rc-tag {
-    display: inline-block;
-    line-height: normal;
-  }
-
   .tag-data {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0;
     max-width: calc(100%);
-    line-height: normal;
+    line-height: 1;
   }
 
   & .btn.btn-medium.rc-button.variant-ghost {

package/components/ResourceDetail/index.vue

@@ -169,7 +169,7 @@ export default {
     } else {
       let fqid = id;
 
-      if ( schema.attributes?.namespaced && namespace ) {
+      if ( schema?.attributes?.namespaced && namespace ) {
         fqid = `${ namespace }/${ fqid }`;
       }
 

package/components/ResourceList/Masthead.vue

@@ -74,6 +74,11 @@ export default {
       default: false
     },
 
+    showFavorite: {
+      type:    Boolean,
+      default: true
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -202,7 +207,7 @@ export default {
     <div class="title">
       <h1 class="m-0">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
-          v-if="isExplorer"
+          v-if="isExplorer && showFavorite"
           :resource="favoriteResource || resource"
         />
       </h1>
@@ -267,6 +272,7 @@ export default {
       'title actions'
       'sub-header sub-header'
       'state-banner state-banner';
+    margin-bottom: 24px;
   }
 
   .sub-header {

package/components/ResourceList/index.vue

@@ -10,6 +10,9 @@ import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
 import perfSettingsUtils from '@shell/utils/perf-setting.utils';
+import { BadgeState } from '@components/BadgeState';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { useStateColor } from '@shell/composables/useStateColor';
 
 export default {
   name: ResourceListComponentName,
@@ -20,10 +23,17 @@ export default {
     Masthead,
     ResourceLoadingIndicator,
     IconMessage,
-    ExtensionPanel
+    ExtensionPanel,
+    BadgeState,
   },
   mixins: [ResourceFetch],
 
+  setup() {
+    const { toStateColor } = useStateColor();
+
+    return { toStateColor };
+  },
+
   props: {
     hasAdvancedFiltering: {
       type:    Boolean,
@@ -155,6 +165,41 @@ export default {
       return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
 
+    activeStateFilters() {
+      const raw = this.$route?.query?.stateFilter;
+
+      if (!raw) {
+        return [];
+      }
+
+      const states = raw.split(',').filter(Boolean);
+
+      return states.map((s) => {
+        const match = this.rows.find((row) => row.metadata?.state?.name === s);
+
+        if (match) {
+          return {
+            label: match.stateDisplay,
+            color: match.stateBackground,
+          };
+        }
+
+        return {
+          label: stateDisplay(s, true),
+          color: `bg-${ this.toStateColor(s, this.resource) }`,
+        };
+      });
+    },
+
+  },
+
+  methods: {
+    clearStateFilter() {
+      const query = { ...this.$route.query };
+
+      delete query.stateFilter;
+      this.$router.push({ ...this.$route, query });
+    },
   },
 
   watch: {
@@ -260,6 +305,28 @@ export default {
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
     >
+      <template
+        v-if="activeStateFilters.length"
+        #subHeader
+      >
+        <div class="state-filter-bar text-muted">
+          {{ t('resourceList.stateFilterApplied') }}
+          <BadgeState
+            v-for="state in activeStateFilters"
+            :key="state.label"
+            :color="state.color"
+            :label="state.label"
+            class="badge-state-font-size"
+          />
+          <span>.</span>
+          <a
+            role="button"
+            @click="clearStateFilter"
+          >
+            {{ t('resourceList.clearStateFilter') }}
+          </a>
+        </div>
+      </template>
       <template #extraActions>
         <slot name="extraActions" />
       </template>
@@ -317,4 +384,18 @@ export default {
       top: 10px;
       right: 10px;
     }
+
+    .state-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .badge-state-font-size {
+      font-size: .85em;
+    }
 </style>

package/components/RichTranslation.vue

@@ -74,8 +74,11 @@ export default defineComponent({
           const content = enclosingTagName ? match[2] : '';
 
           if (slots[tagName]) {
-            // If a slot is provided for this tag, render the slot with the content.
-            children.push(slots[tagName]({ content: purifyHTML(content) }));
+            const slotContent = slots[tagName]({ content: purifyHTML(content) });
+
+            if (slotContent) {
+              children.push(...slotContent);
+            }
           } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
             // If it's an allowed HTML tag, render it directly.
             if (content) {

package/components/Setting.vue

@@ -29,6 +29,7 @@ export default {
           <span
             v-if="value.fromEnv"
             class="modified"
+            :data-testid="`advanced-setting-env-label-${value.id}`"
           >{{ t('advancedSettings.setEnv') }}</span>
           <span
             v-else-if="value.customized"

package/components/SubtleLink.vue

@@ -1,25 +1,50 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RouterLink, RouteLocationRaw } from 'vue-router';
 
 export interface Props {
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
+  href?: string;
+  target?: string;
+  openInNewTabLabel?: string;
 }
 
-const { to } = defineProps<Props>();
+const props = defineProps<Props>();
+
+const isExternal = computed(() => !!props.href);
 </script>
 
 <template>
-  <RouterLink
+  <component
+    :is="isExternal ? 'a' : RouterLink"
     class="subtle-link"
-    :to="to"
+    v-bind="isExternal
+      ? { href, target, rel: target === '_blank' ? 'noopener noreferrer nofollow' : undefined }
+      : { to }"
   >
-    <slot name="default" />
-  </RouterLink>
+    <span
+      v-if="openInNewTabLabel"
+      class="sr-only"
+    >{{ openInNewTabLabel }}</span>
+    <slot name="default" /><span v-if="openInNewTabLabel">&nbsp;</span><i
+      v-if="openInNewTabLabel"
+      class="link-icon icon icon-external-link"
+    />
+  </component>
 </template>
 
 <style lang="scss" scoped>
 .subtle-link {
     text-decoration: underline;
     color: var(--body-text);
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+}
+
+.link-icon {
+  display: inline;
 }
 </style>