[Sessions] Show what historical sessions are currently being used for filtering

src/multipleHistoricalSessions/indicator/historicalSessionIndicator.vue

@@ -11,13 +11,27 @@
         <span class="angular-w"> Historical Session Filtering Disabled in Config </span>
       </span>
 
-      <span v-else class="c-indicator__label" style="display: flex; flex-direction: column">
-        <template v-if="availableSessions.length">
-          <span v-if="sessionFilter.numbers" class="angular-w">
-            {{ filteredByMessageString }}
-            <button @click="openSessionSelector">Change</button>
-            <button @click="clearAllSessions">Clear</button>
-          </span>
+            <span
+                v-else
+                class="c-indicator__label"  
+                style="display:flex; flex-direction:column;"
+            >
+
+                <template v-if="availableSessions.length">
+
+                    <span 
+                        v-if="sessionFilter.numbers"
+                        :title="filteredByTitleString"
+                        class="angular-w"
+                    >
+                        {{filteredByMessageString}}
+                        <button @click="openSessionSelector">
+                            Change
+                        </button>
+                        <button @click="clearAllSessions">
+                            Clear
+                        </button>
+                    </span>
 
           <span v-else class="angular-w">
             Filter by historical sessions
@@ -48,64 +62,71 @@
 <script>
 import HistoricalSessionSelector from '../sessionSelector/historicalSessionSelector.vue';
 import SessionService from 'services/session/SessionService';
