Fixing timestamps to use user-defined timezone (#3019)

Author: clayandgen

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/MicroservicesTab.vue

@@ -71,7 +71,7 @@
           <v-list-item-title>{{ microservice.name }}</v-list-item-title>
           <v-list-item-subtitle v-if="microservice_status[microservice.name]">
             Updated:
-            {{ formatDate(microservice_status[microservice.name].updated_at) }},
+            {{ formatNanoseconds(microservice_status[microservice.name].updated_at, timeZone) }},
             Enabled: {{ isEnabled(microservice.name) ? 'True' : 'False' }},
             Count:
             {{ microservice_status[microservice.name].count }}
@@ -171,15 +171,16 @@
 </template>
 
 <script>
-import { toDate, format } from 'date-fns'
-import { Api } from '@openc3/js-common/services'
+import { Api, OpenC3Api } from '@openc3/js-common/services'
 import { OutputDialog, TextBoxDialog } from '@/components'
+import { TimeFilters } from '@/util'
 
 export default {
   components: {
     OutputDialog,
     TextBoxDialog,
   },
+  mixins: [TimeFilters],
   data() {
     return {
       filteredMicroservices: [],
@@ -194,6 +195,7 @@ export default {
       alertType: 'success',
       showAlert: false,
       updater: null,
+      timeZone: 'local',
       // { service_name:
       //   { operation: 'stopping' | 'restarting' | 'starting',
       //     enabled_states: []
@@ -228,6 +230,18 @@ export default {
       this.applyServiceFilter()
     },
   },
+  created() {
+    new OpenC3Api()
+      .get_setting('time_zone')
+      .then((response) => {
+        if (response) {
+          this.timeZone = response
+        }
+      })
+      .catch(() => {
+        // Do nothing
+      })
+  },
   mounted() {
     this.update()
     this.updater = setInterval(() => {
@@ -489,12 +503,6 @@ export default {
       this.jsonContent = JSON.stringify(e, null, '\t')
       this.showError = true
     },
-    formatDate(nanoSecs) {
-      return format(
-        toDate(Number.parseInt(nanoSecs) / 1000000),
-        'yyyy-MM-dd HH:mm:ss.SSS',
-      )
-    },
     // States are determined by the microservice and not from an explicitly defined set
     // However, we can provide useful colors for errors and common states
     getStateColor(microserviceName) {

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/PackagesTab.vue

@@ -54,7 +54,7 @@
             />
           </v-list-item-title>
           <v-list-item-subtitle>
-            <span v-text="' Updated At: ' + formatDate(process.updated_at)" />
+            <span v-text="' Updated At: ' + formatNanoseconds(process.updated_at, timeZone)" />
           </v-list-item-subtitle>
 
           <template v-if="process.state !== 'Running'" #append>
@@ -119,16 +119,17 @@
 </template>
 
 <script>
-import { toDate, format } from 'date-fns'
-import { Api } from '@openc3/js-common/services'
+import { Api, OpenC3Api } from '@openc3/js-common/services'
 import { SimpleTextDialog } from '@/components'
 import { DownloadDialog } from '@/tools/admin'
+import { TimeFilters } from '@/util'
 
 export default {
   components: {
     DownloadDialog,
     SimpleTextDialog,
   },
+  mixins: [TimeFilters],
   data() {
     return {
       showDownloadDialog: false,
@@ -140,8 +141,21 @@ export default {
       gems: [],
       python: [],
       processes: {},
+      timeZone: 'local',
     }
   },
+  created() {
+    new OpenC3Api()
+      .get_setting('time_zone')
+      .then((response) => {
+        if (response) {
+          this.timeZone = response
+        }
+      })
+      .catch(() => {
+        // Do nothing
+      })
+  },
   mounted() {
     this.update()
     this.updateProcesses()
@@ -171,12 +185,6 @@ export default {
         },
       )
     },
-    formatDate(nanoSecs) {
-      return format(
-        toDate(Number.parseInt(nanoSecs) / 1000000),
-        'yyyy-MM-dd HH:mm:ss.SSS',
-      )
-    },
     selectFile() {
       this.progress = 0
       this.$refs.fileInput.click()

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/PluginsTab.vue

@@ -80,7 +80,7 @@
             />
           </v-list-item-title>
           <v-list-item-subtitle>
-            <span v-text="' Updated At: ' + formatDate(process.updated_at)" />
+            <span v-text="' Updated At: ' + formatNanoseconds(process.updated_at, timeZone)" />
           </v-list-item-subtitle>
 
           <template #append>
@@ -164,12 +164,12 @@
 </template>
 
 <script>
-import { toDate, format } from 'date-fns'
 import { Api, OpenC3Api } from '@openc3/js-common/services'
 import { SimpleTextDialog } from '@/components'
 import { ModifiedPluginDialog, PluginDialog } from '@/tools/admin'
 import { PluginList } from '@/tools/admin/tabs/plugins'
 import { PluginStore } from '@/plugins/plugin-store'
+import { TimeFilters } from '@/util'
 
 export default {
   components: {
@@ -179,6 +179,7 @@ export default {
     ModifiedPluginDialog,
     SimpleTextDialog,
   },
+  mixins: [TimeFilters],
   data() {
     return {
       // Control state
@@ -209,6 +210,7 @@ export default {
       showPluginDialog: false,
       showModifiedPluginDialog: false,
       showDefaultTools: false,
+      timeZone: 'local',
       // When updating update local_mode.rb, local_mode.py, plugins.p.spec.ts
       defaultPlugins: [
         'openc3-cosmos-tool-admin',
@@ -251,6 +253,16 @@ export default {
   },
   created() {
     this.api.update_plugin_store()
+    this.api
+      .get_setting('time_zone')
+      .then((response) => {
+        if (response) {
+          this.timeZone = response
+        }
+      })
+      .catch(() => {
+        // Do nothing
+      })
   },
   mounted() {
     this.update()
@@ -322,12 +334,6 @@ export default {
         },
       )
     },
-    formatDate(nanoSecs) {
-      return format(
-        toDate(Number.parseInt(nanoSecs) / 1000000),
-        'yyyy-MM-dd HH:mm:ss.SSS',
-      )
-    },
     upload: function (existing = null, storeData = null) {
       const method = existing ? 'put' : 'post'
       const path = existing