Pause transaction history graphic (#425)

* feat(FE): add pause button in trasaction history graphic * feat(FE): disable pause button style * feat(FE): add query to get block history data * feat(FE): modeled transaction block data * fix(FE): resolve conflict * fix(FE): fix delete warnings and clean code * fix(FE): migrations change * fix(FE): i18n fix
edenia · Apr 27, 2021 · f5f2001 · f5f2001
1 parent 306876d
commit f5f2001
Show file tree

Hide file tree

Showing 16 changed files with 548 additions and 229 deletions.
diff --git a/.github/workflows/push-lacchain-environment.yaml b/.github/workflows/push-lacchain-environment.yaml
@@ -33,7 +33,7 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
           # Webapp
           PORT: '80'
-          REACT_APP_TTILE: 'LACChain Network Dashboard'
+          REACT_APP_TITLE: 'LACChain Network Dashboard'
           REACT_APP_DEFAULT_PRODUCER_LOGO: 'https://latamlink.io/images/latamlink_logo-header.svg'
           REACT_APP_EOS_RATE_LINK: ''
           REACT_APP_USE_REWARDS: 'false'
@@ -68,7 +68,7 @@ jobs:
           INGRESS_GRAPHQL_HOST: dashboard-graphql.latamlink.io
           # Webapp
           PORT: '80'
-          REACT_APP_TTILE: 'LACChain Network Dashboard'
+          REACT_APP_TITLE: 'LACChain Network Dashboard'
           REACT_APP_DEFAULT_PRODUCER_LOGO: 'https://latamlink.io/images/latamlink_logo-header.svg'
           REACT_APP_EOS_RATE_LINK: ''
           REACT_APP_USE_REWARDS: 'false'

diff --git a/.github/workflows/push-master-environment.yaml b/.github/workflows/push-master-environment.yaml
@@ -32,7 +32,7 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
           # Webapp
           PORT: "80"
-          REACT_APP_TTILE: "EOS Mainnet Network Dashboard"
+          REACT_APP_TITLE: "EOS Mainnet Network Dashboard"
           REACT_APP_DEFAULT_PRODUCER_LOGO: "https://bloks.io/img/eosio.png"
           REACT_APP_EOS_RATE_LINK: "https://eosrate.io"
           REACT_APP_USE_REWARDS: "true"
@@ -64,7 +64,7 @@ jobs:
           INGRESS_GRAPHQL_HOST: graphql-mainnet.eosio.cr
           # Webapp
           PORT: "80"
-          REACT_APP_TTILE: "EOS Mainnet Network Dashboard"
+          REACT_APP_TITLE: "EOS Mainnet Network Dashboard"
           REACT_APP_DEFAULT_PRODUCER_LOGO: "https://bloks.io/img/eosio.png"
           REACT_APP_EOS_RATE_LINK: "https://eosrate.io"
           REACT_APP_USE_REWARDS: "true"

diff --git a/hapi/src/services/state-history-plugin.service.js b/hapi/src/services/state-history-plugin.service.js
@@ -101,6 +101,7 @@ const handleBlocksResult = async data => {
       this_block: data.this_block,
       prev_block: data.prev_block
     }
+
     await saveBlockHistory({
       producer: block.producer,
       schedule_version: block.schedule_version,

diff --git a/hasura/metadata/tables.yaml b/hasura/metadata/tables.yaml
@@ -1,6 +1,20 @@
 - table:
     schema: public
     name: block_history
+  select_permissions:
+  - role: guest
+    permission:
+      columns:
+      - id
+      - block_id
+      - block_num
+      - transactions_length
+      - timestamp
+      - created_at
+      - updated_at
+      - producer
+      - schedule_version
+      filter: {}
 - table:
     schema: public
     name: block_history_by_producer_type

diff --git a/kubernetes/configmap-dashboard.yaml b/kubernetes/configmap-dashboard.yaml
@@ -5,7 +5,7 @@ metadata:
 data:
   # webapp
   PORT: "${PORT}"
-  REACT_APP_TTILE: "${REACT_APP_TTILE}"
+  REACT_APP_TITLE: "${REACT_APP_TITLE}"
   REACT_APP_DEFAULT_PRODUCER_LOGO: "${REACT_APP_DEFAULT_PRODUCER_LOGO}"
   REACT_APP_EOS_RATE_LINK: "${REACT_APP_EOS_RATE_LINK}"
   REACT_APP_USE_REWARDS: "${REACT_APP_USE_REWARDS}"

diff --git a/webapp/src/components/TransactionsLineChart.js b/webapp/src/components/TransactionsLineChart.js
@@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/styles'
 import { useTheme } from '@material-ui/core/styles'
 import Divider from '@material-ui/core/Divider'
 import { useTranslation } from 'react-i18next'
+import Skeleton from '@material-ui/lab/Skeleton'
 import PropTypes from 'prop-types'
 import {
   LineChart,
@@ -24,9 +25,38 @@ const useStyles = makeStyles((theme) => ({
   },
   description: {
     fontWeight: 'normal'
+  },
+  graphSkeleton: {
+    width: '100%',
+    margin: theme.spacing(1),
+    '& .MuiSkeleton-rect': {
+      width: '100%',
+      height: 300
+    },
+    '& .MuiBox-root': {
+      display: 'flex',
+      justifyContent: 'center',
+      '& .MuiSkeleton-text': {
+        margin: theme.spacing(0, 1)
+      }
+    }
   }
 }))
 
+const GraphSkeleton = () => {
+  const classes = useStyles()
+
+  return (
+    <Box className={classes.graphSkeleton}>
+      <Skeleton variant="rect" />
+      <Box>
+        <Skeleton width="30%" />
+        <Skeleton width="30%" />
+      </Box>
+    </Box>
+  )
+}
+
 const CustomTooltip = ({ active, payload }) => {
   const classes = useStyles()
   const { t } = useTranslation('transactionsChartComponent')
@@ -72,10 +102,12 @@ CustomTooltip.propTypes = {
   payload: PropTypes.array
 }
 
-const TransactionsChart = ({ data }) => {
+const TransactionsChart = ({ data, loading }) => {
   const theme = useTheme()
   const { t } = useTranslation('transactionsChartComponent')
 
+  if (loading) return <GraphSkeleton />
+
   return (
     <ResponsiveContainer width="100%" maxHeight={300} aspect={1.6}>
       <LineChart
@@ -113,7 +145,8 @@ const TransactionsChart = ({ data }) => {
 }
 
 TransactionsChart.propTypes = {
-  data: PropTypes.array
+  data: PropTypes.array,
+  loading: PropTypes.bool
 }
 
 export default TransactionsChart
diff --git a/webapp/src/gql/index.js b/webapp/src/gql/index.js
@@ -1,2 +1,3 @@
 export * from './producer.gql'
 export * from './setting.gql'
+export * from './transaction.gql'
diff --git a/webapp/src/gql/transaction.gql.js b/webapp/src/gql/transaction.gql.js
@@ -0,0 +1,14 @@
+import gql from 'graphql-tag'
+
+export const TRANSACTION_QUERY = gql`
+  query($date: timestamptz) {
+    blockHistory: block_history(
+      where: { timestamp: { _gte: $date } }
+      order_by: { block_num: desc }
+    ) {
+      block_id
+      block_num
+      transactions_length
+    }
+  }
+`
diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -88,7 +88,14 @@
     "transPerSecond": "Transactions Per Second",
     "transPerBlock": "Transactions Per Block",
     "transactions": "Transactions",
-    "transactionsHistory": "Transactions History"
+    "transactionsHistory": "Transactions History",
+    "timeFrame": "Time frame",
+    "pause": "Pause",
+    "play": "Play",
+    "Last Hour": "Last Hour",
+    "Last Day": "Last Day",
+    "Last Week": "Last Week",
+    "Last Year": "Last Year"
   },
   "networkInfoRoute": {
     "chainId": "Chain Id",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -87,7 +87,14 @@
     "bpSchedule": "Programa de Productor de Bloque",
     "transPerSecond": "Transacciones por Segundo",
     "transPerBlock": "Transacciones por Bloque",
-    "transactionsHistory": "Historial de transacciones"
+    "transactionsHistory": "Historial de transacciones",
+    "timeFrame": "Periodo de tiempo",
+    "pause": "Pausa",
+    "play": "Play",
+    "Last Hour": "Última Hora",
+    "Last Day": "Última Día",
+    "Last Week": "Última Semana",
+    "Last Year": "Último Año"
   },
   "networkInfoRoute": {
     "chainId": "Identificador de la cadena",