Including gitCommit and version in frontend build. Backend now sending a backendInfo object containing commit, version and hostname. All printed on About page.

frontend/src/app/components/about/about.component.html

@@ -3,9 +3,13 @@
     <br>
     <img src="./resources/mempool-logo-bigger.png" height="62.5" width="250">
     <br>
+    <br>
 
-    <div class="text-small text-center offset-md-1">
-      v2.2-dev ({{ gitCommit$ | async }})
+    <div class="text-small">
+      Frontend:
+      v{{ packetJsonVersion }} ({{ frontendGitCommitHash }}) [{{ hostname }}]
+      <br>
+      Backend: v{{ (backendInfo$ | async ).version }} ({{ (backendInfo$ | async ).gitCommit | slice:0:8 }}) [{{ (backendInfo$ | async).hostname }}]
     </div>
 
     <br>

frontend/src/app/components/about/about.component.ts

@@ -7,6 +7,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ApiService } from 'src/app/services/api.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { delay, map, retryWhen, switchMap, tap } from 'rxjs/operators';
+import { IBackendInfo } from 'src/app/interfaces/websocket.interface';
 
 @Component({
   selector: 'app-about',
@@ -14,7 +15,7 @@ import { delay, map, retryWhen, switchMap, tap } from 'rxjs/operators';
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent implements OnInit, OnDestroy {
-  gitCommit$: Observable<string>;
+  backendInfo$: Observable<IBackendInfo>;
   donationForm: FormGroup;
   paymentForm: FormGroup;
   donationStatus = 1;
@@ -22,6 +23,9 @@ export class AboutComponent implements OnInit, OnDestroy {
   contributors$: Observable<any>;
   donationObj: any;
   sponsorsEnabled = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+  frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH.substr(0, 8);
+  packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
+  hostname = document.location.hostname;
   sponsors = null;
   contributors = null;
   requestSubscription: Subscription | undefined;
@@ -36,7 +40,7 @@ export class AboutComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.gitCommit$ = this.stateService.gitCommit$.pipe(map((str) => str.substr(0, 8)));
+    this.backendInfo$ = this.stateService.backendInfo$;
     this.seoService.setTitle($localize`:@@004b222ff9ef9dd4771b777950ca1d0e4cd4348a:About`);
     this.websocketService.want(['blocks']);
 

frontend/src/app/interfaces/websocket.interface.ts

@@ -16,6 +16,7 @@ export interface WebsocketResponse {
   rbfTransaction?: Transaction;
   transactions?: TransactionStripped[];
   loadingIndicators?: ILoadingIndicators;
+  backendInfo?: IBackendInfo;
   'track-tx'?: string;
   'track-address'?: string;
   'track-asset'?: string;
@@ -49,3 +50,8 @@ export interface TransactionStripped {
   value: number;
 }
 
+export interface IBackendInfo {
+  hostname: string;
+  gitCommit: string;
+  version: string;
+}

frontend/src/app/services/state.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
 import { Block, Transaction } from '../interfaces/electrs.interface';
-import { MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
+import { IBackendInfo, MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
@@ -27,6 +27,8 @@ export interface Env {
   NGINX_PROTOCOL?: string;
   NGINX_HOSTNAME?: string;
   NGINX_PORT?: string;
+  GIT_COMMIT_HASH: string;
+  PACKAGE_JSON_VERSION: string;
 }
 
 const defaultEnv: Env = {
@@ -41,6 +43,8 @@ const defaultEnv: Env = {
   'NGINX_PROTOCOL': 'http',
   'NGINX_HOSTNAME': '127.0.0.1',
   'NGINX_PORT': '80',
+  'GIT_COMMIT_HASH': '',
+  'PACKAGE_JSON_VERSION': '',
 };
 
 @Injectable({
@@ -65,7 +69,7 @@ export class StateService {
   isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
   vbytesPerSecond$ = new ReplaySubject<number>(1);
   lastDifficultyAdjustment$ = new ReplaySubject<number>(1);
-  gitCommit$ = new ReplaySubject<string>(1);
+  backendInfo$ = new ReplaySubject<IBackendInfo>(1);
   loadingIndicators$ = new ReplaySubject<ILoadingIndicators>(1);
 
   live2Chart$ = new Subject<OptimizedMempoolStats>();

frontend/src/app/services/websocket.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import { WebsocketResponse } from '../interfaces/websocket.interface';
+import { WebsocketResponse, IBackendInfo } from '../interfaces/websocket.interface';
 import { StateService } from './state.service';
 import { Block, Transaction } from '../interfaces/electrs.interface';
 import { Subscription } from 'rxjs';
@@ -236,13 +236,13 @@ export class WebsocketService {
       this.stateService.bsqPrice$.next(response['bsq-price']);
     }
 
-    if (response['git-commit']) {
-      this.stateService.gitCommit$.next(response['git-commit']);
+    if (response.backendInfo) {
+      this.stateService.backendInfo$.next(response.backendInfo);
 
       if (!this.latestGitCommit) {
-        this.latestGitCommit = response['git-commit'];
+        this.latestGitCommit = response.backendInfo.gitCommit;
       } else {
-        if (this.latestGitCommit !== response['git-commit']) {
+        if (this.latestGitCommit !== response.backendInfo.gitCommit) {
           setTimeout(() => {
             window.location.reload();
           }, Math.floor(Math.random() * 60000) + 60000);
@@ -283,7 +283,7 @@ export class WebsocketService {
     }
 
     if (response['git-commit']) {
-      this.stateService.gitCommit$.next(response['git-commit']);
+      this.stateService.backendInfo$.next(response['git-commit']);
     }
   }
 }