dashboard-shell-shell 1.0.10000011121 → 1.6.0-alpha.1

package/pages/c/_cluster/settings/performance.vue

@@ -14,12 +14,10 @@ import paginationUtils from '@shell/utils/pagination-utils';
 import Collapse from '@shell/components/Collapse';
 
 const incompatible = {
-  incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
-  manualRefresh:      ['forceNsFilterV2', 'serverPagination'],
+  incrementalLoading: ['forceNsFilterV2'],
+  manualRefresh:      ['forceNsFilterV2'],
   forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
-  serverPagination:   ['incrementalLoading', 'manualRefresh'],
 };
-
 const l10n = {
   incrementalLoading: 'incrementalLoad',
   manualRefresh:      'manualRefresh',
@@ -97,10 +95,6 @@ export default {
       return this.$store.getters['features/get'](STEVE_CACHE);
     },
 
-    steveCacheAndSSPEnabled() {
-      return this.steveCacheEnabled && this.value.serverPagination.enabled;
-    },
-
     sspApplicableResources() {
       const storeResources = [];
       const stores = paginationUtils.getStoreSettings(this.value.serverPagination);
@@ -204,14 +198,16 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
+    <!-- 面包屑 -->
+    <div class="excram-list">全局设置 / <span style="color: #1890FF;">性能</span></div>
     <h1 class="mb-20">
       {{ t('performance.label') }}
     </h1>
     <div>
-      <div class="ui-perf-setting">
-        <!-- Inactivity -->
-        <div class="mt-20">
-          <h2>{{ t('performance.inactivity.title') }}</h2>
+      <div class="ui-perf-setting pb-40">
+        <!-- 闲置状态 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.inactivity.title') }}</h2>
           <p>{{ t('performance.inactivity.description') }}</p>
           <Checkbox
             v-model:value="value.inactivity.enabled"
@@ -238,46 +234,33 @@ export default {
             />
           </div>
         </div>
-        <!-- Websocket Notifications -->
-        <div class="mt-40">
-          <h2>{{ t('performance.websocketNotification.label') }}</h2>
+        <!-- WebSocket 通知 -->
+        <div class="mb-40 p-20" style="border: 1px solid var(--nav-border);">
+          <h2  class="mb-20">{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
             v-model:value="value.disableWebsocketNotification"
             :mode="mode"
             :label="t('performance.websocketNotification.checkboxLabel')"
-            class="mt-10 mb-20"
+            class="mt-10"
             :primary="true"
           />
         </div>
         <!-- Server Side Pagination -->
-        <div class="mt-20">
-          <h2 id="ssp-setting">
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" id="ssp-setting">
             {{ t('performance.serverPagination.label') }}
           </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
           <Banner
-            v-if="!steveCacheEnabled"
-            v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
             color="warning"
-          />
-          <Banner
-            color="error"
-            label-key="performance.serverPagination.experimental"
-          />
-          <Checkbox
-            v-model:value="value.serverPagination.enabled"
-            :mode="mode"
-            :label="t('performance.serverPagination.checkboxLabel')"
-            class="mt-10 mb-10"
-            :primary="true"
-            :disabled="!steveCacheEnabled"
-            @update:value="compatibleWarning('serverPagination', $event)"
-          />
+          >
+            <div v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)" />
+          </Banner>
           <Collapse
             :title="t('performance.serverPagination.applicable')"
-            :open="steveCacheAndSSPEnabled && ssPApplicableTypesOpen"
-            :isDisabled="!steveCacheAndSSPEnabled"
+            :open="steveCacheEnabled && ssPApplicableTypesOpen"
+            :isDisabled="!steveCacheEnabled"
             @update:open="ssPApplicableTypesOpen = !ssPApplicableTypesOpen"
           >
             <p
@@ -286,9 +269,9 @@ export default {
             />
           </Collapse>
         </div>
-        <!-- Incremental Loading -->
-        <div class="mt-20">
-          <h2>{{ t('performance.incrementalLoad.label') }}</h2>
+        <!-- 增量加载 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.incrementalLoad.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -318,9 +301,9 @@ export default {
             />
           </div>
         </div>
-        <!-- Enable manual refresh list views -->
-        <div class="mt-40">
-          <h2 v-t="'performance.manualRefresh.label'" />
+        <!-- 手动刷新 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" v-t="'performance.manualRefresh.label'" />
           <Banner
             color="warning"
           >
@@ -350,9 +333,9 @@ export default {
             />
           </div>
         </div>
-        <!-- Enable GC of resources from store -->
-        <div class="mt-40">
-          <h2 v-t="'performance.gc.label'" />
+        <!-- 资源垃圾回收 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" v-t="'performance.gc.label'" />
           <Banner
             color="warning"
           >
@@ -431,9 +414,9 @@ export default {
             </div>
           </div>
         </div>
-        <!-- Force NS filter -->
-        <div class="mt-40">
-          <h2>{{ t('performance.nsFiltering.label') }}</h2>
+        <!-- 要求资源组/项目过滤 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.nsFiltering.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -449,9 +432,9 @@ export default {
             @update:value="compatibleWarning('forceNsFilterV2', $event)"
           />
         </div>
-        <!-- Advanced Websocket Worker -->
-        <div class="mt-20">
-          <h2>{{ t('performance.advancedWorker.label') }}</h2>
+        <!-- Websocket Web Worker -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.advancedWorker.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -477,10 +460,10 @@ export default {
         :label="err"
       />
     </template>
-    <div v-if="mode === 'edit'">
+    <div class="action-btn" v-if="mode === 'edit'">
       <AsyncButton
         data-testid="performance__save-btn"
-        class="pull-right mt-20"
+        class="pull-right"
         mode="apply"
         :disabled="!canSave"
         @click="save"
@@ -490,6 +473,17 @@ export default {
 </template>
 
 <style scoped lang='scss'>
+.action-btn {
+  padding: 10px 30px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--body-bg);
+  border-top: 1px solid var(--nav-border);
+}
+
+
 .overlay {
   width: 100%;
   height: 100%;
@@ -499,17 +493,27 @@ export default {
   background-color: var(--overlay-bg);
   z-index: 1;
 }
-  .ui-perf-setting {
-    P {
-      line-height: 1.25;
-      margin-bottom: 10px;
-    }
-
-    .underline {
-      text-decoration: underline;
-    }
+.ui-perf-setting {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
   }
-  .input {
-    max-width: 25%;
+
+  .underline {
+    text-decoration: underline;
   }
+}
+.input {
+  max-width: 25%;
+}
+h2{
+  font-size: 14px;
+}
+
+.excram-list{
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 20px;
+  font-family: 'Microsoft YaHei';
+}
 </style>

package/pages/c/_cluster/uiplugins/CatalogList/index.vue

@@ -3,11 +3,12 @@ import { mapGetters } from 'vuex';
 import isEmpty from 'lodash/isEmpty';
 
 import ResourceManager from '@shell/mixins/resource-manager';
-import { SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
+import { SERVICE, SERVICE_ACCOUNT, WORKLOAD_TYPES } from '@shell/config/types';
 import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import { UI_PLUGIN_CATALOG } from '@shell/config/table-headers';
 
 import ResourceTable from '@shell/components/ResourceTable';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   emits: ['showCatalogUninstallDialog', 'showCatalogLoadDialog'],
@@ -32,6 +33,20 @@ export default {
     };
   },
 
+  async fetch() {
+    const hash = {};
+
+    if ( this.$store.getters['management/canList'](WORKLOAD_TYPES.DEPLOYMENT) ) {
+      hash.deployments = this.$store.dispatch('management/findAll', { type: WORKLOAD_TYPES.DEPLOYMENT });
+    }
+
+    if ( this.$store.getters['management/canList'](SERVICE_ACCOUNT) ) {
+      hash.services = this.$store.dispatch('management/findAll', { type: SERVICE });
+    }
+
+    await allHash(hash);
+  },
+
   computed: {
     ...mapGetters({ allRepos: 'catalog/repos' }),
 

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -167,7 +167,7 @@ export default {
       @after-enter="onEnter"
       @after-leave="onLeave"
     >
-      <div
+      <aside
         v-if="showSlideIn"
         id="slide-in-content-element"
         class="slideIn"
@@ -293,7 +293,7 @@ export default {
             </div>
           </div>
         </div>
-      </div>
+      </aside>
     </transition>
   </div>
 </template>

package/pages/c/_cluster/uiplugins/__tests__/AddExtensionRepos.test.ts

@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { UI_PLUGINS_REPOS } from '@shell/config/uiplugins';
-import AddExtensionRepos from '@shell/pages/c/_cluster/uiplugins/AddExtensionRepos.vue';
+import AddExtensionReposDialog from '@shell/dialog/AddExtensionReposDialog.vue';
 const mockedStore = () => {
   return {
     getters: {
@@ -26,19 +26,17 @@ const requiredSetup = () => {
   };
 };
 
-describe('component: AddExtensionRepos', () => {
+describe('component: AddExtensionReposDialog', () => {
   it('should NOT SHOW a checkbox to install official Rancher repo if NOT prime', async() => {
     jest.useFakeTimers();
 
-    const wrapper = mount(AddExtensionRepos, {
+    const wrapper = mount(AddExtensionReposDialog, {
       global: {
         ...requiredSetup(),
         stubs: { Dialog: { template: '<span><slot/></span>' } },
       }
     });
 
-    wrapper.vm.showDialog();
-
     await nextTick();
 
     const rancherCheckbox = wrapper.findComponent('[data-testid="add-extensions-repos-modal-add-official-repo"]');
@@ -53,7 +51,7 @@ describe('component: AddExtensionRepos', () => {
   it('should SHOW a checkbox to install official Rancher repo if IS prime', async() => {
     jest.useFakeTimers();
 
-    const wrapper = mount(AddExtensionRepos, {
+    const wrapper = mount(AddExtensionReposDialog, {
       global: {
         ...requiredSetup(),
         stubs: { Dialog: { template: '<span><slot/></span>' } },
@@ -61,7 +59,6 @@ describe('component: AddExtensionRepos', () => {
     });
 
     wrapper.vm.prime = true;
-    wrapper.vm.showDialog();
 
     await nextTick();
 

package/pages/c/_cluster/uiplugins/index.vue

@@ -15,14 +15,8 @@ import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
 import LazyImage from '@shell/components/LazyImage';
 import { BadgeState } from '@components/BadgeState';
-import UninstallDialog from './UninstallDialog.vue';
-import InstallDialog from './InstallDialog.vue';
-import CatalogLoadDialog from './CatalogList/CatalogLoadDialog.vue';
-import CatalogUninstallDialog from './CatalogList/CatalogUninstallDialog.vue';
-import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins.vue';
-import AddExtensionRepos from './AddExtensionRepos';
 import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
 import {
@@ -53,20 +47,14 @@ export default {
   components: {
     ActionMenu,
     BadgeState,
-    DeveloperInstallDialog,
     IconMessage,
     CatalogList,
     Banner,
-    CatalogLoadDialog,
-    CatalogUninstallDialog,
-    InstallDialog,
     LazyImage,
     PluginInfoPanel,
     Tab,
     Tabbed,
-    UninstallDialog,
     SetupUIPlugins,
-    AddExtensionRepos,
     TabTitle
   },
 
@@ -253,15 +241,13 @@ export default {
         // Label can be overridden by chart annotation
         const label = uiPluginAnnotation(chart, UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
-          name:         chart.chartName,
+          name:        chart.chartName,
           label,
-          description:  chart.chartDescription,
-          id:           chart.id,
-          versions:     [],
-          installed:    false,
-          builtin:      false,
-          experimental: uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
-          certified:    uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER)
+          description: chart.chartDescription,
+          id:          chart.id,
+          versions:    [],
+          installed:   false,
+          builtin:     false,
         };
 
         item.versions = [...chart.versions];
@@ -282,9 +268,15 @@ export default {
         const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
 
         if (latestCompatible) {
+          item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+          item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+
           item.displayVersion = latestCompatible.version;
           item.icon = latestCompatible.icon;
         } else {
+          item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
+          item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
+
           item.displayVersion = item.versions?.[0]?.version;
           item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
         }
@@ -323,6 +315,7 @@ export default {
         if (!chart) {
           // A plugin is loaded, but there is no chart, so add an item so that it shows up
           const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
+
           const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
             name:           p.name,
@@ -334,6 +327,8 @@ export default {
             displayVersion: p.metadata?.version || '-',
             installed:      true,
             builtin:        !!p.builtin,
+            experimental:   rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+            certified:      rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
           };
 
           // Built-in plugins can chose to be hidden - used where we implement as extensions
@@ -357,7 +352,15 @@ export default {
           chart.installing = this.installing[chart.name];
 
           // Check for upgrade
+          // Use the currently installed version's metadata to show/hide the experimental and certified labels
           if (chart.installableVersions?.length && p.version !== chart.installableVersions?.[0]?.version) {
+            const installedVersion = (chart.installableVersions || []).find((v) => v?.version === p.version);
+
+            if (installedVersion) {
+              chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+              chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+            }
+
             chart.upgrade = chart.installableVersions[0].version;
           }
         } else {
@@ -525,21 +528,61 @@ export default {
 
     // Developer Load is in the action menu
     showDeveloperLoadDialog() {
-      this.$refs.developerInstallDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'DeveloperLoadExtensionDialog',
+        returnFocusSelector: '[data-testid="extensions-page-menu"]',
+        componentProps:      {
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showAddExtensionReposDialog() {
       this.updateAddReposSetting();
       this.refreshCharts(true);
-      this.$refs.addExtensionReposDialog.showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:      'AddExtensionReposDialog',
+        testId:         'add-extensions-repos-modal',
+        componentProps: {
+          done: () => {
+            this.updateInstallStatus(true);
+          }
+        }
+      });
     },
 
     showCatalogLoadDialog() {
-      this.$refs.catalogLoadDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogInstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showCatalogUninstallDialog(ev) {
-      this.$refs.catalogUninstallDialog.showDialog(ev);
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogUninstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          catalog: ev,
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     showInstallDialog(plugin, mode, ev) {
@@ -547,7 +590,22 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.installDialog.showDialog(plugin, mode);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'InstallExtensionDialog',
+        testId:                               'install-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-${ mode }-btn-${ plugin?.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          mode,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showUninstallDialog(plugin, ev) {
@@ -555,7 +613,21 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.uninstallDialog.showDialog(plugin);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'UninstallExtensionDialog',
+        testId:                               'uninstall-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-uninstall-btn-${ plugin.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     didUninstall(plugin) {
@@ -996,35 +1068,6 @@ export default {
         </div>
       </template>
     </div>
-
-    <InstallDialog
-      ref="installDialog"
-      @closed="didInstall"
-      @update="updatePluginInstallStatus"
-    />
-    <UninstallDialog
-      ref="uninstallDialog"
-      @closed="didUninstall"
-      @update="updatePluginInstallStatus"
-    />
-    <CatalogLoadDialog
-      ref="catalogLoadDialog"
-      @closed="didInstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <CatalogUninstallDialog
-      ref="catalogUninstallDialog"
-      @closed="didUninstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <DeveloperInstallDialog
-      ref="developerInstallDialog"
-      @closed="didInstall"
-    />
-    <AddExtensionRepos
-      ref="addExtensionReposDialog"
-      @done="updateInstallStatus(true)"
-    />
   </div>
 </template>
 

package/pages/explorer/resource/detail/configmap.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { useDefaultMetadataProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import { CONFIG_MAP } from '@shell/config/types';
+import { useFetchResourceWithId, useResourceIdentifiers } from '@shell/composables/resources';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import ConfigMapDataTab from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue';
+import { useGetConfigMapDataTabProps } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables';
+
+const { id, schema } = useResourceIdentifiers(CONFIG_MAP);
+const configMap = await useFetchResourceWithId(CONFIG_MAP, id);
+const titleBarProps = useDefaultTitleBarProps(configMap);
+const metadataProps = useDefaultMetadataProps(configMap);
+const configMapDataTabProps = useGetConfigMapDataTabProps(configMap);
+</script>
+
+<template>
+  <DetailPage>
+    <template #top-area>
+      <TitleBar
+        v-bind="titleBarProps"
+      />
+      <Metadata
+        class="mmt-6"
+        v-bind="metadataProps"
+      />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="configMap"
+        :schema="schema"
+      >
+        <ConfigMapDataTab
+          v-bind="configMapDataTabProps"
+        />
+      </ResourceTabs>
+    </template>
+  </DetailPage>
+</template>

package/pages/explorer/resource/detail/projectsecret.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+import Secret from '@shell/pages/explorer/resource/detail/secret.vue';
+
+</script>
+
+<template>
+  <Secret :isProjectSecret="true" />
+</template>