|
@@ -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;
|