Restructure the js app (#243)

* prettier * linter * add prettier, and format the code * remove common, merge it with frontend * refactor the app * better lint and code fix * travis for the frontend app * travis build script Signed-off-by: Daniel Maricic <daniel@woss.io> * lint and build * update the README.md Signed-off-by: Daniel Maricic <daniel@woss.io> * change the commands to reflect refactor Signed-off-by: Daniel Maricic <daniel@woss.io> * prettier and tslint are friends Signed-off-by: Daniel Maricic <daniel@woss.io> * code that wasn't linted properly before Signed-off-by: Daniel Maricic <daniel@woss.io> * prettier rc got deleted * workgin on making the travis pass Signed-off-by: Daniel Maricic <daniel@woss.io> * travis build please? Signed-off-by: Daniel Maricic <daniel@woss.io> * update readme.md Signed-off-by: Daniel Maricic <daniel@woss.io> * dockerfile deleted from fronted - out of scope Signed-off-by: Daniel Maricic <daniel@woss.io> * remove Signed-off-by: Daniel Maricic <daniel@woss.io> * tsconfig Signed-off-by: Daniel Maricic <daniel@woss.io> * found the reason why EOL wasn't happening Signed-off-by: Daniel Maricic <daniel@woss.io> * type for the event in the ConnectionInput as suggested * strictnullCheck to true * noImplicitAny * noUnusedParams * AfgHandling * update * fix Location.tsx * Few minor fixes * remove connection input and revert to original * esnext fixes the imports for icons and non default `* as ` * update to the tsconfig.test.json don't use commonjs please * fixed wrong comment for TIMEOUT_BASE * return totem.svg and type decraration of maybe Signed-off-by: Daniel Maricic <daniel@woss.io> Co-authored-by: Will <w.kopp@kigroup.de>
2026-06-12 16:51:02 +00:00 · 2020-04-06 15:38:45 +02:00
parent 20a0283380
commit bb8e804567
322 changed files with 10896 additions and 10602 deletions
@@ -0,0 +1,126 @@
+.Location {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+  border: 2px solid #666;
+  border-radius: 6px;
+  margin-left: -4px;
+  margin-top: -4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  cursor: pointer;
+  z-index: 2;
+  transition: border-color 0.25s linear;
+}
+
+.Location-dimmed {
+  width: 2px;
+  height: 2px;
+  margin-left: -1px;
+  margin-top: -1px;
+  z-index: 1;
+  background: #bbb;
+  border: none;
+}
+
+.Location-ping {
+  pointer-events: none;
+  position: absolute;
+  display: none;
+}
+
+.Location-odd {
+  border-color: #bbb;
+}
+
+.Location-synced {
+  z-index: 3;
+  border-color: #e6007a;
+}
+
+.Location-synced .Location-ping {
+  border: 1px solid #fff;
+  border-radius: 30px;
+  display: block;
+  animation: ping 1s forwards;
+}
+
+.Location:hover {
+  z-index: 4;
+  border-color: #fff;
+}
+
+.Location-details {
+  min-width: 335px;
+  position: absolute;
+  font-family: monospace, sans-serif;
+  background: #222;
+  color: #fff;
+  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
+  border-collapse: collapse;
+}
+
+.Location-quarter0 .Location-details {
+  left: 16px;
+  top: -4px;
+}
+
+.Location-quarter1 .Location-details {
+  right: 16px;
+  top: -4px;
+}
+
+.Location-quarter2 .Location-details {
+  left: 16px;
+  bottom: -4px;
+}
+
+.Location-quarter3 .Location-details {
+  right: 16px;
+  bottom: -4px;
+}
+
+.Location-details td {
+  text-align: left;
+  padding: 0.5em 1em;
+}
+
+.Location-details td:nth-child(odd) {
+  width: 16px;
+  text-align: center;
+  padding-right: 0.2em;
+}
+
+.Location-details td:nth-child(even) {
+  padding-left: 0.2em;
+}
+
+@keyframes ping {
+  from {
+    left: -1px;
+    top: -1px;
+    width: 6px;
+    height: 6px;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 1);
+  }
+
+  to {
+    left: -18px;
+    top: -18px;
+    width: 40px;
+    height: 40px;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0);
+  }
+}
+
+.Location-validator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  transform: scale(1.5);
+  transform-origin: right 50%;
+  margin-left: 16px;
+}
@@ -0,0 +1,180 @@
+import * as React from 'react';
+import {
+  formatNumber,
+  trimHash,
+  milliOrSecond,
+  secondsWithPrecision,
+} from '../../utils';
+import { Ago, Icon, PolkadotIcon } from '../';
+import { Node } from '../../state';
+
+import nodeIcon from '../../icons/server.svg';
+import nodeValidatorIcon from '../../icons/shield.svg';
+import nodeTypeIcon from '../../icons/terminal.svg';
+import nodeLocationIcon from '../../icons/location.svg';
+import blockIcon from '../../icons/package.svg';
+import blockHashIcon from '../../icons/file-binary.svg';
+import blockTimeIcon from '../../icons/history.svg';
+import propagationTimeIcon from '../../icons/dashboard.svg';
+import lastTimeIcon from '../../icons/watch.svg';
+
+import './Location.css';
+
+export namespace Location {
+  export type Quarter = 0 | 1 | 2 | 3;
+
+  export interface Props {
+    node: Node;
+    position: Position;
+    focused: boolean;
+  }
+
+  export interface Position {
+    left: number;
+    top: number;
+    quarter: Quarter;
+  }
+
+  export interface State {
+    hover: boolean;
+  }
+}
+
+export class Location extends React.Component<Location.Props, Location.State> {
+  public readonly state = { hover: false };
+
+  public render() {
+    const { node, position, focused } = this.props;
+    const { left, top, quarter } = position;
+    const { height, propagationTime, city } = node;
+
+    if (!city) {
+      return null;
+    }
+
+    let className = `Location Location-quarter${quarter}`;
+
+    if (focused) {
+      if (propagationTime != null) {
+        className += ' Location-synced';
+      } else if (height % 2 === 1) {
+        className += ' Location-odd';
+      }
+    } else {
+      className += ' Location-dimmed';
+    }
+
+    return (
+      <div
+        className={className}
+        style={{ left, top }}
+        onMouseOver={this.onMouseOver}
+        onMouseOut={this.onMouseOut}
+      >
+        {this.state.hover ? this.renderDetails() : null}
+        <div className="Location-ping" />
+      </div>
+    );
+  }
+
+  private renderDetails() {
+    const {
+      name,
+      implementation,
+      version,
+      validator,
+      height,
+      hash,
+      blockTime,
+      blockTimestamp,
+      propagationTime,
+      city,
+    } = this.props.node;
+
+    let validatorRow = <div />;
+
+    if (validator) {
+      validatorRow = (
+        <tr>
+          <td>
+            <Icon src={nodeValidatorIcon} alt="Node" />
+          </td>
+          <td colSpan={5}>
+            {trimHash(validator, 30)}
+            <span className="Location-validator">
+              <PolkadotIcon account={validator} size={16} />
+            </span>
+          </td>
+        </tr>
+      );
+    }
+
+    return (
+      <table className="Location-details Location-details">
+        <tbody>
+          <tr>
+            <td>
+              <Icon src={nodeIcon} alt="Node" />
+            </td>
+            <td colSpan={5}>{name}</td>
+          </tr>
+          {validatorRow}
+          <tr>
+            <td>
+              <Icon src={nodeTypeIcon} alt="Implementation" />
+            </td>
+            <td colSpan={5}>
+              {implementation} v{version}
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <Icon src={nodeLocationIcon} alt="Location" />
+            </td>
+            <td colSpan={5}>{city}</td>
+          </tr>
+          <tr>
+            <td>
+              <Icon src={blockIcon} alt="Block" />
+            </td>
+            <td colSpan={5}>#{formatNumber(height)}</td>
+          </tr>
+          <tr>
+            <td>
+              <Icon src={blockHashIcon} alt="Block Hash" />
+            </td>
+            <td colSpan={5}>{trimHash(hash, 20)}</td>
+          </tr>
+          <tr>
+            <td>
+              <Icon src={blockTimeIcon} alt="Block Time" />
+            </td>
+            <td style={{ width: 80 }}>
+              {secondsWithPrecision(blockTime / 1000)}
+            </td>
+            <td>
+              <Icon src={propagationTimeIcon} alt="Block Propagation Time" />
+            </td>
+            <td style={{ width: 58 }}>
+              {propagationTime == null ? '∞' : milliOrSecond(propagationTime)}
+            </td>
+            <td>
+              <Icon src={lastTimeIcon} alt="Last Block Time" />
+            </td>
+            <td style={{ minWidth: 82 }}>
+              <Ago when={blockTimestamp} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+
+  private onMouseOver = () => {
+    this.setState({ hover: true });
+  };
+
+  private onMouseOut = () => {
+    this.setState({ hover: false });
+  };
+}
@@ -0,0 +1,11 @@
+.Map {
+  min-width: 1350px;
+  background: url('../../assets/world-map.svg') no-repeat;
+  background-size: contain;
+  background-position: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Types, Maybe } from '../../common';
+import { Filter } from '../';
+import { State as AppState, Node } from '../../state';
+import { Location } from './';
+import { viewport } from '../../utils';
+
+const MAP_RATIO = 800 / 350;
+const MAP_HEIGHT_ADJUST = 400 / 350;
+const HEADER = 148;
+
+import './Map.css';
+
+export namespace Map {
+  export interface Props {
+    appState: Readonly<AppState>;
+  }
+
+  export interface State {
+    filter: Maybe<(node: Node) => boolean>;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+  }
+}
+
+export class Map extends React.Component<Map.Props, Map.State> {
+  public state: Map.State = {
+    filter: null,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+  };
+
+  public componentWillMount() {
+    this.onResize();
+
+    window.addEventListener('resize', this.onResize);
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
+  public render() {
+    const { appState } = this.props;
+    const { filter } = this.state;
+    const nodes = appState.nodes.sorted();
+
+    return (
+      <React.Fragment>
+        <div className="Map">
+          {nodes.map((node) => {
+            const { lat, lon } = node;
+
+            const focused = filter == null || filter(node);
+
+            if (lat == null || lon == null) {
+              // Skip nodes with unknown location
+              return null;
+            }
+
+            const position = this.pixelPosition(lat, lon);
+
+            return (
+              <Location
+                key={node.id}
+                position={position}
+                focused={focused}
+                node={node}
+              />
+            );
+          })}
+        </div>
+        <Filter onChange={this.onFilterChange} />
+      </React.Fragment>
+    );
+  }
+
+  private pixelPosition(
+    lat: Types.Latitude,
+    lon: Types.Longitude
+  ): Location.Position {
+    const { state } = this;
+
+    // Longitude ranges -180 (west) to +180 (east)
+    // Latitude ranges +90 (north) to -90 (south)
+    const left = Math.round(((180 + lon) / 360) * state.width + state.left);
+    const top = Math.round(
+      ((90 - lat) / 180) * state.height * MAP_HEIGHT_ADJUST + state.top
+    );
+
+    let quarter: Location.Quarter = 0;
+
+    if (lon > 0) {
+      quarter = (quarter | 1) as Location.Quarter;
+    }
+
+    if (lat < 0) {
+      quarter = (quarter | 2) as Location.Quarter;
+    }
+
+    return { left, top, quarter };
+  }
+
+  private onResize: () => void = () => {
+    const vp = viewport();
+
+    vp.width = Math.max(1350, vp.width);
+    vp.height -= HEADER;
+
+    const ratio = vp.width / vp.height;
+
+    let top = 0;
+    let left = 0;
+    let width = 0;
+    let height = 0;
+
+    if (ratio >= MAP_RATIO) {
+      width = Math.round(vp.height * MAP_RATIO);
+      height = Math.round(vp.height);
+      left = (vp.width - width) / 2;
+    } else {
+      width = Math.round(vp.width);
+      height = Math.round(vp.width / MAP_RATIO);
+      top = (vp.height - height) / 2;
+    }
+
+    this.setState({ top, left, width, height });
+  };
+
+  private onFilterChange = (filter: Maybe<(node: Node) => boolean>) => {
+    this.setState({ filter });
+  };
+}
@@ -0,0 +1,2 @@
+export * from './Map';
+export * from './Location';