Adding deprecated messaging to the performance settings page

Fixes rancher#12873
codyrancher · Jan 7, 2025 · 85f7850 · 85f7850
1 parent 7632c51
commit 85f7850
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -7497,6 +7497,7 @@ performance:
   label: UI Performance Settings
   settingName: Performance
   experimental: This setting is experimental and may be removed or updated in future versions.
+  deprecatedForSSP: The <i class="mr-5">"{setting}"</i> setting is now deprecated. Consider using the  <a href="#ssp-setting" class="ml-5 mr-5">Server-side Pagination</a>  setting instead.
   incrementalLoad:
     label: Incremental Loading
     setting: You can configure the threshold above which incremental loading will be used.

diff --git a/shell/pages/c/_cluster/settings/performance.vue b/shell/pages/c/_cluster/settings/performance.vue
@@ -202,7 +202,9 @@ export default {
       <div class="ui-perf-setting">
         <!-- Server Side Pagination -->
         <div class="mt-40">
-          <h2>{{ t('performance.serverPagination.label') }}</h2>
+          <h2 id="ssp-setting">
+            {{ t('performance.serverPagination.label') }}
+          </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
           <Banner
             color="error"
@@ -273,6 +275,11 @@ export default {
         <!-- Incremental Loading -->
         <div class="mt-40">
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
+          <Banner
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.incrementalLoad.label') }, true)" />
+          </Banner>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
           <Checkbox
             :value="value.incrementalLoading.enabled"
@@ -300,11 +307,12 @@ export default {
         <!-- Enable manual refresh list views -->
         <div class="mt-40">
           <h2 v-t="'performance.manualRefresh.label'" />
-          <p>{{ t('performance.manualRefresh.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.manualRefresh.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.manualRefresh.description') }}</p>
           <Checkbox
             :value="value.manualRefresh.enabled"
             :mode="mode"
@@ -331,11 +339,12 @@ export default {
         <!-- Enable GC of resources from store -->
         <div class="mt-40">
           <h2 v-t="'performance.gc.label'" />
-          <p>{{ t('performance.gc.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.gc.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.gc.description') }}</p>
           <Checkbox
             v-model:value="value.garbageCollection.enabled"
             :mode="mode"
@@ -411,11 +420,12 @@ export default {
         <!-- Force NS filter -->
         <div class="mt-40">
           <h2>{{ t('performance.nsFiltering.label') }}</h2>
-          <p>{{ t('performance.nsFiltering.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.nsFiltering.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.nsFiltering.description') }}</p>
           <Checkbox
             :value="value.forceNsFilterV2.enabled"
             :mode="mode"
@@ -428,11 +438,12 @@ export default {
         <!-- Advanced Websocket Worker -->
         <div class="mt-40">
           <h2>{{ t('performance.advancedWorker.label') }}</h2>
-          <p>{{ t('performance.advancedWorker.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.advancedWorker.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.advancedWorker.description') }}</p>
           <Checkbox
             v-model:value="value.advancedWorker.enabled"
             :mode="mode"