From c172a4c34b4984ee962973c1349ee6bc08f8f453 Mon Sep 17 00:00:00 2001 From: Alan Guo Date: Mon, 17 Apr 2023 06:16:56 -0700 Subject: [PATCH] Serve Dashboard features polish (#34391) Filter out serve system endpoints from grafana dashboards Make it more clear when a log file is empty --- .../client/src/pages/actor/ActorDetail.tsx | 3 +- .../client/src/pages/job/JobDetailLayout.tsx | 5 +-- .../client/src/pages/layout/mainNavContext.ts | 34 ++++++++++++++----- dashboard/client/src/pages/log/Logs.tsx | 2 +- .../client/src/pages/node/NodeDetail.tsx | 1 + .../serve/ServeApplicationDetailPage.tsx | 1 + .../pages/serve/ServeReplicaDetailPage.tsx | 1 + .../dashboards/serve_dashboard_panels.py | 32 ++++++++--------- .../serve_deployment_dashboard_panels.py | 14 ++++---- 9 files changed, 57 insertions(+), 36 deletions(-) diff --git a/dashboard/client/src/pages/actor/ActorDetail.tsx b/dashboard/client/src/pages/actor/ActorDetail.tsx index 80783d6b1baa..3951cb0ffa54 100644 --- a/dashboard/client/src/pages/actor/ActorDetail.tsx +++ b/dashboard/client/src/pages/actor/ActorDetail.tsx @@ -56,7 +56,8 @@ const ActorDetailPage = () => {
{ const pageInfo = job ? { - title: job.job_id ?? "Job details", + title: job.job_id ?? "Job", + pageTitle: job.job_id ? `${job.job_id} | Job` : undefined, id: "job-detail", path: job.job_id ? `/jobs/${job.job_id}` : undefined, } : { - title: "Job details", + title: "Job", id: "job-detail", path: undefined, }; diff --git a/dashboard/client/src/pages/layout/mainNavContext.ts b/dashboard/client/src/pages/layout/mainNavContext.ts index 49dc0f882fcb..0937fd082d2a 100644 --- a/dashboard/client/src/pages/layout/mainNavContext.ts +++ b/dashboard/client/src/pages/layout/mainNavContext.ts @@ -2,9 +2,13 @@ import React, { useCallback, useContext, useEffect, useState } from "react"; export type MainNavPage = { /** - * This gets shown in the breadcrumbs + * This gets shown in the breadcrumbs. */ title: string; + /** + * This gets shown as the HTML document page title. If this is not set, the title field will be used automatically. + */ + pageTitle?: string; /** * This helps identifies the current page a user is on and highlights the nav bar correctly. * This should be unique per page. @@ -21,7 +25,12 @@ export type MainNavPage = { export type MainNavContextType = { mainNavPageHierarchy: MainNavPage[]; addPage: (pageId: string) => void; - updatePage: (title: string, id: string, path?: string) => void; + updatePage: ( + title: string, + id: string, + path?: string, + pageTitle?: string, + ) => void; removePage: (pageId: string) => void; }; @@ -47,16 +56,17 @@ export const useMainNavState = (): MainNavContextType => { const addPage = useCallback((pageId) => { setPageHierarchy((hierarchy) => [ ...hierarchy, - { title: pageId, id: pageId }, + // Use dummy values for title and pageTitle to start. This gets filled by the next callback. + { title: pageId, pageTitle: pageId, id: pageId }, ]); }, []); - const updatePage = useCallback((title, id, path) => { + const updatePage = useCallback((title, id, path, pageTitle) => { setPageHierarchy((hierarchy) => { const pageIndex = hierarchy.findIndex((page) => page.id === id); return [ ...hierarchy.slice(0, pageIndex), - { title, id, path }, + { title, pageTitle, id, path }, ...hierarchy.slice(pageIndex + 1), ]; }); @@ -103,14 +113,20 @@ const useMainNavPage = (pageInfo: MainNavPage) => { }; }, [pageInfo.id, addPage, removePage]); - // Second effect to allow for the title of a page to change over. + // Second effect to allow for the title of a page to change. useEffect(() => { - updatePage(pageInfo.title, pageInfo.id, pageInfo.path); - document.title = pageInfo.title; + updatePage(pageInfo.title, pageInfo.id, pageInfo.path, pageInfo.pageTitle); + document.title = `${pageInfo.pageTitle ?? pageInfo.title} | Ray Dashboard`; return () => { document.title = "Ray Dashboard"; }; - }, [pageInfo.title, pageInfo.id, pageInfo.path, updatePage]); + }, [ + pageInfo.title, + pageInfo.id, + pageInfo.path, + pageInfo.pageTitle, + updatePage, + ]); }; type MainNavPageProps = { diff --git a/dashboard/client/src/pages/log/Logs.tsx b/dashboard/client/src/pages/log/Logs.tsx index 280a715bce60..a44253595a51 100644 --- a/dashboard/client/src/pages/log/Logs.tsx +++ b/dashboard/client/src/pages/log/Logs.tsx @@ -83,7 +83,7 @@ const useLogs = ({ theme }: LogsProps) => { if (res) { setLogs(res); } else { - setLogs("(null)"); + setLogs("(This file is empty.)"); } }) .catch(() => { diff --git a/dashboard/client/src/pages/node/NodeDetail.tsx b/dashboard/client/src/pages/node/NodeDetail.tsx index 6f357e44fc2e..6c3399301777 100644 --- a/dashboard/client/src/pages/node/NodeDetail.tsx +++ b/dashboard/client/src/pages/node/NodeDetail.tsx @@ -54,6 +54,7 @@ const NodeDetailPage = () => { { pageInfo={{ id: "serveApplicationDetail", title: appName, + pageTitle: `${appName} | Serve Application`, path: `/serve/applications/${appName}`, }} /> diff --git a/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx b/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx index 25bf1e86e247..be40900f8625 100644 --- a/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx +++ b/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx @@ -62,6 +62,7 @@ export const ServeReplicaDetailPage = () => { pageInfo={{ id: "serveReplicaDetail", title: replica_id, + pageTitle: `${replica_id} | Serve Replica`, path: `/serve/applications/${encodeURIComponent( appName, )}/${encodeURIComponent(deployment.name)}/${encodeURIComponent( diff --git a/dashboard/modules/metrics/dashboards/serve_dashboard_panels.py b/dashboard/modules/metrics/dashboards/serve_dashboard_panels.py index 674e418cd9ad..b66b865edce0 100644 --- a/dashboard/modules/metrics/dashboards/serve_dashboard_panels.py +++ b/dashboard/modules/metrics/dashboards/serve_dashboard_panels.py @@ -56,7 +56,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_num_http_requests{{route=~"$Route",{global_filters}}}[5m])) by (route)', + expr='sum(rate(ray_serve_num_http_requests{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (route)', legend="{{route}}", ), ], @@ -69,7 +69,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_num_http_error_requests{{route=~"$Route",{global_filters}}}[5m])) by (route)', + expr='sum(rate(ray_serve_num_http_error_requests{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (route)', legend="{{route}}", ), ], @@ -82,11 +82,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (route, le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (route, le))', legend="{{route}}", ), Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -101,11 +101,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (route, le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (route, le))', legend="{{route}}", ), Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -120,11 +120,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.99, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (route, le))', + expr='histogram_quantile(0.99, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (route, le))', legend="{{route}}", ), Target( - expr='histogram_quantile(0.99, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.99, sum(rate(ray_serve_http_request_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -152,7 +152,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_deployment_request_counter{{route=~"$Route",{global_filters}}}[5m])) by (deployment)', + expr='sum(rate(ray_serve_deployment_request_counter{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment)', legend="{{deployment}}", ), ], @@ -165,7 +165,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_deployment_error_counter{{route=~"$Route",{global_filters}}}[5m])) by (deployment)', + expr='sum(rate(ray_serve_deployment_error_counter{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment)', legend="{{deployment}}", ), ], @@ -178,11 +178,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, le))', legend="{{deployment}}", ), Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -197,11 +197,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, le))', legend="{{deployment}}", ), Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -216,11 +216,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, le))', + expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, le))', legend="{{deployment}}", ), Target( - expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], diff --git a/dashboard/modules/metrics/dashboards/serve_deployment_dashboard_panels.py b/dashboard/modules/metrics/dashboards/serve_deployment_dashboard_panels.py index 1214b7b8e220..99c649f6a783 100644 --- a/dashboard/modules/metrics/dashboards/serve_deployment_dashboard_panels.py +++ b/dashboard/modules/metrics/dashboards/serve_deployment_dashboard_panels.py @@ -28,7 +28,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_deployment_request_counter{{route=~"$Route",{global_filters}}}[5m])) by (deployment, replica)', + expr='sum(rate(ray_serve_deployment_request_counter{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, replica)', legend="{{replica}}", ), ], @@ -41,7 +41,7 @@ unit="qps", targets=[ Target( - expr='sum(rate(ray_serve_deployment_error_counter{{route=~"$Route",{global_filters}}}[5m])) by (deployment, replica)', + expr='sum(rate(ray_serve_deployment_error_counter{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, replica)', legend="{{replica}}", ), ], @@ -54,11 +54,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, replica, le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, replica, le))', legend="{{replica}}", ), Target( - expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.5, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -73,11 +73,11 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, replica, le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, replica, le))', legend="{{replica}}", ), Target( - expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (le))', + expr='histogram_quantile(0.9, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (le))', legend="Total", ), ], @@ -92,7 +92,7 @@ unit="ms", targets=[ Target( - expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",{global_filters}}}[5m])) by (deployment, replica, le))', + expr='histogram_quantile(0.99, sum(rate(ray_serve_deployment_processing_latency_ms_bucket{{route=~"$Route",route!~"/-/.*",{global_filters}}}[5m])) by (deployment, replica, le))', legend="{{replica}}", ), Target(