db-console: statement details component #162
Merged
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
koorosh
force-pushed
the
db-console--statement-details-extraction
branch
3 times, most recently
from
2a1c59d to
a931e38
Compare
koorosh
changed the title
koorosh
requested review from
j-low,
laurenbarker and
nathanstilwell
as code owners
koorosh
requested review from
dhartunian and
vladlos
and removed request for
j-low and
laurenbarker
dhartunian
requested changes
Dec 23, 2020
| @@ -99,7 +99,7 @@ export const Loading: React.FC<LoadingProps> = props => { | |||
|
|
|||
| return ( | |||
| <div className={cx("alerts-container", props.errorClassName)}> | |||
| {errorAlerts} | |||
| {React.Children.toArray(errorAlerts)} | |||
There was a problem hiding this comment.
It fixes React error about missing key attribute for array of elements.
React.Children.toArray accepts an array of react elements and allows to set automatically key attribute if it's missed.
| @@ -21,7 +21,7 @@ module.exports = { | |||
| 'node_modules', | |||
| path.join(__dirname, 'src/fonts'), | |||
| ], | |||
| extensions: [".ts", ".tsx", ".js", ".jsx", ".less"], | |||
| extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".scss"], | |||
There was a problem hiding this comment.
why did we need to add this now?
There was a problem hiding this comment.
hm, this change looks useless, will revert it.
Agree |
koorosh
force-pushed
the
db-console--statement-details-extraction
branch
from
a931e38 to
ff3fcb8
Compare
vladlos
reviewed
Jan 5, 2021
| @@ -1 +1,5 @@ | |||
| export * from "./barCharts"; | |||
| export * from "./rowsBrealdown"; | |||
koorosh
force-pushed
the
db-console--statement-details-extraction
branch
from
ff3fcb8 to
a7a4488
Compare
koorosh
force-pushed
the
db-console--statement-details-extraction
branch
from
a7a4488 to
6d8efa2
Compare
2 tasks
dhartunian
approved these changes
Jan 12, 2021
| @@ -98,6 +98,7 @@ module.exports = { | |||
| test: /\.js$/, | |||
| loader: "source-map-loader", | |||
| }, | |||
| { test: /\.css$/, use: [ "style-loader", "css-loader" ] }, | |||
There was a problem hiding this comment.
Where are we loading raw CSS?
There was a problem hiding this comment.
Components which depend on Antd styles, have to load its CSS styles explicitly and we have Table component which depends on it:
https://github.com/cockroachdb/ui/pull/162/files#diff-70a6adf902647bd71cee4e2b65f55a1a999736c39698aef2ba64f1a70aedbadaR6
This change extracts Statements details page and its dependent components and styles. - most of the components moved without any changes, only import paths were adjusted - styles converted from Styl to SCSS - modified route paths to ensure they start with "/" root path (it ensures that routes behave the same way regardless to current path). - `util` directory now contain `network` and `nodes` subdirectories with logic specific to particular entities. It allows avoid extra logic in redux layer and keep it independently.
koorosh
force-pushed
the
db-console--statement-details-extraction
branch
from
6d8efa2 to
ee7c427
Compare
vladlos
approved these changes
Jan 13, 2021
craig bot
pushed a commit
to cockroachdb/cockroach
that referenced
this pull request
Jan 19, 2021
58701: ui: statement details import r=koorosh a=koorosh Related to #57372 Depends on cockroachdb/ui#162 Depends on cockroachdb/yarn-vendored#51 Statement details and Diagnostics view pages are moved out to `admin-ui-components` package and now they are imported back as a reusable components. In addition to changed imports, StatementDetails component now exposes additional props for Diagnostics view tab. Before, StatementDetails component used Diagnostics view connected to store and now it uses pure component. This change were made to provide single point of integration to redux store (the same way as other components connected). Tracking analytics functionality for Diagnostics view was initially called directly from components and now it's refactored out of component and involved with redux actions and sagas. It was necessary to exclude this logic from pure components and allow client apps which integrate Statement details to implement their own logic for tracking analytics if necessary. TODO: - [x] remove all exported components from this code base to avoid duplicates. - [x] update `admin-ui-components` package version in `package.json` Release note: None Co-authored-by: Andrii Vorobiov <[email protected]>
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.
db-console // StatementDetails component
Related to cockroachdb/cockroach#57372
This change extracts Statements details page and its dependent
components and styles.
paths were adjusted
(it ensures that routes behave the same way regardless to current
path).
utildirectory now containnetworkandnodessubdirectorieswith logic specific to particular entities. It allows avoid extra logic
in redux layer and keep it independently.
This change is