From 61c31a61b4227f5848c313cd3d9bac8359cb02ec Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 6 May 2025 10:59:46 +0200
Subject: [PATCH] Fleet Add source field in Dashboard Resource detail panel;
 Add no target clusters warning in Dashboard cards

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 shell/assets/translations/en-us.yaml          |  3 +-
 shell/components/fleet/FleetRepos.vue         | 25 +-------
 .../fleet/dashboard/ResourceCardSummary.vue   | 45 +++++++++-----
 .../fleet/dashboard/ResourceDetails.vue       | 24 ++++++--
 shell/components/formatter/FleetRepo.vue      | 60 +++++++++++++++++++
 shell/config/table-headers.js                 | 11 ++--
 6 files changed, 121 insertions(+), 47 deletions(-)
 create mode 100644 shell/components/formatter/FleetRepo.vue

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index e69b78d1f2..1d4f47cb35 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -2512,8 +2512,9 @@ fleet:
           =1 { cluster }
           other { clusters }
           }
-
+      noClusters: The { type } is not targeting any clusters
     resources: Resources
+    source: Source
   cluster:
     summary: Resource Summary
     nonReady: Non-Ready Bundles
diff --git a/shell/components/fleet/FleetRepos.vue b/shell/components/fleet/FleetRepos.vue
index 4ce9a8d127..b78f2c8248 100644
--- a/shell/components/fleet/FleetRepos.vue
+++ b/shell/components/fleet/FleetRepos.vue
@@ -1,7 +1,5 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Link from '@shell/components/formatter/Link';
-import Shortened from '@shell/components/formatter/Shortened';
 import FleetIntro from '@shell/components/fleet/FleetIntro';
 
 import {
@@ -22,7 +20,8 @@ export default {
   name: 'FleetRepos',
 
   components: {
-    ResourceTable, Link, Shortened, FleetIntro
+    FleetIntro,
+    ResourceTable,
   },
   props: {
     clusterId: {
@@ -117,26 +116,6 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       key-field="_key"
     >
-      <template #cell:repo="{ row }">
-        <Link
-          :row="row"
-          :value="row.spec.repo || ''"
-          label-key="repoDisplay"
-          before-icon-key="repoIcon"
-          url-key="spec.repo"
-        />
-        {{ row.cluster }}
-        <template v-if="row.commitDisplay">
-          <div class="text-muted">
-            <Shortened
-              long-value-key="status.commit"
-              :row="row"
-              :value="row.commitDisplay"
-            />
-          </div>
-        </template>
-      </template>
-
       <template
         v-if="!isClusterView"
         #cell:clustersReady="{ row }"
diff --git a/shell/components/fleet/dashboard/ResourceCardSummary.vue b/shell/components/fleet/dashboard/ResourceCardSummary.vue
index 07bc6e1c4b..1694a9fa9c 100644
--- a/shell/components/fleet/dashboard/ResourceCardSummary.vue
+++ b/shell/components/fleet/dashboard/ResourceCardSummary.vue
@@ -21,6 +21,10 @@ export default {
     },
   },
 
+  data() {
+    return { typeLabel: this.t(`typeLabel."${ this.value.type }"`, { count: 1 }) };
+  },
+
   computed: {
     counts() {
       return this.value.status?.resourceCounts || {};
@@ -60,6 +64,13 @@ export default {
       return sortBy(out, 'sort:desc');
     },
 
+    noClustersWarning() {
+      if (!this.value.status?.desiredReadyClusters) {
+        return this.t('fleet.dashboard.cards.noClusters', { type: this.typeLabel });
+      }
+
+      return null;
+    },
   },
 };
 </script>
@@ -86,20 +97,26 @@ export default {
         v-else
         class="description"
       >
-        <i
-          v-if="statePanel.id !== 'success'"
-          class="icon-lg"
-          :class="statePanel.icon"
-          :style="{ color: statePanel.color }"
-        />
-        <div class="label">
-          <span class="large">{{ summary.partial }}</span>
-          <span v-if="summary.partial !== summary.total && summary.total !== 0">/{{ summary.total }}</span>
-          &nbsp;
-          <span>{{ t('fleet.dashboard.cards.resourceSummary.part1') }}</span>
-          <span class="large">{{ summary.clusters }}</span>
-          <span>{{ t('fleet.dashboard.cards.resourceSummary.part2', { count: summary.clusters }) }}</span>
-        </div>
+        <template v-if="noClustersWarning">
+          <i class="icon icon-lg icon-warning text-warning" />
+          <span>{{ noClustersWarning }}</span>
+        </template>
+        <template v-else>
+          <i
+            v-if="statePanel.id !== 'success'"
+            class="icon-lg"
+            :class="statePanel.icon"
+            :style="{ color: statePanel.color }"
+          />
+          <div class="label">
+            <span class="large">{{ summary.partial }}</span>
+            <span v-if="summary.partial !== summary.total && summary.total !== 0">/{{ summary.total }}</span>
+            &nbsp;
+            <span>{{ t('fleet.dashboard.cards.resourceSummary.part1') }}</span>
+            <span class="large">{{ summary.clusters }}</span>
+            <span>{{ t('fleet.dashboard.cards.resourceSummary.part2', { count: summary.clusters }) }}</span>
+          </div>
+        </template>
       </div>
     </div>
   </div>
diff --git a/shell/components/fleet/dashboard/ResourceDetails.vue b/shell/components/fleet/dashboard/ResourceDetails.vue
index 377e25c82b..c442fc5940 100644
--- a/shell/components/fleet/dashboard/ResourceDetails.vue
+++ b/shell/components/fleet/dashboard/ResourceDetails.vue
@@ -1,13 +1,16 @@
 <script>
+import { FLEET } from '@shell/config/types';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import FleetResources from '@shell/components/fleet/FleetResources';
+import FleetRepo from '@shell/components/formatter/FleetRepo.vue';
 
 export default {
   name: 'FleetDashboardResourceDetails',
 
   components: {
-    FleetResources,
-    LabeledSelect
+    LabeledSelect,
+    FleetRepo,
+    FleetResources
   },
 
   props: {
@@ -28,7 +31,10 @@ export default {
   },
 
   data() {
-    return { cluster: null };
+    return {
+      FLEET,
+      cluster: null
+    };
   },
 
   mounted() {
@@ -64,7 +70,7 @@ export default {
         <router-link
           :to="value.detailLocation"
         >
-          {{ value.nameDisplay }}
+          {{ value.id }}
         </router-link>
         <i
           v-if="statePanel.id !== 'success'"
@@ -81,6 +87,16 @@ export default {
         @click="closePanel"
       />
     </div>
+
+    <template v-if="value.type === FLEET.GIT_REPO">
+      <h3>
+        {{ t('fleet.dashboard.source') }}
+      </h3>
+      <div class="mb-15">
+        <FleetRepo :row="value" />
+      </div>
+    </template>
+
     <h3>
       {{ t('fleet.dashboard.resources') }}
     </h3>
diff --git a/shell/components/formatter/FleetRepo.vue b/shell/components/formatter/FleetRepo.vue
new file mode 100644
index 0000000000..2ca40d0ffd
--- /dev/null
+++ b/shell/components/formatter/FleetRepo.vue
@@ -0,0 +1,60 @@
+<script>
+import Link from '@shell/components/formatter/Link';
+import Shortened from '@shell/components/formatter/Shortened';
+
+export default {
+  name: 'FleetRepo',
+
+  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>
+  <Link
+    :row="row"
+    :value="row.spec.repo || ''"
+    label-key="repoDisplay"
+    before-icon-key="repoIcon"
+    url-key="spec.repo"
+  />
+  {{ row.cluster }}
+  <template v-if="row.commitDisplay">
+    <div class="text-muted">
+      <Shortened
+        long-value-key="status.commit"
+        :row="row"
+        :value="row.commitDisplay"
+      />
+    </div>
+  </template>
+</template>
diff --git a/shell/config/table-headers.js b/shell/config/table-headers.js
index 47b54c7342..21fd16382a 100644
--- a/shell/config/table-headers.js
+++ b/shell/config/table-headers.js
@@ -1077,11 +1077,12 @@ export const FLEET_REPO_TARGET = {
 };
 
 export const FLEET_REPO = {
-  name:     'repo',
-  labelKey: 'tableHeaders.repo',
-  value:    'repoDisplay',
-  sort:     'repoDisplay',
-  search:   ['spec.repo', 'status.commit'],
+  name:      'repo',
+  labelKey:  'tableHeaders.repo',
+  value:     'repoDisplay',
+  formatter: 'FleetRepo',
+  sort:      'repoDisplay',
+  search:    ['spec.repo', 'status.commit'],
 };
 
 export const UI_PLUGIN_CATALOG = [