From 27c30132d23421de79a271b737f98c53f59bd065 Mon Sep 17 00:00:00 2001
From: Mariusz Rosinski <mariusz.rosinski@gmail.com>
Date: Fri, 30 Sep 2022 19:16:35 +0200
Subject: [PATCH] 4386 - In time conductor history, show them on hover if only
 milliseconds have changed - tooltip (#5783)

* 4386 - In time conductor history, show them on hover if only milliseconds have changed

* [e2e] Add quick test

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
---
 .../timeConductor/timeConductor.e2e.spec.js   | 20 +++++++++++++++++++
 .../timeConductor/ConductorHistory.vue        | 10 ++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
index ea50e85301..645c4fc915 100644
--- a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
+++ b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
@@ -168,3 +168,23 @@ test.describe('Time conductor input fields real-time mode', () => {
         // select an option and verify the offsets are updated correctly
     });
 });
+
+test.describe('Time Conductor History', () => {
+    test("shows milliseconds on hover @unstable", async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/4386'
+        });
+        // Navigate to Open MCT in Fixed Time Mode, UTC Time System
+        // with startBound at 2022-01-01 00:00:00.000Z
+        // and endBound at 2022-01-01 00:00:00.200Z
+        await page.goto('./#/browse/mine?view=grid&tc.mode=fixed&tc.startBound=1640995200000&tc.endBound=1640995200200&tc.timeSystem=utc&hideInspector=true', { waitUntil: 'networkidle' });
+        await page.locator("[aria-label='Time Conductor History']").hover({ trial: true});
+        await page.locator("[aria-label='Time Conductor History']").click();
+
+        // Validate history item format
+        const historyItem = page.locator('text="2022-01-01 00:00:00 + 200ms"');
+        await expect(historyItem).toBeEnabled();
+        await expect(historyItem).toHaveAttribute('title', '2022-01-01 00:00:00.000 - 2022-01-01 00:00:00.200');
+    });
+});
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index 8df1925e85..8fe3b980e6 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -144,10 +144,11 @@ export default {
             this.initializeHistoryIfNoHistory();
         },
         getHistoryMenuItems() {
+            const descriptionDateFormat = 'YYYY-MM-DD HH:mm:ss.SSS';
             const history = this.historyForCurrentTimeSystem.map(timespan => {
                 let name;
-                let startTime = this.formatTime(timespan.start);
-                let description = `${startTime} - ${this.formatTime(timespan.end)}`;
+                const startTime = this.formatTime(timespan.start);
+                const description = `${this.formatTime(timespan.start, descriptionDateFormat)} - ${this.formatTime(timespan.end, descriptionDateFormat)}`;
 
                 if (this.timeSystem.isUTCBased && !this.openmct.time.clock()) {
                     name = `${startTime} ${millisecondsToDHMS(timespan.end - timespan.start)}`;
@@ -253,7 +254,7 @@ export default {
 
             return maxRecordsLength;
         },
-        formatTime(time) {
+        formatTime(time, utcDateFormat) {
             let format = this.timeSystem.timeFormat;
             let isNegativeOffset = false;
 
@@ -274,7 +275,8 @@ export default {
             let formattedDate;
 
             if (formatter instanceof UTCTimeFormat) {
-                formattedDate = formatter.format(time, formatter.DATE_FORMATS.PRECISION_SECONDS);
+                const formatString = formatter.isValidFormatString(utcDateFormat) ? utcDateFormat : formatter.DATE_FORMATS.PRECISION_SECONDS;
+                formattedDate = formatter.format(time, formatString);
             } else {
                 formattedDate = formatter.format(time);
             }