ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-30 09:58:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactored condition and conditionEdit components into single component named condition

Browse Source
This commit is contained in:
Joel McKinnon 2020-02-06 11:53:31 -08:00
parent ec1d4abde9
commit 79557165a3
7 changed files with 474 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/plugins/condition/Condition.js
View File

@ -27,7 +27,7 @@ import { TRIGGER } from "@/plugins/condition/utils/constants";
import {computeCondition} from "@/plugins/condition/utils/evaluator"; import {computeCondition} from "@/plugins/condition/utils/evaluator";
/* /*
* conditionDefinition = { * conditionConfiguration = {
* identifier: { * identifier: {
* key: '', * key: '',
* namespace: '' * namespace: ''
@ -48,20 +48,20 @@ export default class ConditionClass extends EventEmitter {
/** /**
* Manages criteria and emits the result of - true or false - based on criteria evaluated. * Manages criteria and emits the result of - true or false - based on criteria evaluated.
* @constructor * @constructor
* @param conditionDefinition: {identifier: {domainObject.identifier},trigger: enum, criteria: Array of {id: uuid, operation: enum, input: Array, metaDataKey: string, key: {domainObject.identifier} } * @param conditionConfiguration: {identifier: {domainObject.identifier},trigger: enum, criteria: Array of {id: uuid, operation: enum, input: Array, metaDataKey: string, key: {domainObject.identifier} }
* @param openmct * @param openmct
*/ */
constructor(conditionDefinition, openmct) { constructor(conditionConfiguration, openmct) {
super(); super();
this.openmct = openmct; this.openmct = openmct;
this.id = this.openmct.objects.makeKeyString(conditionDefinition.identifier); this.id = this.openmct.objects.makeKeyString(conditionConfiguration.identifier);
this.criteria = []; this.criteria = [];
this.criteriaResults = {}; this.criteriaResults = {};
if (conditionDefinition.definition.criteria) { if (conditionConfiguration.configuration.criteria) {
this.createCriteria(conditionDefinition.definition.criteria); this.createCriteria(conditionConfiguration.configuration.criteria);
} }
this.trigger = conditionDefinition.definition.trigger; this.trigger = conditionConfiguration.configuration.trigger;
this.result = null; this.result = null;
this.openmct.objects.get(this.id).then(obj => this.observeForChanges(obj)); this.openmct.objects.get(this.id).then(obj => this.observeForChanges(obj));
} }
@ -71,8 +71,8 @@ export default class ConditionClass extends EventEmitter {
} }
update(newDomainObject) { update(newDomainObject) {
this.updateTrigger(newDomainObject.definition.trigger); this.updateTrigger(newDomainObject.configuration.trigger);
this.updateCriteria(newDomainObject.definition.criteria); this.updateCriteria(newDomainObject.configuration.criteria);
} }
updateTrigger(trigger) { updateTrigger(trigger) {
@ -82,33 +82,33 @@ export default class ConditionClass extends EventEmitter {
} }
} }
generateCriterion(criterionDefinition) { generateCriterion(criterionConfiguration) {
return { return {
id: uuid(), id: uuid(),
operation: criterionDefinition.operation || '', operation: criterionConfiguration.operation || '',
input: criterionDefinition.input === undefined ? [] : criterionDefinition.input, input: criterionConfiguration.input === undefined ? [] : criterionConfiguration.input,
metaDataKey: criterionDefinition.metaDataKey || '', metaDataKey: criterionConfiguration.metaDataKey || '',
key: criterionDefinition.key || '' key: criterionConfiguration.key || ''
}; };
} }
createCriteria(criterionDefinitions) { createCriteria(criterionConfigurations) {
criterionDefinitions.forEach((criterionDefinition) => { criterionConfigurations.forEach((criterionConfigurations) => {
this.addCriterion(criterionDefinition); this.addCriterion(criterionConfigurations);
}); });
} }
updateCriteria(criterionDefinitions) { updateCriteria(criterionConfigurations) {
this.destroyCriteria(); this.destroyCriteria();
this.createCriteria(criterionDefinitions); this.createCriteria(criterionConfigurations);
} }
/** /**
* adds criterion to the condition. * adds criterion to the condition.
*/ */
addCriterion(criterionDefinition) { addCriterion(criterionConfiguration) {
let criterionDefinitionWithId = this.generateCriterion(criterionDefinition || null); let criterionConfigurationWithId = this.generateCriterion(criterionConfiguration || null);
let criterion = new TelemetryCriterion(criterionDefinitionWithId, this.openmct); let criterion = new TelemetryCriterion(criterionConfigurationWithId, this.openmct);
criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj)); criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
criterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj)); criterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj));
if (!this.criteria) { if (!this.criteria) {
@ -117,7 +117,7 @@ export default class ConditionClass extends EventEmitter {
this.criteria.push(criterion); this.criteria.push(criterion);
//Do we need this here? //Do we need this here?
this.handleConditionUpdated(); this.handleConditionUpdated();
return criterionDefinitionWithId.id; return criterionConfigurationWithId.id;
} }
findCriterion(id) { findCriterion(id) {
@ -135,11 +135,11 @@ export default class ConditionClass extends EventEmitter {
return criterion; return criterion;
} }
updateCriterion(id, criterionDefinition) { updateCriterion(id, criterionConfiguration) {
let found = this.findCriterion(id); let found = this.findCriterion(id);
if (found) { if (found) {
const newCriterionDefinition = this.generateCriterion(criterionDefinition); const newcriterionConfiguration = this.generateCriterion(criterionConfiguration);
let newCriterion = new TelemetryCriterion(newCriterionDefinition, this.openmct); let newCriterion = new TelemetryCriterion(newcriterionConfiguration, this.openmct);
newCriterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj)); newCriterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
newCriterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj)); newCriterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj));

