ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-08 20:04:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'topic-conditionals' into dave/conditions-telemetry

Browse Source
This commit is contained in:
David Tsay 2020-03-18 10:58:17 -07:00
commit 6b4cd25417
17 changed files with 340 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/plugins/condition/ConditionManager.js
View File

@ -165,18 +165,7 @@ export default class ConditionManager extends EventEmitter {
}
findConditionById(id) {
let found;
for (let i=0, ii=this.conditionClassCollection.length; i < ii; i++) {
if (this.conditionClassCollection[i].id === id) {
found = {
item: this.conditionClassCollection[i],
index: i
};
break;
}
}
return found;
return this.conditionClassCollection.find(conditionClass => conditionClass.id === id);
}
//this.$set(this.conditionClassCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);

7
src/plugins/condition/StyleRuleManager.js
View File

@ -34,7 +34,6 @@ export default class StyleRuleManager extends EventEmitter {
initialize(conditionalStyleConfiguration) {
this.conditionSetIdentifier = conditionalStyleConfiguration.conditionSetIdentifier;
this.defaultStyle = conditionalStyleConfiguration.defaultStyle;
this.updateConditionStylesMap(conditionalStyleConfiguration.styles || []);
}
@ -89,7 +88,11 @@ export default class StyleRuleManager extends EventEmitter {
}
destroy() {
this.currentStyle = this.defaultStyle;
if (this.currentStyle) {
Object.keys(this.currentStyle).forEach(key => {
this.currentStyle[key] = 'inherit';
});
}
this.updateDomainObjectStyle();
if (this.stopProvidingTelemetry) {
this.stopProvidingTelemetry();

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

@ -121,6 +121,11 @@ export default {
this.conditionCollection = this.domainObject.configuration.conditionCollection;
this.observeForChanges();
this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
this.conditionManager.requestLADConditionSetOutput()
.then(data => this.$emit('conditionSetResultUpdated', data[0]));
this.conditionManager.on('conditionSetResultUpdated', (data) => {
this.$emit('conditionSetResultUpdated', data);
});
},
methods: {
observeForChanges() {

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

@ -34,7 +34,8 @@
</div>
</section>
<TestData :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing"
@conditionSetResultUpdated="updateCurrentOutput" />
</div>
</template>
@ -58,7 +59,6 @@ export default {
},
mounted() {
this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier);
this.provideTelemetry();
},
beforeDestroy() {
if (this.stopProvidingTelemetry) {
@ -68,15 +68,6 @@ export default {
methods: {
updateCurrentOutput(currentConditionResult) {
this.currentConditionOutput = currentConditionResult.output;
},
provideTelemetry() {
this.openmct.telemetry
.request(this.domainObject)
.then(output => {
this.updateCurrentOutput(output[0]);
});
this.stopProvidingTelemetry = this.openmct.telemetry
.subscribe(this.domainObject, output => { this.updateCurrentOutput(output); });
}
}
};

51
src/plugins/condition/components/inspector/ConditionalStyle.vue
View File

@ -1,28 +1,69 @@
<template>
<div>
<div v-if="conditionName"
<div v-if="conditionStyle"
class="holder c-c-button-wrapper align-left"
>
<div>{{ conditionName }}</div>
<div>{{ conditionStyle.conditionName }}</div>
<span :style="conditionStyle.style">ABC</span>
<toolbar-color-picker v-if="conditionStyle.style.border"
:options="borderColorOption"
@change="updateStyleValue"
/>
<toolbar-color-picker v-if="conditionStyle.style.backgroundColor"
:options="backgroundColorOption"
@change="updateStyleValue"
/>
</div>
</div>
</template>
<script>
import ToolbarColorPicker from "@/ui/toolbar/components/toolbar-color-picker.vue";
export default {
components: {
ToolbarColorPicker
},
inject: [
'openmct'
],
props: {
conditionName: {
type: String,
conditionStyle: {
type: Object,
required: true
}
},
destroyed() {
data() {
return {
condition: null
}
},
computed: {
borderColorOption() {
return {
icon: 'icon-line-horz',
title: 'Set border color',
value: this.conditionStyle.style.border.replace('1px solid ', ''),
property: 'border'
}
},
backgroundColorOption() {
return {
icon: 'icon-paint-bucket',
title: 'Set background color',
value: this.conditionStyle.style.backgroundColor,
property: 'backgroundColor'
}
}
},
methods: {
updateStyleValue(value, item) {
if (item.property === 'border') {
value = '1px solid ' + value;
}
this.conditionStyle.style[item.property] = value;
this.$emit('persist', this.conditionStyle)
}
}
}
</script>

109
src/plugins/condition/components/inspector/ConditionalStylesView.vue
View File

@ -23,8 +23,8 @@
<li v-for="conditionStyle in conditionalStyles"
:key="conditionStyle.conditionId"
>
<conditional-style :condition-name="conditionStyle.conditionName"
:condition-style="conditionStyle.style"
<conditional-style :condition-style="conditionStyle"
@persist="updateConditionalStyle"
/>
</li>
</ul>
@ -41,21 +41,33 @@ export default {
},
inject: [
'openmct',
'domainObject',
'layoutItem'
'domainObject'
],
props: {
itemId: {
type: String,
default: ''
},
initialStyles: {
type: Object,
default() {
return undefined;
}
}
},
data() {
return {
conditionalStyles: []
}
},
mounted() {
if (this.layoutItem) {
//TODO: Handle layout items
}
if (this.domainObject.configuration) {
this.defautStyle = this.domainObject.configuration.defaultStyle;
if (this.domainObject.configuration.conditionalStyle) {
if (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) {
if (this.itemId) {
let conditionalStyle = this.domainObject.configuration.conditionalStyle[this.itemId];
if (conditionalStyle) {
this.conditionalStyles = conditionalStyle.styles || [];
}
} else {
this.conditionalStyles = this.domainObject.configuration.conditionalStyle.styles || [];
}
}
@ -65,49 +77,86 @@ export default {
//TODO: this.conditionSetIdentifier will be set by the UI before calling this
this.conditionSetIdentifier = {
namespace: '',
key: 'bb0f61ad-268d-4d3e-bb30-90ca4a2053c4'
key: "81088c8a-4b80-41fe-9d07-fda8b22d6f5f"
};
this.initializeConditionalStyles();
},
removeConditionSet() {
//TODO: Handle the case where domainObject has items with styles but we're trying to remove the styles on the domainObject itself
this.conditionSetIdentifier = '';
this.conditionalStyles = [];
this.persist(undefined);
let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {};
if (domainObjectConditionalStyle) {
if (this.itemId) {
domainObjectConditionalStyle[this.itemId] = undefined;
delete domainObjectConditionalStyle[this.itemId];
} else {
domainObjectConditionalStyle.conditionSetIdentifier = undefined;
delete domainObjectConditionalStyle.conditionSetIdentifier;
domainObjectConditionalStyle.styles = undefined;
delete domainObjectConditionalStyle.styles;
}
if (_.isEmpty(domainObjectConditionalStyle)) {
domainObjectConditionalStyle = undefined;
}
}
this.persist(domainObjectConditionalStyle);
},
initializeConditionalStyles() {
const backgroundColors = [{backgroundColor: 'red'},{backgroundColor: 'orange'}, {backgroundColor: 'blue'}];
this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
this.conditionalStyles.push({
conditionId: conditionConfiguration.id,
conditionName: conditionConfiguration.name,
style: backgroundColors[index]
style: Object.assign({}, this.initialStyles)
});
});
this.persist({
defaultStyle: this.defaultStyle || {backgroundColor: 'inherit'},
let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {};
let conditionalStyle = {
conditionSetIdentifier: this.conditionSetIdentifier,
styles: this.conditionalStyles
});
};
if (this.itemId) {
this.persist({
...domainObjectConditionalStyle,
[this.itemId]: conditionalStyle
});
} else {
this.persist({
...domainObjectConditionalStyle,
...conditionalStyle
});
}
});
},
findStyleByConditionId(id) {
for(let i=0, ii=this.conditionalStyles.length; i < ii; i++) {
if (this.conditionalStyles[i].conditionId === id) {
return {
index: i,
item: this.conditionalStyles[i]
};
return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id);
},
updateConditionalStyle(conditionStyle) {
let found = this.findStyleByConditionId(conditionStyle.conditionId);
if (found) {
found.style = conditionStyle.style;
let domainObjectConditionalStyle = this.domainObject.configuration.conditionalStyle || {};
if (this.itemId) {
let itemConditionalStyle = domainObjectConditionalStyle[this.itemId];
if (itemConditionalStyle) {
this.persist({
...domainObjectConditionalStyle,
[this.itemId]: {
...itemConditionalStyle,
styles: this.conditionalStyles
}
});
}
} else {
domainObjectConditionalStyle.styles = this.conditionalStyles;
this.persist(domainObjectConditionalStyle);
}
}
},
updateConditionalStyle(conditionId, style) {
let found = this.findStyleByConditionId(conditionId);
if (found) {
this.conditionalStyles[found.index].style = style;
}
this.persist(undefined);
},
persist(conditionalStyle) {
this.openmct.objects.mutate(this.domainObject, 'configuration.conditionalStyle', conditionalStyle);
}

19
src/plugins/condition/utils/styleUtils.js Normal file
View File

@ -0,0 +1,19 @@
export const getStyleProp = (key, defaultValue) => {
let styleProp = undefined;
switch(key) {
case 'fill': styleProp = {
backgroundColor: defaultValue || 'none'
};
break;
case 'stroke': styleProp = {
border: '1px solid ' + defaultValue || 'none'
};
break;
case 'color': styleProp = {
color: defaultValue || 'inherit'
};
break;
}
return styleProp;
};

14
src/plugins/displayLayout/components/BoxView.vue
View File

@ -36,6 +36,7 @@
<script>
import LayoutFrame from './LayoutFrame.vue'
import conditionalStylesMixin from '../mixins/conditionalStyles-mixin';
export default {
makeDefinition() {
@ -52,6 +53,7 @@ export default {
components: {
LayoutFrame
},
mixins: [conditionalStylesMixin],
props: {
item: {
type: Object,
@ -71,10 +73,14 @@ export default {
},
computed: {
style() {
return {
backgroundColor: this.item.fill,
border: '1px solid ' + this.item.stroke
};
if (this.itemStyle) {
return this.itemStyle;
} else {
return {
backgroundColor: this.item.fill,
border: '1px solid ' + this.item.stroke
};
}
}
},
watch: {

4
src/plugins/displayLayout/components/ImageView.vue
View File

@ -36,6 +36,7 @@
<script>
import LayoutFrame from './LayoutFrame.vue'
import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
export default {
makeDefinition(openmct, gridSize, element) {
@ -52,6 +53,7 @@ export default {
components: {
LayoutFrame
},
mixins: [conditionalStylesMixin],
props: {
item: {
type: Object,
@ -73,7 +75,7 @@ export default {
style() {
return {
backgroundImage: 'url(' + this.item.url + ')',
border: '1px solid ' + this.item.stroke
border: this.itemStyle ? this.itemStyle.border : '1px solid ' + this.item.stroke
}
}
},

12
src/plugins/displayLayout/components/LineView.vue
View File

@ -31,7 +31,7 @@
>
<line
v-bind="linePosition"
:stroke="item.stroke"
:stroke="stroke"
stroke-width="2"
/>
</svg>
@ -60,6 +60,8 @@
<script>
import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
const START_HANDLE_QUADRANTS = {
1: 'c-frame-edit__handle--sw',
2: 'c-frame-edit__handle--se',
@ -85,6 +87,7 @@ export default {
};
},
inject: ['openmct'],
mixins: [conditionalStylesMixin],
props: {
item: {
type: Object,
@ -122,6 +125,13 @@ export default {
}
return {x, y, x2, y2};
},
stroke() {
if (this.itemStyle && this.itemStyle.border) {
return this.itemStyle.border.replace('1px solid ', '');
} else {
return this.item.stroke;
}
},
style() {
let {x, y, x2, y2} = this.position;
let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);

18
src/plugins/displayLayout/components/TextView.vue
View File

@ -38,6 +38,7 @@
<script>
import LayoutFrame from './LayoutFrame.vue'
import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
export default {
makeDefinition(openmct, gridSize, element) {
@ -57,6 +58,7 @@ export default {
components: {
LayoutFrame
},
mixins: [conditionalStylesMixin],
props: {
item: {
type: Object,
@ -76,12 +78,16 @@ export default {
},
computed: {
style() {
return {
backgroundColor: this.item.fill,
borderColor: this.item.stroke,
color: this.item.color,
fontSize: this.item.size
};
if (this.itemStyle) {
return this.itemStyle;
} else {
return {
backgroundColor: this.item.fill,
borderColor: this.item.stroke,
color: this.item.color,
fontSize: this.item.size
};
}
}
},
watch: {

54
src/plugins/displayLayout/mixins/conditionalStyles-mixin.js Normal file
View File

@ -0,0 +1,54 @@
import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
export default {
inject: ['openmct'],
data() {
return {
itemStyle: this.itemStyle
}
},
mounted() {
this.domainObject = this.$parent.domainObject;
this.itemId = this.item.id;
this.conditionalStyle = this.getConditionalStyleForItem(this.domainObject.configuration.conditionalStyle);
this.initConditionalStyles();
},
destroyed() {
if (this.stopListeningConditionalStyles) {
this.stopListeningConditionalStyles();
}
},
methods: {
getConditionalStyleForItem(conditionalStyle) {
if (conditionalStyle) {
return conditionalStyle[this.itemId];
} else {
return undefined;
}
},
initConditionalStyles() {
if (!this.styleRuleManager) {
this.styleRuleManager = new StyleRuleManager(this.conditionalStyle, this.openmct);
this.styleRuleManager.on('conditionalStyleUpdated', this.updateStyle.bind(this));
} else {
this.styleRuleManager.updateConditionalStyleConfig(this.conditionalStyle);
}
if (this.stopListeningConditionalStyles) {
this.stopListeningConditionalStyles();
}
this.stopListeningConditionalStyles = this.openmct.objects.observe(this.domainObject, 'configuration.conditionalStyle', (newConditionalStyle) => {
//Updating conditional styles in the inspector view will trigger this so that the changes are reflected immediately
let newItemConditionalStyle = this.getConditionalStyleForItem(newConditionalStyle);
if (this.conditionalStyle !== newItemConditionalStyle) {
this.conditionalStyle = newItemConditionalStyle;
this.styleRuleManager.updateConditionalStyleConfig(this.conditionalStyle);
}
});
},
updateStyle(style) {
this.itemStyle = style;
}
}
};

2
src/plugins/plot/src/configuration/PlotSeries.js
View File

@ -143,7 +143,7 @@ define([
let strategy;
if (this.model.interpolate !== 'none') {
strategy = 'minMax';
strategy = 'minmax';
}
options = _.extend({}, { size: 1000, strategy, filters: this.filters }, options || {});

79
src/plugins/telemetryTable/components/table.vue
View File

@ -28,7 +28,7 @@
<button
v-if="allowExport"
class="c-button icon-download labeled"
title="Export This View's Data"
title="Export this view's data"
@click="exportAllDataAsCSV()"
>
<span class="c-button__label">Export Table Data</span>
@ -37,7 +37,7 @@
v-if="allowExport"
v-show="markedRows.length"
class="c-button icon-download labeled"
title="Export Marked Rows As CSV"
title="Export marked rows as CSV"
@click="exportMarkedDataAsCSV()"
>
<span class="c-button__label">Export Marked Rows</span>
@ -45,7 +45,7 @@
<button
v-show="markedRows.length"
class="c-button icon-x labeled"
title="Unmark All Rows"
title="Unmark all rows"
@click="unmarkAllRows()"
>
<span class="c-button__label">Unmark All Rows</span>
@ -58,7 +58,7 @@
v-if="marking.enable"
class="c-button icon-pause pause-play labeled"
:class=" paused ? 'icon-play is-paused' : 'icon-pause'"
:title="paused ? 'Continue Data Flow' : 'Pause Data Flow'"
:title="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
@click="togglePauseByButton()"
>
<span class="c-button__label">
@ -66,6 +66,29 @@
</span>
</button>
<template v-if="!isEditing">
<div
class="c-separator"
>
</div>
<button
v-if="isAutosizeEnabled"
class="c-button icon-arrows-right-left labeled"
title="Increase column widths to fit currently available data."
@click="recalculateColumnWidths"
>
<span class="c-button__label">Expand Columns</span>
</button>
<button
v-else
class="c-button icon-expand labeled"
title="Automatically size columns to fit the table into the available space."
@click="autosizeColumns"
>
<span class="c-button__label">Autosize Columns</span>
</button>
</template>
<slot name="buttons"></slot>
</div>
<!-- main controlbar end -->
@ -461,17 +484,20 @@ export default {
this.scrollW = (this.scrollable.offsetWidth - this.scrollable.clientWidth) + 1;
},
calculateColumnWidths() {
let columnWidths = {};
let totalWidth = 0;
let sizingRowEl = this.sizingTable.children[0];
let sizingCells = Array.from(sizingRowEl.children);
let headerKeys = Object.keys(this.headers);
let columnWidths = {},
totalWidth = 0,
headerKeys = Object.keys(this.headers),
sizingTableRow = this.sizingTable.children[0],
sizingCells = sizingTableRow.children;
headerKeys.forEach((headerKey, headerIndex)=>{
let cell = sizingCells[headerIndex];
let columnWidth = cell.offsetWidth;
columnWidths[headerKey] = columnWidth;
totalWidth += columnWidth;
headerKeys.forEach((headerKey, headerIndex, array)=>{
if (this.isAutosizeEnabled) {
columnWidths[headerKey] = this.sizingTable.clientWidth / array.length;
} else {
let cell = sizingCells[headerIndex];
columnWidths[headerKey] = cell.offsetWidth;
}
totalWidth += columnWidths[headerKey];
});
this.columnWidths = columnWidths;
@ -818,6 +844,31 @@ export default {
this.setHeight();
this.scrollable.scrollTop = this.userScroll;
}
},
updateWidthsAndClearSizingTable() {
this.calculateColumnWidths();
this.configuredColumnWidths = this.columnWidths;
this.visibleRows.forEach((row, i) => {
this.$set(this.sizingRows, i, undefined);
delete this.sizingRows[i];
});
},
recalculateColumnWidths() {
this.visibleRows.forEach((row,i) => {
this.$set(this.sizingRows, i, row);
});
this.configuredColumnWidths = {};
this.isAutosizeEnabled = false;
this.$nextTick()
.then(this.updateWidthsAndClearSizingTable);
},
autosizeColumns() {
this.isAutosizeEnabled = true;
this.$nextTick().then(this.calculateColumnWidths);
}
}
}

1
src/styles/_controls.scss
View File

@ -676,6 +676,7 @@ select {
.c-separator {
@include cToolbarSeparator();
height: 100%;
}
.c-row-separator {

2
src/ui/components/ObjectView.vue
View File

@ -154,6 +154,8 @@ export default {
this.openmct.objectViews.on('clearData', this.clearData);
},
show(object, viewKey, immediatelySelect, currentObjectPath) {
this.updateStyle();
if (this.unlisten) {
this.unlisten();
}

28
src/ui/inspector/StylesInspectorView.vue
View File

@ -8,6 +8,7 @@
<script>
import ConditionalStylesView from '../../plugins/condition/components/inspector/ConditionalStylesView.vue';
import Vue from 'vue';
import { getStyleProp } from "../../plugins/condition/utils/styleUtils";
export default {
inject: ['openmct'],
@ -24,16 +25,30 @@ export default {
this.openmct.selection.off('change', this.updateSelection);
},
methods: {
getStyleProperties(item) {
let styleProps = {};
Object.keys(item).forEach((key) => {
Object.assign(styleProps, getStyleProp(key, item[key]));
});
return styleProps;
},
updateSelection(selection) {
if (selection.length > 0 && selection[0].length > 0) {
let domainObject = selection[0][0].context.item;
let layoutItem;
let layoutItem = {};
let styleProps = this.getStyleProperties({
fill: 'inherit',
stroke: 'inherit',
color: 'inherit'
});
if (selection[0].length > 1) {
//If there are more than 1 items in the selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
//The second item in the selection[0] list is the container object (usually a layout)
domainObject = selection[0][0].context.item;
if (!domainObject) {
styleProps = {};
layoutItem = selection[0][0].context.layoutItem;
styleProps = this.getStyleProperties(layoutItem);
domainObject = selection[0][1].context.item;
}
}
@ -49,14 +64,19 @@ export default {
this.component = new Vue({
provide: {
openmct: this.openmct,
domainObject: domainObject,
layoutItem: layoutItem
domainObject: domainObject
},
el: viewContainer,
components: {
ConditionalStylesView
},
template: '<conditional-styles-view></conditional-styles-view>'
data() {
return {
layoutItem,
styleProps
}
},
template: '<conditional-styles-view :item-id="layoutItem.id" :initial-styles="styleProps"></conditional-styles-view>'
});
}
}