From 4c9c084eec3ffa7ec42ca2c810d1b8bf85e54633 Mon Sep 17 00:00:00 2001
From: Mariusz Rosinski <mariusz.rosinski@gmail.com>
Date: Thu, 14 Oct 2021 02:02:47 +0200
Subject: [PATCH] #4197 - make time conductor history more readable (#4287)

---
 .../commonUI/formats/src/UTCTimeFormat.js     | 35 ++++++++++------
 .../timeConductor/ConductorHistory.vue        |  6 +--
 src/utils/duration.js                         | 41 +++++++------------
 3 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/platform/commonUI/formats/src/UTCTimeFormat.js b/platform/commonUI/formats/src/UTCTimeFormat.js
index bbeba5780c..4ec588a361 100644
--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ b/platform/commonUI/formats/src/UTCTimeFormat.js
@@ -25,15 +25,14 @@ define([
 ], function (
     moment
 ) {
-
-    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS",
-        DATE_FORMATS = [
-            DATE_FORMAT,
-            DATE_FORMAT + "Z",
-            "YYYY-MM-DD HH:mm:ss",
-            "YYYY-MM-DD HH:mm",
-            "YYYY-MM-DD"
-        ];
+    const DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS";
+    const DATE_FORMATS = [
+        DATE_FORMAT,
+        DATE_FORMAT + "Z",
+        "YYYY-MM-DD HH:mm:ss",
+        "YYYY-MM-DD HH:mm",
+        "YYYY-MM-DD"
+    ];
 
     /**
      * @typedef Scale
@@ -53,15 +52,27 @@ define([
         this.key = "utc";
     }
 
+    /**
+     * @param {string} formatString
+     * @returns the value of formatString if the value is a string type and exists in the DATE_FORMATS array; otherwise the DATE_FORMAT value.
+     */
+    function validateFormatString(formatString) {
+        return typeof formatString === 'string' && DATE_FORMATS.includes(formatString) ? formatString : DATE_FORMAT;
+    }
+
     /**
      * @param {number} value The value to format.
-     * @returns {string} the formatted date(s). If multiple values were requested, then an array of
+     * @param {string} formatString The string format to format. Default "YYYY-MM-DD HH:mm:ss.SSS" + "Z"
+     * @returns {string} the formatted date(s) according to the proper parameter of formatString or the default value of "YYYY-MM-DD HH:mm:ss.SSS" + "Z".
+     * If multiple values were requested, then an array of
      * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
      * in the array.
      */
-    UTCTimeFormat.prototype.format = function (value) {
+    UTCTimeFormat.prototype.format = function (value, formatString) {
         if (value !== undefined) {
-            return moment.utc(value).format(DATE_FORMAT) + "Z";
+            const format = validateFormatString(formatString);
+
+            return moment.utc(value).format(format) + (formatString ? '' : 'Z');
         } else {
             return value;
         }
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index f98407ec46..79e23d57c3 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -40,7 +40,7 @@ const LOCAL_STORAGE_HISTORY_KEY_FIXED = 'tcHistory';
 const LOCAL_STORAGE_HISTORY_KEY_REALTIME = 'tcHistoryRealtime';
 const DEFAULT_RECORDS = 10;
 
-import { getDuration } from "utils/duration";
+import { millisecondsToDHMS } from "utils/duration";
 
 export default {
     inject: ['openmct', 'configuration'],
@@ -142,7 +142,7 @@ export default {
                 let description = `${startTime} - ${this.formatTime(timespan.end)}`;
 
                 if (this.timeSystem.isUTCBased && !this.openmct.time.clock()) {
-                    name = `${startTime} ${getDuration(timespan.end - timespan.start)}`;
+                    name = `${startTime} ${millisecondsToDHMS(timespan.end - timespan.start)}`;
                 } else {
                     name = description;
                 }
@@ -263,7 +263,7 @@ export default {
                 format: format
             }).formatter;
 
-            return (isNegativeOffset ? '-' : '') + formatter.format(time);
+            return (isNegativeOffset ? '-' : '') + formatter.format(time, 'YYYY-MM-DD HH:mm:ss');
         },
         showHistoryMenu() {
             const elementBoundingClientRect = this.$refs.historyButton.getBoundingClientRect();
diff --git a/src/utils/duration.js b/src/utils/duration.js
index e69dd1dfb1..1cbf54c707 100644
--- a/src/utils/duration.js
+++ b/src/utils/duration.js
@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const ONE_MINUTE = 60 * 1000;
+const ONE_SECOND = 1000;
+const ONE_MINUTE = 60 * ONE_SECOND;
 const ONE_HOUR = ONE_MINUTE * 60;
 const ONE_DAY = ONE_HOUR * 24;
 
@@ -39,34 +40,20 @@ function toDoubleDigits(num) {
     }
 }
 
-export function getDuration(numericDuration) {
-    let result;
-    let age;
+function addTimeSuffix(value, suffix) {
+    return typeof value === 'number' && value > 0 ? `${value + suffix}` : '';
+}
 
-    if (numericDuration > ONE_DAY - 1) {
-        age = normalizeAge((numericDuration / ONE_DAY)).toFixed(2);
-        result = `+ ${age} day`;
+export function millisecondsToDHMS(numericDuration) {
+    const ms = numericDuration || 0;
+    const dhms = [
+        addTimeSuffix(Math.floor(normalizeAge(ms / ONE_DAY)), 'd'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_DAY) / ONE_HOUR)), 'h'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_HOUR) / ONE_MINUTE)), 'm'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_MINUTE) / ONE_SECOND)), 's')
+    ].filter(Boolean).join(' ');
 
-        if (age !== 1) {
-            result += 's';
-        }
-    } else if (numericDuration > ONE_HOUR - 1) {
-        age = normalizeAge((numericDuration / ONE_HOUR).toFixed(2));
-        result = `+ ${age} hour`;
-
-        if (age !== 1) {
-            result += 's';
-        }
-    } else {
-        age = normalizeAge((numericDuration / ONE_MINUTE).toFixed(2));
-        result = `+ ${age} min`;
-
-        if (age !== 1) {
-            result += 's';
-        }
-    }
-
-    return result;
+    return `${ dhms ? '+' : ''} ${dhms}`;
 }
 
 export function getPreciseDuration(numericDuration) {