github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/app.tsx (about) 1 // Copyright 2018 The Cockroach Authors. 2 // 3 // Use of this software is governed by the Business Source License 4 // included in the file licenses/BSL.txt. 5 // 6 // As of the Change Date specified in that file, in accordance with 7 // the Business Source License, use of this software will be governed 8 // by the Apache License, Version 2.0, included in the file 9 // licenses/APL.txt. 10 11 import { ConnectedRouter } from "connected-react-router"; 12 import { History } from "history"; 13 import "nvd3/build/nv.d3.min.css"; 14 import React from "react"; 15 import { Provider } from "react-redux"; 16 import { Redirect, Route, Switch } from "react-router-dom"; 17 import "react-select/dist/react-select.css"; 18 import { Action, Store } from "redux"; 19 import { AdminUIState } from "src/redux/state"; 20 import { createLoginRoute, createLogoutRoute } from "src/routes/login"; 21 import visualizationRoutes from "src/routes/visualization"; 22 import { appAttr, dashboardNameAttr, databaseNameAttr, implicitTxnAttr, nodeIDAttr, rangeIDAttr, statementAttr, tableNameAttr } from "src/util/constants"; 23 import NotFound from "src/views/app/components/NotFound"; 24 import Layout from "src/views/app/containers/layout"; 25 import DataDistributionPage from "src/views/cluster/containers/dataDistribution"; 26 import { EventPage } from "src/views/cluster/containers/events"; 27 import NodeGraphs from "src/views/cluster/containers/nodeGraphs"; 28 import NodeLogs from "src/views/cluster/containers/nodeLogs"; 29 import NodeOverview from "src/views/cluster/containers/nodeOverview"; 30 import { DatabaseGrantsList, DatabaseTablesList } from "src/views/databases/containers/databases"; 31 import TableDetails from "src/views/databases/containers/tableDetails"; 32 import Raft from "src/views/devtools/containers/raft"; 33 import RaftMessages from "src/views/devtools/containers/raftMessages"; 34 import RaftRanges from "src/views/devtools/containers/raftRanges"; 35 import JobsPage from "src/views/jobs"; 36 import JobDetails from "src/views/jobs/jobDetails"; 37 import { ConnectedDecommissionedNodeHistory } from "src/views/reports"; 38 import Certificates from "src/views/reports/containers/certificates"; 39 import CustomChart from "src/views/reports/containers/customChart"; 40 import Debug from "src/views/reports/containers/debug"; 41 import EnqueueRange from "src/views/reports/containers/enqueueRange"; 42 import Localities from "src/views/reports/containers/localities"; 43 import Network from "src/views/reports/containers/network"; 44 import Nodes from "src/views/reports/containers/nodes"; 45 import ProblemRanges from "src/views/reports/containers/problemRanges"; 46 import Range from "src/views/reports/containers/range"; 47 import ReduxDebug from "src/views/reports/containers/redux"; 48 import Settings from "src/views/reports/containers/settings"; 49 import Stores from "src/views/reports/containers/stores"; 50 import StatementDetails from "src/views/statements/statementDetails"; 51 import StatementsPage from "src/views/statements/statementsPage"; 52 import StatementsDiagnosticsHistoryView from "src/views/reports/containers/statementDiagnosticsHistory"; 53 import "styl/app.styl"; 54 55 // NOTE: If you are adding a new path to the router, and that path contains any 56 // components that are personally identifying information, you MUST update the 57 // redactions list in src/redux/analytics.ts. 58 // 59 // Examples of PII: Database names, Table names, IP addresses; Any value that 60 // could identify a specific user. 61 // 62 // Serial numeric values, such as NodeIDs or Descriptor IDs, are not PII and do 63 // not need to be redacted. 64 65 export interface AppProps { 66 history: History; 67 store: Store<AdminUIState, Action>; 68 } 69 70 // tslint:disable-next-line:variable-name 71 export const App: React.FC<AppProps> = (props: AppProps) => { 72 const {store, history} = props; 73 74 return ( 75 <Provider store={store}> 76 <ConnectedRouter history={history}> 77 <Switch> 78 { /* login */} 79 { createLoginRoute() } 80 { createLogoutRoute(store) } 81 <Route path="/"> 82 <Layout> 83 <Switch> 84 <Redirect exact from="/" to="/overview" /> 85 { /* overview page */ } 86 { visualizationRoutes() } 87 88 { /* time series metrics */ } 89 <Redirect exact from="/metrics" to="/metrics/overview/cluster" /> 90 <Redirect exact from={`/metrics/:${dashboardNameAttr}`} to={`/metrics/:${dashboardNameAttr}/cluster`} /> 91 <Route exact path={`/metrics/:${dashboardNameAttr}/cluster`} component={ NodeGraphs } /> 92 <Redirect exact path={`/metrics/:${dashboardNameAttr}/node`} to={ `/metrics/:${dashboardNameAttr}/cluster` } /> 93 <Route path={ `/metrics/:${dashboardNameAttr}/node/:${nodeIDAttr}` } component={ NodeGraphs } /> 94 95 { /* node details */ } 96 <Redirect exact from="/node" to="/overview/list" /> 97 <Route exact path={ `/node/:${nodeIDAttr}` } component={ NodeOverview } /> 98 <Route exact path={ `/node/:${nodeIDAttr}/logs` } component={ NodeLogs } /> 99 100 { /* events & jobs */ } 101 <Route path="/events" component={ EventPage } /> 102 <Route exact path="/jobs" component={ JobsPage } /> 103 <Route path="/jobs/:id" component={ JobDetails } /> 104 105 { /* databases */ } 106 <Redirect exact from="/databases" to="/databases/tables" /> 107 <Route path="/databases/tables" component={ DatabaseTablesList } /> 108 <Route path="/databases/grants" component={ DatabaseGrantsList } /> 109 <Redirect 110 from={ `/databases/database/:${databaseNameAttr}/table/:${tableNameAttr}` } 111 to={ `/database/:${databaseNameAttr}/table/:${tableNameAttr}` } 112 /> 113 114 <Redirect exact from="/database" to="/databases" /> 115 <Redirect exact from={ `/database/:${databaseNameAttr}`} to="/databases" /> 116 <Redirect exact from={ `/database/:${databaseNameAttr}/table`} to="/databases" /> 117 <Route exact path={ `/database/:${databaseNameAttr}/table/:${tableNameAttr}` } component={ TableDetails } /> 118 119 { /* data distribution */ } 120 <Route exact path="/data-distribution" component={ DataDistributionPage } /> 121 122 { /* statement statistics */ } 123 <Route exact path="/statements" component={ StatementsPage }/> 124 <Route exact path={ `/statements/:${appAttr}`} component={ StatementsPage } /> 125 <Route exact path={ `/statements/:${appAttr}/:${statementAttr}` } component={ StatementDetails } /> 126 <Route exact path={ `/statements/:${appAttr}/:${implicitTxnAttr}/:${statementAttr}` } component={ StatementDetails } /> 127 128 <Route exact path="/statement" component={() => <Redirect to="/statements" />}/> 129 <Route exact path={`/statement/:${statementAttr}`} component={StatementDetails}/> 130 <Route exact path={`/statement/:${implicitTxnAttr}/:${statementAttr}`} component={StatementDetails}/> 131 132 { /* debug pages */ } 133 <Route exact path="/debug" component={Debug}/> 134 <Route exact path="/debug/redux" component={ReduxDebug}/> 135 <Route exact path="/debug/chart" component={CustomChart}/> 136 <Route exact path="/debug/enqueue_range" component={EnqueueRange}/> 137 138 <Route path="/raft"> 139 <Raft> 140 <Switch> 141 <Redirect exact from="/raft" to="/raft/ranges" /> 142 <Route exact path="/raft/ranges" component={RaftRanges}/> 143 <Route exact path="/raft/messages/all" component={RaftMessages}/> 144 <Route exact path={`/raft/messages/node/:${nodeIDAttr}`} component={RaftMessages}/> 145 </Switch> 146 </Raft> 147 </Route> 148 149 <Route exact path="/reports/problemranges" component={ ProblemRanges } /> 150 <Route exact path={`/reports/problemranges/:${nodeIDAttr}`} component={ ProblemRanges }/> 151 <Route exact path="/reports/localities" component={ Localities } /> 152 <Route exact path={`/reports/network/:${nodeIDAttr}`} component={ Network } /> 153 <Route exact path="/reports/network" component={ Network } /> 154 <Route exact path="/reports/nodes" component={ Nodes } /> 155 <Route exact path="/reports/nodes/history" component={ ConnectedDecommissionedNodeHistory } /> 156 <Route exact path="/reports/settings" component={ Settings } /> 157 <Route exact path={`/reports/certificates/:${nodeIDAttr}`} component={ Certificates } /> 158 <Route exact path={`/reports/range/:${rangeIDAttr}`} component={ Range } /> 159 <Route exact path={`/reports/stores/:${nodeIDAttr}`} component={ Stores } /> 160 <Route exact path={`/reports/statements/diagnosticshistory`} component={ StatementsDiagnosticsHistoryView } /> 161 162 { /* old route redirects */ } 163 <Redirect exact from="/cluster" to="/metrics/overview/cluster" /> 164 <Redirect 165 from={`/cluster/all/:${dashboardNameAttr}`} 166 to={`/metrics/:${dashboardNameAttr}/cluster`} 167 /> 168 <Redirect 169 from={`/cluster/node/:${nodeIDAttr}/:${dashboardNameAttr}`} 170 to={`/metrics/:${dashboardNameAttr}/node/:${nodeIDAttr}`} 171 /> 172 <Redirect exact from="/cluster/nodes" to="/overview/list" /> 173 <Redirect exact from={`/cluster/nodes/:${nodeIDAttr}`} to={`/node/:${nodeIDAttr}`} /> 174 <Redirect from={`/cluster/nodes/:${nodeIDAttr}/logs`} to={`/node/:${nodeIDAttr}/logs`}/> 175 <Redirect from="/cluster/events" to="/events"/> 176 177 <Redirect exact from="/nodes" to="/overview/list" /> 178 179 { /* 404 */ } 180 <Route path="*" component={ NotFound } /> 181 </Switch> 182 </Layout> 183 </Route> 184 </Switch> 185 </ConnectedRouter> 186 </Provider> 187 ); 188 };