@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/detail/__tests__/workload.test.ts

@@ -0,0 +1,164 @@
+import Workload from '@shell/detail/workload/index.vue';
+
+const { findMatchingIngresses } = Workload.methods;
+
+describe('findMatchingIngresses', () => {
+  it('should do nothing if ingress schema is not present', () => {
+    const mockThis = {
+      ingressSchema:     undefined,
+      matchingIngresses: [],
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toStrictEqual([]);
+  });
+
+  it('should not find any ingresses if there are none', () => {
+    const mockThis = {
+      ingressSchema:     true,
+      allIngresses:      [],
+      matchingServices:  [],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toStrictEqual([]);
+  });
+
+  it('should find matching ingresses', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        { // matching
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(1);
+    expect(mockThis.matchingIngresses[0]).toStrictEqual(mockThis.allIngresses[0]);
+  });
+
+  it('should not match ingresses from other namespaces', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        { // not matching
+          metadata: { namespace: 'other' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(0);
+  });
+
+  it('should not match ingresses pointing to other services', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        { // not matching
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service2' } } }] } }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(0);
+  });
+
+  it('should handle ingresses with no rules', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        {
+          metadata: { namespace: 'test' },
+          spec:     { }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(0);
+  });
+
+  it('should handle ingress rules with no paths', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        {
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: {} }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(0);
+  });
+
+  it('should handle ingress paths with no backend service', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        {
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: { paths: [{ backend: {} }] } }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(0);
+  });
+
+  it('should find one of many ingresses', () => {
+    const mockThis = {
+      ingressSchema: true,
+      allIngresses:  [
+        { // not matching
+          metadata: { namespace: 'other' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
+        },
+        { // matching
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
+        },
+        { // not matching
+          metadata: { namespace: 'test' },
+          spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service2' } } }] } }] }
+        }
+      ],
+      matchingServices:  [{ metadata: { name: 'service1' } }],
+      matchingIngresses: [],
+      value:             { metadata: { namespace: 'test' } }
+    };
+
+    findMatchingIngresses.call(mockThis);
+    expect(mockThis.matchingIngresses).toHaveLength(1);
+    expect(mockThis.matchingIngresses[0]).toStrictEqual(mockThis.allIngresses[1]);
+  });
+});

package/detail/catalog.cattle.io.app.vue

@@ -2,7 +2,6 @@
 import YamlEditor from '@shell/components/YamlEditor';
 import Loading from '@shell/components/Loading';
 import Markdown from '@shell/components/Markdown';
-import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import { Banner } from '@components/Banner';
 import RelatedResources from '@shell/components/RelatedResources';
@@ -12,12 +11,13 @@ import { CATALOG } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
 import { mergeWithReplace } from '@shell/utils/object';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
 
 export default {
   name: 'DetailRelease',
 
   components: {
-    Markdown, Tabbed, Tab, Loading, YamlEditor, Banner, RelatedResources
+    Markdown, ResourceTabs, Tab, Loading, YamlEditor, Banner, RelatedResources
   },
 
   props: {
@@ -125,9 +125,12 @@ export default {
       {{ t('catalog.app.section.lastOperation') }}: ( {{ latestOperation.status.action }} ) - <a @click="latestOperation.openLogs()">  {{ t('catalog.app.section.openLogs') }}</a>
     </span>
 
-    <Tabbed
+    <ResourceTabs
       class="mt-20"
       default-tab="resources"
+      :needConditions="false"
+      :needEvents="false"
+      :needRelated="false"
       @changed="tabChanged($event)"
     >
       <Tab
@@ -174,7 +177,7 @@ export default {
       >
         <Markdown v-model:value="value.spec.info.notes" />
       </Tab>
-    </Tabbed>
+    </ResourceTabs>
   </div>
 </template>
 

package/detail/configmap.vue

@@ -1,81 +1,39 @@
-<script>
-import ResourceTabs from '@shell/components/form/ResourceTabs';
-import DetailText from '@shell/components/DetailText';
-import Tab from '@shell/components/Tabbed/Tab';
-import { base64Decode } from '@shell/utils/crypto';
-
-export default {
-  emits: ['input'],
-
-  components: {
-    ResourceTabs,
-    DetailText,
-    Tab,
-  },
-
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  computed: {
-    parsedRows() {
-      const rows = [];
-      const { data = {}, binaryData = {} } = this.value;
-
-      Object.keys(data).forEach((key) => {
-        rows.push({
-          key,
-          value:  data[key],
-          binary: false
-        });
-      });
-
-      // we define the binary as false so that the ui doesn't display the size of the binary instead of the actual data...
-      Object.keys(binaryData).forEach((key) => {
-        rows.push({
-          key,
-          value:  base64Decode(binaryData[key]),
-          binary: false
-        });
-      });
-
-      return rows;
-    },
-  },
-};
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import { CONFIG_MAP } from '@shell/config/types';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import ConfigMapDataTab from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue';
+import { useGetConfigMapDataTabProps } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+
+const store = useStore();
+const props = defineProps<{
+  value: any;
+}>();
+
+const configmap = props.value;
+const schema = computed(() => store.getters['cluster/schemaFor'](CONFIG_MAP));
+const defaultMastheadProps = useDefaultMastheadProps(configmap);
+const configMapDataTabProps = useGetConfigMapDataTabProps(configmap);
 </script>
 
 <template>
-  <ResourceTabs
-    :value="value"
-    @update:value="$emit('input', $event)"
-  >
-    <Tab
-      name="data"
-      label-key="secret.data"
-    >
-      <div
-        v-for="(row,idx) in parsedRows"
-        :key="idx"
-        class="mb-20"
+  <DetailPage>
+    <template #top-area>
+      <Masthead v-bind="defaultMastheadProps" />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="configmap"
+        :schema="schema"
       >
-        <DetailText
-          :value="row.value"
-          :label="row.key"
-          :binary="row.binary"
-        />
-      </div>
-      <div v-if="!parsedRows.length">
-        <div
-          v-t="'sortableTable.noRows'"
-          class="m-20 text-center"
+        <ConfigMapDataTab
+          v-bind="configMapDataTabProps"
         />
-      </div>
-    </Tab>
-  </ResourceTabs>
+      </ResourceTabs>
+    </template>
+  </DetailPage>
 </template>

package/detail/fleet.cattle.io.bundle.vue

@@ -1,5 +1,5 @@
 <script>
-import { FLEET, MANAGEMENT } from '@shell/config/types';
+import { FLEET } from '@shell/config/types';
 import FleetResources from '@shell/components/fleet/FleetResources';
 import FleetUtils from '@shell/utils/fleet';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
@@ -39,10 +39,6 @@ export default {
       }
     }, this.$store);
 
-    if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
-      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
-    }
-
     this.allBundleDeployments = allDispatches.allBundleDeployments || [];
   },
 

package/detail/fleet.cattle.io.cluster.vue

@@ -38,6 +38,7 @@ export default {
       gitRepos:          this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
       helmOps:           this.$store.dispatch('management/findAll', { type: FLEET.HELM_OP }),
       workspaces:        this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
+      clusterGroups:     this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER_GROUP }), // Needed for calculating targetClusters
       bundleDeployments: this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT })
     });
 
