[explorer] task: migrate statistics pages to node watch services

__tests__/TestHelper.js

@@ -375,7 +375,10 @@ const TestHelper = {
 		finalizedPoint: 1,
 		geoLocation: null,
 		height: 120,
-		name: 'node'
+		name: 'node',
+		restVersion: null,
+		isHealthy: null,
+		isSslEnabled: null
 	},
 	geoLocationCommonField: {
 		city: 'ABC City',

__tests__/infrastructure/NodeService.spec.js

@@ -10,46 +10,46 @@ describe('Node Service', () => {
 
 	const nodeWatchServiceNodeResponse = [
 		{
+			...nodeCommonField,
 			roles: 1,
 			restVersion: null,
 			isHealthy: null,
-			isSslEnabled: null,
-			...nodeCommonField
+			isSslEnabled: null
 		},
 		{
+			...nodeCommonField,
 			roles: 1, // Peer node (light)
 			restVersion: '2.4.4',
 			isHealthy: null,
-			isSslEnabled: true,
-			...nodeCommonField
+			isSslEnabled: true
 		},
 		{
+			...nodeCommonField,
 			roles: 3,
 			restVersion: '2.4.4',
 			isHealthy: true,
-			isSslEnabled: true,
-			...nodeCommonField
+			isSslEnabled: true
 		},
 		{
+			...nodeCommonField,
 			roles: 5, // Peer Voting node (light)
 			restVersion: '2.4.4',
 			isHealthy: null,
-			isSslEnabled: true,
-			...nodeCommonField
+			isSslEnabled: true
 		},
 		{
+			...nodeCommonField,
 			roles: 5,
 			restVersion: null,
 			isHealthy: null,
-			isSslEnabled: null,
-			...nodeCommonField
+			isSslEnabled: null
 		},
 		{
+			...nodeCommonField,
 			roles: 7,
 			restVersion: '2.4.4',
 			isHealthy: true,
-			isSslEnabled: true,
-			...nodeCommonField
+			isSslEnabled: true
 		}
 	];
 
@@ -72,15 +72,14 @@ describe('Node Service', () => {
 		networkGenerationHashSeed: '57F7DA205008026C776CB6AED843393F04CD458E0AA2D9F1D5F31A402072B2D6'
 	};
 
-	const runNodeWatchFailResponseTests = (nodeWatchMethod, NodeServiceMethod) => {
-		it('throws error when node watch fail response', async () => {
+	const runNodeServiceThrowErrorTests = (nodeServiceMethod, params, expectedError) => {
+		it('throws error when node service fail response', async () => {
 			// Arrange:
-			const error = new Error(`node watch ${nodeWatchMethod} error`);
-
-			jest.spyOn(NodeWatchService, nodeWatchMethod).mockRejectedValue(error);
+			jest.spyOn(NodeWatchService, 'getNodes').mockRejectedValue(new Error());
+			jest.spyOn(NodeWatchService, 'getNodeByMainPublicKey').mockRejectedValue(new Error());
 
 			// Act + Assert:
-			await expect(NodeService[NodeServiceMethod]()).rejects.toThrow(error);
+			await expect(NodeService[nodeServiceMethod](params)).rejects.toThrow(expectedError);
 		});
 	};
 
@@ -151,7 +150,7 @@ describe('Node Service', () => {
 			]);
 		});
 
-		runNodeWatchFailResponseTests('getNodes', 'getAvailableNodes');
+		runNodeServiceThrowErrorTests('getAvailableNodes', undefined, 'Failed to get available nodes');
 	});
 
 	describe('getNodeStats', () => {
@@ -258,7 +257,7 @@ describe('Node Service', () => {
 			nodeWatchServiceNodeResponse[3]
 		].forEach(lightNode => runLightRestNodeTests(lightNode));
 
-		runNodeWatchFailResponseTests('getNodeByMainPublicKey', 'getNodeInfo');
+		runNodeServiceThrowErrorTests('getNodeInfo', 'public key 123', 'Failed to get node info for public key public key 123');
 	});
 
 	describe('getAPINodeList', () => {
@@ -292,4 +291,76 @@ describe('Node Service', () => {
 			]);
 		});
 	});
+
+	describe('getNodeHeightAndFinalizedHeightStats', () => {
+		it('returns node height and finalized height count and group by version', async () => {
+			// Arrange:
+			const mockApiResponse = [
+				{
+					...nodeCommonField,
+					version: '1.0.3.6',
+					height: 120,
+					finalizedHeight: 100
+				},
+				{
+					...nodeCommonField,
+					version: '1.0.3.6',
+					height: 120,
+					finalizedHeight: 100
+				},
+				{
+					...nodeCommonField,
+					version: '1.0.3.5',
+					height: 120,
+					finalizedHeight: 99
+				},
+				{
+					...nodeCommonField,
+					version: '1.0.3.5',
+					height: 120,
+					finalizedHeight: 100
+				},
+				{
+					...nodeCommonField,
+					version: '1.0.3.4',
+					height: 120,
+					finalizedHeight: 100
+				}
+			];
+
+			jest.spyOn(NodeWatchService, 'getNodes').mockResolvedValue(mockApiResponse);
+
+			// Act:
+			const result = await NodeService.getNodeHeightAndFinalizedHeightStats();
+
+			// Assert:
+			expect(result).toEqual([
+				{
+					'data': [{'x': 120, 'y': 2, 'z': 2}],
+					'name': '1.0.3.6 - Height'
+				},
+				{
+					'data': [{'x': 100, 'y': 2, 'z': 2}],
+					'name': '1.0.3.6 - Finalized Height'},
+				{
+					'data': [{'x': 120, 'y': 2, 'z': 2}],
+					'name': '1.0.3.5 - Height'
+				},
+				{
+					'data': [{'x': 99, 'y': 1, 'z': 1}, {'x': 100, 'y': 1, 'z': 1}],
+					'name': '1.0.3.5 - Finalized Height'
+				},
+				{
+					'data': [{'x': 120, 'y': 1, 'z': 1}],
+					'name': '1.0.3.4 - Height'
+				},
+				{
+					'data': [{'x': 100, 'y': 1, 'z': 1}],
+					'name': '1.0.3.4 - Finalized Height'
+				}
+			]);
+		});
+
+		runNodeServiceThrowErrorTests('getNodeHeightAndFinalizedHeightStats', undefined, 'Failed to get node height stats');
+	});
 });

