Moves sockets into the advanced worker

shell/assets/translations/en-us.yaml

@@ -6785,6 +6785,10 @@ performance:
     count:
       inputLabel: Resource Threshold
       description: The threshold above which filtering by a namespace is required
+  advancedWorker:
+    label: Websocket Web Worker
+    description: Updates to resources pushed to the UI come via WebSocket and are handled in the UI thread. Enable this option to handle cluster WebSocket updates in a Web Worker in a separate thread. This should help the responsiveness of the UI in systems where resources change often.
+    checkboxLabel: Enable Advanced Websocket Web Worker
 
 banner:
   label: Fixed Banners

shell/config/settings.ts

@@ -141,5 +141,6 @@ export const DEFAULT_PERF_SETTING = {
   forceNsFilter:                {
     enabled:   false,
     threshold: 1500,
-  }
+  },
+  advancedWorker: { enabled: false },
 };

shell/detail/service.vue

@@ -11,7 +11,6 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { KEY, VALUE } from '@shell/config/table-headers';
 import { POD } from '@shell/config/types';
-import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 
 export default {
@@ -36,13 +35,7 @@ export default {
   },
 
   async fetch() {
-    const hash = { pods: this.value.pods() };
-
-    const res = await allHash(hash);
-
-    for (const k in res) {
-      this[k] = res[k];
-    }
+    await this.value.fetchPods();
   },
 
   data() {
@@ -159,7 +152,7 @@ export default {
       :weight="4"
     >
       <ResourceTable
-        :rows="pods"
+        :rows="value.pods"
         :headers="podTableHeaders"
         key-field="id"
         :table-actions="false"

shell/models/service.js

@@ -128,23 +128,24 @@ export default class extends SteveModel {
     return out;
   }
 
-  get pods() {
+  get podRelationship() {
     const { metadata:{ relationships = [] } } = this;
 
-    return async() => {
-      const podRelationship = (relationships || []).filter(relationship => relationship.toType === POD)[0];
-      let pods = [];
+    return (relationships || []).filter(relationship => relationship.toType === POD)[0];
+  }
 
-      if (podRelationship) {
-        pods = await this.$dispatch('cluster/findMatching', {
-          type:      POD,
-          selector:  podRelationship.selector,
-          namespace: this.namespace
-        }, { root: true });
-      }
+  async fetchPods() {
+    if (this.podRelationship) {
+      await this.$dispatch('cluster/findMatching', {
+        type:      POD,
+        selector:  this.podRelationship.selector,
+        namespace: this.namespace
+      }, { root: true });
+    }
+  }
 
-      return pods;
-    };
+  get pods() {
+    return this.podRelationship ? this.$getters.matching( POD, this.podRelationship.selector, this.namespace ) : [];
   }
 
   get serviceType() {

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

@@ -267,6 +267,22 @@ export default {
             />
           </div>
         </div>
+        <!-- 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"
+          />
+          <Checkbox
+            v-model="value.advancedWorker.enabled"
+            :mode="mode"
+            :label="t('performance.advancedWorker.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+        </div>
       </div>
     </div>
     <template v-for="err in errors">