Three Dot Menu Prototype (#3325)

* Three dot menu implementation

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>

src/plugins/displayLayout/components/SubobjectView.vue

@@ -142,14 +142,18 @@ export default {
             this.domainObject = domainObject;
             this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
             this.$nextTick(() => {
-                let childContext = this.$refs.objectFrame.getSelectionContext();
-                childContext.item = domainObject;
-                childContext.layoutItem = this.item;
-                childContext.index = this.index;
-                this.context = childContext;
-                this.removeSelectable = this.openmct.selection.selectable(
-                    this.$el, this.context, this.immediatelySelect || this.initSelect);
-                delete this.immediatelySelect;
+                let reference = this.$refs.objectFrame;
+
+                if (reference) {
+                    let childContext = this.$refs.objectFrame.getSelectionContext();
+                    childContext.item = domainObject;
+                    childContext.layoutItem = this.item;
+                    childContext.index = this.index;
+                    this.context = childContext;
+                    this.removeSelectable = this.openmct.selection.selectable(
+                        this.$el, this.context, this.immediatelySelect || this.initSelect);
+                    delete this.immediatelySelect;
+                }
             });
         }
     }

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,18 +30,15 @@
 >
     <div
         v-if="domainObject"
-        class="u-style-receiver c-telemetry-view"
-        :class="{
-            styleClass,
-            'is-missing': domainObject.status === 'missing'
-        }"
+        class="c-telemetry-view"
+        :class="[statusClass]"
         :style="styleObject"
         :data-font-size="item.fontSize"
         :data-font="item.font"
         @contextmenu.prevent="showContextMenu"
     >
-        <div class="is-missing__indicator"
-             title="This item is missing"
+        <div class="is-status__indicator"
+             :title="`This item is ${status}`"
         ></div>
         <div
             v-if="showLabel"
@@ -76,10 +73,11 @@
 import LayoutFrame from './LayoutFrame.vue';
 import printj from 'printj';
 import conditionalStylesMixin from "../mixins/objectStyles-mixin";
+import { getDefaultNotebook } from '@/plugins/notebook/utils/notebook-storage.js';
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
 const DEFAULT_POSITION = [1, 1];
-const CONTEXT_MENU_ACTIONS = ['viewHistoricalData'];
+const CONTEXT_MENU_ACTIONS = ['copyToClipboard', 'copyToNotebook', 'viewHistoricalData'];
 
 export default {
     makeDefinition(openmct, gridSize, domainObject, position) {
@@ -129,13 +127,18 @@ export default {
     },
     data() {
         return {
+            currentObjectPath: undefined,
             datum: undefined,
-            formats: undefined,
             domainObject: undefined,
-            currentObjectPath: undefined
+            formats: undefined,
+            viewKey: `alphanumeric-format-${Math.random()}`,
+            status: ''
         };
     },
     computed: {
+        statusClass() {
+            return (this.status) ? `is-status--${this.status}` : '';
+        },
         showLabel() {
             let displayMode = this.item.displayMode;
 
@@ -213,9 +216,13 @@ export default {
         this.openmct.objects.get(this.item.identifier)
             .then(this.setObject);
         this.openmct.time.on("bounds", this.refreshData);
+
+        this.status = this.openmct.status.get(this.item.identifier);
+        this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
     },
     destroyed() {
         this.removeSubscription();
+        this.removeStatusListener();
 
         if (this.removeSelectable) {
             this.removeSelectable();
@@ -224,6 +231,12 @@ export default {
         this.openmct.time.off("bounds", this.refreshData);
     },
     methods: {
+        formattedValueForCopy() {
+            const timeFormatterKey = this.openmct.time.timeSystem().key;
+            const timeFormatter = this.formats[timeFormatterKey];
+
+            return `At ${timeFormatter.format(this.datum)} ${this.domainObject.name} had a value of ${this.telemetryValue} ${this.unit}`;
+        },
         requestHistoricalData() {
             let bounds = this.openmct.time.bounds();
             let options = {
@@ -261,6 +274,16 @@ export default {
                 this.requestHistoricalData(this.domainObject);
             }
         },
+        getView() {
+            return {
+                getViewContext: () => {
+                    return {
+                        viewHistoricalData: true,
+                        formattedValueForCopy: this.formattedValueForCopy
+                    };
+                }
+            };
+        },
         setObject(domainObject) {
             this.domainObject = domainObject;
             this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
@@ -288,8 +311,33 @@ export default {
         updateTelemetryFormat(format) {
             this.$emit('formatChanged', this.item, format);
         },
-        showContextMenu(event) {
-            this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+        async getContextMenuActions() {
+            const defaultNotebook = getDefaultNotebook();
+            const domainObject = defaultNotebook && await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier);
+            const actionCollection = this.openmct.actions.get(this.currentObjectPath, this.getView());
+            const actionsObject = actionCollection.getActionsObject();
+
+            let copyToNotebookAction = actionsObject.copyToNotebook;
+
+            if (defaultNotebook) {
+                const defaultPath = domainObject && `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
+                copyToNotebookAction.name = `Copy to Notebook ${defaultPath}`;
+            } else {
+                actionsObject.copyToNotebook = undefined;
+                delete actionsObject.copyToNotebook;
+            }
+
+            return CONTEXT_MENU_ACTIONS.map(actionKey => {
+                return actionsObject[actionKey];
+            }).filter(action => action !== undefined);
+        },
+        async showContextMenu(event) {
+            const contextMenuActions = await this.getContextMenuActions();
+
+            this.openmct.menus.showMenu(event.x, event.y, contextMenuActions);
+        },
+        setStatus(status) {
+            this.status = status;
         }
     }
 };

src/plugins/displayLayout/components/telemetry-view.scss

@@ -7,7 +7,6 @@
         flex: 1 1 auto;
         display: flex;
         flex-direction: row;
-       // justify-content: center;
         align-items: center;
         overflow: hidden;
         padding: $interiorMargin;
@@ -27,14 +26,13 @@
         border: 1px solid transparent;
     }
 
-    @include isMissing($absPos: true);
-
-    .is-missing__indicator {
+    .is-status__indicator {
+        position: absolute;
         top: 0;
         left: 0;
     }
 
-    &.is-missing {
+    &[class*='is-status'] {
         border: $borderMissing;
     }
 }