Remove ticker and rely solely on the clock ticks to update the timelist durations (#6495)

* Remove ticker for timelist and rename a function for readability

* Use formatting for remote clock if available.

* throttle updates to the timestamp and listing activities

---------

Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/plugins/remoteClock/RemoteClock.js

@@ -46,6 +46,7 @@ export default class RemoteClock extends DefaultClock {
 
         this.timeTelemetryObject = undefined;
         this.parseTime = undefined;
+        this.formatTime = undefined;
         this.metadata = undefined;
 
         this.lastTick = 0;
@@ -137,6 +138,10 @@ export default class RemoteClock extends DefaultClock {
         this.parseTime = (datum) => {
             return timeFormatter.parse(datum);
         };
+
+        this.formatTime = (datum) => {
+            return timeFormatter.format(datum);
+        };
     }
 
     /**

src/plugins/timelist/Timelist.vue

@@ -38,9 +38,8 @@
 import {getValidatedData} from "../plan/util";
 import ListView from '../../ui/components/List/ListView.vue';
 import {getPreciseDuration} from "../../utils/duration";
-import ticker from 'utils/clock/Ticker';
 import {SORT_ORDER_OPTIONS} from "./constants";
-
+import _ from 'lodash';
 import moment from "moment";
 import { v4 as uuid } from 'uuid';
 
@@ -53,16 +52,26 @@ const headerItems = [
         isSortable: true,
         property: 'start',
         name: 'Start Time',
-        format: function (value, object) {
-            return `${moment(value).format(TIME_FORMAT)}Z`;
+        format: function (value, object, key, openmct) {
+            const clock = openmct.time.clock();
+            if (clock && clock.formatTime) {
+                return clock.formatTime(value);
+            } else {
+                return `${moment(value).format(TIME_FORMAT)}Z`;
+            }
         }
     }, {
         defaultDirection: true,
         isSortable: true,
         property: 'end',
         name: 'End Time',
-        format: function (value, object) {
-            return `${moment(value).format(TIME_FORMAT)}Z`;
+        format: function (value, object, key, openmct) {
+            const clock = openmct.time.clock();
+            if (clock && clock.formatTime) {
+                return clock.formatTime(value);
+            } else {
+                return `${moment(value).format(TIME_FORMAT)}Z`;
+            }
         }
     }, {
         defaultDirection: false,
@@ -119,7 +128,8 @@ export default {
         this.unlistenConfig = this.openmct.objects.observe(this.domainObject, 'configuration', this.setViewFromConfig);
         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.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
         this.openmct.time.on('bounds', this.updateTimestamp);
         this.openmct.editor.on('isEditing', this.setEditState);
 
@@ -144,10 +154,6 @@ export default {
             this.unlistenConfig();
         }
 
-        if (this.unlistenTicker) {
-            this.unlistenTicker();
-        }
-
         if (this.removeStatusListener) {
             this.removeStatusListener();
         }
@@ -192,8 +198,8 @@ export default {
             }
         },
         updateTimestamp(_bounds, isTick) {
-            if (isTick === true) {
-                this.timestamp = this.openmct.time.clock().currentValue();
+            if (isTick === true && this.openmct.time.clock() !== undefined) {
+                this.updateTimeStampAndListActivities(this.openmct.time.clock().currentValue());
             }
         },
         setViewFromClock(newClock) {
@@ -202,12 +208,11 @@ export default {
             if (isFixedTime) {
                 this.hideAll = false;
                 this.showAll = true;
-                // clear invokes listActivities
-                this.clearPreviousActivities(this.openmct.time.bounds()?.start);
+                this.updateTimeStampAndListActivities(this.openmct.time.bounds()?.start);
             } else {
                 this.setSort();
                 this.setViewBounds();
-                this.listActivities();
+                this.updateTimeStampAndListActivities(this.openmct.time.clock().currentValue());
             }
         },
         addItem(domainObject) {
@@ -346,12 +351,8 @@ export default {
             // sort by start time
             this.planActivities = activities.sort(this.sortByStartTime);
         },
-        clearPreviousActivities(time) {
-            if (time instanceof Date) {
-                this.timestamp = time.getTime();
-            } else {
-                this.timestamp = time;
-            }
+        updateTimeStampAndListActivities(time) {
+            this.timestamp = time;
 
             this.listActivities();
         },

src/ui/components/List/ListItem.vue

@@ -37,7 +37,7 @@ export default {
                 // eslint-disable-next-line you-dont-need-lodash-underscore/get
                 let value = _.get(this.item, property.key);
                 if (property.format) {
-                    value = property.format(value, this.item, property.key);
+                    value = property.format(value, this.item, property.key, this.openmct);
                 }
 
                 values.push({