Changing timeline to show UTC and adding local time to tooltip (#3523)

* Changing timeline to show UTC and adding local time to tooltip

Author: whitdog47

src/dispatch/static/dispatch/src/case/TimelineTab.vue

@@ -12,6 +12,7 @@
       </v-btn>
     </v-row>
     <v-timeline v-if="events && events.length" dense clipped>
+      <v-col class="text-right caption">(times in UTC)</v-col>
       <v-timeline-item
         v-for="event in sortedEvents"
         :key="event.id"
@@ -40,7 +41,7 @@
             <v-tooltip bottom>
               <template v-slot:activator="{ on, attrs }">
                 <span v-bind="attrs" v-on="on" class="wavy-underline">{{
-                  event.started_at | formatRelativeDate
+                  event.started_at | formatToUTC
                 }}</span>
               </template>
               <span class="pre-formatted">{{ event.started_at | formatToTimeZones }}</span>
@@ -88,4 +89,4 @@ export default {
 }
 </script>
 
-<style scoped src="@/assets/styles/timeline.css" />
+<style scoped src="@/styles/timeline.css" />

src/dispatch/static/dispatch/src/filters.js

@@ -2,20 +2,39 @@ import Vue from "vue"
 import { parseISO, formatISO } from "date-fns"
 import moment from "moment-timezone"
 
+const time_format = "YYYY-MM-DD HH:mm:ss"
+const zones_to_show = ["America/Los_Angeles", "America/New_York"]
+
 Vue.filter("formatDate", function (value) {
   if (value) {
     return formatISO(parseISO(value))
   }
 })
 
+Vue.filter("formatToUTC", function (value) {
+  if (value) {
+    return moment(value).utc().format(time_format)
+  }
+})
+
+function formatTimeZone(time) {
+  return `${time.format("z")}: ${time.format(time_format)}`
+}
+
 Vue.filter("formatToTimeZones", function (value) {
   if (value) {
-    let m = moment(value)
-    return `UTC: ${value}\nPST: ${m
-      .tz("America/Los_Angeles")
-      .format("YYYY-MM-DD HH:mm:ss")}\nEST: ${m
-      .tz("America/New_York")
-      .format("YYYY-MM-DD HH:mm:ss")}`
+    const m = moment(value)
+    if (!m.isValid()) return value
+    const local_zone_name = moment.tz.guess() || "America/Los_Angeles"
+    const local_time = m.tz(local_zone_name)
+    let tooltip_text = `${formatTimeZone(local_time)}`
+    zones_to_show.forEach((zone) => {
+      if (zone != local_zone_name) {
+        const zoned_time = m.tz(zone)
+        tooltip_text += `\n${formatTimeZone(zoned_time)}`
+      }
+    })
+    return tooltip_text
   }
 })
 

src/dispatch/static/dispatch/src/incident/TimelineTab.vue

@@ -12,6 +12,7 @@
       </v-btn>
     </v-row>
     <v-timeline v-if="events && events.length" dense clipped>
+      <v-col class="text-right caption">(times in UTC)</v-col>
       <v-timeline-item
         v-for="event in sortedEvents"
         :key="event.id"
@@ -40,7 +41,7 @@
             <v-tooltip bottom>
               <template v-slot:activator="{ on, attrs }">
                 <span v-bind="attrs" v-on="on" class="wavy-underline">{{
-                  event.started_at | formatRelativeDate
+                  event.started_at | formatToUTC
                 }}</span>
               </template>
               <span class="pre-formatted">{{ event.started_at | formatToTimeZones }}</span>
@@ -87,4 +88,4 @@ export default {
 }
 </script>
 
-<style scoped src="@/assets/styles/timeline.css" />
+<style scoped src="@/styles/timeline.css" />

src/dispatch/static/dispatch/src/styles/timeline.css

@@ -0,0 +1,11 @@
+.wavy-underline {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: silver;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+}
+
+.pre-formatted {
+    white-space: pre;
+}