Skip to content

Commit

Permalink
Add metric dashboard
Browse files Browse the repository at this point in the history 
Leverage telemetry event polling to create a dashboard to show real metrics of the network
  • Loading branch information
@apoorv-2204
apoorv-2204 committed Feb 18, 2022
1 parent ce5d86f commit 3d3e5da
Show file tree
Hide file tree
Showing 17 changed files with 2,597 additions and 12,437 deletions.
45 changes: 45 additions & 0 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import { } from "../css/app.scss"
import { } from './ui'
import * as metric_config_obj from './metric_config.js';

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
Expand Down Expand Up @@ -72,7 +74,50 @@ Hooks.Logs = {
}
}


Hooks.network_charts = {
mounted() {

var network_metric_obj = metric_config_obj.create_network_live_visuals();
this.handleEvent("network_points", ({
points
}) => {
console.log("---------------")
console.log(points);
console.log("------------------")
points = metric_config_obj.structure_metric_points(points)

network_metric_obj = metric_config_obj.update_network_live_visuals(network_metric_obj , points);

});

}
}


Hooks.explorer_charts = {

mounted() {
var explorer_metric_obj = metric_config_obj.create_explorer_live_visuals();

this.handleEvent("explorer_stats_points", ({
points
}) => {
console.log(points);
console.log("------------------")
points = metric_config_obj.structure_metric_points(points)
console.log("=================")
console.log(points);
console.log("=================")
explorer_metric_obj = metric_config_obj.update_explorer_live_visuals(explorer_metric_obj , points);
});
}
}



let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");

let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
params: { _csrf_token: csrfToken },
Expand Down
313 changes: 313 additions & 0 deletions assets/js/metric_config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
import * as echarts from 'echarts';

//adds 0 to the metric not recieved to avoid charts going blank
function structure_metric_points(latest_points){
var points_default_value ={
"archethic_archethic_election_validation_nodes_durations_duration" : 0.0,
"archethic_election_storage_nodes_duration" : 0.0,
"archethic_archethic_mining_pending_transaction_validation_duration_validation_duration" : 0.0,
"archethic_mining_proof_of_work_duration" : 0.0,
"archethic_mining_archethic_mining_full_transaction_validation_duration_duration" : 0.0,
"archethic_archethic_contract_parsing_duration_duration" : 0.0,
"archethic_mining_fetch_context_duration" : 0.0,
"archethic_p2p_send_message_duration" : 0.0,
"archethic_db_duration" : 0.0,
"archethic_self_repair_duration" : 0.0,
"vm_total_run_queue_lengths_io" : 0.0,
"vm_total_run_queue_lengths_cpu" : 0.0,
"vm_total_run_queue_lengths_total" : 0.0,
"vm_system_counts_process_count" : 0.0,
"vm_system_counts_port_count" : 0.0,
"vm_system_counts_atom_count" : 0.0,
"vm_memory_total" : 0.0,
"vm_memory_system" : 0.0,
"vm_memory_processes_used" : 0.0,
"vm_memory_processes" : 0.0,
"vm_memory_ets" : 0.0,
"vm_memory_code" : 0.0,
"vm_memory_binary" : 0.0,
"vm_memory_atom_used" : 0.0,
"vm_memory_atom" : 0.0
};
for (var key in latest_points)
points_default_value[key] = latest_points[key]
return points_default_value;
}

function get_visuals_dom(){
var metric_object , x_axis_data;
x_axis_data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
return metric_object =
{
seconds_after_loading_of_this_graph: 0,
x_axis_data: x_axis_data ,
archethic_mining_proof_of_work_duration: generateEchartObjects('PoW Duration(ms)','archethic_mining_proof_of_work_duration',x_axis_data),
archethic_mining_full_transaction_validation_duration: generateEchartObjects('Transaction Validation Duration(ms)','archethic_mining_full_transaction_validation_duration',x_axis_data),
tps : generate_echart_guage("Transactions Per Second(tps)", 'tps' ),
archethic_p2p_send_message_duration: generate_echart_guage("P2P Message duration(ms) (Supervised Multicast)", 'archethic_p2p_send_message_duration',),
};
}

function generateEchartObjects(heading , echartContainer , x_axis_data){
var y_axis_data =
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var chart = echarts.init(document.getElementById(echartContainer));

var option= {

grid: {
left: '10%',
right: '5%',
bottom: '5%',
top:"15%"
},
title: {
left: 'center',
text: ` ${heading}` ,
textStyle: { color: '#000000',fontSize:16 , fontFamily:
"BlinkMacSystemFont,-apple-system,Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,Helvetica, Arial, sans-serif" }
},

xAxis: {
type: 'category',
// boundaryGap: false,
data: x_axis_data,
show:false,
splitLine: {
show: true,
lineStyle:{color:"lightgrey",width:0.5}
}
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value',
axisLabel : { formatter: '{value}', textStyle: { color: '#000000',fontSize:16 , fontFamily:
"BlinkMacSystemFont,-apple-system,Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,Helvetica, Arial, sans-serif" } },
splitLine: {
show: true,
lineStyle:{color:"lightgrey",width:0.5}
},

},
series: [
{
type: 'line',
symbol: 'none',
triggerLineEvent:false,
itemStyle: {
color: 'rgb(0, 164, 219,1)'
},
silent: true,
data: y_axis_data,
}
]

};

option && chart.setOption(option);
window.addEventListener('resize', function(){
chart.resize();
});

return { chart: chart , ydata: y_axis_data};

}


