Merge branch 'master' into mct5773

merging master

src/plugins/timeConductor/ConductorMode.vue

@@ -37,31 +37,28 @@
 
 <script>
 import toggleMixin from '../../ui/mixins/toggle-mixin';
+import modeMixin from './mode-mixin';
+
+const TEST_IDS = true;
 
 export default {
-    mixins: [toggleMixin],
+    mixins: [toggleMixin, modeMixin],
     inject: ['openmct', 'configuration'],
     data: function () {
-        let activeClock = this.openmct.time.clock();
-        if (activeClock !== undefined) {
-            //Create copy of active clock so the time API does not get reactified.
-            activeClock = Object.create(activeClock);
-        }
+        let activeClock = this.getActiveClock();
 
         return {
-            selectedMode: this.getModeOptionForClock(activeClock),
+            selectedMode: this.getModeMetadata(activeClock, TEST_IDS),
             selectedTimeSystem: JSON.parse(JSON.stringify(this.openmct.time.timeSystem())),
             modes: [],
+            clocks: [],
             hoveredMode: {}
         };
     },
     mounted: function () {
-        this.loadClocksFromConfiguration();
+        this.loadModesAndClocks(this.configuration.menuOptions);
 
-        this.openmct.time.on('clock', this.setViewFromClock);
-    },
-    destroyed: function () {
-        this.openmct.time.off('clock', this.setViewFromClock);
+        this.followTimeConductor();
     },
     methods: {
         showModesMenu() {
@@ -76,64 +73,19 @@ export default {
 
             this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
         },
+        showClocksMenu() {
+            const elementBoundingClientRect = this.$refs.clockButton.getBoundingClientRect();
+            const x = elementBoundingClientRect.x;
+            const y = elementBoundingClientRect.y;
 
-        loadClocksFromConfiguration() {
-            let clocks = this.configuration.menuOptions
-                .map(menuOption => menuOption.clock)
-                .filter(isDefinedAndUnique)
-                .map(this.getClock);
+            const menuOptions = {
+                menuClass: 'c-conductor__clock-menu',
+                placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+            };
 
-            /*
-             * Populate the modes menu with metadata from the available clocks
-             * "Fixed Mode" is always first, and has no defined clock
-             */
-            this.modes = [undefined]
-                .concat(clocks)
-                .map(this.getModeOptionForClock);
-
-            function isDefinedAndUnique(key, index, array) {
-                return key !== undefined && array.indexOf(key) === index;
-            }
+            this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
         },
-
-        getModeOptionForClock(clock) {
-            if (clock === undefined) {
-                const key = 'fixed';
-
-                return {
-                    key,
-                    name: 'Fixed Timespan',
-                    description: 'Query and explore data that falls between two fixed datetimes.',
-                    cssClass: 'icon-tabular',
-                    testId: 'conductor-modeOption-fixed',
-                    onItemClicked: () => this.setOption(key)
-                };
-            } else {
-                const key = clock.key;
-
-                return {
-                    key,
-                    name: clock.name,
-                    description: "Monitor streaming data in real-time. The Time "
-                    + "Conductor and displays will automatically advance themselves based on this clock. " + clock.description,
-                    cssClass: clock.cssClass || 'icon-clock',
-                    testId: 'conductor-modeOption-realtime',
-                    onItemClicked: () => this.setOption(key)
-                };
-            }
-        },
-
-        getClock(key) {
-            return this.openmct.time.getAllClocks().filter(function (clock) {
-                return clock.key === key;
-            })[0];
-        },
-
-        setOption(clockKey) {
-            if (clockKey === 'fixed') {
-                clockKey = undefined;
-            }
-
+        setClock(clockKey) {
             let configuration = this.getMatchingConfig({
                 clock: clockKey,
                 timeSystem: this.openmct.time.timeSystem().key
@@ -147,14 +99,14 @@ export default {
                 this.openmct.time.timeSystem(configuration.timeSystem, configuration.bounds);
             }
 
-            if (clockKey === undefined) {
+            const offsets = this.openmct.time.clockOffsets() || configuration.clockOffsets;
+            this.openmct.time.clock(clockKey, offsets);
+        },
+        setMode(modeKey) {
+            if (!modeKey || modeKey === 'fixed') {
                 this.openmct.time.stopClock();
-            } else {
-                const offsets = this.openmct.time.clockOffsets() || configuration.clockOffsets;
-                this.openmct.time.clock(clockKey, offsets);
             }
         },
-
         getMatchingConfig(options) {
             const matchers = {
                 clock(config) {
@@ -173,9 +125,8 @@ export default {
 
             return this.configuration.menuOptions.filter(configMatches)[0];
         },
-
         setViewFromClock(clock) {
-            this.selectedMode = this.getModeOptionForClock(clock);
+            this.selectedMode = this.getModeMetadata(clock, TEST_IDS);
         }
     }
 };

src/plugins/timeConductor/independent/Mode.vue

@@ -39,9 +39,10 @@
 
 <script>
 import toggleMixin from '../../../ui/mixins/toggle-mixin';
+import modeMixin from '../mode-mixin';
 
 export default {
-    mixins: [toggleMixin],
+    mixins: [toggleMixin, modeMixin],
     inject: ['openmct'],
     props: {
         mode: {
@@ -58,22 +59,17 @@ export default {
         }
     },
     data: function () {
-        let clock;
-        if (this.mode && this.mode.key === 'fixed') {
-            clock = undefined;
-        } else {
-        //We want the clock from the global time context here
-            clock = this.openmct.time.clock();
-        }
-
-        if (clock !== undefined) {
-        //Create copy of active clock so the time API does not get reactified.
-            clock = Object.create(clock);
+        const clock = this.getActiveClock();
+        let mode = 'fixed';
+        if (this.mode?.key !== 'fixed') {
+            mode = 'real-time';
         }
 
         return {
-            selectedMode: this.getModeOptionForClock(clock),
-            modes: []
+            selectedMode: this.getModeMetadata(mode),
+            selectedClock: clock ? this.getClockMetadata(clock) : undefined,
+            modes: [],
+            clocks: []
         };
     },
     watch: {
@@ -98,16 +94,7 @@ export default {
 
         this.followTimeConductor();
     },
-    destroyed: function () {
-        this.stopFollowTimeConductor();
-    },
     methods: {
-        followTimeConductor() {
-            this.openmct.time.on('clock', this.setViewFromClock);
-        },
-        stopFollowTimeConductor() {
-            this.openmct.time.off('clock', this.setViewFromClock);
-        },
         showModesMenu() {
             const elementBoundingClientRect = this.$refs.modeMenuButton.getBoundingClientRect();
             const x = elementBoundingClientRect.x;
@@ -119,13 +106,23 @@ export default {
             };
             this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
         },
+        showClocksMenu() {
+            const elementBoundingClientRect = this.$refs.modeMenuButton.getBoundingClientRect();
+            const x = elementBoundingClientRect.x;
+            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
+            const menuOptions = {
+                menuClass: 'c-conductor__clock-menu',
+                placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
+            };
+            this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
+        },
         getMenuOptions() {
-            let clocks = [{
+            let menuOptions = [{
                 name: 'Fixed Timespan',
                 timeSystem: 'utc'
             }];
-            let currentGlobalClock = this.openmct.time.clock();
+            let currentGlobalClock = this.getActiveClock();
             if (currentGlobalClock !== undefined) {
             //Create copy of active clock so the time API does not get reactified.
                 currentGlobalClock = Object.assign({}, {
@@ -134,90 +131,37 @@ export default {
                     timeSystem: this.openmct.time.timeSystem().key
                 });
 
-                clocks.push(currentGlobalClock);
+                menuOptions.push(currentGlobalClock);
             }
 
-            return clocks;
+            return menuOptions;
         },
-        loadClocks() {
-            let clocks = this.getMenuOptions()
-                .map(menuOption => menuOption.clock)
-                .filter(isDefinedAndUnique)
-                .map(this.getClock);
-
-            /*
-         * Populate the modes menu with metadata from the available clocks
-         * "Fixed Mode" is always first, and has no defined clock
-         */
-            this.modes = [undefined]
-                .concat(clocks)
-                .map(this.getModeOptionForClock);
-
-            function isDefinedAndUnique(key, index, array) {
-                return key !== undefined && array.indexOf(key) === index;
-            }
-        },
-
-        getModeOptionForClock(clock) {
-            if (clock === undefined) {
-                const key = 'fixed';
-
-                return {
-                    key,
-                    name: 'Fixed Timespan',
-                    description: 'Query and explore data that falls between two fixed datetimes.',
-                    cssClass: 'icon-tabular',
-                    onItemClicked: () => this.setOption(key)
-                };
-            } else {
-                const key = clock.key;
-
-                return {
-                    key,
-                    name: clock.name,
-                    description: "Monitor streaming data in real-time. The Time "
-              + "Conductor and displays will automatically advance themselves based on this clock. " + clock.description,
-                    cssClass: clock.cssClass || 'icon-clock',
-                    onItemClicked: () => this.setOption(key)
-                };
-            }
-        },
-
-        getClock(key) {
-            return this.openmct.time.getAllClocks().filter(function (clock) {
-                return clock.key === key;
-            })[0];
-        },
-
-        setOption(clockKey) {
-            let key = clockKey;
-            if (clockKey === 'fixed') {
-                key = undefined;
-            }
+        setMode(modeKey) {
+            let key = modeKey;
 
             const matchingOptions = this.getMenuOptions().filter(option => option.clock === key);
             const clock = matchingOptions.length && matchingOptions[0].clock ? Object.assign({}, matchingOptions[0], { key: matchingOptions[0].clock }) : undefined;
-            this.selectedMode = this.getModeOptionForClock(clock);
+            this.selectedMode = this.getModeMetadata(clock);
 
             if (this.mode) {
-                this.$emit('modeChanged', { key: clockKey });
+                this.$emit('modeChanged', { key: modeKey });
             }
         },
-
         setViewFromClock(clock) {
-            this.loadClocks();
+            const menuOptions = this.getMenuOptions();
+            this.loadModesAndClocks(menuOptions);
             //retain the mode chosen by the user
             if (this.mode) {
                 let found = this.modes.find(mode => mode.key === this.selectedMode.key);
 
                 if (!found) {
                     found = this.modes.find(mode => mode.key === clock && clock.key);
-                    this.setOption(found ? this.getModeOptionForClock(clock).key : this.getModeOptionForClock().key);
+                    this.setMode(found ? this.getModeMetadata(clock).key : this.getModeMetadata().key);
                 } else if (this.mode.key !== this.selectedMode.key) {
-                    this.setOption(this.selectedMode.key);
+                    this.setMode(this.selectedMode.key);
                 }
             } else {
-                this.setOption(this.getModeOptionForClock(clock).key);
+                this.setMode(this.getModeMetadata(clock).key);
             }
         }
     }

src/plugins/timeConductor/mode-mixin.js

@@ -0,0 +1,93 @@
+export default {
+    destroyed: function () {
+        this.stopFollowTimeConductor();
+    },
+    methods: {
+        followTimeConductor() {
+            this.openmct.time.on('clock', this.setViewFromClock);
+        },
+        stopFollowTimeConductor() {
+            this.openmct.time.off('clock', this.setViewFromClock);
+        },
+        loadModesAndClocks(menuOptions) {
+            const clocks = menuOptions
+                .map(menuOption => menuOption.clock)
+                .filter(isDefinedAndUnique)
+                .map(this.getClock);
+
+            /*
+            * Populate the modes menu with metadata from the available clocks
+            * "Fixed Mode" is always first, and has no defined clock
+            */
+            this.modes = ['fixed', 'real-time'].map(this.getModeMetadata);
+            this.clocks = clocks.map(this.getClockMetadata);
+
+            function isDefinedAndUnique(key, index, array) {
+                return key !== undefined && array.indexOf(key) === index;
+            }
+        },
+        getActiveClock() {
+            let activeClock = this.openmct.time.clock();
+            if (activeClock !== undefined) {
+                //Create copy of active clock so the time API does not get reactified.
+                activeClock = Object.create(activeClock);
+            }
+
+            return activeClock;
+        },
+        getClock(key) {
+            return this.openmct.time.getAllClocks().filter(function (clock) {
+                return clock.key === key;
+            })[0];
+        },
+        getModeMetadata(mode, testIds = false) {
+            let modeOptions;
+
+            if (mode === undefined) {
+                const key = 'fixed';
+
+                modeOptions = {
+                    key,
+                    name: 'Fixed Timespan',
+                    description: 'Query and explore data that falls between two fixed datetimes.',
+                    cssClass: 'icon-tabular',
+                    onItemClicked: () => this.setMode(key)
+                };
+
+                if (testIds) {
+                    modeOptions.testId = 'conductor-modeOption-fixed';
+                }
+            } else {
+                const key = 'real-time';
+
+                modeOptions = {
+                    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: () => this.setMode(key)
+                };
+
+                if (testIds) {
+                    modeOptions.testId = 'conductor-modeOption-realtime';
+                }
+            }
+
+            return modeOptions;
+        },
+        getClockMetadata(clock) {
+            const key = clock.key;
+            const clockOptions = {
+                key,
+                name: clock.name,
+                description: "Monitor streaming data in real-time. The Time "
+                + "Conductor and displays will automatically advance themselves based on this clock. " + clock.description,
+                cssClass: clock.cssClass || 'icon-clock',
+                onItemClicked: () => this.setClock(key)
+            };
+
+            // console.log(clockOptions)
+            return clockOptions;
+        }
+    }
+};