Skip to content
This repository has been archived by the owner on Jul 22, 2020. It is now read-only.

Commit

Permalink
feat: complete dashboard page and sockets enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
manuel-calavera authored and mvines committed Jul 6, 2019
1 parent e510f16 commit 373ec1f
Show file tree
Hide file tree
Showing 55 changed files with 1,515 additions and 217 deletions.
2 changes: 1 addition & 1 deletion .env.development
Original file line number Diff line number Diff line change
@@ -1 +1 @@
REACT_APP_BASE_URL='http://testnet.solana.com'
REACT_APP_BASE_URL='edge.testnet.solana.com'
3 changes: 2 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ module.exports = {
es6: true,
node: true,
},
plugins: ['react'],
plugins: ['react', 'flowtype'],
extends: [
'plugin:flowtype/recommended',
'eslint:recommended',
'plugin:react/recommended',
'plugin:import/errors',
Expand Down
1 change: 1 addition & 0 deletions config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ const {override, addBabelPlugin} = require('customize-cra');

module.exports = override(
// addBabelPlugin('lodash'),
addBabelPlugin('date-fns'),
addBabelPlugin('react-hot-loader/babel'),
);
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@
"url": "http://github.com/solana-labs/blockexplorer/issues"
},
"dependencies": {
"@nivo/line": "^0.59.1",
"@solana/web3.js": "^0.16.10",
"babel-plugin-transform-runtime": "^6.23.0",
"base-58": "^0.0.1",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
"cors": "^2.8.5",
"date-fns": "^1.30.1",
"express": "^4.17.1",
"express-ws": "^4.0.0",
"geoip-lite": "^1.3.7",
Expand All @@ -36,8 +38,6 @@
"yaml": "^1.6.0"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/register": "^7.4.4",
"@commitlint/config-conventional": "^8.0.0",
"@commitlint/travis-cli": "^8.0.0",
Expand All @@ -46,6 +46,7 @@
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.2",
"babel-plugin-date-fns": "^0.2.1",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-env": "^1.7.0",
"chart.js": "^2.8.0",
Expand Down
11 changes: 8 additions & 3 deletions src/AppV2.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@ import {hot} from 'react-hot-loader/root';
import {Route, Switch} from 'react-router-dom';
import Header from 'v2/components/Header';
import NavBar from 'v2/components/NavBar';
import Footer from 'v2/components/Footer';
import theme from 'v2/theme';
import socket from 'v2/stores/socket';

socket.init();

const Dashboard = lazy(() => import('v2/components/Dashboard'));

const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
overflow: 'hidden',
},
content: {
flexGrow: 1,
marginLeft: 50,
padding: theme.spacing(3),
paddingTop: 50,
padding: '50px 24px 0 24px',
},
toolbar: {
display: 'flex',
Expand All @@ -40,9 +44,10 @@ const App = () => {
<div className={classes.toolbar} />
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/v2" component={Dashboard} />
<Route exact path="/rc" component={Dashboard} />
</Switch>
</Suspense>
<Footer />
</div>
</div>
</MuiThemeProvider>
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import {BrowserRouter} from 'react-router-dom';

import './index.css';
import App from './App';
// import AppV2 from './AppV2';
import AppV2 from './AppV2';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<BrowserRouter>
{window.location.pathname.includes('v2') ? <App /> : <App />}
{window.location.pathname.includes('rc') ? <AppV2 /> : <App />}
</BrowserRouter>,
document.getElementById('root'),
);
Expand Down
6 changes: 6 additions & 0 deletions src/v2/api/socket.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import RobustWebSocket from 'robust-websocket';
import {BLOCK_EXPLORER_WS_API_BASE} from 'v2/const';

export const initSocket = () => {
return new RobustWebSocket(BLOCK_EXPLORER_WS_API_BASE);
};
4 changes: 4 additions & 0 deletions src/v2/api/stats.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,7 @@ import api from '.';
export function getStats() {
return api('/global-stats');
}

export function getTxnStats() {
return api('/txn-stats');
}
Binary file added src/v2/assets/icons/arrow-right.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 98 additions & 0 deletions src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import {Typography} from '@material-ui/core';
import {observer} from 'mobx-react-lite';
import React from 'react';
import {
ComposableMap,
Geographies,
Geography,
Marker,
Markers,
ZoomableGroup,
} from 'react-simple-maps';
import {map} from 'lodash/fp';
import NodesStore from 'v2/stores/nodes';
import MapTooltip from 'v2/components/UI/MapTooltip';
import {mapStyle, markerStyle} from 'v2/theme';

import useStyles from './styles';

const mapStyles = {
default: mapStyle,
hover: mapStyle,
pressed: mapStyle,
};

const NodesMap = () => {
const classes = useStyles();
const {mapMarkers} = NodesStore;

const mapConfig = {
projection: {
scale: 85,
rotation: [-11, 0, 0],
},
style: {
width: '100%',
height: 'auto',
},
center: [0, 20],
};

const renderMarker = marker => (
<Marker key={marker.name} style={markerStyle} marker={marker}>
<MapTooltip
classes={{tooltip: classes.tooltip}}
title={() => (
<>
<div className={classes.tooltipTitle}>NODE: {marker.name}</div>
<div className={classes.tooltipDesc}>Gossip: {marker.gossip}</div>
</>
)}
>
<circle
cx={0}
cy={0}
r={5}
style={{
stroke: '#00FFAD',
}}
/>
</MapTooltip>
</Marker>
);
return (
<div className={classes.card}>
<Typography>Nodes Map</Typography>
<ComposableMap
projectionConfig={mapConfig.projection}
width={390}
height={240}
style={mapConfig.style}
>
<ZoomableGroup center={mapConfig.center} disablePanning>
<Geographies
geography={`${process.env.PUBLIC_URL}/resources/world-50m-simplified.json`}
>
{(geographies, projection) =>
geographies.map(
(geography, i) =>
geography.id !== 'ATA' && (
<Geography
key={i}
tabable={false}
geography={geography}
projection={projection}
style={mapStyles}
/>
),
)
}
</Geographies>
<Markers>{map(renderMarker)(mapMarkers)}</Markers>
</ZoomableGroup>
</ComposableMap>
</div>
);
};

export default observer(NodesMap);
28 changes: 28 additions & 0 deletions src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import {makeStyles} from '@material-ui/core';
import getColor from 'v2/utils/getColor';

export default makeStyles(theme => ({
card: {
background: getColor('grey2')(theme),
maxHeight: 290,
overflow: 'hidden',
padding: '14px 35px',
},
tooltip: {
background: '#fff',
color: getColor('dark')(theme),
padding: 10,
borderRadius: 0,
},
tooltipTitle: {
fontSize: 15,
marginBottom: 4,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
},
tooltipDesc: {
fontSize: 12,
color: getColor('grey3')(theme),
},
}));
114 changes: 49 additions & 65 deletions src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,75 +2,39 @@

import React from 'react';
import {observer} from 'mobx-react-lite';
import {Grid, Paper, Typography} from '@material-ui/core';
import {map} from 'lodash/fp';
import {Grid, Typography} from '@material-ui/core';
import Card from 'v2/components/UI/StatCard';
import OverviewStore from 'v2/stores/networkOverview';
import NodesStore from 'v2/stores/nodes';

import useStyles from './styles';

const StatCards = () => {
const {globalStats} = OverviewStore;
const {globalStats, statsChanges} = OverviewStore;
const {cluster, clusterChanges} = NodesStore;
const classes = useStyles();
return (
<Grid container spacing={2} alignItems="stretch">
<Grid item xs={3} zeroMinWidth>
<Paper className={classes.card}>
<Typography align="center" variant="body1">
Node Count
</Typography>
<Typography
noWrap
align="center"
variant="h2"
className={classes.val}
>
{globalStats['!blkLastSlot']}
</Typography>{' '}
<Typography align="center" variant="h2" className={classes.changes}>
-2.45%
</Typography>
</Paper>
</Grid>
<Grid item xs={3} zeroMinWidth>
<Paper className={classes.card}>
<Typography align="center" variant="body1">
Block Height
</Typography>
<Typography
noWrap
align="center"
variant="h2"
className={classes.val}
>
{globalStats['!blkLastSlot']}
</Typography>
<Typography align="center" variant="h2" className={classes.changes}>
-2.45%
</Typography>
</Paper>
</Grid>
<Grid item xs={3} zeroMinWidth>
<Paper className={classes.card}>
<Typography align="center" variant="body1">
Transactions Count
</Typography>
<Typography
noWrap
align="center"
variant="h2"
className={classes.val}
>
{globalStats['!txnCount']}
</Typography>
<Typography align="center" variant="h2" className={classes.changes}>
-2.45%
</Typography>
</Paper>
</Grid>
<Grid item xs={3} zeroMinWidth>
<Paper className={classes.card}>
<Typography align="center" variant="body1">
Current Leader
</Typography>

const cards = [
{
title: 'Node Count',
value: cluster.nodes.length,
changes: clusterChanges.nodes,
},
{
title: 'Block Height',
value: globalStats['!blkLastSlot'],
changes: statsChanges['!blkLastSlot'],
},
{
title: 'Transactions Count',
value: globalStats['!txnCount'],
changes: statsChanges['!txnCount'],
},
{
title: 'Current Leader',
value() {
return (
<Typography
noWrap
align="center"
Expand All @@ -79,8 +43,28 @@ const StatCards = () => {
>
{globalStats['!entLastLeader']}
</Typography>
</Paper>
</Grid>
);
},
},
];

const renderStats = ({
title,
value,
changes = null,
}: {
title: string,
value: string | (() => React$Node),
changes?: string,
}) => (
<Grid key={title} item xs={3} zeroMinWidth>
<Card title={title} value={value} changes={changes} />
</Grid>
);

return (
<Grid container spacing={2} alignItems="stretch">
{map(renderStats)(cards)}
</Grid>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {makeStyles} from '@material-ui/core';

import getColor from '../../../../utils/getColor';
import getColor from 'v2/utils/getColor';

export default makeStyles(theme => ({
card: {
Expand Down
Loading

0 comments on commit 373ec1f

Please sign in to comment.