package.json

@@ -32,7 +32,6 @@
     "nem-sdk": "^1.6.8",
     "net": "^1.0.2",
     "symbol-sdk": "^2.0.3",
-    "symbol-statistics-service-typescript-fetch-client": "^1.1.5",
     "tls": "^0.0.1",
     "url-parse": "^1.5.10",
     "vue": "^2.6.14",

src/components/Chart.vue

@@ -149,6 +149,11 @@ export default {
 						dataLabels: {
 							position: 'top'
 						}
+					},
+					bubble: {
+						zScaling: true,
+						minBubbleRadius: 10,
+						maxBubbleRadius: 50
 					}
 				},
 				title: {
@@ -189,7 +194,10 @@ export default {
 						: {}
 				},
 				tooltip: {
-					enabled: true
+					enabled: true,
+					z: {
+						title: 'Count: '
+					},
 				},
 				legend: {
 					show: true,

src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue

@@ -0,0 +1,79 @@
+<template>
+	<Card v-if="!error" :loading="loading">
+		<template #title>
+			{{getNameByKey('nodeHeightAndFinalizedHeightStatsTitle')}}
+		</template>
+
+		<template #body>
+			<b-row style="margin: -20px;">
+				<b-col>
+					<Chart
+						type="bubble"
+						:data="chartData"
+						xaxisType="category"
+						:height="400"
+					/>
+				</b-col>
+			</b-row>
+		</template>
+	</Card>
+</template>
+
+<script>
+import Card from '@/components/containers/Card.vue';
+import Chart from '@/components/Chart.vue';
+
+export default {
+	components: {
+		Card,
+		Chart
+	},
+
+	props: {
+		type: {
+			type: String,
+			default: 'height'
+		}
+	},
+
+	data () {
+		return {
+			managerGetter: 'statistic/nodeHeightAndFinalizedHeightStats'
+		};
+	},
+
+	computed: {
+		manager () {
+			return this.getter(this.managerGetter) || {};
+		},
+
+		data () {
+			return this.dataGetter
+				? this.getter(this.dataGetter)
+				: this.manager.data;
+		},
+
+		chartData () {
+			return this.data || [];
+		},
+
+		loading () {
+			return this.manager.loading;
+		},
+
+		error () {
+			return this.manager.error;
+		},
+	},
+
+	methods: {
+		getNameByKey (e) {
+			return this.$store.getters['ui/getNameByKey'](e);
+		},
+
+		getter (name) {
+			return this.$store.getters[name];
+		}
+	}
+};
+</script>