Update layout of serve page to be deployments first #42079

alanwguo · 2023-12-22T02:57:47Z

Why are these changes needed?

Part 1 of 2 changes:

Part 1:

Updates layout of serve ray dashboard to be deployments first.
Creates a deployments detail page
Update recent serve card in Overview page to point to deployments instead of applications.
[Optimization]: Re-use the same SWR cache key for the getServeApplications call so we don't have to refetch the API as often and so the data is kept in sync between pages.

Part 2 (Future PR):

Add a multi log viewer to serve deployments list page and serve deployments detail page.

Related issue number

#42055

Checks

I've signed off every commit(by using the -s flag, i.e., git commit -s) in this PR.
I've run scripts/format.sh to lint the changes in this PR.
I've included any doc changes needed for https://docs.ray.io/en/master/.
- I've added any new APIs to the API Reference. For example, if I added a
  method in Tune, I've added it in doc/source/tune/api/ under the
  corresponding .rst file.
I've made sure the tests are passing. Note that there might be a few flaky tests, see the recent failures at https://flakey-tests.ray.io/
Testing Strategy
- Unit tests
- Release tests
- This PR is not tested :(

Signed-off-by: Alan Guo <aguo@anyscale.com>

scottsun94 · 2023-12-22T05:39:07Z

LGTM.

Signed-off-by: Alan Guo <aguo@anyscale.com>

tchordia · 2024-01-02T18:34:32Z

what does the deployment details page look like?

csivanich · 2024-01-02T18:49:15Z

How does this work with multiple applications, seeing that Ray 2.9 no longer has a single-application mode

alanwguo · 2024-01-03T18:53:37Z

@tchordia , please take a look in this PR: alanwguo#76 (comment)

@csivanich, the top-level page will show all deployments across all applications. Each deployment has a column for the parent application it belongs to. A user can click the application name to go into an application detail page if they only want to see info about a single application.

The idea here is we were trying to address the feedback that it takes too many clicks to get to valuable information and that majority of workflows, people care primarily about deployments and not applications. So this is moving things from being "applications first" to "deployments first"

tchordia · 2024-01-08T21:37:46Z

i think it would also be very helpful to put actor logs on the replica page -- this is another level of unnecessary clicking to get to the actor logs

tchordia

lgtm [didn't review code, just reviewed layout. lmk if you need code review as well]. Can we add an application filter?

Signed-off-by: Alan Guo <aguo@anyscale.com>

galenhwang · 2024-01-11T18:48:22Z

dashboard/client/src/App.tsx

@@ -250,8 +254,8 @@ const App = () => {
                    />
                    <Route
                      element={
-                        <SideTabPage tabId="applications">
-                          <ServeApplicationsListPage />
+                        <SideTabPage tabId="deployments">


what happened to applications? can they still be viewed?

There's no application list page, but you can see the name of the application next to each deployment, and you can also use a filter to filter down to specific applications.

Someone can also still go to the application detail page by clicking into an application.

In general, people who use ray serve deal directly with deployments way more than applications.

ok, maybe this should be in a release note on next ray release

galenhwang · 2024-01-11T18:51:34Z

dashboard/client/src/common/JobStatus.tsx


 export const JobRunningIcon = ({
  className,
  small = false,
+  "data-testid": dataTestId,


nit: if possible, if there's an ...IconProps type in react-icons, i'd prefer that we use ...iconProps instead of "data-testid".

Then it can be applied to the <Ri... component as

return ( <RiLoader4Line ...iconProps

and the caller can still do

<JobRunningIcon data-testid="blah"/>

didn't seem to work, but I can try to make the test work with a11y attributes instead of data-testid.

galenhwang · 2024-01-11T18:57:29Z

dashboard/client/src/pages/overview/cards/RecentServeCard.tsx

-  // Use mock data by uncommenting the following line
-  // const applications = mockServeApplications.applications;
-  const { allServeApplications: applications } = useServeApplications();
+  const { allServeDeployments: deployments } = useServeDeployments();


can we type some of the API response calls, such as allServeDeployments? it makes developing on the code hard for external ppl (like the ["application.last_deployed_time_s", "name"] part on L27)

it may be worth looking into at some point if we can automatically export typescript models based on ray @PublicAPI

It's typed right here: https://github.com/ray-project/ray/blob/master/dashboard/client/src/type/serve.ts#L112

I do want to do generated types from the API but we don't have the infra for that yet right now.

Signed-off-by: Alan Guo <aguo@anyscale.com>

…project#42079) Part 1 of 2 changes: Part 1: Updates layout of serve ray dashboard to be deployments first. Creates a deployments detail page Update recent serve card in Overview page to point to deployments instead of applications. [Optimization]: Re-use the same SWR cache key for the getServeApplications call so we don't have to refetch the API as often and so the data is kept in sync between pages. Part 2 (Future PR): Add a multi log viewer to serve deployments list page and serve deployments detail page. --------- Signed-off-by: Alan Guo <aguo@anyscale.com>

Part 1 of 2 changes: Part 1: #42079 Part 2: Add a multi log viewer to serve deployments list page and serve deployments detail page. Make the log viewer remember the log the user is viewing in the query params so it is preserved when going back through browser history or refreshing the page. Allow multi tab log viewer remember the last tab that was selected and start on that tab next time. --------- Signed-off-by: Alan Guo <aguo@anyscale.com>

…rows (#43506) Adds back "application" rows to the top-level deployments page, which were removed in #42079. We keep the deployment rows as a dropdown under the application row, similar to how worker rows are a dropdown under node rows in the "Cluster" page (and we mimic the implementation from that part as well). Per discussion offline: Delete the "filters" component because it's not necessary for most use cases, and the user can always cmd-F to find in page if necessary Start all the rows expanded Replace the "deployments status" chip with "application status". If there's time, we can try to include both by making the metadata section number of columns configurable and set it to 4 instead of 3. I also took a couple liberties which hadn't been discussed yet, but happy to revert them if they don't make sense: Un-bold the the deployment name, but keep the application name bold. This highlights the hierarchical nature and makes the "deployment" rows more visually distinct from the "application" rows. Make the number of replicas link to the deployment page where it shows the replicas. Reason: when I first saw "2" under replicas my first thought was "where can I see more about these 2 replicas", and I naturally wanted to click it. --------- Signed-off-by: Archit Kulkarni <architkulkarni@users.noreply.github.com> Co-authored-by: Huaiwei Sun <scottsun94@gmail.com>

Update layout of serve page to be deployments first

328d161

Signed-off-by: Alan Guo <aguo@anyscale.com>

This was referenced Dec 22, 2023

Add multi log viewer for all serve logs to Serve overview page and Serve Deployment page alanwguo/ray#76

Closed

Better Serve Dashboard layout in Ray Dashboard #42055

Closed

Add pagination

4a6fb3f

Signed-off-by: Alan Guo <aguo@anyscale.com>

anyscalesam assigned alanwguo Jan 2, 2024

anyscalesam requested review from tchordia, scottsun94 and csivanich January 2, 2024 20:54

tchordia approved these changes Jan 8, 2024

View reviewed changes

alanwguo added 2 commits January 8, 2024 17:28

add application filter

bbaf4d0

Signed-off-by: Alan Guo <aguo@anyscale.com>

Merge branch 'master' into better-serve-layout

86e6e72

galenhwang approved these changes Jan 11, 2024

View reviewed changes

galenhwang reviewed Jan 11, 2024

View reviewed changes

alanwguo added 2 commits January 11, 2024 22:14

update data-testid to title

0c8d8c8

Signed-off-by: Alan Guo <aguo@anyscale.com>

Merge branch 'master' into better-serve-layout

3cf8401

architkulkarni merged commit b0d3e2b into ray-project:master Jan 12, 2024
9 checks passed

alanwguo mentioned this pull request Jan 16, 2024

Multi log viewer #42435

Merged

8 tasks

architkulkarni mentioned this pull request Feb 28, 2024

[Dashboard] [Serve] Add application row with dropdown for deployment rows #43506

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update layout of serve page to be deployments first #42079

Update layout of serve page to be deployments first #42079

alanwguo commented Dec 22, 2023

scottsun94 commented Dec 22, 2023

tchordia commented Jan 2, 2024

csivanich commented Jan 2, 2024

alanwguo commented Jan 3, 2024

tchordia commented Jan 8, 2024

tchordia left a comment •

edited

Loading

galenhwang Jan 11, 2024

alanwguo Jan 11, 2024

galenhwang Jan 11, 2024

galenhwang Jan 11, 2024

alanwguo Jan 12, 2024

galenhwang Jan 11, 2024

alanwguo Jan 12, 2024

Update layout of serve page to be deployments first #42079

Update layout of serve page to be deployments first #42079

Conversation

alanwguo commented Dec 22, 2023

Why are these changes needed?

Related issue number

Checks

scottsun94 commented Dec 22, 2023

tchordia commented Jan 2, 2024

csivanich commented Jan 2, 2024

alanwguo commented Jan 3, 2024

tchordia commented Jan 8, 2024

tchordia left a comment • edited Loading

Choose a reason for hiding this comment

galenhwang Jan 11, 2024

Choose a reason for hiding this comment

alanwguo Jan 11, 2024

Choose a reason for hiding this comment

galenhwang Jan 11, 2024

Choose a reason for hiding this comment

galenhwang Jan 11, 2024

Choose a reason for hiding this comment

alanwguo Jan 12, 2024

Choose a reason for hiding this comment

galenhwang Jan 11, 2024

Choose a reason for hiding this comment

alanwguo Jan 12, 2024

Choose a reason for hiding this comment

tchordia left a comment •

edited

Loading