Prepare for HTTPS

packages/frontend/src/Connection.ts

@@ -11,7 +11,9 @@ export class Connection {
     return new Connection(await Connection.socket(), update);
   }
 
-  private static readonly address = `ws://${window.location.hostname}:8080`;
+  private static readonly address = window.location.protocol === 'https:'
+                                      ? `wss://${window.location.hostname}/feed/`
+                                      : `ws://${window.location.hostname}:8080`;
 
   private static async socket(): Promise<WebSocket> {
     let socket = await Connection.trySocket();

packages/frontend/src/components/Chain.css

@@ -65,6 +65,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
+  cursor: pointer;
 }
 
 .Chain-node-list {

packages/frontend/src/components/Chain.tsx

@@ -163,7 +163,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
         </thead>
         <tbody>
         {
-          this.nodes().sort(sortNodes).map((node) => <Node key={node.id} {...node} />)
+          this.nodes().sort(sortNodes).map((node) => <Node.Row key={node.id} {...node} />)
         }
         </tbody>
       </table>
@@ -174,7 +174,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     return Array.from(this.props.appState.nodes.values());
   }
 
-  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): { left: number, top: number } {
+  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.PixelPosition {
     const { map } = this.state;
 
     const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35;

packages/frontend/src/components/Node.tsx

@@ -5,30 +5,48 @@ import { Types, Maybe } from '@dotstats/common';
 
 export namespace Node {
   export interface Props {
-    id: Types.NodeId,
-    nodeDetails: Types.NodeDetails,
-    nodeStats: Types.NodeStats,
-    blockDetails: Types.BlockDetails,
-    location: Maybe<Types.NodeLocation>,
+    id: Types.NodeId;
+    nodeDetails: Types.NodeDetails;
+    nodeStats: Types.NodeStats;
+    blockDetails: Types.BlockDetails;
+    location: Maybe<Types.NodeLocation>;
+  }
+
+  export interface PixelPosition {
+    left: number;
+    top: number;
+  }
+
+  export function Row(props: Props) {
+    const [name, implementation, version] = props.nodeDetails;
+    const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
+    const [peers, txcount] = props.nodeStats;
+
+    return (
+      <tr>
+        <td>{name}</td>
+        <td style={{ width: 240 }}>{implementation} v{version}</td>
+        <td style={{ width: 26 }}>{peers}</td>
+        <td style={{ width: 26 }}>{txcount}</td>
+        <td style={{ width: 88 }}>#{formatNumber(height)}</td>
+        <td style={{ width: 154 }}><span title={hash}>{trimHash(hash, 16)}</span></td>
+        <td style={{ width: 80 }}>{secondsWithPrecision(blockTime/1000)}</td>
+        <td style={{ width: 58 }}>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
+        <td style={{ width: 82 }}><Ago when={blockTimestamp} /></td>
+      </tr>
+    );
+  }
+
+  export function Location(props: Props & PixelPosition) {
+    const { left, top } = props;
+
+    return (
+      <span
+        className="Chain-map-node"
+        style={{ left, top }}
+        title={props.nodeDetails[0]}
+        data-location={JSON.stringify(props.location)}
+      />
+    );
   }
 }
-
-export function Node(props: Node.Props) {
-  const [name, implementation, version] = props.nodeDetails;
-  const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
-  const [peers, txcount] = props.nodeStats;
-
-  return (
-    <tr>
-      <td>{name}</td>
-      <td style={{ width: 240 }}>{implementation} v{version}</td>
-      <td style={{ width: 26 }}>{peers}</td>
-      <td style={{ width: 26 }}>{txcount}</td>
-      <td style={{ width: 88 }}>#{formatNumber(height)}</td>
-      <td style={{ width: 154 }}><span title={hash}>{trimHash(hash, 16)}</span></td>
-      <td style={{ width: 80 }}>{secondsWithPrecision(blockTime/1000)}</td>
-      <td style={{ width: 58 }}>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
-      <td style={{ width: 82 }}><Ago when={blockTimestamp} /></td>
-    </tr>
-  );
-}