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

package/components/ResourceDetail/Masthead/legacy.vue

@@ -2,8 +2,7 @@
 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 DotState from '@shell/components/DotState.vue';
+import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
@@ -30,8 +29,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    // BadgeState,
-    DotState,
+    BadgeState,
     Banner,
     ButtonGroup,
     ExtensionPanel,
@@ -46,11 +44,6 @@ export default {
       }
     },
 
-    isManuallyHide: {
-      type:    Boolean,
-      default: true
-    },
-
     mode: {
       type:    String,
       default: 'create'
@@ -119,7 +112,6 @@ export default {
       DETAIL_VIEW:       _DETAIL,
       extensionType:     ExtensionPoint.PANEL,
       extensionLocation: PanelLocation.DETAILS_MASTHEAD,
-      Svg:               require('~shell/assets/images/API.svg')
     };
   },
 
@@ -272,20 +264,6 @@ 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
       };
@@ -336,12 +314,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;
@@ -415,37 +393,6 @@ 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;
 
@@ -492,81 +439,10 @@ 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">
-          <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>
+          <h1>
             <TabTitle
               v-if="isCreate"
               :showChild="false"
@@ -622,9 +498,9 @@ export default {
             >
               <i class="icon icon-external-link" />
             </a>
-          </h1> -->
+          </h1>
         </div>
-        <!-- <div
+        <div
           v-if="!isCreate"
           class="subheader"
         >
@@ -669,8 +545,7 @@ export default {
               {{ value.createdBy.displayName }}
             </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">
@@ -748,30 +623,42 @@ 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;
+      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;
+      }
     }
   }
 
@@ -784,7 +671,8 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text)
+      color: var(--body-text);
+      margin-left: 3px;
     }
   }
 
@@ -793,12 +681,8 @@ 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 {
@@ -821,40 +705,13 @@ export default {
     }
   }
 
-  .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{
+  div.actions-container > div.actions {
     display: flex;
-    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
   }
-  .detailIcon-span-title{
-    font-weight: bold;
+
+  .resource-external {
+    font-size: 18px;
   }
 </style>

package/components/ResourceDetail/legacy.vue

@@ -6,14 +6,13 @@ import {
   _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
   AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
 } from '@shell/config/query-params';
-import { FLEET, SCHEMA } from '@shell/config/types';
+import { 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';
 
@@ -172,28 +171,6 @@ 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 ) {
@@ -296,7 +273,6 @@ export default {
       value:           null,
       model:           null,
       notFound:        null,
-      canViewChart:    true,
       canViewYaml:     null,
       errors:          []
     };
@@ -475,14 +451,15 @@ 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"
     >
-      <!-- <DetailTop
+      <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
-      /> -->
+      />
     </Masthead>
     <div
       v-if="hasErrors"
@@ -502,7 +479,7 @@ export default {
     </div>
 
     <ForceDirectedTreeChart
-      v-if="isGraph && canViewChart"
+      v-if="isGraph"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
@@ -516,8 +493,9 @@ export default {
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value ? value.doneOverride : null"
+      :show-errors="false"
       @update:value="$emit('input', $event)"
-      @error="e=>errors.push(e)"
+      @error="onYamlError"
     />
 
     <component
@@ -575,4 +553,10 @@ export default {
   flex-direction: column;
   flex-grow: 1;
 }
+.cru__errors {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--header-bg);
+}
 </style>