[Telemetry Tables][Plots] Display units where applicable (#3198)

* added unit columns in telemetry tables

* added unit column hiding in telemetry tables, added units to lad tables and sets

* added units to plots and plot legends

src/plugins/LADTable/components/LADRow.vue

@@ -32,6 +32,12 @@
         class="js-third-data"
         :class="valueClass"
     >{{ value }}</td>
+    <td
+        v-if="hasUnits"
+        class="js-units"
+    >
+        {{ unit }}
+    </td>
 </tr>
 </template>
 
@@ -48,6 +54,10 @@ export default {
         domainObject: {
             type: Object,
             required: true
+        },
+        hasUnits: {
+            type: Boolean,
+            requred: true
         }
     },
     data() {
@@ -59,7 +69,8 @@ export default {
             timestamp: undefined,
             value: '---',
             valueClass: '',
-            currentObjectPath
+            currentObjectPath,
+            unit: ''
         };
     },
     computed: {
@@ -101,6 +112,10 @@ export default {
             .subscribe(this.domainObject, this.updateValues);
 
         this.requestHistory();
+
+        if (this.hasUnits) {
+            this.setUnit();
+        }
     },
     destroyed() {
         this.stopWatchingMutation();
@@ -186,6 +201,9 @@ export default {
 
                 return false;
             }
+        },
+        setUnit() {
+            this.unit = this.valueMetadata.unit || '';
         }
     }
 };

src/plugins/LADTable/components/LADTable.vue

@@ -28,6 +28,7 @@
                 <th>Name</th>
                 <th>Timestamp</th>
                 <th>Value</th>
+                <th v-if="hasUnits">Unit</th>
             </tr>
         </thead>
         <tbody>
@@ -35,6 +36,7 @@
                 v-for="item in items"
                 :key="item.key"
                 :domain-object="item.domainObject"
+                :has-units="hasUnits"
             />
         </tbody>
     </table>
@@ -54,6 +56,18 @@ export default {
             items: []
         };
     },
+    computed: {
+        hasUnits() {
+            let itemsWithUnits = this.items.filter((item) => {
+                let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
+
+                return this.metadataHasUnits(metadata.valueMetadatas);
+
+            });
+
+            return itemsWithUnits.length !== 0;
+        }
+    },
     mounted() {
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addItem);
@@ -84,6 +98,11 @@ export default {
             reorderPlan.forEach((reorderEvent) => {
                 this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
             });
+        },
+        metadataHasUnits(valueMetadatas) {
+            let metadataWithUnits = valueMetadatas.filter(metadatum => metadatum.unit);
+
+            return metadataWithUnits.length > 0;
         }
     }
 };

src/plugins/LADTable/components/LadTableSet.vue

@@ -27,6 +27,7 @@
             <th>Name</th>
             <th>Timestamp</th>
             <th>Value</th>
+            <th v-if="hasUnits">Unit</th>
         </tr>
     </thead>
     <tbody>
@@ -45,6 +46,7 @@
                 v-for="secondary in secondaryTelemetryObjects[primary.key]"
                 :key="secondary.key"
                 :domain-object="secondary.domainObject"
+                :has-units="hasUnits"
             />
         </template>
     </tbody>
@@ -66,6 +68,23 @@ export default {
             compositions: []
         };
     },
+    computed: {
+        hasUnits() {
+            let ladTables = Object.values(this.secondaryTelemetryObjects);
+            for (let ladTable of ladTables) {
+                for (let telemetryObject of ladTable) {
+                    let metadata = this.openmct.telemetry.getMetadata(telemetryObject.domainObject);
+                    for (let metadatum of metadata.valueMetadatas) {
+                        if (metadatum.unit) {
+                            return true;
+                        }
+                    }
+                }
+            }
+
+            return false;
+        }
+    },
     mounted() {
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addPrimary);
@@ -109,9 +128,8 @@ export default {
             let index = this.primaryTelemetryObjects.findIndex(primary => this.openmct.objects.makeKeyString(identifier) === primary.key),
                 primary = this.primaryTelemetryObjects[index];
 
-            this.$set(this.secondaryTelemetryObjects, primary.key, undefined);
+            this.$delete(this.secondaryTelemetryObjects, primary.key);
             this.primaryTelemetryObjects.splice(index, 1);
-            primary = undefined;
         },
         reorderPrimary(reorderPlan) {
             let oldComposition = this.primaryTelemetryObjects.slice();