From 944634d7594b25000b3e6e4480cd12fe253f5dcb Mon Sep 17 00:00:00 2001 From: Scott Bell <scott@traclabs.com> Date: Tue, 10 Dec 2024 18:21:38 +0100 Subject: [PATCH] adding inspector --- .../events/EventInspectorViewProvider.js | 58 +++++++++++++++ .../events/components/EventInspectorView.vue | 73 +++++++++++++++++++ src/plugins/events/plugin.js | 2 + 3 files changed, 133 insertions(+) create mode 100644 src/plugins/events/EventInspectorViewProvider.js create mode 100644 src/plugins/events/components/EventInspectorView.vue diff --git a/src/plugins/events/EventInspectorViewProvider.js b/src/plugins/events/EventInspectorViewProvider.js new file mode 100644 index 0000000000..7520407140 --- /dev/null +++ b/src/plugins/events/EventInspectorViewProvider.js @@ -0,0 +1,58 @@ +import mount from 'utils/mount'; + +import EventInspectorView from './components/EventInspectorView.vue'; + +export default function EventInspectorViewProvider(openmct) { + const INSPECTOR_KEY = 'telemetry.events.inspector'; + return { + key: INSPECTOR_KEY, + name: 'Event', + canView: function (selection) { + if ( + !Array.isArray(selection) || + selection.length === 0 || + !Array.isArray(selection[0]) || + selection[0].length === 0 + ) { + return false; + } + let object = selection[0][0].context?.item; + + return object && object.type === INSPECTOR_KEY; + }, + view: function (selection) { + let _destroy = null; + + return { + show: function (element) { + const { destroy } = mount( + { + el: element, + components: { + EventInspectorView + }, + provide: { + openmct, + domainObject: selection[0][0].context.item + }, + template: '<event-inspector></event-inspector>' + }, + { + app: openmct.app, + element + } + ); + _destroy = destroy; + }, + priority: function () { + return openmct.priority.HIGH + 1; + }, + destroy: function () { + if (_destroy) { + _destroy(); + } + } + }; + } + }; +} diff --git a/src/plugins/events/components/EventInspectorView.vue b/src/plugins/events/components/EventInspectorView.vue new file mode 100644 index 0000000000..e7c2ca5722 --- /dev/null +++ b/src/plugins/events/components/EventInspectorView.vue @@ -0,0 +1,73 @@ +<!-- + Open MCT, Copyright (c) 2014-2024, 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 class="c-timelist-properties"> + <div class="c-inspect-properties"> + <ul class="c-inspect-properties__section"> + <div class="c-inspect-properties_header" title="'Placeholder'">Placeholder</div> + <li class="c-inspect-properties__row"> + <div class="c-inspect-properties__label" title="Foo">Foo</div> + <div class="c-inspect-properties__value"> + <select + v-if="canEdit" + v-model="isExpanded" + aria-label="Display Style" + @change="updateExpandedView" + > + <option :key="'expanded-view-option-enabled'" :value="true">Expanded</option> + <option :key="'expanded-view-option-disabled'" :value="false">Compact</option> + </select> + <span>placeholder</span> + </div> + </li> + </ul> + </div> + </div> +</template> + +<script> +export default { + inject: ['openmct', 'domainObject'], + data() { + return { + isEditing: this.openmct.editor.isEditing() + }; + }, + computed: { + canEdit() { + return this.isEditing && !this.domainObject.locked; + } + }, + mounted() { + this.openmct.editor.on('isEditing', this.setEditState); + }, + beforeUnmount() { + this.openmct.editor.off('isEditing', this.setEditState); + }, + methods: { + setEditState(isEditing) { + this.isEditing = isEditing; + } + } +}; +</script> diff --git a/src/plugins/events/plugin.js b/src/plugins/events/plugin.js index 1db5fe7cac..46deaabd54 100644 --- a/src/plugins/events/plugin.js +++ b/src/plugins/events/plugin.js @@ -20,10 +20,12 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +import EventInspectorViewProvider from './EventInspectorViewProvider.js'; import EventTimelineViewProvider from './EventTimelineViewProvider.js'; export default function (options) { return function install(openmct) { openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct)); + openmct.objectViews.addProvider(new EventInspectorViewProvider(openmct)); }; }