433
src/plugins/condition/components/Condition.vue
View File

@ -1,27 +1,183 @@
<template> <template>
<div v-if="condition" <div v-if="isEditing">
id="conditionArea" <div v-if="domainObject"
class="c-cs-ui__conditions" class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]" :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
> :data-condition-index="conditionIndex"
<div class="title-bar"> :draggable="!domainObject.isDefault"
<span class="condition-name"> @dragstart="dragStart"
{{ condition.definition.name }} @dragover.stop
</span> >
<span class="condition-output"> <div class="title-bar">
Output: {{ condition.definition.output }} <span
</span> class="c-c__menu-hamburger"
:class="{ 'is-enabled': !domainObject.isDefault }"
></span>
<span
class="is-enabled flex-elem"
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
@click="expanded = !expanded"
></span>
<div class="condition-summary">
<span class="condition-name">{{ domainObject.configuration.name }}</span>
<span class="condition-description">{{ domainObject.configuration.name }}</span>
</div>
<span v-if="!domainObject.isDefault"
class="is-enabled c-c__duplicate"
@click="cloneCondition"
></span>
<span v-if="!domainObject.isDefault"
class="is-enabled c-c__trash"
@click="removeCondition"
></span>
</div>
<div v-if="expanded"
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
>
<div id="conditionArea"
class="c-c-editui__condition widget-conditions"
>
<div class="c-c-condition">
<div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
<div>
<ul class="t-widget-condition-config">
<li>
<label>Condition Name</label>
<span class="controls">
<input v-model="domainObject.configuration.name"
class="t-condition-input__name"
type="text"
>
</span>
</li>
<li>
<label>Output</label>
<span class="controls">
<select v-model="selectedOutputKey"
@change="checkInputValue"
>
<option value="">- Select Output -</option>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ option }}
</option>
</select>
<input v-if="selectedOutputKey === outputOptions[2]"
v-model="domainObject.configuration.output"
class="t-condition-input__output"
type="text"
>
</span>
</li>
</ul>
<div v-if="!domainObject.isDefault"
class="widget-condition-content expanded"
>
<ul class="t-widget-condition-config">
<li class="has-local-controls t-condition">
<label>Match when</label>
<span class="controls">
<select v-model="trigger">
<option value="all">all criteria are met</option>
<option value="any">any criteria are met</option>
</select>
</span>
</li>
</ul>
<ul v-if="telemetry.length"
class="t-widget-condition-config"
>
<li v-for="(criteria, index) in domainObject.configuration.criteria"
:key="criteria.identifier.key"
class="has-local-controls t-condition"
>
<label>{{ index === 0 ? 'when' : 'and when' }}</label>
<span class="t-configuration">
<span class="controls">
<select v-model="selectedTelemetryObject">
<option value="">- Select Telemetry -</option>
<option v-for="telemetryOption in telemetryObj"
:key="telemetryOption.identifier.key"
:value="telemetryOption.identifier"
>
{{ telemetryOption.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedFieldObject">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata[currentCriteria.identifier]"
:key="option.key"
:value="option.key"
>
{{ option.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedOperationObject">
<option value="">- Select Comparison -</option>
<option v-for="option in operations"
:key="option.name"
:value="option.name"
>
{{ option.text }}
</option>
</select>
<input class="t-condition-name-input"
type="text"
>
</span>
</span>
</li>
</ul>
<div class="holder c-c-button-wrapper align-left">
<span class="c-c-label-spacer"></span>
<button
class="c-c-button c-c-button--minor add-criteria-button"
@click="addCriteria"
>
<span class="c-c-button__label">Add Criteria</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="condition-config"> </div>
<span class="condition-description"> <div v-else>
{{ condition.definition.description }} <div v-if="domainObject"
</span> id="conditionArea"
class="c-cs-ui__conditions"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
>
<div class="title-bar">
<span class="condition-name">
{{ domainObject.configuration.name }}
</span>
<span class="condition-output">
Output: {{ domainObject.configuration.output }}
</span>
</div>
<div class="condition-config">
<span class="condition-description">
{{ domainObject.configuration.description }}
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { OPERATIONS } from '../utils/operations';
import ConditionClass from "@/plugins/condition/Condition"; import ConditionClass from "@/plugins/condition/Condition";
import uuid from 'uuid';
export default { export default {
inject: ['openmct'], inject: ['openmct'],
@ -33,33 +189,260 @@ export default {
currentConditionIdentifier: { currentConditionIdentifier: {
type: Object, type: Object,
required: true required: true
},
conditionIndex: {
type: Number,
required: true
},
telemetry: {
type: Array,
required: true,
default: () => []
},
isEditing: {
type: Boolean,
required: true
} }
}, },
data() { data() {
return { return {
condition: this.condition domainObject: this.domainObject,
currentCriteria: this.currentCriteria,
expanded: true,
trigger: 'any',
telemetryObj: this.telemetry,
telemetryMetadata: {},
operations: OPERATIONS,
selectedTelemetryObject: {},
selectedFieldObject: {},
selectedOperationObject: {},
operationValue: {},
selectedOutputKey: '',
stringOutputField: {},
comparisonInputValue: {},
outputOptions: ['false', 'true', 'string']
}; };
}, },
destroyed() { destroyed() {
this.conditionClass.off('conditionResultUpdated', this.handleConditionResult.bind(this)); this.destroy();
if (this.conditionClass && typeof this.conditionClass.destroy === 'function') {
this.conditionClass.destroy();
}
}, },
mounted() { mounted() {
this.openmct.objects.get(this.conditionIdentifier).then((obj => { this.openmct.objects.get(this.conditionIdentifier).then((domainObject => {
this.condition = obj; this.domainObject = domainObject;
this.conditionClass = new ConditionClass(this.condition, this.openmct); this.initialize();
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
})); }));
}, },
updated() {
//validate telemetry exists, update criteria as needed
this.validate();
this.persist();
},
methods: { methods: {
addCriteria() {
const criteriaObject = {
operation: '',
input: '',
metadataKey: '',
key: {
namespace: '',
key: uuid()
}
}
this.selectedOperationName[this.currentCriteria.identifier] = undefined;
// this.comparisonValueField[id] = false;
this.domainObject.configuration.criteria.push(criteriaObject);
},
dragStart(e) {
this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
},
initialize() {
let criteriaId;
if (!this.domainObject.isDefault) {
this.setCurrentCriterion(0);
criteriaId = this.currentCriteria.identifier;
this.setOutput(criteriaId);
this.updateTelemetryObjects(criteriaId);
this.setOperationObject(criteriaId);
this.conditionClass = new ConditionClass(this.domainObject, this.openmct);
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
}
},
setCurrentCriterion(index) {
console.log('this.domainObject.configuration', this.domainObject.configuration);
this.currentCriteria = this.domainObject.configuration.criteria[index];
},
destroy() {
// this.conditionClass.off('conditionResultUpdated', this.handleConditionResult.bind(this));
// if (this.conditionClass && typeof this.conditionClass.destroy === 'function') {
// this.conditionClass.destroy();
// delete this.conditionClass;
// }
},
reset() {
this.selectedMetadataKey = {};
this.selectedTelemetryKey = {};
this.selectedOperationKey = {};
this.operationValue = {};
},
validate(criteriaId) {
if (this.hasTelemetry(criteriaId) && !this.getTelemetryKey(criteriaId)) {
this.reset();
} else {
if (!this.conditionClass) {
this.initialize();
}
}
},
handleConditionResult(args) { handleConditionResult(args) {
this.$emit('conditionResultUpdated', { this.$emit('conditionResultUpdated', {
id: this.conditionIdentifier, id: this.conditionIdentifier,
result: args.data.result result: args.data.result
}) })
},
removeCondition(ev) {
this.$emit('removeCondition', this.conditionIdentifier);
},
cloneCondition(ev) {
this.$emit('cloneCondition', {
identifier: this.conditionIdentifier,
index: Number(ev.target.closest('.widget-condition').getAttribute('data-condition-index'))
});
},
setOutput(value) {
let conditionOutput = this.domainObject.configuration.output;
if (!conditionOutput) {
if (conditionOutput !== 'false' && conditionOutput !== 'true') {
this.selectedOutputKey = this.outputOptions[2].key;
} else {
if (conditionOutput === 'true') {
this.selectedOutputKey = this.outputOptions[1].key;
} else {
this.selectedOutputKey = this.outputOptions[0].key;
}
}
}
},
setOperationObject(criteriaId) {
if (this.selectedFieldObject[criteriaId] !== undefined) {
if (this.operationValue[criteriaId] !== undefined) {
for (let i=0, ii=this.operations.length; i < ii; i++) {
if (this.currentCriteria.operation === this.operations[i].name) {
this.selectedFieldObject[criteriaId] = this.operations[i].name;
this.comparisonInputValue[criteriaId] = this.operations[i].inputCount > 0;
if (this.comparisonInputValue[criteriaId]) {
this.operationValue[criteriaId] = this.currentCriteria.input[0];
}
}
}
}
}
},
updateTelemetryObjects(criteriaId) {
if (this.hasTelemetry(criteriaId)) {
this.openmct.objects.get(criteriaId).then((obj) => {
this.telemetryMetadata[criteriaId] = this.openmct.telemetry.getMetadata(obj).values();
this.selectedFieldObject[criteriaId] = this.getTelemetryMetadataKey(criteriaId);
this.selectedTelemetryObject[criteriaId] = this.getTelemetryObject(criteriaId);
// console.log('this.telemetryMetadata[criteriaId]', this.telemetryMetadata[criteriaId])
// console.log('this.selectedMetadataKey[criteriaId]', this.selectedMetadataKey[criteriaId])
console.log('this.selectedTelemetryObject[criteriaId]', this.selectedTelemetryObject[criteriaId])
});
}
},
getTelemetryMetadataKey(criteriaId) {
let index = -1;
if (criteriaId) {
index = _.findIndex(this.telemetryMetadata[criteriaId], (metadata) => {
return metadata.key === this.currentCriteria.metadataKey;
});
}
return this.telemetryMetadata[criteriaId].length && index > -1 ? this.telemetryMetadata[criteriaId][index].key : '- Select Telemetry -';
},
getTelemetryObject(criteriaId) {
let index = -1;
if (this.currentCriteria && criteriaId) {
let conditionKey = this.openmct.objects.makeKeyString(criteriaId);
index = _.findIndex(this.telemetry, (obj) => {
let key = this.openmct.objects.makeKeyString(obj.identifier)
return key === conditionKey
});
}
return this.telemetry.length && index > -1 ? this.telemetry[index] : '';
},
hasTelemetry(criteriaId) {
// TODO: check parent domainObject.composition.hasTelemetry
return this.currentCriteria && criteriaId;
},
updateConditionCriteria(criteriaId) {
if (this.domainObject.configuration.criteria.length) {
let criterion = this.domainObject.configuration.criteria[0];
criterion.key = this.selectedTelemetryKey[criteriaId];
criterion.metadataKey = this.selectedMetadataKey[criteriaId];
criterion.operation = this.selectedOperationName[criteriaId];
criterion.input = this.operationValue;
}
},
persist() {
// this.updateConditionCriteria();
this.openmct.objects.mutate(this.domainObject, 'configuration', this.domainObject.configuration);
},
checkInputValue() {
if (this.selectedOutputKey === this.outputOptions[2].key) {
this.domainObject.configuration.output = '';
} else {
this.domainObject.configuration.output = this.selectedOutputKey;
}
},
setInputValueVisibility(ev) {
for (let i=0, ii=this.operations.length; i < ii; i++) {
if (this.selectOperationName === this.operations[i].name) {
this.comparisonValueField = this.operations[i].inputCount > 0;
break;
}
}
//find the criterion being updated and set the operation property
},
updateOutputOption(ev) {
if (this.selectedOutputKey === this.outputOptions[2].key) {
this.domainObject.configuration.output = '';
} else {
this.domainObject.configuration.output = this.selectedOutputKey;
}
},
// // I'm thinking the update select options handlers should call different functions
// updateTelemetryOptions() {
// this.updateConditionCriteria();
// this.updateTelemetryKeys();
// },
// updateFieldOptions() {
// this.updateConditionCriteria();
// this.updateTelemetryKeys();
// },
// updateComparisonOptions(ev, criteriaId) {
// if (ev.target.value !== undefined) {
// this.operationValue[criteriaId] = ev.target.value;
// // for (let i = 0, ii = this.operations.length; i < ii; i++) {
// // // console.log('this.selectedOperationName[criteriaId]', this.selectedOperationName[criteriaId])
// // // console.log('this.operations[i].name', this.operations[i].name)
// // if (this.selectedOperationName[criteriaId] === this.operations[i].name) {
// // // console.log('this.operations[i].inputCount', this.operations[i].inputCount);
// // //this.comparisonValueField[criteriaId] = this.operations[i].inputCount > 0;
// // console.log('this.comparisonValueField[criteriaId]', this.comparisonValueField[criteriaId]);
// // break;
// // }
// // }
// } else {
// this.operationValue[criteriaId] = undefined;
// }
// },
updateCurrentCondition() {
this.$emit('updateCurrentCondition', this.conditionIdentifier);
} }
} }
} }
</script> </script>

84
src/plugins/condition/components/ConditionCollection.vue
View File

@ -55,31 +55,23 @@
<li v-for="(conditionIdentifier, index) in conditionCollection" <li v-for="(conditionIdentifier, index) in conditionCollection"
:key="conditionIdentifier.key" :key="conditionIdentifier.key"
> >
<div v-if="isEditing"> <div v-if="isEditing"
<div class="c-c__drag-ghost" class="c-c__drag-ghost"
@drop.prevent="dropCondition" @drop.prevent="dropCondition"
@dragenter="dragEnter" @dragenter="dragEnter"
@dragleave="dragLeave" @dragleave="dragLeave"
@dragover.prevent @dragover.prevent
></div> ></div>
<ConditionEdit :condition-identifier="conditionIdentifier" <Condition :condition-identifier="conditionIdentifier"
:current-condition-identifier="currentConditionIdentifier" :current-condition-identifier="currentConditionIdentifier"
:condition-index="index" :condition-index="index"
:telemetry="telemetryObjs" :telemetry="telemetryObjs"
@update-current-condition="updateCurrentCondition" :is-editing="isEditing"
@removeCondition="removeCondition" @update-current-condition="updateCurrentCondition"
@conditionResultUpdated="handleConditionResult" @removeCondition="removeCondition"
@setMoveIndex="setMoveIndex" @conditionResultUpdated="handleConditionResult"
/> @setMoveIndex="setMoveIndex"
</div> />
<div v-else>
<Condition :condition-identifier="conditionIdentifier"
:current-condition-identifier="currentConditionIdentifier"
@updateCurrentCondition="updateCurrentCondition"
@removeCondition="removeCondition"
@conditionResultUpdated="handleConditionResult"
/>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -89,15 +81,13 @@
<script> <script>
import Condition from '../../condition/components/Condition.vue'; import Condition from '../../condition/components/Condition.vue';
import ConditionEdit from '../../condition/components/ConditionEdit.vue';
import uuid from 'uuid'; import uuid from 'uuid';
export default { export default {
inject: ['openmct', 'domainObject'], inject: ['openmct', 'domainObject'],
components: { components: {
Condition, Condition
ConditionEdit
}, },
props: { props: {
isEditing: Boolean isEditing: Boolean
@ -116,13 +106,13 @@ export default {
}; };
}, },
destroyed() { destroyed() {
this.composition.off('add', this.addTelemetry); this.composition.off('add', this.addTelemetryObject);
}, },
mounted() { mounted() {
this.instantiate = this.openmct.$injector.get('instantiate'); this.instantiate = this.openmct.$injector.get('instantiate');
this.composition = this.openmct.composition.get(this.domainObject); this.composition = this.openmct.composition.get(this.domainObject);
this.composition.on('add', this.addTelemetry); this.composition.on('add', this.addTelemetryObject);
this.composition.on('remove', this.removeTelemetry); this.composition.on('remove', this.removeTelemetryObject);
this.composition.load(); this.composition.load();
this.conditionCollection = this.domainObject.configuration.conditionCollection; this.conditionCollection = this.domainObject.configuration.conditionCollection;
if (!this.conditionCollection.length) { if (!this.conditionCollection.length) {
@ -181,14 +171,13 @@ export default {
handleConditionResult(args) { handleConditionResult(args) {
let idAsString = this.openmct.objects.makeKeyString(args.id); let idAsString = this.openmct.objects.makeKeyString(args.id);
this.conditionResults[idAsString] = args.result; this.conditionResults[idAsString] = args.result;
this.updateCurrentConditionId(); this.updateCurrentConditionIdentifier();
}, },
updateCurrentConditionId() { updateCurrentConditionIdentifier() {
let currentConditionIdentifier = this.conditionCollection[this.conditionCollection.length-1]; let currentConditionIdentifier = this.conditionCollection[this.conditionCollection.length-1];
// for (let i=0, ii = this.conditionCollection.length-1; i< ii; i++) { for (let i = 0; i < this.conditionCollection.length - 1; i++) {
for (let i = 0; i < this.conditionCollection.length-1; i++) { let conditionIdentifierAsString = this.openmct.objects.makeKeyString(this.conditionCollection[i]);
let conditionIdAsString = this.openmct.objects.makeKeyString(this.conditionCollection[i]); if (this.conditionResults[conditionIdentifierAsString]) {
if (this.conditionResults[conditionIdAsString]) {
// TODO: first condition to be true wins // TODO: first condition to be true wins
currentConditionIdentifier = this.conditionCollection[i]; currentConditionIdentifier = this.conditionCollection[i];
break; break;
@ -196,13 +185,13 @@ export default {
} }
this.$emit('currentConditionUpdated', currentConditionIdentifier); this.$emit('currentConditionUpdated', currentConditionIdentifier);
}, },
addTelemetry(telemetryDomainObject) { addTelemetryObject(domainObject) { // JM: don't see how object param ever gets passed to this
this.telemetryObjs.push(telemetryDomainObject); this.telemetryObjs.push(domainObject);
}, },
removeTelemetry(telemetryDomainObjectIdentifier) { removeTelemetryObject(identifier) { // JM: don't see how identifier param ever gets passed to this
let index = _.findIndex(this.telemetryObjs, (obj) => { let index = _.findIndex(this.telemetryObjs, (obj) => {
let objId = this.openmct.objects.makeKeyString(obj.identifier); let objId = this.openmct.objects.makeKeyString(obj.identifier);
let id = this.openmct.objects.makeKeyString(telemetryDomainObjectIdentifier); let id = this.openmct.objects.makeKeyString(identifier);
return objId === id; return objId === id;
}); });
if (index > -1) { if (index > -1) {
@ -210,23 +199,23 @@ export default {
} }
}, },
addCondition(event, isDefault) { addCondition(event, isDefault) {
let conditionDomainObject = this.getConditionDomainObject(!!isDefault); let conditionDomainObject = this.createConditionDomainObject(!!isDefault);
//persist the condition domain object so that we can do an openmct.objects.get on it and only persist the identifier in the conditionCollection of conditionSet //persist the condition domain object so that we can do an openmct.objects.get on it and only persist the identifier in the conditionCollection of conditionSet
this.openmct.objects.mutate(conditionDomainObject, 'created', new Date());
this.conditionCollection.unshift(conditionDomainObject.identifier); this.conditionCollection.unshift(conditionDomainObject.identifier);
this.persist(); this.persist();
}, },
updateCurrentCondition(identifier) { updateCurrentCondition(identifier) {
this.currentConditionIdentifier = identifier; this.currentConditionIdentifier = identifier;
}, },
getConditionDomainObject(isDefault) { createConditionDomainObject(isDefault) {
let conditionObj = { let conditionObj = {
isDefault: isDefault, isDefault: isDefault,
name: isDefault ? 'Default' : 'Unnamed Condition',
identifier: { identifier: {
namespace: this.domainObject.identifier.namespace, namespace: this.domainObject.identifier.namespace,
key: uuid() key: uuid()
}, },
definition: { configuration: {
name: isDefault ? 'Default' : 'Unnamed Condition', name: isDefault ? 'Default' : 'Unnamed Condition',
output: 'false', output: 'false',
trigger: 'any', trigger: 'any',
@ -240,7 +229,8 @@ export default {
} }
}] }]
}, },
summary: 'summary description' summary: 'summary description',
created: new Date()
}; };
let conditionDomainObjectKeyString = this.openmct.objects.makeKeyString(conditionObj.identifier); let conditionDomainObjectKeyString = this.openmct.objects.makeKeyString(conditionObj.identifier);
let newDomainObject = this.instantiate(conditionObj, conditionDomainObjectKeyString); let newDomainObject = this.instantiate(conditionObj, conditionDomainObjectKeyString);
@ -259,7 +249,7 @@ export default {
}); });
this.conditionCollection.splice(index, 1); this.conditionCollection.splice(index, 1);
this.persist(); this.persist();
this.updateCurrentConditionId(); this.updateCurrentConditionIdentifier();
}, },
reorder(reorderPlan) { reorder(reorderPlan) {
let oldConditions = this.conditionCollection.slice(); let oldConditions = this.conditionCollection.slice();

437
src/plugins/condition/components/ConditionEdit.vue
View File

@ -1,437 +0,0 @@
<template>
<div v-if="condition"
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
:data-condition-index="conditionIndex"
:draggable="!condition.isDefault"
@dragstart="dragStart"
@dragover.stop
>
<div class="title-bar">
<span
class="c-c__menu-hamburger"
:class="{ 'is-enabled': !condition.isDefault }"
></span>
<span
class="is-enabled flex-elem"
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
@click="expanded = !expanded"
></span>
<div class="condition-summary">
<span class="condition-name">{{ condition.definition.name }}</span>
<span class="condition-description">{{ condition.definition.name }}</span>
</div>
<span v-if="!condition.isDefault"
class="is-enabled c-c__duplicate"
@click="cloneCondition"
></span>
<span v-if="!condition.isDefault"
class="is-enabled c-c__trash"
@click="removeCondition"
></span>
</div>
<div v-if="expanded"
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
>
<div id="conditionArea"
class="c-c-editui__condition widget-conditions"
>
<div class="c-c-condition">
<div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
<div>
<ul class="t-widget-condition-config">
<li>
<label>Condition Name</label>
<span class="controls">
<input v-model="condition.definition.name"
class="t-condition-input__name"
type="text"
>
</span>
</li>
<li>
<label>Output</label>
<span class="controls">
<select v-model="selectedOutputKey"
@change="checkInputValue"
>
<option value="">- Select Output -</option>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ option }}
</option>
</select>
<input v-if="selectedOutputKey === outputOptions[2]"
v-model="condition.definition.output"
class="t-condition-input__output"
type="text"
>
</span>
</li>
</ul>
<div v-if="!condition.isDefault"
class="widget-condition-content expanded"
>
<ul class="t-widget-condition-config">
<li class="has-local-controls t-condition">
<label>Match when</label>
<span class="controls">
<select v-model="trigger">
<option value="all">all criteria are met</option>
<option value="any">any criteria are met</option>
</select>
</span>
</li>
</ul>
<ul v-if="telemetry.length"
class="t-widget-condition-config">
<li v-for="(criteria, index) in condition.definition.criteria"
:key="criteria.identifier.key"
class="has-local-controls t-condition"
>
<label>{{ index === 0 ? 'when' : 'and when' }}</label>
<span class="t-configuration">
<span class="controls">
<select v-model="selectedTelemetryKey"
@change="updateTelemetryOptions"
>
<option value="">- Select Telemetry -</option>
<option v-for="telemetryOption in telemetryObj"
:key="telemetryOption.identifier.key"
:value="telemetryOption.identifier"
>
{{ telemetryOption.name }}
</option>
</select>
</span>
<span class="controls">
<select @change="updateFieldOptions">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata[currentCriteria.identifier]"
:key="option.key"
:value="option.key"
>
{{ option.name }}
</option>
</select>
</span>
<span class="controls">
<select @change="updateComparisonOptions">
<option value="">- Select Comparison -</option>
<option v-for="option in operations"
:key="option.name"
:value="option.name"
>
{{ option.text }}
</option>
</select>
<input class="t-condition-name-input"
type="text"
>
</span>
</span>
</li>
</ul>
<div class="holder c-c-button-wrapper align-left">
<span class="c-c-label-spacer"></span>
<button
class="c-c-button c-c-button--minor add-criteria-button"
@click="addCriteria"
>
<span class="c-c-button__label">Add Criteria</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { OPERATIONS } from '../utils/operations';
import ConditionClass from "@/plugins/condition/Condition";
import uuid from 'uuid';
export default {
inject: ['openmct', 'domainObject'],
props: {
conditionIdentifier: {
type: Object,
required: true
},
currentConditionIdentifier: {
type: Object,
required: true
},
conditionIndex: {
type: Number,
required: true
},
telemetry: {
type: Array,
required: true,
default: () => []
}
},
data() {
return {
condition: this.condition,
currentCriteria: this.currentCriteria,
expanded: true,
trigger: 'any',
telemetryObj: this.telemetry,
telemetryMetadata: {},
operations: OPERATIONS,
selectedMetadataKey: {},
selectedTelemetryKey: {},
selectedOperationName: {},
operationValue: {},
selectedOutputKey: '',
stringOutputField: {},
comparisonInputValue: {},
outputOptions: ['false', 'true', 'string']
// {
// key: 'false',
// text: 'False'
// },
// {
// key: 'true',
// text: 'True'
// },
// {
// key: 'string',
// text: 'String'
// }
// ]
};
},
destroyed() {
this.destroy();
},
mounted() {
this.openmct.objects.get(this.conditionIdentifier).then((obj => {
this.condition = obj;
this.initialize();
}));
},
updated() {
//validate telemetry exists, update criteria as needed
this.validate();
this.persist();
},
methods: {
addCriteria() {
const criteriaObject = {
operation: '',
input: '',
metadataKey: '',
key: {
namespace: '',
key: uuid()
}
}
this.selectedOperationName[this.currentCriteria.identifier] = undefined;
// this.comparisonValueField[this.currentCriteria.identifier] = false;
this.condition.definition.criteria.push(criteriaObject);
},
dragStart(e) {
this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
},
initialize() {
if (this.condition.definition.criteria.length) {
this.setCurrentCriterion(0);
this.setOutput();
this.updateTelemetryKeys();
this.setOperation();
this.conditionClass = new ConditionClass(this.condition, this.openmct);
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
}
},
setCurrentCriterion(index) {
this.currentCriteria = this.condition.definition.criteria[index];
},
destroy() {
// this.conditionClass.off('conditionResultUpdated', this.handleConditionResult.bind(this));
// if (this.conditionClass && typeof this.conditionClass.destroy === 'function') {
// this.conditionClass.destroy();
// delete this.conditionClass;
// }
},
reset() {
this.selectedMetadataKey = {};
this.selectedTelemetryKey = {};
this.selectedOperationKey = {};
this.operationValue = {};
},
validate() {
if (this.hasTelemetry() && !this.getTelemetryKey()) {
this.reset();
} else {
if (!this.conditionClass) {
this.initialize();
}
}
},
handleConditionResult(args) {
this.$emit('conditionResultUpdated', {
id: this.conditionIdentifier,
result: args.data.result
})
},
removeCondition(ev) {
this.$emit('removeCondition', this.conditionIdentifier);
},
cloneCondition(ev) {
this.$emit('cloneCondition', {
identifier: this.conditionIdentifier,
index: Number(ev.target.closest('.widget-condition').getAttribute('data-condition-index'))
});
},
setOutput() {
console.log('this.condition.definition.output', this.condition.definition.output === '');
let conditionOutput = this.condition.definition.output;
if (!conditionOutput) {
if (conditionOutput !== 'false' && conditionOutput !== 'true') {
this.selectedOutputKey = this.outputOptions[2].key;
} else {
if (conditionOutput === 'true') {
this.selectedOutputKey = this.outputOptions[1].key;
} else {
this.selectedOutputKey = this.outputOptions[0].key;
}
}
this.persist(); // maybe not needed
}
},
setOperation() {
if (this.selectedOperationName[this.currentCriteria.identifier] !== undefined) {
if (this.operationValue[this.currentCriteria.identifier] !== undefined) {
for (let i=0, ii=this.operations.length; i < ii; i++) {
if (this.currentCriteria.operation === this.operations[i].name) {
this.selectedOperationName[this.currentCriteria.identifier] = this.operations[i].name;
this.comparisonInputValue[this.currentCriteria.identifier] = this.operations[i].inputCount > 0;
if (this.comparisonInputValue[this.currentCriteria.identifier]) {
this.operationValue[this.currentCriteria.identifier] = this.currentCriteria.input[0];
}
}
}
}
}
},
updateTelemetryKeys() {
console.log('updateTelemetryKeys')
if (this.hasTelemetry()) {
this.openmct.objects.get(this.currentCriteria.identifier).then((obj) => {
this.telemetryMetadata[this.currentCriteria.identifier] = this.openmct.telemetry.getMetadata(obj).values();
this.selectedMetadataKey[this.currentCriteria.identifier] = this.getTelemetryMetadataKey();
this.selectedTelemetryKey[this.currentCriteria.identifier] = this.getTelemetryKey();
console.log('this.telemetryMetadata[this.currentCriteria.identifier]', this.telemetryMetadata[this.currentCriteria.identifier])
console.log('this.selectedMetadataKey[this.currentCriteria.identifier]', this.selectedMetadataKey[this.currentCriteria.identifier])
console.log('this.selectedTelemetryKey[this.currentCriteria.identifier]', this.selectedTelemetryKey[this.currentCriteria.identifier])
});
}
},
getTelemetryMetadataKey() {
// console.log('this.telemetryMetadata[this.currentCriteria.identifier]', this.telemetryMetadata[this.currentCriteria.identifier]);
let index = -1;
if (this.currentCriteria.identifier) {
index = _.findIndex(this.telemetryMetadata[this.currentCriteria.identifier], (metadata) => {
return metadata.key === this.currentCriteria.metadataKey;
});
}
return this.telemetryMetadata[this.currentCriteria.identifier].length && index > -1 ? this.telemetryMetadata[this.currentCriteria.identifier][index].key : '- Select Telemetry -';
},
getTelemetryKey() {
let index = -1;
if (this.currentCriteria && this.currentCriteria.identifier) {
let conditionKey = this.openmct.objects.makeKeyString(this.currentCriteria.identifier);
index = _.findIndex(this.telemetry, (obj) => {
let key = this.openmct.objects.makeKeyString(obj.identifier)
return key === conditionKey
});
}
console.log('index', index, 'this.telemetry[index]', this.telemetry[index]);
return this.telemetry.length && index > -1 ? this.telemetry[index] : '';
},
hasTelemetry() {
// console.log('this.domainObject.composition', this.domainObject.composition);
return this.currentCriteria && this.currentCriteria.identifier;
},
updateConditionCriteria() {
if (this.condition.definition.criteria.length) {
let criterion = this.condition.definition.criteria[0];
criterion.key = this.selectedTelemetryKey[this.currentCriteria.identifier];
criterion.metadataKey = this.selectedMetadataKey[this.currentCriteria.identifier];
criterion.operation = this.selectedOperationName[this.currentCriteria.identifier];
criterion.input = this.operationValue;
}
},
persist() {
// this.updateConditionCriteria();
this.openmct.objects.mutate(this.condition, 'definition', this.condition.definition);
},
checkInputValue() {
if (this.selectedOutputKey === this.outputOptions[2].key) {
this.condition.definition.output = '';
} else {
this.condition.definition.output = this.selectedOutputKey;
}
},
setInputValueVisibility(ev) {
for (let i=0, ii=this.operations.length; i < ii; i++) {
if (this.selectOperationName === this.operations[i].name) {
this.comparisonValueField = this.operations[i].inputCount > 0;
break;
}
}
//find the criterion being updated and set the operation property
},
updateOutputOption(ev) {
if (this.selectedOutputKey === this.outputOptions[2].key) {
this.condition.definition.output = '';
} else {
this.condition.definition.output = this.selectedOutputKey;
}
},
// I'm thinking the update select options handlers should call different functions
updateTelemetryOptions() {
this.updateConditionCriteria();
this.updateTelemetryKeys();
},
updateFieldOptions() {
this.updateConditionCriteria();
this.updateTelemetryKeys();
},
updateComparisonOptions(ev) {
if (ev.target.value !== undefined) {
this.operationValue[this.currentCriteria.identifier] = ev.target.value;
// for (let i = 0, ii = this.operations.length; i < ii; i++) {
// // console.log('this.selectedOperationName[this.currentCriteria.identifier]', this.selectedOperationName[this.currentCriteria.identifier])
// // console.log('this.operations[i].name', this.operations[i].name)
// if (this.selectedOperationName[this.currentCriteria.identifier] === this.operations[i].name) {
// // console.log('this.operations[i].inputCount', this.operations[i].inputCount);
// //this.comparisonValueField[this.currentCriteria.identifier] = this.operations[i].inputCount > 0;
// console.log('this.comparisonValueField[this.currentCriteria.identifier]', this.comparisonValueField[this.currentCriteria.identifier]);
// break;
// }
// }
} else {
this.operationValue[this.currentCriteria.identifier] = undefined;
}
},
updateCurrentCondition() {
this.$emit('updateCurrentCondition', this.conditionIdentifier);
}
}
}
</script>

2
src/plugins/condition/components/ConditionSet.vue
View File

@ -34,7 +34,7 @@ export default {
}, },
mounted() { mounted() {
let conditionCollection = this.domainObject.configuration.conditionCollection; let conditionCollection = this.domainObject.configuration.conditionCollection;
this.currentConditionIdentifier = conditionCollection.length ? this.updateCurrentCondition(conditionCollection[0]) : null; // this.currentConditionIdentifier = conditionCollection.length ? this.updateCurrentCondition(conditionCollection[0]) : null;
}, },
methods: { methods: {
setCurrentCondition() { setCurrentCondition() {

2
src/plugins/condition/components/CurrentOutput.vue
View File

@ -14,7 +14,7 @@
class="c-cs__ui_content" class="c-cs__ui_content"
> >
<div> <div>
<span class="current-output">{{ condition.definition.output }}</span> <span class="current-output">{{ condition.configuration.output }}</span>
</div> </div>
</div> </div>
</section> </section>

4
src/plugins/condition/plugin.js
View File

@ -43,9 +43,7 @@ export default function ConditionPlugin() {
cssClass: 'icon-summary-widget', // TODO: replace with class for new icon cssClass: 'icon-summary-widget', // TODO: replace with class for new icon
initialize: function (domainObject) { initialize: function (domainObject) {
domainObject.configuration = { domainObject.configuration = {
conditionCollection: [ conditionCollection: []
]
}; };
domainObject.composition = []; domainObject.composition = [];
} }