@rancher/shell 3.0.6 → 3.0.8-rc.1

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/ResourceDetail/index.vue

@@ -181,6 +181,7 @@ export default {
         if (e.status === 404 || e.status === 403) {
           store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource: resourceType, fqid }, true)));
         }
+        console.debug(`Could not find '${ resourceType }' with id '${ id }''`, e); // eslint-disable-line no-console
         liveModel = {};
         notFound = fqid;
       }
@@ -480,7 +481,7 @@ export default {
     </div>
 
     <ResourceYaml
-      v-else-if="isYaml"
+      v-if="isYaml"
       ref="resourceyaml"
       :value="value"
       :mode="mode"

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"
@@ -2047,8 +2053,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/SortableTable/sorting.js

@@ -68,6 +68,7 @@ export default {
 
   data() {
     let sortBy = null;
+    let descending = false;
 
     this._defaultSortBy = this.defaultSortBy;
 
@@ -78,6 +79,7 @@ export default {
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
+        descending = markedColumn.defaultSortDescending;
       } else if ( nameColumn ) {
         // Use the name column if there is one
         this._defaultSortBy = nameColumn.name;
@@ -101,7 +103,7 @@ export default {
 
     return {
       sortBy,
-      descending: false,
+      descending,
       cachedRows: null,
       cacheKey:   null,
     };

package/components/Tabbed/index.vue

@@ -412,7 +412,7 @@ export default {
     }
 
     .tab.active {
-      border-bottom: solid 2px var(--primary);
+      border-bottom: solid 2px var(--active, var(--primary));
     }
   }
 
@@ -450,7 +450,7 @@ export default {
 
     &.active {
       > A {
-        color: var(--primary);
+        color: var(--active, var(--primary));
         text-decoration: none;
       }
     }
@@ -530,16 +530,16 @@ export default {
       border-left: solid 5px transparent;
 
       &.toggle A {
-        color: var(--primary);
+        color: var(--active, var(--primary));
       }
 
       A {
-        color: var(--primary);
+        color: var(--link, var(--primary));
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-left: solid 5px var(--primary);
+        border-left: solid 5px var(--active, var(--primary));
 
         & A {
           color: var(--input-label);

package/components/fleet/FleetConfigMapSelector.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { _EDIT } from '@shell/config/query-params';
+import { CONFIG_MAP } from '@shell/config/types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+
+interface ConfigMap {
+  id?: string;
+  name: string;
+  namespace: string;
+}
+
+const props = defineProps({
+  value: {
+    type:     Object,
+    required: true,
+  },
+  namespace: {
+    type:     String,
+    required: true,
+  },
+  inStore: {
+    type:    String,
+    default: 'management',
+  },
+  mode: {
+    type:    String,
+    default: _EDIT
+  },
+  label: {
+    type:    String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:value']);
+
+const configMaps = ref<ConfigMap[]>([]);
+
+const allConfigMapsSettings = {
+  updateResources: (configMapsList: ConfigMap[]) => {
+    const allConfigMapsInNamespace = configMapsList.filter((configMap) => configMap.namespace === props.namespace);
+    const mappedConfigMaps = mapConfigMaps(allConfigMapsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+    configMaps.value = allConfigMapsInNamespace;
+
+    return mappedConfigMaps;
+  }
+};
+
+const paginateConfigMapsSetting = {
+  requestSettings: paginatePageOptions,
+  updateResources: (configMapsList: ConfigMap[]) => {
+    const mappedConfigMaps = mapConfigMaps(configMapsList);
+
+    configMaps.value = configMapsList;
+
+    return mappedConfigMaps;
+  }
+};
+
+function mapConfigMaps(configMapsList: ConfigMap[]) {
+  return configMapsList.reduce<{ label: string; value: string }[]>((res, c) => {
+    if (c.id) {
+      res.push({ label: c.name, value: c.name });
+    } else {
+      res.push(c as any);
+    }
+
+    return res;
+  }, []);
+}
+
+function paginatePageOptions(opts: any) {
+  const { opts: { filter } } = opts;
+
+  const filters = !!filter ? [PaginationParamFilter.createSingleField({
+    field: 'metadata.name', value: filter, exact: false, equals: true
+  })] : [];
+
+  filters.push(
+    PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: props.namespace }),
+  );
+
+  return {
+    ...opts,
+    filters,
+    groupByNamespace: false,
+    classify:         true,
+    sort:             [{ asc: true, field: 'metadata.name' }],
+  };
+}
+
+function update(value: any) {
+  emit('update:value', value);
+}
+</script>
+
+<template>
+  <ResourceLabeledSelect
+    :key="namespace"
+    :value="value"
+    :label="label || t('fleet.configMaps.label')"
+    :mode="mode"
+    :resource-type="CONFIG_MAP"
+    :loading="$fetchState.pending"
+    :in-store="inStore"
+    :paginated-resource-settings="paginateConfigMapsSetting"
+    :all-resources-settings="allConfigMapsSettings"
+    :multiple="true"
+    @update:value="update"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>