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 Long timestamp;
         private String backendUrl;
         private Long queryCount;
         private String name;
 
         @JsonProperty
-        public String getMinute()
+        public Long getTimestamp()
         {
-            return minute;
+            return timestamp;
         }
 
-        public void setMinute(String minute)
+        public void setTimestamp(Long 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(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(1711974896630L);
         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/App.tsx

@@ -16,15 +16,18 @@ import { useEffect } from 'react';
 import { getCSSVar } from './utils/utils';
 import { IllustrationIdle, IllustrationIdleDark } from '@douyinfe/semi-illustrations';
 import Cookies from 'js-cookie';
+import { TimezoneProvider } from "./components/TimezoneContext";
 
 function App() {
   return (
     <>
       <ErrorBoundary>
         <LocaleProvider locale={getSemiLang()}>
-          <Router>
-            <Screen />
-          </Router>
+          <TimezoneProvider>
+            <Router>
+              <Screen />
+            </Router>
+          </TimezoneProvider>
         </LocaleProvider >
       </ErrorBoundary>
     </>

webapp/src/components/TimezoneContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import { Typography, Select } from "@douyinfe/semi-ui";
+import Locale from "../locales";
+import {getTimeDisplayZoneOptions} from "../utils/time";
+
+export const TimezoneContext = createContext<{
+  timezone: string;
+  changeTimezone: (tz: string) => void;
+}>({ timezone: 'UTC', changeTimezone: () => {} });
+
+export function TimezoneProvider({ children }: { children: React.ReactNode }) {
+  const [timezone, setTimezone] = useState<string>(() => Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC');
+  const changeTimezone = useCallback((newTZ: string) => { setTimezone(newTZ) }, []);
+  const value = ({ timezone, changeTimezone });
+  return (
+    <TimezoneContext.Provider value={value}>
+      {children}
+    </TimezoneContext.Provider>
+  );
+}
+
+export function TimezoneDropdown() {
+  const { timezone, changeTimezone } = useContext(TimezoneContext);
+  const timeZones = getTimeDisplayZoneOptions();
+  return (
+    <>
+      <Typography.Text strong>{Locale.Dashboard.TimeZone}</Typography.Text>
+      <Select
+        style={{ width: 200 }}
+        value={timezone}
+        filter
+        onChange={(v) => changeTimezone(String(v))}
+      >
+        {timeZones.map((tz) => (<Select.Option key={tz} value={tz}>{tz}</Select.Option>))}</Select>
+    </>
+  );
+}

webapp/src/components/dashboard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import Locale from "../locales";
 import styles from './dashboard.module.scss';
 import * as echarts from "echarts";
@@ -10,11 +10,13 @@ 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 } from "../utils/time";
+import { TimezoneContext } from "./TimezoneContext";
 
 export function Dashboard() {
   const access = useAccessStore();
   const navigate = useNavigate();
+  const timezone = useContext(TimezoneContext).timezone;
   const [distributionDetail, setDistributionDetail] = useState<DistributionDetail>();
 
   useEffect(() => {
@@ -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,
@@ -39,7 +41,6 @@ export function Dashboard() {
           }
         }}>{distributionDetail?.totalBackendCount}</span>
         : <span>{distributionDetail?.totalBackendCount}</span>
-
     },
     {
       key: Locale.Dashboard.BackendsOnline,
@@ -111,7 +112,7 @@ export function Dashboard() {
         <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 +144,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.ceil(maxTimestamp / MINUTE) * MINUTE;
+
+    for (let t = minTimestamp; t <= maxTimestamp; t += MINUTE) {
+      xAxisTimeLabels.push(t);
     }
+
     const option = {
       legend: {
         textStyle: {
@@ -181,7 +183,7 @@ function LineChart(props: {
       },
       xAxis: {
         type: 'category',
-        data: minuteStrings
+        data: xAxisTimeLabels.map(ts => formatZonedTimestamp(ts, props.timeZone))
       },
       yAxis: {
         type: 'value',
@@ -190,14 +192,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 +210,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/components/history.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import styles from './history.module.scss';
 import Locale from "../locales";
 import { Button, Card, Form, Table, Tag, Modal, Typography, CodeHighlight } from "@douyinfe/semi-ui";
@@ -9,10 +9,12 @@ import { formatTimestamp } from "../utils/time";
 import { backendsApi } from "../api/webapp/cluster";
 import { Role, useAccessStore } from "../store";
 import { BackendData } from "../types/cluster";
+import { TimezoneContext } from "./TimezoneContext";
 
 export function History() {
   const { Text } = Typography;
   const access = useAccessStore();
+  const timezone = useContext(TimezoneContext).timezone;
   const [backendData, setBackendData] = useState<BackendData[]>();
   const [historyData, setHistoryData] = useState<HistoryData>();
   const [backendMapping, setBackendMapping] = useState<Record<string, string>>({});
@@ -74,7 +76,7 @@ export function History() {
 
   const timeRender = (text: number) => {
     return (
-      <Text>{formatTimestamp(text)}</Text>
+      <Text>{formatTimestamp(text, timezone)}</Text>
     );
   }
 

webapp/src/components/layout.tsx

@@ -7,6 +7,7 @@ import { hasPagePermission, routers, routersMapper } from '../router';
 import { Theme, useAccessStore, useConfigStore } from '../store';
 import { getUIConfiguration, logoutApi } from '../api/webapp/login';
 import Locale from "../locales";
+import { TimezoneDropdown } from "./TimezoneContext";
 
 export const RootLayout = (props: {
   children: React.ReactNode
@@ -85,6 +86,7 @@ export const RootLayout = (props: {
             }}
             footer={
               <div className={styles.dIV}>
+                <TimezoneDropdown />
                 <Button icon={
                   theme === Theme.Auto ? (
                     <IconMark className={styles.semiIconsBell} />

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: number;
   backendUrl: string;
   queryCount: number;
   name: string;