dashboard-shell-shell 3.0.5-test.3 → 3.0.5-test.31

package/components/Resource/Detail/TitleBar/index.vue

@@ -13,6 +13,8 @@ import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
+import breadcrumb from '@shell/components/breadcrumb/index.vue'
+import { useDefaultConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -36,6 +38,7 @@ export interface TitleBarProps {
   showViewOptions?: boolean;
 
   onShowConfiguration?: (returnFocusSelector: string) => void;
+  parentRouteOverride?: string;
 }
 
 const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
@@ -43,9 +46,10 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  parentRouteOverride, resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
+
 const store = useStore();
 const i18n = useI18n(store);
 const router = useRouter();
@@ -54,6 +58,10 @@ const emit = defineEmits(['show-configuration']);
 const showConfigurationDataTestId = 'show-configuration-cta';
 const showConfigurationReturnFocusSelector = computed(() => `[data-testid="${ showConfigurationDataTestId }"]`);
 
+
+const configTabProps = useDefaultConfigTabProps(resource);
+
+
 const currentView = ref(router?.currentRoute?.value?.query?.as || _CONFIG);
 const viewOptions = computed(() => {
   if (!showViewOptions) {
@@ -72,6 +80,45 @@ const viewOptions = computed(() => {
   ];
 });
 
+const Svg = require('~shell/assets/images/API.svg')
+
+const parent = computed(() => {
+
+  const product = store.getters['currentProduct'].name;
+
+  const defaultLocation = {
+    name: 'c-cluster-product-resource',
+    params: {
+      resource,
+      product,
+    }
+  };
+
+  const location = resource?.parentLocationOverride || defaultLocation;
+
+  if (parentRouteOverride) {
+    location.name = parentRouteOverride;
+  }
+
+  return { location };
+});
+
+const menuIcon = computed(() => {
+  const product = store.getters['productId'];
+  const resources = parent.value.location?.params?.resource || '';
+  return store.getters['type-map/groupsForVirTypes'](product, resources) || 'default menuIcon';
+});
+
+const hiddenTypes = [
+  'harvesterhci.io.virtualmachinebackup',
+];
+
+const shouldShowConfiguration = computed(() =>
+  onShowConfiguration &&
+  configTabProps &&
+  !hiddenTypes.includes(resource?.type)
+);
+
 watch(
   () => currentView.value,
   () => {
@@ -82,33 +129,58 @@ watch(
 
 <template>
   <div class="title-bar">
+    <breadcrumb :resourceTypeLabel="resourceTypeLabel" :resource="resource"/>
     <Top>
       <Title class="title">
+        <span class="detailIcon-span">
+          <img
+            v-if="parentRouteOverride === 'account' && resource=== 'token'"
+            :src="Svg"
+            style="margin-top: 4px; margin-left: 5px;"
+          >
+          <i
+            v-else
+            :class="'icon-'+ menuIcon + ' detailIcon'"
+          />
+        </span>
+        <div class="resourceTypeLabelCls">
+          {{ resourceTypeLabel }}名称:
+        </div>
+        <span class="resource-name masthead-resource-title">
+          {{ resourceName }}
+        </span>
+        <BadgeState
+          v-if="badge"
+          class="badge-state"
+          :color="badge.color"
+          :label="badge.label"
+        />
+        <span
+          class="valid"
+        >|</span>
         <TabTitle :show-child="false">
-          {{ resourceTypeLabel }}
+          返回
         </TabTitle>
         <router-link
           v-if="resourceTo"
           :to="resourceTo"
           class="resource-link"
         >
-          {{ resourceTypeLabel }}:
+          返回
         </router-link>
         <span
           v-else
           class="resource-text"
         >
-          {{ resourceTypeLabel }}:
+          返回
         </span>
-        <span class="resource-name masthead-resource-title">
-          {{ resourceName }}
-        </span>
-        <BadgeState
-          v-if="badge"
-          class="badge-state"
-          :color="badge.color"
-          :label="badge.label"
-        />
+        <div
+          v-if="description"
+          style="font-size: 12px;margin-left: 16px;"
+          class="bottom description text-deemphasized"
+        >
+          ( {{ description }} )
+        </div>
       </Title>
       <div class="actions">
         <!-- Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet. -->
@@ -118,7 +190,7 @@ watch(
           :options="viewOptions"
         />
         <RcButton
-          v-if="onShowConfiguration"
+          v-if="shouldShowConfiguration"
           :data-testid="showConfigurationDataTestId"
           class="show-configuration"
           :primary="true"
@@ -134,6 +206,7 @@ watch(
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
+          :showIcon="true"
           button-role="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
@@ -141,12 +214,6 @@ watch(
         />
       </div>
     </Top>
-    <div
-      v-if="description"
-      class="bottom description text-deemphasized"
-    >
-      {{ description }}
-    </div>
     <ExtensionPanel
       :resource="resource"
       :type="ExtensionPoint.PANEL"
@@ -156,12 +223,39 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+
+.detailIcon-span{
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  background: var(--primary);
+  margin-right: 10px;
+}
+.detailIcon{
+  position: absolute;
+  color: #fff;
+  font-size: 38px;
+  left: 4px;
+  top: -2px;
+}
+
+.detailIcon-span-title{
+  font-weight: bold;
+}
+.resourceTypeLabelCls {
+  font-weight: 700;
+}
+.valid{
+  color: #d7d7d7;
+  margin: 0px 10px;
+}
 .title-bar {
   min-width: 740px;
 
   .badge-state {
     font-size: 16px;
-    margin-left: 12px;
+    margin-left: 5px;
     position: relative;
   }
 
@@ -170,15 +264,19 @@ watch(
   }
 
   &:deep() button[data-testid="masthead-action-menu"] {
-    border-radius: 4px;
-    width: 35px;
-    height: 40px;
-    margin-left: 16px;
+    border-radius: 2px;
+    width: 32px;
+    height: 32px;
+    margin-left: 10px;
 
     display: inline-flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+
+    a{
+      color: #fff;
+    }
   }
 
   .description {

package/components/ResourceDetail/Masthead/index.vue

@@ -60,6 +60,6 @@ const showLatestMasthead = computed(() => isNewDetailPageEnabled.value && isView
 <style lang="scss" scoped>
 .new.state-banner {
   margin: 0;
-  margin-top: 16px;
+  margin-bottom: 20px;
 }
 </style>

package/components/ResourceDetail/Masthead/latest.vue

@@ -39,6 +39,6 @@ const bannerProps = useResourceDetailBannerProps(props.value);
 <style lang="scss" scoped>
 .new.state-banner {
   margin: 0;
-  margin-top: 16px;
+  margin-bottom: 20px;
 }
 </style>