@@ -67,8 +68,8 @@ export default {
       return [
         ...this.gitRepos,
         ...this.helmOps
-      ].filter((x) => {
-        return x.targetClusters.includes(this.value);
+      ].filter((resource) => {
+        return !!resource.targetClusters.find((c) => c.id === this.clusterId);
       });
     },
 

package/detail/fleet.cattle.io.gitrepo.vue

@@ -1,15 +1,22 @@
 <script>
 import { mapState } from 'vuex';
-import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
 import { Banner } from '@components/Banner';
 import FleetResources from '@shell/components/fleet/FleetResources';
 import Tab from '@shell/components/Tabbed/Tab';
-import { FLEET, MANAGEMENT } from '@shell/config/types';
+import { FLEET } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import FleetBundles from '@shell/components/fleet/FleetBundles.vue';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+import ViewOptions from '@shell/components/Resource/Detail/ViewOptions/index.vue';
+import { useCurrentView } from '@shell/components/Resource/Detail/ViewOptions/composable';
+import { _GRAPH } from '@shell/config/query-params';
+import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
+import { useDefaultForceDirectTreeChartProps } from '@shell/components/ForceDirectedTreeChart/composable';
 
 export default {
   name: 'DetailGitRepo',
@@ -17,13 +24,16 @@ export default {
   emits: ['input'],
 
   components: {
-    Loading,
     FleetResources,
     FleetSummary,
     Banner,
     ResourceTabs,
     Tab,
     FleetBundles,
+    DetailPage,
+    Masthead,
+    ViewOptions,
+    ForceDirectedTreeChart
   },
 
   props: {
@@ -33,6 +43,16 @@ export default {
     },
   },
 
+  setup(props) {
+    const defaultMastheadProps = useDefaultMastheadProps(props.value);
+    const currentView = useCurrentView();
+    const forceDirectedTreeChartProps = useDefaultForceDirectTreeChartProps(props.value);
+
+    return {
+      defaultMastheadProps, currentView, forceDirectedTreeChartProps, _GRAPH
+    };
+  },
+
   data() {
     return {
       allFleetClusters: [],
@@ -100,10 +120,6 @@ export default {
       }
     }, this.$store);
 
-    if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
-      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
-    }
-
     this.allBundles = allDispatches.allBundles || [];
     this.allFleetClusters = allDispatches.allFleetClusters || [];
   },
@@ -112,46 +128,57 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="mt-20"
-  >
-    <FleetSummary
-      v-if="gitRepoHasClusters"
-      :value="value"
-      :bundles="bundles"
-      class="mb-20"
-    />
-    <Banner
-      v-else
-      color="info"
-      class="mb-20"
-    >
-      {{ t('fleet.fleetSummary.noClusters.gitRepo') }}
-    </Banner>
-    <ResourceTabs
-      :value="value"
-      mode="view"
-      class="mt-20"
-      :need-related="false"
-      @update:value="$emit('input', $event)"
-    >
-      <Tab
-        v-if="!!allBundles.length"
-        label="Bundles"
-        name="bundles"
-        :weight="30"
-      >
-        <FleetBundles :value="value" />
-      </Tab>
-      <Tab
-        label="Resources"
-        name="resources"
-        :weight="20"
-      >
-        <FleetResources :rows="value.resourcesStatuses" />
-      </Tab>
-    </ResourceTabs>
-  </div>
+  <DetailPage :loading="$fetchState.pending">
+    <template #top-area>
+      <Masthead v-bind="defaultMastheadProps">
+        <template #additional-actions>
+          <ViewOptions />
+        </template>
+      </Masthead>
+    </template>
+    <template #bottom-area>
+      <template v-if="currentView === _GRAPH">
+        <ForceDirectedTreeChart v-bind="forceDirectedTreeChartProps" />
+      </template>
+
+      <template v-else>
+        <FleetSummary
+          v-if="gitRepoHasClusters"
+          :value="value"
+          :bundles="bundles"
+          class="mb-20"
+        />
+        <Banner
+          v-else
+          color="info"
+          class="mb-20"
+        >
+          {{ t('fleet.fleetSummary.noClusters.gitRepo') }}
+        </Banner>
+        <ResourceTabs
+          :value="value"
+          mode="view"
+          class="mt-20"
+          :need-related="false"
+          @update:value="$emit('input', $event)"
+        >
+          <Tab
+            v-if="!!allBundles.length"
+            label="Bundles"
+            name="bundles"
+            :weight="30"
+          >
+            <FleetBundles :value="value" />
+          </Tab>
+          <Tab
+            label="Resources"
+            name="resources"
+            :weight="20"
+          >
+            <FleetResources :rows="value.resourcesStatuses" />
+          </Tab>
+        </ResourceTabs>
+      </template>
+    </template>
+  </DetailPage>
 </template>