dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/nav/NotificationCenter/index.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+} from 'vue';
+import { useStore } from 'vuex';
+import Notification from './Notification.vue';
+import NotificationHeader from './NotificationHeader.vue';
+import {
+  RcDropdown,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
+
+const store = useStore();
+const allNotifications = computed(() => store.getters['notifications/all']);
+const unreadLevelClass = computed(() => {
+  return store.getters['notifications/unreadCount'] === 0 ? '' : 'unread';
+});
+
+// There may be more notifications than we can show on screen, so the popover needs to scroll
+const scroller = ref<HTMLElement>();
+
+// Close all of the open growls when the notification center is shown, so that they do not overlap
+const open = (opened: boolean) => {
+  if (opened) {
+    store.dispatch('growl/clear');
+  }
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :aria-label="t('nav.notifications.label')"
+    @update:open="open"
+  >
+    <rc-dropdown-trigger
+      tertiary
+      data-testid="notifications-center"
+      :aria-label="t('nav.notifications.button.label')"
+    >
+      <div class="level-indicator">
+        <i class="icon icon-lg icon-notify-bell" />
+        <div
+          :data-testid="`notifications-center-status${ unreadLevelClass }`"
+          class="trigger-level"
+          :class="unreadLevelClass"
+        />
+      </div>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <div
+        data-testid="notifications-center-panel"
+        class="notification-dropdown"
+      >
+        <NotificationHeader class="header" />
+        <div
+          v-if="allNotifications.length === 0"
+          class="no-notifications"
+        >
+          <div class="hands">
+            &#x1F64C;
+          </div>
+          <div>
+            {{ t('notificationCenter.caughtUp', {}, true) }}
+          </div>
+        </div>
+        <div
+          ref="scroller"
+          class="scroll-container"
+        >
+          <template
+            v-for="(a, index) in allNotifications"
+            :key="a.id"
+          >
+            <rc-dropdown-separator
+              v-if="index > 0"
+              class="notification-separator"
+            />
+            <Notification :item="a" />
+          </template>
+        </div>
+      </div>
+    </template>
+  </rc-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .notification-dropdown {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    .header {
+      flex: 0;
+    }
+
+    .scroll-container {
+      overflow: auto;
+      max-height: 80vh;
+      padding: 3px 0; // Need padding at top and bottom in order to show the focus border for the notification
+    }
+  }
+
+  .notification-separator {
+    margin: 0 3px;
+    width: auto;
+  }
+
+  .no-notifications {
+    text-align: center;
+    min-width: 340px;
+    margin: 40px 16px;
+
+    .hands {
+      font-size: 53px;
+      padding-top: 0;
+    }
+
+    > div {
+      padding-top: 16px;
+    }
+  }
+
+  .level-indicator {
+    display: flex;
+    position: relative;
+    height: 20px;
+    width: 18px;
+
+    .trigger-level {
+      position: absolute;
+      right: -6px;
+      top: -4px;
+      border-radius: 50%;
+      height: 8px;
+      width: 8px;
+      background-color: var(--primary);
+      transition: opacity 0.5s ease-in-out;
+      opacity: 0;
+
+      &.unread {
+        opacity: 1;
+        background-color: var(--error);
+      }
+    }
+  }
+</style>

package/components/nav/TopLevelMenu.helper.ts

@@ -1,10 +1,12 @@
 import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { STORE } from '@shell/store/store-types';
 import { PaginationParam, PaginationParamFilter, PaginationSort } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilterClusters } from '@shell/utils/cluster';
 import PaginationWrapper from '@shell/utils/pagination-wrapper';
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
+import { reactive } from 'vue';
 import { LocationAsRelativeRaw } from 'vue-router';
 
 interface TopLevelMenuCluster {
@@ -86,7 +88,15 @@ export interface TopLevelMenuHelper {
   */
   clustersOthers: Array<TopLevelMenuCluster>;
 
-  update: (args: UpdateArgs) => Promise<void>
+  /**
+   * Fetch all cluster resources
+   */
+  update: (args: UpdateArgs) => Promise<void>;
+
+  /**
+   * Cleanup on destroy of TopLevelMenu
+   */
+  destroy: () => Promise<void>;
 }
 
 export abstract class BaseTopLevelMenuHelper {
@@ -106,7 +116,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersPinned: Array<TopLevelMenuCluster> = [];
+  public clustersPinned: Array<TopLevelMenuCluster> = reactive([]);
 
   /**
   * Filter mgmt clusters by
@@ -121,7 +131,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersOthers: Array<TopLevelMenuCluster> = [];
+  public clustersOthers: Array<TopLevelMenuCluster> = reactive([]);
 
   constructor({ $store }: {
     $store: VuexStore,
@@ -141,7 +151,7 @@ export abstract class BaseTopLevelMenuHelper {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
-      ready:           mgmtCluster.isReady, // && !provCluster?.hasError,
+      ready:           mgmtCluster.isReady,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
       iconColor:       mgmtCluster.iconColor,
@@ -165,69 +175,64 @@ export abstract class BaseTopLevelMenuHelper {
 export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
   private args?: UpdateArgs;
 
-  private clustersPinnedWrapper: PaginationWrapper;
-  private clustersOthersWrapper: PaginationWrapper;
-  private provClusterWrapper: PaginationWrapper;
-
-  private commonClusterFilters: PaginationParam[];
+  private clustersPinnedWrapper: PaginationWrapper<any>;
+  private clustersOthersWrapper: PaginationWrapper<any>;
+  private provClusterWrapper: PaginationWrapper<any>;
 
   constructor({ $store }: {
       $store: VuexStore,
   }) {
     super({ $store });
 
-    this.commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
-
+    // Fetch all PINNED clusters (see `clustersPinned` description for details)
+    // No need to monitor for changes, the UNPINNED request will handle it
     this.clustersPinnedWrapper = new PaginationWrapper({
       $store,
-      onUpdate: () => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
-        if (this.args) {
-          this.update(this.args);
-        }
-      },
+      id:         'tlm-pinned-clusters',
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all UNPINNED clusters capped at 10 (see `clustersOthers` description for details)
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-unpinned-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all prov clusters for the mgmt clusters we have
     this.provClusterWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-prov-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      CAPI.RANCHER_CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
   }
 
@@ -258,6 +263,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       return res;
     }, {} as { [mgmtId: string]: ProvCluster});
 
+    // Filter out mgmt clusters that don't have matching prov cluster and convert remaining to required format
     const _clustersNotPinned = res.notPinned
       .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id])
       .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id]));
@@ -274,6 +280,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.cacheClusters();
   }
 
+  async destroy() {
+    this.clustersPinnedWrapper.onDestroy();
+    this.clustersOthersWrapper.onDestroy();
+    this.provClusterWrapper.onDestroy();
+  }
+
+  /**
+   * Helper function
+   *
+   * This extracts all the functionality previously in TopLevelMenu
+   *
+   * Construct SSP filter params
+   */
   private constructParams({
     pinnedIds,
     searchTerm,
@@ -289,7 +308,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     includePinned?: boolean,
     excludePinned?: boolean,
   }): PaginationParam[] {
-    const filters: PaginationParam[] = [...this.commonClusterFilters];
+    const commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
+    const filters: PaginationParam[] = [...commonClusterFilters];
 
     if (pinnedIds) {
       if (includePinned) {
@@ -341,7 +361,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -362,7 +381,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -386,7 +404,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 [],
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 }
@@ -419,6 +436,10 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     this.cacheClusters();
   }
 
+  async destroy() {
+    // No-op
+  }
+
   /**
    * Filter mgmt clusters by
    * 1. Harvester type 1 (filterOnlyKubernetesClusters)

package/components/nav/TopLevelMenu.vue

@@ -257,6 +257,13 @@ export default {
       });
 
       return appBar;
+    },
+
+    hideLocalCluster() {
+      const hideLocalSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.HIDE_LOCAL_CLUSTER) || {};
+      const value = hideLocalSetting.value || hideLocalSetting.default || 'false';
+
+      return value === 'true';
     }
   },
 
@@ -309,6 +316,9 @@ export default {
       immediate: true,
     },
 
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
   },
 
   mounted() {
@@ -317,6 +327,7 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
   },
 
   methods: {
@@ -460,12 +471,14 @@ export default {
 
 <template>
   <div>
-    <!-- Overlay -->
+    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
+
+    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -476,8 +489,11 @@ export default {
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
       >
-        <!-- Logo and name -->
+        
+        <!-- ====================== 菜单头部（Logo + 菜单按钮） ====================== -->
         <div class="title">
+          
+          <!-- 菜单按钮（汉堡图标） -->
           <div
             data-testid="top-level-menu"
             :aria-label="t('nav.expandCollapseAppBar')"
@@ -488,6 +504,8 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
+
+            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -500,19 +518,22 @@ export default {
               fill="none"
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
+
+          <!-- 品牌Logo -->
           <div class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
               :alt="t('nav.alt.mainMenuRancherLogo')"
-              file-name="rancher-logo.svg"
+              file-name="logo.png"
             />
           </div>
         </div>
 
-        <!-- Menu body -->
+        <!-- ====================== 菜单内容区 ====================== -->
         <div class="body">
           <div>
-            <!-- Home button -->
+            
+            <!-- 首页按钮 -->
             <div @click="hide()">
               <router-link
                 class="option cluster selector home"
@@ -520,6 +541,8 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
+
+                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -536,12 +559,14 @@ export default {
                 </div>
               </router-link>
             </div>
-            <!-- Search bar -->
+            
+            <!-- 集群搜索框 -->
             <div
               v-if="showClusterSearch"
               class="clusters-search"
             >
               <div class="clusters-search-count">
+                <!-- 当前搜索到的集群数量 -->
                 <span>{{ clusterFilterCount }}</span>
                 {{ t('nav.search.clusters') }}
                 <i
@@ -560,10 +585,14 @@ export default {
                   :tabindex="!shown ? -1 : 0"
                   :aria-label="t('nav.search.ariaLabel')"
                 >
+
+                <!-- 搜索图标 -->
                 <i
                   class="magnifier icon icon-search"
                   :class="{ active: clusterFilter }"
                 />
+
+                <!-- 清空按钮 -->
                 <i
                   v-if="clusterFilter"
                   class="icon icon-close"
@@ -573,9 +602,11 @@ export default {
             </div>
           </div>
 
-          <!-- Harvester extras -->
+          <!-- ====================== Harvester 相关功能区 ====================== -->
           <template v-if="hciApps.length">
             <div class="category" />
+
+            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -591,6 +622,8 @@ export default {
                 </div>
               </a>
             </div>
+
+            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -613,14 +646,14 @@ export default {
             </div>
           </template>
 
-          <!-- Cluster menu -->
+          <!-- ====================== 集群列表 ====================== -->
           <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
-              <!-- Pinned Clusters -->
+              <!-- 已固定集群 -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -631,11 +664,13 @@ export default {
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+
+                  <!-- 可用集群按钮 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`pinned-menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="clusterBtn cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -665,7 +700,9 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -694,6 +731,8 @@ export default {
                     />
                   </span>
                 </div>
+
+                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -702,7 +741,7 @@ export default {
                 </div>
               </div>
 
-              <!-- Clusters Search result -->
+              <!-- 搜索结果集群列表 -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -710,11 +749,13 @@ export default {
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+                  
+                  <!-- 可用集群 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="cluster selector option clusterBtn"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -745,7 +786,9 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -777,7 +820,7 @@ export default {
                 </div>
               </div>
 
-              <!-- No clusters message -->
+              <!-- 无匹配集群提示 -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -806,8 +849,9 @@ export default {
             </router-link>
           </template>
 
-          <!-- MULTI CLUSTER APPS -->
+          <!-- ====================== 多集群应用区 ====================== -->
           <div class="category">
+            <!-- 多集群应用 -->
             <template v-if="multiClusterApps.length">
               <div
                 class="category-title"
@@ -823,6 +867,7 @@ export default {
                 @click="hide()"
               >
                 <router-link
+                  v-if="a.value !== 'fleet'"
                   class="option"
                   :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
@@ -879,7 +924,7 @@ export default {
         <div
           class="footer"
         >
-          <div
+          <!-- <div
             v-if="canEditSettings"
             class="support"
             @click="hide()"
@@ -904,7 +949,7 @@ export default {
             >
               {{ aboutText }}
             </router-link>
-          </div>
+          </div> -->
         </div>
       </div>
     </transition>
@@ -962,6 +1007,10 @@ export default {
   $option-padding-left: 14px;
   $option-height: $icon-size + $option-padding + $option-padding;
 
+  .clusterBtn {
+    background-color: var(--nav-icon-badge-bg);
+  }
+
   .side-menu {
     .menu {
       position: absolute;
@@ -1058,7 +1107,6 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
-      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1066,7 +1114,7 @@ export default {
         align-items: center;
         cursor: pointer;
         display: flex;
-        color: var(--link);
+        color: var(--primary);
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
@@ -1076,7 +1124,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--default-active-text);
+          color: var(--primary);
           font-weight: 500;
         }
 
@@ -1148,7 +1196,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--primary);
         }
 
         .top-menu-icon {
@@ -1570,7 +1618,7 @@ export default {
     }
 
     :deep() .v-popper__arrow-container {
-      display: none;
+      display: none !important;
     }
 
     :deep() .v-popper:focus {