@rancher/shell 0.3.7 → 0.3.8

package/assets/translations/en-us.yaml

@@ -1249,7 +1249,7 @@ cluster:
       memory: Memory
       disk: Disk
       image: Image
-      network: 
+      network:
         title: Networks
         network: Network
         addNetwork: Add Network
@@ -1827,7 +1827,7 @@ cluster:
       option: Default - RKE2 Embedded
     defaultPodSecurityAdmissionConfigurationTemplateName:
       label: Pod Security Admission Configuration Template
-      option: 
+      option:
         none: (None)
         default: Default - RKE2 Embedded
     cisProfile:
@@ -2202,16 +2202,16 @@ fleet:
     error: Error
     ready: Ready
     errors: Errors
-  workspaces: 
+  workspaces:
     tabs:
       restrictions: Allowed Target Namespaces
     timeout: Workspace creation timeout. It's possible the workspace was created. We suggest checking the workspace page before trying to create another.
-  restrictions: 
+  restrictions:
     addTitle: 'allowedTargetNamespaces'
     addLabel: Add
     banner: "{count, plural,
           =0 { Adding namespaces here will create a GitRepoRestriction. }
-          other { Only the Git Repo Restriction's <code>allowedTargetNamespaces</code> is managed here. You can make additional changes to the Git Repo Restriction} 
+          other { Only the Git Repo Restriction's <code>allowedTargetNamespaces</code> is managed here. You can make additional changes to the Git Repo Restriction}
         }"
 footer:
   docs: Docs
@@ -2260,7 +2260,7 @@ gatekeeperIndex:
   unavailable: OPA + Gatekeeper is not available in the system-charts catalog.
   violations: Violations
 
-gatekeeperInstall: 
+gatekeeperInstall:
   auditInterval: Auto Interval
   constraintViolationsLimit: Constraint Violations Limit
   runtimeDefaultSeccompProfile: Enable Runtime Default Seccomp Profile
@@ -3952,6 +3952,15 @@ podDisruptionBudget:
   maxUnavailable:
     label: Max. unavailable Pods
 
+inactivity:
+  title: Session expiring
+  titleExpired: Session expired
+  banner: Your session is about to expire due to inactivity. Any unsaved changes will be lost.
+  bannerExpired: Your session has expired in this tab due to inactivity.
+  content: Click “Resume Session” to keep the session in this tab active or refresh the browser after the session has expired.
+  contentExpired: To return to this page click “Refresh” below or refresh the browser.
+  cta: Resume Session
+  ctaExpired: Refresh
 
 # Rancher Extensions
 plugins:
@@ -4051,7 +4060,7 @@ plugins:
 podSecurityAdmission:
   name: Pod Security Admission
   description: Define the admission control mode you want to use for the pod security
-  banner: 
+  banner:
     modifications: 'Changing any template that is currently in use will cause an update to those live clusters the next time the cluster is updated'
   labels:
     enforce: Enforce
@@ -4065,7 +4074,7 @@ podSecurityAdmission:
     restricted: restricted
   version:
     placeholder: 'Version (default: latest)'
-  exemptions: 
+  exemptions:
     title: Exemptions
     description: Allow the creation of pods for specific Usernames, RuntimeClassNames, and Namespaces that would otherwise be prohibited due to the policies set above.
     placeholder: Enter a comma separated list of {psaExemptionsControl}
@@ -5186,7 +5195,7 @@ storageClass:
     warning: 'The {provisioner} in-tree plugin is deprecated: Find a CSI driver <a target="_blank" rel="noopener noreferrer nofollow" href="https://kubernetes-csi.github.io/docs/drivers.html">here.</a>'
   harvesterhci:
     title: Harvester (CSI)
-    warning: 
+    warning:
       unSatisfiesVersion: Please upgrade your Harvester CSI driver version to use this feature. (csi-driver >= v0.1.15)
     hostStorageClass:
       label: Host Storage Class
@@ -6131,8 +6140,6 @@ workload:
       pod: Pod
       containers: Containers
 
-
-
 ##############################
 # Model Properties
 ##############################
@@ -6778,7 +6785,7 @@ typeLabel:
     {count, plural,
       one { Cluster Registration Token }
       other { Cluster Registration Tokens }
-    } 
+    }
 
 action:
   clone: Clone
