Test data for condition sets (#2807)

* Test Data
* Persist testData and apply it to the conditionSet
* Do not persist the applied flag, but persist test data
Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/plugins/condition/ConditionManager.js

@@ -37,11 +37,13 @@ export default class ConditionManager extends EventEmitter {
         this.compositionLoad = this.composition.load();
         this.subscriptions = {};
         this.telemetryObjects = {};
+        this.testData = {conditionTestData: [], applied: false};
         this.initialize();
 
         this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDomainObject) => {
             this.conditionSetDomainObject = newDomainObject;
         });
+
     }
 
     subscribeToTelemetry(endpoint) {
@@ -265,14 +267,31 @@ export default class ConditionManager extends EventEmitter {
         this.emit(`broadcastTelemetry`, Object.assign({}, this.createNormalizedDatum(datum, id), {id: id}));
     }
 
+    getTestData(metadatum) {
+        let data = undefined;
+        if (this.testData.applied) {
+            const found = this.testData.conditionTestInputs.find((testInput) => (testInput.metadata === metadatum.source));
+            if (found) {
+                data = found.value;
+            }
+        }
+        return data;
+    }
+
     createNormalizedDatum(telemetryDatum, id) {
         return Object.values(this.telemetryObjects[id].telemetryMetaData).reduce((normalizedDatum, metadatum) => {
+            const testValue = this.getTestData(metadatum);
             const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
-            normalizedDatum[metadatum.key] = formatter.parse(telemetryDatum[metadatum.source]);
+            normalizedDatum[metadatum.key] = testValue !== undefined ?  formatter.parse(testValue) : formatter.parse(telemetryDatum[metadatum.source]);
             return normalizedDatum;
         }, {});
     }
 
+    updateTestData(testData) {
+        this.testData = testData;
+        this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionTestData', this.testData.conditionTestInputs);
+    }
+
     persistConditions() {
         this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionCollection', this.conditionSetDomainObject.configuration.conditionCollection);
     }

src/plugins/condition/components/ConditionCollection.vue

@@ -90,7 +90,17 @@ export default {
         Condition
     },
     props: {
-        isEditing: Boolean
+        isEditing: Boolean,
+        testData: {
+            type: Object,
+            required: true,
+            default: () => {
+                return {
+                    applied: false,
+                    conditionTestInputs: []
+                }
+            }
+        }
     },
     data() {
         return {
@@ -103,6 +113,14 @@ export default {
             isDragging: false
         };
     },
+    watch: {
+        testData: {
+            handler() {
+                this.updateTestData();
+            },
+            deep: true
+        }
+    },
     destroyed() {
         this.composition.off('add', this.addTelemetryObject);
         this.composition.off('remove', this.removeTelemetryObject);
@@ -181,6 +199,7 @@ export default {
         },
         addTelemetryObject(domainObject) {
             this.telemetryObjs.push(domainObject);
+            this.$emit('telemetryUpdated', this.telemetryObjs);
         },
         removeTelemetryObject(identifier) {
             let index = _.findIndex(this.telemetryObjs, (obj) => {
@@ -206,6 +225,9 @@ export default {
         },
         cloneCondition(data) {
             this.conditionManager.cloneCondition(data.condition, data.index);
+        },
+        updateTestData() {
+            this.conditionManager.updateTestData(this.testData);
         }
     }
 }

src/plugins/condition/components/ConditionSet.vue

@@ -33,10 +33,16 @@
             <template v-else>No output selected</template>
         </div>
     </section>
-    <TestData :is-editing="isEditing" />
+    <TestData :is-editing="isEditing"
+              :test-data="testData"
+              :telemetry="telemetryObjs"
+              @updateTestData="updateTestData"
+    />
     <ConditionCollection
         :is-editing="isEditing"
+        :test-data="testData"
         @conditionSetResultUpdated="updateCurrentOutput"
+        @telemetryUpdated="updateTelemetry"
     />
 </div>
 </template>
@@ -56,15 +62,27 @@ export default {
     },
     data() {
         return {
-            currentConditionOutput: ''
+            currentConditionOutput: '',
+            telemetryObjs: [],
+            testData: {}
         }
     },
     mounted() {
         this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.testData = {
+            applied: false,
+            conditionTestInputs: this.domainObject.configuration.conditionTestData || []
+        };
     },
     methods: {
         updateCurrentOutput(currentConditionResult) {
             this.currentConditionOutput = currentConditionResult.output;
+        },
+        updateTelemetry(telemetryObjs) {
+            this.telemetryObjs = telemetryObjs;
+        },
+        updateTestData(testData) {
+            this.testData = testData;
         }
     }
 };

src/plugins/condition/components/TestData.vue

@@ -36,6 +36,9 @@
     </div>
     <div v-if="expanded"
          class="c-cs__content"
+    >
+        <div class="c-cdef__controls"
+             :disabled="!telemetry.length"
         >
             <label class="c-toggle-switch">
                 <input
@@ -46,27 +49,73 @@
                 <span class="c-toggle-switch__slider"></span>
                 <span class="c-toggle-switch__label">Apply Test Data</span>
             </label>
-        <div class="c-cs-test-h">
-            <div v-for="n in 5"
-                 :key="n"
-                 class="c-test-datum"
-            >
-                <span class="c-test-datum__label">Set</span>
-                <div class="c-test-datum__controls">
-                    <select>
-                        <option>- Select Input -</option>
-                    </select>
         </div>
+        <div class="c-cs-tests">
+            <span v-for="(testInput, tIndex) in testInputs"
+                  :key="tIndex"
+                  class="c-test-datum c-cs-test"
+            >
+                <span class="c-cs-test__label">Set</span>
+                <span class="c-cs-test__controls">
+                    <span class="c-cdef__control">
+                        <select v-model="testInput.telemetry"
+                                @change="updateMetadata(testInput)"
+                        >
+                            <option value="">- Select Telemetry -</option>
+                            <option v-for="(telemetryOption, index) in telemetry"
+                                    :key="index"
+                                    :value="telemetryOption.identifier"
+                            >
+                                {{ telemetryOption.name }}
+                            </option>
+                        </select>
+                    </span>
+                    <span v-if="testInput.telemetry"
+                          class="c-cdef__control"
+                    >
+                        <select v-model="testInput.metadata"
+                                @change="updateTestData"
+                        >
+                            <option value="">- Select Field -</option>
+                            <option v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
+                                    :key="index"
+                                    :value="option.key"
+                            >
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </span>
+                    <span v-if="testInput.metadata"
+                          class="c-cdef__control__inputs"
+                    >
+                        <input v-model="testInput.value"
+                               placeholder="Enter test input"
+                               type="text"
+                               class="c-cdef__control__input"
+                               @change="updateTestData"
+                        >
+                    </span>
+                </span>
                 <div class="c-test-datum__buttons">
                     <button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
-                            title="Duplicate this test data value"
+                            title="Duplicate this test datum"
+                            @click="addTestInput(testInput)"
                     ></button>
                     <button class="c-click-icon c-test-data__delete-button icon-trash"
-                            title="Delete this test data value"
+                            title="Delete this test datum"
+                            @click="removeTestInput(tIndex)"
                     ></button>
                 </div>
+            </span>
         </div>
-        </div>
+        <button
+            v-show="isEditing"
+            id="addTestDatum"
+            class="c-button c-button--major icon-plus labeled"
+            @click="addTestInput"
+        >
+            <span class="c-cs-button__label">Add Test Datum</span>
+        </button>
     </div>
 </section>
 </template>
@@ -75,17 +124,113 @@
 export default {
     inject: ['openmct'],
     props: {
-        isEditing: Boolean
+        isEditing: Boolean,
+        telemetry: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        testData: {
+            type: Object,
+            required: true,
+            default: () => {
+                return {
+                    applied: false,
+                    conditionTestInputs: []
+                }
+            }
+        }
     },
     data() {
         return {
             expanded: true,
-            isApplied: true
+            isApplied: false,
+            testInputs: [],
+            telemetryMetadataOptions: {}
         };
     },
+    watch: {
+        isEditing(editing) {
+            if (!editing) {
+                this.resetApplied();
+            }
+        },
+        telemetry: {
+            handler() {
+                this.initializeMetadata();
+            },
+            deep: true
+        },
+        testData: {
+            handler() {
+                this.initialize();
+            },
+            deep: true
+        }
+    },
+    beforeDestroy() {
+        this.resetApplied();
+    },
+    mounted() {
+        this.initialize();
+        this.initializeMetadata();
+    },
     methods: {
-        applyTestData(ev) {
+        applyTestData() {
-            this.$emit('change', ev.target.checked);
+            this.isApplied = !this.isApplied;
+            this.updateTestData();
+        },
+        initialize() {
+            if (this.testData && this.testData.conditionTestInputs) {
+                this.testInputs = this.testData.conditionTestInputs;
+            }
+            if (!this.testInputs.length) {
+                this.addTestInput();
+            }
+        },
+        initializeMetadata() {
+            this.telemetry.forEach((telemetryObject) => {
+                const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
+                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
+            });
+        },
+        addTestInput(testInput) {
+            this.testInputs.push(Object.assign({
+                telemetry: '',
+                metadata: '',
+                input: ''
+            }, testInput));
+        },
+        removeTestInput(index) {
+            this.testInputs.splice(index, 1);
+            this.updateTestData();
+        },
+        getId(identifier) {
+            if (identifier) {
+                return this.openmct.objects.makeKeyString(identifier);
+            }
+            return [];
+        },
+        updateMetadata(testInput) {
+            if (testInput.telemetry) {
+                const id = this.openmct.objects.makeKeyString(testInput.telemetry);
+                if(this.telemetryMetadataOptions[id]) {
+                    return;
+                }
+                let telemetryMetadata = this.openmct.telemetry.getMetadata(testInput);
+                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
+            }
+        },
+        resetApplied() {
+            this.isApplied = false;
+            this.updateTestData();
+        },
+        updateTestData() {
+            this.$emit('updateTestData', {
+                applied: this.isApplied,
+                conditionTestInputs: this.testInputs
+            });
         }
     }
 }

src/plugins/condition/components/condition-set.scss

@@ -64,7 +64,7 @@
 }
 
 /***************************** TEST DATA */
-.c-cs-test-h {
+.c-cs-tests {
     flex: 1 1 auto;
     overflow: auto;
     padding-right: $interiorMarginSm;
@@ -74,16 +74,21 @@
     }
 }
 
-.c-test-datum {
+.c-cs-test {
     > * {
         flex: 0 0 auto;
         + * {
             margin-left: $interiorMargin;
         }
     }
-    &__controls {
-        flex: 1 1 auto;
-    }
 
+    &__controls {
+        display: flex;
+        flex: 1 1 auto;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
 }
 

src/plugins/condition/plugin.js

@@ -38,6 +38,7 @@ export default function ConditionPlugin() {
             cssClass: 'icon-conditional',
             initialize: function (domainObject) {
                 domainObject.configuration = {
+                    conditionTestData: [],
                     conditionCollection: [{
                         isDefault: true,
                         id: uuid(),

src/styles/_controls.scss

@@ -225,6 +225,10 @@ section {
     overflow: hidden;
     + section {
         margin-top: $interiorMargin;
+
+        &.is-expanded {
+            margin-bottom: $interiorMargin * 3;
+        }
     }
 
     &.is-expanded {