function generate_echart_guage(heading , eguageContainer ){
var guage= echarts.init(document.getElementById(eguageContainer));

var guage_options ={

title: {
left: 'center',
text: `${heading}`,textStyle: { color: '#000000',fontSize:16 , fontFamily:
"BlinkMacSystemFont,-apple-system,Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,Helvetica, Arial, sans-serif" }
},
series: [
{

type: 'gauge',
center: ['50%', '74%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 0,
splitNumber: 5,
itemStyle: {
color: '#00a4db'
},
progress: {
show: true,
width: 30
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30
}
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#000000'
}
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: '#000000'
}
},
axisLabel: {
distance: -20,
color: '#000000 ',
fontSize: 16,
formatter: function (value) {
return exponent_formatter(value);
}
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 16,
fontWeight: 'bolder',
formatter: function (value) {
return exponent_formatter(value);
},
color: 'auto'
},
data: [
{
value: 0
}
]
} ]};

guage_options && guage.setOption(guage_options);
window.addEventListener('resize', function(){
guage.resize();
});

return {"guage": guage , "max": 0}
}

function exponent_formatter(new_point) {
if(new_point ==0) return 0
else if (new_point >100000 || new_point <0.0001 ) return parseFloat(new_point).toExponential(2);
else if (new_point <100000 && new_point >=100 ) return Math.floor(parseFloat(new_point));
else if(new_point <100 && new_point >= 0.0001) return parseFloat(new_point).toPrecision(2);
}
function update_chart_data(chart_obj,x_axis_data ,points, point_name){
var new_point = Math.random();
var new_data= chart_obj.ydata[chart_obj.ydata.length-1] + new_point;
// var new_point = points[point_name];
// console.log(new_point)
// var new_data = chart_obj.ydata[chart_obj.ydata.length-1] + new_point;
var shifted = chart_obj.ydata.shift();
chart_obj.ydata.push(new_data);
// console.log(chart_obj.ydata);
// console.log(x_axis_data);
chart_obj.chart.setOption({
xAxis: {
data: x_axis_data
},
series: [{
name: 'data',
data: chart_obj.ydata
}]
});
}

// function update_card_data(card_obj , points ,point_name ){
// card_obj.textContent = points[point_name]
// }

function update_guage_data(guage_obj , points , point_name )
{
var data =0 ,new_point =0;
// new_point = (Math.random()*100)+(Math.random()*.0010)+(Math.random()*0.001)+(Math.random()*.01)+(Math.random()*0.01);
new_point = points[point_name];
// console.log(new_point)
data = new_point;
if(data >= guage_obj.max ){
guage_obj.max = data
}
guage_obj.guage.setOption({series:
[
{ min: 0,
max:guage_obj.max ,splitNumber: 5,
data: [{ value: data }]}]});
}


function create_network_live_visuals(){
var metric_obj = get_visuals_dom();

return metric_obj;
}

function update_network_live_visuals(network_metric_obj , points){
// points = metric_config.structure_metric_points(points)
return update_live_visuals(network_metric_obj , points)
}

function update_live_visuals(metric_obj , points){
// console.log()
metric_obj.seconds_after_loading_of_this_graph+= 10;
var shifted = metric_obj.x_axis_data.shift();
metric_obj.x_axis_data.push(metric_obj.seconds_after_loading_of_this_graph);
update_chart_data(metric_obj.archethic_mining_proof_of_work_duration, metric_obj.x_axis_data ,points, "archethic_mining_proof_of_work_duration" );
update_chart_data( metric_obj.archethic_mining_full_transaction_validation_duration , metric_obj.x_axis_data ,points, "archethic_mining_full_transaction_validation_duration" );
update_guage_data( metric_obj.archethic_p2p_send_message_duration , points, "archethic_p2p_send_message_duration" );
update_guage_data( metric_obj.tps , points, "tps" );

return metric_obj;
}

function create_explorer_live_visuals(){
var obj , x_axis_data;
x_axis_data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
obj = {
seconds_after_loading_of_this_graph: 0,
x_axis_data: x_axis_data,
archethic_mining_full_transaction_validation_duration: generateEchartObjects('Transaction Validation duration (ms)','archethic_mining_full_transaction_validation_duration',x_axis_data)
};
return obj;
};

function update_explorer_live_visuals(explorer_metric_obj, points){
// points = metric_config.structure_metric_points(points)
//passing objects's variable through by reference
explorer_metric_obj.seconds_after_loading_of_this_graph+= 5;
var shifted = explorer_metric_obj.x_axis_data.shift();
explorer_metric_obj.x_axis_data.push(explorer_metric_obj.seconds_after_loading_of_this_graph);

update_chart_data(explorer_metric_obj.archethic_mining_full_transaction_validation_duration ,
explorer_metric_obj.x_axis_data ,points, "archethic_mining_full_transaction_validation_duration" );

return explorer_metric_obj;
};


export {
create_network_live_visuals ,
update_network_live_visuals ,
create_explorer_live_visuals ,
update_explorer_live_visuals,
structure_metric_points} ;
Loading

0 comments on commit 3d3e5da

Please sign in to comment.