Skip to content

Commit

Permalink
ui: Fix app routing
Browse files Browse the repository at this point in the history 
With latest version of 'react-router' there are following changes
required:
- Nested routes are not supported anymore. Refactored to use `flat`
representation of routes;
- Relative paths aren't supported, changed to absolute paths;

Release note: None
  • Loading branch information
@koorosh
koorosh committed Jan 31, 2020
1 parent 2d3a7e5 commit 722c932
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 194 deletions.
15 changes: 9 additions & 6 deletions pkg/ui/ccl/src/routes/visualization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,23 @@
//
// https://github.com/cockroachdb/cockroach/blob/master/licenses/CCL.txt
import React from "react";
import { Route, IndexRedirect } from "react-router";
import {Redirect, Route, Switch} from "react-router-dom";
import ClusterViz from "src/views/clusterviz/containers/map";
import NodeList from "src/views/clusterviz/containers/map/nodeList";
import ClusterOverview from "src/views/cluster/containers/clusterOverview";
import { normalizeConnectedComponent } from "src/util/normalizeConnectedComponent";

export const CLUSTERVIZ_ROOT = "/overview/map";

export default function createNodeMapRoutes(): JSX.Element {
return (
<Route path="overview" component={ ClusterOverview } >
<IndexRedirect to="list" />
<Route path="list" component={ NodeList } />
<Route path="map(/**)" component={normalizeConnectedComponent(ClusterViz)} />
<Route path="/overview">
<ClusterOverview>
<Switch>
<Redirect exact from="/overview" to="/overview/list" />
<Route path="/overview/list" component={ NodeList } />
<Route path="/overview/map" component={ ClusterViz } />
</Switch>
</ClusterOverview>
</Route>
);
}
54 changes: 26 additions & 28 deletions pkg/ui/src/app.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@
import React from "react";
import { assert } from "chai";
import { Action, Store } from "redux";
import { createMemoryHistory } from "react-router";
import { syncHistoryWithStore } from "react-router-redux";
import { createMemoryHistory } from "history";
import { mount, ReactWrapper } from "enzyme";

import "src/enzymeInit";
import { App } from "src/app";
import { AdminUIState, createAdminUIStore, History } from "src/redux/state";
import { AdminUIState, createAdminUIStore } from "src/redux/state";

import ClusterOverview from "src/views/cluster/containers/clusterOverview";
import NodeList from "src/views/clusterviz/containers/map/nodeList";
Expand Down Expand Up @@ -54,11 +53,10 @@ import { Range } from "src/views/reports/containers/range";
import { Stores } from "src/views/reports/containers/stores";

