Timelist views support fixed time - 5629 (#5726)v2.1.0release/2.1.0

* Initialize full view for fixed time

* Clean up

* Add back in ticker after merge

* Check for undefined clock instead of timestamp

* Cleanup

* Initialize full view for fixed time

* Clean up

* Add back in ticker after merge

* Check for undefined clock instead of timestamp

* Cleanup

* Update timestamp method and remove from beforeDestroy

* Shorten ternary to optional chaining

* Cleanup unused var

* Moved duplicated logic to method

* Reorder methods

* Update Timelist.vue

Set timestamp to clock start when in fixed time

* Added blank line

* Lint fix

* Update pluginSpec.js

* Invoke currentValue method properly

2 files changed, 31 insertions, 3 deletions

diff --git a/src/plugins/timelist/Timelist.vue b/src/plugins/timelist/Timelist.vue
index 0e6559941..fdbf96e7a 100644
--- a/src/plugins/timelist/Timelist.vue
+++ b/src/plugins/timelist/Timelist.vue
@@ -110,7 +110,9 @@ export default {
     },
     mounted() {
         this.isEditing = this.openmct.editor.isEditing();
-        this.timestamp = Date.now();
+        this.timestamp = this.openmct.time.clock()?.currentValue() || this.openmct.time.bounds()?.start;
+        this.openmct.time.on('clock', this.setViewFromClock);
+
         this.getPlanDataAndSetConfig(this.domainObject);
 
         this.unlisten = this.openmct.objects.observe(this.domainObject, 'selectFile', this.planFileUpdated);
@@ -118,6 +120,7 @@ export default {
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
         this.status = this.openmct.status.get(this.domainObject.identifier);
         this.unlistenTicker = ticker.listen(this.clearPreviousActivities);
+        this.openmct.time.on('bounds', this.updateTimestamp);
         this.openmct.editor.on('isEditing', this.setEditState);
 
         this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
@@ -128,6 +131,9 @@ export default {
             this.composition.on('remove', this.removeItem);
             this.composition.load();
         }
+
+        this.setViewFromClock(this.openmct.time.clock());
+
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -147,6 +153,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.$el.parentElement.removeEventListener('scroll', this.deferAutoScroll, true);
         if (this.clearAutoScrollDisabledTimer) {
@@ -176,12 +184,32 @@ export default {
                 this.showAll = true;
                 this.listActivities();
             } else {
+
                 this.filterValue = configuration.filter;
                 this.setSort();
                 this.setViewBounds();
                 this.listActivities();
             }
         },
+        updateTimestamp(_bounds, isTick) {
+            if (isTick === true) {
+                this.timestamp = this.openmct.time.clock().currentValue();
+            }
+        },
+        setViewFromClock(newClock) {
+            this.filterValue = this.domainObject.configuration.filter;
+            const isFixedTime = newClock === undefined;
+            if (isFixedTime) {
+                this.hideAll = false;
+                this.showAll = true;
+                // clear invokes listActivities
+                this.clearPreviousActivities(this.openmct.time.bounds()?.start);
+            } else {
+                this.setSort();
+                this.setViewBounds();
+                this.listActivities();
+            }
+        },
         addItem(domainObject) {
             this.planObjects = [domainObject];
             this.resetPlanData();
@@ -400,7 +428,7 @@ export default {
 
             this.firstCurrentActivityIndex = -1;
             this.currentActivitiesCount = 0;
-            this.$el.parentElement.scrollTo({top: 0});
+            this.$el.parentElement?.scrollTo({top: 0});
             this.autoScrolled = false;
         },
         setScrollTop() {
diff --git a/src/plugins/timelist/pluginSpec.js b/src/plugins/timelist/pluginSpec.js
index a7bc9e2e3..1a19b69ee 100644
--- a/src/plugins/timelist/pluginSpec.js
+++ b/src/plugins/timelist/pluginSpec.js
@@ -376,7 +376,7 @@ describe('the plugin', function () {
 
             return Vue.nextTick(() => {
                 const items = element.querySelectorAll(LIST_ITEM_CLASS);
-                expect(items.length).toEqual(1);
+                expect(items.length).toEqual(2);
             });
         });
     });