Improve the time of the UI distribution graph (trinodb#369)

willmostly · Jul 22, 2024 · f8eb116 · f8eb116
1 parent fdb1aa0
commit f8eb116
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/gateway-ha/src/main/java/io/trino/gateway/ha/resource/GatewayWebAppResource.java b/gateway-ha/src/main/java/io/trino/gateway/ha/resource/GatewayWebAppResource.java
@@ -45,6 +45,9 @@
 import jakarta.ws.rs.core.SecurityContext;
 
 import java.time.LocalDateTime;
+import java.time.ZoneId;
+import java.time.ZoneOffset;
+import java.time.ZonedDateTime;
 import java.time.format.DateTimeFormatter;
 import java.util.Collections;
 import java.util.List;
@@ -59,7 +62,7 @@
 public class GatewayWebAppResource
 {
     private static final LocalDateTime START_TIME = LocalDateTime.now();
-    private static final DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
+    private static final DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSXXX");
     private final GatewayBackendManager gatewayBackendManager;
     private final QueryHistoryManager queryHistoryManager;
     private final BackendStateManager backendStateManager;
@@ -159,7 +162,9 @@ public Response getDistribution(QueryDistributionRequest query)
         distributionResponse.setTotalQueryCount(totalQueryCount);
         distributionResponse.setAverageQueryCountSecond(totalQueryCount / (latestHour * 60d * 60d));
         distributionResponse.setAverageQueryCountMinute(totalQueryCount / (latestHour * 60d));
-        distributionResponse.setStartTime(START_TIME.format(formatter));
+        ZonedDateTime zonedLocalTime = START_TIME.atZone(ZoneId.systemDefault());
+        ZonedDateTime utcTime = zonedLocalTime.withZoneSameInstant(ZoneOffset.UTC);
+        distributionResponse.setStartTime(utcTime.format(formatter));
         return Response.ok(Result.ok(distributionResponse)).build();
     }
 

diff --git a/webapp/src/components/dashboard.tsx b/webapp/src/components/dashboard.tsx
@@ -10,6 +10,7 @@ import { IconHelpCircle } from "@douyinfe/semi-icons";
 import { useNavigate } from "react-router-dom";
 import { hasPagePermission, routersMapper } from "../router";
 import { useAccessStore } from "../store";
+import { formatZonedDateTime } from "../utils/time";
 
 export function Dashboard() {
   const access = useAccessStore();
@@ -26,7 +27,7 @@ export function Dashboard() {
   const data = [
     {
       key: Locale.Dashboard.StartTime,
-      value: distributionDetail?.startTime
+      value: distributionDetail && formatZonedDateTime(distributionDetail.startTime)
     },
     {
       key: Locale.Dashboard.Backends,

diff --git a/webapp/src/components/history.tsx b/webapp/src/components/history.tsx
@@ -5,7 +5,7 @@ import { Button, Card, Form, Table, Tag, Typography } from "@douyinfe/semi-ui";
 import Column from "@douyinfe/semi-ui/lib/es/table/Column";
 import { queryHistoryApi } from "../api/webapp/history";
 import { HistoryData, HistoryDetail } from "../types/history";
-import { formatYYYYMMddHHMMSS } from "../utils/time";
+import { formatTimestamp } from "../utils/time";
 import { backendsApi } from "../api/webapp/cluster";
 import { Role, useAccessStore } from "../store";
 import { BackendData } from "../types/cluster";
@@ -66,7 +66,7 @@ export function History() {
 
   const timeRender = (text: number) => {
     return (
-      <Text>{formatYYYYMMddHHMMSS(text)}</Text>
+      <Text>{formatTimestamp(text)}</Text>
     );
   }
 

diff --git a/webapp/src/utils/time.ts b/webapp/src/utils/time.ts
@@ -29,8 +29,7 @@ const format = (
     .format(formatString);
 };
 
-export const formatYYYYMMddHHMMSS = (timestamp: number): string => {
-  const date = new Date(timestamp);
+const formatDateComponents = (date: Date): string => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
@@ -39,3 +38,13 @@ export const formatYYYYMMddHHMMSS = (timestamp: number): string => {
   const seconds = String(date.getSeconds()).padStart(2, '0');
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
+
+export const formatTimestamp = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  return formatDateComponents(date);
+}
+
+export const formatZonedDateTime = (zonedDateTime: string): string => {
+  const date = new Date(zonedDateTime);
+  return formatDateComponents(date);
+}