Slow Validators UI

src/components/Validators/Content.tsx

@@ -3,6 +3,7 @@ import { Button } from "react-bootstrap";
 import Stats from "./MinMax";
 import Validator from "./Validator";
 import Waiting from "./Waiting";
+import SlowValidators from "./SlowValidators";
 import { Spinner } from "..";
 import { sortValidators } from "./util";
 
@@ -110,6 +111,8 @@ const Content = (props: IState) => {
           proposals={proposals}
           members={members}
         />
+
+        <SlowValidators blocktime={10000} days={7}/>
       </div>
     </>
   );

src/components/Validators/SlowValidators.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Table} from "react-bootstrap";
+import axios from "axios";
+
+import { alternativeBackendApis } from "../../config"
+
+import { SlowValidator } from "../../types";
+
+interface IProps {
+  blocktime: number;
+  days: number;
+}
+
+interface IState {
+    slowValidators: SlowValidator[]
+}
+
+class SlowValidators extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      slowValidators: [] as SlowValidator[]
+    };
+  }
+
+  componentDidMount() {
+      const backend = `${alternativeBackendApis}/slow-validators?blocktime=${this.props.blocktime}&days=${this.props.days}`;
+      axios.get(backend).then((response) => {this.setState({slowValidators: response.data})});
+  }
+
+  
+  render() {
+    const { slowValidators } = this.state;
+
+    return (
+      <div className="box">
+        <h3>Slow Validators</h3>
+        <>
+        { (!slowValidators || slowValidators.length === 0) ? <h4>No records found</h4> :
+          <Table striped bordered hover size="sm" variant="dark">
+          <thead>
+            <tr>
+              <th>Validator</th>
+              <th>Slow Blocks Produced</th>
+            </tr>
+          </thead>
+          <tbody>
+            {slowValidators.map(brn => (
+              <tr key={brn.slowValidator}>
+                <td>{brn.slowValidator}</td>
+                <td>{brn.numBlocks}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+        } </>
+      </div>
+    );
+  }
+}
+
+export default SlowValidators;

src/types.ts

@@ -332,6 +332,11 @@ export interface Burner {
   totalburned: number;
 }
 
+export interface SlowValidator {
+  slowValidator: string;
+  numBlocks: number;
+}
+
 export interface ValidatorApiResponse {
   pageSize: number;
   totalCount: number;