Add runtime env metadata to jobs detail page. (#34984)

Also makes the job detail page work when accessed via the submission id in the path. This will enable future work to link to submission-only jobs. Also fixes bug where the grafana dashboard dropdowns for Deployments and Replicas don't work until after the first request was received for that replica or deployment.
ray-project · May 10, 2023 · c70331d · c70331d
1 parent acffd2f
commit c70331d
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 73 deletions.
diff --git a/dashboard/client/src/common/util.ts b/dashboard/client/src/common/util.ts
@@ -1,3 +1,5 @@
+import _ from "lodash";
+
 export const getWeightedAverage = (
   input: {
     weight: number;
@@ -24,3 +26,15 @@ export const filterObj = (obj: Record<string, unknown>, filterFn: any) =>
 
 export const mapObj = (obj: Record<string, unknown>, filterFn: any) =>
   Object.fromEntries(Object.entries(obj).map(filterFn) as any[]);
+
+export const filterRuntimeEnvSystemVariables = (
+  runtime_env: Record<string, any>,
+): Record<string, any> => {
+  const out = _.pickBy(runtime_env, (_, key) => {
+    if (key.startsWith("_")) {
+      return false;
+    }
+    return true;
+  });
+  return out;
+};
diff --git a/dashboard/client/src/common/util.unit.test.ts b/dashboard/client/src/common/util.unit.test.ts
@@ -0,0 +1,34 @@
+import { filterRuntimeEnvSystemVariables } from "./util";
+
+describe("filterRuntimeEnvSystemVariables", () => {
+  it("filters out system variables", () => {
+    expect(
+      filterRuntimeEnvSystemVariables({
+        pip: {
+          pip_check: true,
+          packages: ["chess", "foo", "bar"],
+          pip_version: "1.2.3",
+        },
+        env_vars: {
+          FOO: "foo",
+          BAR: "5",
+        },
+        working_dir: ".",
+        _ray_release: "2.3.1",
+        _ray_commit: "12345abc",
+        _inject_current_ray: false,
+      }),
+    ).toEqual({
+      pip: {
+        pip_check: true,
+        packages: ["chess", "foo", "bar"],
+        pip_version: "1.2.3",
+      },
+      env_vars: {
+        FOO: "foo",
+        BAR: "5",
+      },
+      working_dir: ".",
+    });
+  });
+});
diff --git a/dashboard/client/src/components/ActorTable.tsx b/dashboard/client/src/components/ActorTable.tsx
@@ -184,8 +184,8 @@ const ActorTable = ({
       ),
     },
     { label: "Uptime" },
-    { label: "Job Id" },
-    { label: "Pid" },
+    { label: "Job ID" },
+    { label: "PID" },
     { label: "IP" },
     {
       label: "Restarted",
@@ -196,16 +196,16 @@ const ActorTable = ({
       ),
     },
     {
-      label: "Placement Group Id",
+      label: "Placement group ID",
       helpInfo: (
         <Typography>
-          The id of the placement group this actor is scheduled to.
+          The ID of the placement group this actor is scheduled to.
           <br />
         </Typography>
       ),
     },
     {
-      label: "Required Resources",
+      label: "Required resources",
       helpInfo: (
         <Typography>
           The required Ray resources to start an actor.
@@ -223,7 +223,7 @@ const ActorTable = ({
       ),
     },
     {
-      label: "Exit Detail",
+      label: "Exit detail",
       helpInfo: (
         <Typography>
           The detail of an actor exit. Only available when an actor is dead.

diff --git a/dashboard/client/src/components/TaskTable.tsx b/dashboard/client/src/components/TaskTable.tsx
@@ -60,7 +60,7 @@ const TaskTable = ({
   const columns = [
     { label: "ID" },
     { label: "Name" },
-    { label: "Job Id" },
+    { label: "Job ID" },
     { label: "State" },
     {
       label: "Actions",
@@ -77,13 +77,13 @@ const TaskTable = ({
       ),
     },
     { label: "Duration" },
-    { label: "Function or Class Name" },
-    { label: "Node Id" },
-    { label: "Actor_id" },
-    { label: "Worker_id" },
+    { label: "Function or class name" },
+    { label: "Node ID" },
+    { label: "Actor ID" },
+    { label: "Worker ID" },
     { label: "Type" },
-    { label: "Placement Group Id" },
-    { label: "Required Resources" },
+    { label: "Placement group ID" },
+    { label: "Required resources" },
   ];
 
   return (

diff --git a/dashboard/client/src/pages/job/JobDetail.tsx b/dashboard/client/src/pages/job/JobDetail.tsx
@@ -42,7 +42,6 @@ const useStyle = makeStyles((theme) => ({
 export const JobDetailChartsPage = () => {
   const classes = useStyle();
   const { job, msg, isLoading, params } = useJobDetail();
-  const jobId = params.id;
 
   const [taskListFilter, setTaskListFilter] = useState<string>();
   const [taskTableExpanded, setTaskTableExpanded] = useState(false);
@@ -162,7 +161,7 @@ export const JobDetailChartsPage = () => {
       >
         <Section>
           <JobProgressBar
-            jobId={jobId}
+            jobId={job.job_id ? job.job_id : undefined}
             job={job}
             onClickLink={handleClickLink}
           />
@@ -181,15 +180,17 @@ export const JobDetailChartsPage = () => {
         </CollapsibleSection>
       )}
 
-      <CollapsibleSection
-        title="Task Timeline (beta)"
-        startExpanded
-        className={classes.section}
-      >
-        <Section>
-          <TaskTimeline jobId={jobId} />
-        </Section>
-      </CollapsibleSection>
+      {job.job_id && (
+        <CollapsibleSection
+          title="Task Timeline (beta)"
+          startExpanded
+          className={classes.section}
+        >
+          <Section>
+            <TaskTimeline jobId={job.job_id} />
+          </Section>
+        </CollapsibleSection>
+      )}
 
       <CollapsibleSection
         title="Autoscaler"
@@ -237,51 +238,55 @@ export const JobDetailChartsPage = () => {
         </Box>
       </CollapsibleSection>
 
-      <CollapsibleSection
-        ref={taskTableRef}
-        title="Task Table"
-        expanded={taskTableExpanded}
-        onExpandButtonClick={() => {
-          setTaskTableExpanded(!taskTableExpanded);
-        }}
-        className={classes.section}
-      >
-        <Section>
-          <TaskList
-            jobId={jobId}
-            filterToTaskId={taskListFilter}
-            onFilterChange={handleTaskListFilterChange}
-          />
-        </Section>
-      </CollapsibleSection>
+      {job.job_id && (
+        <React.Fragment>
+          <CollapsibleSection
+            ref={taskTableRef}
+            title="Task Table"
+            expanded={taskTableExpanded}
+            onExpandButtonClick={() => {
+              setTaskTableExpanded(!taskTableExpanded);
+            }}
+            className={classes.section}
+          >
+            <Section>
+              <TaskList
+                jobId={job.job_id}
+                filterToTaskId={taskListFilter}
+                onFilterChange={handleTaskListFilterChange}
+              />
+            </Section>
+          </CollapsibleSection>
 
-      <CollapsibleSection
-        ref={actorTableRef}
-        title="Actor Table"
-        expanded={actorTableExpanded}
-        onExpandButtonClick={() => {
-          setActorTableExpanded(!actorTableExpanded);
-        }}
-        className={classes.section}
-      >
-        <Section>
-          <ActorList
-            jobId={jobId}
-            filterToActorId={actorListFilter}
-            onFilterChange={handleActorListFilterChange}
-            detailPathPrefix="actors"
-          />
-        </Section>
-      </CollapsibleSection>
+          <CollapsibleSection
+            ref={actorTableRef}
+            title="Actor Table"
+            expanded={actorTableExpanded}
+            onExpandButtonClick={() => {
+              setActorTableExpanded(!actorTableExpanded);
+            }}
+            className={classes.section}
+          >
+            <Section>
+              <ActorList
+                jobId={job.job_id}
+                filterToActorId={actorListFilter}
+                onFilterChange={handleActorListFilterChange}
+                detailPathPrefix="actors"
+              />
+            </Section>
+          </CollapsibleSection>
 
-      <CollapsibleSection
-        title="Placement Group Table"
-        className={classes.section}
-      >
-        <Section>
-          <PlacementGroupList jobId={jobId} />
-        </Section>
-      </CollapsibleSection>
+          <CollapsibleSection
+            title="Placement Group Table"
+            className={classes.section}
+          >
+            <Section>
+              <PlacementGroupList jobId={job.job_id} />
+            </Section>
+          </CollapsibleSection>
+        </React.Fragment>
+      )}
     </div>
   );
 };

diff --git a/dashboard/client/src/pages/job/JobDetailInfoPage.tsx b/dashboard/client/src/pages/job/JobDetailInfoPage.tsx
@@ -1,13 +1,17 @@
 import { createStyles, makeStyles, Typography } from "@material-ui/core";
 import React from "react";
-import { CodeDialogButtonWithPreview } from "../../common/CodeDialogButton";
+import {
+  CodeDialogButton,
+  CodeDialogButtonWithPreview,
+} from "../../common/CodeDialogButton";
 import { DurationText } from "../../common/DurationText";
 import { formatDateFromTimeMs } from "../../common/formatUtils";
 import { JobStatusWithIcon } from "../../common/JobStatus";
 import {
   CpuProfilingLink,
   CpuStackTraceLink,
 } from "../../common/ProfilingLink";
+import { filterRuntimeEnvSystemVariables } from "../../common/util";
 import Loading from "../../components/Loading";
 import { MetadataSection } from "../../components/MetadataSection";
 import { StatusChip } from "../../components/StatusChip";
@@ -138,6 +142,23 @@ export const JobMetadataSection = ({ job }: JobMetadataSectionProps) => {
             value: job.end_time ? formatDateFromTimeMs(job.end_time) : "-",
           },
         },
+        {
+          label: "Runtime environemnt",
+          ...(job.runtime_env
+            ? {
+                content: (
+                  <CodeDialogButton
+                    title="Runtime environment"
+                    code={filterRuntimeEnvSystemVariables(job.runtime_env)}
+                  />
+                ),
+              }
+            : {
+                content: {
+                  value: "-",
+                },
+              }),
+        },
         ...(job.type === "SUBMISSION"
           ? [
               {

diff --git a/dashboard/client/src/pages/job/JobProgressBar.tsx b/dashboard/client/src/pages/job/JobProgressBar.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type JobProgressBarProps = {
-  jobId: string;
+  jobId: string | undefined;
   job: Pick<UnifiedJob, "status">;
 } & Pick<AdvancedProgressBarProps, "onClickLink">;
 

diff --git a/dashboard/modules/metrics/dashboards/serve_deployment_grafana_dashboard_base.json b/dashboard/modules/metrics/dashboards/serve_deployment_grafana_dashboard_base.json
@@ -36,7 +36,7 @@
           ]
         },
         "datasource": "Prometheus",
-        "definition": "label_values(ray_serve_deployment_request_counter{{{global_filters}}}, deployment)",
+        "definition": "label_values(ray_serve_deployment_replica_healthy{{{global_filters}}}, deployment)",
         "description": null,
         "error": null,
         "hide": 0,
@@ -46,7 +46,7 @@
         "name": "Deployment",
         "options": [],
         "query": {
-          "query": "label_values(ray_serve_deployment_request_counter{{{global_filters}}}, deployment)",
+          "query": "label_values(ray_serve_deployment_replica_healthy{{{global_filters}}}, deployment)",
           "refId": "Prometheus-Instance-Variable-Query"
         },
         "refresh": 2,
@@ -71,7 +71,7 @@
           ]
         },
         "datasource": "Prometheus",
-        "definition": "label_values(ray_serve_deployment_request_counter{{deployment=~\"$Deployment\",{global_filters}}}, replica)",
+        "definition": "label_values(ray_serve_deployment_replica_healthy{{deployment=~\"$Deployment\",{global_filters}}}, replica)",
         "description": null,
         "error": null,
         "hide": 0,
@@ -81,7 +81,7 @@
         "name": "Replica",
         "options": [],
         "query": {
-          "query": "label_values(ray_serve_deployment_request_counter{{deployment=~\"$Deployment\",{global_filters}}}, replica)",
+          "query": "label_values(ray_serve_deployment_replica_healthy{{deployment=~\"$Deployment\",{global_filters}}}, replica)",
           "refId": "Prometheus-Instance-Variable-Query"
         },
         "refresh": 2,