From ce6618b7aa759d2b78748fe8e2bd3b4f1bb0bcfc Mon Sep 17 00:00:00 2001 From: Alan Guo Date: Thu, 25 Jul 2024 22:06:20 -0700 Subject: [PATCH 1/2] Don't render duplicate log details when logs are not json. Add deployment name to replica dropdown Signed-off-by: Alan Guo --- .../src/components/LogView/LogVirtualView.tsx | 76 ++++++++++--------- .../pages/serve/ServeDeploymentsListPage.tsx | 1 + .../src/pages/serve/ServeEntityLogViewer.tsx | 31 ++++++-- 3 files changed, 68 insertions(+), 40 deletions(-) diff --git a/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx b/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx index e08e6c632802..e756d00d6c11 100644 --- a/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx +++ b/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx @@ -94,8 +94,8 @@ export type LogVirtualViewProps = { }; type LogLineDetailDialogProps = { - formattedLogLine: string; - message?: string; + formattedLogLine: string | null; + message: string; onClose: () => void; }; @@ -119,35 +119,39 @@ const LogLineDetailDialog = ({ width: "100%", }} > - - Raw log line - - ({ - padding: 1, - bgcolor: "#EEEEEE", - borderRadius: 1, - border: `1px solid ${theme.palette.divider}`, - })} - > - - {formattedLogLine} - - + {formattedLogLine !== null && ( + + + Raw log line + + ({ + padding: 1, + bgcolor: "#EEEEEE", + borderRadius: 1, + border: `1px solid ${theme.palette.divider}`, + })} + > + + {formattedLogLine} + + + + )} = ({ listRef.current = outter.current; } const [selectedLogLine, setSelectedLogLine] = - useState<[string, string | undefined]>(); + useState<[string | null, string]>(); const handleLogLineClick = useCallback( - (logLine: string, message?: string) => { + (logLine: string | null, message: string) => { setSelectedLogLine([logLine, message]); }, [], @@ -221,7 +225,7 @@ const LogVirtualView: React.FC = ({ const { i, origin } = logs[revert ? logs.length - 1 - index : index]; let message = origin; - let formattedLogLine = origin; + let formattedLogLine: string | null = null; try { const parsedOrigin = JSON.parse(origin); // Iff the parsed origin has a message field, use it as the message. @@ -238,7 +242,9 @@ const LogVirtualView: React.FC = ({ } formattedLogLine = JSON.stringify(parsedOrigin, null, 2); } catch (e) { - // Keep the `origin` as message and formattedLogLine, if json parsing failed. + // Keep the `origin` as message, if json parsing failed. + // If formattedLogLine is null, then the log line is not JSON and we will + // not show the raw json dialog pop up. } return ( diff --git a/python/ray/dashboard/client/src/pages/serve/ServeDeploymentsListPage.tsx b/python/ray/dashboard/client/src/pages/serve/ServeDeploymentsListPage.tsx index 51a280262694..025b4dc5409d 100644 --- a/python/ray/dashboard/client/src/pages/serve/ServeDeploymentsListPage.tsx +++ b/python/ray/dashboard/client/src/pages/serve/ServeDeploymentsListPage.tsx @@ -144,6 +144,7 @@ export const ServeDeploymentsListPage = () => { controller={serveDetails.controller_info} proxies={proxies} deployments={serveDeployments} + showDeploymentName /> diff --git a/python/ray/dashboard/client/src/pages/serve/ServeEntityLogViewer.tsx b/python/ray/dashboard/client/src/pages/serve/ServeEntityLogViewer.tsx index 3880288254f7..f90311ee91e9 100644 --- a/python/ray/dashboard/client/src/pages/serve/ServeEntityLogViewer.tsx +++ b/python/ray/dashboard/client/src/pages/serve/ServeEntityLogViewer.tsx @@ -18,6 +18,7 @@ type ServeEntityLogsProps = { controller?: ServeSystemActor; proxies?: ServeSystemActor[]; deployments: ServeDeployment[]; + showDeploymentName?: boolean; }; /** @@ -28,6 +29,7 @@ export const ServeEntityLogViewer = ({ controller, proxies, deployments, + showDeploymentName = false, }: ServeEntityLogsProps) => { const [params, setParams] = useSearchParams(); @@ -48,23 +50,37 @@ export const ServeEntityLogViewer = ({ ({ actor_id }) => actor_id === selectedProxyId, ); - const allReplicas = deployments.flatMap(({ replicas }) => replicas); + const allReplicas = deployments.flatMap( + ({ name: deploymentName, replicas }) => + replicas.map((replica) => ({ + ...replica, + name: showDeploymentName + ? `${deploymentName}#${replica.replica_id}` + : replica.replica_id, + })), + ); const selectedReplicaId = params.get("replicaId") || allReplicas[0]?.replica_id || undefined; // Effect to update URL params to initial values if they are not set useEffect(() => { + let paramsModified = false; if (!params.get("entityGroup") && showEntityGroups) { params.set("entityGroup", defaultEntityGroupName); + paramsModified = true; } if (!params.get("proxyId") && selectedProxyId) { params.set("proxyId", selectedProxyId); + paramsModified = true; } if (!params.get("replicaId") && selectedReplicaId) { params.set("replicaId", selectedReplicaId); + paramsModified = true; + } + if (paramsModified) { + setParams(params, { replace: true }); } - setParams(params, { replace: true }); }, [ params, setParams, @@ -80,13 +96,18 @@ export const ServeEntityLogViewer = ({ // Detect if replicaId or http proxy does not exist. If not, reset the selected log. useEffect(() => { + let paramsModified = false; if (selectedProxyId && !selectedProxy) { params.delete("proxyId"); + paramsModified = true; } if (selectedReplicaId && !selectedReplica) { params.delete("replicaId"); + paramsModified = true; + } + if (paramsModified) { + setParams(params, { replace: true }); } - setParams(params, { replace: true }); }, [ params, setParams, @@ -272,9 +293,9 @@ export const ServeEntityLogViewer = ({ ); }} > - {allReplicas.map(({ replica_id }) => ( + {allReplicas.map(({ replica_id, name }) => ( - {replica_id} + {name} ))} From 94bcb9d88a49606d935c052aa9775e766708ee5a Mon Sep 17 00:00:00 2001 From: Alan Guo Date: Thu, 25 Jul 2024 22:26:45 -0700 Subject: [PATCH 2/2] fixup Signed-off-by: Alan Guo --- .../dashboard/client/src/components/LogView/LogVirtualView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx b/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx index e756d00d6c11..2d860f1e8775 100644 --- a/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx +++ b/python/ray/dashboard/client/src/components/LogView/LogVirtualView.tsx @@ -135,6 +135,7 @@ const LogLineDetailDialog = ({ bgcolor: "#EEEEEE", borderRadius: 1, border: `1px solid ${theme.palette.divider}`, + marginBottom: 2, })} >