Merge pull request #1093 from edenia/feat/apply-nodes-design-1085

Feat/apply nodes design 1085
edenia · Dec 9, 2022 · 7d46aca · 7d46aca
2 parents 1dfee43 + 649b0b7
commit 7d46aca
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 56 deletions.
diff --git a/hapi/src/services/node.service.js b/hapi/src/services/node.service.js
@@ -109,6 +109,10 @@ const getFormatNode = node => {
     }
   }
 
+  if (typeof node?.features === 'string') {
+    node.features = [node.features]
+  }
+
   if (node.features?.length || !!node.keys) {
     formatNode.node_info = {
       data: {

diff --git a/webapp/src/components/ChipList/index.js b/webapp/src/components/ChipList/index.js
@@ -14,7 +14,7 @@ const ChipList = ({ list = [], title = '' }) => {
 
   return (
     <>
-      <div className={classes.bold}>{title}</div>
+      {title && <span className={classes.bold}>{title}</span>}
       <div
         className={`${classes.chipsContainer} ${
           list.length > 10 ? classes.longList : classes.shortList

diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -160,7 +160,7 @@ const InformationCard = ({ producer, rank, type }) => {
           className={classes.collapse}
         >
           {type === 'node' ? (
-            <div className={classes.nodeCardsContainer}>
+            <div className={classes.nodesContainer}>
               <NodesCard nodes={producerOrg.nodes} />{' '}
             </div>
           ) : (

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -43,16 +43,9 @@ export default (theme) => ({
       },
     },
   },
-  nodeCardsContainer: {
-    [theme.breakpoints.up('lg')]: {
-      width: '84%',
-    },
-    [theme.breakpoints.down('lg')]: {
-      width: '100%',
-    },
+  nodesContainer: {
+    width: '100%',
     overflowX: 'auto',
-    border: '3px #f3f3f3',
-    borderLeftStyle: 'solid',
   },
   hideScroll: {
     overflowX: 'hidden',

diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
@@ -4,10 +4,8 @@ import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
 import { useSubscription } from '@apollo/client'
-import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
-import CardActions from '@mui/material/CardActions'
 import 'flag-icon-css/css/flag-icons.css'
 
 import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql'
@@ -100,7 +98,7 @@ const NodesCard = ({ nodes }) => {
   }
 
   const Keys = ({ node }) => {
-    if (!node.node_info?.length || !node.node_info[0]?.features?.keys)
+    if (!node?.node_info?.length || !node?.node_info[0]?.features?.keys)
       return <></>
 
     const keys = node.node_info[0].features.keys
@@ -126,7 +124,7 @@ const NodesCard = ({ nodes }) => {
         <Endpoints node={node} />
         <ChipList
           title={t('features')}
-          list={node.node_info[0]?.features?.list}
+          list={node?.node_info[0]?.features?.list}
         />
         {node.type.includes('query') && <SupportedAPIs node={node} />}
         <Keys node={node} />
@@ -136,11 +134,9 @@ const NodesCard = ({ nodes }) => {
   }
 
   const capitalizeText = (text) => {
-    if(!text) return 
+    if (!text) return
 
-    return (
-      text.substring(0, 1).toUpperCase() + text.substring(1, text.length)
-    )
+    return text.substring(0, 1).toUpperCase() + text.substring(1, text.length)
   }
 
   const getType = (node) => {
@@ -155,30 +151,47 @@ const NodesCard = ({ nodes }) => {
     return type
   }
 
+  const Location = ({ location }) => {
+    return (
+      <>
+        <span className={classes.country}>{location?.name || 'N/A'}</span>
+        <CountryFlag code={location?.country} />
+      </>
+    )
+  }
+
+  const showLocations = (node) => {
+    if (node?.locations?.length) {
+      return (
+        <>
+          {node.locations.map((location, index) => (
+            <div
+              key={`location-${location?.name}-${node?.type?.join()}-${index}`}
+            >
+              <Location location={location} />
+            </div>
+          ))}
+        </>
+      )
+    }
+
+    return <Location location={node.location} />
+  }
+
   return (
     <div className={classes.nodesWrapper}>
-      <div className={classes.nodesContainer}>
-        {(nodes || []).map((node, index) => (
-          <Card key={`node-${index}`} className={classes.nodes} elevation={0}>
-            <CardHeader
-              className={classes.cardHeader}
-              title={getType(node) || ''}
-              subheader={
-                <>
-                  <span className={classes.country}>
-                    {node.location?.name || 'N/A'}
-                  </span>
-                  <CountryFlag code={node.location?.country} />
-                </>
-              }
-            />
-            <CardContent className={classes.content}>
-              <NodeInfo node={node} />
-            </CardContent>
-            <CardActions disableSpacing />
-          </Card>
-        ))}
-      </div>
+      {(nodes || []).map((node, index) => (
+        <div key={`node-${index}`} className={classes.nodes}>
+          <CardHeader
+            className={classes.cardHeader}
+            title={getType(node) || ''}
+            subheader={showLocations(node)}
+          />
+          <CardContent className={classes.content}>
+            <NodeInfo node={node} />
+          </CardContent>
+        </div>
+      ))}
     </div>
   )
 }

diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
@@ -30,21 +30,21 @@ export default (theme) => ({
     wordBreak: 'break-word',
   },
   nodes: {
-    minWidth: '100px',
+    width: '280px',
     padding: theme.spacing(3),
     overflowX: 'auto',
     marginLeft: '5px',
     marginRight: '5px',
-    boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
-  },
-  nodesContainer: {
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    padding: theme.spacing(2),
+    borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
   },
   nodesWrapper: {
     display: 'flex',
     width: 'max-content',
+    flexFlow: 'row nowrap',
+    padding: theme.spacing(2),
+    [theme.breakpoints.up('lg')]: {
+      paddingRight: '250px',
+    },
   },
   endpointsTitle: {
     display: 'flex',

diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -37,7 +37,6 @@ export const NODES_QUERY = gql`
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
-    $nodeFilter: node_bool_exp
   ) {
     info: producer_aggregate(where: $where) {
       producers: aggregate {
@@ -57,7 +56,8 @@ export const NODES_QUERY = gql`
       total_votes_percent
       rank
       updated_at
-      nodes(where: $nodeFilter) {
+      producer_key
+      nodes {
         info: endpoints_aggregate(
           where: { response: { _contains: { status: 200 } } }
         ) {

diff --git a/webapp/src/hooks/customHooks/useNodeState.js b/webapp/src/hooks/customHooks/useNodeState.js
@@ -16,6 +16,7 @@ const useNodeState = () => {
 
   const getOrderNode = (node) => {
     return (
+      (node.type?.includes('full') ? 0.5 : 0) +
       (node.endpoints?.length || 0) +
       (node.node_info[0]?.features?.list?.length || 0)
     )
@@ -36,7 +37,6 @@ const useNodeState = () => {
         ...prev.where,
         nodes: nodesFilter,
       },
-      nodeFilter: nodesFilter,
     }))
   }, [filters.name, setPagination])
 
@@ -47,13 +47,41 @@ const useNodeState = () => {
       if (!producer?.nodes?.length) return []
 
       producer.nodes.sort((a, b) => {
-        return getOrderNode(a) < getOrderNode(b)
+        return getOrderNode(a) - getOrderNode(b)
       })
 
-      return producer.nodes.length
+      let nodes = []
+      let producerNode
+
+      for (const node in producer.nodes) {
+        const current = producer.nodes[node]
+
+        if (current?.type[0] === 'producer') {
+          if (!producerNode) {
+            const features = { keys: { producer_key: producer.producer_key } }
+
+            producerNode = {
+              ...current,
+              locations: [],
+              node_info: [{ features }],
+            }
+          }
+
+          producerNode.locations.push(current.location)
+        } else {
+          nodes = JSON.parse(JSON.stringify(producer.nodes.slice(node)))
+          nodes.reverse()
+
+          if (producerNode) nodes.push(producerNode)
+
+          break
+        }
+      }
+
+      return nodes.length
         ? {
             ...producer,
-            bp_json: { ...producer.bp_json, nodes: producer.nodes },
+            bp_json: { ...producer.bp_json, nodes },
           }
         : []
     })

diff --git a/webapp/src/hooks/customHooks/useSearchState.js b/webapp/src/hooks/customHooks/useSearchState.js
@@ -42,7 +42,6 @@ const useSearchState = ({ query, ...options }) => {
         where: pagination.where,
         offset: (pagination.page - 1) * pagination.limit,
         limit: pagination.limit,
-        nodeFilter: pagination.nodeFilter,
         endpointFilter: pagination.endpointFilter,
       },
     })
@@ -52,7 +51,6 @@ const useSearchState = ({ query, ...options }) => {
     pagination.page,
     pagination.limit,
     pagination.offset,
-    pagination.nodeFilter,
     pagination.endpointFilter
   ])