Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dashboard] Support job-scoped actor + placement group page to the JobDetail page #31062

Merged
merged 5 commits into from
Dec 16, 2022

Conversation

rkooo567
Copy link
Contributor

Signed-off-by: SangBin Cho [email protected]

Why are these changes needed?

  • Add a job-scoped actor page to the job detail page
  • Add a placement group table and add it to the job detail page.

Screen Shot 2022-12-13 at 7 14 19 AM

Couple TODOs

  • Placement group table itself needs a bit of improvement (e.g., we should specify bundles & get placement-groups)
  • Currently, all the tables are there. But we will need a collapse + left nav bar for navigation.

Related issue number

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 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: SangBin Cho <[email protected]>
@@ -369,6 +369,8 @@ class PlacementGroupState(StateSchema):
placement_group_id: str = state_column(filterable=True)
#: The name of the placement group if it is given by the name argument.
name: str = state_column(filterable=True)
#: The job id of the placement group.
creator_job_id: str = state_column(filterable=True)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to change the name of this column. It will be tracked as TODO

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the frontend, it will be displayed as "job id"

</TableCell>
<TableCell align="center">{name ? name : "-"}</TableCell>
<TableCell align="center">{creator_job_id}</TableCell>
<TableCell align="center">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO we need a bundle specification

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will do as a follow up in the future PR

dashboard/client/src/components/PlacementGroupTable.tsx Outdated Show resolved Hide resolved
}}
/>
</div>
<div style={{ display: "flex", alignItems: "center" }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is existing pattern but direct inlining styles is frowned upon because of low composibility.

I hoped we could go in polish each page and rewrite with better code style before adding too much new content.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does it take to do that? I mostly copied & pasted existing actor table (and I feel bad about it). Alternative idea is to do clean up as a part of "cleaning tech debt" after 2.3. I feel like the amount of code we have is small enough that we can proceed this way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for this part, I will avoid inlined style... is the preferred style using classes? Or do we have a doc for the frontend code guideline? (if so can you share it? )

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, classes are preferred.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm I found refactoring this is actually much bigger efforts that I thought. Let's refactor all at once?

dashboard/client/src/pages/actor/ActorList.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/actor/ActorList.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/actor/index.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/job/JobDetail.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/state/PlacementGroup.tsx Outdated Show resolved Hide resolved
dashboard/client/src/service/placementGroup.ts Outdated Show resolved Hide resolved
@rkooo567 rkooo567 added the @author-action-required The PR author is responsible for the next step. Remove tag to send back to the reviewer. label Dec 14, 2022
@rkooo567 rkooo567 removed the @author-action-required The PR author is responsible for the next step. Remove tag to send back to the reviewer. label Dec 15, 2022
@rkooo567
Copy link
Contributor Author

Addressed code review + I also added the task table.

@@ -1 +1,3 @@
export const API_REFRESH_INTERVAL_MS = 4000;
// Per job page refresh interval.
export const PER_JOB_PAGE_REFRESH_INTERVAL_MS = 10000;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 seconds are too short and I don't think it is that useful for actor/task/pg tables. We can reduce the frequency later when we optimize tables (pagination)

/>
</div>
</div>
<Table>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO add a status chip later. Now it is not possible because of the field name (status chip only works with a name "state", but task APi provides "scheduling_state")

@rkooo567
Copy link
Contributor Author

Screen Shot 2022-12-15 at 7 33 11 AM

Copy link
Contributor

@alanwguo alanwguo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. primarily just some code style nits.

}}
/>
</div>
<div style={{ display: "flex", alignItems: "center" }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, classes are preferred.

dashboard/client/src/components/PlacementGroupTable.tsx Outdated Show resolved Hide resolved
dashboard/client/src/components/TaskTable.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/state/PlacementGroup.tsx Outdated Show resolved Hide resolved
dashboard/client/src/pages/state/task.tsx Outdated Show resolved Hide resolved
dashboard/client/src/type/stateApi.d.ts Outdated Show resolved Hide resolved
@rkooo567 rkooo567 merged commit d7c4742 into ray-project:master Dec 16, 2022
WeichenXu123 pushed a commit to WeichenXu123/ray that referenced this pull request Dec 19, 2022
…bDetail page (ray-project#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table

Signed-off-by: Weichen Xu <[email protected]>
Capiru pushed a commit to Capiru/ray that referenced this pull request Dec 22, 2022
…bDetail page (ray-project#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table

Signed-off-by: Capiru <[email protected]>
AmeerHajAli pushed a commit that referenced this pull request Jan 12, 2023
…bDetail page (#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table
tamohannes pushed a commit to ju2ez/ray that referenced this pull request Jan 16, 2023
…bDetail page (ray-project#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table

Signed-off-by: tmynn <[email protected]>
tamohannes pushed a commit to ju2ez/ray that referenced this pull request Jan 25, 2023
…bDetail page (ray-project#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table

Signed-off-by: tmynn <[email protected]>
tamohannes pushed a commit to ju2ez/ray that referenced this pull request Jan 25, 2023
…bDetail page (ray-project#31062)

Signed-off-by: SangBin Cho <[email protected]>

Add a job-scoped actor page to the job detail page
Add a placement group table and add it to the job detail page.
Add a task table

Signed-off-by: tmynn <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants