dashboard-shell-shell 3.0.5-logtest.2 → 3.0.5-order.1

package/components/nav/TopLevelMenuNew.vue

@@ -0,0 +1,607 @@
+<script>
+import BrandImage from '@shell/components/BrandImage';
+import ClusterIconMenu from '@shell/components/ClusterIconMenu';
+import IconOrSvg from '../IconOrSvg';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { mapGetters } from 'vuex';
+import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
+import { MENU_MAX_CLUSTERS, PINNED_CLUSTERS } from '@shell/store/prefs';
+import { sortBy } from '@shell/utils/sort';
+import { ucFirst } from '@shell/utils/string';
+import { KEY } from '@shell/utils/platform';
+import { getVersionInfo } from '@shell/utils/version';
+import { SETTING } from '@shell/config/settings';
+import { getProductFromRoute } from '@shell/utils/router';
+import { isRancherPrime } from '@shell/config/version';
+import Pinned from '@shell/components/nav/Pinned';
+import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
+import { debounce } from 'lodash';
+import { sameContents } from '@shell/utils/array';
+import Group from '@shell/components/nav/Group';
+import {
+  RcDropdown,
+  RcDropdownItem,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
+import { isAdminUser } from '@shell/store/type-map.js'
+import menuDropdown from './menuDropdown'
+
+export default {
+  components: {
+    menuDropdown,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger,
+    RcDropdownSeparator,
+    BrandImage,
+    ClusterIconMenu,
+    IconOrSvg,
+    Pinned,
+    Group
+  },
+
+  data() {
+    const { displayVersion, fullVersion } = getVersionInfo(this.$store);
+    const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
+
+    const canPagination = this.$store.getters[`management/paginationEnabled`]({
+      id:      MANAGEMENT.CLUSTER,
+      context: 'side-bar',
+    }) && this.$store.getters[`management/paginationEnabled`]({
+      id:      CAPI.RANCHER_CLUSTER,
+      context: 'side-bar',
+    });
+    const helper = canPagination ? new TopLevelMenuHelperPagination({ $store: this.$store }) : new TopLevelMenuHelperLegacy({ $store: this.$store });
+    const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
+    const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
+
+    if (!canPagination) {
+      // Reduce the impact of the initial load, but only if we're not making a request
+      const args = {
+        pinnedIds:   this.pinnedIds,
+        searchTerm:  this.search,
+        unPinnedMax: this.maxClustersToShow
+      };
+
+      helper.update(args);
+    }
+
+    return {
+      shown:             false,
+      displayVersion,
+      fullVersion,
+      clusterFilter:     '',
+      hasProvCluster,
+      maxClustersToShow: MENU_MAX_CLUSTERS,
+      emptyCluster:      BLANK_CLUSTER,
+      routeCombo:        false,
+
+      canPagination,
+      helper,
+      debouncedHelperUpdateSlow:   debounce((...args) => this.helper.update(...args), 1000),
+      debouncedHelperUpdateMedium: debounce((...args) => this.helper.update(...args), 750),
+      debouncedHelperUpdateQuick:  debounce((...args) => this.helper.update(...args), 200),
+      provClusters,
+      mgmtClusters,
+    };
+  },
+
+  computed: {
+    ...mapGetters(['clusterId']),
+    ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']),
+    ...mapGetters({ features: 'features/get' }),
+
+    pinnedIds() {
+      return this.$store.getters['prefs/get'](PINNED_CLUSTERS);
+    },
+
+    showClusterSearch() {
+      return this.allClustersCount > this.maxClustersToShow;
+    },
+
+    allClustersCount() {
+      const counts = this.$store.getters[`management/all`](COUNT)?.[0]?.counts || {};
+      const count = counts[MANAGEMENT.CLUSTER] || {};
+
+      return count?.summary.count;
+    },
+
+    // New
+    search() {
+      return (this.clusterFilter || '').toLowerCase();
+    },
+
+    // New
+    showPinClusters() {
+      return !this.clusterFilter;
+    },
+
+    // New
+    searchActive() {
+      return !!this.search;
+    },
+
+    /**
+     * Only Clusters that are pinned
+     *
+     * (see description of helper.clustersPinned for more details)
+     */
+    pinFiltered() {
+      return this.hasProvCluster ? this.helper.clustersPinned : [];
+    },
+
+    /**
+     * Used to shown unpinned clusters OR results of text search
+     *
+     * (see description of helper.clustersOthers for more details)
+     */
+    clustersFiltered() {
+      return this.hasProvCluster ? this.helper.clustersOthers : [];
+    },
+
+    pinnedClustersHeight() {
+      const pinCount = this.pinFiltered.length;
+      const height = pinCount > 2 ? (pinCount * 43) : 90;
+
+      return `min-height: ${ height }px`;
+    },
+    clusterFilterCount() {
+      return this.clusterFilter ? this.clustersFiltered.length : this.allClustersCount;
+    },
+
+    multiClusterApps() {
+      const options = this.options;
+
+      return options.filter((opt) => {
+        const filterApps = (opt.inStore === 'management' || opt.isMultiClusterApp) && opt.category !== 'configuration' && opt.category !== 'legacy';
+
+        if (this.isRancherInHarvester) {
+          return filterApps && opt.category !== 'hci';
+        } else {
+          // We expect the location of Virtualization Management to remain the same when rancher-manage-support is not enabled
+          return filterApps;
+        }
+      });
+    },
+
+    configurationApps() {
+      const options = this.options;
+
+      return options.filter((opt) => opt.category === 'configuration');
+    },
+
+    hciApps() {
+      const options = this.options;
+
+      return options.filter((opt) => this.isRancherInHarvester && opt.category === 'hci');
+    },
+
+    options() {
+      const cluster = this.clusterId || this.$store.getters['defaultClusterId'];
+
+      // TODO plugin routes
+      const entries = this.$store.getters['type-map/activeProducts']?.map((p) => {
+        // Try product-specific index first
+        const to = p.to || {
+          name:   `c-cluster-${ p.name }`,
+          params: { cluster }
+        };
+
+        const matched = this.$router.getRoutes().filter((route) => route.name === to.name);
+
+        if ( !matched.length ) {
+          to.name = 'c-cluster-product';
+          to.params.product = p.name;
+        }
+
+        return {
+          label:             this.$store.getters['i18n/withFallback'](`product."${ p.name }"`, null, ucFirst(p.name)),
+          icon:              `icon-${ p.icon || 'copy' }`,
+          svg:               p.svg,
+          value:             p.name,
+          removable:         p.removable !== false,
+          inStore:           p.inStore || 'cluster',
+          weight:            p.weight || 1,
+          category:          p.category || 'none',
+          to,
+          isMultiClusterApp: p.isMultiClusterApp,
+        };
+      });
+
+      return sortBy(entries, ['weight']);
+    },
+
+    canEditSettings() {
+      return (this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING)?.resourceMethods || []).includes('PUT');
+    },
+
+    hasSupport() {
+      return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
+    },
+
+    isCurrRouteClusterExplorer() {
+      return this.$route?.name?.startsWith('c-cluster');
+    },
+
+    productFromRoute() {
+      return getProductFromRoute(this.$route);
+    },
+
+    aboutText() {
+      // If a version number (starts with 'v') then use that
+      if (this.displayVersion.startsWith('v')) {
+        // Don't show the '.0' for a minor release (e.g. 2.8.0, 2.9.0 etc)
+        return !this.displayVersion.endsWith('.0') ? this.displayVersion : this.displayVersion.substr(0, this.displayVersion.length - 2);
+      }
+
+      // Default fallback to 'About'
+      return this.t('about.title');
+    },
+
+    largeAboutText() {
+      return this.aboutText.length > 6;
+    },
+
+    appBar() {
+      let activeFound = false;
+
+      // order is important for the object keys here
+      // since we want to check last pinFiltered and clustersFiltered
+      const appBar = {
+        hciApps:           this.hciApps,
+        multiClusterApps:  this.multiClusterApps,
+        configurationApps: this.configurationApps,
+        pinFiltered:       this.pinFiltered,
+        clustersFiltered:  this.clustersFiltered,
+      };
+
+      Object.keys(appBar).forEach((menuSection) => {
+        const menuSectionItems = appBar[menuSection];
+        const isClusterCheck = menuSection === 'pinFiltered' || menuSection === 'clustersFiltered';
+
+        // need to reset active state on other menu items
+        menuSectionItems.forEach((item) => {
+          item.isMenuActive = false;
+
+          if (!activeFound && this.checkActiveRoute(item, isClusterCheck)) {
+            activeFound = true;
+            item.isMenuActive = true;
+          }
+        });
+      });
+
+      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';
+    }
+  },
+
+  // See https://github.com/rancher/dashboard/issues/12831 for outstanding performance related work
+  watch: {
+    $route() {
+      this.shown = false;
+    },
+
+    // Before SSP world all of these changes were kicked off given Vue change detection to properties in a computed method.
+    // Changes could come from two scenarios
+    // 1. Changes made by the user (pin / search). Could be tens per second
+    // 2. Changes made by rancher to clusters (state, label, etc change). Could be hundreds a second
+    // They can be restricted to help the churn caused from above
+    // 1. When SSP enabled reduce http spam
+    // 2. When SSP is disabled (legacy) reduce fn churn (this was a known performance customer issue)
+
+    pinnedIds: {
+      immediate: true,
+      handler(neu, old) {
+        if (sameContents(neu, old)) {
+          return;
+        }
+
+        // Low throughput (user click). Changes should be shown quickly
+        this.updateClusters(neu, 'quick');
+      }
+    },
+
+    search() {
+      // Medium throughput. Changes should be shown quickly, unless we want to reduce http spam in SSP world
+      this.updateClusters(this.pinnedIds, this.canPagination ? 'medium' : 'quick');
+    },
+
+    provClusters: {
+      handler(neu, old) {
+        // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
+      },
+      deep:      true,
+      immediate: true,
+    },
+
+    mgmtClusters: {
+      handler(neu, old) {
+        // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
+      },
+      deep:      true,
+      immediate: true,
+    },
+
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
+  },
+
+  mounted() {
+    document.addEventListener('keyup', this.handler);
+  },
+
+  beforeUnmount() {
+    document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
+  },
+
+  methods: {
+    isAdminUser,
+    checkActiveRoute(obj, isClusterRoute) {
+      // for Cluster links in main nav: check if route is a cluster explorer one + check if route cluster matches cluster obj id + check if curr product matches route product
+      if (isClusterRoute) {
+        return this.isCurrRouteClusterExplorer && this.$route?.params?.cluster === obj?.id && this.productFromRoute === this.currentProduct?.name;
+      }
+
+      // for remaining main nav items, check if curr product matches route product is enough
+      return this.productFromRoute === obj?.value;
+    },
+
+    handleKeyComboClick() {
+      this.routeCombo = !this.routeCombo;
+    },
+
+    clusterMenuClick(ev, cluster) {
+      if (this.routeCombo) {
+        ev.preventDefault();
+
+        if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
+          const clusterRoute = {
+            name:   this.$route.name,
+            params: { ...this.$route.params },
+            query:  { ...this.$route.query }
+          };
+
+          clusterRoute.params.cluster = cluster.id;
+
+          return this.$router.push(clusterRoute);
+        }
+      }
+
+      return this.$router.push(cluster.clusterRoute);
+    },
+
+    handler(e) {
+      if (e.keyCode === KEY.ESCAPE ) {
+        this.hide();
+      }
+    },
+
+    hide() {
+      this.shown = false;
+      if (this.clustersFiltered === 0) {
+        this.clusterFilter = '';
+      }
+    },
+
+    toggle() {
+      this.shown = !this.shown;
+    },
+
+    async goToHarvesterCluster() {
+      const localCluster = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((C) => C.id === 'fleet-local/local');
+
+      try {
+        await localCluster.goToHarvesterCluster();
+      } catch {
+      }
+    },
+
+    getTooltipConfig(item, showWhenClosed = false) {
+      if (!item) {
+        return;
+      }
+
+      let contentText = '';
+      let content;
+      let popperClass = '';
+
+      // this is the normal tooltip scenario where we are just passing a string
+      if (typeof item === 'string') {
+        contentText = item;
+        content = this.shown ? null : contentText;
+
+      // if key combo is pressed, then we update the tooltip as well
+      } else if (this.routeCombo &&
+        typeof item === 'object' &&
+        !Array.isArray(item) &&
+        item !== null &&
+        item.ready) {
+        contentText = this.t('nav.keyComboTooltip');
+
+        if (showWhenClosed) {
+          content = !this.shown ? contentText : null;
+        } else {
+          content = this.shown ? contentText : null;
+        }
+
+      // this is scenario where we show a tooltip when we are on the expanded menu to show full description
+      } else {
+        contentText = item.label;
+        // this adds a class to the tooltip container so that we can control the max width
+        popperClass = 'menu-description-tooltip';
+
+        if (item.description) {
+          contentText += `<br><br>${ item.description }`;
+        }
+
+        if (showWhenClosed) {
+          content = !this.shown ? contentText : null;
+        } else {
+          content = this.shown ? contentText : null;
+
+          // this adds a class to adjust tooltip position so it doesn't overlap the cluster pinning action
+          popperClass += ' description-tooltip-pos-adjustment';
+        }
+      }
+
+      return {
+        content,
+        placement: 'right',
+        popperClass
+      };
+    },
+
+    updateClusters(pinnedIds, speed = 'slow' | 'medium' | 'quick') {
+      const args = {
+        pinnedIds,
+        searchTerm:  this.search,
+        unPinnedMax: this.maxClustersToShow
+      };
+
+      switch (speed) {
+      case 'slow':
+        this.debouncedHelperUpdateSlow(args);
+        break;
+      case 'medium':
+        this.debouncedHelperUpdateMedium(args);
+        break;
+      case 'quick':
+        this.debouncedHelperUpdateQuick(args);
+        break;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="topMenuList">
+    <div v-if="multiClusterApps.length" class="topMenu_GlobalApp">
+      <div class="topMenu_GlobalApp_item">
+        <div v-if="isAdminUser($store.getters)" class="topLevelMenu">
+          <span class="option-link">运营</span>
+        </div>
+        <div v-else class="topLevelMenu">
+          <span class="option-link">云安全中心</span>
+        </div>
+      </div>
+      <div v-for="(a, i) in appBar.multiClusterApps" @click="hide()" class="topMenu_GlobalApp_item">
+        <div v-if="a.value !== 'fleet'" :class="{'active-menu-link': a.isMenuActive }" class="topLevelMenu">
+          <router-link
+            class="option"
+            :to="a.to"
+            role="link"
+            :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
+          >
+            <span class="option-link">{{ a.label }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <!-- <menuDropdown>
+      <template #title>
+        <div @click="hide()" :class="{'active-menu-link': appBar.clustersFiltered.some(s => { return s.isMenuActive }) }" class="topLevelMenu">
+          <div class="option-link">
+            容器管理
+          </div>
+        </div>
+      </template>
+      <template #dropdownCollection>
+        <div class="dropdown_box">
+          <div class="topLevelMenu_title" @click="hide()" v-for="(c, index) in appBar.clustersFiltered" :key="index">
+            <div
+              v-if="c.ready"
+              v-shortkey.push="{windows: ['alt'], mac: ['option']}"
+              :data-testid="`menu-cluster-${ c.id }`"
+              :class="{'active-menu-link': c.isMenuActive }"
+              :to="c.clusterRoute"
+              role="button"
+              :aria-label="`${t('nav.ariaLabel.cluster')} ${ c.label }`"
+              @click="clusterMenuClick($event, c)"
+              @shortkey="handleKeyComboClick"
+            >
+              <div class="option-link">{{ c.label }}</div>
+            </div>
+            <div
+              v-else
+              class="option cluster selector disabled"
+              :data-testid="`pinned-menu-cluster-disabled-${ c.id }`"
+            >
+              <div style="color: #eee;">{{ c.label }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </menuDropdown> -->
+
+  </div>
+</template>
+<style lang="scss" scoped>
+.dropdown_box {
+  min-width: 140px;
+}
+.option-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #333;
+}
+.active-menu-link.topLevelMenu {
+  border-bottom: 1px solid var(--link);
+}
+.active-menu-link {
+  .option-link {
+    color: var(--link);
+  }
+}
+.topMenuList {
+  display: flex;
+}
+.topMenu_GlobalApp {
+  display: flex;
+}
+.topLevelMenu {
+  height: 50px;
+  font-size: 14px;
+  min-width: 120px;
+  line-height: 50px;
+  padding: 0 20px;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.topLevelMenu:hover {
+  cursor: pointer;
+  .option-link {
+    color: var(--link);
+  }
+}
+.topLevelMenu_title {
+  height: 38px;
+  display: flex;
+  line-height: 38px;
+  align-items: center;
+  justify-content: center;
+}
+.topLevelMenu_title:hover {
+  cursor: pointer;
+  background-color: var(--dropdown-hover-bg);
+  .option-link {
+    color: var(--link);
+  }
+}
+</style>

package/components/nav/configurationApps.vue

@@ -0,0 +1,102 @@
+<script>
+import { mapGetters } from 'vuex';
+import { ucFirst } from '@shell/utils/string';
+import menuPrompt from './menuPrompt'
+
+export default {
+  components: {
+    menuPrompt
+  },
+  computed: {
+    ...mapGetters(['clusterId', 'currentProduct']),
+
+    options() {
+      const cluster = this.clusterId || this.$store.getters['defaultClusterId'];
+
+      return this.$store.getters['type-map/activeProducts']?.map((p) => {
+        const to = p.to || { name: `c-cluster-${p.name}`, params: { cluster } };
+
+        const matched = this.$router.getRoutes().filter((route) => route.name === to.name);
+        if (!matched.length) {
+          to.name = 'c-cluster-product';
+          to.params.product = p.name;
+        }
+
+        return {
+          label: this.$store.getters['i18n/withFallback'](`product."${p.name}"`, null, ucFirst(p.name)),
+          to,
+          category: p.category || 'none',
+          value: p.name,
+          isMenuActive: false
+        };
+      }) || [];
+    },
+
+    configurationApps() {
+      return this.options.filter(opt => opt.category === 'configuration');
+    },
+
+    appBar() {
+      let activeFound = false;
+      const appBar = { configurationApps: this.configurationApps };
+
+      appBar.configurationApps.forEach(item => {
+        item.isMenuActive = false;
+        if (!activeFound && this.currentProduct?.name === item.value) {
+          item.isMenuActive = true;
+          activeFound = true;
+        }
+      });
+
+      return appBar;
+    }
+  },
+
+  methods: {
+    hide() {
+      // 可保留清理逻辑，如果不需要可以为空
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-for="(a, i) in appBar.configurationApps" :key="i">
+    <div v-if="a.value !== 'uiplugins'" class="headerIcon_box" @click="hide()">
+      <menuPrompt :align="'center'">
+        <template #title>
+          <router-link
+            class="option"
+            :to="a.to"
+            role="link"
+            :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
+          >
+            <img class="headerIcon_img" :src="require(`@/shell/assets/images/headerIcon/${a.value}.svg`)" alt="" srcset="">
+          </router-link>
+        </template>
+        <template #dropdownCollection>
+          <div class="description">{{ a.label }}</div>
+        </template>
+      </menuPrompt>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.headerIcon_box {
+  width: 45px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .headerIcon_img {
+    width: 18px;
+    height: 18px;
+    margin-top: 4px;
+  }
+  .description {
+    padding: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+</style>