ui: Node List view redesign #43552
Merged
ui: Node List view redesign #43552
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This change is |
koorosh
force-pushed
the
ui-node-list-view-redesign
branch
from
4424ae1
to
7cca475
Compare
|
@koorosh this change is awesome. However this is a large-ish project and it partially overlaps with some other release plans we may have. @piyush-singh can you look at the description of the proposed approach above? I think it solves many woes we have seen reported throughout the last year. I do not recall whether we already had plans to redesign this and/or where these other plans are being executed. If you think the contributor's proposal is acceptable, please let us know. |
|
@knz this PR was actually opened by one of our contractors on the Observability team! We're coordinating updates to the UI :) |
…ks to variables Release note: None
- Adjust ant Table component styles to provided designs - Predefine default props of Table component Release note: None
- Dead and Live nodes tables are merged into the single table - Nodes Overview component is not responsible for saving sorting state of the tables so this functionality is removed (has to be implemented in Table component). - NodeList and DecommissionedNodeList components receive prepared `dataSource` to be consumed by Table component. It allows reduce computations on component rerender. Release note: None
- Node Overview page doesn't display entire list of decommissioned nodes. Instead, only 5 most recent decommissioned nodes are shown. Release note: None
- Display live and dead nodes in the single table which are grouped by regions. - Redesign Cluster Overview page, clean up inline styles and enhance elements structure to avoid unnecessary nested elements. Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
- Do not display nested tree structure if all nodes are located in single region. - Display tooltip for node status column. - Align numeric values by right side in the table columns. - Show "No data to display" as default message in case empty table. Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
- TableSection component serves as a container which allows collapse/expand its content Release note: None
- TableSection component is a wrapper around a table that is responsible for displaying table header, footer, and collapsing/expanding section content. - TableSection component preserves collapsed state in sessionStore. It depends on TableSection id property which has to be unique. - Link on Decommissioned nodes history is disabled until the actual route and page are added. Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
- Change colors for .warning and .alert classes to comply with new designs. - Adjust used font-family and colors of elements. Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
Release note: None
Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
…ed in single region Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
- Added Select component which is a wrapper on top of ant.design Select component. - Moved inline styles to dedicated classes for both Map and Node List layouts. Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
Release note: None
Release note (admin ui change): Redesign Cluster Overview page (cockroachdb#42923)
koorosh
force-pushed
the
ui-node-list-view-redesign
branch
from
83462a3
to
0aebaad
Compare
Release note: None
Current component is implemented partially and serves as starting point to extend Button component according to design system requirements. Only 'flat' type and sizing options are implemented. Release note: None
Release note: None
…tory OutsideEventHandler component is required for Dropdown component in design system and so it is moved to the same directory to keep all dependencies together. Release note: None
Dropdown component implements basic functionality to show/hide overlay. Release note: None
… Map) Redesign of Nodes List view includes change of Node view switcher. Current changes reuse Dropdown component and adjust layout styles. Release note: None
|
PR is extended with following changes:
|
dhartunian
approved these changes
Jan 21, 2020
|
|
||
| const { isCollapsed } = this.state; | ||
|
|
||
| return ( |
There was a problem hiding this comment.
I don't see any usage that renders this collapse section. Is that forthcoming?
|
bors r+ |
craig bot
pushed a commit
that referenced
this pull request
Jan 21, 2020
42924: RFC: easier hash sharded indexes r=ajwerner a=aayushshah15 This RFC proposes to provide better user experience when creating hash sharded indexes, in order to alleviate single range hotspots in sequential workloads. This PR accompanies #42922 which implements the ideas described in the RFC. Release note: None 43552: ui: Node List view redesign r=dhartunian a=Koorosh Changes for node list mostly related to the usage of the Table component from And design system. Following reusable components are added: - Table: is a styled wrapper for and design table component - TableSection: responsible for displaying table header and footer and allowing expand/collapse section with a table. - Tooltip: also a styled wrapper around ant design Tooltip component The layout of Cluster Overview page is changed to improve correct behavior for fixed and UI elements and those which have to be scrollable. Cluster Overview section header is removed to comply with the next changes related to the redesign of Navigation panel and adding a separate section with section name. <img width="1435" alt="Screenshot 2019-12-30 at 10 17 19" src="https://user-images.githubusercontent.com/3106437/71573645-aad62c80-2aed-11ea-8021-fce7643e3428.png"> <img width="1435" alt="Screenshot 2019-12-30 at 10 17 30" src="https://user-images.githubusercontent.com/3106437/71573644-aad62c80-2aed-11ea-864f-25272f8edda8.png"> Co-authored-by: Aayush Shah <aayush.shah15@gmail.com> Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
Build succeeded |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes for node list mostly related to the usage of the Table component from And design system.
Following reusable components are added:
The layout of Cluster Overview page is changed to improve correct behavior for fixed and UI elements and those which have to be scrollable.
Cluster Overview section header is removed to comply with the next changes related to the redesign of Navigation panel and adding a separate section with section name.