dashboard-shell-shell 1.0.122 → 1.0.1000000081

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,10 @@ 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';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 // i18n-uses resourceDetail.header.*
 
@@ -26,7 +31,13 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
+    // BadgeState,
+    DotState,
+    Banner,
+    ButtonGroup,
+    ExtensionPanel,
+    TabTitle,
+    ActionMenu,
   },
   props: {
     value: {
@@ -92,11 +103,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')
     };
   },
 
@@ -237,7 +256,7 @@ export default {
       const defaultLocation = {
         name:   'c-cluster-product-resource',
         params: {
-          resource: this.resource,
+          resource: harvesterhci2cloud(this.resource),
           product,
         }
       };
@@ -381,7 +400,9 @@ export default {
     demoDisplay() {
       const product = this.$store.getters['productId'];
 
-      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this.location.params.resource);
+      const resources = this.location?.params?.resource || ''
+
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
 
       if (productId === undefined) {
         return '';
@@ -401,11 +422,12 @@ export default {
     },
     menuIcon() {
       const product = this.$store.getters['productId'];
+      
+      const resources = this.location?.params?.resource || ''
 
-      return this.$store.getters['type-map/groupsForVirTypes'](product, this.location.params.resource);
+      return this.$store.getters['type-map/groupsForVirTypes'](product, cloud2harvesterhci(resources));
     },
 
-
     location() {
       const { parent } = this;
 
@@ -452,6 +474,7 @@ export default {
 
 <template>
   <div class="masthead">
+    <div class="title">
       <!-- 创建api密钥不需要面包屑 -->
       <div
         v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
@@ -659,17 +682,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>
@@ -696,6 +730,7 @@ export default {
     />
 
     <slot />
+    </div>
   </div>
 </template>
 

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

@@ -16,6 +16,7 @@ import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeCha
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -94,7 +95,8 @@ export default {
     const store = this.$store;
     const route = this.$route;
     const params = route.params;
-    let resourceType = this.resourceOverride || params.resource;
+    const cloneParams = clone(params)
+    let resourceType = this.resourceOverride || cloud2harvesterhci(cloneParams.resource);
 
     const inStore = this.storeOverride || store.getters['currentStore'](resourceType);
     const realMode = this.realMode;
@@ -384,18 +386,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 +405,53 @@ 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 paramsResource = this.$route.params.resource
+      const routerResource = clone(this.$route.params.resource)
+      const resource = resourceOverride || this.resourceOverride || cloud2harvesterhci(routerResource);
+      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>
@@ -431,15 +469,14 @@ 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"
@@ -491,6 +528,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

@@ -6,6 +6,7 @@ import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 import TabTitle from '@shell/components/TabTitle';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 /**
  * Resource List Masthead component.
@@ -85,20 +86,24 @@ export default {
   data() {
     const params = { ...this.$route.params };
 
-    const formRoute = { name: `${ this.$route.name }-create`, params };
+    params.resource = harvesterhci2cloud(params.resource)
+
+    const formRoute = { name: `${ cloud2harvesterhci(this.$route.name) }-create`, params };
 
     const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
 
     const yamlRoute = {
-      name:  `${ this.$route.name }-create`,
+      name:  `${ cloud2harvesterhci(this.$route.name) }-create`,
       params,
       query: { [AS]: _YAML },
     };
 
+    const tabList = ['集群配置'];
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
+      tabList,
     };
   },
 
@@ -126,7 +131,7 @@ export default {
       return this.$store.getters['type-map/labelFor'](this.schema, 99);
     },
     _descriptionDisplay() {
-      const key = this.$route.path.split('/').pop();
+      const key = cloud2harvesterhci(this.$route.path.split('/').pop());
 
       return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
     },
@@ -201,7 +206,7 @@ export default {
         </span>
         <span class="excram-last-name">{{ _typeDisplay }}</span>
       </div>
-      <h1 class="m-0">
+      <h1 class="m-0 descrip-name">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
           v-if="isExplorer"
           :resource="favoriteResource || resource"

package/components/ResourceList/index.vue

@@ -9,6 +9,7 @@ import { ResourceListComponentName } from './resource-list.config';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
+import { cloud2harvesterhci } from '@shell/utils/router'
 
 export default {
   name: ResourceListComponentName,
@@ -40,7 +41,7 @@ export default {
 
   async fetch() {
     const store = this.$store;
-    const resource = this.resource;
+    const resource = cloud2harvesterhci(this.resource);
 
     const schema = this.schema;
 
@@ -88,7 +89,7 @@ export default {
   data() {
     const getters = this.$store.getters;
     const params = { ...this.$route.params };
-    const resource = params.resource;
+    const resource = cloud2harvesterhci(params.resource);
 
     const hasListComponent = getters['type-map/hasCustomList'](resource);
 
@@ -200,7 +201,7 @@ export default {
   created() {
     let listComponent = false;
 
-    const resource = this.$route.params.resource;
+    const resource = cloud2harvesterhci(this.$route.params.resource);
     const hasListComponent = this.$store.getters['type-map/hasCustomList'](resource);
 
     if ( hasListComponent ) {

package/components/ResourceTable.vue

@@ -650,6 +650,7 @@ export default {
       <ButtonGroup
         v-model:value="group"
         :options="_groupOptions"
+        v-if="parsedPagingParams.singularLabel !== 'PCI设备'"
       />
     </template>
 

package/components/SideNav.vue

@@ -20,6 +20,7 @@ import { TYPE_MODES } from '@shell/store/type-map';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 import LocaleSelector from '@shell/components/LocaleSelector';
+import { cloud2harvesterhci, harvester2cloud } from '@shell/utils/router';
 
 export default {
   name:       'SideNav',
@@ -154,7 +155,7 @@ export default {
     },
 
     isVirtualProduct() {
-      return this.rootProduct.name === HARVESTER;
+      return this.rootProduct.name === harvester2cloud(HARVESTER);
     },
 
     allNavLinks() {
@@ -236,7 +237,7 @@ export default {
 
     getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
-      const currentType = this.$route.params.resource || '';
+      const currentType = cloud2harvesterhci(this.$route.params.resource) || '';
 
       for ( const productId of loadProducts ) {
         const modes = [TYPE_MODES.BASIC];
@@ -394,8 +395,12 @@ export default {
 </script>
 
 <template>
-  <nav class="side-nav">
-    <div class="side-all-title">
+  <nav
+    class="side-nav"
+    role="navigation"
+    :aria-label="t('nav.ariaLabel.sideNav')"
+  >
+  <div class="side-all-title">
           控制台
   </div>
     <!-- Actual nav -->
@@ -417,36 +422,36 @@ export default {
       </template>
     </div>
     <!-- SideNav footer area (seems to be tied to harvester) -->
-    <div
+    <!-- <div
       v-if="showProductFooter"
       class="footer"
-    >
+    > -->
       <!-- support link -->
-      <router-link
+      <!-- <router-link
         :to="supportLink"
         class="pull-right"
         role="link"
         :aria-label="t('nav.support', {hasSupport: true})"
       >
         {{ t('nav.support', {hasSupport: true}) }}
-      </router-link>
+      </router-link> -->
       <!-- version number -->
-      <span
+      <!-- <span
         v-clean-tooltip="{content: displayVersion, placement: 'top'}"
         class="clip version text-muted"
       >
         {{ displayVersion }}
-      </span>
+      </span> -->
 
       <!-- locale selector -->
-      <LocaleSelector
+      <!-- <LocaleSelector
         v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
         mode="login"
         :show-icon="false"
-      />
-    </div>
+      /> -->
+    <!-- </div> -->
     <!-- SideNav footer alternative -->
-    <div
+    <!-- <div
       v-else
       class="version text-muted flex"
     >
@@ -467,7 +472,7 @@ export default {
           (Harvester-{{ harvesterVersion }})
         </span>
       </template>
-    </div>
+    </div> -->
   </nav>
 </template>
 

package/components/SlideInPanelManager.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const HEADER_HEIGHT = 55;
+
+const store = useStore();
+const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const currentComponent = computed(() => store.getters['slideInPanel/component']);
+const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
+
+const panelTop = computed(() => {
+  const banner = document.getElementById('banner-header');
+  let height = HEADER_HEIGHT;
+
+  if (banner) {
+    height += banner.clientHeight;
+  }
+
+  return `${ height }px`;
+});
+
+const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+const panelWidth = computed(() => currentProps?.value?.width || '33%');
+const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
+
+const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+
+function closePanel() {
+  store.commit('slideInPanel/close');
+}
+</script>
+
+<template>
+  <Teleport to="#slides">
+    <div id="slide-in-panel-manager">
+      <div
+        v-show="isOpen"
+        data-testid="slide-in-glass"
+        class="slide-in-glass"
+        :class="{ 'slide-in-glass-open': isOpen }"
+        @click="closePanel"
+      />
+      <div
+        class="slide-in"
+        :class="{ 'slide-in-open': isOpen }"
+        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+      >
+        <div class="header">
+          <div class="title">
+            {{ panelTitle }}
+          </div>
+          <i
+            class="icon icon-close"
+            data-testid="slide-in-close"
+            :trigger-focus-trap="true"
+            tabindex="0"
+            @click="closePanel"
+          />
+        </div>
+        <div class="main-panel">
+          <component
+            :is="currentComponent"
+            v-if="isOpen || currentComponent"
+            v-bind="currentProps"
+            data-testid="slide-in-panel-component"
+            class="dynamic-panel-content"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.slide-in-glass {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+}
+.slide-in-glass-open {
+  background-color: var(--body-bg);
+  display: block;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.slide-in {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  transition: right 0.5s ease;
+  border-left: 1px solid var(--border);
+  background-color: var(--body-bg);
+}
+
+.slide-in-open {
+  right: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-bottom: 1px solid var(--border);
+
+  .title {
+    flex: 1;
+    font-weight: bold;
+  }
+
+  .icon-close {
+    cursor: pointer;
+  }
+}
+
+.main-panel {
+  padding: 10px;
+  overflow: auto;
+}
+</style>

package/components/SortableTable/THead.vue

@@ -273,10 +273,13 @@ export default {
             v-clean-tooltip="tooltip(col)"
             class="content"
           >
-            <span v-clean-html="labelFor(col)" />
+            <span
+              v-clean-html="labelFor(col)"
+              class="text-no-break"
+            />
             <span
               v-if="col.subLabel"
-              class="text-muted"
+              class="text-muted text-no-break"
             >
               {{ col.subLabel }}
             </span>
@@ -296,10 +299,12 @@ export default {
               <i
                 v-if="isCurrent(col) && !descending"
                 class="icon icon-sort-down icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconDesc')"
               />
               <i
                 v-if="isCurrent(col) && descending"
                 class="icon icon-sort-up icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconAsc')"
               />
             </span>
           </div>
@@ -308,6 +313,7 @@ export default {
       <th
         v-if="rowActions && hasAdvancedFiltering && tableColsOptions.length"
         :width="rowActionsWidth"
+        :align="'left'"
       >
         <div
           ref="table-options"
@@ -456,7 +462,7 @@ export default {
     }
 
     th {
-      padding: 8px 5px;
+      padding: 16.5px 5px;
       font-weight: normal;
       border: 0;
       color: var(--body-text);
@@ -496,7 +502,7 @@ export default {
       &:last-child {
         padding-right: 10px;
         padding-left: 12px;
-
+        width: 200px;
       }
 
       &:not(.sortable) > SPAN {

package/components/SortableTable/actions.js

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 
 // Use a visible display type to reduce flickering
-const displayType = 'inline-block';
+const displayType = 'inline-flex';
 
 export default {