Skip to content

Commit

Permalink
Merge branch 'dev' into lacchain
Browse files Browse the repository at this point in the history
  • Loading branch information
@xavier506
xavier506 committed Apr 22, 2021
2 parents 66f4cff + c5dcaad commit ae351d8
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 82 deletions.
112 changes: 64 additions & 48 deletions webapp/src/components/TransactionsHistory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import Card from '@material-ui/core/Card'
import Grid from '@material-ui/core/Grid'
import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography'
import LinearProgress from '@material-ui/core/LinearProgress'
Expand All @@ -10,58 +11,73 @@ import { useSubscription } from '@apollo/react-hooks'
import { BLOCK_TRANSACTIONS_HISTORY } from '../gql'
import { formatWithThousandSeparator } from '../utils'

const BodyGraphValue = ({ loading, value }) => {
if (loading) return <LinearProgress />

return (
<Typography component="p" variant="h6">
{value}
</Typography>
)
}

BodyGraphValue.propTypes = {
loading: PropTypes.bool,
value: PropTypes.number
}

BodyGraphValue.defaultProps = {
value: 0,
loading: false
}

const TransactionsHistory = ({ t }) => {
const { data, loading } = useSubscription(BLOCK_TRANSACTIONS_HISTORY)

return (
<Card>
<CardContent>
<Typography component="p" variant="h6">
{t('transactionsHistory')}
</Typography>
{loading && <LinearProgress />}
{!loading && (
<dl>
<dt>
<Typography component="p" variant="subtitle1">
{t('lastHour')}:
</Typography>
</dt>
<dd>
<Typography component="p" variant="subtitle2">
{formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_hour || 0
)}
</Typography>
</dd>
<dt>
<Typography component="p" variant="subtitle1">
{t('lastDay')}:
</Typography>
</dt>
<dd>
<Typography component="p" variant="subtitle2">
{formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_day || 0
)}
</Typography>
</dd>
<dt>
<Typography component="p" variant="subtitle1">
{t('lastWeek')}:
</Typography>
</dt>
<dd>
<Typography component="p" variant="subtitle2">
{formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_week || 0
)}
</Typography>
</dd>
</dl>
)}
</CardContent>
</Card>
<>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography>{`${t('transactions')} ${t('lastHour')}`}</Typography>
<BodyGraphValue
value={formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_hour || 0
)}
loading={loading}
/>
</CardContent>
</Card>
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<Typography>{`${t('transactions')} ${t('lastDay')}`}</Typography>
<BodyGraphValue
value={formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_day || 0
)}
loading={loading}
/>
</CardContent>
</Card>
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<Typography>{`${t('transactions')} ${t('lastWeek')}`}</Typography>
<BodyGraphValue
value={formatWithThousandSeparator(
data?.stats?.[0]?.transactions_in_last_week || 0
)}
loading={loading}
/>
</CardContent>
</Card>
</Grid>
</>
)
}

