dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

package/components/ResourceDetail/Masthead/legacy.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';
@@ -29,7 +30,8 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState,
+    // BadgeState,
+    DotState,
     Banner,
     ButtonGroup,
     ExtensionPanel,
@@ -44,6 +46,11 @@ export default {
       }
     },
 
+    isManuallyHide: {
+      type:    Boolean,
+      default: true
+    },
+
     mode: {
       type:    String,
       default: 'create'
@@ -112,6 +119,7 @@ export default {
       DETAIL_VIEW:       _DETAIL,
       extensionType:     ExtensionPoint.PANEL,
       extensionLocation: PanelLocation.DETAILS_MASTHEAD,
+      Svg:               require('~shell/assets/images/API.svg')
     };
   },
 
@@ -264,6 +272,20 @@ export default {
       }
 
       const typeOptions = this.$store.getters[`type-map/optionsFor`]( this.resource );
+
+      // 转换为中文
+      const displayName_zh_hans = {
+        'GlobalRole': '全局角色',
+        'RoleTemplate': '集群角色',
+      }
+      if (displayName_zh_hans[displayName]) {
+        displayName = displayName_zh_hans[displayName]
+      }
+      
+      if (displayName == '集群角色' && (this.$route.query?.roleContext == 'NAMESPACE' || location.hash == '#NAMESPACE')) {
+        displayName = '项目或资源组角色'
+      }
+
       const out = {
         displayName, location, ...typeOptions
       };
@@ -314,12 +336,12 @@ export default {
         });
       }
 
-      if ( this.canViewYaml ) {
-        out.push({
-          labelKey: 'resourceDetail.masthead.yaml',
-          value:    _YAML,
-        });
-      }
+      // if ( this.canViewYaml ) {
+      //   out.push({
+      //     labelKey: 'resourceDetail.masthead.yaml',
+      //     value:    _YAML,
+      //   });
+      // }
 
       if ( out.length < 2 ) {
         return null;
@@ -393,6 +415,37 @@ export default {
       return this.shouldHifenize ? ` - ${ displayName }` : displayName;
     },
 
+    demoDisplay() {
+      const product = this.$store.getters['productId'];
+
+      const resources = this.location?.params?.resource || ''
+
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
+
+      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'];
+
+      const resources = this.location?.params?.resource || ''
+
+      return this.$store.getters['type-map/groupsForVirTypes'](product, resources);
+    },
+
     location() {
       const { parent } = this;
 
@@ -439,10 +492,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"
@@ -498,9 +622,9 @@ export default {
             >
               <i class="icon icon-external-link" />
             </a>
-          </h1>
+          </h1> -->
         </div>
-        <div
+        <!-- <div
           v-if="!isCreate"
           class="subheader"
         >
@@ -545,7 +669,8 @@ export default {
               {{ value.createdBy.displayName }}
             </span>
           </span>
-        </div>
+          <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
+        </div> -->
       </div>
       <slot name="right">
         <div class="actions-container align-start">
@@ -623,42 +748,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;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      overflow: hidden;
-
-      .masthead-resource-title {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .masthead-resource-list-link {
-        margin: 5px;
-      }
+      margin: 0;
     }
   }
 
@@ -671,8 +784,7 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text);
-      margin-left: 3px;
+      color: var(--body-text)
     }
   }
 
@@ -681,8 +793,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 {
@@ -705,13 +821,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/legacy.vue

@@ -6,13 +6,14 @@ import {
   _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
   AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
 } from '@shell/config/query-params';
-import { SCHEMA } from '@shell/config/types';
+import { FLEET, SCHEMA } from '@shell/config/types';
 import { createYaml } from '@shell/utils/create-yaml';
 import Masthead from '@shell/components/ResourceDetail/Masthead';
 import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
 
@@ -171,6 +172,28 @@ export default {
         yaml = createYaml(schemas, resourceType, data);
       }
     } else {
+      if ( as === _GRAPH ) {
+        const graphSchema = await checkSchemasForFindAllHash({
+          cluster: {
+            inStoreType: 'management',
+            type:        FLEET.CLUSTER
+          },
+          bundle: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE,
+            opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
+          },
+
+          bundleDeployment: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE_DEPLOYMENT
+          }
+
+        }, this.$store);
+
+        this.canViewChart = graphSchema.cluster && graphSchema.bundle && graphSchema.bundleDeployment;
+      }
+
       let fqid = id;
 
       if ( schema.attributes?.namespaced && namespace ) {
@@ -273,6 +296,7 @@ export default {
       value:           null,
       model:           null,
       notFound:        null,
+      canViewChart:    true,
       canViewYaml:     null,
       errors:          []
     };
@@ -440,7 +464,7 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending || notFound" />
-  <div v-else>
+  <div style="padding: 20px;height: 100%;" v-else>
     <Masthead
       v-if="showMasthead"
       :resource="resourceType"
@@ -451,15 +475,16 @@ export default {
       :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
-      :can-view-yaml="canViewYaml"
       :resource-subtype="resourceSubtype"
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
+
+      :isManuallyHide="false"
     >
-      <DetailTop
+      <!-- <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
-      />
+      /> -->
     </Masthead>
     <div
       v-if="hasErrors"
@@ -479,7 +504,7 @@ export default {
     </div>
 
     <ForceDirectedTreeChart
-      v-if="isGraph"
+      v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
@@ -493,9 +518,8 @@ export default {
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value ? value.doneOverride : null"
-      :show-errors="false"
       @update:value="$emit('input', $event)"
-      @error="onYamlError"
+      @error="e=>errors.push(e)"
     />
 
     <component
@@ -553,10 +577,4 @@ export default {
   flex-direction: column;
   flex-grow: 1;
 }
-.cru__errors {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--header-bg);
-}
 </style>