Use the current timestamp from the global clock (#6851)

* Use the current timestamp from the global clock. Use mode changes to set if the view is fixed time or real time

* Reload the page after adding a plan and then change the url params.

e2e/tests/functional/planning/timelist.e2e.spec.js

@@ -98,6 +98,8 @@ test.describe('Time List', () => {
       const startBound = testPlan.TEST_GROUP[0].start;
       const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
 
+      await page.goto(timelist.url);
+
       // Switch to fixed time mode with all plan events within the bounds
       await page.goto(
         `${timelist.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=timelist.view`

src/plugins/timelist/Timelist.vue

@@ -38,6 +38,7 @@ import { getPreciseDuration } from '../../utils/duration';
 import { SORT_ORDER_OPTIONS } from './constants';
 import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants';
 
 const SCROLL_TIMEOUT = 10000;
 
@@ -114,10 +115,8 @@ export default {
   },
   mounted() {
     this.isEditing = this.openmct.editor.isEditing();
-    this.timestamp = this.openmct.time.isRealTime()
-      ? this.openmct.time.now()
-      : this.openmct.time.bounds().start;
-    this.openmct.time.on('clock', this.setViewFromClock);
+    this.timestamp = this.openmct.time.now();
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setFixedTime);
 
     this.getPlanDataAndSetConfig(this.domainObject);
 
@@ -138,7 +137,7 @@ export default {
     this.status = this.openmct.status.get(this.domainObject.identifier);
 
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
-    this.openmct.time.on('bounds', this.updateTimestamp);
+    this.openmct.time.on('tick', this.updateTimestamp);
     this.openmct.editor.on('isEditing', this.setEditState);
 
     this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
@@ -150,7 +149,7 @@ export default {
       this.composition.load();
     }
 
-    this.setViewFromClock(this.openmct.time.getClock());
+    this.setFixedTime(this.openmct.time.getMode());
   },
   beforeUnmount() {
     if (this.unlisten) {
@@ -166,8 +165,8 @@ export default {
     }
 
     this.openmct.editor.off('isEditing', this.setEditState);
-    this.openmct.time.off('bounds', this.updateTimestamp);
-    this.openmct.time.off('clock', this.setViewFromClock);
+    this.openmct.time.off('tick', this.updateTimestamp);
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.setFixedTime);
 
     this.$el.parentElement?.removeEventListener('scroll', this.deferAutoScroll, true);
     if (this.clearAutoScrollDisabledTimer) {
@@ -202,22 +201,15 @@ export default {
         this.listActivities();
       }
     },
-    updateTimestamp(bounds, isTick) {
-      if (isTick === true && this.openmct.time.isRealTime()) {
-        this.updateTimeStampAndListActivities(this.openmct.time.now());
-      } else if (isTick === false && !this.openmct.time.isRealTime()) {
-        // set the start time for fixed time using the selected bounds start
-        this.updateTimeStampAndListActivities(bounds.start);
-      }
+    updateTimestamp(timestamp) {
+      //The clock never stops ticking
+      this.updateTimeStampAndListActivities(timestamp);
     },
-    setViewFromClock(newClock) {
+    setFixedTime() {
       this.filterValue = this.domainObject.configuration.filter;
       this.isFixedTime = !this.openmct.time.isRealTime();
       if (this.isFixedTime) {
         this.hideAll = false;
-        this.updateTimeStampAndListActivities(this.openmct.time.bounds()?.start);
-      } else {
-        this.updateTimeStampAndListActivities(this.openmct.time.now());
       }
     },
     addItem(domainObject) {