dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/SideNav.vue

@@ -244,31 +244,31 @@ export default {
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
 
-      // if (this.principal.loginName !== 'admin') {
-      //   // 递归过滤函数（根据 label）
-      //   this.groups = this.filterMenus(this.groups);
-      // }
+
+      if (sessionStorage.getItem('TOPLEVELPERMISSIONS') !== 'superadmin') {
+        // 递归过滤函数（根据 label）
+        this.groups = this.filterMenus(this.groups);
+      }
       
 
       this.gettingGroups = false;
     },
 
-    // filterMenus(menus) {
-    //   return menus
-    //     .filter(item => item.label !== 'RBAC') // 过滤掉顶层 RBAC
-    //     .map(item => {
-    //       let newItem = { ...item };
-    //       if (newItem.children) {
-    //         // 过滤掉 children 里的 "资源大盘"
-    //         newItem.children = newItem.children.filter(
-    //           child => child.label !== '资源大盘'
-    //         );
-    //         // 递归处理剩下的 children
-    //         newItem.children = filterMenus(newItem.children);
-    //       }
-    //       return newItem;
-    //     });
-    // },
+    filterMenus(menus) {
+      return menus.filter(item => item.name !== 'inUse' && item.name !== 'apps') // 过滤掉顶层 inUse 和 apps
+        // .map(item => {
+        //   let newItem = { ...item };
+        //   if (newItem.children) {
+        //     // 过滤掉 children 里的 "资源大盘"
+        //     newItem.children = newItem.children.filter(
+        //       child => child.label !== '资源大盘'
+        //     );
+        //     // 递归处理剩下的 children
+        //     newItem.children = filterMenus(newItem.children);
+        //   }
+        //   return newItem;
+        // });
+    },
 
     getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
