@@ -109,7 +110,7 @@ export const ServeApplicationsListPage = () => {
style={{ margin: 8, width: 120 }}
options={Array.from(
new Set(
- allServeApplications.map((e) => (e.name ? e.name : "-")),
+ allServeDeployments.map((e) => (e.name ? e.name : "-")),
),
)}
onInputChange={(_: any, value: string) => {
@@ -125,7 +126,7 @@ export const ServeApplicationsListPage = () => {
e.status)),
+ new Set(allServeDeployments.map((e) => e.status)),
)}
onInputChange={(_: any, value: string) => {
changeFilter("status", value.trim());
@@ -134,6 +135,18 @@ export const ServeApplicationsListPage = () => {
)}
/>
+ e.applicationName)),
+ )}
+ onInputChange={(_: any, value: string) => {
+ changeFilter("applicationName", value.trim());
+ }}
+ renderInput={(params: TextFieldProps) => (
+
+ )}
+ />
{
setPage("pageNo", pageNo)}
@@ -184,15 +197,16 @@ export const ServeApplicationsListPage = () => {
- {filteredServeApplications
+ {filteredServeDeployments
.slice(
(page.pageNo - 1) * page.pageSize,
page.pageNo * page.pageSize,
)
- .map((application) => (
- (
+
))}
diff --git a/dashboard/client/src/pages/serve/ServeSystemDetailPage.tsx b/dashboard/client/src/pages/serve/ServeSystemDetailPage.tsx
index 81b3171ced2d..cab3b5b1484a 100644
--- a/dashboard/client/src/pages/serve/ServeSystemDetailPage.tsx
+++ b/dashboard/client/src/pages/serve/ServeSystemDetailPage.tsx
@@ -4,7 +4,7 @@ import React from "react";
import { Outlet } from "react-router-dom";
import Loading from "../../components/Loading";
import { MainNavPageInfo } from "../layout/mainNavContext";
-import { useServeApplications } from "./hook/useServeApplications";
+import { useServeDeployments } from "./hook/useServeApplications";
import { ServeSystemDetails } from "./ServeSystemDetails";
const useStyles = makeStyles((theme) =>
@@ -22,7 +22,7 @@ export const ServeSystemDetailPage = () => {
const classes = useStyles();
const { serveDetails, proxies, proxiesPage, setProxiesPage, error } =
- useServeApplications();
+ useServeDeployments();
if (error) {
return {error.toString()};
diff --git a/dashboard/client/src/pages/serve/ServeSystemDetails.component.test.tsx b/dashboard/client/src/pages/serve/ServeSystemDetails.component.test.tsx
index e500ccf40d74..e87fb6c263b5 100644
--- a/dashboard/client/src/pages/serve/ServeSystemDetails.component.test.tsx
+++ b/dashboard/client/src/pages/serve/ServeSystemDetails.component.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
import React from "react";
import { ActorEnum } from "../../type/actor";
import {
- ServeApplicationStatus,
+ ServeDeploymentStatus,
ServeSystemActorStatus,
} from "../../type/serve";
import { TEST_APP_WRAPPER } from "../../util/test-utils";
@@ -14,7 +14,7 @@ const mockedUseFetchActor = jest.mocked(useFetchActor);
describe("ServeSystemDetails", () => {
it("renders", async () => {
- expect.assertions(7);
+ expect.assertions(6);
mockedUseFetchActor.mockReturnValue({
data: {
@@ -24,16 +24,16 @@ describe("ServeSystemDetails", () => {
render(
{
{ wrapper: TEST_APP_WRAPPER },
);
await screen.findByText("STARTING");
- // Controller and Proxy
- expect(screen.getAllByText("HEALTHY")).toHaveLength(2);
+ // Controller, Proxy, and Deployment
+ expect(screen.getAllByText("HEALTHY")).toHaveLength(3);
expect(screen.getByText("STARTING")).toBeInTheDocument();
- // Applications
- expect(screen.getByText("RUNNING")).toBeInTheDocument();
- expect(screen.getByText("DEPLOYING")).toBeInTheDocument();
+ // Other deployments
+ expect(screen.getByText("UPDATING")).toBeInTheDocument();
expect(screen.getByText("UNHEALTHY")).toBeInTheDocument();
expect(
diff --git a/dashboard/client/src/pages/serve/ServeSystemDetails.tsx b/dashboard/client/src/pages/serve/ServeSystemDetails.tsx
index 8a64ca90cb6c..0e0cc8674d37 100644
--- a/dashboard/client/src/pages/serve/ServeSystemDetails.tsx
+++ b/dashboard/client/src/pages/serve/ServeSystemDetails.tsx
@@ -18,8 +18,8 @@ import { MetadataSection } from "../../components/MetadataSection";
import { StatusChip, StatusChipProps } from "../../components/StatusChip";
import { HelpInfo } from "../../components/Tooltip";
import {
- ServeApplication,
ServeApplicationsRsp,
+ ServeDeployment,
ServeProxy,
} from "../../type/serve";
import { useFetchActor } from "../actor/hook/useActorDetail";
@@ -158,13 +158,13 @@ export const ServeSystemDetails = ({
type ServeSystemPreviewProps = {
serveDetails: ServeDetails;
proxies: ServeProxy[];
- allApplications: ServeApplication[];
+ allDeployments: ServeDeployment[];
};
export const ServeSystemPreview = ({
serveDetails,
proxies,
- allApplications,
+ allDeployments,
}: ServeSystemPreviewProps) => {
const { data: controllerActor } = useFetchActor(
serveDetails.controller_info.actor_id,
@@ -200,12 +200,12 @@ export const ServeSystemPreview = ({
),
},
{
- label: "Application status",
+ label: "Deployments status",
content: (
),
},
diff --git a/dashboard/client/src/pages/serve/hook/useServeApplications.ts b/dashboard/client/src/pages/serve/hook/useServeApplications.ts
index 3b9847eb93dd..b8c110b11855 100644
--- a/dashboard/client/src/pages/serve/hook/useServeApplications.ts
+++ b/dashboard/client/src/pages/serve/hook/useServeApplications.ts
@@ -12,15 +12,18 @@ const SERVE_PROXY_STATUS_SORT_ORDER: Record = {
[ServeSystemActorStatus.DRAINING]: 3,
};
-export const useServeApplications = () => {
+export const useServeDeployments = () => {
const [page, setPage] = useState({ pageSize: 10, pageNo: 1 });
const [filter, setFilter] = useState<
{
- key: "name" | "status";
+ key: "name" | "status" | "applicationName";
val: string;
}[]
>([]);
- const changeFilter = (key: "name" | "status", val: string) => {
+ const changeFilter = (
+ key: "name" | "status" | "applicationName",
+ val: string,
+ ) => {
const f = filter.find((e) => e.key === key);
if (f) {
f.val = val;
@@ -36,12 +39,26 @@ export const useServeApplications = () => {
});
const { data, error } = useSWR(
- "useServeApplications",
+ "useServeDeployments",
async () => {
const rsp = await getServeApplications();
if (rsp) {
- return rsp.data;
+ const serveApplicationsList = rsp.data
+ ? Object.values(rsp.data.applications).sort(
+ (a, b) =>
+ (b.last_deployed_time_s ?? 0) - (a.last_deployed_time_s ?? 0),
+ )
+ : [];
+
+ const serveDeploymentsList = serveApplicationsList.flatMap((app) =>
+ Object.values(app.deployments).map((d) => ({
+ ...d,
+ applicationName: app.name,
+ application: app,
+ })),
+ );
+ return { ...rsp.data, serveDeploymentsList };
}
},
{ refreshInterval: API_REFRESH_INTERVAL_MS },
@@ -55,11 +72,6 @@ export const useServeApplications = () => {
controller_info: data.controller_info,
}
: undefined;
- const serveApplicationsList = data
- ? Object.values(data.applications).sort(
- (a, b) => (b.last_deployed_time_s ?? 0) - (a.last_deployed_time_s ?? 0),
- )
- : [];
const proxies =
data && data.proxies
@@ -70,9 +82,11 @@ export const useServeApplications = () => {
)
: [];
+ const serveDeploymentsList = data?.serveDeploymentsList ?? [];
+
return {
serveDetails,
- filteredServeApplications: serveApplicationsList.filter((app) =>
+ filteredServeDeployments: serveDeploymentsList.filter((app) =>
filter.every((f) =>
f.val ? app[f.key] && (app[f.key] ?? "").includes(f.val) : true,
),
@@ -85,7 +99,7 @@ export const useServeApplications = () => {
proxiesPage,
setProxiesPage: (key: string, val: number) =>
setProxiesPage({ ...proxiesPage, [key]: val }),
- allServeApplications: serveApplicationsList,
+ allServeDeployments: serveDeploymentsList,
};
};
@@ -151,6 +165,67 @@ export const useServeApplicationDetails = (
};
};
+export const useServeDeploymentDetails = (
+ applicationName: string | undefined,
+ deploymentName: string | undefined,
+) => {
+ const [page, setPage] = useState({ pageSize: 10, pageNo: 1 });
+ const [filter, setFilter] = useState<
+ {
+ key: "replica_id" | "state";
+ val: string;
+ }[]
+ >([]);
+ const changeFilter = (key: "replica_id" | "state", val: string) => {
+ const f = filter.find((e) => e.key === key);
+ if (f) {
+ f.val = val;
+ } else {
+ filter.push({ key, val });
+ }
+ setFilter([...filter]);
+ };
+
+ // TODO(aguo): Use a fetch by deploymentId endpoint?
+ const { data, error } = useSWR(
+ "useServeApplications",
+ async () => {
+ const rsp = await getServeApplications();
+
+ if (rsp) {
+ return rsp.data;
+ }
+ },
+ { refreshInterval: API_REFRESH_INTERVAL_MS },
+ );
+
+ const application = applicationName
+ ? data?.applications?.[applicationName !== "-" ? applicationName : ""]
+ : undefined;
+ const deployment = deploymentName
+ ? application?.deployments[deploymentName]
+ : undefined;
+
+ const replicas = deployment?.replicas ?? [];
+
+ // Need to expose loading because it's not clear if undefined values
+ // for application, deployment, or replica means loading or missing data.
+ return {
+ loading: !data && !error,
+ application,
+ deployment,
+ filteredReplicas: replicas.filter((replica) =>
+ filter.every((f) =>
+ f.val ? replica[f.key] && (replica[f.key] ?? "").includes(f.val) : true,
+ ),
+ ),
+ changeFilter,
+ page,
+ setPage: (key: string, val: number) => setPage({ ...page, [key]: val }),
+ error,
+ };
+};
+
export const useServeReplicaDetails = (
applicationName: string | undefined,
deploymentName: string | undefined,
@@ -158,7 +233,7 @@ export const useServeReplicaDetails = (
) => {
// TODO(aguo): Use a fetch by replicaId endpoint?
const { data, error } = useSWR(
- "useServeReplicaDetails",
+ "useServeApplications",
async () => {
const rsp = await getServeApplications();
@@ -192,7 +267,7 @@ export const useServeReplicaDetails = (
export const useServeProxyDetails = (proxyId: string | undefined) => {
const { data, error, isLoading } = useSWR(
- "useServeProxyDetails",
+ "useServeApplications",
async () => {
const rsp = await getServeApplications();
@@ -216,7 +291,7 @@ export const useServeProxyDetails = (proxyId: string | undefined) => {
export const useServeControllerDetails = () => {
const { data, error, isLoading } = useSWR(
- "useServeControllerDetails",
+ "useServeApplications",
async () => {
const rsp = await getServeApplications();