feat: Mission Status for Situational Awareness #7418

ozyx · 2024-01-26T18:17:09Z

Closes VIPEROMCT-461
Closes #7420

Describe your changes:

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

Changes address original issue?
Tests included and/or updated with changes?
Has this been smoke tested?
Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
Have you associated a milestone with this PR? Note: leave blank if unsure.
Is this a breaking change to be called out in the release notes?
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?

src/plugins/userIndicator/user-indicator.scss

ozyx · 2024-01-26T18:19:39Z

src/ui/composables/resize.js

+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* eslint-disable func-style */
+import { onBeforeUnmount, reactive } from 'vue';


Composables for ResizeObservers and window resizes

ozyx · 2024-01-26T18:20:21Z

src/ui/composables/event.js

+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} callback - The callback function to execute when the event is triggered.
+ */
+export function useEventListener(target, event, handler) {


Generic composables for EventListeners and EventEmitters-- these can be used to construct more complex composables (such as the window resize composable)

and we don't have to track on and off anymore! good stuff

ozyx · 2024-01-26T18:21:08Z

src/plugins/userIndicator/components/UserIndicator.vue

+  setup() {
+    const { windowSize } = useWindowResize();
+    const isPopupVisible = ref(false);
+    const userIndicatorRef = ref(null);
+    const popupRef = ref(null);
+
+    // eslint-disable-next-line func-style
+    const handleOutsideClick = (event) => {
+      if (isPopupVisible.value && popupRef.value && !popupRef.value.contains(event.target)) {
+        isPopupVisible.value = false;
+      }
+    };
+
+    useEventListener(document, 'click', handleOutsideClick);
+
+    return { windowSize, isPopupVisible, popupRef, userIndicatorRef };
+  },


CompositionAPI syntax here so we can use reactive refs and composables

codecov · 2024-01-26T18:22:35Z

Codecov Report

Attention: 104 lines in your changes are missing coverage. Please review.

Comparison is base (ee5081f) 54.66% compared to head (8e7d01d) 55.36%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7418      +/-   ##
==========================================
+ Coverage   54.66%   55.36%   +0.69%     
==========================================
  Files         668      671       +3     
  Lines       26800    26919     +119     
  Branches     2606     2614       +8     
==========================================
+ Hits        14651    14903     +252     
+ Misses      11433    11300     -133     
  Partials      716      716

Flag	Coverage Δ
e2e-full	`49.01% <ø> (-0.01%)`	⬇️
e2e-stable	`58.90% <27.41%> (+2.71%)`	⬆️
unit	`48.37% <20.61%> (-0.23%)`	⬇️

Files	Coverage Δ
example/exampleUser/ExampleUserProvider.js	`81.13% <100.00%> (-7.33%)`	⬇️
...s/operatorStatus/operatorStatus/OperatorStatus.vue	`1.66% <ø> (ø)`
src/plugins/userIndicator/plugin.js	`83.33% <ø> (-2.39%)`	⬇️
src/ui/composables/event.js	`46.66% <46.66%> (ø)`
src/ui/composables/resize.js	`20.00% <20.00%> (ø)`
src/api/user/StatusAPI.js	`60.78% <23.07%> (-12.90%)`	⬇️
...plugins/userIndicator/components/UserIndicator.vue	`27.94% <24.32%> (-14.92%)`	⬇️
...ns/userIndicator/components/MissionStatusPopup.vue	`0.00% <0.00%> (ø)`

... and 41 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ee5081f...8e7d01d. Read the comment docs.

ozyx · 2024-01-26T18:22:35Z

src/plugins/userIndicator/components/UserIndicator.vue

+  <Teleport to="body">
+    <div v-show="isPopupVisible" ref="popupRef" class="c-user-control-panel" :style="popupStyle">
+      <MissionStatusPopup v-show="canSetMissionStatus" @dismiss="togglePopup" />
+    </div>
+  </Teleport>


Eventually this logic can be made more generic and move into some kind of higher-order function that can apply auto-positioning popups to whatever component we pass in

charlesh88 · 2024-01-26T21:39:07Z

Todo

Add a "Control Panel" button to the user indicator in the same way that it's included in other indicators. Clicking the button should then display the control panel, rather than clicking the indicator itself.

- Styling and markup for mission status control panel. - Tweaks and additions to some common style elements.

scottbell

Looking good @ozyx

src/plugins/userIndicator/components/MissionStatusPopup.vue

scottbell · 2024-01-29T19:09:23Z

src/plugins/userIndicator/components/UserIndicator.vue

  inject: ['openmct'],
+  inheritAttrs: false,


fragments!!

scottbell · 2024-01-29T19:13:47Z

src/ui/composables/event.js

+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} callback - The callback function to execute when the event is triggered.
+ */
+export function useEventListener(target, event, handler) {


and we don't have to track on and off anymore! good stuff

shefalijoshi

Still working through the .vue popup changes. Will get back to this soon.

src/api/user/StatusAPI.js

src/plugins/userIndicator/plugin.js

shefalijoshi

It appears that the vue changes are more of a stub than actual changes. Will come back to this when it's out of draft.

src/plugins/userIndicator/components/MissionStatusPopup.vue

- These tests are going to be wonky since they depend on the View. Any unit tests depending on Vue / the View will become increasingly volatile over time as we migrate more of the app into the main Vue app. Since these LOC are already covered by e2e, I'm going to remove them. We will need to move towards a more component / Vue-friendly testing framework to stabilize all of this.

shefalijoshi

Some small changes, but looks good overall

src/api/user/UserAPISpec.js

src/ui/composables/event.js

src/plugins/userIndicator/components/UserIndicator.vue

src/plugins/userIndicator/components/MissionStatusPopup.vue

shefalijoshi · 2024-01-31T05:35:06Z

Noticed a popup positioning issue while testing:
On loading Open MCT, there were no notifications (could also get to this state by clearing all notifications) and the popup appears like this.

Now change the status for any mission action.
You should now have the Notification Indicator showing and the User Indicator bumped to the left like this:

The popup no longer stays aligned with the User Indicator.

shefalijoshi

Added some notes from testing plus a couple other finds.

src/api/user/StatusAPI.js

shefalijoshi · 2024-01-31T05:42:28Z

src/plugins/userIndicator/components/MissionStatusPopup.vue

+
+    try {
+      // Listen for missionActionStatusChange events
+      useEventEmitter(openmct.user.status, 'missionActionStatusChange', ({ action, status }) => {


The handler parameter signature does not match the what is emitted by the StatusAPI here:
https://github.com/nasa/openmct/pull/7418/files#diff-de4973d1b097ba7bca4bd6b61530a0edee5925fd20eb9fb537a1bd133d474119R348

well, it works

No it doesn't. There's a console error thrown and if you change the mission status in one browser window I don't see it reflected in a different window.

I'm still seeing this issue testing locally. Will check on the banner deployment and resolve if it's OK

ozyx · 2024-01-31T18:11:52Z

Noticed a popup positioning issue while testing: On loading Open MCT, there were no notifications (could also get to this state by clearing all notifications) and the popup appears like this.

Now change the status for any mission action. You should now have the Notification Indicator showing and the User Indicator bumped to the left like this:
The popup no longer stays aligned with the User Indicator.

Extracted and created issue #7444

shefalijoshi · 2024-01-31T18:48:03Z

src/plugins/userIndicator/components/MissionStatusPopup.vue

+
+    try {
+      // Listen for missionActionStatusChange events
+      useEventEmitter(openmct.user.status, 'missionActionStatusChange', ({ action, status }) => {


No it doesn't. There's a console error thrown and if you change the mission status in one browser window I don't see it reflected in a different window.

src/plugins/userIndicator/components/MissionStatusPopup.vue

shefalijoshi · 2024-01-31T20:48:59Z

Just one bug remains that could be a user/local testing issue.
#7418 (comment)

The rest looks good!

shefalijoshi

Needs tests (probably create an issue for this). Approving with caveats.

ozyx added 7 commits January 24, 2024 13:12

refactor: UserIndicator use vue component directly

8040d1d

style(WIP): filler styles for user-indicator

5984315

feat(WIP): working on mission status indicators

0d1a6f9

feat: support mission statuses

ebc67eb

feat(WIP): can display mission statuses now

f11e4aa

feat(WIP): add composables and dynamically calculate popup position

458b282

feat(WIP): dismissible popup, use moar compositionAPI

c24f310

ozyx added the type:feature Feature. Required intentional design label Jan 26, 2024

ozyx added this to the Target:4.0.0 milestone Jan 26, 2024

ozyx requested review from akhenry, shefalijoshi and scottbell January 26, 2024 18:17

ozyx commented Jan 26, 2024

View reviewed changes

src/plugins/userIndicator/user-indicator.scss Show resolved Hide resolved

ozyx commented Jan 26, 2024

View reviewed changes

charlesh88 mentioned this pull request Jan 26, 2024

Add Mission Status user indicator control panel #7420

Closed

charlesh88 and others added 2 commits January 26, 2024 14:18

Closes #7420

10750f3

- Styling and markup for mission status control panel. - Tweaks and additions to some common style elements.

feat: set/unset mission status for role

7097101

scottbell reviewed Jan 29, 2024

View reviewed changes

shefalijoshi requested changes Jan 29, 2024

View reviewed changes

src/api/user/StatusAPI.js Outdated Show resolved Hide resolved

src/api/user/StatusAPI.js Outdated Show resolved Hide resolved

src/plugins/userIndicator/plugin.js Show resolved Hide resolved

shefalijoshi requested changes Jan 29, 2024

View reviewed changes

src/plugins/userIndicator/components/MissionStatusPopup.vue Outdated Show resolved Hide resolved

src/plugins/userIndicator/components/MissionStatusPopup.vue Outdated Show resolved Hide resolved

src/plugins/userIndicator/components/MissionStatusPopup.vue Outdated Show resolved Hide resolved

ozyx added 5 commits January 29, 2024 14:43

refactor: rename some functions

efd5466

feat: more renaming, get mission role statuses working

1c4b611

refactor: more method renaming

eece4d0

fix: remove dupe method

d0c9d8b

feat: hook up event listeners

4047014

ozyx added 2 commits January 30, 2024 16:12

docs: add documentation

b44a5b2

shefalijoshi requested changes Jan 31, 2024

View reviewed changes

ozyx and others added 2 commits January 31, 2024 08:50

Merge branch 'master' into mission-status-situational-awareness

8b52e67

refactor: rename

8215d6e

ozyx mentioned this pull request Jan 31, 2024

Mission Status popup moves if we go from 0 to >0 notifications while it's open #7444

Open

ozyx requested a review from shefalijoshi January 31, 2024 18:12

akhenry approved these changes Jan 31, 2024

View reviewed changes

fix: a comma

ec50a74

ozyx added the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 31, 2024

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 31, 2024

shefalijoshi requested changes Jan 31, 2024

View reviewed changes

shefalijoshi reviewed Jan 31, 2024

View reviewed changes

src/plugins/userIndicator/components/MissionStatusPopup.vue Show resolved Hide resolved

ozyx requested a review from shefalijoshi January 31, 2024 20:05

refactor: a word

a72912d

shefalijoshi approved these changes Jan 31, 2024

View reviewed changes

ozyx added the pr:e2e:flakefinder Runs the tests 10 times label Feb 1, 2024

github-actions bot removed the pr:e2e:flakefinder Runs the tests 10 times label Feb 1, 2024

ozyx and others added 3 commits February 1, 2024 15:38

fix: emit parameter format

26835c3

fix: correct emit for missionStatusActionChange

ed6e7e8

Merge branch 'master' into mission-status-situational-awareness

8e7d01d

unlikelyzero added the pr:e2e:couchdb npm run test:e2e:couchdb label Feb 2, 2024

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Feb 2, 2024

unlikelyzero enabled auto-merge (squash) February 2, 2024 22:49

unlikelyzero merged commit 82fa4c1 into master Feb 2, 2024
19 of 21 checks passed

unlikelyzero deleted the mission-status-situational-awareness branch February 2, 2024 22:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Mission Status for Situational Awareness #7418

feat: Mission Status for Situational Awareness #7418

ozyx commented Jan 26, 2024 •

edited by shefalijoshi

Loading

ozyx Jan 26, 2024

ozyx Jan 26, 2024

scottbell Jan 29, 2024

ozyx Jan 26, 2024

codecov bot commented Jan 26, 2024 •

edited

Loading

ozyx Jan 26, 2024

charlesh88 commented Jan 26, 2024 •

edited

Loading

scottbell left a comment

scottbell Jan 29, 2024

ozyx Jan 30, 2024

scottbell Jan 29, 2024

shefalijoshi left a comment

shefalijoshi left a comment

shefalijoshi left a comment

shefalijoshi commented Jan 31, 2024

shefalijoshi left a comment

shefalijoshi Jan 31, 2024 •

edited

Loading

ozyx Jan 31, 2024

shefalijoshi Jan 31, 2024

shefalijoshi Jan 31, 2024

ozyx commented Jan 31, 2024

shefalijoshi Jan 31, 2024

shefalijoshi commented Jan 31, 2024

shefalijoshi left a comment

feat: Mission Status for Situational Awareness #7418

feat: Mission Status for Situational Awareness #7418

Conversation

ozyx commented Jan 26, 2024 • edited by shefalijoshi Loading

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jan 26, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

charlesh88 commented Jan 26, 2024 • edited Loading

Todo

scottbell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shefalijoshi left a comment

Choose a reason for hiding this comment

shefalijoshi left a comment

Choose a reason for hiding this comment

shefalijoshi left a comment

Choose a reason for hiding this comment

shefalijoshi commented Jan 31, 2024

shefalijoshi left a comment

Choose a reason for hiding this comment

shefalijoshi Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ozyx commented Jan 31, 2024

Choose a reason for hiding this comment

shefalijoshi commented Jan 31, 2024

shefalijoshi left a comment

Choose a reason for hiding this comment

ozyx commented Jan 26, 2024 •

edited by shefalijoshi

Loading

codecov bot commented Jan 26, 2024 •

edited

Loading

charlesh88 commented Jan 26, 2024 •

edited

Loading

shefalijoshi Jan 31, 2024 •

edited

Loading