dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.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

@@ -260,6 +260,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 +319,9 @@ export default {
       immediate: true,
     },
 
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
   },
 
   mounted() {
@@ -320,6 +330,7 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
   },
 
   methods: {

package/components/nav/Type.vue

@@ -64,7 +64,10 @@ export default {
       // If the route explicitly declares the nav path that should be highlighted, then use that
       if (routeMetaNav) {
         const cluster = this.$route.params?.cluster;
-        const navPath = routeMetaNav.replace(':cluster', cluster);
+        const product = this.$route.params?.product;
+        const navPath = routeMetaNav
+          .replace(':cluster', cluster)
+          .replace(':product', product);
 
         if (navPath === typeFullPath) {
           return true;

package/components/nav/WindowManager/ContainerLogs.vue

@@ -10,8 +10,11 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
+import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
+import { useStore } from 'vuex';
 import { debounce } from 'lodash';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 import { escapeRegex } from '@shell/utils/string';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
@@ -91,6 +94,7 @@ export default {
     Checkbox,
     AsyncButton,
     VirtualList,
+    ContainerLogsActions,
   },
 
   props: {
@@ -130,6 +134,13 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       container:           this.initialContainer || this.pod?.defaultContainerName,
@@ -145,7 +156,8 @@ export default {
       lines:               [],
       now:                 new Date(),
       logItem:             shallowRef(LogItem),
-      isContainerMenuOpen: false
+      isContainerMenuOpen: false,
+      range:               '',
     };
   },
 
@@ -636,72 +648,85 @@ export default {
         </div>
 
         <div class="log-action log-action-group ml-5">
-          <div
-            role="menu"
-            tabindex="0"
-            :aria-label="t('wm.containerLogs.logActionMenu')"
-            @click="openContainerMenu"
-            @blur.capture="closeContainerMenu"
-            @keyup.enter="openContainerMenu"
-            @keyup.space="openContainerMenu"
-          >
-            <v-dropdown
-              :triggers="[]"
-              :shown="isContainerMenuOpen"
-              placement="top"
-              popperClass="containerLogsDropdown"
-              :autoHide="false"
-              :flip="false"
-              :container="false"
-              @focus.capture="openContainerMenu"
+          <template v-if="featureDropdownMenu">
+            <ContainerLogsActions
+              :range="range"
+              :range-options="rangeOptions"
+              :wrap="wrap"
+              :timestamps="timestamps"
+              @toggle-range="toggleRange"
+              @toggle-wrap="toggleWrap"
+              @toggle-timestamps="toggleTimestamps"
+            />
+          </template>
+          <template v-else>
+            <div
+              role="menu"
+              tabindex="0"
+              :aria-label="t('wm.containerLogs.logActionMenu')"
+              @click="openContainerMenu"
+              @blur.capture="closeContainerMenu"
+              @keyup.enter="openContainerMenu"
+              @keyup.space="openContainerMenu"
             >
-              <button
-                class="btn role-primary btn-cog"
-                role="button"
-                :aria-label="t('wm.containerLogs.options')"
+              <v-dropdown
+                :triggers="[]"
+                :shown="isContainerMenuOpen"
+                placement="top"
+                popperClass="containerLogsDropdown"
+                :autoHide="false"
+                :flip="false"
+                :container="false"
+                @focus.capture="openContainerMenu"
               >
-                <i
-                  class="icon icon-gear"
-                  :alt="t('wm.containerLogs.options')"
-                />
-                <i
-                  class="icon icon-chevron-up"
-                  :alt="t('wm.containerLogs.expand')"
-                />
-              </button>
-
-              <template #popper>
-                <div class="filter-popup">
-                  <LabeledSelect
-                    v-model:value="range"
-                    class="range"
-                    :label="t('wm.containerLogs.range.label')"
-                    :options="rangeOptions"
-                    :clearable="false"
-                    placement="top"
-                    role="menuitem"
-                    @update:value="toggleRange($event)"
+                <button
+                  class="btn role-primary btn-cog"
+                  role="button"
+                  :aria-label="t('wm.containerLogs.options')"
+                >
+                  <i
+                    class="icon icon-gear"
+                    :alt="t('wm.containerLogs.options')"
                   />
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.wrap')"
-                      :value="wrap"
-                      role="menuitem"
-                      @update:value="toggleWrap"
-                    />
-                  </div>
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.timestamps')"
-                      :value="timestamps"
+                  <i
+                    class="icon icon-chevron-up"
+                    :alt="t('wm.containerLogs.expand')"
+                  />
+                </button>
+
+                <template #popper>
+                  <div class="filter-popup">
+                    <LabeledSelect
+                      v-model:value="range"
+                      class="range"
+                      :label="t('wm.containerLogs.range.label')"
+                      :options="rangeOptions"
+                      :clearable="false"
+                      placement="top"
                       role="menuitem"
-                      @update:value="toggleTimestamps"
+                      @update:value="toggleRange($event)"
                     />
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.wrap')"
+                        :value="wrap"
+                        role="menuitem"
+                        @update:value="toggleWrap"
+                      />
+                    </div>
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.timestamps')"
+                        :value="timestamps"
+                        role="menuitem"
+                        @update:value="toggleTimestamps"
+                      />
+                    </div>
                   </div>
-                </div>
-              </template>
-            </v-dropdown>
-          </div>
+                </template>
+              </v-dropdown>
+            </div>
+          </template>
         </div>
 
         <div class="log-action log-action-group ml-5">
@@ -874,4 +899,5 @@ export default {
       }
     }
   }
+
 </style>

package/components/nav/WindowManager/ContainerLogsActions.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  RcDropdown,
+  RcDropdownTrigger,
+  RcDropdownItemCheckbox,
+  RcDropdownItemSelect,
+} from '@components/RcDropdown';
+
+defineProps({
+  range: {
+    type:    String,
+    default: '',
+  },
+  rangeOptions: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  wrap:       Boolean,
+  timestamps: Boolean,
+});
+
+defineEmits([
+  'toggleRange',
+  'toggleWrap',
+  'toggleTimestamps',
+]);
+
+</script>
+
+<template>
+  <rc-dropdown>
+    <rc-dropdown-trigger
+      class="condensed"
+    >
+      <i
+        class="icon icon-gear"
+        :alt="t('wm.containerLogs.options')"
+      />
+      <template #after>
+        <i
+          class="icon icon-chevron-up"
+          :alt="t('wm.containerLogs.expand')"
+        />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item-select
+        :model-value="range"
+        :options="rangeOptions"
+        @select="$emit('toggleRange', $event)"
+      />
+      <rc-dropdown-item-checkbox
+        :model-value="wrap"
+        @click="$emit('toggleWrap', $event)"
+      >
+        {{ t('wm.containerLogs.wrap') }}
+      </rc-dropdown-item-checkbox>
+      <rc-dropdown-item-checkbox
+        :model-value="timestamps"
+        @click="$emit('toggleTimestamps', $event)"
+      >
+        {{ t('wm.containerLogs.timestamps') }}
+      </rc-dropdown-item-checkbox>
+    </template>
+  </rc-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .condensed {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    min-height: 30px;
+  }
+</style>