@@ -7002,6 +7009,14 @@ performance:
     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
+  inactivity:
+    title: Inactivity
+    checkboxLabel: Enable inactivity session expiration
+    inputLabel: Inactivity timeout (minutes)
+    information: To change the automatic logout behaviour, edit the authorisation and/or session token timeout values (<code>auth-user-session-ttl-minutes</code> and <code>auth-token-max-ttl-minutes</code>) in the Settings page.
+    description: When enabled and the user is inactive past the specified timeout, the UI will no longer fresh page content and the user must reload the page to continue.
+    authUserTTL: This timeout cannot be higher than the user session timeout auth-user-session-ttl-minutes, which is currently {current} minutes.
+
 
 banner:
   label: Fixed Banners

package/components/Inactivity.vue

@@ -0,0 +1,229 @@
+<script>
+import ModalWithCard from '@shell/components/ModalWithCard';
+import { Banner } from '@components/Banner';
+import PercentageBar from '@shell/components/PercentageBar.vue';
+import throttle from 'lodash/throttle';
+import { MANAGEMENT } from '@shell/config/types';
+import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
+
+export default {
+  name:       'Inactivity',
+  components: {
+    ModalWithCard, Banner, PercentageBar
+  },
+  data() {
+    return {
+      enabled:             null,
+      isOpen:              false,
+      isInactive:          false,
+      showModalAfter:      null,
+      inactivityTimeoutId: null,
+      courtesyTimer:       null,
+      courtesyTimerId:     null,
+      courtesyCountdown:   null,
+      trackInactivity:     throttle(this._trackInactivity, 1000),
+    };
+  },
+  async mounted() {
+    // Info: normally, this is done in the fetch hook but for some reasons while awaiting for things that will take a while, it won't be ready by the time mounted() is called, pending for investigation.
+    let settings;
+
+    try {
+      const settingsString = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
+
+      settings = settingsString?.value ? JSON.parse(settingsString.value) : DEFAULT_PERF_SETTING;
+    } catch { }
+
+    if (!settings || !settings?.inactivity || !settings?.inactivity.enabled) {
+      return;
+    }
+
+    this.enabled = settings?.inactivity?.enabled || false;
+
+    // Total amount of time before the user's session is lost
+    const thresholdToSeconds = settings?.inactivity?.threshold * 60;
+
+    // Amount of time the user sees the inactivity warning
+    this.courtesyTimer = Math.floor(thresholdToSeconds * 0.1);
+    this.courtesyTimer = Math.min(this.courtesyTimer, 60 * 5); // Never show the modal more than 5 minutes
+    // Amount of time before the user sees the inactivity warning
+    // Note - time before warning is shown + time warning is shown = settings threshold (total amount of time)
+    this.showModalAfter = thresholdToSeconds - this.courtesyTimer;
+
+    console.debug(`Inactivity modal will show after ${ this.showModalAfter / 60 }(m) and be shown for ${ this.courtesyTimer / 60 }(m)`); // eslint-disable-line no-console
+
+    this.courtesyCountdown = this.courtesyTimer;
+
+    if (settings?.inactivity.enabled) {
+      this.trackInactivity();
+      this.addIdleListeners();
+    }
+  },
+  beforeDestroy() {
+    this.removeEventListener();
+    this.clearAllTimeouts();
+  },
+  methods: {
+    _trackInactivity() {
+      if (this.isInactive || this.isOpen || !this.showModalAfter) {
+        return;
+      }
+
+      this.clearAllTimeouts();
+      const endTime = Date.now() + this.showModalAfter * 1000;
+
+      const checkInactivityTimer = () => {
+        const now = Date.now();
+
+        if (now >= endTime) {
+          this.isOpen = true;
+          this.startCountdown();
+
+          this.$modal.show('inactivityModal');
+        } else {
+          this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
+        }
+      };
+
+      checkInactivityTimer();
+    },
+    startCountdown() {
+      const endTime = Date.now() + (this.courtesyCountdown * 1000);
+
+      const checkCountdown = () => {
+        const now = Date.now();
+
+        if (now >= endTime) {
+          this.isInactive = true;
+          this.unsubscribe();
+          this.clearAllTimeouts();
+        } else {
+          this.courtesyCountdown = Math.floor((endTime - now) / 1000);
+          this.courtesyTimerId = setTimeout(checkCountdown, 1000);
+        }
+      };
+
+      checkCountdown();
+    },
+    addIdleListeners() {
+      document.addEventListener('mousemove', this.trackInactivity);
+      document.addEventListener('mousedown', this.trackInactivity);
+      document.addEventListener('keypress', this.trackInactivity);
+      document.addEventListener('touchmove', this.trackInactivity);
+      document.addEventListener('visibilitychange', this.trackInactivity);
+    },
+    removeEventListener() {
+      document.removeEventListener('mousemove', this.trackInactivity);
+      document.removeEventListener('mousedown', this.trackInactivity);
+      document.removeEventListener('keypress', this.trackInactivity);
+      document.removeEventListener('touchmove', this.trackInactivity);
+      document.removeEventListener('visibilitychange', this.trackInactivity);
+    },
+
+    resume() {
+      this.isInactive = false;
+      this.isOpen = false;
+      this.courtesyCountdown = this.courtesyTimer;
+      this.clearAllTimeouts();
+
+      this.$modal.hide('inactivityModal');
+    },
+
+    refresh() {
+      window.location.reload();
+    },
+
+    unsubscribe() {
+      this.$store.dispatch('unsubscribe');
+    },
+    clearAllTimeouts() {
+      clearTimeout(this.inactivityTimeoutId);
+      clearTimeout(this.courtesyTimerId);
+    }
+
+  },
+  computed: {
+    isInactiveTexts() {
+      return this.isInactive ? {
+        title:   this.t('inactivity.titleExpired'),
+        banner:  this.t('inactivity.bannerExpired'),
+        content: this.t('inactivity.contentExpired'),
+      } : {
+        title:   this.t('inactivity.title'),
+        banner:  this.t('inactivity.banner'),
+        content: this.t('inactivity.content'),
+      };
+    },
+    timerPercentageLeft() {
+      return Math.floor((this.courtesyCountdown / this.courtesyTimer ) * 100);
+    },
+    colorStops() {
+      return {
+        0: '--info', 30: '--info', 70: '--info'
+      };
+    },
+  }
+};
+</script>
+
+<template>
+  <ModalWithCard
+    ref="inactivityModal"
+    name="inactivityModal"
+    save-text="Continue"
+    :v-if="isOpen"
+    @finish="resume"
+  >
+    <template #title>
+      {{ isInactiveTexts.title }}
+    </template>
+    <span>{{ courtesyCountdown }}</span>
+
+    <template #content>
+      <Banner color="info">
+        {{ isInactiveTexts.banner }}
+      </Banner>
+
+      <p>
+        {{ isInactiveTexts.content }}
+      </p>
+
+      <PercentageBar
+        v-if="!isInactive"
+        class="mt-20"
+        :value="timerPercentageLeft"
+        :color-stops="colorStops"
+      />
+    </template>
+
+    <template
+      #footer
+    >
+      <div class="card-actions">
+        <button
+          v-if="!isInactive"
+          class="btn role-tertiary bg-primary"
+          @click.prevent="resume"
+        >
+          <t k="inactivity.cta" />
+        </button>
+
+        <button
+          v-if="isInactive"
+          class="btn role-tertiary bg-primary"
+          @click.prevent="refresh"
+        >
+          <t k="inactivity.ctaExpired" />
+        </button>
+      </div>
+    </template>
+  </ModalWithCard>
+</template>
+
+<style lang="scss" scoped>
+.card-actions {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+}
+</style>