Expand Down
4 changes: 2 additions & 2 deletions webapp/src/language/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"routes": {
"/>sidebar": "Dashboard",
"/>title": "EOSIO Dashboard",
"/>heading": "Welcome",
"/>heading": "Welcome to",
"/node-performance>sidebar": "Node Performance ",
"/node-performance>title": "Node Performance - Dashboard",
"/node-performance>heading": "Node Performance ",
Expand Down Expand Up @@ -74,7 +74,7 @@
"homeRoute": {
"currentProducer": "Current Producer",
"headBlock": "Head Block",
"lastBlock": "Last Irreversible Block",
"lastBlock": "Last Irreversible",
"bpSchedule": "Block Producer Schedule",
"transPerSecond": "Transactions Per Second",
"transPerBlock": "Transactions Per Block",
Expand Down
21 changes: 19 additions & 2 deletions webapp/src/layouts/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Sidebar from '../components/Sidebar'
import Header from '../components/Header'
import Footer from '../components/Footer'
import PageTitle from '../components/PageTitle'
import { eosConfig } from '../config'
import { eosConfig, generalConfig } from '../config'

import styles from './styles'

Expand Down Expand Up @@ -44,6 +44,7 @@ const Dashboard = ({ children, width, ual }) => {
const classes = useStyles()
const { t } = useTranslation('routes')
const location = useLocation()
const date = new Date()

const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen)
Expand Down Expand Up @@ -72,7 +73,23 @@ const Dashboard = ({ children, width, ual }) => {
<Box className={classes.mainContent} p={isWidthUp('lg', width) ? 6 : 4}>
<Box className={classes.subHeader}>
<Typography variant="h3">
{t(`${location.pathname}>heading`)}
{`${t(`${location.pathname}>heading`)} ${generalConfig.title} `}
<span
style={{
fontSize: 14,
lineHeight: '20px',
letterSpacing: '0.1px',
color: 'rgba(0, 0, 0, 0.87)',
fontWeight: '400'
}}
>
{date.toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</span>
</Typography>
<Box className={classes.network}>
<Typography component="p" variant="h5">
Expand Down
95 changes: 65 additions & 30 deletions webapp/src/routes/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint camelcase: 0 */
import React, { lazy, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { makeStyles } from '@material-ui/styles'
import { useQuery } from '@apollo/react-hooks'
import { useTranslation } from 'react-i18next'

Expand All @@ -10,6 +11,7 @@ import { NODES_QUERY } from '../gql'
const Card = lazy(() => import('@material-ui/core/Card'))
const CardContent = lazy(() => import('@material-ui/core/CardContent'))
const Grid = lazy(() => import('@material-ui/core/Grid'))
const Box = lazy(() => import('@material-ui/core/Box'))
const Typography = lazy(() => import('@material-ui/core/Typography'))
const LinearProgress = lazy(() => import('@material-ui/core/LinearProgress'))
const ProducersChart = lazy(() => import('../components/ProducersChart'))
Expand All @@ -20,8 +22,52 @@ const TransactionsLineChart = lazy(() =>
import('../components/TransactionsLineChart')
)

const useStyles = makeStyles((theme) => ({
leftColumn: {
alignContent: 'space-between',
paddingRight: 0,
'& .MuiCard-root': {
height: 125,
marginBottom: theme.spacing(2),
'& .MuiTypography-body1': {
marginBottom: theme.spacing(2)
}
},
[theme.breakpoints.up('md')]: {
paddingRight: theme.spacing(2)
}
},
rightColumn: {
paddingLeft: 0,
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
paddingLeft: theme.spacing(2)
}
},
bottomRow: {
paddingTop: 0,
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(1)
}
},
boxIrreversible: {
display: 'flex',
alignItems: 'baseline',
paddingTop: theme.spacing(3),
'& .MuiTypography-body1': {
marginBottom: '0 !important',
letterSpacing: '0.09px',
color: 'rgba(0, 0, 0, 0.54)',
'& strong': {
color: '#212121'
}
}
}
}))

const Home = () => {
const dispatch = useDispatch()
const classes = useStyles()
const { data: { loading, producers } = {} } = useQuery(NODES_QUERY)
const info = useSelector((state) => state.eos.info)
const tps = useSelector((state) => state.eos.tps)
Expand Down Expand Up @@ -94,23 +140,20 @@ const Home = () => {
}, [dispatch])

return (
<Grid item xs={12}>
<Grid container spacing={2} justify="space-between">
<Box>
<Grid container justify="space-between">
<Grid
container
item
xs={12}
md={3}
style={{ alignContent: 'baseline' }}
className={classes.leftColumn}
justify="flex-start"
spacing={2}
>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography component="p" variant="h6">
{t('currentProducer')}
</Typography>
<Typography>{t('currentProducer')}</Typography>
<Typography component="p" variant="h6">
{info.head_block_producer}
</Typography>
Expand All @@ -120,35 +163,27 @@ const Home = () => {
<Grid item xs={12}>
<Card>
<CardContent>
<Typography component="p" variant="h6">
{t('headBlock')}
</Typography>
<Typography>{t('headBlock')}</Typography>
<Typography component="p" variant="h6">
{formatWithThousandSeparator(info.head_block_num)}
</Typography>
<Box className={classes.boxIrreversible}>
<Typography>
{`${t('lastBlock')}: `}
<strong>
{formatWithThousandSeparator(
info.last_irreversible_block_num
)}
</strong>
</Typography>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography component="p" variant="h6">
{t('lastBlock')}
</Typography>
<Typography component="p" variant="h6">
{formatWithThousandSeparator(
info.last_irreversible_block_num
)}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12}>
<TransactionsHistory t={t} />
</Grid>
<TransactionsHistory t={t} />
</Grid>
{loading && <LinearProgress />}
<Grid item xs={12} md={9}>
<Grid item xs={12} md={9} className={classes.rightColumn}>
<Card>
<CardContent>
<Typography component="p" variant="h6">
Expand All @@ -162,7 +197,7 @@ const Home = () => {
</Card>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid container className={classes.bottomRow}>
<Grid item xs={12}>
<Card>
<CardContent>
Expand All @@ -174,7 +209,7 @@ const Home = () => {
</Card>
</Grid>
</Grid>
</Grid>
</Box>
)
}

Expand Down

0 comments on commit ae351d8

Please sign in to comment.