Show chia version if available

.github/workflows/ci.yml

@@ -12,6 +12,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16.x
+      - name: Use current yarn
+        run: yarn set version stable
       - name: yarn install
         run: yarn install
       - name: Deploy to gh-pages

.gitignore

@@ -6,6 +6,7 @@
 /dist
 # Only exists if Bazel was run
 /bazel-out
+.yarn
 
 # dependencies
 /node_modules

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+enableGlobalCache: true

src/app/api/types/satellite.ts

@@ -88,11 +88,16 @@ export interface PlotterStats {
   jobs: PlotJob[]
 }
 
+export interface DaemonStats {
+  version: string
+}
+
 export interface Satellite {
   _id: string
   name: string
   hidden: boolean
   services: {
+    daemon?: ChiaService<DaemonStats>
     farmer: ChiaService<FarmerStats>
     harvester: ChiaService<HarvesterStats>
     fullNode: ChiaService<FullNodeStats>

src/app/farmer/farmer.component.html

@@ -1,34 +1,40 @@
 <div class="card">
   <div class="card-header d-flex justify-content-between">
     <h5>Farmer ({{satelliteName}})</h5>
-    <h5>
-      <span [class]="colorClassForSyncStatus">{{status}}</span>
-      <ng-template #settingsContent>
-        <div class="mb-1">
-          Response time color scheme:
-        </div>
-        <div class="custom-control custom-radio custom-control-inline">
-          <input type="radio" id="responseTimeColorSchemeStrict" name="responseTimeColorSchemeStrict" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.strict">
-          <label class="custom-control-label" for="responseTimeColorSchemeStrict">Strict</label>
-        </div>
-        <div class="custom-control custom-radio custom-control-inline">
-          <input type="radio" id="responseTimeColorSchemeRegular" name="responseTimeColorSchemeRegular" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.regular">
-          <label class="custom-control-label" for="responseTimeColorSchemeRegular">Regular</label>
-        </div>
-        <div class="custom-control custom-radio custom-control-inline">
-          <input type="radio" id="responseTimeColorSchemeRelaxed" name="responseTimeColorSchemeRelaxed" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.relaxed">
-          <label class="custom-control-label" for="responseTimeColorSchemeRelaxed">Relaxed</label>
-        </div>
-      </ng-template>
-      <fa-icon
-        class="ml-2"
-        [icon]="faEllipsisV"
-        size="sm"
-        style="cursor: pointer"
-        [ngbPopover]="settingsContent"
-        [autoClose]="'outside'"
-      ></fa-icon>
-    </h5>
+    <div class="d-flex" style="gap: 0.33rem !important;">
+      <span *ngIf="farmer.chiaVersion">
+        <img src="assets/icon-transparent.png" height="18" alt="">
+        <small class="text-muted">v{{farmer.chiaVersion}}</small>
+      </span>
+      <h5>
+        <span [class]="colorClassForSyncStatus">{{status}}</span>
+        <ng-template #settingsContent>
+          <div class="mb-1">
+            Response time color scheme:
+          </div>
+          <div class="custom-control custom-radio custom-control-inline">
+            <input type="radio" id="responseTimeColorSchemeStrict" name="responseTimeColorSchemeStrict" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.strict">
+            <label class="custom-control-label" for="responseTimeColorSchemeStrict">Strict</label>
+          </div>
+          <div class="custom-control custom-radio custom-control-inline">
+            <input type="radio" id="responseTimeColorSchemeRegular" name="responseTimeColorSchemeRegular" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.regular">
+            <label class="custom-control-label" for="responseTimeColorSchemeRegular">Regular</label>
+          </div>
+          <div class="custom-control custom-radio custom-control-inline">
+            <input type="radio" id="responseTimeColorSchemeRelaxed" name="responseTimeColorSchemeRelaxed" class="custom-control-input" [(ngModel)]="responseTimeColorScheme" [value]="ResponseTimeColorScheme.relaxed">
+            <label class="custom-control-label" for="responseTimeColorSchemeRelaxed">Relaxed</label>
+          </div>
+        </ng-template>
+        <fa-icon
+          class="ml-2"
+          [icon]="faEllipsisV"
+          size="sm"
+          style="cursor: pointer"
+          [ngbPopover]="settingsContent"
+          [autoClose]="'outside'"
+        ></fa-icon>
+      </h5>
+    </div>
   </div>
   <div class="card-body farmer-card">
     <div echarts [options]="chartOptions" [merge]="chartUpdateOptions" theme="default" class="farming-info-chart"></div>

src/app/farmer/farmer.component.ts

@@ -2,18 +2,19 @@ import { Component, Input, OnInit} from '@angular/core';
 import * as moment from 'moment';
 import {getStateForLastUpdated} from '../state-util';
 import {EChartsOption} from 'echarts';
-import {StateService} from '../state.service';
+import {EnrichedStats, StateService} from '../state.service'
 import BigNumber from 'bignumber.js';
 import {LocalStorageService} from '../local-storage.service'
 import {faEllipsisV} from '@fortawesome/free-solid-svg-icons'
+import {FarmerStats} from '../api/types/satellite'
 
 @Component({
   selector: 'app-farmer',
   templateUrl: './farmer.component.html',
   styleUrls: ['./farmer.component.scss']
 })
 export class FarmerComponent implements OnInit {
-  @Input() farmer: any;
+  @Input() farmer: EnrichedStats<FarmerStats>;
 
   public readonly faEllipsisV = faEllipsisV
   public chartOptions: EChartsOption;
@@ -81,13 +82,13 @@ export class FarmerComponent implements OnInit {
     if (this.farmer.averageHarvesterResponseTime !== undefined) {
       return this.farmer.averageHarvesterResponseTime;
     }
-    if (!this.farmer.harvesterResponseTimes || this.farmer.harvesterResponseTimes.length === 0) {
+    if (!this.farmer['harvesterResponseTimes'] || this.farmer['harvesterResponseTimes'].length === 0) {
       return null;
     }
 
-    return this.farmer.harvesterResponseTimes
+    return this.farmer['harvesterResponseTimes']
       .reduce((acc, curr) => acc.plus(curr), new BigNumber(0))
-      .dividedBy(this.farmer.harvesterResponseTimes.length)
+      .dividedBy(this.farmer['harvesterResponseTimes'].length)
       .toNumber();
   }
 
@@ -107,11 +108,11 @@ export class FarmerComponent implements OnInit {
     if (this.farmer.worstHarvesterResponseTime !== undefined) {
       return this.farmer.worstHarvesterResponseTime;
     }
-    if (!this.farmer.harvesterResponseTimes || this.farmer.harvesterResponseTimes.length === 0) {
+    if (!this.farmer['harvesterResponseTimes'] || this.farmer['harvesterResponseTimes'].length === 0) {
       return null;
     }
 
-    return this.farmer.harvesterResponseTimes
+    return this.farmer['harvesterResponseTimes']
       .reduce((acc, curr) => acc.isGreaterThan(curr) ? acc : new BigNumber(curr), new BigNumber(0))
       .toNumber();
   }

src/app/full-node/full-node.component.html

@@ -1,6 +1,10 @@
 <div class="card">
-  <div class="card-header">
+  <div class="card-header d-flex justify-content-between">
     <h5>Full Node ({{satelliteName}})</h5>
+    <span *ngIf="fullNode.chiaVersion">
+      <img src="assets/icon-transparent.png" height="18" alt="">
+      <small class="text-muted">v{{fullNode.chiaVersion}}</small>
+    </span>
   </div>
   <div class="card-body card-body-with-title">
     <h5 class="card-title">

src/app/full-node/full-node.component.ts

@@ -2,22 +2,24 @@ import {Component, Input, OnInit} from '@angular/core';
 import * as moment from 'moment';
 import {getColorClassForSyncStatus, getStateForLastUpdated} from '../state-util';
 import Capacity from '../capacity';
+import {EnrichedStats} from '../state.service'
+import {FullNodeStats} from '../api/types/satellite'
 
 @Component({
   selector: 'app-full-node',
   templateUrl: './full-node.component.html',
   styleUrls: ['./full-node.component.scss']
 })
 export class FullNodeComponent implements OnInit {
-  @Input() fullNode: any;
+  @Input() fullNode: EnrichedStats<FullNodeStats>;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
   get fullNodeConnectionCount() {
-    return this.fullNode.fullNodeConnectionsCount !== undefined ? this.fullNode.fullNodeConnectionsCount : this.fullNode.fullNodeConnections.length;
+    return this.fullNode.fullNodeConnectionsCount !== undefined ? this.fullNode.fullNodeConnectionsCount : this.fullNode['fullNodeConnections'].length;
   }
 
   get satelliteName() {

src/app/harvester/harvester.component.html

@@ -1,6 +1,10 @@
 <div class="card">
-  <div class="card-header">
+  <div class="card-header d-flex justify-content-between">
     <h5>Harvester ({{satelliteName}})</h5>
+    <span *ngIf="harvester.chiaVersion">
+      <img src="assets/icon-transparent.png" height="18" alt="">
+      <small class="text-muted">v{{harvester.chiaVersion}}</small>
+    </span>
   </div>
   <div class="card-body card-body-with-title">
     <h5 class="card-title">

src/app/harvester/harvester.component.ts

@@ -3,14 +3,16 @@ import {getStateForLastUpdated} from '../state-util';
 import Capacity from '../capacity';
 import * as moment from 'moment';
 import {BigNumber} from 'bignumber.js';
+import {EnrichedStats} from '../state.service'
+import {HarvesterStats} from '../api/types/satellite'
 
 @Component({
   selector: 'app-harvester',
   templateUrl: './harvester.component.html',
   styleUrls: ['./harvester.component.scss']
 })
 export class HarvesterComponent implements OnInit {
-  @Input() harvester: any;
+  @Input() harvester: EnrichedStats<HarvesterStats>;
   @Input() bestBlockchainState: any;
 
   constructor() { }
@@ -19,7 +21,7 @@ export class HarvesterComponent implements OnInit {
   }
 
   get farmerConnectionsCount() {
-    return this.harvester.farmerConnectionsCount !== undefined ? this.harvester.farmerConnectionsCount : this.harvester.farmerConnections.length;
+    return this.harvester.farmerConnectionsCount !== undefined ? this.harvester.farmerConnectionsCount : this.harvester['farmerConnections'].length;
   }
 
   get status() {
@@ -58,15 +60,15 @@ export class HarvesterComponent implements OnInit {
   }
 
   private get rawCapacityInGib(): BigNumber {
-    return new BigNumber(this.harvester.totalRawPlotCapacityInGib || this.harvester.totalCapacityInGib)
+    return new BigNumber(this.harvester.totalRawPlotCapacityInGib || this.harvester['totalCapacityInGib'])
   }
 
   public get formattedEffectiveCapacity(): string {
     return new Capacity(this.effectiveCapacityInGib).toString();
   }
 
   private get effectiveCapacityInGib(): BigNumber {
-    return new BigNumber(this.harvester.totalEffectivePlotCapacityInGib || this.harvester.totalCapacityInGib)
+    return new BigNumber(this.harvester.totalEffectivePlotCapacityInGib || this.harvester['totalCapacityInGib'])
   }
 
   get lastUpdatedBefore() {

src/app/plotter/plotter.component.html

@@ -1,6 +1,10 @@
 <div class="card">
-  <div class="card-header">
+  <div class="card-header d-flex justify-content-between">
     <h5>Plotter ({{satelliteName}})</h5>
+    <span *ngIf="plotter.chiaVersion">
+      <img src="assets/icon-transparent.png" height="18" alt="">
+      <small class="text-muted">v{{plotter.chiaVersion}}</small>
+    </span>
   </div>
   <div class="card-body card-body-with-title" [class.plotter-card]="runningJobsCount > 0">
     <h5 class="card-title">

src/app/plotter/plotter.component.ts

@@ -1,23 +1,21 @@
 import {Component, Input, OnInit} from '@angular/core';
 import * as moment from 'moment';
+import {EnrichedStats} from '../state.service'
+import {PlotterStats} from '../api/types/satellite'
 
 @Component({
   selector: 'app-plotter',
   templateUrl: './plotter.component.html',
   styleUrls: ['./plotter.component.scss']
 })
 export class PlotterComponent implements OnInit {
-  @Input() plotter: any;
+  @Input() plotter: EnrichedStats<PlotterStats>;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
-  trackBy(index, item) {
-    return item.id;
-  }
-
   get satelliteName() {
     return this.plotter.satelliteName;
   }

src/app/state.service.ts

@@ -271,6 +271,7 @@ export class StateService {
           satelliteName: satellite.name,
           satelliteId: satellite._id,
           satelliteUpdatedAt: satellite.updatedAt,
+          chiaVersion: satellite.services.daemon?.stats?.version,
         });
       }
       return statsCollection;
@@ -308,4 +309,5 @@ export type EnrichedStats<T> = T & {
   satelliteName: string
   satelliteId: string
   satelliteUpdatedAt: string
+  chiaVersion?: string
 }

src/app/wallet/wallet.component.html

@@ -1,6 +1,10 @@
 <div class="card">
-  <div class="card-header">
+  <div class="card-header d-flex justify-content-between">
     <h5>Wallet ({{satelliteName}})</h5>
+    <span *ngIf="wallet.chiaVersion">
+      <img src="assets/icon-transparent.png" height="18" alt="">
+      <small class="text-muted">v{{wallet.chiaVersion}}</small>
+    </span>
   </div>
   <div class="card-body card-body-with-title">
     <h5 class="card-title">Status: <span [class]="colorClassForSyncStatus">{{status}}</span></h5>