From b27caad7a40d163fe75a5fab305f58863f03d076 Mon Sep 17 00:00:00 2001
From: emizzle <ericmastro@status.im>
Date: Tue, 16 Oct 2018 09:36:29 +1100
Subject: [PATCH] Add explorer overview page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Explorer “dashboard” or overview page has been added to give an overview of what can be seen on the individual explorer pages.

Needs work for exact routes not highlighting the overview page.
---
 .../src/components/ExplorerDashboardLayout.js | 34 ++++++++++++
 embark-ui/src/components/ExplorerLayout.js    | 55 ++++++++++++++++---
 embark-ui/src/components/Layout.js            |  3 +-
 embark-ui/src/routes.js                       |  4 +-
 4 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 embark-ui/src/components/ExplorerDashboardLayout.js

diff --git a/embark-ui/src/components/ExplorerDashboardLayout.js b/embark-ui/src/components/ExplorerDashboardLayout.js
new file mode 100644
index 00000000..9473dc04
--- /dev/null
+++ b/embark-ui/src/components/ExplorerDashboardLayout.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  Page,
+  Grid
+} from "tabler-react";
+
+import AccountsContainer from '../containers/AccountsContainer';
+import BlocksContainer from '../containers/BlocksContainer';
+import TransactionsContainer from '../containers/TransactionsContainer';
+
+const ExplorerDashboardLayout = () => (
+  <React.Fragment>
+    <Grid.Row md={12}>
+      <Grid.Col>
+        <Page.Title className="my-5">Explorer</Page.Title>
+      </Grid.Col>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Col className="pl-md-0 pr-md-0 ml-md-0 mr-md-0 pr-lg-3 mr-lg-3 pl-lg-2 ml-lg-2">
+        <AccountsContainer />
+      </Grid.Col>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Col md={6}>
+        <BlocksContainer />
+      </Grid.Col>
+      <Grid.Col md={6}>
+        <TransactionsContainer />
+      </Grid.Col>
+    </Grid.Row>
+  </React.Fragment>
+);
+
+export default ExplorerDashboardLayout;
diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js
index ec783533..9854d80a 100644
--- a/embark-ui/src/components/ExplorerLayout.js
+++ b/embark-ui/src/components/ExplorerLayout.js
@@ -1,5 +1,10 @@
 import React from 'react';
-import {Route, Switch} from 'react-router-dom';
+import {NavLink, Route, Switch} from 'react-router-dom';
+import {
+  Page,
+  Grid,
+  List
+} from "tabler-react";
 
 import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
@@ -8,15 +13,47 @@ import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
+const groupItems = [
+  {to: "/embark/explorer", icon: "compass", value: "Overview", exact: true},
+  {to: "/embark/explorer/accounts", icon: "users", value: "Accounts"},
+  {to: "/embark/explorer/blocks", icon: "book-open", value: "Blocks"},
+  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"}
+];
+
+const className = "d-flex align-items-center";
+
 const ExplorerLayout = () => (
-  <Switch>
-    <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
-    <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
-    <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
-    <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
-    <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
-    <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
-  </Switch>
+  <Grid.Row>
+    <Grid.Col md={3}>
+      <Page.Title className="my-5">Explorer</Page.Title>
+      <div>
+        <List.Group transparent={true}>
+          {groupItems.map((groupItem) => (
+            <List.GroupItem
+              key={groupItem.value}
+              className={className}
+              to={groupItem.to}
+              icon={groupItem.icon}
+              RootComponent={NavLink}
+              exact={groupItem.exact || false}
+            >
+              {groupItem.value}
+            </List.GroupItem>
+          ))}
+        </List.Group>
+      </div>
+    </Grid.Col>
+    <Grid.Col md={9}>
+      <Switch>
+        <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
+        <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
+        <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
+        <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
+        <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
+        <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
+      </Switch>
+    </Grid.Col>
+  </Grid.Row>
 );
 
 export default ExplorerLayout;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index a6eaaccb..2bc46359 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -23,7 +23,8 @@ const sidebarNavItems = {items: [
   {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
   {name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
   {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
-  {name: "Explorer", url: "/embark/explorer/accounts", icon: "fa fa-signal", children: [
+  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-signal", children: [
+    {url: "/embark/explorer", icon: "fa fa-compass", name: "Overview", exact: true},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index 1b5cd3bd..d458cd9b 100644
--- a/embark-ui/src/routes.js
+++ b/embark-ui/src/routes.js
@@ -6,6 +6,7 @@ import ContractsContainer from './containers/ContractsContainer';
 import ContractLayoutContainer from './containers/ContractLayoutContainer';
 import DeploymentContainer from './containers/DeploymentContainer';
 import NoMatch from './components/NoMatch';
+import ExplorerDashboardLayout from './components/ExplorerDashboardLayout';
 import ExplorerLayout from './components/ExplorerLayout';
 import FiddleLayout from './components/FiddleLayout';
 import UtilsLayout from './components/UtilsLayout';
@@ -14,7 +15,8 @@ const routes = (
   <React.Fragment>
     <Switch>
       <Route exact path="/embark/" component={HomeContainer} />
-      <Route path="/embark/explorer/" component={ExplorerLayout} />
+      <Route exact path="/embark/explorer" component={ExplorerDashboardLayout} />
+      <Route path="/embark/explorer" component={ExplorerLayout} />
       <Route path="/embark/deployment/" component={DeploymentContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayoutContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />