feat(webapp): use subscription instead of query for health checks

refactor(webapp): refactor queries and hooks to avoid unneeded requests fix(webapp): show the server version of the node fix(webapp): use a high resolution image for empty state chore(webapp): reduce the margins in the BPs cards
edenia · Jan 11, 2023 · 1e78657 · 1e78657
1 parent dfbae01
commit 1e78657
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 131 deletions.
diff --git a/webapp/public/empty-states/Error.webp b/webapp/public/empty-states/Error.webp
diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -7,19 +7,22 @@ export default (theme) => ({
     '& .MuiCardHeader-title': {
       textTransform: 'lowercase',
     },
+    '& .MuiCardHeader-root': {
+      padding: theme.spacing(2,4,0),
+    },
     [theme.breakpoints.up('sm')]: {
       width: 300,
     },
     [theme.breakpoints.up('lg')]: {
       width: '100%',
-      paddingBottom: theme.spacing(2),
+      paddingBottom: theme.spacing(4),
     },
   },
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
-    padding: theme.spacing(0, 4, 4, 4),
+    padding: theme.spacing(0, 4, 0),
     '& .MuiTypography-overline': {
       marginLeft: 0,
       fontWeight: '700',

diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
@@ -6,6 +6,7 @@ import { makeStyles } from '@mui/styles'
 import { useSubscription } from '@apollo/client'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
 import 'flag-icon-css/css/flag-icons.css'
 
 import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql'
@@ -75,13 +76,23 @@ const NodesCard = ({ nodes }) => {
     return (
       <>
         <ShowInfo value={node?.full} title={t('isFull')} />
-        <ShowInfo value={node?.node_info?.version} title={t('nodeVersion')} />
+        {node?.node_info[0]?.version && (
+          <div className={classes.version}>
+            <div className={classes.bold}>{t('nodeVersion')}</div>
+            <Chip
+              className={classes.chip}
+              size="small"
+              variant="outlined"
+              label={node?.node_info[0]?.version}
+            />
+          </div>
+        )}
         <EndpointsChips node={node} />
         <ChipList
           title={t('features')}
           list={node?.node_info[0]?.features?.list}
         />
-        {node.type.includes('query') && <SupportedAPIs node={node} />}
+        <SupportedAPIs list={node?.node_info[0]?.features?.supportedAPIs} />
         <Keys node={node} />
         <HealthStatus node={node} />
       </>

diff --git a/webapp/src/components/NodeCard/SupportedAPIs.js b/webapp/src/components/NodeCard/SupportedAPIs.js
@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
 import Button from '@mui/material/Button'
-import axios from 'axios'
 
 import ChipList from '../ChipList'
 import Tooltip from '../Tooltip'
@@ -11,10 +10,9 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const SupportedAPIs = ({ node }) => {
+const SupportedAPIs = ({ list }) => {
   const classes = useStyles()
   const { t } = useTranslation('nodeCardComponent')
-  const [APIs, setAPIs] = useState([])
   const [anchorEl, setAnchorEl] = useState(null)
 
   const handlePopoverOpen = (target) => {
@@ -25,42 +23,15 @@ const SupportedAPIs = ({ node }) => {
     setAnchorEl(null)
   }
 
-  useEffect(() => {
-    const getAPIs = async () => {
-      let api = ''
-
-      for (let i = 0; i < node.endpoints.length; i++) {
-        const endpoint = node.endpoints[i]
-
-        if (endpoint.type === 'ssl') {
-          api = endpoint.value
-          break
-        }
-      }
-
-      try {
-        const { data } = await axios.get(`${api}/v1/node/get_supported_apis`, {
-          mode: 'cors',
-        })
-
-        if (data.apis && Array.isArray(data.apis)) {
-          setAPIs(data.apis)
-        }
-      } catch (error) {}
-    }
-
-    getAPIs()
-  }, [node.endpoints])
-
   return (
-    !!APIs.length && (
+    !!list?.length && (
       <>
         <Tooltip
           anchorEl={anchorEl}
           open={anchorEl !== null}
           onClose={handlePopoverClose}
         >
-          <ChipList title={t('supportedApis')} list={APIs} />
+          <ChipList title={t('supportedApis')} list={list} />
         </Tooltip>
         <div className={classes.buttonApis}>
           <Button

diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
@@ -31,17 +31,18 @@ export default (theme) => ({
   },
   nodes: {
     width: '280px',
-    padding: theme.spacing(3),
+    padding: theme.spacing(0, 3, 0),
     overflowX: 'auto',
-    marginLeft: '5px',
-    marginRight: '5px',
     borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
+    '& .MuiCardContent-root:last-child': {
+      paddingBottom: theme.spacing(4),
+    },
   },
   nodesWrapper: {
     display: 'flex',
     width: 'max-content',
     flexFlow: 'row nowrap',
-    padding: theme.spacing(2),
+    padding: theme.spacing(0, 2, 0),
     [theme.breakpoints.up('lg')]: {
       paddingRight: '250px',
     },
@@ -69,5 +70,11 @@ export default (theme) => ({
   },
   buttonApis: {
     paddingTop: theme.spacing(2),
-  }
+  },
+  version: {
+    display: 'flex',
+  },
+  chip: {
+    marginLeft: theme.spacing(5),
+  },
 })
diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -5,6 +5,7 @@ export const PRODUCERS_QUERY = gql`
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
+    $endpointFilter: endpoints_by_producer_id_bool_exp
   ) {
     info: producer_aggregate(where: $where) {
       producers: aggregate {
@@ -25,37 +26,31 @@ export const PRODUCERS_QUERY = gql`
       total_votes_eos
       total_rewards
       health_status
-      endpoints
+      last_claim_time
       rank
       updated_at
+      endpoints_list (where: $endpointFilter){
+        type
+        value
+      }
     }
   }
 `
-
-export const NODES_QUERY = gql`
-  query (
+export const NODES_SUBSCRIPTION = gql`
+  subscription (
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
-  ) {
-    info: producer_aggregate(where: $where) {
-      producers: aggregate {
-        count
-      }
-    }
+  ){
     producers: producer(
-      where: $where
-      order_by: { total_votes_percent: desc }
-      offset: $offset
+      where: $where 
       limit: $limit
+      offset:$offset
+      order_by: { total_votes_percent: desc }
     ) {
       id
       owner
-      bp_json
-      total_rewards
-      total_votes_percent
       rank
-      updated_at
       producer_key
       nodes {
         type
@@ -65,7 +60,7 @@ export const NODES_QUERY = gql`
           features
           version
         }
-        endpoints {
+        endpoints (order_by: {type: asc}){
           value
           type
           response
@@ -76,36 +71,28 @@ export const NODES_QUERY = gql`
   }
 `
 
-export const ENDPOINTS_QUERY = gql`
-  query producer(
+export const ENDPOINTS_SUBSCRIPTION = gql`
+  subscription (
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
-    $endpointFilter: endpoint_bool_exp
-  ) {
-    info: producer_aggregate(where: $where) {
-      producers: aggregate {
-        count
-      }
-    }
+    $endpointFilter: endpoints_by_producer_id_bool_exp
+  ){
     producers: producer(
       where: $where
-      order_by: { total_votes_percent: desc }
-      offset: $offset
       limit: $limit
+      offset:$offset
+      order_by: { total_votes_percent: desc }
     ) {
       id
       owner
       updated_at
-      nodes {
-        endpoints(order_by: { head_block_time: desc }, where: $endpointFilter) {
-          id
-          type
-          value
-          head_block_time
-          response
-          updated_at
-        }
+      endpoints_list(where: $endpointFilter, order_by: {value: asc}){
+        type
+        value
+        head_block_time
+        response
+        updated_at
       }
     }
   }

diff --git a/webapp/src/hooks/customHooks/useEndpointsState.js b/webapp/src/hooks/customHooks/useEndpointsState.js
@@ -1,45 +1,35 @@
 import { useState, useEffect, useCallback } from 'react'
+import { useSubscription } from '@apollo/client'
 
-import { ENDPOINTS_QUERY } from '../../gql'
+import { PRODUCERS_QUERY, ENDPOINTS_SUBSCRIPTION } from '../../gql'
 
 import useSearchState from './useSearchState'
 
-const useEndpointsState = ({ useCache }) => {
+const useEndpointsState = () => {
   const [
-    { pagination, loading, producers, filters },
+    { filters, pagination, variables },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({
-    query: ENDPOINTS_QUERY,
-    pollInterval: useCache ? 0 : 120000,
-    fetchPolicy: useCache ? 'cache-first' : 'cache-and-network',
+    query: PRODUCERS_QUERY,
+    where: {nodes: { endpoints: { value: { _gt: '' } } }},
+    limit: 20
   })
+  const { data, loading } = useSubscription(ENDPOINTS_SUBSCRIPTION, { variables })
   const [updatedAt, setUpdatedAt] = useState()
   const [items, setItems] = useState()
 
   useEffect(() => {
-    setPagination(prev => ({
-      ...prev,
-      limit: 20,
-      where: { ...prev.where, nodes: { endpoints: { value: { _gt: '' } } } },
-    }))
-  }, [setPagination])
-
-  useEffect(() => {
-    if (!producers) return
+    if(!data) return
 
     setItems(
-      producers.map(producer => {
+      data.producers.map((producer) => {
         const endpoints = { api: [], ssl: [], p2p: [] }
         const inserted = []
 
-        producer.nodes.forEach(node => {
-          if (node.endpoints?.length) {
-            node.endpoints.forEach(({ type, ...endpoint }) => {
-              if (!inserted.includes(endpoint.value)) {
-                inserted.push(endpoint.value)
-                endpoints[type].push(endpoint)
-              }
-            })
+        producer.endpoints_list.forEach(({ type, ...endpoint }) => {
+          if (!inserted.includes(endpoint.value)) {
+            inserted.push(endpoint.value)
+            endpoints[type].push(endpoint)
           }
         })
 
@@ -53,10 +43,10 @@ const useEndpointsState = ({ useCache }) => {
       }),
     )
 
-    if (!producers?.[0]?.updated_at) return
+    if (!data.producers?.[0]?.updated_at) return
 
-    setUpdatedAt(producers[0].updated_at)
-  }, [producers])
+    setUpdatedAt(data.producers[0].updated_at)
+  },[data])
 
   const handleFilter = useCallback(value => {
     const filter = value
@@ -74,7 +64,7 @@ const useEndpointsState = ({ useCache }) => {
   }, [setPagination])
 
   return [
-    { loading, pagination, producers: items, updatedAt, filters },
+    { loading: loading, pagination, producers: items, updatedAt, filters },
     { handleFilter, handleOnPageChange, handleOnSearch, setPagination },
   ]
 }