Handle peer deletion better and UI fixes

Author: jubeless

frontend/src/components/search-peer-item.tsx

@@ -2,26 +2,27 @@ import React from "react";
 import { Tag, Slider } from "antd";
 import { Peer } from "../types";
 import { BlockNum } from "../atoms/block-num";
-import { formatNumberWithCommas, formatTime } from "../utils/format";
+import { formatNumberWithCommas } from "../utils/format";
 import Moment from "react-moment";
 import "moment-timezone";
 
 export function SearchPeerItem(props: {
   peer: Peer;
   headBlockNum: number;
   visualize: boolean;
+  showKey: boolean;
 }): React.ReactElement {
   const { peer, headBlockNum } = props;
 
   let adjustedLowBlockNum = peer.tailBlockNum;
   if (!peer.tailBlockNum) {
     adjustedLowBlockNum = 0;
   }
-  const highBlockRatio = (peer.headBlockNum / headBlockNum) * 100;
+
   return (
     <>
-      <tr>
-        <td>{peer.host}</td>
+      <tr className={peer.deleted ? "peer-deleted" : ""}>
+        <td>{props.showKey ? peer.key : peer.host}</td>
         <td>
           <Tag>{peer.tier}</Tag>
         </td>
@@ -40,8 +41,13 @@ export function SearchPeerItem(props: {
               {formatNumberWithCommas(peer.shardSize)}
             </td>
             <td style={{ textAlign: "center" }}>
-              {peer.ready && <Tag color="#87d068">ready</Tag>}
-              {!peer.ready && <Tag color="#f50">not ready</Tag>}
+              {peer.ready && <Tag color="green">ready</Tag>}
+              {!peer.ready && peer.deleted && (
+                <Tag color="volcano">deleted</Tag>
+              )}
+              {!peer.ready && !peer.deleted && (
+                <Tag color="magenta">not ready</Tag>
+              )}
             </td>
             <td style={{ textAlign: "center" }}>
               <Moment format="YYYY-MM-DD HH:mm Z">{peer.boot}</Moment>

frontend/src/components/search-peer-list.tsx

@@ -1,42 +1,40 @@
 import React, { useState } from "react";
-import { Icon, Tag, Slider } from "antd";
+import { Icon, Button } from "antd";
 import { Peer } from "../types";
 import { SearchPeerItem } from "./search-peer-item";
 
 export function SearchPeerList(props: {
   peers: Peer[];
+  visualize: boolean;
   headBlockNum: number;
 }): React.ReactElement {
-  const [visualize, setVisualize] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+
   const peerItem = props.peers
     .sort((a: Peer, b: Peer) => {
       return a.tier < b.tier ? -1 : 1;
     })
     .map((peer: Peer) => (
       <SearchPeerItem
+        key={`${peer.host}-${peer.key}`}
         peer={peer}
         headBlockNum={props.headBlockNum}
-        visualize={visualize}
+        visualize={props.visualize}
+        showKey={showKey}
       />
     ));
 
   return (
     <div>
       <div className="ant-table-body">
-        <button
-          style={{ float: "right" }}
-          onClick={() => {
-            setVisualize(!visualize);
-          }}
-        >
-          <Icon type="radar-chart" />
-        </button>
         <table style={{ width: "100%" }}>
           <thead className="ant-table-thead">
             <tr>
-              <th>Host</th>
+              <th>
+                <Icon type="key" onClick={() => setShowKey(!showKey)} /> Host
+              </th>
               <th>Tier</th>
-              {!visualize && (
+              {!props.visualize && (
                 <>
                   <th style={{ textAlign: "right" }}>Tail Block</th>
                   <th style={{ textAlign: "right" }}>IRR Block</th>
@@ -46,12 +44,11 @@ export function SearchPeerList(props: {
                   <th style={{ textAlign: "center" }}>Boot Time</th>
                 </>
               )}
-              {visualize && (
-                <>
-                  <th style={{ width: "100%" }}></th>
-                </>
-              )}
-              <th style={{ textAlign: "center" }}>Features</th>
+              {props.visualize && <th style={{ width: "100%" }}></th>}
+              <>
+                <th style={{ textAlign: "center" }}>Features</th>
+                <th></th>
+              </>
             </tr>
           </thead>
           <tbody className="ant-table-tbody">{peerItem}</tbody>

frontend/src/index.scss

@@ -18,7 +18,7 @@ code {
     margin-right: 10px;
   }
   span.black-range-num {
-    padding-right: 10px
+    padding-right: 10px;
   }
 }
 button.btn {
@@ -27,8 +27,14 @@ button.btn {
   span.svg {
     line-height: 1;
     svg {
-      height:22px;
+      height: 22px;
     }
   }
+}
 
-}
+.peer-deleted {
+  td {
+    //background-color: #e8e8e8;
+    text-decoration: line-through;
+  }
+}

frontend/src/index.tsx

@@ -1,9 +1,9 @@
-import React from "react"
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import 'antd/dist/antd.css';
-import './index.scss';
+import "antd/dist/antd.css";
+import "./index.scss";
 
-import App from './App';
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));

frontend/src/pages/dmesh.tsx

@@ -1,47 +1,60 @@
 import React, { useEffect, useState } from "react";
 import { withRouter, RouteComponentProps } from "react-router";
-import { Row, Col, Typography, PageHeader, Descriptions } from "antd";
+import {
+  Row,
+  Col,
+  Typography,
+  PageHeader,
+  Descriptions,
+  Tag,
+  Icon,
+  Button
+} from "antd";
 import { Peer } from "../types";
 import { ApiService } from "../utils/api";
 import { useAppConfig } from "../hooks/dignose";
 import { SearchPeerList } from "../components/search-peer-list";
 import { MainLayout } from "../components/main-layout";
-import { Btn } from "../atoms/buttons";
 
 const { Text } = Typography;
 
 function BaseDmeshPage(props: RouteComponentProps): React.ReactElement {
-  const [track, setTrack] = useState(false);
+  const [visualize, setVisualize] = useState(false);
+  const [connected, setConnected] = useState(false);
   const [peers, setPeers] = useState<Peer[]>([]);
   const [headBlockNum, setHeadBlockNum] = useState(0);
 
   const appConfig = useAppConfig();
 
-  const peerIndex = (peerHost: string): number => {
-    return peers.findIndex(peer => peer.host === peerHost);
-  };
-
   const deletePeer = (peer: Peer) => {
-    const index = peerIndex(peer.host);
-    if (index >= 0) {
-      setPeers(currentPeers => {
-        return [...currentPeers.slice(index, 1)];
+    setPeers(currentPeers => {
+      const newCurrentPeers = currentPeers.map(peerItem => {
+        if (peerItem.key === peer.key) {
+          return { ...peerItem, deleted: true, ready: false };
+        }
+        return peerItem;
       });
-    }
+      return newCurrentPeers;
+    });
   };
 
   const updatePeer = (peer: Peer) => {
     if (peer.headBlockNum > headBlockNum) {
       setHeadBlockNum(peer.headBlockNum);
     }
     setPeers(currentPeers => {
-      const newCUrrentPeers = currentPeers.map(peerItem => {
-        if (peerItem.host === peer.host) {
+      let foundPeer = false;
+      let newCurrentPeers = currentPeers.map(peerItem => {
+        if (peerItem.key === peer.key) {
+          foundPeer = true;
           return peer;
         }
         return peerItem;
       });
-      return newCUrrentPeers;
+      if (!foundPeer) {
+        newCurrentPeers = [...newCurrentPeers, peer];
+      }
+      return newCurrentPeers;
     });
   };
 
@@ -55,63 +68,79 @@ function BaseDmeshPage(props: RouteComponentProps): React.ReactElement {
   };
 
   useEffect(() => {
-    let stream: WebSocket;
-    if (track) {
-      setPeers([]);
-      stream = ApiService.stream({
-        route: "search_peers",
-        onComplete: () => {
-          setTrack(false);
-        },
-        onData: resp => {
-          switch (resp.type) {
-            case "Transaction":
-              break;
-            case "BlockRange":
-              break;
-            case "Message":
-              break;
-            case "PeerEvent":
-              if (resp.payload.EventName === "sync") {
-                addPeer(resp.payload.Peer);
-              } else if (resp.payload.EventName === "update") {
-                updatePeer(resp.payload.Peer);
-              } else if (resp.payload.EventName === "delete") {
-                deletePeer(resp.payload.Peer);
-              }
-              break;
-          }
+    setPeers([]);
+    setConnected(true);
+    const stream = ApiService.stream({
+      route: "search_peers",
+      onError: () => {
+        setConnected(false);
+      },
+      onComplete: () => {
+        setConnected(false);
+      },
+      onData: resp => {
+        let localPeer;
+        switch (resp.type) {
+          case "Transaction":
+            break;
+          case "BlockRange":
+            break;
+          case "Message":
+            break;
+          case "PeerEvent":
+            localPeer = resp.payload.Peer;
+            localPeer.key = resp.payload.PeerKey;
+            if (resp.payload.EventName === "sync") {
+              console.log(
+                `[SYNC] for peer ${resp.payload.PeerKey} - ${resp.payload.Peer.host}`
+              );
+              addPeer(localPeer);
+            } else if (resp.payload.EventName === "update") {
+              updatePeer(localPeer);
+            } else if (resp.payload.EventName === "delete") {
+              console.log(
+                `[DELETED] for peer ${resp.payload.PeerKey} - ${resp.payload.Peer.host}`
+              );
+              deletePeer(localPeer);
+            }
+            break;
         }
-      });
-    }
-
+      }
+    });
     return () => {
       if (stream) {
-        console.log("closing stream");
         stream.close();
       }
     };
-  }, [track]);
+  }, []);
 
   return (
     <MainLayout config={appConfig} {...props}>
       <PageHeader
         title="Dmesh Peers"
+        tags={
+          connected ? (
+            <Tag color="geekblue">
+              <Icon type="sync" spin /> connected
+            </Tag>
+          ) : (
+            <Tag color="red">
+              <Icon type="disconnect" /> disconnected
+            </Tag>
+          )
+        }
         extra={[
-          <Btn
-            key={1}
-            stopText="Stop Tracking Dmesh"
-            startText="Track Dmesh"
-            loading={track}
-            onStart={e => {
-              e.preventDefault();
-              setTrack(true);
-            }}
-            onStop={e => {
+          <Button
+            key="1"
+            onClick={e => {
               e.preventDefault();
-              setTrack(false);
+              setVisualize(!visualize);
             }}
-          />
+            size="small"
+            type="ghost"
+          >
+            <Icon type="sliders" />
+          </Button>
         ]}
       >
         <Descriptions size="small" column={3}>
@@ -127,7 +156,11 @@ function BaseDmeshPage(props: RouteComponentProps): React.ReactElement {
       <Row>
         <Col>
           <div style={{ marginTop: "10px" }}>
-            <SearchPeerList peers={peers} headBlockNum={headBlockNum} />
+            <SearchPeerList
+              peers={peers}
+              headBlockNum={headBlockNum}
+              visualize={visualize}
+            />
           </div>
         </Col>
       </Row>

frontend/src/types.ts

@@ -52,6 +52,7 @@ export interface PeerEventSocketMessage {
   type: "PeerEvent";
   payload: {
     EventName: string;
+    PeerKey: string;
     Peer: Peer;
   };
 }
@@ -71,6 +72,7 @@ export interface Peer {
   tailMoves: boolean;
   tier: number;
   deleted: boolean;
+  key: string;
 }
 
 export type SocketMessage =