use composables for conductor mode

src/plugins/timeConductor/ConductorComponent.vue

@@ -102,9 +102,20 @@ export default {
   inject: ['openmct', 'configuration'],
   setup() {
     const openmct = inject('openmct');
-    const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } =
+    const {
-      useTimeSystem(openmct);
+      observeTimeSystem,
-    const { observeTimeMode, timeMode, isFixedTimeMode, isRealTimeMode } = useTimeMode(openmct);
+      timeSystemFormatter,
+      timeSystemDurationFormatter,
+      isTimeSystemUTCBased
+    } = useTimeSystem(openmct);
+    const {
+      observeTimeMode,
+      timeMode,
+      isFixedTimeMode,
+      isRealTimeMode,
+      getAllModeMetadata,
+      getModeMetadata
+    } = useTimeMode(openmct);
     const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
     const { observeClockOffsets, offsets } = useClockOffsets(openmct);
 
@@ -117,9 +128,12 @@ export default {
 
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
     provide('timeMode', timeMode);
     provide('isFixedTimeMode', isFixedTimeMode);
     provide('isRealTimeMode', isRealTimeMode);
+    provide('getAllModeMetadata', getAllModeMetadata);
+    provide('getModeMetadata', getModeMetadata);
     provide('bounds', bounds);
     provide('isTick', isTick);
     provide('offsets', offsets);

src/plugins/timeConductor/ConductorMode.vue

@@ -23,8 +23,8 @@
   <div v-if="readOnly === false" ref="modeButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-button--menu js-mode-button"
+        class="c-button--menu js-mode-button c-icon-button"
-        :class="[buttonCssClass, selectedMode.cssClass]"
+        :class="selectedMode.cssClass"
         aria-label="Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
       >
@@ -43,19 +43,18 @@
 </template>
 
 <script>
-import { FIXED_MODE_KEY } from '../../api/time/constants';
-import modeMixin from './mode-mixin.js';
-
 export default {
-  mixins: [modeMixin],
+  inject: [
-  inject: ['openmct', 'configuration', 'bounds', 'offsets', 'isFixedTimeMode'],
+    'openmct',
+    'configuration',
+    'bounds',
+    'offsets',
+    'timeMode',
+    'isFixedTimeMode',
+    'getAllModeMetadata',
+    'getModeMetadata'
+  ],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -63,24 +62,20 @@ export default {
       }
     }
   },
-  emits: ['mode-updated'],
   data() {
-    const mode = this.openmct.time.getMode();
-
     return {
-      selectedMode: this.getModeMetadata(mode),
+      selectedMode: this.getModeMetadata(this.timeMode)
-      modes: []
     };
   },
   watch: {
-    mode: {
+    timeMode: {
-      handler(mode) {
+      handler() {
-        this.setMode(mode, this.getBoundsForMode(mode));
+        this.setView();
       }
     }
   },
   mounted() {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -95,15 +90,8 @@ export default {
 
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
+    setView() {
-      this.selectedMode = this.getModeMetadata(mode);
+      this.selectedMode = this.getModeMetadata(this.timeMode);
-    },
-    setMode(mode) {
-      this.openmct.time.setMode(mode);
-      this.setViewFromMode(mode);
-    },
-    getBoundsForMode(mode) {
-      return mode === FIXED_MODE_KEY ? this.bounds : this.offsets;
     }
   }
 };

src/plugins/timeConductor/useTimeMode.js

@@ -55,6 +55,35 @@ export function useTimeMode(openmct, options) {
     stopObservingTimeMode = () => openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
   }
 
+  function getAllModeMetadata() {
+    return [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(getModeMetadata);
+  }
+
+  function getModeMetadata(key) {
+    const fixedModeMetadata = {
+      key: FIXED_MODE_KEY,
+      name: 'Fixed Timespan',
+      description: 'Query and explore data that falls between two fixed datetimes.',
+      cssClass: 'icon-tabular',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    const realTimeModeMetadata = {
+      key: REALTIME_MODE_KEY,
+      name: 'Real-Time',
+      description:
+        'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
+      cssClass: 'icon-clock',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    return key === FIXED_MODE_KEY ? fixedModeMetadata : realTimeModeMetadata;
+  }
+
+  function setTimeMode(_timeMode) {
+    openmct.time.setMode(_timeMode);
+  }
+
   function updateTimeMode(_timeMode) {
     timeMode.value = _timeMode;
   }
@@ -62,6 +91,8 @@ export function useTimeMode(openmct, options) {
   return {
     observeTimeMode,
     timeMode,
+    getAllModeMetadata,
+    getModeMetadata,
     isFixedTimeMode,
     isRealTimeMode
   };