-
+import { formatMultipleSessionNumbers } from '../../utils/strings';
 export default {
-  inject: ['openmct', 'table'],
-  components: {
-    HistoricalSessionSelector
-  },
-  computed: {
-    filteredByMessageString() {
-      let sessionOrSessions;
-
-      if (this.sessionFilter.numbers.length === 1) {
-        sessionOrSessions = 'session';
-      } else {
-        sessionOrSessions = 'sessions';
-      }
-      return `Historical queries filtered by ${this.sessionFilter.numbers.length} ${sessionOrSessions}`;
-    }
-  },
-  data() {
-    return {
-      sessionFilter: {},
-      numFilteredSessions: 8,
-      availableSessions: [],
-      showSessionSelector: false,
-      isRequestingSessions: false,
-      historicalSessionFilterDisabled: false
-    };
-  },
-  methods: {
-    setHistoricalSessionFilter(sessions) {
-      if (sessions) {
-        this.sessionFilter = sessions;
-      } else {
-        this.sessionFilter = {};
-      }
-    },
-    setAvailableSessions(sessions) {
-      this.isRequestingSessions = false;
-      this.availableSessions = sessions;
+    inject: [
+        'openmct',
+        'table'
+    ],
+    components: {
+        HistoricalSessionSelector
     },
-    openSessionSelector() {
-      this.showSessionSelector = true;
+    computed: {
+        filteredByMessageString() {
+            let sessionOrSessions;            
+
+            if (this.sessionFilter.numbers.length === 1) {
+                sessionOrSessions = `session: ${this.sessionFilter.numbers[0]}`;
+            } else {
+                sessionOrSessions = 'sessions';
+            }
+            return `Historical queries filtered by ${this.sessionFilter.numbers.length} ${sessionOrSessions}`;
+        },
+        filteredByTitleString() {
+            let sessionNumbers = formatMultipleSessionNumbers(this.sessionFilter.numbers);
+
+            return `Currently filtering on host ${this.sessionFilter.host} by: ${sessionNumbers}`;
+        }
     },
-    closeSessionSelector() {
-      this.showSessionSelector = false;
+    data() {
+        return {
+            sessionFilter: {},
+            numFilteredSessions: 8,
+            availableSessions: [],
+            showSessionSelector: false,
+            isRequestingSessions: false,
+            historicalSessionFilterDisabled: false
+        }
     },
-    clearAllSessions() {
-      this.sessionService.setHistoricalSessionFilter();
+    methods: {
+        setHistoricalSessionFilter(sessions) {
+            if (sessions) {
+                this.sessionFilter = sessions;
+            } else {
+                this.sessionFilter = {};
+            }
+        },  
+        setAvailableSessions(sessions) {
+            this.isRequestingSessions = false;
+            this.availableSessions = sessions;
+        },
+        openSessionSelector() {
+            this.showSessionSelector = true;
+        },
+        closeSessionSelector() {
+            this.showSessionSelector = false;
+        },
+        clearAllSessions() {
+            this.sessionService.setHistoricalSessionFilter();
+        },
+        checkForHistoricalSessions() {
+            this.isRequestingSessions = true;
+            this.sessionService.getHistoricalSessions({}).then(this.setAvailableSessions);
+        }
     },
-    checkForHistoricalSessions() {
-      this.isRequestingSessions = true;
-      this.sessionService.getHistoricalSessions({}).then(this.setAvailableSessions);
-    }
-  },
-  mounted() {
-    this.sessionService = SessionService();
-    this.historicalSessionFilterDisabled =
-      this.sessionService.historicalSessionFilterConfig.disable;
+    mounted() {
+        this.sessionService = SessionService();
+        this.historicalSessionFilterDisabled = this.sessionService.historicalSessionFilterConfig.disable;
 
     window.setTimeout(this.checkForHistoricalSessions, 2000);
 

src/services/session/SessionService.js

@@ -2,7 +2,7 @@ import mcws from 'services/mcws/mcws';
 import DatasetCache from 'services/dataset/DatasetCache';
 import SessionURLHandler from './SessionURLHandler';
 import SessionLocalStorageHander from './SessionLocalStorageHandler';
-
+import { formatMultipleSessionNumbers } from '../../utils/strings';
 const ERROR_PREFIX = 'Error when notifying listener: ';
 
 /**
@@ -405,7 +405,7 @@ class SessionService {
     let notificationString = 'Historical queries not restricted by session.';
 
     if (model) {
-      notificationString = `Historical queries restricted to ${model.numbers.length} ${model.numbers.length > 1 ? "session's" : 'session'} on ${model.host}.`;
+      notificationString = `Historical queries restricted to ${model.numbers.length} ${model.numbers.length > 1 ? "session's" : 'session'} (${formatMultipleSessionNumbers(model.numbers)}) on ${model.host}.`;
     }
 
     this.notificationService.info(notificationString);

src/utils/strings.js

@@ -10,4 +10,41 @@ function snakeCaseToStartCase(str) {
     .join(' ');
 }
 
-export { snakeCaseToStartCase };
+/**
+ * Formats multiple session numbers into a string
+ * @param {Array<string>} sessionNumbers - Array of session numbers
+ * @returns {string} Formatted string of session numbers
+ */
+function formatMultipleSessionNumbers(sessionNumbers) {
+  if (sessionNumbers.length === 2) {
+    return `${sessionNumbers[0]} and ${sessionNumbers[1]}`;
+  }
+
+  const sortedNumbers = sessionNumbers.map(Number).sort((a, b) => a - b);
+  let result = `${sortedNumbers[0]}`;
+  let rangeLength = 1;
+
+  for (let i = 1; i < sortedNumbers.length; i++) {
+    const current = sortedNumbers[i];
+    const prev = sortedNumbers[i - 1];
+
+    if (current === prev + 1) {
+      rangeLength++;
+    } else {
+      if (rangeLength > 2) {
+        result += `...${prev}`;
+      }
+      result += `, ${current}`;
+      rangeLength = 1;
+    }
+  }
+
+  // Handle the last range if it exists
+  if (rangeLength > 2) {
+    result += `...${sortedNumbers[sortedNumbers.length - 1]}`;
+  }
+
+  return result;
+}
+
+export { snakeCaseToStartCase, formatMultipleSessionNumbers };