Merge pull request #2734 from nasa/condition-description

Condition dynamic summary description based on criteria

src/plugins/condition/components/Condition.vue

@@ -42,8 +42,28 @@
 
         <span class="c-condition__name">{{ condition.configuration.name }}</span>
         <!-- TODO: description should be derived from criteria -->
-        <span class="c-condition__summary">
-            Description/summary goes here {{ condition.configuration.description }}
+        <span v-if="condition.isDefault"
+              class="c-condition__summary"
+        >
+            When all else fails
+        </span>
+        <span v-else
+              class="c-condition__summary"
+        >
+            <template v-if="!canEvaluateCriteria">
+                Define criteria
+            </template>
+            <template v-else>
+                When
+                <span v-for="(criterion, index) in condition.configuration.criteria"
+                      :key="index"
+                >
+                    {{ getRule(criterion, index) }}
+                    <template v-if="!isLastCriterion">
+                        {{ getConjunction }}
+                    </template>
+                </span>
+            </template>
         </span>
 
         <div class="c-condition__buttons">
@@ -159,14 +179,35 @@
             Output: {{ condition.configuration.output }}
         </span>
     </div>
-    <div class="c-condition__summary">
-        Description/summary goes here {{ condition.configuration.description }}
+    <div v-if="condition.isDefault"
+         class="c-condition__summary"
+    >
+        When all else fails
+    </div>
+    <div v-else
+         class="c-condition__summary"
+    >
+        <template v-if="!canEvaluateCriteria">
+            Define criteria
+        </template>
+        <template v-else>
+            When
+            <span v-for="(criterion, index) in condition.configuration.criteria"
+                  :key="index"
+            >
+                {{ getRule(criterion, index) }}
+                <template v-if="!isLastCriterion">
+                    {{ getConjunction }}
+                </template>
+            </span>
+        </template>
     </div>
 </div>
 </template>
 
 <script>
 import Criterion from './Criterion.vue';
+import { OPERATIONS } from '../utils/operations';
 
 export default {
     inject: ['openmct'],
@@ -202,6 +243,24 @@ export default {
             criterionIndex: 0
         };
     },
+    computed: {
+        canEvaluateCriteria: function () {
+            let criteria = this.condition.configuration.criteria;
+            let lastCriterion = criteria[criteria.length - 1];
+            if (lastCriterion.telemetry &&
+                lastCriterion.operation &&
+                (lastCriterion.input.length ||
+                lastCriterion.operation === 'isDefined' ||
+                lastCriterion.operation === 'isUndefined')) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        getConjunction: function () {
+            return this.condition.configuration.trigger === 'all' ? 'and' : 'or';
+        }
+    },
     destroyed() {
         this.destroy();
     },
@@ -209,6 +268,20 @@ export default {
         this.setOutputSelection();
     },
     methods: {
+        getRule(criterion, index) {
+            return `${criterion.telemetry.name} ${criterion.telemetry.fieldName} ${this.findDescription(criterion.operation, criterion.input)}`;
+        },
+        isLastCriterion(index) {
+            return index === this.condition.configuration.criteria.length - 1;
+        },
+        findDescription(operation, values) {
+            for (let i=0, ii= OPERATIONS.length; i < ii; i++) {
+                if (operation === OPERATIONS[i].name) {
+                    return OPERATIONS[i].getDescription(values);
+                }
+            }
+            return null;
+        },
         setOutputSelection() {
             let conditionOutput = this.condition.configuration.output;
             if (conditionOutput) {

src/plugins/condition/components/Criterion.vue

@@ -51,8 +51,8 @@
             >
                 <input v-model="criterion.input[inputIndex]"
                        class="c-cdef__control__input"
-                       type="text"
-                       @change="persist"
+                       :type="setInputType"
+                       @blur="persist"
                 >
                 <span v-if="inputIndex < inputCount-1">and</span>
             </span>
@@ -102,6 +102,20 @@ export default {
         },
         filteredOps: function () {
             return [...this.operations.filter(op => op.appliesTo.indexOf(this.operationFormat) !== -1)];
+        },
+        setInputType: function () {
+            let type = '';
+            for (let i = 0; i < this.filteredOps.length; i++) {
+                if (this.criterion.operation === this.filteredOps[i].name) {
+                    if (this.filteredOps[i].appliesTo.length === 1) {
+                        type = this.filteredOps[i].appliesTo[0];
+                    } else {
+                        type = 'string'
+                    }
+                    break;
+                }
+            }
+            return type;
         }
     },
     mounted() {
@@ -130,6 +144,7 @@ export default {
             if (ev) {this.clearInputs()}
             if (this.criterion.telemetry) {
                 this.openmct.objects.get(this.criterion.telemetry).then((telemetryObject) => {
+                    this.criterion.telemetry.name = telemetryObject.name;
                     this.telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
                     this.telemetryMetadataOptions = this.telemetryMetadata.values();
                     this.updateOperations();
@@ -140,7 +155,10 @@ export default {
             }
         },
         updateOperations(ev) {
-            if (ev) {this.clearInputs()}
+            if (ev) {
+                this.criterion.telemetry.fieldName = ev.target.options[ev.target.selectedIndex].text;
+                this.clearInputs()
+            }
             this.getOperationFormat();
             this.persist();
         },

src/plugins/condition/utils/operations.js

@@ -8,7 +8,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' == ' + values[0];
+            return ' is ' + values[0];
         }
     },
     {
@@ -20,7 +20,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' != ' + values[0];
+            return ' is not ' + values[0];
         }
     },
     {
@@ -80,7 +80,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 2,
         getDescription: function (values) {
-            return ' between ' + values[0] + ' and ' + values[1];
+            return ' is between ' + values[0] + ' and ' + values[1];
         }
     },
     {
@@ -92,7 +92,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 2,
         getDescription: function (values) {
-            return ' not between ' + values[0] + ' and ' + values[1];
+            return ' is not between ' + values[0] + ' and ' + values[1];
         }
     },
     {
@@ -188,7 +188,7 @@ export const OPERATIONS = [
         appliesTo: ['enum'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' == ' + values[0];
+            return ' is ' + values[0];
         }
     },
     {
@@ -200,7 +200,7 @@ export const OPERATIONS = [
         appliesTo: ['enum'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' != ' + values[0];
+            return ' is not ' + values[0];
         }
     }
 ];