dashboard-shell-shell 1.0.112 → 1.0.113

package/components/ResourceTable.vue

@@ -77,11 +77,6 @@ export default {
       default: null,
     },
 
-    groupBy: {
-      type:    String,
-      default: null
-    },
-
     namespaced: {
       type:    Boolean,
       default: null, // Automatic from schema
@@ -117,11 +112,35 @@ export default {
       default: true,
     },
 
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key
+     */
+    groupBy: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
     },
 
+    /**
+     * If the current preference for group isn't applicable, or not set, use this instead
+     */
+    groupDefault: {
+      type:    String,
+      default: DEFAULT_GROUP,
+    },
+
     groupTooltip: {
       type:    String,
       default: 'resourceTable.groupBy.namespace',
@@ -189,10 +208,6 @@ export default {
       default: null, // Default comes from the user preference
     },
 
-    hideGroupingControls: {
-      type:    Boolean,
-      default: false
-    }
   },
 
   data() {
@@ -328,8 +343,18 @@ export default {
       // If we are grouping by a custom group, it may specify that we hide a specific column
       const custom = this._listGroupMapped?.[this.group];
 
+      let hideColumn;
+
       if (custom?.hideColumn) {
-        const idx = headers.findIndex((header) => header.name === custom.hideColumn);
+        hideColumn = custom.hideColumn;
+      } else {
+        const componentCustom = this.groupOptions?.find((go) => go.value === this.group);
+
+        hideColumn = componentCustom?.hideColumn;
+      }
+
+      if (hideColumn) {
+        const idx = headers.findIndex((header) => header.name === hideColumn);
 
         if ( idx >= 0 ) {
           headers.splice(idx, 1);
@@ -388,22 +413,24 @@ export default {
     group: {
       get() {
         // Check group is valid
-        const exists = this.groupOptions.find((g) => g.value === this._group);
+        const exists = this._groupOptions.find((g) => g.value === this._group);
 
         if (!exists) {
           // Attempt to find the default option in available options...
           // if not use the first value in the options collection...
           // and if not that just fall back to the default
-          if (this.groupOptions.find((g) => g.value === DEFAULT_GROUP)) {
-            return DEFAULT_GROUP;
+          if (this._groupOptions.find((g) => g.value === this.groupDefault)) {
+            return this.groupDefault;
           }
 
-          return this.groupOptions[0]?.value || DEFAULT_GROUP;
+          return this._groupOptions[0]?.value || this.groupDefault || DEFAULT_GROUP;
         }
 
         return this._group;
       },
       set(value) {
+        console.log('_group:===='+value);
+        
         this._group = value;
       }
     },
@@ -413,9 +440,13 @@ export default {
         const namespaceGroupable = this.$store.getters['isMultipleNamespaces'] && this.isNamespaced;
         const customGroupable = !!this.options?.listGroups?.length;
 
-        return namespaceGroupable || customGroupable;
+        // sshkey去掉分组按钮
+      if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
+        return false
       }
 
+        return namespaceGroupable || customGroupable || this.groupOptions?.length;
+      }
       return this.groupable || false;
     },
 
@@ -442,10 +473,20 @@ export default {
         return custom.field;
       }
 
+      const componentCustom = this.groupOptions?.find((go) => go.value === this.group);
+
+      if (componentCustom?.field) {
+        return componentCustom.field;
+      }
+
       return null;
     },
 
-    groupOptions() {
+    _groupOptions() {
+      if (this.groupOptions) {
+        return this.groupOptions;
+      }
+
       // Ignore the defaults below, we have an override set of groups
       // REPLACE (instead of SUPPLEMENT) defaults with listGroups (given listGroupsWillOverride is true)
       if (this.options?.listGroupsWillOverride && !!this.options?.listGroups?.length) {
@@ -569,7 +610,7 @@ export default {
     :alt-loading="altLoading"
     :group-by="computedGroupBy"
     :group="group"
-    :group-options="groupOptions"
+    :group-options="_groupOptions"
     :search="search"
     :paging="true"
     :paging-params="parsedPagingParams"
@@ -596,14 +637,14 @@ export default {
     @enter="handleEnterKeyPress"
   >
     <template
-      v-if="!hideGroupingControls && showGrouping"
+      v-if="showGrouping && _groupOptions.length > 1"
       #header-middle
     >
       <slot name="more-header-middle" />
 
       <ButtonGroup
         v-model:value="group"
-        :options="groupOptions"
+        :options="_groupOptions"
       />
     </template>
 

package/components/SideNav.vue

@@ -394,7 +394,14 @@ export default {
 </script>
 
 <template>
-  <nav class="side-nav">
+  <nav
+    class="side-nav"
+    role="navigation"
+    :aria-label="t('nav.ariaLabel.sideNav')"
+  >
+  <div class="side-all-title">
+          控制台
+  </div>
     <!-- Actual nav -->
     <div class="nav">
       <template
@@ -414,36 +421,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"
     >
@@ -464,7 +471,7 @@ export default {
           (Harvester-{{ harvesterVersion }})
         </span>
       </template>
-    </div>
+    </div> -->
   </nav>
 </template>
 
@@ -490,6 +497,10 @@ export default {
 
       A { padding-left: 0; }
     }
+    :deep() A{
+      height: 50px;
+      background-color: #fff;
+    }
 
     .tools {
       display: flex;
@@ -565,4 +576,13 @@ export default {
     display: flex;
   }
 
+
+  .side-all-title{
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #7f7f7f;
+    padding-left: 21px;
+    font-weight: bold;
+  }
 </style>

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

@@ -237,7 +237,7 @@ export default {
         v-if="subExpandColumn"
         :width="expandWidth"
       />
-      <th
+      <!-- <th
         v-for="(col) in columns"
         v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
         :key="col.name"
@@ -250,6 +250,20 @@ export default {
         @click.prevent="changeSort($event, col)"
         @keyup.enter="changeSort($event, col)"
         @keyup.space="changeSort($event, col)"
+      > -->
+      <th
+        v-for="(col) in columns"
+        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
+        :key="col.name"
+        :align="'left'"
+        :width="col.width"
+        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
+        :tabindex="col.sort ? 0 : -1"
+        class="sortable-table-head-element"
+        :aria-sort="ariaSort(col)"
+        @click.prevent="changeSort($event, col)"
+        @keyup.enter="changeSort($event, col)"
+        @keyup.space="changeSort($event, col)"
       >
         <div
           class="table-header-container"
@@ -259,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>
@@ -282,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>
@@ -294,6 +313,7 @@ export default {
       <th
         v-if="rowActions && hasAdvancedFiltering && tableColsOptions.length"
         :width="rowActionsWidth"
+        :align="'left'"
       >
         <div
           ref="table-options"
@@ -352,10 +372,17 @@ export default {
           </div>
         </div>
       </th>
+      <!-- <th
+        v-else-if="rowActions"
+        :width="rowActionsWidth"
+      /> -->
       <th
         v-else-if="rowActions"
         :width="rowActionsWidth"
-      />
+        :align="'left'"
+      >
+        操作
+      </th>
     </tr>
   </thead>
 </template>
@@ -435,7 +462,7 @@ export default {
     }
 
     th {
-      padding: 8px 5px;
+      padding: 16.5px 5px;
       font-weight: normal;
       border: 0;
       color: var(--body-text);
@@ -474,6 +501,8 @@ 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 {