@@ -436,7 +436,7 @@ export default {
     :aria-label="t('nav.ariaLabel.sideNav')"
   >
     <div class="side-all-title">
-      {{ prod == 'Cloud' && currentCluster ? '控制台' : prod }}
+      {{ (prod == 'Cloud' || prod == 'Harvester') && currentCluster ? '控制台' : prod }}
     </div>
 
     <!-- Actual nav -->

package/components/SingleClusterInfo.vue

@@ -148,7 +148,8 @@ export default {
           :to="clusterToolsLink"
           class="cluster-link"
         >
-          {{ t('nav.clusterTools') }}
+          <!-- 禅道 3539 隐藏集群工具 -->
+          <!-- {{ t('nav.clusterTools') }} -->
         </router-link>
       </div>
     </div>

package/components/SlideInPanelManager.vue

@@ -1,15 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
+import { isEqual } from 'lodash';
+import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
 const currentComponent = computed(() => store.getters['slideInPanel/component']);
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
 const panelTop = computed(() => {
+  // Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the top.
+  if (currentProps?.value?.top) {
+    return currentProps?.value?.top;
+  }
+
   const banner = document.getElementById('banner-header');
   let height = HEADER_HEIGHT;
 
@@ -20,11 +32,92 @@ const panelTop = computed(() => {
   return `${ height }px`;
 });
 
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+// Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the height.
+const panelHeight = computed(() => (currentProps?.value?.height) ? (currentProps?.value?.height) : `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');
+const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
+const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+const closeOnRouteChange = computed(() => {
+  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+
+  if (!propsCloseOnRouteChange) {
+    return ['name', 'params', 'hash', 'query'];
+  }
+
+  return propsCloseOnRouteChange;
+});
+const router = useRouter();
+
+watch(
+  /**
+   * trigger focus trap
+   */
+  () => currentProps?.value?.triggerFocusTrap,
+  (neu) => {
+    if (neu) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        /**
+         * will return focus to the first iterable node of this container select
+         */
+        setReturnFocus: () => {
+          const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+
+          if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
+            console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
+
+            return '.dashboard-root';
+          }
+
+          return returnFocusSelector || '.dashboard-root';
+        }
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(
+        () => {
+          if (currentProps?.value?.focusTrapWatcherBasedVariable) {
+            return currentProps.value.focusTrapWatcherBasedVariable;
+          }
+
+          return isOpen?.value && !isClosing?.value;
+        },
+        '#slide-in-panel-manager',
+        opts,
+        false
+      );
+    }
+  }
+);
+
+watch(
+  () => router?.currentRoute?.value,
+  (newValue, oldValue) => {
+    if (!isOpen?.value) {
+      return;
+    }
+
+    if (closeOnRouteChange.value.includes('name') && !isEqual(newValue?.name, oldValue?.name)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('params') && !isEqual(newValue?.params, oldValue?.params)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('hash') && !isEqual(newValue?.hash, oldValue?.hash)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('query') && !isEqual(newValue?.query, oldValue?.query)) {
+      closePanel();
+    }
+  },
+  { deep: true }
+);
+
+onBeforeUnmount(closePanel);
 
 function closePanel() {
   store.commit('slideInPanel/close');
@@ -33,7 +126,10 @@ function closePanel() {
 
 <template>
   <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
+    <div
+      id="slide-in-panel-manager"
+      @keydown.escape="closePanel"
+    >
       <div
         v-show="isOpen"
         data-testid="slide-in-glass"
@@ -41,20 +137,27 @@ function closePanel() {
         :class="{ 'slide-in-glass-open': isOpen }"
         @click="closePanel"
       />
-      <div
+      <aside
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+        :style="{
+          width: panelWidth,
+          right: panelRight,
+          top: panelTop,
+          height: panelHeight,
+        }"
       >
-        <div class="header">
+        <div
+          v-if="showHeader"
+          class="header"
+        >
           <div class="title">
             {{ panelTitle }}
           </div>
           <i
             class="icon icon-close"
             data-testid="slide-in-close"
-            :trigger-focus-trap="true"
-            tabindex="0"
+            :tabindex="isOpen ? 0 : -1"
             @click="closePanel"
           />
         </div>
@@ -67,7 +170,7 @@ function closePanel() {
             class="dynamic-panel-content"
           />
         </div>
-      </div>
+      </aside>
     </div>
   </Teleport>
 </template>
@@ -80,12 +183,11 @@ function closePanel() {
   left: 0;
   height: 100vh;
   width: 100vw;
+  z-index: z-index('slide-in');
 }
 .slide-in-glass-open {
-  background-color: var(--body-bg);
+  background: var(--overlay-bg);
   display: block;
-  opacity: 0.5;
-  z-index: 1000;
 }
 
 .slide-in {
@@ -93,10 +195,10 @@ function closePanel() {
   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);
+  z-index: calc(z-index('slide-in') + 1);
 }
 
 .slide-in-open {

package/components/SortableTable/THead.vue

@@ -208,9 +208,54 @@ export default {
         return null;
       }
 
+      // 创建英文到中文的映射
+      const tooltipMap = {
+        'The minimum number of pods that must be available': '必须可用的 Pod 最小数量',
+        'The maximum number of pods that may be unavailable': '允许不可用的 Pod 最大数量',
+        'Calculated number of pods that may be disrupted at this time': '当前允许中断的 Pod 数量',
+        'Request represents a minimum amount of cpu/memory that a container may consume': 'Request 表示容器必须保证的最小 CPU/内存资源量',
+        'Limits control the maximum amount of cpu/memory that a container may use independent of contention on the node': 'Limits 控制容器可使用的 CPU/内存最大资源量，该限制与节点上的资源竞争情况无关',
+        'If referring to a piece of an object instead of an entire object, this string should contain a valid JSON/Go field access statement, such as desiredState.manifest.containers[2]. For example, if the object reference is to a container within a pod, this would take on a value like: "spec.containers{name}" (where "name" refers to the name of the container that triggered the event) or if no container name is specified "spec.containers[2]" (container with index 2 in this pod). This syntax is chosen only to have some well-defined way of referencing a part of an object': '如果引用对象的一部分而不是整个对象，则此字符串应包含有效的JSON/Go字段访问语句，例如desiredState.manifest.containers[2]。例如，如果对象引用指向pod中的一个容器，则其值为：“spec.containers{name}”（其中“name”表示触发事件的容器的名称），或者如果没有指定容器名称，则为“spec.containers[2]”（此pod中索引为2的容器）。选择此语法只是为了有一些定义良好的方式来引用对象的一部分',
+        'The number of times this event has occurred': '此事件发生的次数',
+        'The component reporting this event. Should be a short machine understandable string': '用于报告此事件的组件名称，应为简短且可被程序识别的字符串',
+        'The time at which the event was first recorded. (Time of server receipt is in TypeMeta.)': '事件首次被记录的时间。（服务器接收时间为TypeMeta。）',
+        'Information when was the last time the job was successfully scheduled': '上次成功调度的任务信息',
+        'The schedule in Cron format, see https://en.wikipedia.org/wiki/Cron': '以 Cron 格式表示的调度，详见 https://en.wikipedia.org/wiki/Cron',
+        'The number of nodes that should be running the daemon pod and have one or more of the daemon pod running and ready': '运行该守护 Pod 且至少有一个 Pod 就绪的节点数量',
+        'The number of nodes that are running at least 1 daemon pod and are supposed to run the daemon pod. More info: https://kubernetes.io/docs/concepts/workloads/controllers/daemonset/': '运行至少一个守护 Pod 且应运行该 Pod 的节点数量。详情：https://kubernetes.io/docs/concepts/workloads/controllers/daemonset/',
+        'The total number of nodes that should be running the daemon pod (including nodes correctly running the daemon pod). More info: https://kubernetes.io/docs/concepts/workloads/controllers/daemonset/': '应运行该守护 Pod 的节点总数（含已正确运行的节点）。详情：https://kubernetes.io/docs/concepts/workloads/controllers/daemonset/',
+        'Number of the pod with ready state': '就绪 Pod 数量',
+        'Total number of non-terminated pods targeted by this deployment that have the desired template spec': '该 Deployment 管理的符合模板规范的未终止 Pod 总数',
+        'Total number of available pods (ready for at least minReadySeconds) targeted by this deployment': '该 Deployment 管理的可用 Pod 数（至少就绪 minReadySeconds 秒）',
+        'The number of pods which reached phase Succeeded. The value increases monotonically for a given spec. However, it may decrease in reaction to scale down of elastic indexed jobs': '已完成（Succeeded）的 Pod 数量，通常单调增加，但弹性索引 Job 缩减时可能减少。',
+        'The aggregate readiness state of this pod for accepting traffic': 'Pod 接收流量的就绪状态',
+        'The number of times the containers in this pod have been restarted and when the last container in this pod has restarted': 'Pod 容器重启次数及最后重启时间',
+        'podIP address allocated to the pod. Routable at least within the cluster. Empty if not yet allocated': 'Pod 分配的 IP 地址（集群内可路由），未分配时为空。',
+        'phase represents the current phase of PersistentVolumeClaim': 'phase 表示 PersistentVolumeClaim 的当前阶段',
+        'volumeName is the binding reference to the PersistentVolume backing this claim': 'volumeName是支持此声明的持久卷的绑定引用',
+        'capacity represents the actual resources of the underlying volume': 'capacity 表示底层卷的实际资源',
+        'accessModes contains the actual access modes the volume backing the PVC has. More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1': '卷的实际访问模式（支撑该 PVC）。详情：https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1',
+        'StorageClass of the pvc': 'PVC 的存储类',
+        'VolumeAttributesClass of the pvc': 'PVC 的卷属性类',
+        'volumeMode defines what type of volume is required by the claim. Value of Filesystem is implied when not included in claim spec': 'PVC 卷模式，未指定时默认为 Filesystem',
+        'Selects the pods to which this NetworkPolicy object applies.  The array of ingress rules is applied to any pods selected by this field. Multiple network policies can select the same set of pods.  In this case, the ingress rules for each are combined additively. This field is NOT optional and follows standard label selector semantics. An empty podSelector matches all pods in this namespace': '选择此 NetworkPolicy 作用的 Pod。所选 Pod 会应用所有 ingress 规则。多个 NetworkPolicy 可选择同一 Pod 集合，其 ingress 规则会叠加。该字段必填，空 podSelector 匹配命名空间内所有 Pod。',
+        'CreationTimestamp is a timestamp representing the server time when this object was created. It is not guaranteed to be set in happens-before order across separate operations. Clients may not set this value. It is represented in RFC3339 form and is in UTC.Populated by the system. Read-only. Null for lists. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#metadata ': '对象创建时间的时间戳（UTC，RFC3339 格式），表示对象创建时的服务器时间。  系统自动填充，仅可读，客户端不可设置，不保证跨操作的先后顺序。列表对象该字段为 null。  更多信息：https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#metadata',
+        'The time at which the most recent occurrence of this event was recorded': '事件最近记录时间',
+      };
+
       const exists = this.$store.getters['i18n/exists'];
 
-      return exists(col.tooltip) ? this.t(col.tooltip) : col.tooltip;
+      // 如果 tooltip 是语言包键名
+      if (exists(col.tooltip)) {
+        return this.t(col.tooltip);
+      }
+
+      // 如果 tooltip 是英文文本，使用映射
+      if (tooltipMap[col.tooltip]) {
+        return tooltipMap[col.tooltip];
+      }
+      
+      return col.tooltip; // 回退到原始文本
     },
   }
 

package/components/SortableTable/index.vue

@@ -27,8 +27,6 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
-import MastheadBtn from '@shell/components/ResourceList/Masthead-btn.vue'
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -383,6 +381,16 @@ export default {
       type:    String,
       default: ''
     },
+
+    /**
+     * Usually the manual refresh button is controlled via isTooManyItemsToAutoUpdate
+     *
+     * However this is singular on page. In some places there's more than one...
+     */
+    hideManualRefreshButton: {
+      type:    Boolean,
+      default: false
+    },
     isBanner: {
       // Show isBanner input to filter rows
       type:    Boolean,
@@ -646,6 +654,14 @@ export default {
     namespaces() {
       return this.$store.getters['activeNamespaceCache'];
     },
+    
+    // 正确的总数显示
+    totalCount() {
+      if (this.externalPaginationEnabled && this.externalPaginationResult) {
+        return this.externalPaginationResult.total || this.externalPaginationResult.count || 0;
+      }
+      return this.rows ? this.rows.length : 0;
+    },
 
     initalLoad() {
       return !!(!this.isLoading && !this._didinit && this.rows?.length);
@@ -876,6 +892,14 @@ export default {
     //     this.$router.replace(route);
     //   }
     // },
+    // 设置当前页码
+    setPage(pageNum) {
+      if (pageNum >= 1 && pageNum <= this.totalPages) {
+        this.page = pageNum;
+        this.inputPage = ''; // 清空输入框
+        this.debouncedPaginationChanged();
+      }
+    },
     onTableScroll(table, e) {
       // 记录最后滚动的距离
       let lastScrollTop = 0;
@@ -1066,12 +1090,22 @@ export default {
       if ( col.labelKey ) {
         return this.t(col.labelKey, undefined, true);
       } else if ( col.label ) {
-        return col.label;
+        // 判断 label 是否为中文
+        if (this.isChinese(col.label)) {
+          return col.label;
+        } else {
+          return this.t(`tableHeaders.${col.label.replace(/\s+/g, '').toLowerCase()}`, undefined, true);
+        }
       }
 
       return ucFirst(col.name);
     },
 
+    // 判断字符串是否包含中文
+    isChinese(str) {
+      return /[\u4e00-\u9fa5]/.test(str);
+    },
+
     valueFor(row, col, isLabel) {
       if (typeof col.value === 'function') {
         return col.value(row);
@@ -1251,15 +1285,15 @@ export default {
   >
      <!-- 主标题和过滤器区域 -->
     <div
-      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel}"
-      class="sortable-table-header  mb-20"
+      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel }"
+      class="sortable-table-header"
     >
       <slot name="title" />
 
       <!-- 顶部功能行区域 -->
       <div
         v-if="showHeaderRow"
-        class="fixed-header-table-actions"
+        class="fixed-header-table-actions mb-20"
         :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering, }"
         style="display: flex;"
       >
@@ -1272,6 +1306,8 @@ export default {
           style="max-height: 32px;"
         >
 
+          <slot name="search-main-button" />
+
           <!-- 已应用的高级筛选 -->
           <ul
             v-if="hasAdvancedFiltering"
@@ -1359,9 +1395,6 @@ export default {
           <slot name="header-button" />
 
           <div style="display: flex;">
-
-            <slot name="search-main-button" />
-
             <!-- 搜索输入框 -->
             <input
               v-if="search"
@@ -1390,14 +1423,18 @@ export default {
          
         </div>
 
-        <!-- 中间区域插槽 -->
-        <div
-          v-if="!hasAdvancedFiltering && $slots['header-middle']"
-          class="middle"
-          style="margin-left: 10px;"
-        >
-          <slot name="header-middle" />
-        </div>
+        <div style="display: flex;">
+          <slot name="header-button-left" />
+          
+          <!-- 中间区域插槽 -->
+          <div
+             v-if="!hasAdvancedFiltering && $slots['header-middle']"
+             class="middle"
+             style="margin-left: 10px;"
+           >
+             <slot name="header-middle" />
+           </div>
+         </div>
       </div>
     </div>
 
@@ -1833,7 +1870,7 @@ export default {
         class="paging"
       >
         <div style="height: 100%; align-content: center;">
-          共 {{ filteredRows.length }} 条
+          共 {{ totalCount ? totalCount : 0 }} 条
         </div>
 
         <button
@@ -2178,7 +2215,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;
@@ -2193,6 +2230,9 @@ export default {
     td {
       padding: 8px 5px;
       border: 0;
+      white-space: normal;
+      word-break: break-all;
+      overflow-wrap: break-word;
 
       &:first-child {
         padding-left: 10px;
@@ -2209,8 +2249,9 @@ export default {
 
     tbody {
       tr {
-        border-bottom: 1px solid var(--sortable-table-top-divider);
+        border-bottom: 1px solid var(--sortable-table-top-divider) !important;
         background-color: var(--sortable-table-row-bg);
+        height: 60px;
 
         &.main-row.has-sub-row {
           border-bottom: 0;
@@ -2274,6 +2315,7 @@ export default {
 
         &:first-child {
           border-bottom: 2px solid var(--sortable-table-row-bg);
+          height: 40px;
         }
 
         &:not(:first-child) {
@@ -2650,13 +2692,15 @@ export default {
 
   .pageSelect{
     &:deep() .vs__actions:after{
-      padding-top: 10px;
+      // padding-top: 10px;
+      display: flex;
+      align-items: center;
     }
   } 
   .sort-table-div{
       width:100%;
       white-space:nowrap;
-      overflow-x: auto;
+      // overflow-x: auto;
   }
 
   /* 滚动阴影左边 */

package/components/SortableTable/paging.js

@@ -51,6 +51,21 @@ export default {
       return this.$store.getters['i18n/t'](this.pagingLabel, opt);
     },
 
+    perPage() {
+      let out = this.rowsPerPage || 0;
+
+      if ( out <= 0 ) {
+        out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
+      }
+
+      // This should ideally never happen, but the preference value could be invalid, so return something...
+      if ( out <= 0 ) {
+        out = 10;
+      }
+
+      return out;
+    },
+
     pagedRows() {
       if (this.externalPaginationEnabled) {
         return this.rows;
@@ -91,22 +106,6 @@ export default {
   },
 
   methods: {
-    // getPerPage() {
-    //   // perPage can not change while the list is displayed
-    //   let out = this.rowsPerPage || 0;
-
-    //   if ( out <= 0 ) {
-    //     out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
-    //   }
-
-    //   // This should ideally never happen, but the preference value could be invalid, so return something...
-    //   if ( out <= 0 ) {
-    //     out = 10;
-    //   }
-
-    //   return out;
-    // },
-
 
     setgetPerPage(num) {
       this.setPage(1);

package/components/SortableTable/selection.js

@@ -127,25 +127,38 @@ export default {
   },
 
   watch: {
-    // On page change
+    /**
+     * Handle changes to the page (SSP enabled)
+     */
+    externalPaginationResult() {
+      // Handle changes to the page (SSP enabled)
+      this.pageChanged(this.pagedRows);
+    },
+
+    /**
+     * Handle changes to the page (SSP disabled)
+     */
     pagedRows() {
-      // When the table contents changes:
-      // - Remove items that are in the selection but no longer in the table.
+      this.pageChanged(this.pagedRows);
+    }
+  },
 
-      const content = this.pagedRows;
+  methods: {
+    /**
+     * Remove items that are in the selection but no longer in the table.
+     */
+    pageChanged(page) {
       const toRemove = [];
 
       for (const node of this.selectedRows) {
-        if (!content.includes(node) ) {
+        if (!page.includes(node) ) {
           toRemove.push(node);
         }
       }
 
       this.update([], toRemove);
-    }
-  },
+    },
 
-  methods: {
     onToggleAll(value) {
       if ( value ) {
         this.update(this.pagedRows, []);
@@ -331,7 +344,6 @@ export default {
         return;
       }
 
-      e.preventDefault();
       e.stopPropagation();
 
       this.prevNode = node;
@@ -531,7 +543,7 @@ export default {
     },
 
     clearSelection() {
-      this.update([], this.selectedRows);
+      this.update([], [...this.selectedRows]);
     },
 
   }

package/components/StateDot/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { computed } from 'vue';
+
+interface Props {
+    color: StateColor;
+    size?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { size: '8px' });
+const backgroundColor = computed(() => stateColorCssVar(props.color));
+</script>
+
+<template>
+  <span class="state-dot" />
+</template>
+
+<style lang="scss" scoped>
+.state-dot {
+    display: inline-block;
+
+    width: v-bind('props.size');
+    height: v-bind('props.size');
+
+    border-radius: 50%;
+    background-color: v-bind('backgroundColor');
+}
+</style>