Expose GitHub hash in UI (#604)

* Expose GitHub hash in UI

* Prettier:fix

* cargo fmt

* Update tests

* Fix test

frontend/src/App.tsx

@@ -113,6 +113,7 @@ export default class App extends React.Component {
 
     this.appUpdate = bindState(this, {
       status: 'offline',
+      gitHash: '',
       best: 0 as Types.BlockNumber,
       finalized: 0 as Types.BlockNumber,
       blockTimestamp: 0 as Types.Timestamp,
@@ -145,6 +146,7 @@ export default class App extends React.Component {
   public render() {
     const { timeDiff, subscribed, status, tab } = this.appState;
     const chains = this.chains();
+    const gitHash = this.appState.gitHash;
     const subscribedData = subscribed
       ? this.appState.chains.get(subscribed)
       : null;
@@ -173,6 +175,7 @@ export default class App extends React.Component {
       <div className="App">
         <OfflineIndicator status={status} />
         <Chains
+          gitHash={gitHash}
           chains={chains}
           subscribedHash={subscribed}
           subscribedData={subscribedData}

frontend/src/Connection.ts

@@ -365,6 +365,11 @@ export class Connection {
           break;
         }
 
+        case ACTIONS.TelemetryInfo: {
+          this.appUpdate({ gitHash: message.payload.git_hash });
+          break;
+        }
+
         default: {
           break;
         }

frontend/src/common/feed.ts

@@ -41,29 +41,30 @@ import {
 } from './types';
 
 export const ACTIONS = {
-  FeedVersion: 0x00 as const,
-  BestBlock: 0x01 as const,
-  BestFinalized: 0x02 as const,
-  AddedNode: 0x03 as const,
-  RemovedNode: 0x04 as const,
-  LocatedNode: 0x05 as const,
-  ImportedBlock: 0x06 as const,
-  FinalizedBlock: 0x07 as const,
-  NodeStats: 0x08 as const,
-  NodeHardware: 0x09 as const,
-  TimeSync: 0x0a as const,
-  AddedChain: 0x0b as const,
-  RemovedChain: 0x0c as const,
-  SubscribedTo: 0x0d as const,
-  UnsubscribedFrom: 0x0e as const,
-  Pong: 0x0f as const,
-  AfgFinalized: 0x10 as const,
-  AfgReceivedPrevote: 0x11 as const,
-  AfgReceivedPrecommit: 0x12 as const,
-  AfgAuthoritySet: 0x13 as const,
-  StaleNode: 0x14 as const,
-  NodeIO: 0x15 as const,
-  ChainStatsUpdate: 0x16 as const,
+  FeedVersion: 0 as const,
+  BestBlock: 1 as const,
+  BestFinalized: 2 as const,
+  AddedNode: 3 as const,
+  RemovedNode: 4 as const,
+  LocatedNode: 5 as const,
+  ImportedBlock: 6 as const,
+  FinalizedBlock: 7 as const,
+  NodeStats: 8 as const,
+  NodeHardware: 9 as const,
+  TimeSync: 10 as const,
+  AddedChain: 11 as const,
+  RemovedChain: 12 as const,
+  SubscribedTo: 13 as const,
+  UnsubscribedFrom: 14 as const,
+  Pong: 15 as const,
+  AfgFinalized: 16 as const,
+  AfgReceivedPrevote: 17 as const,
+  AfgReceivedPrecommit: 18 as const,
+  AfgAuthoritySet: 19 as const,
+  StaleNode: 20 as const,
+  NodeIO: 21 as const,
+  ChainStatsUpdate: 22 as const,
+  TelemetryInfo: 23 as const,
 };
 
 export type Action = typeof ACTIONS[keyof typeof ACTIONS];
@@ -197,6 +198,11 @@ interface ChainStatsUpdate extends MessageBase {
   payload: ChainStats;
 }
 
+interface TelemetryInfo extends MessageBase {
+  action: typeof ACTIONS.TelemetryInfo;
+  payload: { git_hash: string };
+}
+
 export type Message =
   | FeedVersionMessage
   | BestBlockMessage
@@ -220,7 +226,8 @@ export type Message =
   | StaleNodeMessage
   | PongMessage
   | NodeIOMessage
-  | ChainStatsUpdate;
+  | ChainStatsUpdate
+  | TelemetryInfo;
 
 /**
  * Data type to be sent to the feed. Passing through strings means we can only serialize once,

frontend/src/common/index.ts

@@ -25,4 +25,4 @@ import * as FeedMessage from './feed';
 export { Types, FeedMessage };
 
 // Increment this if breaking changes were made to types in `feed.ts`
-export const VERSION: Types.FeedVersion = 32 as Types.FeedVersion;
+export const VERSION: Types.FeedVersion = 33 as Types.FeedVersion;

frontend/src/components/Chain/Header.css

@@ -24,7 +24,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   color: #000;
   min-width: 1350px;
   position: relative;
-  background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgb(255, 255, 255) 17%), white;
+  background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.2) 0%,
+      rgb(255, 255, 255) 17%
+    ),
+    white;
 }
 
 .Header-tabs {

frontend/src/components/Chains.tsx

@@ -26,6 +26,7 @@ import listIcon from '../icons/kebab-horizontal.svg';
 import './Chains.css';
 
 interface ChainsProps {
+  gitHash: string;
   chains: ChainData[];
   subscribedHash: Maybe<Types.GenesisHash>;
   subscribedData: Maybe<ChainData>;
@@ -75,6 +76,10 @@ export class Chains extends React.Component<ChainsProps> {
         </div>
       ) : null;
 
+    const githubLink = this.props.gitHash
+      ? `https://github.com/paritytech/substrate-telemetry/tree/${this.props.gitHash}`
+      : 'https://github.com/paritytech/substrate-telemetry';
+
     return (
       <div className="Chains">
         {subscribedChain}
@@ -88,9 +93,9 @@ export class Chains extends React.Component<ChainsProps> {
         </a>
         <a
           className="Chains-fork-me"
-          href="https://github.com/paritytech/substrate-telemetry"
+          href={githubLink}
           target="_blank"
-          title="Fork Me!"
+          title="Take me to Github!"
           rel="noreferrer"
         >
           <Icon src={githubIcon} />

frontend/src/index.css

@@ -21,7 +21,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   background-color: #2c2b2b;
 }
 

frontend/src/state.ts

@@ -318,6 +318,7 @@ export interface StateSettings {
 }
 
 export interface State {
+  gitHash: string;
   status: 'online' | 'offline' | 'upgrade-requested';
   best: Types.BlockNumber;
   finalized: Types.BlockNumber;