@rancher/shell 3.0.1-rc.4 → 3.0.2-rc.1

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -1,16 +1,14 @@
 <script>
 
-import SortableTable from '@shell/components/SortableTable';
 import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
-import { fetchClusterResources } from './explorer-utils';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+import { STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { headerFromSchemaColString } from '@shell/store/type-map.utils';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
 
 export default {
-  components: { SortableTable },
-
-  async fetch() {
-    this.events = await fetchClusterResources(this.$store, EVENT);
-  },
+  components: { PaginatedResourceTable },
 
   data() {
     const reason = {
@@ -23,8 +21,7 @@ export default {
       reason,
       OBJECT,
       MESSAGE,
-      NAME,
-      {
+      NAME, {
         name:        'date',
         label:       'Date',
         labelKey:    'clusterIndexPage.sections.events.date.label',
@@ -36,9 +33,36 @@ export default {
       },
     ];
 
+    const schema = this.$store.getters['cluster/schemaFor'](EVENT);
+
+    const paginationHeaders = [
+      reason,
+      STEVE_EVENT_OBJECT,
+      MESSAGE,
+      {
+        ...STEVE_NAME_COL,
+        defaultSort: false,
+      },
+      headerFromSchemaColString('First Seen', schema, this.$store.getters, true),
+      {
+        ...headerFromSchemaColString('Last Seen', schema, this.$store.getters, true),
+        defaultSort: true,
+      },
+      headerFromSchemaColString('Count', schema, this.$store.getters, true),
+    ];
+
     return {
-      events: [],
+      schema,
+      events:        [],
       eventHeaders,
+      paginationHeaders,
+      allEventsLink: {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  EXPLORER,
+          resource: EVENT,
+        }
+      }
     };
   },
 
@@ -63,16 +87,34 @@ export default {
 </script>
 
 <template>
-  <SortableTable
-    :loading="$fetchState.pending"
-    :rows="events"
+  <PaginatedResourceTable
+    :schema="schema"
     :headers="eventHeaders"
+    :pagination-headers="paginationHeaders"
+
     key-field="id"
     :search="false"
     :table-actions="false"
     :row-actions="false"
-    :paging="true"
+    :groupable="false"
     :rows-per-page="10"
-    default-sort-by="date"
-  />
+  >
+    <template v-slot:header-right>
+      <router-link
+        data-testid="events-link"
+        :to="allEventsLink"
+        class="events-link"
+      >
+        <span>{{ t('glance.eventsTable') }}</span>
+      </router-link>
+    </template>
+  </PaginatedResourceTable>
 </template>
+
+<style lang="scss" scoped>
+.events-link {
+  align-self: center;
+  padding-right: 20px;
+  min-width: 200px;
+}
+</style>

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -99,7 +99,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
     ]]
   ])('%p cluster - %p agent health box :', (_, agentId, isLocal, agentResources, statuses) => {
-    it.each(statuses)('should  NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+    it.each(statuses)('should NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
       const options = clone(mountOptions);
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
@@ -138,41 +138,48 @@ describe('page: cluster dashboard', () => {
 
   describe.each([
     ['local', 'fleet', true, ['fleetDeployment', 'fleetStatefulSet'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
     ['downstream RKE2', 'fleet', false, ['fleetStatefulSet'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
     ['downstream RKE2', 'cattle', false, ['cattleDeployment'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]]
   ])('%p cluster - %p agent health box ::', (_, agentId, isLocal, agentResources, statuses) => {
-    it.each(statuses)('should show %p status', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+    it.each(statuses)('should show %p status', async(status, iconClass, clickable, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+      let agentRoute = null;
+
       const options = clone(mountOptions);
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
-      // let's pass the canList now
       options.global.mocks.$store.getters['cluster/canList'] = (type: string) => !!(type === WORKLOAD_TYPES.DEPLOYMENT) || !!(type === WORKLOAD_TYPES.STATEFUL_SET);
 
+      options.global.mocks.$router = {
+        push: (route: any) => {
+          agentRoute = route;
+        }
+      };
+
       const resources = agentResources.reduce((acc, r) => {
         const agent = {
           metadata: { state: { error } },
@@ -204,7 +211,12 @@ describe('page: cluster dashboard', () => {
 
       expect(box.element).toBeDefined();
       expect(box.element.classList).toContain(status);
+      expect(!!(box.element as any).$_popper).toBe(clickable);
       expect(icon.element.classList).toContain(iconClass);
+
+      await box.trigger('click');
+
+      expect(!!agentRoute).toBe(clickable);
     });
   });
 

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

@@ -125,6 +125,13 @@ export default {
       ROLES,
     ];
 
+    const clusterServiceIcons = {
+      [STATES_ENUM.IN_PROGRESS]: 'icon-spinner icon-spin',
+      [STATES_ENUM.HEALTHY]:     'icon-checkmark',
+      [STATES_ENUM.WARNING]:     'icon-warning',
+      [STATES_ENUM.UNHEALTHY]:   'icon-warning',
+    };
+
     return {
       nodeHeaders,
       constraints:        [],
@@ -148,6 +155,8 @@ export default {
       clusterCounts,
       selectedTab:        'cluster-events',
       extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
+      canViewEvents:      !!this.$store.getters['cluster/schemaFor'](EVENT),
+      clusterServiceIcons,
     };
   },
 
@@ -283,52 +292,51 @@ export default {
     clusterServices() {
       const services = [];
 
-      CLUSTER_COMPONENTS.forEach((cs) => {
+      CLUSTER_COMPONENTS.forEach((name) => {
+        const component = this.getComponentStatus(name);
+
         services.push({
-          name:     cs,
-          status:   this.getComponentStatus(cs),
-          labelKey: `clusterIndexPage.sections.componentStatus.${ cs }`,
+          name,
+          status:   component.state,
+          labelKey: `clusterIndexPage.sections.componentStatus.component.${ name }.label`,
+          icon:     this.clusterServiceIcons[component.state],
+          tooltip:  component.tooltip,
+          goTo:     () => null,
         });
       });
 
       if (this.cattleAgentNamespace) {
         services.push({
           name:     'cattle',
-          status:   this.cattleStatus,
-          labelKey: 'clusterIndexPage.sections.componentStatus.cattle',
+          status:   this.cattleAgent.state,
+          labelKey: 'clusterIndexPage.sections.componentStatus.component.cattle.label',
+          icon:     this.clusterServiceIcons[this.cattleAgent.state],
+          tooltip:  this.cattleAgent.tooltip,
+          goTo:     () => this.goToClusterService(this.cattleAgent),
         });
       }
 
       if (this.fleetAgentNamespace) {
         services.push({
           name:     'fleet',
-          status:   this.fleetStatus,
-          labelKey: 'clusterIndexPage.sections.componentStatus.fleet',
+          status:   this.fleetAgent.state,
+          labelKey: 'clusterIndexPage.sections.componentStatus.component.fleet.label',
+          icon:     this.clusterServiceIcons[this.fleetAgent.state],
+          tooltip:  this.fleetAgent.tooltip,
+          goTo:     () => this.goToClusterService(this.fleetAgent),
         });
       }
 
       return services;
     },
 
-    cattleStatus() {
-      const resource = this.cattleDeployment;
-
-      if (resource === 'loading') {
-        return STATES_ENUM.IN_PROGRESS;
-      }
-
-      if (!resource || this.disconnected || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
-        return STATES_ENUM.UNHEALTHY;
-      }
+    cattleAgent() {
+      const resources = [this.cattleDeployment];
 
-      if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
-        return STATES_ENUM.WARNING;
-      }
-
-      return STATES_ENUM.HEALTHY;
+      return this.getAgentStatus(resources, { checkDisconnected: true });
     },
 
-    fleetStatus() {
+    fleetAgent() {
       const resources = this.currentCluster.isLocal ? [
         /**
          * 'fleetStatefulSet' could take a while to be created by rancher.
@@ -339,23 +347,7 @@ export default {
         this.fleetStatefulSet
       ];
 
-      if (resources.find((r) => r === 'loading')) {
-        return STATES_ENUM.IN_PROGRESS;
-      }
-
-      for (const resource of resources) {
-        if (!resource || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
-          return STATES_ENUM.UNHEALTHY;
-        }
-      }
-
-      for (const resource of resources) {
-        if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
-          return STATES_ENUM.WARNING;
-        }
-      }
-
-      return STATES_ENUM.HEALTHY;
+      return this.getAgentStatus(resources);
     },
 
     totalCountGaugeInput() {
@@ -482,16 +474,6 @@ export default {
       return !!this.currentCluster?.spec?.description;
     },
 
-    allEventsLink() {
-      return {
-        name:   'c-cluster-product-resource',
-        params: {
-          product:  EXPLORER,
-          resource: EVENT,
-        }
-      };
-    },
-
     allSecretsLink() {
       return {
         name:   'c-cluster-product-resource',
@@ -532,25 +514,61 @@ export default {
       }
     },
 
+    getAgentStatus(resources, opt = { checkDisconnected: false }) {
+      if (resources.find((resource) => resource === 'loading')) {
+        return { state: STATES_ENUM.IN_PROGRESS };
+      }
+
+      for (const resource of resources) {
+        if (
+          !resource ||
+          (opt.checkDisconnected && this.disconnected) || // cattle
+          resource.status.conditions?.find((c) => c.status !== 'True') ||
+          resource.metadata.state?.error
+        ) {
+          return {
+            resource,
+            tooltip: resource?.stateDescription || this.t(`clusterIndexPage.sections.componentStatus.tooltip.disconnected`),
+            state:   STATES_ENUM.UNHEALTHY,
+          };
+        }
+      }
+
+      for (const resource of resources) {
+        if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
+          return {
+            resource,
+            tooltip: resource?.stateDescription || this.t(`clusterIndexPage.sections.componentStatus.tooltip.unavailableReplicas`),
+            state:   STATES_ENUM.WARNING,
+          };
+        }
+      }
+
+      return { state: STATES_ENUM.HEALTHY };
+    },
+
     getComponentStatus(field) {
       const matching = (this.currentCluster?.status?.componentStatuses || []).filter((s) => s.name.startsWith(field));
 
       // If there's no matching component status, it's "healthy"
       if ( !matching.length ) {
-        return STATES_ENUM.HEALTHY;
+        return { state: STATES_ENUM.HEALTHY };
       }
 
-      const count = matching.reduce((acc, status) => {
-        const conditions = status.conditions.find((c) => c.status !== 'True');
+      const errorConditions = matching.reduce((acc, status) => {
+        const condition = status.conditions.find((c) => c.status !== 'True');
 
-        return !conditions ? acc : acc + 1;
-      }, 0);
+        return !condition ? acc : [...acc, condition];
+      }, []);
 
-      if (count > 0) {
-        return STATES_ENUM.UNHEALTHY;
+      if (errorConditions.length > 0) {
+        return {
+          tooltip: errorConditions[0].message,
+          state:   STATES_ENUM.UNHEALTHY
+        };
       }
 
-      return STATES_ENUM.HEALTHY;
+      return { state: STATES_ENUM.HEALTHY };
     },
 
     showActions() {
@@ -578,6 +596,23 @@ export default {
         await provCluster.goToHarvesterCluster();
       } catch {
       }
+    },
+
+    goToClusterService(agent) {
+      if (!agent.resource || agent.state === STATES_ENUM.HEALTHY) {
+        return;
+      }
+
+      this.$router.push({
+        name:   'c-cluster-product-resource-namespace-id',
+        params: {
+          cluster:   this.currentCluster.id,
+          product:   'explorer',
+          resource:  agent.resource.type,
+          namespace: agent.resource.metadata.namespace,
+          id:        agent.resource.metadata.name,
+        }
+      });
     }
   },
 };
@@ -722,21 +757,15 @@ export default {
       <div
         v-for="(service, i) in clusterServices"
         :key="i"
+        v-clean-tooltip="service.tooltip"
         class="k8s-service-status"
         :class="{[service.status]: true }"
         :data-testid="`k8s-service-${ service.name }`"
+        @click="service.goTo"
       >
         <i
-          v-if="service.status === STATES_ENUM.IN_PROGRESS"
-          class="icon icon-spinner icon-spin"
-        />
-        <i
-          v-else-if="service.status === STATES_ENUM.HEALTHY"
-          class="icon icon-checkmark"
-        />
-        <i
-          v-else
-          class="icon icon-warning"
+          class="icon"
+          :class="service.icon"
         />
         <div class="label">
           {{ t(service.labelKey) }}
@@ -747,15 +776,11 @@ export default {
     <div class="mt-30">
       <Tabbed @changed="tabChange">
         <Tab
+          v-if="canViewEvents"
           name="cluster-events"
           :label="t('clusterIndexPage.sections.events.label')"
           :weight="2"
         >
-          <span class="events-table-link">
-            <router-link :to="allEventsLink">
-              <span>{{ t('glance.eventsTable') }}</span>
-            </router-link>
-          </span>
           <EventsTable />
         </Tab>
         <Tab
@@ -916,7 +941,7 @@ export default {
   }
 }
 
-.events-table-link, .cert-table-link {
+.cert-table-link {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 20px;
@@ -948,6 +973,7 @@ export default {
 
   &.unhealthy {
     border-color: var(--error-border);
+    cursor: pointer;
 
     > I {
       color: var(--error)
@@ -955,6 +981,8 @@ export default {
   }
 
   &.warning {
+    cursor: pointer;
+
     > I {
       color: var(--warning)
     }

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

@@ -103,17 +103,17 @@ export default {
           resources.push(this.t('performance.serverPagination.resources.all'));
         } else {
           settings.resources.enableSome.enabled.forEach((resource) => {
-            resources.push(resource);
+            resources.push(!!resource.length ? resource : `${ resource.resource } (${ resource.context })`);
           });
           if (settings.resources.enableSome.generic) {
             resources.push(this.t('performance.serverPagination.resources.generic', {}, true));
           }
         }
 
-        storeResources.push(`${ store }: ${ resources.join(', ') }`);
+        storeResources.push(`Resources in store '${ store }': ${ resources.join(', ') }`);
       });
 
-      return storeResources.join('. ');
+      return storeResources.join('<br><br>');
     }
   },
 
@@ -187,6 +187,13 @@ export default {
           body:  this.t(`performance.${ l10n[property] }.incompatibleDescription`, {}, true),
         },
       });
+    },
+
+    setPaginationDefaults() {
+      this.value = {
+        ...this.value,
+        serverPagination: { ...DEFAULT_PERF_SETTING.serverPagination }
+      };
     }
   },
 };
@@ -202,7 +209,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"
@@ -225,9 +234,17 @@ export default {
           <p :class="{ 'text-muted': !value.serverPagination.enabled }">
             {{ t('performance.serverPagination.applicable') }}
           </p>
-          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
-            {{ steveCacheApplicableResources }}
-          </p>
+          <p
+            v-clean-html="steveCacheApplicableResources"
+            :class="{ 'text-muted': !value.serverPagination.enabled }"
+          />
+          <button
+            class="btn btn-sm role-primary"
+            style="width: fit-content;"
+            @click.prevent="setPaginationDefaults()"
+          >
+            {{ t('performance.serverPagination.populateDefaults') }}
+          </button>
         </div>
         <!-- Inactivity -->
         <div class="mt-20">
@@ -273,6 +290,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 +322,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 +354,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 +435,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 +453,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"