Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: Redesign resources table #4600

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

Merged
merged 12 commits into from
Oct 18, 2022
Merged

feat: Redesign resources table #4600

merged 12 commits into from
Oct 18, 2022

Conversation

BrunoQuaresma
Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma commented Oct 17, 2022

Demo:

Screen.Recording.2022-10-17.at.13.58.28.mov

Notable changes:

  • The resources are not displayed in a table anymore, but as a list of cards
  • The metadata was moved to the card header. By default, it shows the first 4 values and hides the others. You can show or hide them all tho
  • The agent info was simplified. The preferred latency is displayed but you can see all the DERP servers in the popover.
  • The resources are sorted by the number of agents so the resources with agents are displayed first

@BrunoQuaresma BrunoQuaresma self-assigned this Oct 17, 2022
@BrunoQuaresma BrunoQuaresma requested a review from a team as a code owner October 17, 2022 19:33
@BrunoQuaresma BrunoQuaresma requested review from presleyp and removed request for a team October 17, 2022 19:33
@ntimo
Copy link
Contributor

ntimo commented Oct 17, 2022

I really like the design change, the only thing I am not sure about is that the meta data is at the top. Just thinking about a workspace that has like a lot of resources they would all show above the agent with the coder apps which are kind of the most important at least for me.

I actually prefer the workspace to be at the top, that's also why I hide all of my other resources like docker volumes since they are not really "important". Another question I am asking my self is how does this redesign work with hidden resources?

@BrunoQuaresma
Copy link
Collaborator Author

I'm glad you liked it @ntimo

I really like the design change, the only thing I am not sure about is that the meta data is at the top. Just thinking about a workspace that has like a lot of resources they would all show above the agent with the coder apps which are kind of the most important at least for me.

It displays only the first 4 values to avoid pushing the agents too below but you can see all of them by clicking on the toggle button. Do you think it is still an issue?

I actually prefer the workspace to be at the top

I didn't understand this. By workspace do you mean the resource with agents? If yes, we changed the sort. Now, the resources are sorted by the number of agents.

@BrunoQuaresma
Copy link
Collaborator Author

@ntimo

Another question I am asking my self is how does this redesign work with hidden resources?

Pretty similar to the previous version.

disconnected: "◍ Disconnected",
connected: "Connected",
connecting: "Connecting...",
disconnected: "Disconnected",
Copy link
Contributor

Choose a reason for hiding this comment

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

Might be a good time to move these to i18n

@@ -35,6 +35,35 @@ const useHelpTooltip = () => {
return helpTooltipContext
}

export const HelpPopover: React.FC<
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice

Copy link
Member

@bpmct bpmct left a comment

Choose a reason for hiding this comment

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

Just gave it a shot with my kubernetes multi service template. It looks great and the "copy value" works like a charm!

  1. The agents are still changing order randomly. I confirmed this isn't an issue exclusive to this branch, but perhaps we should reopen Workspace page: Agents order is changing on UI endlessly #2778 if you don't want to tackle in this PR.
  2. The other tooltips are difficult to dismiss. I did a fix for this in Help tooltips are difficult to dismiss #4562, do we just need to rebase?

Other then that, LGTM.

@presleyp
Copy link
Contributor

I'm wondering if people with a lot of resources will not realize the logs exist or not want to scroll down to them. Maybe there could be a way to collapse all resources or skip to the logs, but that can be a future PR (if the concern is even valid, I don't know what the max number of resources will be).

Also wondering about the accessibility of the version color. To me it's easier to see, but I don't know about to someone color blind or using a screen reader. Maybe the popover addresses the screen reader issue? Not sure how those are handled. Paging @Kira-Pilot

Other than that, looks great!

@BrunoQuaresma
Copy link
Collaborator Author

@bpmct

  1. I would prefer to make a separate PR. I would like to investigate why this is happening on BE. Probably we are missing the sort in some endpoints.
  2. I rebased the main branch yesterday so I think the issue stills existing.

@presleyp

I'm wondering if people with a lot of resources will not realize the logs exist or not want to scroll down to them. Maybe there could be a way to collapse all resources or skip to the logs, but that can be a future PR (if the concern is even valid, I don't know what the max number of resources will be).

We have a feature to hide resources from the UI: https://coder.com/docs/coder-oss/latest/templates/resource-metadata#hiding-resources-in-the-ui

Also wondering about the accessibility of the version color. To me it's easier to see, but I don't know about to someone color blind or using a screen reader. Maybe the popover addresses the screen reader issue? Not sure how those are handled.

For those, I used the aria role attribute as status and added the tooltip so a screen reader can read it. About the color contrast, I think the tooltip helps with that but we can see how to improve the color contrast for sure but not only for this component tho.

@BrunoQuaresma BrunoQuaresma enabled auto-merge (squash) October 18, 2022 13:28
@BrunoQuaresma BrunoQuaresma merged commit 616fe7a into main Oct 18, 2022
@BrunoQuaresma BrunoQuaresma deleted the bq/update-resources-table branch October 18, 2022 13:45
@github-actions github-actions bot locked and limited conversation to collaborators Oct 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants