-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: add data distribution screen (aka replica matrix)
with collapsible tree matrix widget
- Loading branch information
Pete Vilter
committed
Jun 12, 2018
1 parent
4756ea8
commit 43768b9
Showing
11 changed files
with
1,169 additions
and
1 deletion.
There are no files selected for viewing
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 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 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 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
11 changes: 11 additions & 0 deletions
11
pkg/ui/src/views/cluster/containers/dataDistribution/index.styl
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .data-distribution | ||
| display: flex | ||
|
|
||
| &__zone-config-sidebar | ||
| padding-right 20px | ||
|
|
||
| .zone-config | ||
| padding-top 10px | ||
|
|
||
| &__raw-yaml | ||
| padding-top 5px |
204 changes: 204 additions & 0 deletions
204
pkg/ui/src/views/cluster/containers/dataDistribution/index.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| import _ from "lodash"; | ||
| import React from "react"; | ||
| import { connect } from "react-redux"; | ||
|
|
||
| import Loading from "src/views/shared/components/loading"; | ||
| import spinner from "assets/spinner.gif"; | ||
| import { ToolTipWrapper } from "src/views/shared/components/toolTip"; | ||
| import * as docsURL from "src/util/docs"; | ||
| import { FixLong } from "src/util/fixLong"; | ||
| import { cockroach } from "src/js/protos"; | ||
| import { AdminUIState } from "src/redux/state"; | ||
| import { refreshDataDistribution, refreshNodes, refreshLiveness } from "src/redux/apiReducers"; | ||
| import { LocalityTree, selectLocalityTree } from "src/redux/localities"; | ||
| import ReplicaMatrix, { SchemaObject } from "./replicaMatrix"; | ||
| import { TreeNode, TreePath } from "./tree"; | ||
| import "./index.styl"; | ||
|
|
||
| type DataDistributionResponse = cockroach.server.serverpb.DataDistributionResponse; | ||
| type NodeDescriptor = cockroach.roachpb.NodeDescriptor$Properties; | ||
|
|
||
| const ZONE_CONFIG_TEXT = ( | ||
| <span> | ||
| Zone configurations (<a href={docsURL.zoneConfigs} target="_blank">see documentation</a>) | ||
| control how CockroachDB distributes data across nodes. | ||
| </span> | ||
| ); | ||
|
|
||
| interface DataDistributionProps { | ||
| dataDistribution: DataDistributionResponse; | ||
| localityTree: LocalityTree; | ||
| } | ||
|
|
||
| class DataDistribution extends React.Component<DataDistributionProps> { | ||
|
|
||
| renderZoneConfigs() { | ||
| const zoneConfigs = this.props.dataDistribution.zone_configs; | ||
| const sortedIDs = Object.keys(zoneConfigs); | ||
| sortedIDs.sort(); | ||
|
|
||
| return ( | ||
| <div className="zone-config-list"> | ||
| <ul> | ||
| {sortedIDs.map((zcId) => { | ||
| const zoneConfig = zoneConfigs[zcId]; | ||
| return ( | ||
| <li key={zcId} className="zone-config"> | ||
| <h3>{zoneConfig.cli_specifier}</h3> | ||
| <pre className="zone-config__raw-yaml"> | ||
| {zoneConfig.config_yaml} | ||
| </pre> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| getCellValue = (dbPath: TreePath, nodePath: TreePath): number => { | ||
| const [dbName, tableName] = dbPath; | ||
| const nodeID = nodePath[nodePath.length - 1]; | ||
| const databaseInfo = this.props.dataDistribution.database_info; | ||
|
|
||
| const res = databaseInfo[dbName].table_info[tableName].replica_count_by_node_id[nodeID]; | ||
| if (!res) { | ||
| return 0; | ||
| } | ||
| return FixLong(res).toInt(); | ||
| } | ||
|
|
||
| render() { | ||
| const nodeTree = nodeTreeFromLocalityTree("Cluster", this.props.localityTree); | ||
| const databaseInfo = this.props.dataDistribution.database_info; | ||
|
|
||
| const dbTree: TreeNode<SchemaObject> = { | ||
| name: "Cluster", | ||
| data: { dbName: null, tableName: null }, | ||
| children: _.map(databaseInfo, (dbInfo, dbName) => ({ | ||
| name: dbName, | ||
| data: { dbName }, | ||
| children: _.map(dbInfo.table_info, (_tableInfo, tableName) => ({ | ||
| name: tableName, | ||
| data: { dbName, tableName }, | ||
| })), | ||
| })), | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="data-distribution"> | ||
| <div className="data-distribution__zone-config-sidebar"> | ||
| <h2> | ||
| Zone Configs{" "} | ||
| <div className="section-heading__tooltip"> | ||
| <ToolTipWrapper text={ZONE_CONFIG_TEXT}> | ||
| <div className="section-heading__tooltip-hover-area"> | ||
| <div className="section-heading__info-icon">i</div> | ||
| </div> | ||
| </ToolTipWrapper> | ||
| </div> | ||
| </h2> | ||
| {this.renderZoneConfigs()} | ||
| </div> | ||
| <div> | ||
| <ReplicaMatrix | ||
| cols={nodeTree} | ||
| rows={dbTree} | ||
| getValue={this.getCellValue} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| interface DataDistributionPageProps { | ||
| dataDistribution: DataDistributionResponse; | ||
| localityTree: LocalityTree; | ||
| refreshDataDistribution: typeof refreshDataDistribution; | ||
| refreshNodes: typeof refreshNodes; | ||
| refreshLiveness: typeof refreshLiveness; | ||
| } | ||
|
|
||
| class DataDistributionPage extends React.Component<DataDistributionPageProps> { | ||
|
|
||
| componentDidMount() { | ||
| this.props.refreshDataDistribution(); | ||
| this.props.refreshNodes(); | ||
| this.props.refreshLiveness(); | ||
| } | ||
|
|
||
| componentWillReceiveProps() { | ||
| this.props.refreshDataDistribution(); | ||
| this.props.refreshNodes(); | ||
| this.props.refreshLiveness(); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <section className="section"> | ||
| <h1>Data Distribution</h1> | ||
| </section> | ||
| <section className="section"> | ||
| <Loading | ||
| className="loading-image loading-image__spinner-left" | ||
| loading={!this.props.dataDistribution || !this.props.localityTree} | ||
| image={spinner} | ||
| > | ||
| <DataDistribution | ||
| localityTree={this.props.localityTree} | ||
| dataDistribution={this.props.dataDistribution} | ||
| /> | ||
| </Loading> | ||
| </section> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const DataDistributionPageConnected = connect( | ||
| (state: AdminUIState) => { | ||
| return { | ||
| dataDistribution: state.cachedData.dataDistribution.data, | ||
| localityTree: selectLocalityTree(state), | ||
| }; | ||
| }, | ||
| { | ||
| refreshDataDistribution, | ||
| refreshNodes, | ||
| refreshLiveness, | ||
| }, | ||
| )(DataDistributionPage); | ||
|
|
||
| export default DataDistributionPageConnected; | ||
|
|
||
| // Helpers | ||
|
|
||
| function nodeTreeFromLocalityTree( | ||
| rootName: string, | ||
| localityTree: LocalityTree, | ||
| ): TreeNode<NodeDescriptor> { | ||
| const children: TreeNode<any>[] = []; | ||
|
|
||
| // Add child localities. | ||
| _.forEach(localityTree.localities, (valuesForKey, key) => { | ||
| _.forEach(valuesForKey, (subLocalityTree, value) => { | ||
| children.push(nodeTreeFromLocalityTree(`${key}=${value}`, subLocalityTree)); | ||
| }); | ||
| }); | ||
|
|
||
| // Add child nodes. | ||
| _.forEach(localityTree.nodes, (node) => { | ||
| children.push({ | ||
| name: node.desc.node_id.toString(), | ||
| data: node.desc, | ||
| }); | ||
| }); | ||
|
|
||
| return { | ||
| name: rootName, | ||
| children: children, | ||
| }; | ||
| } |
43 changes: 43 additions & 0 deletions
43
pkg/ui/src/views/cluster/containers/dataDistribution/replicaMatrix.styl
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| .matrix | ||
| background-color white | ||
| border-collapse collapse | ||
| border-bottom 1px solid lightgrey | ||
| border-top 1px solid lightgrey | ||
|
|
||
| thead | ||
| border-bottom 1px solid black | ||
|
|
||
| th, td | ||
| padding 5px | ||
| border-left 1px solid lightgrey | ||
| border-right 1px solid lightgrey | ||
|
|
||
| td.value | ||
| text-align center | ||
|
|
||
| &__metric-label | ||
| font-style italic | ||
|
|
||
| &__row--node | ||
| cursor pointer | ||
|
|
||
| &__row--node:hover | ||
| background-color rgb(240, 240, 240) | ||
|
|
||
| &__row-label | ||
| text-align left | ||
|
|
||
| &__row-label--node | ||
| font-weight bold | ||
|
|
||
| &__column-header | ||
| font-weight bold | ||
|
|
||
| &__column-header--node | ||
| cursor pointer | ||
|
|
||
| &__column-header--node:hover | ||
| background-color rgb(240, 240, 240) | ||
|
|
||
| &__cell-value | ||
| text-align right |
Oops, something went wrong.