dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-logTest.1

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

@@ -52,10 +52,7 @@ export default {
       helper.update(args);
     }
 
-    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
-
     return {
-      topLevelPermissions,
       shown:             false,
       displayVersion,
       fullVersion,
@@ -260,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';
     }
   },
 
@@ -312,6 +316,9 @@ export default {
       immediate: true,
     },
 
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
   },
 
   mounted() {
@@ -320,6 +327,7 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
   },
 
   methods: {
@@ -512,7 +520,7 @@ export default {
           </div>
 
           <!-- 品牌Logo -->
-          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'" class="side-menu-logo">
+          <div class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
               :alt="t('nav.alt.mainMenuRancherLogo')"
@@ -523,7 +531,7 @@ export default {
 
         <!-- ====================== 菜单内容区 ====================== -->
         <div class="body">
-          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
+          <div>
             
             <!-- 首页按钮 -->
             <div @click="hide()">
@@ -639,7 +647,7 @@ export default {
           </template>
 
           <!-- ====================== 集群列表 ====================== -->
-          <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin' && !!allClustersCount">
+          <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
@@ -822,7 +830,7 @@ export default {
               </div>
             </div>
 
-            <!-- 查看所有集群按钮 -->
+            <!-- See all clusters -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -842,129 +850,106 @@ export default {
           </template>
 
           <!-- ====================== 多集群应用区 ====================== -->
-          <div :style="!(topLevelPermissions && topLevelPermissions === 'superadmin') ? { placeContent: 'flex-start', display: 'flex', flexDirection: 'column' } : {}" class="category">
+          <div class="category">
             <!-- 多集群应用 -->
             <template v-if="multiClusterApps.length">
-              <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
-                <div
-                  class="category-title"
+              <div
+                class="category-title"
+              >
+                <hr role="none">
+                <span>
+                  {{ t('nav.categories.multiCluster') }}
+                </span>
+              </div>
+              <div
+                v-for="(a, i) in appBar.multiClusterApps"
+                :key="i"
+                @click="hide()"
+              >
+                <router-link
+                  v-if="a.value !== 'fleet'"
+                  class="option"
+                  :class="{'active-menu-link': a.isMenuActive }"
+                  :to="a.to"
+                  role="link"
+                  :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
                 >
-                  <hr role="none">
-                  <span>
-                    {{ t('nav.categories.multiCluster') }}
-                  </span>
-                </div>
-                <template v-for="(a, i) in appBar.multiClusterApps" :key="i">
-                  <div
-                    v-if="a.value === 'harvesterManager'"
-                    @click="hide()"
-                  >
-                    <router-link
-                      class="option"
-                      :class="{'active-menu-link': a.isMenuActive }"
-                      :to="a.to"
-                      role="link"
-                      :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
-                    >
-                      <IconOrSvg
-                        v-clean-tooltip="getTooltipConfig(a.label)"
-                        class="app-icon"
-                        :icon="a.icon"
-                        :src="a.svg"
-                      />
-                      <span class="option-link">{{ a.label }}</span>
-                    </router-link>
-                  </div>
-                </template>
-              </template>
-              <template v-else>
-                <template v-for="(a, i) in appBar.multiClusterApps" :key="i">
-                  <div
-                    v-if="a.value === 'harvesterManager'"
-                    @click="hide()"
-                  >
-                    <router-link
-                      class="option"
-                      :class="{'active-menu-link': a.isMenuActive }"
-                      :to="a.to"
-                      role="link"
-                      :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
-                    >
-                      <IconOrSvg
-                        v-clean-tooltip="getTooltipConfig(a.label)"
-                        class="app-icon"
-                        :icon="a.icon"
-                        :src="a.svg"
-                      />
-                      <span class="option-link">{{ a.label }}</span>
-                    </router-link>
-                  </div>
-                </template>
-              </template>
+                  <IconOrSvg
+                    v-clean-tooltip="getTooltipConfig(a.label)"
+                    class="app-icon"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <span class="option-link">{{ a.label }}</span>
+                </router-link>
+              </div>
             </template>
 
-            <!-- 配置类应用 -->
-             <div>
-               <template v-if="configurationApps.length">
-                 <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
-                   <div
-                     class="category-title"
-                   >
-                     <hr role="none">
-                     <span>
-                       {{ t('nav.categories.configuration') }}
-                     </span>
-                   </div>
-                  <div
-                    v-for="(a, i) in appBar.configurationApps"
-                    :key="i"
-                    @click="hide()"
-                  >
-                    <router-link
-                      class="option"
-                      :class="{'active-menu-link': a.isMenuActive }"
-                      :to="a.to"
-                      role="link"
-                      :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
-                    >
-                      <IconOrSvg
-                        v-clean-tooltip="getTooltipConfig(a.label)"
-                        class="app-icon"
-                        :icon="a.icon"
-                        :src="a.svg"
-                      />
-                      <div>{{ a.label }}</div>
-                    </router-link>
-                  </div>
-                 </template>
-                 <template v-else>
-                  <template v-for="(a, i) in appBar.configurationApps" :key="i">
-                    <div
-                      v-if="a.value === 'settings' || a.value === 'auth'"
-                      @click="hide()"
-                    >
-                      <router-link
-                        class="option"
-                        :class="{'active-menu-link': a.isMenuActive }"
-                        :to="a.to"
-                        role="link"
-                        :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
-                      >
-                        <IconOrSvg
-                          v-clean-tooltip="getTooltipConfig(a.label)"
-                          class="app-icon"
-                          :icon="a.icon"
-                          :src="a.svg"
-                        />
-                        <div>{{ a.label }}</div>
-                      </router-link>
-                    </div>
-                  </template>
-                 </template>
-                 <div style="height: 40px;"></div>
-               </template>
-             </div>
+            <!-- Configuration apps menu -->
+            <template v-if="configurationApps.length">
+              <div
+                class="category-title"
+              >
+                <hr role="none">
+                <span>
+                  {{ t('nav.categories.configuration') }}
+                </span>
+              </div>
+              <div
+                v-for="(a, i) in appBar.configurationApps"
+                :key="i"
+                @click="hide()"
+              >
+                <router-link
+                  class="option"
+                  :class="{'active-menu-link': a.isMenuActive }"
+                  :to="a.to"
+                  role="link"
+                  :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
+                >
+                  <IconOrSvg
+                    v-clean-tooltip="getTooltipConfig(a.label)"
+                    class="app-icon"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <div>{{ a.label }}</div>
+                </router-link>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div
+          class="footer"
+        >
+          <!-- <div
+            v-if="canEditSettings"
+            class="support"
+            @click="hide()"
+          >
+            <router-link
+              :to="{name: 'support'}"
+              role="link"
+              :aria-label="t('nav.ariaLabel.support')"
+            >
+              {{ t('nav.support', {hasSupport}) }}
+            </router-link>
           </div>
+          <div
+            class="version"
+            :class="{'version-small': largeAboutText}"
+            @click="hide()"
+          >
+            <router-link
+              :to="{ name: 'about' }"
+              role="link"
+              :aria-label="t('nav.ariaLabel.about')"
+            >
+              {{ aboutText }}
+            </router-link>
+          </div> -->
         </div>
       </div>
     </transition>
@@ -1633,7 +1618,7 @@ export default {
     }
 
     :deep() .v-popper__arrow-container {
-      display: none;
+      display: none !important;
     }
 
     :deep() .v-popper:focus {