dashboard-shell-shell 1.0.112 → 1.0.113

package/components/ResourceDetail/Masthead.vue

@@ -2,7 +2,8 @@
 import { KUBERNETES, PROJECT } from '@shell/config/labels-annotations';
 import { FLEET, NAMESPACE, MANAGEMENT, HELM } from '@shell/config/types';
 import ButtonGroup from '@shell/components/ButtonGroup';
-import { BadgeState } from '@components/BadgeState';
+// import { BadgeState } from '@components/BadgeState';
+import DotState from '@shell/components/DotState.vue';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
@@ -13,6 +14,9 @@ import {
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import TabTitle from '@shell/components/TabTitle';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import { useStore } from 'vuex';
 
 // i18n-uses resourceDetail.header.*
 
@@ -26,7 +30,13 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
+    // BadgeState,
+    DotState,
+    Banner,
+    ButtonGroup,
+    ExtensionPanel,
+    TabTitle,
+    ActionMenu,
   },
   props: {
     value: {
@@ -92,11 +102,19 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       DETAIL_VIEW:       _DETAIL,
       extensionType:     ExtensionPoint.PANEL,
       extensionLocation: PanelLocation.DETAILS_MASTHEAD,
+      Svg:               require('~shell/assets/images/API.svg')
     };
   },
 
@@ -378,6 +396,33 @@ export default {
       return this.shouldHifenize ? ` - ${ displayName }` : displayName;
     },
 