describe("Routing to", () => {
const store: Store<AdminUIState, Action> = createAdminUIStore();
const memoryHistory = createMemoryHistory({
entries: ["/"],
const history = createMemoryHistory({
initialEntries: ["/"],
});
const history: History = syncHistoryWithStore(memoryHistory, store);
const store: Store<AdminUIState, Action> = createAdminUIStore(history);
const appWrapper: ReactWrapper = mount(<App history={history} store={store}/>);

after(() => {
Expand All @@ -78,7 +76,7 @@ describe("Routing to", () => {

it("redirected to '/overview'", () => {
navigateToPath("/");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/overview/list");
});
});
Expand All @@ -91,7 +89,7 @@ describe("Routing to", () => {

it("redirected to '/overview'", () => {
navigateToPath("/overview");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/overview/list");
});
});
Expand Down Expand Up @@ -125,7 +123,7 @@ describe("Routing to", () => {

it("redirected to '/metrics/overview/cluster'", () => {
navigateToPath("/metrics");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/metrics/overview/cluster");
});
});
Expand All @@ -152,7 +150,7 @@ describe("Routing to", () => {

it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
navigateToPath("/metrics/some-dashboard");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/metrics/some-dashboard/cluster");
});
});
Expand All @@ -172,7 +170,7 @@ describe("Routing to", () => {

it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
navigateToPath("/metrics/some-dashboard/node");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/metrics/some-dashboard/cluster");
});
});
Expand All @@ -193,7 +191,7 @@ describe("Routing to", () => {

it("redirected to '/overview/list'", () => {
navigateToPath("/node");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/overview/list");
});
});
Expand Down Expand Up @@ -236,7 +234,7 @@ describe("Routing to", () => {

it("redirected to '/databases/tables'", () => {
navigateToPath("/databases");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/databases/tables");
});
});
Expand All @@ -258,31 +256,31 @@ describe("Routing to", () => {
describe("'/databases/database/:${databaseNameAttr}/table/:${tableNameAttr}' path", () => {
it("redirected to '/database/:${databaseNameAttr}/table/:${tableNameAttr}'", () => {
navigateToPath("/databases/database/some-db-name/table/some-table-name");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/database/some-db-name/table/some-table-name");
});
});

describe("'/database' path", () => {
it("redirected to '/databases'", () => {
navigateToPath("/databases/tables");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/databases/tables");
});
});

describe("'/database/:${databaseNameAttr}' path", () => {
it("redirected to '/databases'", () => {
navigateToPath("/database/some-db-name");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/databases/tables");
});
});

describe("'/database/:${databaseNameAttr}/table' path", () => {
it("redirected to '/databases/tables'", () => {
navigateToPath("/database/some-db-name/table");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/databases/tables");
});
});
Expand Down Expand Up @@ -334,7 +332,7 @@ describe("Routing to", () => {
describe("'/statement' path", () => {
it("redirected to '/statements'", () => {
navigateToPath("/statement");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/statements");
});
});
Expand Down Expand Up @@ -394,7 +392,7 @@ describe("Routing to", () => {

it("redirected to '/raft/ranges'", () => {
navigateToPath("/raft");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/raft/ranges");
});
});
Expand Down Expand Up @@ -501,7 +499,7 @@ describe("Routing to", () => {
describe("'/cluster' path", () => {
it("redirected to '/metrics/overview/cluster'", () => {
navigateToPath("/cluster");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/metrics/overview/cluster");
});
});
Expand All @@ -510,7 +508,7 @@ describe("Routing to", () => {
it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
const dashboardNameAttr = "some-dashboard-name";
navigateToPath(`/cluster/all/${dashboardNameAttr}`);
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, `/metrics/${dashboardNameAttr}/cluster`);
});
});
Expand All @@ -520,15 +518,15 @@ describe("Routing to", () => {
const dashboardNameAttr = "some-dashboard-name";
const nodeIDAttr = 1;
navigateToPath(`/cluster/node/${nodeIDAttr}/${dashboardNameAttr}`);
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, `/metrics/${dashboardNameAttr}/node/${nodeIDAttr}`);
});
});

describe("'/cluster/nodes' path", () => {
it("redirected to '/overview/list'", () => {
navigateToPath("/cluster/nodes");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/overview/list");
});
});
Expand All @@ -537,7 +535,7 @@ describe("Routing to", () => {
it("redirected to '/node/:${nodeIDAttr}'", () => {
const nodeIDAttr = 1;
navigateToPath(`/cluster/nodes/${nodeIDAttr}`);
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, `/node/${nodeIDAttr}`);
});
});
Expand All @@ -546,23 +544,23 @@ describe("Routing to", () => {
it("redirected to '/node/:${nodeIDAttr}/logs'", () => {
const nodeIDAttr = 1;
navigateToPath(`/cluster/nodes/${nodeIDAttr}/logs`);
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, `/node/${nodeIDAttr}/logs`);
});
});

describe("'/cluster/events' path", () => {
it("redirected to '/events'", () => {
navigateToPath("/cluster/events");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/events");
});
});

describe("'/cluster/nodes' path", () => {
it("redirected to '/overview/list'", () => {
navigateToPath("/cluster/nodes");
const location = history.getCurrentLocation();
const location = history.location;
assert.equal(location.pathname, "/overview/list");
});
});
Expand Down
Loading

0 comments on commit 722c932

Please sign in to comment.