package/config/settings.ts

@@ -140,6 +140,10 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
 };
 
 export const DEFAULT_PERF_SETTING = {
+  inactivity: {
+    enabled:   false,
+    threshold: 900,
+  },
   incrementalLoading: {
     enabled:   true,
     threshold: 1500,

package/creators/app/files/.gitignore

@@ -0,0 +1,73 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# System Files
+.DS_Store
+Thumbs.db

package/creators/app/init

@@ -12,6 +12,7 @@ const targets = {
 const files = [
   'tsconfig.json',
   'vue.config.js',
+  '.gitignore',
   '.eslintignore',
   '.eslintrc.js',
   'babel.config.js',

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -306,12 +306,7 @@ export default {
     const lastDefaultPodSecurityPolicyTemplateName = this.value.spec.defaultPodSecurityPolicyTemplateName;
     const previousKubernetesVersion = this.value.spec.kubernetesVersion;
 
-    const truncateLimit = this.value.machinePoolDefaults?.hostnameLengthLimit;
-
-    // Is hostname truncation supported by the backend?
-    const provSchema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
-    const specSchemaName = provSchema?.resourceFields?.spec?.type;
-    const specSchema = specSchemaName ? this.$store.getters['management/schemaFor'](specSchemaName) : {};
+    const truncateLimit = this.value.defaultHostnameLengthLimit;
 
     return {
       loadedOnce:                      false,
@@ -350,7 +345,6 @@ export default {
       psps:                  null, // List of policies if any
       truncateHostnames:     truncateLimit === NETBIOS_TRUNCATION_LENGTH,
       truncateLimit,
-      supportsTruncation:    !!specSchema?.resourceFields?.machinePoolDefaults,
     };
   },
 
@@ -1100,14 +1094,9 @@ export default {
      */
     truncateName() {
       if (this.truncateHostnames) {
-        this.value.machinePoolDefaults = this.value.machinePoolDefaults || {};
-        this.value.machinePoolDefaults.hostnameLengthLimit = 15;
+        this.value.defaultHostnameLengthLimit = NETBIOS_TRUNCATION_LENGTH;
       } else {
-        delete this.value.machinePoolDefaults.hostnameLengthLimit;
-
-        if (Object.keys(this.value.machinePoolDefaults).length === 0) {
-          delete this.value.machinePoolDefaults;
-        }
+        this.value.removeDefaultHostnameLengthLimit();
       }
     },
     /**
@@ -2598,7 +2587,6 @@ export default {
               />
             </div>
             <div
-              v-if="supportsTruncation"
               class="col span-6"
             >
               <Checkbox

package/edit/workload/mixins/workload.js

@@ -26,7 +26,7 @@ import Loading from '@shell/components/Loading';
 import Networking from '@shell/components/form/Networking';
 import VolumeClaimTemplate from '@shell/edit/workload/VolumeClaimTemplate';
 import Job from '@shell/edit/workload/Job';
-import { _EDIT, _CREATE, _VIEW } from '@shell/config/query-params';
+import { _EDIT, _CREATE, _VIEW, _CLONE } from '@shell/config/query-params';
 import WorkloadPorts from '@shell/components/form/WorkloadPorts';
 import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
 import KeyValue from '@shell/components/form/KeyValue';
@@ -178,7 +178,7 @@ export default {
 
     // EDIT view for POD
     // Transform it from POD world to workload
-    if ((this.mode === _EDIT || this.mode === _VIEW ) && this.value.type === 'pod' ) {
+    if ((this.mode === _EDIT || this.mode === _VIEW || this.realMode === _CLONE ) && this.value.type === 'pod') {
       const podSpec = { ...this.value.spec };
       const metadata = { ...this.value.metadata };
 
@@ -198,6 +198,7 @@ export default {
     if (
       this.mode === _CREATE ||
       this.mode === _VIEW ||
+      this.realMode === _CLONE ||
       (!createSidecar && !this.value.hasSidecars) // hasSideCars = containers.length > 1 || initContainers.length;
     ) {
       container = containers[0];
@@ -703,7 +704,7 @@ export default {
       if (
         this.type !== WORKLOAD_TYPES.JOB &&
         this.type !== WORKLOAD_TYPES.CRON_JOB &&
-        this.mode === _CREATE
+        (this.mode === _CREATE || this.realMode === _CLONE)
       ) {
         this.spec.selector = { matchLabels: this.value.workloadSelector };
         Object.assign(this.value.metadata.labels, this.value.workloadSelector);
@@ -721,7 +722,7 @@ export default {
       if (
         this.type !== WORKLOAD_TYPES.JOB &&
         this.type !== WORKLOAD_TYPES.CRON_JOB &&
-        this.mode === _CREATE
+        (this.mode === _CREATE || this.realMode === _CLONE)
       ) {
         if (!template.metadata) {
           template.metadata = { labels: this.value.workloadSelector };
@@ -784,6 +785,13 @@ export default {
 
       template.metadata.namespace = this.value.metadata.namespace;
 
+      // Handle the case where the user has changed the name of the workload
+      // Only do this for clone. Not allowed for edit
+      if (this.realMode === _CLONE) {
+        template.metadata.name = this.value.metadata.name;
+        template.metadata.description = this.value.metadata.description;
+      }
+
       // delete this.value.kind;
       if (this.container && !this.container.name) {
         this.$set(this.container, 'name', this.value.metadata.name);

package/layouts/blank.vue

@@ -1,7 +1,9 @@
 <script>
 import Brand from '@shell/mixins/brand';
+import Inactivity from '@shell/components/Inactivity';
 
 export default {
+  components: { Inactivity },
   middleware: ['authenticated'],
   mixins:     [Brand],
 };
@@ -10,6 +12,8 @@ export default {
 <template>
   <main class="main-layout">
     <nuxt />
+
+    <Inactivity />
   </main>
 </template>
 

package/layouts/default.vue

@@ -16,6 +16,7 @@ import PromptModal from '@shell/components/PromptModal';
 import AssignTo from '@shell/components/AssignTo';
 import Group from '@shell/components/nav/Group';
 import Header from '@shell/components/nav/Header';
+import Inactivity from '@shell/components/Inactivity';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
@@ -57,6 +58,7 @@ export default {
     AwsComplianceBanner,
     AzureWarning,
     DraggableZone,
+    Inactivity
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -765,6 +767,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>
 </template>

package/layouts/home.vue

@@ -7,6 +7,7 @@ import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import Inactivity from '@shell/components/Inactivity';
 import { mapState } from 'vuex';
 
 export default {
@@ -16,7 +17,8 @@ export default {
     FixedBanner,
     GrowlManager,
     AzureWarning,
-    AwsComplianceBanner
+    AwsComplianceBanner,
+    Inactivity
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -51,6 +53,7 @@ export default {
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
+    <Inactivity />
     <AwsComplianceBanner />
     <AzureWarning />
 

package/layouts/plain.vue

@@ -11,6 +11,7 @@ import GrowlManager from '@shell/components/GrowlManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import Inactivity from '@shell/components/Inactivity';
 
 export default {
 
@@ -23,7 +24,8 @@ export default {
     FixedBanner,
     GrowlManager,
     AwsComplianceBanner,
-    AzureWarning
+    AzureWarning,
+    Inactivity
   },
 
   middleware: ['authenticated'],
@@ -83,6 +85,7 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <Inactivity />
   </div>
 </template>
 

package/models/provisioning.cattle.io.cluster.js

@@ -393,6 +393,30 @@ export default class ProvCluster extends SteveModel {
     }
   }
 
+  get machinePoolDefaults() {
+    return this.spec.rkeConfig?.machinePoolDefaults;
+  }
+
+  set defaultHostnameLengthLimit(value) {
+    this.spec.rkeConfig = this.spec.rkeConfig || {};
+    this.spec.rkeConfig.machinePoolDefaults = this.spec.rkeConfig.machinePoolDefaults || {};
+    this.spec.rkeConfig.machinePoolDefaults.hostnameLengthLimit = value;
+  }
+
+  get defaultHostnameLengthLimit() {
+    return this.spec.rkeConfig?.machinePoolDefaults?.hostnameLengthLimit;
+  }
+
+  removeDefaultHostnameLengthLimit() {
+    if (this.machinePoolDefaults?.hostnameLengthLimit) {
+      delete this.spec.rkeConfig.machinePoolDefaults.hostnameLengthLimit;
+
+      if (Object.keys(this.spec?.rkeConfig?.machinePoolDefaults).length === 0) {
+        delete this.spec.rkeConfig.machinePoolDefaults;
+      }
+    }
+  }
+
   get nodes() {
     return this.$rootGetters['management/all'](MANAGEMENT.NODE).filter(node => node.id.startsWith(this.mgmtClusterId));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

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

@@ -23,7 +23,6 @@ import {
   WORKLOAD_TYPES,
   COUNT,
   CATALOG,
-  POD,
   PSP,
 } from '@shell/config/types';
 import { mapPref, CLUSTER_TOOLS_TIP, PSP_DEPRECATION_BANNER } from '@shell/store/prefs';
@@ -264,11 +263,9 @@ export default {
     },
 
     podsUsed() {
-      const pods = resourceCounts(this.$store, POD);
-
       return {
         total:  parseSi(this.currentCluster?.status?.allocatable?.pods || '0'),
-        useful: pods.total
+        useful: parseSi(this.currentCluster?.status?.requested?.pods || '0'),
       };
     },
 

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

@@ -23,13 +23,17 @@ export default {
   async fetch() {
     try {
       this.uiPerfSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
-    } catch (e) {
+    } catch {
       this.uiPerfSetting = await this.$store.dispatch('management/create', { type: MANAGEMENT.SETTING }, { root: true });
       // Setting does not exist - create a new one
       this.uiPerfSetting.value = JSON.stringify(DEFAULT_PERF_SETTING);
       this.uiPerfSetting.metadata = { name: SETTING.UI_PERFORMANCE };
     }
 
+    try {
+      this.authUserTTL = await this.$store.dispatch(`management/find`, { type: MANAGEMENT.SETTING, id: SETTING.AUTH_USER_SESSION_TTL_MINUTES });
+    } catch {}
+
     const sValue = this.uiPerfSetting?.value || JSON.stringify(DEFAULT_PERF_SETTING);
 
     this.value = {
@@ -42,11 +46,13 @@ export default {
 
   data() {
     return {
-      uiPerfSetting:    DEFAULT_PERF_SETTING,
-      bannerVal:        {},
-      value:            {},
-      errors:           [],
-      gcStartedEnabled: null
+      uiPerfSetting:              DEFAULT_PERF_SETTING,
+      authUserTTL:                null,
+      bannerVal:                  {},
+      value:                      {},
+      errors:                     [],
+      gcStartedEnabled:           null,
+      isInactivityThresholdValid: false,
     };
   },
 
@@ -56,9 +62,28 @@ export default {
 
       return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
     },
+
+    canSave() {
+      return this.value.inactivity.enabled ? this.isInactivityThresholdValid : true;
+    }
   },
 
   methods: {
+    validateInactivityThreshold(value) {
+      if (!this.authUserTTL?.value) {
+        this.isInactivityThresholdValid = true;
+
+        return;
+      }
+
+      if (parseInt(value) > parseInt(this.authUserTTL?.value)) {
+        this.isInactivityThresholdValid = false;
+
+        return this.t('performance.inactivity.authUserTTL', { current: this.authUserTTL.value });
+      }
+      this.isInactivityThresholdValid = true;
+    },
+
     async save(btnCB) {
       this.uiPerfSetting.value = JSON.stringify(this.value);
       this.errors = [];
@@ -89,8 +114,36 @@ export default {
     </h1>
     <div>
       <div class="ui-perf-setting">
-        <!-- Websocket Notifications -->
+        <!-- Inactivity -->
         <div class="mt-20">
+          <h2>{{ t('performance.inactivity.title') }}</h2>
+          <p>{{ t('performance.inactivity.description') }}</p>
+          <Checkbox
+            v-model="value.inactivity.enabled"
+            :mode="mode"
+            :label="t('performance.inactivity.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <LabeledInput
+              v-model="value.inactivity.threshold"
+              :mode="mode"
+              :label="t('performance.inactivity.inputLabel')"
+              :disabled="!value.inactivity.enabled"
+              class="input mb-10"
+              type="number"
+              min="0"
+              :rules="[validateInactivityThreshold]"
+            />
+            <span
+              v-clean-html="t('performance.inactivity.information', {}, true)"
+              :class="{ 'text-muted': !value.incrementalLoading.enabled }"
+            />
+          </div>
+        </div>
+        <!-- Websocket Notifications -->
+        <div class="mt-40">
           <h2>{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
@@ -296,6 +349,7 @@ export default {
       <AsyncButton
         class="pull-right mt-20"
         mode="apply"
+        :disabled="!canSave"
         @click="save"
       />
     </div>

package/store/index.js

@@ -1,32 +1,37 @@
-import Steve from '@shell/plugins/steve';
-import {
-  COUNT, NAMESPACE, NORMAN, MANAGEMENT, FLEET, UI, VIRTUAL_HARVESTER_PROVIDER, DEFAULT_WORKSPACE
-} from '@shell/config/types';
-import { CLUSTER as CLUSTER_PREF, NAMESPACE_FILTERS, LAST_NAMESPACE, WORKSPACE } from '@shell/store/prefs';
-import { allHash, allHashSettled } from '@shell/utils/promise';
-import { ClusterNotFoundError, ApiError } from '@shell/utils/error';
-import { sortBy } from '@shell/utils/sort';
-import { filterBy, findBy } from '@shell/utils/array';
-import { BOTH, CLUSTER_LEVEL, NAMESPACED } from '@shell/store/type-map';
-import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { TIMED_OUT, LOGGED_OUT, _FLAGGED, UPGRADED } from '@shell/config/query-params';
+import { BACK_TO } from '@shell/config/local-storage';
 import { setBrand, setVendor } from '@shell/config/private-label';
-import { addParam } from '@shell/utils/url';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import { LOGGED_OUT, TIMED_OUT, UPGRADED, _FLAGGED } from '@shell/config/query-params';
 import { SETTING } from '@shell/config/settings';
-import semver from 'semver';
-import { BACK_TO } from '@shell/config/local-storage';
-import { STEVE_MODEL_TYPES } from '@shell/plugins/steve/getters';
+import {
+  COUNT,
+  DEFAULT_WORKSPACE,
+  FLEET,
+  MANAGEMENT,
+  NAMESPACE, NORMAN,
+  UI, VIRTUAL_HARVESTER_PROVIDER
+} from '@shell/config/types';
 import { BY_TYPE } from '@shell/plugins/dashboard-store/classify';
+import Steve from '@shell/plugins/steve';
+import { STEVE_MODEL_TYPES } from '@shell/plugins/steve/getters';
+import { CLUSTER as CLUSTER_PREF, LAST_NAMESPACE, NAMESPACE_FILTERS, WORKSPACE } from '@shell/store/prefs';
+import { BOTH, CLUSTER_LEVEL, NAMESPACED } from '@shell/store/type-map';
+import { filterBy, findBy } from '@shell/utils/array';
+import { ApiError, ClusterNotFoundError } from '@shell/utils/error';
+import { gcActions, gcGetters } from '@shell/utils/gc/gc-root-store';
 import {
-  NAMESPACE_FILTER_ALL_USER as ALL_USER,
-  NAMESPACE_FILTER_ALL_SYSTEM as ALL_SYSTEM,
   NAMESPACE_FILTER_ALL_ORPHANS as ALL_ORPHANS,
-  NAMESPACE_FILTER_NAMESPACED_YES as NAMESPACED_YES,
+  NAMESPACE_FILTER_ALL_SYSTEM as ALL_SYSTEM,
+  NAMESPACE_FILTER_ALL_USER as ALL_USER,
   NAMESPACE_FILTER_NAMESPACED_NO as NAMESPACED_NO,
   NAMESPACE_FILTER_NAMESPACED_PREFIX as NAMESPACED_PREFIX,
+  NAMESPACE_FILTER_NAMESPACED_YES as NAMESPACED_YES,
   splitNamespaceFilterKey,
 } from '@shell/utils/namespace-filter';
-import { gcActions, gcGetters } from '@shell/utils/gc/gc-root-store';
+import { allHash, allHashSettled } from '@shell/utils/promise';
+import { sortBy } from '@shell/utils/sort';
+import { addParam } from '@shell/utils/url';
+import semver from 'semver';
 
 // Disables strict mode for all store instances to prevent warning about changing state outside of mutations
 // because it's more efficient to do that sometimes.
@@ -591,7 +596,6 @@ export const mutations = {
     state.isMultiCluster = isMultiCluster;
     state.isRancher = isRancher;
   },
-
   clusterReady(state, ready) {
     state.clusterReady = ready;
   },
@@ -1122,5 +1126,16 @@ export const actions = {
     commit(`setIsSingleProduct`, isSingleProduct);
   },
 
+  unsubscribe( { state, dispatch }) {
+    // It would be nice to grab all vuex module stores that we've registered, apparently this is only possible via the
+    // internal properties store._modules.root._children.
+    // So instead loop through all state entries to find stores
+    return Object.entries(state).filter(([storeName, storeState]) => {
+      if (storeState?.allowStreaming) {
+        dispatch(`${ storeName }/unsubscribe`);
+      }
+    });
+  },
+
   ...gcActions
 };