+    demoDisplay() {
+      const product = this.$store.getters['productId'];
+
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this.location.params.resource);
+
+      if (productId === undefined) {
+        return '';
+      }
+      const parts = productId.split('::');
+      const newString = 'root';
+
+      if (!parts?.includes(newString)) {
+        parts.unshift(newString); // 将字符串添加到数组第一位
+      }
+
+      const partsEn = parts.map((item) => {
+        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      });
+
+      return partsEn;
+    },
+    menuIcon() {
+      const product = this.$store.getters['productId'];
+
+      return this.$store.getters['type-map/groupsForVirTypes'](product, this.location.params.resource);
+    },
+
     location() {
       const { parent } = this;
 
@@ -424,10 +469,81 @@ export default {
 
 <template>
   <div class="masthead">
+    <div class="title">
+      <!-- 创建api密钥不需要面包屑 -->
+      <div
+        v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
+        class="excram-list"
+      >
+        <span
+          v-for="(item,index) in demoDisplay"
+          :key="index"
+        >
+          <span>{{ item }}</span>
+          <span>/</span>
+        </span>
+        <span class="excram-last-name">
+          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
+        </span>
+      </div>
     <header>
       <div class="title">
         <div class="primaryheader">
-          <h1>
+          <span class="primary-title">
+              <!-- <nuxt-link
+                v-if="location"
+                :to="location"
+              >
+                {{ parent.displayName }}:
+              </nuxt-link> -->
+              <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>
+              <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
+              <span v-if="realMode !== 'create'">
+                <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+                <t
+                  v-else
+                  :k="'resourceDetail.header.' + realMode"
+                  :subtype="resourceSubtype"
+                  :name="displayName"
+                  :escapehtml="false"
+                />
+              </span>
+              <DotState
+                v-if="!isCreate && parent.showState"
+                class="masthead-state"
+                :value="value"
+              />
+              <span
+                v-if="!isCreate && value.injectionEnabled"
+                class="masthead-istio"
+              >
+                <i
+                  v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                  class="icon icon-sm icon-istio"
+                />
+              </span>
+            </span>
+            <span
+              v-if="location"
+              class="valid"
+            >|</span>
+            <router-link
+              v-if="location"
+              :to="location"
+            >
+              返回
+            </router-link>
+          <!-- <h1>
             <TabTitle
               v-if="isCreate"
               :showChild="false"
@@ -483,9 +599,9 @@ export default {
             >
               <i class="icon icon-external-link" />
             </a>
-          </h1>
+          </h1> -->
         </div>
-        <div
+        <!-- <div
           v-if="!isCreate"
           class="subheader"
         >
@@ -531,7 +647,7 @@ export default {
             </span>
           </span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
-        </div>
+        </div> -->
       </div>
       <slot name="right">
         <div class="actions-container align-start">
@@ -561,17 +677,28 @@ export default {
               class="mr-10"
             />
 
-            <button
-              v-if="isView"
-              ref="actions"
-              data-testid="masthead-action-menu"
-              aria-haspopup="true"
-              type="button"
-              class="btn role-multi-action actions"
-              @click="showActions"
-            >
-              <i class="icon icon-actions" />
-            </button>
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="isView"
+                button-role="multiAction"
+                button-size="compact"
+                :resource="value"
+                data-testid="masthead-action-menu"
+              />
+            </template>
+            <template v-else>
+              <button
+                v-if="isView"
+                ref="actions"
+                data-testid="masthead-action-menu"
+                aria-haspopup="true"
+                type="button"
+                class="btn role-multi-action actions"
+                @click="showActions"
+              >
+                <i class="icon icon-actions" />
+              </button>
+            </template>
           </div>
         </div>
       </slot>
@@ -598,42 +725,30 @@ export default {
     />
 
     <slot />
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   .masthead {
     padding-bottom: 10px;
-    border-bottom: 1px solid var(--border);
+    /* border-bottom: 1px solid var(--border); */
     margin-bottom: 10px;
   }
 
   HEADER {
     margin: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .primaryheader {
     display: flex;
     flex-direction: row;
     align-items: center;
+    font-size:14px;
+    height: 50px;
 
     h1 {
-      margin: 0 0 0 -5px;
-      overflow-x: hidden;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .masthead-resource-title {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .masthead-resource-list-link {
-        margin: 5px;
-      }
+      margin: 0;
     }
   }
 
@@ -646,8 +761,7 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text);
-      margin-left: 3px;
+      color: var(--body-text)
     }
   }
 
@@ -656,8 +770,12 @@ export default {
   }
 
   .masthead-state {
-    margin-left: 8px;
     font-size: initial;
+    display: inline-block;
+    position: relative;
+    /* top: -2px; */
+    font-size: 12px;
+    margin-left: 5px;
   }
 
   .masthead-istio {
@@ -680,13 +798,40 @@ export default {
     }
   }
 
-  div.actions-container > div.actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-
   .resource-external {
     font-size: 18px;
   }
+  .excram-list{
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .excram-last-name{
+    color: var(--link);
+  }
+  .valid{
+    color: #d7d7d7;
+    margin: 0px 10px;
+  }
+  .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;
+  }
+  .primary-title{
+    display: flex;
+    align-items: center;
+  }
+  .detailIcon-span-title{
+    font-weight: bold;
+  }
 </style>

package/components/ResourceDetail/__tests__/Masthead.test.ts

@@ -1,6 +1,7 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
 import { _VIEW } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceDetail/Masthead.vue';
+import { createStore } from 'vuex';
 
 const mockedStore = () => {
   return {
@@ -17,12 +18,15 @@ const mockedStore = () => {
 };
 
 const requiredSetup = () => {
+  const store = createStore({ getters: { 'management/byId': () => jest.fn() } });
+
   return {
     stubs: {
       'router-link': RouterLinkStub,
       LiveDate:      true
     },
-    mocks: { $store: mockedStore() }
+    provide: { store },
+    mocks:   { $store: mockedStore() }
   };
 };
 

package/components/ResourceDetail/index.vue

@@ -384,18 +384,7 @@ export default {
   },
 
   created() {
-    // eslint-disable-next-line prefer-const
-    const id = this.$route.params.id;
-    const resource = this.resourceOverride || this.$route.params.resource;
-    const options = this.$store.getters[`type-map/optionsFor`](resource);
-
-    const detailResource = options.resourceDetail || options.resource || resource;
-    const editResource = options.resourceEdit || options.resource || resource;
-
-    // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
-    // Remove id? How does subtype get in (cluster/node)
-    this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
-    this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
+    this.configureResource();
   },
 
   methods: {
@@ -414,6 +403,51 @@ export default {
     closeError(index) {
       this.errors = this.errors.filter((_, i) => i !== index);
     },
+    /**
+     * Initializes the resource components based on the provided user and
+     * resource override.
+     *
+     * Configures the detail and edit components for a resource based on the
+     * user's ID and the specified resource.
+     *
+     * @param {Object} user - The user object containing user-specific
+     * information.
+     * @param {string|null} resourceOverride - An optional resource override
+     * string. If not provided, the method will use the default resource from
+     * the route parameters or the instance's resourceOverride property.
+     */
+    configureResource(userId = '', resourceOverride = null) {
+      const id = userId || this.$route.params.id;
+      const resource = resourceOverride || this.resourceOverride || this.$route.params.resource;
+      const options = this.$store.getters[`type-map/optionsFor`](resource);
+
+      const detailResource = options.resourceDetail || options.resource || resource;
+      const editResource = options.resourceEdit || options.resource || resource;
+
+      // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
+      // Remove id? How does subtype get in (cluster/node)
+      this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
+      this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
+    },
+    /**
+     * Sets the mode and initializes the resource components.
+     *
+     * This method sets the mode of the component and configures the resource
+     * components based on the provided user and resource.
+     *
+     * @param {Object} payload - An object containing the mode, user, and
+     * resource properties.
+     * @param {string} payload.mode - The mode to set.
+     * @param {Object} payload.user - The user object containing user-specific
+     * information.
+     * @param {string} payload.resource - The resource string to use for
+     * initialization.
+     */
+    setMode({ mode, userId, resource }) {
+      this.mode = mode;
+      this.value.id = userId;
+      this.configureResource(userId, resource);
+    }
   }
 };
 </script>
@@ -436,10 +470,10 @@ export default {
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
     >
-      <DetailTop
+      <!-- <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
-      />
+      /> -->
     </Masthead>
     <div
       v-if="hasErrors"
@@ -491,6 +525,7 @@ export default {
       :real-mode="realMode"
       :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
+      @update:mode="setMode"
       @set-subtype="setSubtype"
     />
 

package/components/ResourceList/Masthead.vue

@@ -95,10 +95,12 @@ export default {
       query: { [AS]: _YAML },
     };
 
+    const tabList = ['集群配置'];
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
+      tabList,
     };
   },
 
@@ -125,6 +127,28 @@ export default {
 
       return this.$store.getters['type-map/labelFor'](this.schema, 99);
     },
+    _descriptionDisplay() {
+      const key = this.$route.path.split('/').pop();
+
+      return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
+    },
+    demoDisplay() {
+      const product = this.$store.getters['productId'];
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
+      const parts = productId?.split('::');
+      const newString = 'root';
+
+      if (!parts.includes(newString)) {
+        parts.unshift(newString); // 将字符串添加到数组第一位
+      }
+
+      const partsEn = parts.map((item) => {
+        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      });
+
+      return partsEn;
+      // return this.$store.getters['i18n/t'](`typeLabel."${ productId.toLowerCase() }"`)
+    },
 
     _isYamlCreatable() {
       if ( this.isYamlCreatable !== null) {
@@ -165,16 +189,30 @@ export default {
 
 <template>
   <header class="with-subheader">
-    <slot name="typeDescription">
+    <!-- <slot name="typeDescription">
       <TypeDescription :resource="resource" />
-    </slot>
+    </slot> -->
     <div class="title">
-      <h1 class="m-0">
+      <div class="excram-list">
+        <span
+          v-for="(item,index) in demoDisplay"
+          :key="index"
+        >
+          <span>{{ item }}</span>
+          <span>/</span>
+        </span>
+        <span class="excram-last-name">{{ _typeDisplay }}</span>
+      </div>
+      <h1 class="m-0 descrip-name">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
           v-if="isExplorer"
           :resource="favoriteResource || resource"
         />
       </h1>
+      <!-- 描述 -->
+      <div class="masthod-title-description">
+        {{ _descriptionDisplay }}
+      </div>
       <ResourceLoadingIndicator
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
@@ -186,7 +224,15 @@ export default {
         <!--Slot content-->
       </slot>
     </div>
-    <div class="actions-container">
+    <div
+      v-if="!(tabList.includes(_typeDisplay))"
+      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 10px;margin-bottom: 20px;margin-left: -20px;margin-right: -20px;"
+    />
+    <div 
+     v-if="!(tabList.includes(_typeDisplay))"
+    class="actions-container"
+    style="width: 100%;min-height: 32px;text-align: left"
+    >
       <slot name="actions">
         <div class="actions">
           <slot name="extraActions" />
@@ -200,14 +246,14 @@ export default {
             >
               {{ _createButtonlabel }}
             </router-link>
-            <router-link
+            <!-- <router-link
               v-else-if="_isYamlCreatable"
               :to="_yamlCreateLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create-yaml'"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
+            </router-link> -->
           </slot>
         </div>
       </slot>
@@ -217,30 +263,46 @@ export default {
 
 <style lang="scss" scoped>
   .title {
-    align-items: center;
-    display: flex;
+    /* align-items: center;
+    display: flex; */
     h1 {
       margin: 0;
     }
   }
 
   header {
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
   }
 
   header.with-subheader {
-    grid-template-areas:
+    /* grid-template-areas:
       'type-banner type-banner'
       'title actions'
       'sub-header sub-header'
-      'state-banner state-banner';
+      'state-banner state-banner'; */
+      position: relative;
+      display: unset;
   }
-
-  .sub-header {
-    grid-area: sub-header;
-
-    a {
-      display: inline-block;
-    }
+  .excram-list{
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 20px;
+    font-family: 'Microsoft YaHei';
+  }
+  .excram-last-name{
+    color: var(--primary);
+  }
+  .descrip-name{
+    font-size: 26px;
+    font-family: 'Microsoft YaHei';
+  }
+  .masthod-title-description{
+    font-family: 'Microsoft YaHei';
+    margin: 20px 0px;
+  }
+  .actions-container{
+    /* display: flex; */
+    /* margin-left: 0px; */
+    position: absolute;
   }
 </style>