Bugfix/format timeline fixes (#3932)

Netflix · Nov 3, 2023 · a9927d5 · a9927d5
1 parent c4fba84
commit a9927d5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
@@ -30,7 +30,8 @@
 </template>
 <script>
 import { parseISO } from "date-fns"
-import { format } from "date-fns-tz"
+import { formatInTimeZone, format } from "date-fns-tz"
+import moment from "moment-timezone"
 
 export default {
   name: "DateTimePickerMenu",
@@ -84,12 +85,12 @@ export default {
         initDateTime = parseISO(this.modelValue)
       }
 
-      this.selectedDatetime = format(initDateTime, "yyyy-MM-dd'T'HH:mm", { timeZone: "UTC" })
+      this.selectedDatetime = formatInTimeZone(initDateTime, this.timezone, "yyyy-MM-dd'T'HH:mm")
     },
     okHandler() {
       this.resetPicker()
-      let isoString = parseISO(this.selectedDatetime).toISOString()
-      this.$emit("update:modelValue", isoString)
+      let newValue = moment.tz(this.selectedDatetime, this.timezone).utc().format()
+      this.$emit("update:modelValue", newValue)
     },
     clearHandler() {
       this.resetPicker()
@@ -106,6 +107,13 @@ export default {
     modelValue() {
       this.init()
     },
+    timezone() {
+      this.selectedDatetime = formatInTimeZone(
+        parseISO(this.modelValue),
+        this.timezone,
+        "yyyy-MM-dd'T'HH:mm"
+      )
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue b/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue
@@ -8,26 +8,35 @@
       <v-card-text>
         <v-container class="mt-3">
           <v-row>
-            <v-col cols="12">
+            <v-col cols="5">
               <date-time-picker-menu
                 label="Reported At"
                 v-model="started_at"
                 class="time-picker"
                 :timezone="timezone"
               />
+              <span
+                class="ml-10 time-utc text-caption"
+                style="position: absolute; margin-top: -20px"
+              >
+                Time in UTC is {{ formatToUTC(started_at) }}
+              </span>
+            </v-col>
+            <v-col cols="5">
               <v-select
                 v-model="timezone"
                 label="Time zone"
                 :items="timezones"
                 class="ml-2 time-zone-select"
               />
+            </v-col>
+            <v-col cols="1">
               <v-btn color="green en-1" class="ml-10 mt-3" width="100" @click="setTimeToNow()">
                 Now
               </v-btn>
             </v-col>
-            <v-col cols="12">
-              <span class="ml-8 time-utc"> Time in UTC is {{ formatToUTC(started_at) }} </span>
-            </v-col>
+          </v-row>
+          <v-row>
             <v-col cols="12">
               <v-textarea
                 v-model="description"

diff --git a/src/dispatch/static/dispatch/src/incident/TimelineTab.vue b/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
@@ -44,6 +44,9 @@
           :class="classType(event)"
           dot-color="blue"
         >
+          <template #icon>
+            <v-icon color="white" />
+          </template>
           <v-row justify="space-between">
             <v-col cols="7">
               {{ event.description }}