Nested routing for DataHound

src/VisionApp.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import "./assets/styles/VisionApp.scss";
-import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, NavLink, Route, Switch, Redirect } from "react-router-dom";
 import WatchDog from "./pages/WatchDog";
 import DataHound from "./pages/DataHound";
 import Parrot from "./pages/Parrot";
@@ -14,7 +14,7 @@ function VisionApp() {
         <Router>
             <div className="vision-app">
                 <div className="top-navbar">
-                    <Link to={RouteEnum.DefaultRoute} className="vision-link">
+                    <NavLink to={RouteEnum.DefaultRoute} className="vision-link">
                         <div className="vision-icon-div">
                             <div className="vision-icon">
                                 <img src={visionLogo} className="vision-app-logo" alt="logo" />
@@ -23,7 +23,7 @@ function VisionApp() {
                                 <span className="vision-text-span">Vision</span>
                             </div>
                         </div>
-                    </Link>
+                    </NavLink>
                     <div className="vision-module-selector">
                         <ModuleLink to={RouteEnum.DataHoundRoute} icon="support">
                             Data Hound
@@ -38,7 +38,8 @@ function VisionApp() {
                 </div>
 
                 <Switch>
-                    <Route path={[RouteEnum.DefaultRoute, RouteEnum.DataHoundRoute]} exact={true}>
+                    <Redirect from={RouteEnum.DefaultRoute} to={RouteEnum.DataHoundRoute} exact={true} />
+                    <Route path={RouteEnum.DataHoundRoute}>
                         <DataHound />
                     </Route>
                     <Route path={RouteEnum.WatchDogRoute} exact={true}>

src/assets/styles/componentstyles/SideNavBar.scss

@@ -1,5 +1,8 @@
 .side-navbar {
+    display: flex;
+    flex-direction: column;
     min-width: 180px;
     width: 180px;
     background: linear-gradient(to right, #152440, #152842);
+    border-right: 1px solid #a8d4e4;
 }

src/common/enums.ts

@@ -6,6 +6,14 @@ export enum RouteEnum {
     OtherRoute = "*"
 }
 
+export enum DataHoundRouteEnum {
+    DefaultRoute = "/datahound/",
+    DashboardRoute = "/datahound/dashboard",
+    JobsRoute = "/datahound/jobs",
+    DataRoute = "/datahound/data",
+    OtherRoute = "/datahound/*"
+}
+
 export enum NotFoundComponentType {
     Page = "Page",
     Item = "Item"

src/components/datahound/ProxyManagerPieChart.tsx

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+import * as am4core from "@amcharts/amcharts4/core";
+import am4themes_animated from "@amcharts/amcharts4/themes/animated";
+import am4themes_dark from "@amcharts/amcharts4/themes/dark";
+import * as am4charts from "@amcharts/amcharts4/charts";
+
+interface ProxyManagerPieChartProps {}
+
+class ProxyManagerPieChart extends Component<ProxyManagerPieChartProps, {}> {
+    async componentDidMount() {
+        // Themes begin
+        am4core.useTheme(am4themes_animated);
+        am4core.useTheme(am4themes_dark);
+        // Themes end
+        // Create chart instance
+        let chart = am4core.create("pm-pie-chart-div", am4charts.PieChart);
+
+        // Add data
+        chart.data = [
+            {
+                country: "Lithuania",
+                litres: 501.9
+            },
+            {
+                country: "Czech Republic",
+                litres: 301.9
+            },
+            {
+                country: "Ireland",
+                litres: 201.1
+            },
+            {
+                country: "Germany",
+                litres: 165.8
+            },
+            {
+                country: "Australia",
+                litres: 139.9
+            },
+            {
+                country: "Austria",
+                litres: 128.3
+            },
+            {
+                country: "UK",
+                litres: 99
+            },
+            {
+                country: "Belgium",
+                litres: 60
+            },
+            {
+                country: "The Netherlands",
+                litres: 50
+            }
+        ];
+
+        // Add and configure Series
+        let pieSeries = chart.series.push(new am4charts.PieSeries());
+        pieSeries.dataFields.value = "litres";
+        pieSeries.dataFields.category = "country";
+    }
+
+    render() {
+        return (
+            <div className="proxy-manager-pie-chart-container">
+                <div id="pm-pie-chart-div" style={{ backgroundColor: "grey" }}></div>
+            </div>
+        );
+    }
+}
+
+export default ProxyManagerPieChart;

src/components/datahound/StockChart.tsx

@@ -17,6 +17,7 @@ class StockChart extends Component<StockChartProps, {}> {
     render() {
         return (
             <div className="stock-chart-container">
+                hello
                 <div id="controls"></div>
                 <div id="stockchartdiv"></div>
             </div>

src/components/links/ModuleLink.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { RouteEnum } from "../../common/enums";
 import { Icon } from "@material-ui/core";
 
-const styledModuleClassName = "styled-link";
+const styledModuleClassName = "styled-module-link";
 const moduleTextClassName = "module-name";
 const activeModuleClassName = "active-module";
 const moduleIconClassName = "module-icon";

src/components/links/SideLink.tsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+import { DataHoundRouteEnum } from "../../common/enums";
+import { Icon } from "@material-ui/core";
+import React from "react";
+
+const styledSubModuleClassName = "styled-sub-module-link";
+const subModuleTextClassName = "sub-module-name";
+const activeSubModuleClassName = "active-sub-module";
+const subModuleIconClassName = "sub-module-icon";
+
+export const StyledSideLink = styled(NavLink)`
+    text-decoration: none;
+
+    &:focus,
+    &:hover,
+    &:visited,
+    &:link,
+    &:active {
+        text-decoration: none;
+        color: white;
+    }
+
+    &.${styledSubModuleClassName} {
+        display: flex;
+        flex-direction: column;
+        min-width: 174px;
+        width: 174px;
+        min-height: 60px;
+        padding: 18px 0;
+        border-left: 6px solid transparent;
+        border-bottom: 1px solid #a8d4e4;
+
+        .${subModuleTextClassName} {
+            margin: auto;
+            padding: 0 12px;
+            color: #7f695e;
+        }
+        .${subModuleIconClassName} {
+            margin: auto;
+            color: #7f695e;
+        }
+    }
+
+    &.${activeSubModuleClassName} {
+        border-left: 6px solid #ff7831;
+        .${subModuleTextClassName} {
+            color: white;
+        }
+        .${subModuleIconClassName} {
+            color: white;
+        }
+    }
+`;
+
+interface ISideLink {
+    children: string;
+    to: DataHoundRouteEnum;
+    icon: string;
+}
+
+function SideLink({ children, to, icon }: ISideLink) {
+    return (
+        <StyledSideLink className={styledSubModuleClassName} to={to} activeClassName={activeSubModuleClassName}>
+            <Icon className={subModuleIconClassName}>{icon}</Icon>
+            <div className={subModuleTextClassName}>{children}</div>
+        </StyledSideLink>
+    );
+}
+
+export default SideLink;

src/components/links/StyledLink.tsx

@@ -1,7 +1,7 @@
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 
-const StyledLink = styled(Link)`
+const StyledLink = styled(NavLink)`
     text-decoration: none;
 
     &:focus,

src/components/navbars/SideNavBar.tsx

@@ -1,8 +1,10 @@
-import React from "react";
+import React, { FunctionComponent } from "react";
 import "../../assets/styles/componentstyles/SideNavBar.scss";
 
-function SideNavBar() {
-    return <div className="side-navbar"></div>;
-}
+interface ISideNavBarProps {}
+
+const SideNavBar: FunctionComponent<ISideNavBarProps> = (props) => {
+    return <div className="side-navbar">{props.children}</div>;
+};
 
 export default SideNavBar;

src/pages/DataHound.tsx

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
 import axios from "axios";
-import * as am4core from "@amcharts/amcharts4/core";
-import * as am4charts from "@amcharts/amcharts4/charts";
-import am4themes_dark from "@amcharts/amcharts4/themes/dark";
-import am4themes_animated from "@amcharts/amcharts4/themes/animated";
 import "../assets/styles/pagestyles/DataHound.scss";
 import SideNavBar from "../components/navbars/SideNavBar";
 import StockChart from "../components/datahound/StockChart";
+import { DataHoundRouteEnum, NotFoundComponentType } from "../common/enums";
+import NotFound from "./NotFound";
+import { Redirect, Route, Switch } from "react-router-dom";
+import SideLink from "../components/links/SideLink";
+import ProxyManagerPieChart from "../components/datahound/ProxyManagerPieChart";
 
 interface ProxyAPIStats {
     status: string;
@@ -51,58 +52,6 @@ class DataHound extends Component<{}, ProxyManagerState> {
             .catch((e) => {
                 console.log(e);
             });
-
-        // Themes begin
-        am4core.useTheme(am4themes_animated);
-        am4core.useTheme(am4themes_dark);
-        // Themes end
-        // Create chart instance
-        let chart = am4core.create("chartdiv", am4charts.PieChart);
-
-        // Add data
-        chart.data = [
-            {
-                country: "Lithuania",
-                litres: 501.9
-            },
-            {
-                country: "Czech Republic",
-                litres: 301.9
-            },
-            {
-                country: "Ireland",
-                litres: 201.1
-            },
-            {
-                country: "Germany",
-                litres: 165.8
-            },
-            {
-                country: "Australia",
-                litres: 139.9
-            },
-            {
-                country: "Austria",
-                litres: 128.3
-            },
-            {
-                country: "UK",
-                litres: 99
-            },
-            {
-                country: "Belgium",
-                litres: 60
-            },
-            {
-                country: "The Netherlands",
-                litres: 50
-            }
-        ];
-
-        // Add and configure Series
-        let pieSeries = chart.series.push(new am4charts.PieSeries());
-        pieSeries.dataFields.value = "litres";
-        pieSeries.dataFields.category = "country";
     }
 
     render() {
@@ -114,12 +63,43 @@ class DataHound extends Component<{}, ProxyManagerState> {
                 proxyHitRates.push([proxyName, proxy_manager_stats[proxyName]?.api_stats?.api_hit_rate]);
             });
         }
+
         return (
             <div className="data-hound-module-container">
-                <SideNavBar />
+                <SideNavBar>
+                    <SideLink to={DataHoundRouteEnum.DashboardRoute} icon="dashboard">
+                        Dashboard
+                    </SideLink>
+                    <SideLink to={DataHoundRouteEnum.JobsRoute} icon="work">
+                        Jobs
+                    </SideLink>
+                    <SideLink to={DataHoundRouteEnum.DataRoute} icon="multiline_chart">
+                        Data
+                    </SideLink>
+                </SideNavBar>
                 <div className="data-hound-info-center">
-                    <div id="chartdiv" style={{ backgroundColor: "grey" }}></div>
-                    <StockChart />
+                    <Switch>
+                        <Redirect
+                            from={DataHoundRouteEnum.DefaultRoute}
+                            to={DataHoundRouteEnum.DashboardRoute}
+                            exact={true}
+                        />
+                        <Route path={DataHoundRouteEnum.DashboardRoute} exact={true}>
+                            <div className="data-hound-dashboard-container">
+                                <ProxyManagerPieChart />
+                            </div>
+                        </Route>
+                        <Route path={DataHoundRouteEnum.JobsRoute} exact={true}>
+                            Jobs
+                            <StockChart />
+                        </Route>
+                        <Route path={DataHoundRouteEnum.DataRoute} exact={true}>
+                            Data
+                        </Route>
+                        <Route path={DataHoundRouteEnum.OtherRoute}>
+                            <NotFound componentType={NotFoundComponentType.Page} />
+                        </Route>
+                    </Switch>
                 </div>
             </div>
         );