Lad table vue (#2231)

* working telemetry subs

* Styling for LAD table

- Fixed markup;
- Corrected icon, added description;
- Expand c-table styles slightly, moved some definitions into
c-telemetry-table;

* add LADTableSummary

* change function names

* make reviewer requested changes

* add lad table headers in sets

* make column widths fixed

* handle composition remove in sets and tables

* finish updateTimeSystem

* add correct support for limits

* LAD Table and Table Set styling

- Removed fixed table layout;
- Col widths set to 33% for now;
- New c-lad-table class and styling;
- New __group-header class added;
- All themes updated with __group-header style colors;

* make reviewer requested changes

* use lodash findIndex

src/plugins/LADTable/components/LADRow.vue

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+    <tr>
+        <td>{{name}}</td>
+        <td>{{timestamp}}</td>
+        <td :class="valueClass">
+            {{value}}
+        </td>
+    </tr>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+export default {
+    inject: ['openmct'],
+    props: ['domainObject'],
+    data() {
+        return {
+            name: this.domainObject.name,
+            timestamp: '---',
+            value: '---',
+            valueClass: ''
+        }
+    },
+    methods: {
+        updateValues(datum) {
+            this.timestamp = this.formats[this.timestampKey].format(datum);
+            this.value = this.formats[this.valueKey].format(datum);
+
+            var limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
+
+            if (limit) {
+                this.valueClass = limit.cssClass;
+            } else {
+                this.valueClass = '';
+            }
+        },
+        updateName(name){
+            this.name = name;
+        },
+        updateTimeSystem(timeSystem) {
+            this.value = '---';
+            this.timestamp = '---';
+            this.valueClass = '';
+            this.timestampKey = timeSystem.key;
+
+            this.openmct
+                .telemetry
+                .request(this.domainObject, {strategy: 'latest'})
+                .then((array) => this.updateValues(array[array.length - 1]));
+
+        }
+    },
+    mounted() {
+        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+        this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+
+        this.limitEvaluator = openmct
+            .telemetry
+            .limitEvaluator(this.domainObject);
+
+        this.stopWatchingMutation = openmct
+            .objects
+            .observe(
+                this.domainObject,
+                '*',
+                this.updateName
+            );
+
+        this.openmct.time.on('timeSystem', this.updateTimeSystem);
+
+        this.timestampKey = this.openmct.time.timeSystem().key;
+
+        this.valueMetadata = this
+            .metadata
+            .valuesForHints(['range'])[0];
+
+        this.valueKey = this.valueMetadata.key
+
+        this.unsubscribe = this.openmct
+            .telemetry
+            .subscribe(this.domainObject, this.updateValues);
+
+        this.openmct
+            .telemetry
+            .request(this.domainObject, {strategy: 'latest'})
+            .then((array) => this.updateValues(array[array.length - 1]));
+    },
+    destroyed() {
+        this.stopWatchingMutation();
+        this.unsubscribe();
+        this.openmct.off('timeSystem', this.updateTimeSystem);
+    }
+}
+</script>
+