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

package/assets/styles/global/_button.scss

@@ -169,13 +169,13 @@ button,
 }
 
 .role-multi-action {
-  //  background: var(--accent-btn);
-  //  border: solid thin var(--primary);
-   color: var(--primary) !important;
-   border-radius: 2px;
-   min-width: 32px;
-   height: 32px;
-   width: 32px;
+  background-color: var(--body-bg);
+  border: solid thin var(--primary);
+  color: var(--primary) !important;
+  border-radius: 2px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
 }
 
 .icon-group i {

package/assets/styles/global/_tooltip.scss

@@ -11,7 +11,7 @@
     background: var(--tooltip-bg);
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     color: var(--tooltip-text);
-    border-radius: 4px;
+    border-radius: 2px;
     padding: 8px;
   }
 
@@ -123,14 +123,14 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
+  border-radius: 2px;
 
   .v-popper__inner {
-    border-radius: 4px;
+    border-radius: 2px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: var(--border-radius-lg);
+    border-radius: 0px;
     border: none;
 
     a {

package/assets/styles/themes/_light.scss

@@ -8,6 +8,8 @@ $darker    : #333;
 //light disabled
 $dark      : #ffffff;
 
+$scroll_dark: #8b8b8b;
+
 //light border and buttons
 $medium    : #d7d7d7;
 
@@ -364,7 +366,7 @@ BODY, .theme-light {
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$dark};
+  --scrollbar-thumb            : #{$scroll_dark};
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 

package/assets/translations/zh-hans.yaml

@@ -7856,3 +7856,79 @@ gitPicker:
 networkAttachmentDefinition:
   tabs:
     config: 配置
+
+
+component:
+  drawer:
+    chrome:
+      ariaLabel:
+        close: 关闭抽屉
+      close: 关闭
+    resourceDetailDrawer:
+      title: "{resourceName} ({resourceType}) - 配置"
+      editConfig: 编辑配置
+      editYaml: 编辑YAML
+      ariaLabel:
+        editConfig: 编辑配置
+        editYaml: 编辑YAML
+      yamlTab:
+        title: YAML
+      configTab:
+        title: 配置
+  resource:
+    detail:
+      card:
+        resourceUsage:
+          used: Used
+          amount: '{used} of {available}'
+          cpu: CPU
+          memory: Memory
+          pods: Pods
+        resourcesCard:
+          title: 资源
+          rows:
+            services: 服务
+            ingresses: Ingresses
+            referredToBy: 参考
+            refersTo: 引用
+        podsCard:
+          title: Pods
+          ariaResourceName: pods
+        insightsCard:
+          title: Insights
+          rows:
+            conditions: Conditions
+            events: Events
+        scaler:
+          ariaLabel:
+            increase: Increase {resourceName}
+            decrease: Decrease {resourceName}
+      titleBar:
+        showConfiguration: 显示配置
+        ariaLabel:
+          actionMenu: 更多操作
+          showConfiguration: 显示｛resource｝的整个配置
+      metadata:
+        labelsAndAnnotations: 标签和注释
+        identifyingInformation:
+          createdBy: 创建
+          namespace: 命名空间
+          project: 项目
+          age: 使用时长
+          image: 图片
+          ready: 准备
+          up-to-date: Up-to-date
+          available: 可用
+          serviceAccount: 服务帐户
+          type: 类型
+          certificate: 证书
+          issuer: Issuer
+          expires: 到期
+          workspace: 工作区
+        annotations:
+          title: 注释
+        labels:
+          title: 标签
+        keyValue:
+          noRows: 此资源上没有配置｛propertyName}.
+          showConfiguration: 显示配置

package/components/ActionDropdown.vue

@@ -212,7 +212,7 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
-      border-radius: 4px;
+      border-radius: 2px;
 
       LI {
         padding: 10px;

package/components/CopyToClipboard.vue

@@ -42,3 +42,18 @@ export default {
     @click="clicked"
   />
 </template>
+
+<style lang="scss"scoped>
+button {
+  min-width: auto;
+}
+
+.bg-success{
+  background-color: var(--success-hover-text) !important;
+  color: #333 !important;
+}
+.bg-success:hover{
+  background-color: var(--success-hover-text) !important;
+  color: var(--primary) !important;
+}
+</style>

package/components/Drawer/Chrome.vue

@@ -35,7 +35,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
         </div>
       </slot>
     </div>
-    <div class="body pp-4">
+    <div class="body">
       <slot name="body" />
     </div>
     <div class="footer pp-4">
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     }
 
     .body {
-      background-color: var(--drawer-body-bg);
+      background-color: var(--body-bg);
       flex: 1;
       overflow-y: scroll;
     }

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -16,37 +16,37 @@ const store = useStore();
 const i18n = useI18n(store);
 </script>
 <template>
-  <Tab
+  <!-- <Tab
     class="config-tab"
     name="config-tab"
     :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
   >
-    <div class="container">
-      <component
-        :is="props.component"
-        :value="props.resource"
-        :liveValue="props.resource"
-        :resourceType="props.resourceType"
-        :mode="_VIEW"
-        :real-mode="_VIEW"
-        :initial-value="props.resource"
-        :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
-        as="config"
-      />
-    </div>
-  </Tab>
+</Tab> -->
+<div class="container">
+  <component
+    :is="props.component"
+    :value="props.resource"
+    :liveValue="props.resource"
+    :resourceType="props.resourceType"
+    :mode="_VIEW"
+    :real-mode="_VIEW"
+    :initial-value="props.resource"
+    :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+    as="config"
+  />
+</div>
 </template>
 
 <style lang="scss" scoped>
+.container {
+  background-color: var(--body-bg);
+  border-radius: var(--border-radius-md);
+  padding: 16px;
+  max-width: 100%;
+  width: 100%;
+  position: relative;
+}
 .config-tab {
-  .container {
-    background-color: var(--body-bg);
-    border-radius: var(--border-radius-md);
-    padding: 16px;
-    max-width: 100%;
-    width: 100%;
-    position: relative;
-  }
 
   // Handle the loading indicator
   :deep() .overlay-content-mode {

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -85,10 +85,10 @@ const canEdit = computed(() => {
           v-if="configTabProps"
           v-bind="configTabProps"
         />
-        <YamlTab
+        <!-- <YamlTab
           v-if="yamlTabProps"
           v-bind="yamlTabProps"
-        />
+        /> -->
       </Tabbed>
     </template>
     <template #additional-actions>

package/components/ExplorerMembers.vue

@@ -293,6 +293,7 @@ export default {
       :create-button-label="t('members.createActionLabel')"
       :is-creatable="false"
       :type-display="t('members.clusterAndProject')"
+      
     />
     <Banner
       v-if="isLocal"
@@ -304,7 +305,7 @@ export default {
         name="cluster-membership"
         :label="t('members.clusterMembership')"
       >
-        <div
+        <!-- <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
@@ -314,7 +315,7 @@ export default {
           >
             {{ t('members.createActionLabel') }}
           </router-link>
-        </div>
+        </div> -->
         <ResourceTable
           :schema="schema"
           :headers="headers"
@@ -325,7 +326,21 @@ export default {
           :loading="$fetchState.pending || !currentCluster || loadingClusterBindings"
           sub-search="subSearch"
           :sub-fields="['nameDisplay']"
-        />
+        >
+          <template #header-right>
+            <div
+              v-if="canEditClusterMembers"
+              class="row mb-10 mr-10 cluster-add"
+            >
+              <router-link
+                :to="createLocation"
+                class="btn role-primary pull-right"
+              >
+                {{ t('members.createActionLabel') }}
+              </router-link>
+            </div>
+          </template>
+        </ResourceTable>
       </Tab>
       <Tab
         v-if="canManageProjectMembers && !isHarvester"

package/components/PodSecurityAdmission.vue

@@ -218,7 +218,7 @@ export default defineComponent({
       :key="i"
       class="row row--y-center mb-20"
     >
-      <span class="col">
+      <span class="col span-1">
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -89,12 +89,10 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
-      margin-bottom: 8px;
-
+      min-height: 40px;
       .value {
         display: flex;
         flex-direction: row;
-        align-items: center;
 
         &, & * {
           max-width: 100%;

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -53,13 +53,13 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
 
 <template>
   <div class="key-value">
-    <div class="heading">
+    <div class="heading h40">
       <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2 text-deemphasized"
+      class="empty text-deemphasized"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
@@ -78,7 +78,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     <div
       v-for="row in visibleRows"
       :key="displayValue(row)"
-      class="row"
+      class="row h40"
     >
       <Rectangle
         v-clean-tooltip="displayValue(row)"
@@ -104,18 +104,22 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    
+    .h40 {
+        min-height: 40px;
+    }
 
     .count {
         margin-left: 24px;
     }
 
     .heading {
-        margin-bottom: 8px;
     }
 
     .row {
         display: block;
         width: 100%;
+        line-height: 40px;
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

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

@@ -31,10 +31,11 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 
 <template>
   <SpacedRow
-    class="metadata ppb-3"
+    class="metadata ppb-5"
     v-bind="$attrs"
   >
     <div
+      v-if="identifyingInformation?.length > 0"
       class="identifying-info"
     >
       <IdentifyingInformation :rows="identifyingInformation" />

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

@@ -1,14 +1,15 @@
 <template>
-  <h1 class="title">
+  <div class="title">
     <slot name="default" />
-  </h1>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-  h1.title {
+  .title {
     display: inline-block;
     align-items: center;
     display: flex;
     flex-direction: row;
+    font-size: 14px;
   }
 </style>

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

@@ -13,6 +13,7 @@ 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'
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -36,6 +37,8 @@ export interface TitleBarProps {
   showViewOptions?: boolean;
 
   onShowConfiguration?: (returnFocusSelector: string) => void;
+  value?: any;
+  parentRouteOverride?: string;
 }
 
 const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
@@ -43,7 +46,7 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  parentRouteOverride, value, resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
@@ -72,6 +75,42 @@ const viewOptions = computed(() => {
   ];
 });
 
+const Svg = require('~shell/assets/images/API.svg')
+
+const parent = computed(() =>{
+  const displayName = value?.parentNameOverride || store.getters['type-map/labelFor'](schema);
+  const product = store.getters['currentProduct'].name;
+
+  const defaultLocation = {
+    name:   'c-cluster-product-resource',
+    params: {
+      resource: resource,
+      product,
+    }
+  };
+
+  const location = value?.parentLocationOverride || defaultLocation;
+
+  if (parentRouteOverride) {
+    location.name = parentRouteOverride;
+  }
+
+  const out = {
+    location
+  };
+
+  return out;
+})
+
+const menuIcon = computed(() => {
+  const product = store.getters['productId'];
+
+  const resources = parent?.location?.params?.resource || ''
+
+  return store.getters['type-map/groupsForVirTypes'](product, resources);
+})
+
+
 watch(
   () => currentView.value,
   () => {
@@ -82,33 +121,58 @@ watch(
 
 <template>
   <div class="title-bar">
+    <breadcrumb :resource="resource"/>
     <Top>
       <Title class="title">
+        <span v-if="menuIcon && parentRouteOverride === 'account' && resource=== 'token'" 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. -->
@@ -134,6 +198,7 @@ watch(
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
+          :showIcon="true"
           button-role="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
@@ -141,12 +206,6 @@ watch(
         />
       </div>
     </Top>
-    <div
-      v-if="description"
-      class="bottom description text-deemphasized"
-    >
-      {{ description }}
-    </div>
     <ExtensionPanel
       :resource="resource"
       :type="ExtensionPoint.PANEL"
@@ -156,12 +215,27 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+.detailIcon-span{
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  background: var(--primary);
+  margin-right: 10px;
+}
+.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 +244,20 @@ 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;
+    background-color: var(--primary);
+
+    a{
+      color: #fff;
+    }
   }
 
   .description {

package/components/ResourceDetail/legacy.vue

@@ -464,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"
@@ -478,6 +478,8 @@ export default {
       :resource-subtype="resourceSubtype"
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
+
+      :isManuallyHide="false"
     >
       <!-- <DetailTop
         v-if="isView && isDetail"

package/components/SortableTable/index.vue

@@ -2664,7 +2664,7 @@ export default {
   .sort-table-div{
       width:100%;
       white-space:nowrap;
-      overflow-x: auto;
+      // overflow-x: auto;
   }
 
   /* 滚动阴影左边 */

package/components/Tabbed/index.vue

@@ -389,7 +389,7 @@ export default {
     flex-direction: row;
 
     + .tab-container {
-      border: solid thin var(--border);
+      // border: solid thin var(--border);
     }
 
     .tab.active {