-
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.
cluster-ui: created a "connected" component for index details page
This PR introduces an "indexDetailsConnected" component on cluster-ui. This allows us to reuse the cluster-ui redux store without replicating the same logic on CC console. Release note: None
- Loading branch information
Thomas Hardy
committed
Jun 21, 2022
1 parent
4ee236c
commit fa2213a
Showing
17 changed files
with
742 additions
and
27 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| // Copyright 2022 The Cockroach Authors. | ||
| // | ||
| // Use of this software is governed by the Business Source License | ||
| // included in the file licenses/BSL.txt. | ||
| // | ||
| // As of the Change Date specified in that file, in accordance with | ||
| // the Business Source License, use of this software will be governed | ||
| // by the Apache License, Version 2.0, included in the file | ||
| // licenses/APL.txt. | ||
|
|
||
| import { cockroach } from "@cockroachlabs/crdb-protobuf-client"; | ||
| import { fetchData } from "src/api"; | ||
|
|
||
| export type TableIndexStatsRequest = | ||
| cockroach.server.serverpb.TableIndexStatsRequest; | ||
| export type TableIndexStatsResponse = | ||
| cockroach.server.serverpb.TableIndexStatsResponse; | ||
| export type TableIndexStatsResponseWithKey = { | ||
| indexStatsResponse: TableIndexStatsResponse; | ||
| key: string; | ||
| }; | ||
|
|
||
| type ResetIndexUsageStatsRequest = | ||
| cockroach.server.serverpb.ResetIndexUsageStatsRequest; | ||
| type ResetIndexUsageStatsResponse = | ||
| cockroach.server.serverpb.ResetIndexUsageStatsResponse; | ||
|
|
||
| // getIndexStats gets detailed stats about the current table's index usage statistics. | ||
| export const getIndexStats = ( | ||
| req: TableIndexStatsRequest, | ||
| ): Promise<TableIndexStatsResponse> => { | ||
| return fetchData( | ||
| cockroach.server.serverpb.TableIndexStatsResponse, | ||
| `/_status/databases/${req.database}/tables/${req.table}/indexstats`, | ||
| null, | ||
| null, | ||
| "30M", | ||
| ); | ||
| }; | ||
|
|
||
| // resetIndexStats refreshes all index usage stats for all tables. | ||
| export const resetIndexStats = ( | ||
| req: ResetIndexUsageStatsRequest, | ||
| ): Promise<ResetIndexUsageStatsResponse> => { | ||
| return fetchData( | ||
| cockroach.server.serverpb.ResetIndexUsageStatsResponse, | ||
| "/_status/resetindexusagestats", | ||
| null, | ||
| req, | ||
| "30M", | ||
| ); | ||
| }; |
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 |
|---|---|---|
|
|
@@ -9,3 +9,4 @@ | |
| // licenses/APL.txt. | ||
|
|
||
| export * from "./indexDetailsPage"; | ||
| export * from "./indexDetailsConnected"; | ||
104 changes: 104 additions & 0 deletions
104
pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts
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,104 @@ | ||
| // Copyright 2022 The Cockroach Authors. | ||
| // | ||
| // Use of this software is governed by the Business Source License | ||
| // included in the file licenses/BSL.txt. | ||
| // | ||
| // As of the Change Date specified in that file, in accordance with | ||
| // the Business Source License, use of this software will be governed | ||
| // by the Apache License, Version 2.0, included in the file | ||
| // licenses/APL.txt. | ||
|
|
||
| import { createSelector } from "reselect"; | ||
| import { AppState } from "../store"; | ||
| import { RouteComponentProps } from "react-router"; | ||
| import { | ||
| databaseNameAttr, | ||
| generateTableID, | ||
| getMatchParamByName, | ||
| indexNameAttr, | ||
| longToInt, | ||
| schemaNameAttr, | ||
| tableNameAttr, | ||
| TimestampToMoment, | ||
| } from "../util"; | ||
| import { cockroach } from "@cockroachlabs/crdb-protobuf-client"; | ||
| import { IndexDetailsPageData } from "./indexDetailsPage"; | ||
| import { selectIsTenant } from "../store/uiConfig"; | ||
| import { BreadcrumbItem } from "../breadcrumbs"; | ||
| const { RecommendationType } = cockroach.sql.IndexRecommendation; | ||
|
|
||
| export const selectIndexDetails = createSelector( | ||
| (_state: AppState, props: RouteComponentProps): string => | ||
| getMatchParamByName(props.match, databaseNameAttr), | ||
| (_state: AppState, props: RouteComponentProps): string => | ||
| getMatchParamByName(props.match, schemaNameAttr), | ||
| (_state: AppState, props: RouteComponentProps): string => | ||
| getMatchParamByName(props.match, tableNameAttr), | ||
| (_state: AppState, props: RouteComponentProps): string => | ||
| getMatchParamByName(props.match, indexNameAttr), | ||
| (state: AppState) => state.adminUI.indexStats.cachedData, | ||
| (state: AppState) => selectIsTenant(state), | ||
| (database, schema, table, index, indexStats): IndexDetailsPageData => { | ||
| const stats = indexStats[generateTableID(database, table)]; | ||
| const details = stats?.data?.statistics.filter( | ||
| stat => stat.index_name === index, // index names must be unique for a table | ||
| )[0]; | ||
| const filteredIndexRecommendations = | ||
| stats?.data?.index_recommendations.filter( | ||
| indexRec => indexRec.index_id === details.statistics.key.index_id, | ||
| ) || []; | ||
| const indexRecommendations = filteredIndexRecommendations.map(indexRec => { | ||
| return { | ||
| type: RecommendationType[indexRec.type].toString(), | ||
| reason: indexRec.reason, | ||
| }; | ||
| }); | ||
|
|
||
| return { | ||
| databaseName: database, | ||
| tableName: table, | ||
| indexName: index, | ||
| breadcrumbItems: createManagedServiceBreadcrumbs( | ||
| database, | ||
| schema, | ||
| table, | ||
| index, | ||
| ), | ||
| details: { | ||
| loading: !!stats?.inFlight, | ||
| loaded: !!stats?.valid, | ||
| createStatement: details?.create_statement || "", | ||
| totalReads: | ||
| longToInt(details?.statistics?.stats?.total_read_count) || 0, | ||
| lastRead: TimestampToMoment(details?.statistics?.stats?.last_read), | ||
| lastReset: TimestampToMoment(stats?.data?.last_reset), | ||
| indexRecommendations, | ||
| }, | ||
| }; | ||
| }, | ||
| ); | ||
|
|
||
| // Note: if the managed-service routes to the index detail or the previous | ||
| // database pages change, the breadcrumbs displayed here need to be updated. | ||
| function createManagedServiceBreadcrumbs( | ||
| database: string, | ||
| schema: string, | ||
| table: string, | ||
| index: string, | ||
| ): BreadcrumbItem[] { | ||
| return [ | ||
| { link: "/databases", name: "Databases" }, | ||
| { | ||
| link: `/databases/${database}`, | ||
| name: "Tables", | ||
| }, | ||
| { | ||
| link: `/databases/${database}/${schema}/${table}`, | ||
| name: `Table: ${table}`, | ||
| }, | ||
| { | ||
| link: `/databases/${database}/${schema}/${table}/${index}`, | ||
| name: `Index: ${index}`, | ||
| }, | ||
| ]; | ||
| } |
49 changes: 49 additions & 0 deletions
49
pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts
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,49 @@ | ||
| // Copyright 2022 The Cockroach Authors. | ||
| // | ||
| // Use of this software is governed by the Business Source License | ||
| // included in the file licenses/BSL.txt. | ||
| // | ||
| // As of the Change Date specified in that file, in accordance with | ||
| // the Business Source License, use of this software will be governed | ||
| // by the Apache License, Version 2.0, included in the file | ||
| // licenses/APL.txt. | ||
|
|
||
| import { AppState } from "../store"; | ||
| import { RouteComponentProps, withRouter } from "react-router-dom"; | ||
| import { selectIndexDetails } from "./indexDetails.selectors"; | ||
| import { Dispatch } from "redux"; | ||
| import { IndexDetailPageActions, IndexDetailsPage } from "./indexDetailsPage"; | ||
| import { connect } from "react-redux"; | ||
| import { actions as indexStatsActions } from "src/store/indexStats/indexStats.reducer"; | ||
| import { cockroach } from "@cockroachlabs/crdb-protobuf-client"; | ||
| import { actions as nodesActions } from "../store/nodes"; | ||
|
|
||
| const mapStateToProps = (state: AppState, props: RouteComponentProps) => { | ||
| return selectIndexDetails(state, props); | ||
| }; | ||
|
|
||
| const mapDispatchToProps = (dispatch: Dispatch): IndexDetailPageActions => ({ | ||
| refreshIndexStats: (database: string, table: string) => { | ||
| dispatch( | ||
| indexStatsActions.refresh( | ||
| new cockroach.server.serverpb.TableIndexStatsRequest({ | ||
| database, | ||
| table, | ||
| }), | ||
| ), | ||
| ); | ||
| }, | ||
| resetIndexUsageStats: (database: string, table: string) => { | ||
| dispatch( | ||
| indexStatsActions.reset({ | ||
| database, | ||
| table, | ||
| }), | ||
| ); | ||
| }, | ||
| refreshNodes: () => dispatch(nodesActions.refresh()), | ||
| }); | ||
|
|
||
| export const ConnectedIndexDetailsPage = withRouter<any, any>( | ||
| connect(mapStateToProps, mapDispatchToProps)(IndexDetailsPage), | ||
| ); |
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
Oops, something went wrong.