Add Dropdown to Change Timezones

gateway-ha/src/main/java/io/trino/gateway/ha/domain/response/DistributionResponse.java

@@ -220,20 +220,20 @@ public void setName(String name)
 
     public static class LineChart
     {
-        private String minute;
+        private String timestamp;
         private String backendUrl;
         private Long queryCount;
         private String name;
 
         @JsonProperty
-        public String getMinute()
+        public String getTimestamp()
         {
-            return minute;
+            return timestamp;
         }
 
-        public void setMinute(String minute)
+        public void setTimestamp(String timestamp)
         {
-            this.minute = minute;
+            this.timestamp = timestamp;
         }
 
         @JsonProperty

gateway-ha/src/main/java/io/trino/gateway/ha/router/HaQueryHistoryManager.java

@@ -22,9 +22,6 @@
 import org.jdbi.v3.core.Jdbi;
 
 import java.time.Instant;
-import java.time.LocalDateTime;
-import java.time.ZoneId;
-import java.time.format.DateTimeFormatter;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
@@ -146,9 +143,8 @@ public List<DistributionResponse.LineChart> findDistribution(Long ts)
             DistributionResponse.LineChart lineChart = new DistributionResponse.LineChart();
             long minute = (long) Float.parseFloat(model.get("minute").toString());
             Instant instant = Instant.ofEpochSecond(minute * 60L);
-            LocalDateTime dateTime = LocalDateTime.ofInstant(instant, ZoneId.systemDefault());
-            DateTimeFormatter formatter = DateTimeFormatter.ofPattern("HH:mm");
-            lineChart.setMinute(dateTime.format(formatter));
+            long epochMillis = instant.toEpochMilli();
+            lineChart.setTimestamp(String.valueOf(epochMillis));
             lineChart.setQueryCount(Long.parseLong(model.get("query_count").toString()));
             lineChart.setBackendUrl(model.get("backend_url").toString());
             resList.add(lineChart);

gateway-ha/src/test/java/io/trino/gateway/ha/TestObjectSerializable.java

@@ -201,7 +201,7 @@ void testDistributionResponse()
             throws JsonProcessingException
     {
         DistributionResponse.LineChart lineChart = new DistributionResponse.LineChart();
-        lineChart.setMinute("11:22");
+        lineChart.setTimestamp("1711974896630");
         lineChart.setBackendUrl("example.com");
         lineChart.setName("name1");
         lineChart.setQueryCount(6L);
@@ -230,7 +230,7 @@ void testDistributionResponse()
                         "distributionChart",
                         "lineChart",
                         "startTime",
-                        "minute",       // LineChart
+                        "timestamp",       // LineChart
                         "backendUrl",
                         "queryCount",
                         "\"name\":\"name1\"",

webapp/package.json

@@ -14,6 +14,7 @@
     "@douyinfe/semi-icons-lab": "^2.62.0",
     "@douyinfe/semi-illustrations": "^2.62.0",
     "@douyinfe/semi-ui": "^2.62.0",
+    "@vvo/tzdb": "^6.198.0",
     "echarts": "^5.4.3",
     "js-cookie": "^3.0.5",
     "moment": "^2.29.4",

webapp/src/components/dashboard.tsx

@@ -2,20 +2,22 @@ import { useEffect, useRef, useState } from "react";
 import Locale from "../locales";
 import styles from './dashboard.module.scss';
 import * as echarts from "echarts";
-import { Card, Col, Descriptions, Row, Tooltip } from "@douyinfe/semi-ui";
+import { Card, Col, Descriptions, Form, Row, Tooltip } from "@douyinfe/semi-ui";
 import { distributionApi } from "../api/webapp/dashboard";
 import { DistributionDetail, DistributionChartData, LineChartData } from "../types/dashboard";
 import { getCSSVar } from "../utils/utils";
 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";
+import { formatZonedDateTime, formatZonedTimestamp, getTimeDisplayZoneOptions } from "../utils/time";
 
 export function Dashboard() {
   const access = useAccessStore();
   const navigate = useNavigate();
   const [distributionDetail, setDistributionDetail] = useState<DistributionDetail>();
+  const [timeZone, setTimeZone] = useState<string>(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  const timeZones: string[] = getTimeDisplayZoneOptions();
 
   useEffect(() => {
     distributionApi({})
@@ -27,7 +29,7 @@ export function Dashboard() {
   const data = [
     {
       key: Locale.Dashboard.StartTime,
-      value: distributionDetail && formatZonedDateTime(distributionDetail.startTime)
+      value: distributionDetail && formatZonedDateTime(distributionDetail.startTime, timeZone)
     },
     {
       key: Locale.Dashboard.Backends,
@@ -98,20 +100,40 @@ export function Dashboard() {
     },
   ];
 
+  const timeZoneRender = () => {
+    return (
+      <Form<{ timeZone: string }>
+        initValues={{ timeZone }}
+        onValueChange={(values) => { setTimeZone(values.timeZone); }}
+        defaultValue={timeZone}
+        render={() => (
+          <>
+            <Form.Select field="timeZone" label={Locale.Dashboard.TimeZone} style={{ width: 200 }} initValue={timeZone} placeholder={timeZone} filter>
+              {timeZones.map((tz) => (
+                <Form.Select.Option key={tz} value={tz}>{tz}</Form.Select.Option>
+              ))}
+            </Form.Select>
+          </>
+          )}
+        >
+      </Form>
+    )
+  };
+
   return (
     <>
       <div style={{ width: '100%' }}>
         <Row gutter={[16, 16]}>
           <Col span={24}>
-            <Card title={Locale.Dashboard.Summary} bordered={false} className={styles.card}>
+            <Card title={Locale.Dashboard.Summary} bordered={false} className={styles.card} headerExtraContent={timeZoneRender()}>
               <Descriptions data={data} row size="large" className={styles.description} />
             </Card>
           </Col>
         </Row>
         <Row gutter={[16, 16]}>
           <Col span={16}>
             <Card title={Locale.Dashboard.QueryDistribution} bordered={false} className={styles.card}>
-              <LineChart data={distributionDetail?.lineChart || {}} />
+              <LineChart data={distributionDetail?.lineChart || {}} timeZone={timeZone} />
             </Card>
           </Col>
           <Col span={8}>
@@ -143,36 +165,37 @@ function updateLegendColor() {
 }
 
 function LineChart(props: {
-  data: Record<string, LineChartData[]>
+  data: Record<string, LineChartData[]>,
+  timeZone: string
 }) {
   const chartRef = useRef(null);
   const legendColor = updateLegendColor();
 
   useEffect(() => {
     const chartInstance = echarts.init(chartRef.current);
-    let minMinute = 2400;
-    let maxMinute = 0;
-    Object.keys(props.data).forEach(d => {
-      const lineChartDatas = props.data[d]
-      const lineChartDataTemp = lineChartDatas.map(lineChartData => parseInt(lineChartData.minute.replace(":", "")))
-      const minMinuteTemp = Math.min(...lineChartDataTemp);
-      const maxMinuteTemp = Math.max(...lineChartDataTemp);
-      if (minMinuteTemp < minMinute) {
-        minMinute = minMinuteTemp;
-      }
-      if (maxMinuteTemp > maxMinute) {
-        maxMinute = maxMinuteTemp;
-      }
-    });
-    const minuteStrings: string[] = [];
-    for (let i = minMinute; i <= maxMinute; i++) {
-      if ((i % 100) >= 60) {
-        continue;
-      }
-      const hour = Math.floor(i / 100).toString().padStart(2, "0");
-      const minute = (i % 100).toString().padStart(2, "0");
-      minuteStrings.push(`${hour}:${minute}`);
+
+    const displayData: Record<string, LineChartData[]> = Object.fromEntries(
+      Object.entries(props.data).map(([name, series]) => [
+        name,
+        series.map((item) => ({
+          ...item,
+        })),
+      ])
+    );
+
+    const timestamps = Object.values(displayData).flat().map(d => Number(d.timestamp));
+    let minTimestamp = Math.min(...timestamps);
+    let maxTimestamp = Math.max(...timestamps);
+    const xAxisTimeLabels: number[] = [];
+    const MINUTE = 60 * 1000;
+
+    minTimestamp = Math.floor(minTimestamp / MINUTE) * MINUTE;
+    maxTimestamp = Math.floor(maxTimestamp / MINUTE) * MINUTE;
+
+    for (let t = minTimestamp; t <= maxTimestamp; t += MINUTE) {
+      xAxisTimeLabels.push(t);
     }
+
     const option = {
       legend: {
         textStyle: {
@@ -181,7 +204,7 @@ function LineChart(props: {
       },
       xAxis: {
         type: 'category',
-        data: minuteStrings
+        data: xAxisTimeLabels.map(ts => formatZonedTimestamp(ts, props.timeZone))
       },
       yAxis: {
         type: 'value',
@@ -190,14 +213,16 @@ function LineChart(props: {
       tooltip: {
         trigger: 'axis'
       },
-      series: Object.keys(props.data).map(d => {
-        const lineChartDatas = props.data[d].reduce((obj, item) => {
-          obj[item.minute] = item.queryCount;
-          return obj;
-        }, {} as Record<string, any>);
+      series: Object.keys(displayData).map(d => {
+        const data = displayData[d];
+        const count = new Map<number, number>();
+        for (const dataPoint of data) {
+          const xValueHHMM = Math.floor(Number(dataPoint.timestamp) / MINUTE) * MINUTE;
+          count.set(xValueHHMM, dataPoint.queryCount);
+        }
         return {
           name: d,
-          data: minuteStrings.map(m => lineChartDatas[m] || 0),
+          data: xAxisTimeLabels.map(timeStamp => count.get(timeStamp) || 0),
           type: 'line',
           smooth: true
         }
@@ -206,7 +231,7 @@ function LineChart(props: {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     chartInstance.setOption(option);
-  }, [props.data, legendColor]);
+  }, [props.data, props.timeZone, legendColor]);
 
   return (
     <div style={{ textAlign: "center" }}>

webapp/src/locales/en_US.ts

@@ -18,6 +18,7 @@ const en_US = {
     Summary: "Summary",
     QueryDistribution: "Query distribution in last hour",
     QueryCount: "Query count",
+    TimeZone: "Time Zone",
   },
   History: {
     RoutedToTip: "Default all",

webapp/src/types/dashboard.d.ts

@@ -19,7 +19,7 @@ export interface  DistributionChartData {
 }
 
 export interface  LineChartData {
-  minute: string;
+  timestamp: string;
   backendUrl: string;
   queryCount: number;
   name: string;

webapp/src/utils/time.ts

@@ -1,4 +1,5 @@
 import moment from "moment";
+import {getTimeZones} from "@vvo/tzdb";
 
 export const formatTime = (
   time: number,
@@ -44,7 +45,21 @@ export const formatTimestamp = (timestamp: number): string => {
   return formatDateComponents(date);
 }
 
-export const formatZonedDateTime = (zonedDateTime: string): string => {
-  const date = new Date(zonedDateTime);
-  return formatDateComponents(date);
+export const formatZonedTimestamp = (timestamp: number, timezone: string): string => {
+    const date = new Date(timestamp);
+    const formatter = new Intl.DateTimeFormat('en-US', {
+        timeZone: timezone, hour12: false, hour: '2-digit', minute: '2-digit',
+    });
+    return formatter.format(date);
+}
+
+export const formatZonedDateTime = (zonedDateTime: string, timeZone: string): string => {
+    const date = new Date(zonedDateTime);
+    const zonedDate  = new Date(date.toLocaleString("en-US", { timeZone }));
+    return formatDateComponents(zonedDate);
 }
+
+export const getTimeDisplayZoneOptions = (): string[] => {
+    const timeZones = getTimeZones({ includeUtc: true });
+    return timeZones.map(tz => tz.name).sort();
+};