From 3af77e7f5f85766fc838df1a2c844e44aa8e42b3 Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Fri, 15 Mar 2024 14:20:13 +0800 Subject: [PATCH 01/10] Adding refresh rate feature to the metrics page. Signed-off-by: liuxsh9 --- .../client/src/pages/metrics/Metrics.tsx | 84 ++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index 15c501aec610..5bc98dd99779 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -2,6 +2,7 @@ import { Alert, AlertProps, Button, + InputAdornment, Link, Menu, MenuItem, @@ -12,6 +13,7 @@ import { import createStyles from "@mui/styles/createStyles"; import makeStyles from "@mui/styles/makeStyles"; import React, { useContext, useEffect, useState } from "react"; +import { BiRefresh, BiTime } from "react-icons/bi"; import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; @@ -45,6 +47,21 @@ const useStyles = makeStyles((theme) => }), ); +export enum RefreshOptions { + OFF = "off", + ONE_SECOND = "1s", + FIVE_SECONDS = "5s", + TEN_SECONDS = "10s", + THIRTY_SECONDS = "30s", + ONE_MIN = "1m", + FIVE_MINS = "5m", + FIFTEEN_MINS = "15m", + THIRTY_MINS = "30m", + ONE_HOUR = "1h", + TWO_HOURS = "2h", + ONE_DAY = "1d", +} + export enum TimeRangeOptions { FIVE_MINS = "Last 5 minutes", THIRTY_MINS = "Last 30 minutes", @@ -57,6 +74,21 @@ export enum TimeRangeOptions { SEVEN_DAYS = "Last 7 days", } +export const REFRESH_VALUE: Record = { + [RefreshOptions.OFF]: "", + [RefreshOptions.ONE_SECOND]: "1s", + [RefreshOptions.FIVE_SECONDS]: "5s", + [RefreshOptions.TEN_SECONDS]: "10s", + [RefreshOptions.THIRTY_SECONDS]: "30s", + [RefreshOptions.ONE_MIN]: "1m", + [RefreshOptions.FIVE_MINS]: "5m", + [RefreshOptions.FIFTEEN_MINS]: "15m", + [RefreshOptions.THIRTY_MINS]: "30m", + [RefreshOptions.ONE_HOUR]: "1h", + [RefreshOptions.TWO_HOURS]: "2h", + [RefreshOptions.ONE_DAY]: "1d", +}; + export const TIME_RANGE_TO_FROM_VALUE: Record = { [TimeRangeOptions.FIVE_MINS]: "now-5m", [TimeRangeOptions.THIRTY_MINS]: "now-30m", @@ -358,13 +390,25 @@ export const Metrics = () => { const grafanaDefaultDatasource = dashboardDatasource ?? "Prometheus"; + const [refreshOption, setRefreshOption] = useState( + RefreshOptions.ONE_SECOND, + ); + const [timeRangeOption, setTimeRangeOption] = useState( TimeRangeOptions.FIVE_MINS, ); + + const [refresh, setRefresh] = useState(null); + const [[from, to], setTimeRange] = useState<[string | null, string | null]>([ null, null, ]); + + useEffect(() => { + setRefresh(REFRESH_VALUE[refreshOption]); + }, [refreshOption]); + useEffect(() => { const from = TIME_RANGE_TO_FROM_VALUE[timeRangeOption]; setTimeRange([from, "now"]); @@ -377,6 +421,8 @@ export const Metrics = () => { const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; + const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; + return (
{ className={classes.timeRangeButton} select size="small" - style={{ width: 120 }} + style={{ width: 80 }} + value={refreshOption} + onChange={({ target: { value } }) => { + setRefreshOption(value as RefreshOptions); + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + > + {Object.entries(RefreshOptions).map(([key, value]) => ( + + {value} + + ))} + + { setTimeRangeOption(value as TimeRangeOptions); }} variant="standard" + InputProps={{ + startAdornment: ( + + + + ), + }} > {Object.entries(TimeRangeOptions).map(([key, value]) => ( @@ -459,6 +535,7 @@ export const Metrics = () => { { type MetricsSectionProps = { metricConfig: MetricsSectionConfig; + refreshParams: string; timeRangeParams: string; dashboardUid: string; dashboardDatasource: string; @@ -518,6 +597,7 @@ type MetricsSectionProps = { const MetricsSection = ({ metricConfig: { title, contents }, + refreshParams, timeRangeParams, dashboardUid, dashboardDatasource, @@ -538,7 +618,7 @@ const MetricsSection = ({ {contents.map(({ title, pathParams }) => { const path = `/d-solo/${dashboardUid}?${pathParams}` + - `&refresh${timeRangeParams}&var-SessionName=${sessionName}&var-datasource=${dashboardDatasource}`; + `&${refreshParams}${timeRangeParams}&var-SessionName=${sessionName}&var-datasource=${dashboardDatasource}`; return ( Date: Wed, 17 Apr 2024 14:07:59 +0800 Subject: [PATCH 02/10] Update Metrics code to resolve merge conflicts Signed-off-by: Xiaoshuang Liu --- dashboard/client/src/pages/metrics/Metrics.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index 5bc98dd99779..8a63a453bd64 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -481,7 +481,7 @@ export const Metrics = () => { className={classes.timeRangeButton} select size="small" - style={{ width: 80 }} + style={{ width: 100 }} value={refreshOption} onChange={({ target: { value } }) => { setRefreshOption(value as RefreshOptions); From 7544a1d7809ad2b24d34de1f4b8ed25f5ba5d29d Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Fri, 14 Jun 2024 15:42:10 +0800 Subject: [PATCH 03/10] Added custom refresh times to Metrix in Serve and Serve deployment page Signed-off-by: liuxsh9 --- .../serve/ServeDeploymentMetricsSection.tsx | 55 ++++++++++++++++++- .../src/pages/serve/ServeMetricsSection.tsx | 53 +++++++++++++++++- 2 files changed, 103 insertions(+), 5 deletions(-) diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index 728276494267..f4e70557e992 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -1,13 +1,23 @@ -import { Box, Button, MenuItem, Paper, TextField } from "@mui/material"; +import { + Box, + Button, + InputAdornment, + MenuItem, + Paper, + TextField, +} from "@mui/material"; import createStyles from "@mui/styles/createStyles"; import makeStyles from "@mui/styles/makeStyles"; import React, { useContext, useEffect, useState } from "react"; +import { BiRefresh, BiTime } from "react-icons/bi"; import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; import { CollapsibleSection } from "../../common/CollapsibleSection"; import { ClassNameProps } from "../../common/props"; import { MetricConfig, + REFRESH_VALUE, + RefreshOptions, TIME_RANGE_TO_FROM_VALUE, TimeRangeOptions, } from "../metrics"; @@ -86,13 +96,23 @@ export const ServeReplicaMetricsSection = ({ const grafanaServeDashboardUid = dashboardUids?.serveDeployment ?? "rayServeDashboard"; + const [refreshOption, setRefreshOption] = useState( + RefreshOptions.ONE_SECOND, + ); + const [timeRangeOption, setTimeRangeOption] = useState( TimeRangeOptions.FIVE_MINS, ); + + const [refresh, setRefresh] = useState(null); + const [[from, to], setTimeRange] = useState<[string | null, string | null]>([ null, null, ]); + useEffect(() => { + setRefresh(REFRESH_VALUE[refreshOption]); + }, [refreshOption]); useEffect(() => { const from = TIME_RANGE_TO_FROM_VALUE[timeRangeOption]; setTimeRange([from, "now"]); @@ -101,6 +121,7 @@ export const ServeReplicaMetricsSection = ({ const fromParam = from !== null ? `&from=${from}` : ""; const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; + const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; const replicaButtonUrl = useViewServeDeploymentMetricsButtonUrl( deploymentName, @@ -121,6 +142,29 @@ export const ServeReplicaMetricsSection = ({ > View in Grafana + { + setRefreshOption(value as RefreshOptions); + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + > + {Object.entries(RefreshOptions).map(([key, value]) => ( + + {value} + + ))} + { setTimeRangeOption(value as TimeRangeOptions); }} + InputProps={{ + startAdornment: ( + + + + ), + }} > {Object.entries(TimeRangeOptions).map(([key, value]) => ( @@ -142,7 +193,7 @@ export const ServeReplicaMetricsSection = ({ {METRICS_CONFIG.map(({ title, pathParams }) => { const path = `/d-solo/${grafanaServeDashboardUid}?${pathParams}` + - `&refresh${timeRangeParams}&var-Deployment=${encodeURIComponent( + `${refreshParams}${timeRangeParams}&var-Deployment=${encodeURIComponent( deploymentName, )}&var-Replica=${encodeURIComponent( replicaId, diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index 953580ec548d..243789f21430 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -1,13 +1,23 @@ -import { Box, Button, MenuItem, Paper, TextField } from "@mui/material"; +import { + Box, + Button, + InputAdornment, + MenuItem, + Paper, + TextField, +} from "@mui/material"; import createStyles from "@mui/styles/createStyles"; import makeStyles from "@mui/styles/makeStyles"; import React, { useContext, useEffect, useState } from "react"; +import { BiRefresh, BiTime } from "react-icons/bi"; import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; import { CollapsibleSection } from "../../common/CollapsibleSection"; import { ClassNameProps } from "../../common/props"; import { MetricConfig, + REFRESH_VALUE, + RefreshOptions, TIME_RANGE_TO_FROM_VALUE, TimeRangeOptions, } from "../metrics"; @@ -110,14 +120,20 @@ export const ServeMetricsSection = ({ const { grafanaHost, prometheusHealth, dashboardUids, dashboardDatasource } = useContext(GlobalContext); const grafanaServeDashboardUid = dashboardUids?.serve ?? "rayServeDashboard"; - + const [refreshOption, setRefreshOption] = useState( + RefreshOptions.ONE_SECOND, + ); const [timeRangeOption, setTimeRangeOption] = useState( TimeRangeOptions.FIVE_MINS, ); + const [refresh, setRefresh] = useState(null); const [[from, to], setTimeRange] = useState<[string | null, string | null]>([ null, null, ]); + useEffect(() => { + setRefresh(REFRESH_VALUE[refreshOption]); + }, [refreshOption]); useEffect(() => { const from = TIME_RANGE_TO_FROM_VALUE[timeRangeOption]; setTimeRange([from, "now"]); @@ -126,6 +142,7 @@ export const ServeMetricsSection = ({ const fromParam = from !== null ? `&from=${from}` : ""; const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; + const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; return grafanaHost === undefined || !prometheusHealth ? null : ( @@ -139,6 +156,29 @@ export const ServeMetricsSection = ({ > View in Grafana + { + setRefreshOption(value as RefreshOptions); + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + > + {Object.entries(RefreshOptions).map(([key, value]) => ( + + {value} + + ))} + { setTimeRangeOption(value as TimeRangeOptions); }} + InputProps={{ + startAdornment: ( + + + + ), + }} > {Object.entries(TimeRangeOptions).map(([key, value]) => ( @@ -160,7 +207,7 @@ export const ServeMetricsSection = ({ {metricsConfig.map(({ title, pathParams }) => { const path = `/d-solo/${grafanaServeDashboardUid}?${pathParams}` + - `&refresh${timeRangeParams}&var-datasource=${dashboardDatasource}`; + `${refreshParams}${timeRangeParams}&var-datasource=${dashboardDatasource}`; return ( Date: Fri, 14 Jun 2024 16:01:56 +0800 Subject: [PATCH 04/10] Changed the default refresh time of metrics to 5 seconds Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 2 +- .../client/src/pages/serve/ServeDeploymentMetricsSection.tsx | 2 +- dashboard/client/src/pages/serve/ServeMetricsSection.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index 8a63a453bd64..c82888625855 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -391,7 +391,7 @@ export const Metrics = () => { const grafanaDefaultDatasource = dashboardDatasource ?? "Prometheus"; const [refreshOption, setRefreshOption] = useState( - RefreshOptions.ONE_SECOND, + RefreshOptions.FIVE_SECONDS, ); const [timeRangeOption, setTimeRangeOption] = useState( diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index f4e70557e992..de0853f570b2 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -97,7 +97,7 @@ export const ServeReplicaMetricsSection = ({ dashboardUids?.serveDeployment ?? "rayServeDashboard"; const [refreshOption, setRefreshOption] = useState( - RefreshOptions.ONE_SECOND, + RefreshOptions.FIVE_SECONDS, ); const [timeRangeOption, setTimeRangeOption] = useState( diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index 243789f21430..f298bf0109b6 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -121,7 +121,7 @@ export const ServeMetricsSection = ({ useContext(GlobalContext); const grafanaServeDashboardUid = dashboardUids?.serve ?? "rayServeDashboard"; const [refreshOption, setRefreshOption] = useState( - RefreshOptions.ONE_SECOND, + RefreshOptions.FIVE_SECONDS, ); const [timeRangeOption, setTimeRangeOption] = useState( TimeRangeOptions.FIVE_MINS, From 4d33947f52a0547852683a7370ba1769daaef741 Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Fri, 14 Jun 2024 16:16:35 +0800 Subject: [PATCH 05/10] Code optimization Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 2 +- .../client/src/pages/serve/ServeDeploymentMetricsSection.tsx | 2 +- dashboard/client/src/pages/serve/ServeMetricsSection.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index c82888625855..fe7203d628a9 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -421,7 +421,7 @@ export const Metrics = () => { const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; - const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; + const refreshParams = refresh ? `&refresh=${refresh}` : ""; return (
diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index de0853f570b2..e2c0b2e4f410 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -121,7 +121,7 @@ export const ServeReplicaMetricsSection = ({ const fromParam = from !== null ? `&from=${from}` : ""; const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; - const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; + const refreshParams = refresh ? `&refresh=${refresh}` : ""; const replicaButtonUrl = useViewServeDeploymentMetricsButtonUrl( deploymentName, diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index f298bf0109b6..124378664dba 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -142,7 +142,7 @@ export const ServeMetricsSection = ({ const fromParam = from !== null ? `&from=${from}` : ""; const toParam = to !== null ? `&to=${to}` : ""; const timeRangeParams = `${fromParam}${toParam}`; - const refreshParams = refresh !== "" ? `&refresh=${refresh}` : ""; + const refreshParams = refresh ? `&refresh=${refresh}` : ""; return grafanaHost === undefined || !prometheusHealth ? null : ( From 557573c04eaf03c65eaaad54dc47522a5fdfc9c0 Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Mon, 17 Jun 2024 09:08:57 +0800 Subject: [PATCH 06/10] maintain a consistent element style Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index fe7203d628a9..3db84e23fa74 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -481,7 +481,7 @@ export const Metrics = () => { className={classes.timeRangeButton} select size="small" - style={{ width: 100 }} + sx={{ width: 100 }} value={refreshOption} onChange={({ target: { value } }) => { setRefreshOption(value as RefreshOptions); @@ -509,7 +509,6 @@ export const Metrics = () => { onChange={({ target: { value } }) => { setTimeRangeOption(value as TimeRangeOptions); }} - variant="standard" InputProps={{ startAdornment: ( From 2c87334dfa5384a7be246c1531ba7157b269edbe Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Mon, 17 Jun 2024 11:50:08 +0800 Subject: [PATCH 07/10] Use the underlined style and adjust the twist width so that the full text appears Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 6 ++++-- .../src/pages/serve/ServeDeploymentMetricsSection.tsx | 6 ++++-- dashboard/client/src/pages/serve/ServeMetricsSection.tsx | 6 ++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index 3db84e23fa74..d1739f7b3500 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -481,11 +481,12 @@ export const Metrics = () => { className={classes.timeRangeButton} select size="small" - sx={{ width: 100 }} + sx={{ width: 80 }} value={refreshOption} onChange={({ target: { value } }) => { setRefreshOption(value as RefreshOptions); }} + variant="standard" InputProps={{ startAdornment: ( @@ -504,11 +505,12 @@ export const Metrics = () => { className={classes.timeRangeButton} select size="small" - sx={{ width: 100 }} + sx={{ width: 140 }} value={timeRangeOption} onChange={({ target: { value } }) => { setTimeRangeOption(value as TimeRangeOptions); }} + variant="standard" InputProps={{ startAdornment: ( diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index e2c0b2e4f410..6c8999cb8f67 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -146,11 +146,12 @@ export const ServeReplicaMetricsSection = ({ className={classes.timeRangeButton} select size="small" - sx={{ width: 100 }} + sx={{ width: 80 }} value={refreshOption} onChange={({ target: { value } }) => { setRefreshOption(value as RefreshOptions); }} + variant="standard" InputProps={{ startAdornment: ( @@ -169,11 +170,12 @@ export const ServeReplicaMetricsSection = ({ className={classes.timeRangeButton} select size="small" - style={{ width: 120 }} + style={{ width: 140 }} value={timeRangeOption} onChange={({ target: { value } }) => { setTimeRangeOption(value as TimeRangeOptions); }} + variant="standard" InputProps={{ startAdornment: ( diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index 124378664dba..fc185e04baac 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -160,11 +160,12 @@ export const ServeMetricsSection = ({ className={classes.timeRangeButton} select size="small" - sx={{ width: 100 }} + sx={{ width: 80 }} value={refreshOption} onChange={({ target: { value } }) => { setRefreshOption(value as RefreshOptions); }} + variant="standard" InputProps={{ startAdornment: ( @@ -183,11 +184,12 @@ export const ServeMetricsSection = ({ className={classes.timeRangeButton} select size="small" - style={{ width: 120 }} + style={{ width: 140 }} value={timeRangeOption} onChange={({ target: { value } }) => { setTimeRangeOption(value as TimeRangeOptions); }} + variant="standard" InputProps={{ startAdornment: ( From 24993219597922e8b1953e7b390c58b4a326e95d Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Mon, 17 Jun 2024 19:09:27 +0800 Subject: [PATCH 08/10] add help tip Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 7 +++++-- .../src/pages/serve/ServeDeploymentMetricsSection.tsx | 7 +++++-- dashboard/client/src/pages/serve/ServeMetricsSection.tsx | 7 +++++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index d1739f7b3500..98db46359927 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -19,6 +19,7 @@ import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; import { CollapsibleSection } from "../../common/CollapsibleSection"; import { ClassNameProps } from "../../common/props"; +import { HelpInfo } from "../../components/Tooltip"; import { MainNavPageInfo } from "../layout/mainNavContext"; import { MAIN_NAV_HEIGHT } from "../layout/MainNavLayout"; @@ -490,7 +491,7 @@ export const Metrics = () => { InputProps={{ startAdornment: ( - + ), }} @@ -501,6 +502,7 @@ export const Metrics = () => { ))} + Auto-refresh interval { InputProps={{ startAdornment: ( - + ), }} @@ -525,6 +527,7 @@ export const Metrics = () => { ))} + Time picker Tip: You can click on the legend to focus on a specific line in the diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index 6c8999cb8f67..3715d4f3d12d 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -14,6 +14,7 @@ import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; import { CollapsibleSection } from "../../common/CollapsibleSection"; import { ClassNameProps } from "../../common/props"; +import { HelpInfo } from "../../components/Tooltip"; import { MetricConfig, REFRESH_VALUE, @@ -155,7 +156,7 @@ export const ServeReplicaMetricsSection = ({ InputProps={{ startAdornment: ( - + ), }} @@ -166,6 +167,7 @@ export const ServeReplicaMetricsSection = ({ ))} + Auto-refresh interval - + ), }} @@ -190,6 +192,7 @@ export const ServeReplicaMetricsSection = ({ ))} + Time picker
{METRICS_CONFIG.map(({ title, pathParams }) => { diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index fc185e04baac..f63dfb126e5c 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -14,6 +14,7 @@ import { RiExternalLinkLine } from "react-icons/ri"; import { GlobalContext } from "../../App"; import { CollapsibleSection } from "../../common/CollapsibleSection"; import { ClassNameProps } from "../../common/props"; +import { HelpInfo } from "../../components/Tooltip"; import { MetricConfig, REFRESH_VALUE, @@ -169,7 +170,7 @@ export const ServeMetricsSection = ({ InputProps={{ startAdornment: ( - + ), }} @@ -180,6 +181,7 @@ export const ServeMetricsSection = ({ ))} + Auto-refresh interval - + ), }} @@ -204,6 +206,7 @@ export const ServeMetricsSection = ({ ))} + Time picker
{metricsConfig.map(({ title, pathParams }) => { From 0991687904cbf8aefddff98035452b1202cd58a1 Mon Sep 17 00:00:00 2001 From: Xiaoshuang Liu Date: Tue, 18 Jun 2024 08:54:39 +0800 Subject: [PATCH 09/10] Update dashboard/client/src/pages/metrics/Metrics.tsx Co-authored-by: Huaiwei Sun Signed-off-by: Xiaoshuang Liu --- dashboard/client/src/pages/metrics/Metrics.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index 98db46359927..b9fad065c88f 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -527,7 +527,7 @@ export const Metrics = () => { ))} - Time picker + Time range picker Tip: You can click on the legend to focus on a specific line in the From 10479738b867e1cb53d25ecd36f79f3e426e2eca Mon Sep 17 00:00:00 2001 From: liuxsh9 Date: Tue, 18 Jun 2024 09:00:54 +0800 Subject: [PATCH 10/10] remove one second option Signed-off-by: liuxsh9 --- dashboard/client/src/pages/metrics/Metrics.tsx | 2 -- .../client/src/pages/serve/ServeDeploymentMetricsSection.tsx | 2 +- dashboard/client/src/pages/serve/ServeMetricsSection.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx index b9fad065c88f..5b9d8ef08000 100644 --- a/dashboard/client/src/pages/metrics/Metrics.tsx +++ b/dashboard/client/src/pages/metrics/Metrics.tsx @@ -50,7 +50,6 @@ const useStyles = makeStyles((theme) => export enum RefreshOptions { OFF = "off", - ONE_SECOND = "1s", FIVE_SECONDS = "5s", TEN_SECONDS = "10s", THIRTY_SECONDS = "30s", @@ -77,7 +76,6 @@ export enum TimeRangeOptions { export const REFRESH_VALUE: Record = { [RefreshOptions.OFF]: "", - [RefreshOptions.ONE_SECOND]: "1s", [RefreshOptions.FIVE_SECONDS]: "5s", [RefreshOptions.TEN_SECONDS]: "10s", [RefreshOptions.THIRTY_SECONDS]: "30s", diff --git a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx index 3715d4f3d12d..fcfe8daee2a4 100644 --- a/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeDeploymentMetricsSection.tsx @@ -192,7 +192,7 @@ export const ServeReplicaMetricsSection = ({ ))} - Time picker + Time range picker
{METRICS_CONFIG.map(({ title, pathParams }) => { diff --git a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx index f63dfb126e5c..ad3e52a67f24 100644 --- a/dashboard/client/src/pages/serve/ServeMetricsSection.tsx +++ b/dashboard/client/src/pages/serve/ServeMetricsSection.tsx @@ -206,7 +206,7 @@ export const ServeMetricsSection = ({ ))} - Time picker + Time range picker
{metricsConfig.map(({ title, pathParams }) => {