Serve Dashboard features polish (#34391)

Filter out serve system endpoints from grafana dashboards Make it more clear when a log file is empty
ray-project · Apr 17, 2023 · c172a4c · c172a4c
1 parent 8ebdb48
commit c172a4c
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 36 deletions.
diff --git a/dashboard/client/src/pages/actor/ActorDetail.tsx b/dashboard/client/src/pages/actor/ActorDetail.tsx
@@ -56,7 +56,8 @@ const ActorDetailPage = () => {
     <div className={classes.root}>
       <MainNavPageInfo
         pageInfo={{
-          title: `Actor: ${params.id}`,
+          title: `${params.id}`,
+          pageTitle: `${params.id} | Actor`,
           id: "actor-detail",
           path: `/actors/${params.id}`,
         }}

diff --git a/dashboard/client/src/pages/job/JobDetailLayout.tsx b/dashboard/client/src/pages/job/JobDetailLayout.tsx
@@ -13,12 +13,13 @@ export const JobDetailLayout = () => {
 
   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
@@ -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
@@ -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
@@ -54,6 +54,7 @@ const NodeDetailPage = () => {
       <MainNavPageInfo
         pageInfo={{
           title: `Node: ${params.id}`,
+          pageTitle: `${params.id} | Node`,
           id: "node-detail",
           path: `/cluster/nodes/${params.id}`,
         }}

diff --git a/dashboard/client/src/pages/serve/ServeApplicationDetailPage.tsx b/dashboard/client/src/pages/serve/ServeApplicationDetailPage.tsx
@@ -254,6 +254,7 @@ export const ServeApplicationDetailLayout = () => {
         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
@@ -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
@@ -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
@@ -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(