Display state of Grandpa (#134)

* Make it clear that settings apply only to list view

Since the consensus view will be added users could
mistake the settings as being applied there as well.

* Add Jdenticon

* Add Grandpa consensus visualisation

* Remove fade-in animation

* Update packages and yarn.lock

* Broadcast only delta of what changed

* Minor code improvements

* Use NodeId instead of Address in first dimension

By using the NodeId instead of the Address in the first
dimension of the consensus matrice we save quite some
space in the payload which is sent to the browser.

The commit also contains some minor refactoring.

* Refactoring and improving naming

* Display boxes only after size has been detected

This look a bit nicer, otherwise the UI will still adapt
the box sizes once everything has already been loaded up.

* Fix cache

* Send consensus info on first subscribe

So that frontend can immediately display the current state
and doesn't have to aggregate first.

* Increase cache size

* Send deltas only if block in cache

Otherwise the UI will update old blocks which
are still visible to an empty shell.

* Adjust cache size

* Make cache sizes dependent

* Ensure authority caches are aligned

If only one authority has already submitted consensus info
for a new block then the cache of that one is offset by one
from all other authorities.

* Handle restarts on authority set changes properly

* Fix backfill mechanism

* Extract function

* Display only blocks since last authority set change

* Handle authority set sent on connect

When nodes lose their connection to telemetry
or connect on first time they sent their current
authority set for the UI to have something to
display.

These sets don't contain an explicit block number,
because the set didn't change -- it just got resent.
In this case the set is `undefined`.

* Introduce Authority type

This is necessary to cover the case where one
node connects, submits its authority set containing
another node which has not yet connected to Telemetry.

In this case we still want to create a shell object
and fill it with the address.

* Handle corner case

In the case of only one block having been produced, two authorities,
and only one authority connected, the UI did not show up.

* Display placeholder if name not yet available

* Replace with camelCase

* Replace with correct types

* Replace grandpa icon

* Change consensus icon to cube (finalized block icon)

* Upgrade dependencies

* Implement thin backend instead of thick

* Cleanup and minor improvements

* Minor refactoring

* Extract common code into function

* Switch module to class

* Remove unused code

* Clean markup

* Remove unused code

* Revert "Upgrade dependencies"

This reverts commit bf4d9ea48b3417860ccf40f0c5122027ffc59689.

* Update polkadot-identicon in frontend

Change version number to `^1.1.45` and run
`npm update polkadot-identicon`.

* Run yarn install

* Update react-measure to 2.3.0

Changed version number, ran

	cd packages/frontend/ && npm update react-reasure &&
	cd ../../ && yarn install

* Improve typing by introducing partial type

* Reduce indexing operations

* Shorten function

* Shorten function

* Introduce initialiseConsensusViewByRef

* Remove dead conditional branch

* Return consensusView ref from initialiseConsensusView

*  Handle consensusView ref returned from initialiseConsensusView

packages/common/src/feed.ts

@@ -17,7 +17,8 @@ import {
   BlockDetails,
   Timestamp,
   Milliseconds,
-  ChainLabel
+  ChainLabel,
+  AuthoritySetInfo,
 } from './types';
 
 export const Actions = {
@@ -37,6 +38,10 @@ export const Actions = {
   SubscribedTo     : 0x0D as 0x0D,
   UnsubscribedFrom : 0x0E as 0x0E,
   Pong             : 0x0F as 0x0F,
+  AfgFinalized         : 0x10 as 0x10,
+  AfgReceivedPrevote   : 0x11 as 0x11,
+  AfgReceivedPrecommit : 0x12 as 0x12,
+  AfgAuthoritySet      : 0x13 as 0x13,
 };
 
 export type Action = typeof Actions[keyof typeof Actions];
@@ -126,6 +131,26 @@ export namespace Variants {
     action: typeof Actions.Pong;
     payload: string; // just echo whatever `ping` sent
   }
+
+  export interface AfgFinalizedMessage extends MessageBase {
+    action: typeof Actions.AfgFinalized;
+    payload: [Address, BlockNumber, BlockHash];
+  }
+
+  export interface AfgAuthoritySet extends MessageBase {
+    action: typeof Actions.AfgAuthoritySet;
+    payload: AuthoritySetInfo;
+  }
+
+  export interface AfgReceivedPrecommit extends MessageBase {
+    action: typeof Actions.AfgReceivedPrecommit;
+    payload: [Address, BlockNumber, BlockHash, Address];
+  }
+
+  export interface AfgReceivedPrevote extends MessageBase {
+    action: typeof Actions.AfgReceivedPrevote;
+    payload: [Address, BlockNumber, BlockHash, Address];
+  }
 }
 
 export type Message =
@@ -144,6 +169,10 @@ export type Message =
   | Variants.RemovedChainMessage
   | Variants.SubscribedToMessage
   | Variants.UnsubscribedFromMessage
+  | Variants.AfgFinalizedMessage
+  | Variants.AfgReceivedPrevote
+  | Variants.AfgReceivedPrecommit
+  | Variants.AfgAuthoritySet
   | Variants.PongMessage;
 
 /**

packages/common/src/types.ts

@@ -27,7 +27,37 @@ export type NetworkId = Opaque<string, 'NetworkId'>;
 export type NetworkState = Opaque<string | object, 'NetworkState'>;
 
 export type BlockDetails = [BlockNumber, BlockHash, Milliseconds, Timestamp, Maybe<PropagationTime>];
-export type NodeDetails = [NodeName, NodeImplementation, NodeVersion, Maybe<Address>, Maybe<NetworkId>];
+export type NodeDetails = [NodeName, Address, NodeImplementation, NodeVersion, Maybe<Address>, Maybe<NetworkId>];
 export type NodeStats = [PeerCount, TransactionCount];
 export type NodeHardware = [Array<MemoryUse>, Array<CPUUse>, Array<BytesPerSecond>, Array<BytesPerSecond>, Array<Timestamp>];
 export type NodeLocation = [Latitude, Longitude, City];
+
+export declare type Authority = {
+  Address: Address,
+  NodeId: Maybe<NodeId>,
+  Name: Maybe<NodeName>,
+};
+export declare type Authorities = Array<Address>;
+export declare type AuthoritySetId = Opaque<number, 'AuthoritySetId'>;
+export declare type AuthoritySetInfo = [AuthoritySetId, Authorities, Address, BlockNumber, BlockHash];
+export declare type ConsensusInfo = Array<[BlockNumber, ConsensusView]>;
+export declare type ConsensusView = Map<Address, ConsensusState>;
+export declare type ConsensusState = Map<Address, ConsensusDetail>;
+export declare type ConsensusDetail = {
+  Precommit: Precommit;
+  ImplicitPrecommit: ImplicitPrecommit;
+  Prevote: Prevote;
+  ImplicitPrevote: ImplicitPrevote;
+  ImplicitPointer: ImplicitPointer;
+  Finalized: ImplicitFinalized;
+  ImplicitFinalized: Finalized;
+  FinalizedHash: BlockHash;
+  FinalizedHeight: BlockNumber;
+};
+export declare type Precommit = Opaque<boolean, 'Precommit'>;
+export declare type Prevote = Opaque<boolean, 'Prevote'>;
+export declare type Finalized = Opaque<boolean, 'Finalized'>;
+export declare type ImplicitPrecommit = Opaque<boolean, 'ImplicitPrecommit'>;
+export declare type ImplicitPrevote = Opaque<boolean, 'ImplicitPrevote'>;
+export declare type ImplicitFinalized = Opaque<boolean, 'ImplicitFinalized'>;
+export declare type ImplicitPointer = Opaque<BlockNumber, 'ImplicitPointer'>;