@rancher/shell 3.0.7 → 3.0.8-rc.2

package/components/Inactivity.vue

@@ -3,11 +3,14 @@ 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';
+import Inactivity from '@shell/utils/inactivity';
+import { MANAGEMENT, EXT, NORMAN } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 
 let globalId;
 
+const MODAL_VISIBILITY_CHECK_DELAY_SECONDS = 10;
+
 export default {
   name:       'Inactivity',
   components: {
@@ -15,64 +18,151 @@ export default {
   },
   data() {
     return {
-      enabled:             null,
-      isOpen:              false,
-      isInactive:          false,
-      showModalAfter:      null,
-      inactivityTimeoutId: null,
-      courtesyTimer:       null,
-      courtesyTimerId:     null,
-      courtesyCountdown:   null,
-      trackInactivity:     throttle(this._trackInactivity, 1000),
-      id:                  null,
+      sessionTokenName:        null,
+      tokens:                  [],
+      isUserActive:            false,
+      userActivityIsoDate:     '',
+      modalVisibilityCheckRan: false,
+      isOpen:                  false,
+      showModalAfter:          null,
+      expiresAt:               null,
+      inactivityTimeoutId:     null,
+      courtesyTimer:           null,
+      courtesyTimerId:         null,
+      courtesyCountdown:       null,
+      trackInactivity:         throttle(this._trackInactivity, 1000),
+      id:                      null
     };
   },
-  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 });
+  beforeUnmount() {
+    this.removeEventListeners();
+    this.clearAllTimeouts();
+  },
+  computed: {
+    timerPercentageLeft() {
+      return Math.floor((this.courtesyCountdown / this.courtesyTimer ) * 100);
+    },
+    colorStops() {
+      return {
+        0: '--info', 30: '--info', 70: '--info'
+      };
+    },
+    userSessionTtlIdleSetting() {
+      return this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.AUTH_USER_SESSION_IDLE_TTL_MINUTES);
+    },
+    userSessionTtlSetting() {
+      return this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.AUTH_USER_SESSION_TTL_MINUTES);
+    },
+    userActivityResource() {
+      return this.$store.getters['management/byId'](EXT.USER_ACTIVITY, this.sessionTokenName);
+    },
+    ttlIdleValue() {
+      return parseInt(this.userSessionTtlIdleSetting?.value || 0);
+    },
+    ttlValue() {
+      return parseInt(this.userSessionTtlSetting?.value || 0);
+    },
+    isFeatureEnabled() {
+      return this.ttlIdleValue < this.ttlValue;
+    },
+    userActivityExpiresAt() {
+      return this.userActivityResource?.status?.expiresAt || '';
+    },
+    watcherData() {
+      return {
+        userActivityExpiresAt: this.userActivityExpiresAt,
+        sessionTokenName:      this.sessionTokenName,
+        isFeatureEnabled:      this.isFeatureEnabled
+      };
+    }
+  },
 
