Feat: Add tips chart in SPA plugin (#327)

* Feat: Add tips chart to dashboard

* Feat: Pack tips chart

* Fix: Fix wrong type in function parameter

* Fix: Use GetTipCount() in TipSelector

plugins/spa/frontend/src/app/components/Dashboard.tsx

@@ -5,6 +5,7 @@ import Col from "react-bootstrap/Col";
 import Uptime from "app/components/Uptime";
 import Version from "app/components/Version";
 import TPSChart from "app/components/TPSChart";
+import TipsChart from "app/components/TipsChart";
 import NodeStore from "app/stores/NodeStore";
 import {inject, observer} from "mobx-react";
 import ListGroup from "react-bootstrap/ListGroup";
@@ -46,6 +47,9 @@ export class Dashboard extends React.Component<Props, any> {
                 <Row className={"mb-3"}>
                     <Col><TPSChart/></Col>
                 </Row>
+                <Row className={"mb-3"}>
+                    <Col><TipsChart/></Col>
+                </Row>
                 <Row className={"mb-3"}>
                     <Col><MemChart/></Col>
                 </Row>

plugins/spa/frontend/src/app/components/TipsChart.tsx

+import * as React from 'react';
+import Card from "react-bootstrap/Card";
+import NodeStore from "app/stores/NodeStore";
+import {inject, observer} from "mobx-react";
+import {Line} from "react-chartjs-2";
+import {defaultChartOptions} from "app/misc/Chart";
+
+interface Props {
+    nodeStore?: NodeStore;
+}
+
+const lineChartOptions = Object.assign({
+    scales: {
+        xAxes: [{
+            ticks: {
+                autoSkip: true,
+                maxTicksLimit: 8,
+                fontSize: 8,
+                minRotation: 0,
+                maxRotation: 0,
+            },
+            gridLines: {
+                display: false
+            }
+        }],
+        yAxes: [{
+            gridLines: {
+                display: false
+            },
+            ticks: {
+                callback: function (value, index, values) {
+                    return Math.abs(value);
+                },
+                fontSize: 10,
+                maxTicksLimit: 4,
+                beginAtZero: true,
+            },
+        }],
+    },
+    tooltips: {
+        callbacks: {
+            label: function (tooltipItem, data) {
+                let label = data.datasets[tooltipItem.datasetIndex].label;
+                return `${label} ${Math.abs(tooltipItem.value)}`;
+            }
+        }
+    }
+}, defaultChartOptions);
+
+@inject("nodeStore")
+@observer
+export default class TipsChart extends React.Component<Props, any> {
+    render() {
+        return (
+            <Card>
+                <Card.Body>
+                    <Card.Title>Current Tips</Card.Title>
+                    <small>
+                        Tips: {this.props.nodeStore.last_tips_metric.tips}.
+                    </small>
+
+                    <Line height={50} data={this.props.nodeStore.tipsSeries} options={lineChartOptions}/>
+                </Card.Body>
+            </Card>
+        );
+    }
+}

plugins/spa/frontend/src/app/misc/WS.ts

@@ -4,6 +4,7 @@ export enum WSMsgType {
     Tx,
     NeighborStats,
     Drng,
+    TipsMetrics,
 }
 
 export interface WSMessage {
@@ -42,4 +43,4 @@ export function connectWebSocket(path: string, onOpen, onClose, onError) {
         }
         handler(msg.data);
     };
-}
+}
\ No newline at end of file

plugins/spa/frontend/src/app/stores/NodeStore.ts

@@ -29,6 +29,11 @@ class MemoryMetrics {
     ts: string;
 }
 
+class TipsMetric {
+    tips: number;
+    ts: string;
+}
+
 class NetworkIO {
     tx: number;
     rx: number;
@@ -154,11 +159,14 @@ export class NodeStore {
     @observable collected_tps_metrics: Array<TPSMetric> = [];
     @observable collected_mem_metrics: Array<MemoryMetrics> = [];
     @observable neighbor_metrics = new ObservableMap<string, NeighborMetrics>();
+    @observable last_tips_metric: TipsMetric = new TipsMetric();
+    @observable collected_tips_metrics: Array<TipsMetric> = [];
 
     constructor() {
         registerHandler(WSMsgType.Status, this.updateStatus);
         registerHandler(WSMsgType.TPSMetrics, this.updateLastTPSMetric);
         registerHandler(WSMsgType.NeighborStats, this.updateNeighborMetrics);
+        registerHandler(WSMsgType.TipsMetrics, this.updateLastTipsMetric);
     }
 
     connect() {
@@ -214,6 +222,18 @@ export class NodeStore {
         this.collected_tps_metrics.push(tpsMetric);
     };
 
+    @action
+    updateLastTipsMetric = (tips: number) => {
+        let tipsMetric = new TipsMetric();
+        tipsMetric.tips = tips;
+        tipsMetric.ts = dateformat(Date.now(), "HH:MM:ss");
+        this.last_tips_metric = tipsMetric;
+        if (this.collected_tips_metrics.length > maxMetricsDataPoints) {
+            this.collected_tips_metrics.shift();
+        }
+        this.collected_tips_metrics.push(tipsMetric);
+    };
+
     @computed
     get tpsSeries() {
         let tps = Object.assign({}, chartSeriesOpts,
@@ -233,6 +253,25 @@ export class NodeStore {
         };
     }
 
+    @computed
+    get tipsSeries() {
+        let tips = Object.assign({}, chartSeriesOpts,
+            series("Tips", 'rgba(250, 140, 30,1)', 'rgba(250, 140, 30,0.4)')
+        );
+
+        let labels = [];
+        for (let i = 0; i < this.collected_tips_metrics.length; i++) {
+            let metric: TipsMetric = this.collected_tips_metrics[i];
+            labels.push(metric.ts);
+            tips.data.push(metric.tips);
+        }
+
+        return {
+            labels: labels,
+            datasets: [tips],
+        };
+    }
+
     @computed
     get neighborsSeries() {
         return {};
@@ -320,4 +359,4 @@ export class NodeStore {
     }
 }
 
-export default NodeStore;
+export default NodeStore;
\ No newline at end of file

plugins/spa/plugin.go

@@ -19,6 +19,7 @@ import (
 	"github.com/iotaledger/goshimmer/plugins/banner"
 	"github.com/iotaledger/goshimmer/plugins/config"
 	"github.com/iotaledger/goshimmer/plugins/gossip"
+	"github.com/iotaledger/goshimmer/plugins/messagelayer"
 	"github.com/iotaledger/goshimmer/plugins/metrics"
 
 	"github.com/iotaledger/hive.go/daemon"
@@ -50,6 +51,7 @@ func configure(plugin *node.Plugin) {
 		sendToAllWSClient(&msg{MsgTypeTPSMetric, task.Param(0).(uint64)})
 		sendToAllWSClient(&msg{MsgTypeNodeStatus, currentNodeStatus()})
 		sendToAllWSClient(&msg{MsgTypeNeighborMetric, neighborMetrics()})
+		sendToAllWSClient(&msg{MsgTypeTipsMetric, messagelayer.TipSelector.GetTipCount()})
 		task.Return(nil)
 	}, workerpool.WorkerCount(wsSendWorkerCount), workerpool.QueueSize(wsSendWorkerQueueSize))
 
@@ -129,6 +131,7 @@ const (
 	MsgTypeTx
 	MsgTypeNeighborMetric
 	MsgTypeDrng
+	MsgTypeTipsMetric
 )
 
 type msg struct {