[Feature] integrate RayDashboard with apiserver V2 (#4054)

Signed-off-by: Cheyu Wu <[email protected]>

Author: CheyuWu

dashboard/README.md

@@ -19,7 +19,7 @@ make install
 
 Now, you should be able to access the KubeRay apiserver at `http://localhost:31888/apis/v1/namespaces/default/jobs`.
 
-Now, to deploy the dashboard, you can run `npm run dev` and go to `localhost:3000/ray/jobs` on your browser. Note that
+Now, to deploy the dashboard, you can run `yarn dev` and go to `localhost:3000/ray/jobs` on your browser. Note that
 you might need to disable CORS by launching Chrome with
 
 ```bash

dashboard/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@kubernetes/client-node": "^1.3.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/joy": "^5.0.0-beta.32",
     "@mui/material": "^5.15.14",

dashboard/public/lokiIcon.png

@@ -1,11 +1,12 @@
 import { NextResponse } from "next/server";
+import { defaultConfig } from "@/utils/constants";
 
 export async function GET() {
   const config = {
     apiUrl:
       process.env.NEXT_PUBLIC_API_URL ||
       process.env.API_URL ||
-      "http://localhost:31888/apis/v1",
+      defaultConfig.url,
   };
 
   return NextResponse.json(config);

dashboard/public/ray.png

@@ -5,25 +5,26 @@ import AutorenewRoundedIcon from "@mui/icons-material/AutorenewRounded";
 import BlockIcon from "@mui/icons-material/Block";
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 import PendingRoundedIcon from "@mui/icons-material/PendingRounded";
+import { ClusterStatus } from "@/types/v2/raycluster";
 
 // There are two statues: JobStatus and JobDeploymentStatus. According to Ray CRD
 // https://github.com/ray-project/kuberay/blob/master/ray-operator/apis/ray/v1/rayjob_types.go
 // These are the enums:
 /*
   JobStatusNew       JobStatus = ""
-	JobStatusPending   JobStatus = "PENDING"
-	JobStatusRunning   JobStatus = "RUNNING"
-	JobStatusStopped   JobStatus = "STOPPED"
-	JobStatusSucceeded JobStatus = "SUCCEEDED"
-	JobStatusFailed    JobStatus = "FAILED"
+  JobStatusPending   JobStatus = "PENDING"
+  JobStatusRunning   JobStatus = "RUNNING"
+  JobStatusStopped   JobStatus = "STOPPED"
+  JobStatusSucceeded JobStatus = "SUCCEEDED"
+  JobStatusFailed    JobStatus = "FAILED"
 
   JobDeploymentStatusNew          JobDeploymentStatus = ""
-	JobDeploymentStatusInitializing JobDeploymentStatus = "Initializing"
-	JobDeploymentStatusRunning      JobDeploymentStatus = "Running"
-	JobDeploymentStatusComplete     JobDeploymentStatus = "Complete"
-	JobDeploymentStatusFailed       JobDeploymentStatus = "Failed"
-	JobDeploymentStatusSuspending   JobDeploymentStatus = "Suspending"
-	JobDeploymentStatusSuspended    JobDeploymentStatus = "Suspended"
+  JobDeploymentStatusInitializing JobDeploymentStatus = "Initializing"
+  JobDeploymentStatusRunning      JobDeploymentStatus = "Running"
+  JobDeploymentStatusComplete     JobDeploymentStatus = "Complete"
+  JobDeploymentStatusFailed       JobDeploymentStatus = "Failed"
+  JobDeploymentStatusSuspending   JobDeploymentStatus = "Suspending"
+  JobDeploymentStatusSuspended    JobDeploymentStatus = "Suspended"
 */
 // However, it seems like we also have WaitForDashboardReady status... which
 // is not in the Kuberay codebase.
@@ -33,14 +34,20 @@ import PendingRoundedIcon from "@mui/icons-material/PendingRounded";
 export const capitalize = (status: string) =>
   status.charAt(0).toUpperCase() + status.toLowerCase().slice(1);
 
-export const getClusterStatus = (status: string) => {
+export const getClusterStatusDisplay = (status: ClusterStatus) => {
   return capitalize(status);
 };
 
-export const getClusterStatusColor = (status: string) => {
+export const getClusterStatusColor = (
+  status: ClusterStatus,
+): ColorPaletteProp => {
   return {
-    PENDING: "warning",
     READY: "primary",
+    PENDING: "warning",
+    SUSPENDING: "warning",
+    FAILED: "danger",
+    SUSPENDED: "neutral",
+    UNKNOWN: "neutral",
   }[status] as ColorPaletteProp;
 };
 

dashboard/src/app/api/config/route.ts

@@ -1,6 +1,5 @@
 "use client";
 // Mostly from https://mui.com/joy-ui/react-table/#sort-and-selection
-import { JobRow } from "@/types/rayjob";
 import { Order } from "@/types/table";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import { Checkbox } from "@mui/joy";

dashboard/src/components/ClustersTable/ClusterStatusParser.tsx

@@ -5,25 +5,26 @@ import AutorenewRoundedIcon from "@mui/icons-material/AutorenewRounded";
 import BlockIcon from "@mui/icons-material/Block";
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 import PendingRoundedIcon from "@mui/icons-material/PendingRounded";
+import { JobStatus } from "@/types/v2/rayjob";
 
 // There are two statues: JobStatus and JobDeploymentStatus. According to Ray CRD
 // https://github.com/ray-project/kuberay/blob/master/ray-operator/apis/ray/v1/rayjob_types.go
 // These are the enums:
 /*
   JobStatusNew       JobStatus = ""
-	JobStatusPending   JobStatus = "PENDING"
-	JobStatusRunning   JobStatus = "RUNNING"
-	JobStatusStopped   JobStatus = "STOPPED"
-	JobStatusSucceeded JobStatus = "SUCCEEDED"
-	JobStatusFailed    JobStatus = "FAILED"
+  JobStatusPending   JobStatus = "PENDING"
+  JobStatusRunning   JobStatus = "RUNNING"
+  JobStatusStopped   JobStatus = "STOPPED"
+  JobStatusSucceeded JobStatus = "SUCCEEDED"
+  JobStatusFailed    JobStatus = "FAILED"
 
   JobDeploymentStatusNew          JobDeploymentStatus = ""
-	JobDeploymentStatusInitializing JobDeploymentStatus = "Initializing"
-	JobDeploymentStatusRunning      JobDeploymentStatus = "Running"
-	JobDeploymentStatusComplete     JobDeploymentStatus = "Complete"
-	JobDeploymentStatusFailed       JobDeploymentStatus = "Failed"
-	JobDeploymentStatusSuspending   JobDeploymentStatus = "Suspending"
-	JobDeploymentStatusSuspended    JobDeploymentStatus = "Suspended"
+  JobDeploymentStatusInitializing JobDeploymentStatus = "Initializing"
+  JobDeploymentStatusRunning      JobDeploymentStatus = "Running"
+  JobDeploymentStatusComplete     JobDeploymentStatus = "Complete"
+  JobDeploymentStatusFailed       JobDeploymentStatus = "Failed"
+  JobDeploymentStatusSuspending   JobDeploymentStatus = "Suspending"
+  JobDeploymentStatusSuspended    JobDeploymentStatus = "Suspended"
 */
 // However, it seems like we also have WaitForDashboardReady status... which
 // is not in the Kuberay codebase.
@@ -34,18 +35,20 @@ const capitalize = (status: string) =>
   status.charAt(0) + status.toLowerCase().slice(1);
 
 // Return the jobStatus.
-export const getJobStatus = (jobStatus: string) => {
-  return capitalize(jobStatus);
+export const getJobStatusDisplay = (status: JobStatus) => {
+  return capitalize(status);
 };
 
-export const getJobStatusColor = (status: string) => {
-  return {
+export const getJobStatusColor = (status: JobStatus): ColorPaletteProp => {
+  const statusColorMap: Record<string, ColorPaletteProp> = {
     PENDING: "warning",
     SUCCEEDED: "success",
     FAILED: "danger",
     RUNNING: "primary",
     STOPPED: "danger",
-  }[status] as ColorPaletteProp;
+    WAITING: "warning",
+  };
+  return statusColorMap[status] ?? "neutral";
 };
 
 export const getJobStatusIcon = (status: string) => {
@@ -59,6 +62,7 @@ export const getJobStatusIcon = (status: string) => {
     PENDING: <PendingRoundedIcon />,
     STOPPED: <BlockIcon />,
     FAILED: <BlockIcon />,
+    UNKNOWN: <PendingRoundedIcon />,
     RUNNING: (
       <AutorenewRoundedIcon
         sx={{