mirror of
https://github.com/nasa/openmct.git
synced 2025-03-15 16:45:19 +00:00
Add activity state inspector option
This commit is contained in:
parent
7003f00707
commit
92a30a3485
@ -99,7 +99,13 @@ export default class ObjectAPI {
|
||||
this.cache = {};
|
||||
this.interceptorRegistry = new InterceptorRegistry();
|
||||
|
||||
this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'restricted-notebook', 'plan', 'annotation'];
|
||||
this.SYNCHRONIZED_OBJECT_TYPES = [
|
||||
'notebook',
|
||||
'restricted-notebook',
|
||||
'plan',
|
||||
'annotation',
|
||||
'activity-states'
|
||||
];
|
||||
|
||||
this.errors = {
|
||||
Conflict: ConflictError
|
||||
|
@ -488,6 +488,7 @@ export default {
|
||||
},
|
||||
start: rawActivity.start,
|
||||
end: rawActivity.end,
|
||||
description: rawActivity.description,
|
||||
row: currentRow,
|
||||
textLines: textLines,
|
||||
textStart: textStart,
|
||||
|
@ -20,21 +20,39 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div class="c-inspector__properties c-inspect-properties">
|
||||
<plan-activity-view
|
||||
<div>
|
||||
<plan-activity-time-view
|
||||
v-for="activity in activities"
|
||||
:key="activity.id"
|
||||
:key="activity.uuid"
|
||||
class="c-inspector__properties c-inspect-properties"
|
||||
:activity="activity"
|
||||
:heading="heading"
|
||||
/>
|
||||
<plan-activity-properties-view
|
||||
v-for="activity in activities"
|
||||
:key="activity.uuid"
|
||||
:heading="'Properties'"
|
||||
class="c-inspector__properties c-inspect-properties"
|
||||
:activity="activity"
|
||||
></plan-activity-properties-view>
|
||||
<plan-activity-status-view
|
||||
v-if="activities.length === 1"
|
||||
:key="activities[0].uuid"
|
||||
class="c-inspector__properties c-inspect-properties"
|
||||
:activity="activities[0]"
|
||||
:execution-state="persistedActivityStates[activities[0].uuid]"
|
||||
:heading="'Activity Status'"
|
||||
@updateActivityState="persistedActivityState"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPreciseDuration } from 'utils/duration';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
import PlanActivityView from './PlanActivityView.vue';
|
||||
import PlanActivityPropertiesView from './PlanActivityPropertiesView.vue';
|
||||
import PlanActivityStatusView from './PlanActivityStatusView.vue';
|
||||
import PlanActivityTimeView from './PlanActivityTimeView.vue';
|
||||
|
||||
const propertyLabels = {
|
||||
start: 'Start DateTime',
|
||||
@ -44,23 +62,28 @@ const propertyLabels = {
|
||||
latestEnd: 'Latest End',
|
||||
gap: 'Gap',
|
||||
overlap: 'Overlap',
|
||||
totalTime: 'Total Time'
|
||||
totalTime: 'Total Time',
|
||||
description: 'Description'
|
||||
};
|
||||
export default {
|
||||
components: {
|
||||
PlanActivityView
|
||||
PlanActivityTimeView,
|
||||
PlanActivityPropertiesView,
|
||||
PlanActivityStatusView
|
||||
},
|
||||
inject: ['openmct', 'selection'],
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
activities: [],
|
||||
persistedActivityStates: {},
|
||||
heading: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setFormatters();
|
||||
this.getPlanData(this.selection);
|
||||
this.getActivityStates();
|
||||
this.getActivities();
|
||||
this.openmct.selection.on('change', this.updateSelection);
|
||||
this.openmct.time.on('timeSystem', this.setFormatters);
|
||||
@ -68,8 +91,23 @@ export default {
|
||||
beforeUnmount() {
|
||||
this.openmct.selection.off('change', this.updateSelection);
|
||||
this.openmct.time.off('timeSystem', this.setFormatters);
|
||||
if (this.stopObservingActivityStatesObject) {
|
||||
this.stopObservingActivityStatesObject();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getActivityStates() {
|
||||
this.activityStatesObject = await this.openmct.objects.get('activity-states');
|
||||
this.setActivityStates();
|
||||
this.stopObservingActivityStatesObject = this.openmct.objects.observe(
|
||||
this.activityStatesObject,
|
||||
'*',
|
||||
this.setActivityStates
|
||||
);
|
||||
},
|
||||
setActivityStates() {
|
||||
this.persistedActivityStates = { ...this.activityStatesObject.activities };
|
||||
},
|
||||
setFormatters() {
|
||||
let timeSystem = this.openmct.time.timeSystem();
|
||||
this.timeFormatter = this.openmct.telemetry.getValueFormatter({
|
||||
@ -104,20 +142,30 @@ export default {
|
||||
this.activities.splice(0);
|
||||
this.selectedActivities.forEach((selectedActivity, index) => {
|
||||
const activity = {
|
||||
id: uuid(),
|
||||
start: {
|
||||
label: propertyLabels.start,
|
||||
value: this.formatTime(selectedActivity.start)
|
||||
},
|
||||
end: {
|
||||
label: propertyLabels.end,
|
||||
value: this.formatTime(selectedActivity.end)
|
||||
},
|
||||
duration: {
|
||||
label: propertyLabels.duration,
|
||||
value: this.formatDuration(selectedActivity.end - selectedActivity.start)
|
||||
uuid: selectedActivity.uuid ?? selectedActivity.name,
|
||||
timeProperties: {
|
||||
start: {
|
||||
label: propertyLabels.start,
|
||||
value: this.formatTime(selectedActivity.start)
|
||||
},
|
||||
end: {
|
||||
label: propertyLabels.end,
|
||||
value: this.formatTime(selectedActivity.end)
|
||||
},
|
||||
duration: {
|
||||
label: propertyLabels.duration,
|
||||
value: this.formatDuration(selectedActivity.end - selectedActivity.start)
|
||||
}
|
||||
}
|
||||
};
|
||||
if (selectedActivity.description) {
|
||||
activity.metadata = {
|
||||
description: {
|
||||
label: propertyLabels.description,
|
||||
value: selectedActivity.description
|
||||
}
|
||||
};
|
||||
}
|
||||
this.activities[index] = activity;
|
||||
});
|
||||
},
|
||||
@ -166,30 +214,31 @@ export default {
|
||||
let totalTime = latestEnd - earliestStart;
|
||||
|
||||
const activity = {
|
||||
id: uuid(),
|
||||
earliestStart: {
|
||||
label: propertyLabels.earliestStart,
|
||||
value: this.formatTime(earliestStart)
|
||||
},
|
||||
latestEnd: {
|
||||
label: propertyLabels.latestEnd,
|
||||
value: this.formatTime(latestEnd)
|
||||
timeProperties: {
|
||||
earliestStart: {
|
||||
label: propertyLabels.earliestStart,
|
||||
value: this.formatTime(earliestStart)
|
||||
},
|
||||
latestEnd: {
|
||||
label: propertyLabels.latestEnd,
|
||||
value: this.formatTime(latestEnd)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (gap) {
|
||||
activity.gap = {
|
||||
activity.timeProperties.gap = {
|
||||
label: propertyLabels.gap,
|
||||
value: this.formatDuration(gap)
|
||||
};
|
||||
} else if (overlap) {
|
||||
activity.overlap = {
|
||||
activity.timeProperties.overlap = {
|
||||
label: propertyLabels.overlap,
|
||||
value: this.formatDuration(overlap)
|
||||
};
|
||||
}
|
||||
|
||||
activity.totalTime = {
|
||||
activity.timeProperties.totalTime = {
|
||||
label: propertyLabels.totalTime,
|
||||
value: this.formatDuration(totalTime)
|
||||
};
|
||||
@ -201,6 +250,11 @@ export default {
|
||||
},
|
||||
formatTime(time) {
|
||||
return this.timeFormatter.format(time);
|
||||
},
|
||||
persistedActivityState(data) {
|
||||
const { key, executionState } = data;
|
||||
const activitiesPath = `activities.${key}`;
|
||||
this.openmct.objects.mutate(this.activityStatesObject, activitiesPath, executionState);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2023, 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>
|
||||
<div>
|
||||
<div v-if="properties.length" class="u-contents">
|
||||
<div class="c-inspect-properties__header">{{ heading }}</div>
|
||||
<ul v-for="property in properties" :key="property.id" class="c-inspect-properties__section">
|
||||
<activity-property :label="property.label" :value="property.value" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
import ActivityProperty from './ActivityProperty.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActivityProperty
|
||||
},
|
||||
props: {
|
||||
activity: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
heading: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
properties: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setProperties();
|
||||
},
|
||||
methods: {
|
||||
setProperties() {
|
||||
if (!this.activity.metadata) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(this.activity.metadata).forEach((key) => {
|
||||
if (this.activity.metadata[key].label) {
|
||||
const label = this.activity.metadata[key].label;
|
||||
const value = String(this.activity.metadata[key].value);
|
||||
|
||||
this.properties[this.properties.length] = {
|
||||
id: uuid(),
|
||||
label,
|
||||
value
|
||||
};
|
||||
}
|
||||
});
|
||||
console.log(this.activity.metadata, this.properties);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
114
src/plugins/plan/inspector/components/PlanActivityStatusView.vue
Normal file
114
src/plugins/plan/inspector/components/PlanActivityStatusView.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2023, 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>
|
||||
<div>
|
||||
<div class="u-contents">
|
||||
<div class="c-inspect-properties__header">{{ heading }}</div>
|
||||
<form name="activityStatus">
|
||||
<select v-model="currentStatusKey" name="setActivityStatus" @change="changeActivityStatus">
|
||||
<option v-for="status in activityStates" :key="status.key" :value="status.label">
|
||||
{{ status.label }}
|
||||
</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const activityStates = [
|
||||
{
|
||||
key: '',
|
||||
label: '- Select Activity Status -'
|
||||
},
|
||||
{
|
||||
key: 'active',
|
||||
label: 'In progress'
|
||||
},
|
||||
{
|
||||
key: 'completed',
|
||||
label: 'Completed'
|
||||
},
|
||||
{
|
||||
key: 'aborted',
|
||||
label: 'Aborted'
|
||||
},
|
||||
{
|
||||
key: 'cancelled',
|
||||
label: 'Cancelled'
|
||||
},
|
||||
{
|
||||
key: 'notStarted',
|
||||
label: 'Not started'
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
activity: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
executionState: {
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['updateActivityState'],
|
||||
data() {
|
||||
return {
|
||||
activityStates: activityStates,
|
||||
currentStatusKey: activityStates[0].key
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
executionState() {
|
||||
this.setActivityStatus();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setActivityStatus();
|
||||
},
|
||||
methods: {
|
||||
setActivityStatus() {
|
||||
this.currentStatusKey = this.executionState;
|
||||
},
|
||||
changeActivityStatus() {
|
||||
if (this.currentStatusKey === '') {
|
||||
return;
|
||||
}
|
||||
this.activity.executionState = this.currentStatusKey;
|
||||
this.$emit('updateActivityState', {
|
||||
key: this.activity.uuid,
|
||||
executionState: this.currentStatusKey
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -21,17 +21,19 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="timeProperties.length" class="u-contents">
|
||||
<div class="c-inspect-properties__header">
|
||||
{{ heading }}
|
||||
<div>
|
||||
<div v-if="timeProperties.length" class="u-contents">
|
||||
<div class="c-inspect-properties__header">
|
||||
{{ heading }}
|
||||
</div>
|
||||
<ul
|
||||
v-for="timeProperty in timeProperties"
|
||||
:key="timeProperty.id"
|
||||
class="c-inspect-properties__section"
|
||||
>
|
||||
<activity-property :label="timeProperty.label" :value="timeProperty.value" />
|
||||
</ul>
|
||||
</div>
|
||||
<ul
|
||||
v-for="timeProperty in timeProperties"
|
||||
:key="timeProperty.id"
|
||||
class="c-inspect-properties__section"
|
||||
>
|
||||
<activity-property :label="timeProperty.label" :value="timeProperty.value" />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -64,10 +66,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setProperties() {
|
||||
Object.keys(this.activity).forEach((key) => {
|
||||
if (this.activity[key].label) {
|
||||
const label = this.activity[key].label;
|
||||
const value = String(this.activity[key].value);
|
||||
Object.keys(this.activity.timeProperties).forEach((key) => {
|
||||
if (this.activity.timeProperties[key].label) {
|
||||
const label = this.activity.timeProperties[key].label;
|
||||
const value = String(this.activity.timeProperties[key].value);
|
||||
|
||||
this.timeProperties[this.timeProperties.length] = {
|
||||
id: uuid(),
|
Loading…
x
Reference in New Issue
Block a user