@rancher/shell 3.0.7 → 3.0.8-rc.10

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/PaginatedResourceTable.vue

@@ -116,15 +116,11 @@ export default defineComponent({
   },
 
   async fetch() {
-    const promises = [
-      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
-    ];
-
     if (this.fetchSecondaryResources) {
-      promises.push(this.fetchSecondaryResources({ canPaginate: this.canPaginate }));
+      await this.fetchSecondaryResources({ canPaginate: this.canPaginate });
     }
 
-    await Promise.all(promises);
+    await this.$fetchType(this.resource, [], this.overrideInStore || this.inStore);
   },
 
   computed: {

package/components/PopoverCard.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import { ref, watch } from 'vue';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
+import RcButton from '@components/RcButton/RcButton.vue';
+
+export interface Props {
+  cardTitle: string;
+  fallbackFocus?: string;
+  showPopoverAriaLabel?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<Props>(), { fallbackFocus: 'body', showPopoverAriaLabel: 'Show more' });
+const card = ref<any>(null);
+const popoverContainer = ref(null);
+const showPopover = ref<boolean>(false);
+const focusOpen = ref<boolean>(false);
+
+// Set focus trap when card opened using keyboard
+watch(
+  () => card.value,
+  (neu) => {
+    if (neu && focusOpen.value) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        fallbackFocus:  props.fallbackFocus,
+        setReturnFocus: () => '.focus-button'
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => showPopover.value, '#popover-card', opts);
+    }
+  }
+);
+</script>
+
+<template>
+  <div
+    class="popover-card-base"
+    :class="{open: showPopover}"
+    @mouseleave="showPopover=false; focusOpen=false"
+    @keydown.escape="showPopover=false; focusOpen=false"
+  >
+    <v-dropdown
+      :triggers="[]"
+      :container="popoverContainer"
+      :shown="showPopover"
+      placement="bottom-start"
+    >
+      <div
+        class="popover-card-target"
+        @mouseenter="showPopover=true"
+      >
+        <slot name="default" />
+        <RcButton
+          ghost
+          class="focus-button"
+          :aria-label="props.showPopoverAriaLabel"
+          aria-haspopup="true"
+          :aria-expanded="showPopover"
+          @click="showPopover=true; focusOpen=true;"
+        >
+          <i class="icon icon-chevron-down icon-sm" />
+        </RcButton>
+        <div
+          ref="popoverContainer"
+          class="popover-card-container"
+        >
+          <!--Empty container for mounting popper content-->
+        </div>
+      </div>
+
+      <template
+        #popper
+      >
+        <slot name="card">
+          <Card
+            id="popover-card"
+            ref="card"
+            class="popover-card"
+            :title="props.cardTitle"
+          >
+            <template #heading-action>
+              <slot
+                name="heading-action"
+                :close="() => {showPopover=false; focusOpen=false;}"
+              />
+            </template>
+            <slot name="card-body" />
+          </Card>
+        </slot>
+      </template>
+    </v-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.popover-card-base {
+  position: relative;
+  width: 100%;
+
+  .popover-card {
+    border: none;
+  }
+
+  .display-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .display {
+    display: inline-flex;
+    max-width: 100%;
+    a {
+      flex: 1;
+    }
+  }
+
+  .popover-card-target {
+    height: 17px;
+    display: inline-block;
+  }
+
+  .focus-button {
+    margin-left: 4px;
+    margin-right: 2px;
+    padding: 0;
+    width: 0px;
+    height: initial;
+    min-height: initial;
+    overflow: hidden;
+    border-width: 0;
+
+    &:focus {
+      width: initial;
+      border-width: 1px;
+    }
+  }
+
+  .popover-card-base {
+    border: none;
+  }
+
+  .popover-card-container {
+    position: absolute;
+    $size: 10px;
+    height: $size;
+    bottom: -$size;
+  }
+
+  &.open .popover-card-container {
+    width: 100%;
+  }
+
+  &:deep() {
+    & > .v-popper > .btn.role-link {
+      padding: 0;
+      min-height: initial;
+      line-height: initial;
+
+      &:hover {
+        background: none;
+      }
+    }
+
+    .popover-card-container > .v-popper__popper {
+      border-radius: 6px;
+      box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.04);
+
+      & > .v-popper__wrapper {
+        .v-popper__arrow-container {
+          display: none;
+        }
+
+        & > .v-popper__inner {
+          overflow: initial;
+          &, & > div > .dropdownTarget {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>