dashboard-shell-shell 3.0.5-test.1 → 3.0.5-test.11

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:          []
     };
@@ -451,17 +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"
@@ -481,7 +504,7 @@ export default {
     </div>
 
     <ForceDirectedTreeChart
-      v-if="isGraph"
+      v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
@@ -495,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
@@ -555,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>

package/components/ResourceList/Masthead.vue

@@ -154,21 +154,18 @@ export default {
       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';
+
       // 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;
       
       const breadcrumbList = {
         'harvesterhci.io.management.cluster': {
@@ -198,9 +195,19 @@ export default {
       if (breadcrumbList[resourcePath] && Object.keys(breadcrumbList[resourcePath]).length > 0) {
         breadcrumb.push(...breadcrumbList[resourcePath].bread)
         this.description = breadcrumbList[resourcePath].description
+        return breadcrumb
+      } else {
+        if (!parts?.includes(newString)) {
+          parts?.unshift(newString); // 将字符串添加到数组第一位
+        }
+        
+        const partsEn = parts?.map((item) => {  
+          return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+        });
+
+        return partsEn;
       }
 
-      return breadcrumb
     },
 
     _isYamlCreatable() {
@@ -253,6 +260,9 @@ export default {
       this.resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const width = entry?.contentRect?.width && entry.contentRect.width > 0 ? entry.contentRect.width + 10 : 0
+
+          console.log(width, ' width----------------------------')
+
           this.$store.commit('type-map/setActionsWidth', width)
         }
       })
@@ -265,7 +275,6 @@ export default {
 </script>
 
 <template>
-  <!-- 顶部 header，带有子标题（subheader）样式类 -->
   <header class="with-subheader">
     <div style="display: flex;width: 100%;">
       <div style="flex: 1;">
@@ -316,7 +325,7 @@ export default {
       <!-- 操作按钮区域 -->
       <div 
         ref="actionsContainer"
-        v-if="!(tabList.includes(_typeDisplay)) && mainButtonVisible"
+        v-if="!(tabList.includes(_typeDisplay))"
         class="actions-container actions-positioning"
         style="min-height: 32px;align-self: flex-end;"
       >
@@ -354,7 +363,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
   .title {
     /* align-items: center;
     display: flex; */
@@ -411,6 +419,6 @@ export default {
   .actions-positioning {
     position: absolute;
     bottom: -48px;
-    z-index: 20;
+    z-index: 15;
   }
 </style>

package/components/SortableTable/index.vue

@@ -2186,7 +2186,7 @@ export default {
     border-collapse: collapse;
     min-width: 400px;
     border-radius: 5px 5px 0 0;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border) !important;
     /* outline: 1px solid var(--border); */
     background: var(--sortable-table-bg);
     border-radius: 4px;
@@ -2664,7 +2664,7 @@ export default {
   .sort-table-div{
       width:100%;
       white-space:nowrap;
-      overflow-x: auto;
+      // overflow-x: auto;
   }
 
   /* 滚动阴影左边 */

package/components/Tabbed/Tab.vue

@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  // margin-bottom: 15px;
+  /* margin-bottom: 15px; */
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -293,7 +293,7 @@ export default {
           :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
-          role="tab"
+          role="tab"  
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -382,22 +382,14 @@ export default {
   margin: 0;
   padding: 0;
 
-  &:focus-visible {
-    outline: none;
-
-    .tab.active {
-      @include focus-outline;
-      outline-offset: -2px;
-    }
-  }
-
   &.horizontal {
-    border-bottom: solid 1px var(--border);
+    border: solid thin var(--border);
+    border-bottom: 0;
     display: flex;
     flex-direction: row;
 
     + .tab-container {
-      // border: solid thin var(--border);
+      border: solid thin var(--border);
     }
 
     .tab.active {
@@ -405,13 +397,18 @@ export default {
     }
   }
 
-  &:focus .tab.active a span {
-    text-decoration: underline;
+  &:focus {
+    outline: none;
+
+    & .tab.active a span {
+      text-decoration: none;
+    }
   }
 
   .tab {
     position: relative;
     float: left;
+    padding: 0 8px 0 0;
     cursor: pointer;
 
     A {
@@ -422,7 +419,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: underline;
+          text-decoration: none;
         }
       }
     }
@@ -461,7 +458,7 @@ export default {
 }
 
 .tab-container {
-  padding: 20px 0;
+  padding: 20px;
 
   &.no-content {
     padding: 0 0 3px 0;
@@ -492,49 +489,71 @@ export default {
 
 .side-tabs {
   display: flex;
-  border: 1px solid var(--border);
-
+  flex-direction: column;
+  /* box-shadow: 0 0 20px var(--shadow);
+  border-radius: calc(var(--border-radius) * 2);
+  background-color: var(--tabbed-sidebar-bg); */
+margin: 0px -20px;
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    width: $sideways-tabs-width;
-    min-width: $sideways-tabs-width;
+    /* width: $sideways-tabs-width; */
+    /* min-width: $sideways-tabs-width; */
     display: flex;
-    flex: 1 0;
-    flex-direction: column;
-    border-right: 1px solid var(--border);
+    border-bottom:1px solid #d7d7d7;
+    padding: 0 0 0 20px;
+    /* flex: 1 0; */
+    /* flex-direction: column; */
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
-
     & .tab {
-      min-width: 130px !important;
+      /* width: 100%; */
+      min-width: 120px;
+      height: 36px;
+      /* border-top: solid 5px transparent; */
+      display: flex;
+      justify-content: center;
+      padding: 8px 16px;
+      box-sizing: border-box;
+      border: 1px solid #d7d7d7;
+      border-bottom: 0px;
+      margin-right: 5px;
+      border-radius: 2px;
 
       &.toggle A {
         color: var(--primary);
+        padding: 0px;
       }
 
       A {
-        color: var(--primary);
+        color: var(--input-label);
+        padding: 0px;
       }
 
       &.active {
-        background-color: var(--nav-active);
+        background-color: var(--body-bg);
+        border-top: solid 2px var(--primary);
+        position: relative;
+        &.active::before{
+          position: absolute;
+          right: 0;
+          left: 0;
+          top: 34px;
+          border-bottom: 1px solid #fff;
+          content: '';
 
+        }
         & A {
           color: var(--primary);
         }
       }
 
-      :hover {
-        background-color: var(--nav-active);
-      }
-
       &.disabled {
         background-color: var(--disabled-bg);
 
@@ -575,7 +594,7 @@ export default {
   &
 
   .tab-container {
-    width: calc(100% - #{$sideways-tabs-width});
+    /* width: calc(100% - #{$sideways-tabs-width}); */
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/auth/Principal.vue

@@ -16,6 +16,10 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -88,7 +92,7 @@ export default {
     <template v-else-if="principal">
       <div class="avatar">
         <img
-          :src="principal.avatarSrc"
+          src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -98,11 +102,19 @@ export default {
         class="name"
       >
         <table>
-          <tbody>
-            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
-          </tbody>
+          <tr class="mb-10">
+            <td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td>
+          </tr>
+          <tr class="mb-10">
+            <td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td>
+          </tr>
+          <tr
+            v-if="isShowPass"
+            class="mb-10"
+          >
+            <td>修改密码: </td><td>****** <slot name="edit" /></td>
+          </tr>
+          <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
         </table>
       </div>
       <template v-else>
@@ -172,23 +184,35 @@ export default {
     }
 
     &.showLabels {
-      grid-template-areas:
+      /* grid-template-areas:
         "avatar name";
       grid-template-columns: 60px auto;
       grid-template-rows: 60px;
-      column-gap: 0;
+      column-gap: 0; */
+      display: flex;
+      column-gap:0;
       .name {
+        display: flex;
         line-height: unset;
       }
-
+      table tr {
+        display: block;
+      }
       table tr td:not(:first-of-type) {
         padding-left: 10px;
       }
+      table tr td:not(:last-of-type) {
+        width: 100px;
+      }
     }
 
     .avatar {
-      grid-area: avatar;
-      text-align: center;
+      /* grid-area: avatar;
+      text-align: center; */
+      width: 287px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       DIV.empty {
         border: 1px solid var(--border);