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

package/detail/fleet.cattle.io.helmop.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: 'DetailsHelmOp',
@@ -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,59 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="mt-20"
-  >
-    <FleetSummary
-      v-if="helmOpHasClusters"
-      :value="value"
-      :bundles="bundles"
-      class="mb-20"
-    />
-    <Banner
-      v-else
-      color="info"
-      class="mb-20"
-    >
-      {{ t('fleet.fleetSummary.noClusters.helmOp') }}
-    </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>
+        <div class="mt-20">
+          <FleetSummary
+            v-if="helmOpHasClusters"
+            :value="value"
+            :bundles="bundles"
+            class="mb-20"
+          />
+          <Banner
+            v-else
+            color="info"
+            class="mb-20"
+          >
+            {{ t('fleet.fleetSummary.noClusters.helmOp') }}
+          </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>
+      </template>
+    </template>
+  </DetailPage>
 </template>

package/detail/projectsecret.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+import Secret from '@shell/detail/secret.vue';
+const props = defineProps<{
+  value: any;
+}>();
+</script>
+
+<template>
+  <Secret :value="props.value" />
+</template>