Adds fractional seconds and Unix timestamp pasting to advanced date p…

…icker (#4793)
Netflix · Jun 8, 2024 · 2e4fec6 · 2e4fec6
1 parent d96d009
commit 2e4fec6
Show file tree

Hide file tree

Showing 6 changed files with 374 additions and 22 deletions.
diff --git a/src/dispatch/models.py b/src/dispatch/models.py
@@ -111,7 +111,7 @@ class Config:
 
         json_encoders = {
             # custom output conversion for datetime
-            datetime: lambda v: v.strftime("%Y-%m-%dT%H:%M:%SZ") if v else None,
+            datetime: lambda v: v.strftime("%Y-%m-%dT%H:%M:%S.%fZ") if v else None,
             SecretStr: lambda v: v.get_secret_value() if v else None,
         }
 

diff --git a/src/dispatch/static/dispatch/components.d.ts b/src/dispatch/static/dispatch/components.d.ts
@@ -32,6 +32,7 @@ declare module '@vue/runtime-core' {
     PageHeader: typeof import('./src/components/PageHeader.vue')['default']
     ParticipantAutoComplete: typeof import('./src/components/ParticipantAutoComplete.vue')['default']
     ParticipantSelect: typeof import('./src/components/ParticipantSelect.vue')['default']
+    PreciseDateTimePicker: typeof import('./src/components/PreciseDateTimePicker.vue')['default']
     ProjectAutoComplete: typeof import('./src/components/ProjectAutoComplete.vue')['default']
     Refresh: typeof import('./src/components/Refresh.vue')['default']
     RichEditor: typeof import('./src/components/RichEditor.vue')['default']
@@ -44,6 +45,7 @@ declare module '@vue/runtime-core' {
     ShpherdStep: typeof import('./src/components/ShpherdStep.vue')['default']
     StatWidget: typeof import('./src/components/StatWidget.vue')['default']
     SubjectLastUpdated: typeof import('./src/components/SubjectLastUpdated.vue')['default']
+    TimePicker: typeof import('./src/components/TimePicker.vue')['default']
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
     VAppBar: typeof import('vuetify/lib')['VAppBar']

diff --git a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
@@ -3,8 +3,8 @@
     ref="menu"
     v-model="display"
     :close-on-content-click="false"
-    max-width="290px"
-    min-width="290px"
+    max-width="280px"
+    min-width="280px"
   >
     <template #activator="{ props }">
       <v-text-field
@@ -15,23 +15,14 @@
         v-bind="props"
       />
     </template>
-    <v-card>
-      <!-- TODO: use vuetify picker components -->
-      <v-card-text>
-        <v-text-field v-model="selectedDatetime" type="datetime-local" />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn color="grey-lighten-1" variant="text" @click="clearHandler">Clear</v-btn>
-        <v-btn variant="text" @click="okHandler">Ok</v-btn>
-      </v-card-actions>
-    </v-card>
+    <precise-date-time-picker v-model="selectedDatetime" :timezone="timezone" @ok="okHandler" />
   </v-menu>
 </template>
 <script>
 import { parseISO } from "date-fns"
 import { formatInTimeZone, format } from "date-fns-tz"
 import moment from "moment-timezone"
+import PreciseDateTimePicker from "@/components/PreciseDateTimePicker.vue"
 
 export default {
   name: "DateTimePickerMenu",
@@ -53,6 +44,10 @@ export default {
     },
   },
 
+  components: {
+    PreciseDateTimePicker,
+  },
+
   data() {
     return {
       display: false,
@@ -67,7 +62,7 @@ export default {
   computed: {
     formattedDatetime() {
       return this.selectedDatetime
-        ? format(parseISO(this.selectedDatetime), "yyyy-MM-dd HH:mm")
+        ? format(parseISO(this.selectedDatetime), "yyyy-MM-dd HH:mm:ss.SSS")
         : ""
     },
   },
@@ -85,11 +80,15 @@ export default {
         initDateTime = parseISO(this.modelValue)
       }
 
-      this.selectedDatetime = formatInTimeZone(initDateTime, this.timezone, "yyyy-MM-dd'T'HH:mm")
+      this.selectedDatetime = formatInTimeZone(
+        initDateTime,
+        this.timezone,
+        "yyyy-MM-dd'T'HH:mm:ss.SSS"
+      )
     },
     okHandler() {
       this.resetPicker()
-      let newValue = moment.tz(this.selectedDatetime, this.timezone).utc().format()
+      let newValue = moment.tz(this.selectedDatetime, this.timezone).toISOString()
       this.$emit("update:modelValue", newValue)
     },
     clearHandler() {
@@ -111,7 +110,7 @@ export default {
       this.selectedDatetime = formatInTimeZone(
         parseISO(this.modelValue),
         this.timezone,
-        "yyyy-MM-dd'T'HH:mm"
+        "yyyy-MM-dd'T'HH:mm:ss.SSS"
       )
     },
   },