Skip to content

feat: Redesign resources table#4600

Merged
BrunoQuaresma merged 12 commits into
mainfrom
bq/update-resources-table
Oct 18, 2022
Merged

feat: Redesign resources table#4600
BrunoQuaresma merged 12 commits into
mainfrom
bq/update-resources-table

Conversation

@BrunoQuaresma

@BrunoQuaresma BrunoQuaresma commented Oct 17, 2022

Copy link
Copy Markdown
Contributor

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

ntimo commented Oct 17, 2022

Copy link
Copy Markdown
Contributor

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
Copy Markdown
Contributor 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
Copy Markdown
Contributor Author

@ntimo

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

Pretty similar to the previous version.

Comment thread site/src/util/workspace.ts Outdated
disconnected: "◍ Disconnected",
connected: "Connected",
connecting: "Connecting...",
disconnected: "Disconnected",

Copy link
Copy Markdown
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

return helpTooltipContext
}

export const HelpPopover: React.FC<

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice

@bpmct bpmct left a comment

Copy link
Copy Markdown
Member

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 #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 #4562, do we just need to rebase?

Other then that, LGTM.

@presleyp

Copy link
Copy Markdown
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
Copy Markdown
Contributor 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