-      settings = settingsString?.value ? JSON.parse(settingsString.value) : DEFAULT_PERF_SETTING;
-    } catch { }
+  watch: {
+    // every time the Idle setting changes, we need to fetch the updated userActivity
+    async ttlIdleValue() {
+      await Inactivity.getUserActivity(this.$store, this.sessionTokenName);
+    },
+    watcherData: {
+      async handler(neu, old) {
+        if (!old?.isFeatureEnabled && neu?.isFeatureEnabled) {
+          const tokenName = Inactivity.getSessionTokenName();
 
-    if (!settings || !settings?.inactivity || !settings?.inactivity.enabled) {
-      return;
-    }
+          if (tokenName) {
+            this.sessionTokenName = tokenName;
+          }
 
-    this.enabled = settings?.inactivity?.enabled || false;
+          await this.initializeInactivityData();
+        }
 
-    // Total amount of time before the user's session is lost
-    const thresholdToSeconds = settings?.inactivity?.threshold * 60;
+        const currDate = Date.now();
+        const endDate = new Date(neu.userActivityExpiresAt || '0001-01-01 00:00:00 +0000 UTC').getTime();
 
-    // 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;
+        if (endDate > currDate && neu?.sessionTokenName && neu?.isFeatureEnabled) {
+          // feature is considered as enabled
+          // make sure we always clean up first so that we don't get duplicate timers running
+          this.stopInactivity();
 
-    console.debug(`Inactivity modal will show after ${ this.showModalAfter / 60 }(m) and be shown for ${ this.courtesyTimer / 60 }(m)`); // eslint-disable-line no-console
+          // resets inactivity data and timers, starting the inactivity again with the proper data
+          this.resetInactivityDataAndTimers(this.userActivityResource);
 
-    this.courtesyCountdown = this.courtesyTimer;
+          // add event listeners for UI interaction
+          this.addIdleListeners();
+        }
 
-    if (settings?.inactivity.enabled) {
-      this.trackInactivity();
-      this.addIdleListeners();
+        if (!neu?.isFeatureEnabled) {
+          this.stopInactivity();
+        }
+      },
+      immediate: true,
+      deep:      true
     }
   },
-  beforeUnmount() {
-    this.removeEventListener();
-    this.clearAllTimeouts();
-  },
+
   methods: {
+    async initializeInactivityData() {
+      const canListUserAct = this.$store.getters[`management/canList`](EXT.USER_ACTIVITY);
+      const canListTokens = this.$store.getters[`rancher/canList`](NORMAN.TOKEN);
+
+      if (canListUserAct && canListTokens) {
+        const tokens = await this.$store.dispatch('rancher/findAll', { type: NORMAN.TOKEN, opt: { watch: false } });
+
+        this.tokens = tokens;
+
+        // handle the fetching/storage of session token name
+        if (!this.sessionTokenName) {
+          const sessionToken = this.tokens.find((token) => {
+            return token.description === 'UI session' && token.current;
+          });
+
+          if (sessionToken?.name) {
+            this.sessionTokenName = sessionToken.name;
+            Inactivity.setSessionTokenName(sessionToken.name);
+          }
+        }
+
+        // get the latest userActivity data so that get reactivity on all this logic
+        const userActivityData = await Inactivity.getUserActivity(this.$store, this.sessionTokenName, false);
+
+        const expiresAt = userActivityData?.status?.expiresAt;
+        const currDate = Date.now();
+        const endDate = new Date(expiresAt).getTime();
+
+        // If expiresAt isn't initialised yet '0001-01-01 00:00:00 +0000 UTC' || '', or just passed the 'now' date
+        // We need to update/initialise the UserActivity resource
+        if ((currDate > endDate) || !expiresAt) {
+          const updatedData = await Inactivity.updateUserActivity(this.userActivityResource, this.sessionTokenName, new Date().toISOString());
+
+          this.expiresAt = updatedData?.status?.expiresAt;
+        } else if (expiresAt) {
+          this.expiresAt = expiresAt;
+        }
+      }
+    },
     _trackInactivity() {
-      if (this.isInactive || this.isOpen || !this.showModalAfter) {
+      if (this.isOpen || !this.showModalAfter) {
         return;
       }
 
-      this.clearAllTimeouts();
       const endTime = Date.now() + this.showModalAfter * 1000;
 
       this.id = endTime;
@@ -89,6 +179,18 @@ export default {
           this.isOpen = true;
           this.startCountdown();
         } else {
+          // When we have X seconds to go until we display the modal, check for activity on the backend flag
+          // it may have come from another tab in the same browser
+          if (now >= endTime - (MODAL_VISIBILITY_CHECK_DELAY_SECONDS * 1000) && !this.modalVisibilityCheckRan) {
+            this.modalVisibilityCheckRan = true;
+
+            if (this.isUserActive) {
+              this.resetUserActivity();
+            } else {
+              this.checkBackendInactivity(this.expiresAt);
+            }
+          }
+
           this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
         }
       };
@@ -98,13 +200,16 @@ export default {
     startCountdown() {
       const endTime = Date.now() + (this.courtesyCountdown * 1000);
 
-      const checkCountdown = () => {
+      const checkCountdown = async() => {
         const now = Date.now();
 
         if (now >= endTime) {
-          this.isInactive = true;
-          this.unsubscribe();
           this.clearAllTimeouts();
+          const isUserActive = await this.checkBackendInactivity(this.expiresAt);
+
+          if (!isUserActive) {
+            return this.$store.dispatch('auth/logout', { sessionIdle: true });
+          }
         } else {
           this.courtesyCountdown = Math.floor((endTime - now) / 1000);
           this.courtesyTimerId = setTimeout(checkCountdown, 1000);
@@ -113,63 +218,85 @@ export default {
 
       checkCountdown();
     },
+    async checkBackendInactivity(currExpiresAt) {
+      let isUserActive = false;
+      const userActivityData = await Inactivity.getUserActivity(this.$store, this.sessionTokenName);
+
+      // this means that something updated the backend expiresAt, which means we must now reset the timers and adjust for new data
+      if (userActivityData?.status?.expiresAt && (userActivityData?.status?.expiresAt !== currExpiresAt)) {
+        isUserActive = true;
+        this.resetInactivityDataAndTimers(userActivityData);
+      }
+
+      return isUserActive;
+    },
+    setUserAsActive() {
+      this.isUserActive = true;
+      this.userActivityIsoDate = new Date().toISOString();
+    },
     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;
+      document.addEventListener('mousemove', this.setUserAsActive);
+      document.addEventListener('mousedown', this.setUserAsActive);
+      document.addEventListener('keypress', this.setUserAsActive);
+      document.addEventListener('touchmove', this.setUserAsActive);
+      document.addEventListener('visibilitychange', this.setUserAsActive);
+    },
+    removeEventListeners() {
+      document.removeEventListener('mousemove', this.setUserAsActive);
+      document.removeEventListener('mousedown', this.setUserAsActive);
+      document.removeEventListener('keypress', this.setUserAsActive);
+      document.removeEventListener('touchmove', this.setUserAsActive);
+      document.removeEventListener('visibilitychange', this.setUserAsActive);
+    },
+    async resetUserActivity(useCurrDate = false) {
+      let seenAt;
+
+      if (useCurrDate) {
+        seenAt = new Date().toISOString();
+      } else {
+        seenAt = this.userActivityIsoDate;
+      }
+
+      const userActivityData = await Inactivity.updateUserActivity(this.userActivityResource, this.sessionTokenName, seenAt);
+
+      this.resetInactivityDataAndTimers(userActivityData);
+    },
+    stopInactivity() {
+      this.modalVisibilityCheckRan = false;
       this.isOpen = false;
-      this.courtesyCountdown = this.courtesyTimer;
+      this.isUserActive = false;
+      this.userActivityIsoDate = '';
+
+      this.removeEventListeners();
       this.clearAllTimeouts();
     },
+    resetInactivityDataAndTimers(userActivityData) {
+      const data = Inactivity.parseTTLData(userActivityData);
 
-    refresh() {
-      window.location.reload();
-    },
+      this.modalVisibilityCheckRan = false;
+      this.isOpen = false;
+      this.isUserActive = false;
+      this.userActivityIsoDate = '';
 
-    unsubscribe() {
-      console.debug('Unsubscribing from all websocket events'); // eslint-disable-line no-console
-      this.$store.dispatch('unsubscribe');
+      this.courtesyTimer = data.courtesyTimer;
+      this.courtesyCountdown = data.courtesyCountdown;
+      this.showModalAfter = data.showModalAfter;
+      this.sessionTokenName = data.sessionTokenName;
+      this.expiresAt = data.expiresAt;
+
+      const shownAfter = Math.round(((data.showModalAfter || 0) / 60) * 100) / 100;
+      const shownFor = Math.round(((data.courtesyTimer || 0) / 60) * 100) / 100;
+
+      console.debug(`UI inactivity modal (backend-based) will show after ${ shownAfter }(m) and be shown for ${ shownFor }(m)`); // eslint-disable-line no-console
+
+      this.clearAllTimeouts();
+      this.trackInactivity();
     },
     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>
 
@@ -179,24 +306,22 @@ export default {
     ref="inactivityModal"
     name="inactivityModal"
     save-text="Continue"
-    @finish="resume"
   >
     <template #title>
-      {{ isInactiveTexts.title }}
+      {{ t('inactivity.title') }}
     </template>
     <span>{{ courtesyCountdown }}</span>
 
     <template #content>
       <Banner color="info">
-        {{ isInactiveTexts.banner }}
+        {{ t('inactivity.banner') }}
       </Banner>
 
       <p>
-        {{ isInactiveTexts.content }}
+        {{ t('inactivity.content') }}
       </p>
 
       <PercentageBar
-        v-if="!isInactive"
         class="mt-20"
         :modelValue="timerPercentageLeft"
         :color-stops="colorStops"
@@ -208,20 +333,11 @@ export default {
     >
       <div class="card-actions">
         <button
-          v-if="!isInactive"
           class="btn role-tertiary bg-primary"
-          @click.prevent="resume"
+          @click.prevent="resetUserActivity(true)"
         >
           <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>

package/components/InstallHelmCharts.vue

@@ -117,7 +117,7 @@ export default {
 
       // server url and project ids are used in global values
       try {
-        this.serverUrlSetting = await this.$store.dispatch(`${ this.store }/find`, {
+        this.serverUrlSetting = await this.$store.dispatch(`management/find`, {
           type: MANAGEMENT.SETTING,
           id:   SETTING.SERVER_URL,
         });
@@ -125,7 +125,7 @@ export default {
         this.$store.dispatch('growl/fromError', { err: e });
       }
 
-      await this.$store.dispatch(`${ this.store }/findAll`, { type: MANAGEMENT.PROJECT });
+      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.PROJECT });
     }
   },
 

package/components/Resource/Detail/CopyToClipboard.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-    value: string;
+  value: string;
 }
 
 const props = defineProps<Props>();

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -3,8 +3,6 @@ import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
 
-jest.mock(`@shell/assets/images/icons/document.svg`, () => `@shell/assets/images/icons/document.svg`);
-
 describe('component: TitleBar/index', () => {
   const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
   const resourceTo = 'RESOURCE_TO';

package/components/Resource/Detail/TitleBar/index.vue

@@ -32,8 +32,6 @@ export interface TitleBarProps {
   actionMenuResource?: any;
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
-
-const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
 </script>
 
 <script setup lang="ts">
@@ -84,6 +82,7 @@ watch(
         </span>
         <BadgeState
           v-if="badge"
+          v-ui-context="{ store: store, icon: 'icon-folder', hookable: true, value: resource, tag: '__details-state', description: 'Details' }"
           class="badge-state"
           :color="badge.color"
           :label="badge.label"
@@ -99,11 +98,10 @@ watch(
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
           @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
-          <img
-            :src="showConfigurationIcon"
-            class="mmr-3"
+          <i
+            class="icon icon-document"
             aria-hidden="true"
-          >
+          />
           {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
         </RcButton>
         <ActionMenu
@@ -139,6 +137,12 @@ watch(
     position: relative;
   }
 
+  .icon-document {
+    width: 15px;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
   .show-configuration {
     margin-left: 16px;
   }

package/components/ResourceDetail/index.vue

@@ -430,6 +430,7 @@ export default {
     :is="showComponent"
     v-else-if="isFullPageOverride"
     v-model:value="value"
+    v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
     v-bind="$data"
     :done-params="doneParams"
     :done-route="doneRoute"
@@ -446,6 +447,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
+      v-ui-context="{ icon: 'icon-folder', value: liveModel.name, tag: liveModel.kind?.toLowerCase(), description: liveModel.kind }"
       :resource="resourceType"
       :value="liveModel"
       :mode="mode"
@@ -481,7 +483,7 @@ export default {
     </div>
 
     <ResourceYaml
-      v-else-if="isYaml"
+      v-if="isYaml"
       ref="resourceyaml"
       :value="value"
       :mode="mode"
@@ -499,6 +501,7 @@ export default {
       v-else
       ref="comp"
       v-model:value="value"
+      v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
       v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"

package/components/SortableTable/index.vue

@@ -1090,7 +1090,7 @@ export default {
       <div
         v-if="showHeaderRow"
         class="fixed-header-actions"
-        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
+        :class="{button: !!$slots['header-button'], 'with-sub-header': !!$slots['sub-header-row'], 'advanced-filtering': hasAdvancedFiltering}"
       >
         <div
           :class="bulkActionsClass"
@@ -1296,6 +1296,12 @@ export default {
           <slot name="header-button" />
         </div>
       </div>
+      <div
+        v-if="!!$slots['sub-header-row']"
+        class="sub-header-row"
+      >
+        <slot name="sub-header-row" />
+      </div>
     </div>
     <table
       ref="table"
@@ -1468,6 +1474,7 @@ export default {
                     <td
                       v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
                       :key="col.col.name"
+                      v-ui-context="col.col.name === 'state' ? { icon: 'icon-folder', hookable: true, value: row.row, tag: '__sortable-table-row', description: 'Row' } : undefined"
                       :data-title="col.col.label"
                       :data-testid="`sortable-cell-${ i }-${ j }`"
                       :align="col.col.align || 'left'"
@@ -2047,8 +2054,17 @@ export default {
     grid-template-columns: [bulk] auto [middle] min-content [search] minmax(min-content, 350px);
   }
 
+  $header-padding: 20px;
+  .sub-header-row {
+    padding: 0 0 $header-padding / 2 0;
+  }
+
   .fixed-header-actions {
-    padding: 0 0 20px 0;
+    padding: 0 0 $header-padding 0;
+    &.with-sub-header {
+      padding: 0 0 $header-padding / 4 0;
+    }
+
     width: 100%;
     z-index: z-index('fixedTableHeader');
     background: transparent;

package/components/{nav/WindowManager → Window}/ContainerLogs.vue

@@ -10,7 +10,7 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
-import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
+import ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
 import { debounce } from 'lodash';

package/components/{nav/WindowManager → Window}/ContainerLogsActions.vue

@@ -49,6 +49,7 @@ defineEmits([
       <rc-dropdown-item-select
         :model-value="range"
         :options="rangeOptions"
+        :label="t('wm.containerLogs.range.label')"
         @select="$emit('toggleRange', $event)"
       />
       <rc-dropdown-item-checkbox

package/components/{nav/WindowManager → Window}/__tests__/ContainerLogs.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import ContainerLogs from '@shell/components/nav/WindowManager/ContainerLogs.vue';
+import ContainerLogs from '@shell/components/Window/ContainerLogs.vue';
 import { base64Encode } from '@shell/utils/crypto';
 import { Buffer } from 'buffer';
 import { addEventListener } from '@shell/utils/socket';

package/components/{nav/WindowManager → Window}/__tests__/ContainerShell.test.ts

@@ -1,9 +1,9 @@
 import { flushPromises, mount, Wrapper } from '@vue/test-utils';
-import ContainerShell from '@shell/components/nav/WindowManager/ContainerShell.vue';
+import ContainerShell from '@shell/components/Window/ContainerShell.vue';
 import Socket, {
   addEventListener, EVENT_CONNECTED, EVENT_CONNECTING, EVENT_DISCONNECTED, EVENT_MESSAGE, EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
-import Window from '@shell/components/nav/WindowManager/Window.vue';
+import Window from '@shell/components/Window/Window.vue';
 
 jest.mock('@shell/utils/socket');
 jest.mock('@shell/utils/crypto', () => {