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

@@ -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

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 }"

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
+        <template v-if="noClustersWarning">
-          v-if="statePanel.id !== 'success'"
+          <i class="icon icon-lg icon-warning text-warning" />
-          class="icon-lg"
+          <span>{{ noClustersWarning }}</span>
-          :class="statePanel.icon"
+        </template>
-          :style="{ color: statePanel.color }"
+        <template v-else>
-        />
+          <i
-        <div class="label">
+            v-if="statePanel.id !== 'success'"
-          <span class="large">{{ summary.partial }}</span>
+            class="icon-lg"
-          <span v-if="summary.partial !== summary.total && summary.total !== 0">/{{ summary.total }}</span>
+            :class="statePanel.icon"
-          &nbsp;
+            :style="{ color: statePanel.color }"
-          <span>{{ t('fleet.dashboard.cards.resourceSummary.part1') }}</span>
+          />
-          <span class="large">{{ summary.clusters }}</span>
+          <div class="label">
-          <span>{{ t('fleet.dashboard.cards.resourceSummary.part2', { count: summary.clusters }) }}</span>
+            <span class="large">{{ summary.partial }}</span>
-        </div>
+            <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>

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>

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>

shell/config/table-headers.js

@@ -1077,11 +1077,12 @@ export const FLEET_REPO_TARGET = {
 };
 
 export const FLEET_REPO = {
-  name:     'repo',
+  name:      'repo',
-  labelKey: 'tableHeaders.repo',
+  labelKey:  'tableHeaders.repo',
-  value:    'repoDisplay',
+  value:     'repoDisplay',
-  sort:     'repoDisplay',
+  formatter: 'FleetRepo',
-  search:   ['spec.repo', 'status.commit'],
+  sort:      'repoDisplay',
+  search:    ['spec.repo', 'status.commit'],
 };
 
 export const UI_PLUGIN_CATALOG = [