grassrootseconomics/ethstats-server
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added last blocks miners chart

Browse Source
This commit is contained in:
cubedro 2015-04-06 02:28:42 +03:00
parent adb3f21a31
commit 8efec7d029
5 changed files with 243 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/css/style.css
View File

@ -10,19 +10,35 @@ body {
-moz-font-smoothing: antialiased; -moz-font-smoothing: antialiased;
} }
.stat-holder { .bg-success {
background: #7bcc3a;
}
.bg-info {
background: #10a0de;
}
.bg-warning {
background: #FFD162;
}
.bg-danger {
background: #F74B4B;
}
.container-fluid {
padding-left: 30px;
padding-right: 30px;
}
.stat-holder {
background: #090909;
border: 1px solid rgba(255,255,255,0.05);
} }
.big-info { .big-info {
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 15px; padding-top: 15px;
background: #090909;
border: 1px solid rgba(255,255,255,0.05);
}
.stats-boxes .big-info {
margin-right: -30px;
} }
.big-info .icon-full-width i { .big-info .icon-full-width i {
@ -32,27 +48,22 @@ body {
font-size: 70px; font-size: 70px;
line-height: 70px; line-height: 70px;
margin-right: 15px; margin-right: 15px;
margin-left: -15px;
} }
.big-info span { .big-info span {
opacity: 0.7; opacity: 0.7;
} }
.big-info span.small-title { .big-info span.small-title,
.big-info div.small-title-miner {
display: block; display: block;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: #aaa !important; color: #aaa;
}
.big-info.chart {
padding-left: 14px;
padding-right: 14px;
-webkit-box-sizing: border-box
box-sizing: border-box;
} }
.big-info span.big-details { .big-info span.big-details {
@ -67,6 +78,45 @@ body {
padding-top: 15px; padding-top: 15px;
} }
.big-info.chart {
height: 120px;
-webkit-box-sizing: border-box
box-sizing: border-box;
}
.big-info.chart.double-chart {
height: 242px;
}
.blocks-holder {
padding-top: 5px;
}
.blocks-holder div.small-title-miner {
font-size: 12px;
font-weight: normal;
letter-spacing: 0px;
text-transform: none;
white-space: nowrap;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
}
.blocks-holder .block-count {
float: right;
line-height: 18px;
color: #aaa;
}
.blocks-holder .block {
width: 6px;
height: 6px;
margin: 2px 1px 6px 1px;
float: left;
-webkit-border-radius: 1px;
border-radius: 1px;
}
.jqstooltip { .jqstooltip {
} }
@ -195,6 +245,6 @@ table td {
}*/ }*/
} }
.ng-cloak { [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important; display: none !important;
} }

41
public/js/controllers.js
View File

@ -14,11 +14,13 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
$scope.lastDifficulty = 0; $scope.lastDifficulty = 0;
$scope.upTimeTotal = 0; $scope.upTimeTotal = 0;
$scope.avgBlockTime = 0; $scope.avgBlockTime = 0;
$scope.bestStats = {};
$scope.lastBlocksTime = []; $scope.lastBlocksTime = [];
$scope.difficultyChange = []; $scope.difficultyChange = [];
$scope.transactionDensity = []; $scope.transactionDensity = [];
$scope.gasSpending = []; $scope.gasSpending = [];
$scope.miners = [];
$scope.nodes = []; $scope.nodes = [];
$scope.map = []; $scope.map = [];
@ -131,39 +133,24 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
if(bestBlock > $scope.bestBlock) if(bestBlock > $scope.bestBlock)
{ {
$scope.bestBlock = bestBlock; $scope.bestBlock = bestBlock;
$scope.bestStats = _.max($scope.nodes, function(node) {
$scope.lastBlock = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number); return parseInt(node.stats.block.number);
}).stats.block.received; }).stats;
$scope.lastBlocksTime = _.max($scope.nodes, function(node) { $scope.lastBlock = $scope.bestStats.block.received;
return parseInt(node.stats.block.number); $scope.lastBlocksTime = $scope.bestStats.blockTimes;
}).stats.blockTimes; $scope.difficultyChange = $scope.bestStats.difficulty;
$scope.transactionDensity = $scope.bestStats.txDensity;
$scope.gasSpending = $scope.bestStats.gasSpending;
$scope.miners = $scope.bestStats.miners;
$scope.getNumber = function(num) {
return new Array(num);
}
jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'}); jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
$scope.difficultyChange = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.difficulty;
$scope.difficultyChange.pop();
jQuery('.spark-difficulty').sparkline($scope.difficultyChange.reverse(), {type: 'bar'}); jQuery('.spark-difficulty').sparkline($scope.difficultyChange.reverse(), {type: 'bar'});
$scope.transactionDensity = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.txDensity;
$scope.transactionDensity.pop();
jQuery('.spark-transactions').sparkline($scope.transactionDensity.reverse(), {type: 'bar'}); jQuery('.spark-transactions').sparkline($scope.transactionDensity.reverse(), {type: 'bar'});
$scope.gasSpending = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.gasSpending;
$scope.gasSpending.pop();
jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'}); jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
} }

21
public/js/filters.js
View File

@ -189,7 +189,26 @@ angular.module('netStatsApp.filters', [])
.filter('bubbleClass', function() { .filter('bubbleClass', function() {
return function(node, bestBlock) { return function(node, bestBlock) {
return mainClass(node, bestBlock).replace('text-', ''); return mainClass(node, bestBlock).replace('text-', '');
} };
})
.filter('minerNameFilter', function() {
return function(name) {
return name.replace('0x', '');
};
})
.filter('minerBlocksClass', function() {
return function(blocks) {
if(blocks <= 6)
return 'bg-success';
if(blocks <= 12)
return 'bg-info';
if(blocks <= 18)
return 'bg-warning';
return 'bg-danger';
};
}); });
function mainClass(node, bestBlock) function mainClass(node, bestBlock)

1
public/js/script.js
View File

@ -10,7 +10,6 @@
$.fn.sparkline.defaults.bar.barSpacing = 2; $.fn.sparkline.defaults.bar.barSpacing = 2;
$.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip'; $.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip';
$.fn.sparkline.defaults.bar.tooltipOffsetX = 0; $.fn.sparkline.defaults.bar.tooltipOffsetX = 0;
// $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner"><span style="color: {{color}}">&#9679;</span><br>{{prefix}}{{value}}{{suffix}}</div>');
$.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">{{prefix}}{{value}}{{suffix}}</div>'); $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">{{prefix}}{{value}}{{suffix}}</div>');
$.fn.sparkline.defaults.bar.colorMap = $.range_map({ $.fn.sparkline.defaults.bar.colorMap = $.range_map({
'1:12': '#7bcc3a', '1:12': '#7bcc3a',

276
views/index.jade
View File

@ -3,142 +3,148 @@ extends layout
block content block content
div.container-fluid(ng-controller='StatsCtrl') div.container-fluid(ng-controller='StatsCtrl')
div.row(ng-cloak) div.row(ng-cloak)
div.col-xs-12 div.col-xs-2.stat-holder
//- div.col-sm-12 div.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
//- h1= title div.pull-left.icon-full-width
//- p Welcome to #{title} i.icon-node
div.pull-left
//- div.clearfix span.small-title active nodes
span.big-details {{nodesActive}}/{{nodesTotal}}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}") div.col-xs-2.stat-holder
div.pull-left.icon-full-width div.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
i.icon-node div.pull-left.icon-full-width
div.pull-left i.icon-bulb
span.small-title active nodes div.pull-left
span.big-details {{nodesActive}}/{{nodesTotal}} span.small-title up-time
div.clearfix span.big-details {{ upTimeTotal | upTimeFilter }}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}") div.col-xs-2.stat-holder
div.pull-left.icon-full-width div.big-info.difficulty.text-info
i.icon-bulb div.pull-left.icon-full-width
div.pull-left i.icon-difficulty
span.small-title up-time div.pull-left
span.big-details {{ upTimeTotal | upTimeFilter }} span.small-title difficulty
div.clearfix span.big-details {{ lastDifficulty }}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.difficulty.text-info div.col-xs-2.stat-holder
div.pull-left.icon-full-width div.big-info.bestblock.text-info
i.icon-difficulty div.pull-left.icon-full-width
div.pull-left i.icon-block
span.small-title difficulty div.pull-left
span.big-details {{ lastDifficulty }} span.small-title best block
div.clearfix span.big-details {{"#" + bestBlock}}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.bestblock.text-info div.col-xs-2.stat-holder
div.pull-left.icon-full-width div.big-info.blocktime(class="{{ lastBlock | timeClass }}")
i.icon-block div.pull-left.icon-full-width
div.pull-left i.icon-time
span.small-title best block div.pull-left
span.big-details {{"#" + bestBlock}} span.small-title last block
div.clearfix span.big-details {{ lastBlock | blockTimeFilter }}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.blocktime(class="{{ lastBlock | timeClass }}") div.col-xs-2.stat-holder
div.pull-left.icon-full-width div.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
i.icon-time div.pull-left.icon-full-width
div.pull-left i.icon-gas
span.small-title last block div.pull-left
span.big-details {{ lastBlock | blockTimeFilter }} span.small-title avg block time
div.clearfix span.big-details {{ avgBlockTime | avgTimeFilter }}
div.col-xs-2.stat-holder div.clearfix
div.row.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
div.pull-left.icon-full-width
i.icon-gas
div.pull-left
span.small-title avg block time
span.big-details {{ avgBlockTime | avgTimeFilter }}
div.clearfix
div.clearfix
div.col-xs-12
div.row
div.col-xs-4.stats-boxes(style="padding-top: 30px;")
div.row
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title block time
span.big-details.spark-blocktimes
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title difficulty
span.big-details.spark-difficulty
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title transactions
span.big-details.spark-transactions
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title gas spending
span.big-details.spark-gasspending
div.col-xs-4
div.col-xs-4
div.col-xs-12
nodemap#mapHolder(data="map")
div.clearfix div.clearfix
div.col-xs-12 div.row
//- h1 Nodes in detail div.col-xs-4.stats-boxes(style="padding-top: 30px;")
div.row
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title block time
span.big-details.spark-blocktimes
table.table.table-striped div.col-xs-6.stat-holder
thead div.big-info.chart
tr.text-info span.small-title difficulty
th span.big-details.spark-difficulty
i.icon-node(data-toggle="tooltip", data-placement="top", title="Node")
th.th-nodename div.col-xs-6.stat-holder
i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type") div.big-info.chart
th.th-latency span.small-title transactions
i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency") span.big-details.spark-transactions
th
i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining") div.col-xs-6.stat-holder
th div.big-info.chart
i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers") span.small-title gas spending
th span.big-details.spark-gasspending
i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions")
th div.col-xs-2.stats-boxes(style="padding-top: 30px;")
i.icon-block(data-toggle="tooltip", data-placement="top", title="Last node block") div.row
th.th-blockhash &nbsp; div.col-xs-12.stat-holder
th div.big-info.chart.double-chart
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions") span.small-title last blocks miners
th.th-blocktime div.blocks-holder(ng-repeat='miner in miners', data-toggle="tooltip", data-placement="right", title="{{miner.blocks}}")
i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time") div.block-count ({{miner.blocks}})
th div.small-title-miner {{miner.miner | minerNameFilter}}
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time") div.block(ng-repeat="i in getNumber(miner.blocks) track by $index", class="{{miner.blocks | minerBlocksClass}}")
th div.clearfix
i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time")
tbody div.col-xs-2.stats-boxes(style="padding-top: 30px;")
tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}") div.row
td(rel="{{node.id}}") //- div.col-xs-12.stat-holder
span.small(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.info.name}} //- div.big-info.chart
span.small &nbsp({{node.info.ip}}) //- span.small-title miners
td //- span.big-details test
div.small(ng-bind-html="node.info.node | nodeVersion")
//- div.small {{node.info.os}}, {{node.info.os_v}} div.col-xs-4
td.small(class="{{ node.stats | latencyClass }}") {{node.stats | latencyFilter}} div.col-xs-12
td(class="{{ node.stats.mining | miningClass }}") nodemap#mapHolder(data="map")
i.small(class="{{ node.stats.mining | miningIconClass }}")
td(class="{{ node.stats.peers | peerClass }}", style="padding-left: 11px;") {{node.stats.peers}} div.clearfix
td(style="padding-left: 15px;") {{node.stats.pending}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}") {{'#' + node.stats.block.number}} div.row
td(class="{{ node.stats.block.number | blockClass : bestBlock }}") table.table.table-striped
span.small {{node.stats.block.hash}} thead
td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}} tr.text-info
td(class="{{ node.stats.block.timestamp | timeClass }}") {{node.stats.block.received | blockTimeFilter }} th
td(class="{{ node.stats.block.propagation | propagationTimeClass }}") {{node.stats.block.propagation | blockPropagationFilter}} i.icon-node(data-toggle="tooltip", data-placement="top", title="Node")
td(class="{{ node.stats.uptime | upTimeClass }}") {{ node.stats.uptime | upTimeFilter }} th.th-nodename
i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type")
th.th-latency
i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency")
th
i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining")
th
i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers")
th
i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions")
th
i.icon-block(data-toggle="tooltip", data-placement="top", title="Last node block")
th.th-blockhash &nbsp;
th
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions")
th.th-blocktime
i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time")
th
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time")
th
i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time")
tbody
tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}")
td(rel="{{node.id}}")
span.small(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.info.name}}
span.small &nbsp({{node.info.ip}})
td
div.small(ng-bind-html="node.info.node | nodeVersion")
//- div.small {{node.info.os}}, {{node.info.os_v}}
td.small(class="{{ node.stats | latencyClass }}") {{node.stats | latencyFilter}}
td(class="{{ node.stats.mining | miningClass }}")
i.small(class="{{ node.stats.mining | miningIconClass }}")
td(class="{{ node.stats.peers | peerClass }}", style="padding-left: 11px;") {{node.stats.peers}}
td(style="padding-left: 15px;") {{node.stats.pending}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}") {{'#' + node.stats.block.number}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}")
span.small {{node.stats.block.hash}}
td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}}
td(class="{{ node.stats.block.timestamp | timeClass }}") {{node.stats.block.received | blockTimeFilter }}
td(class="{{ node.stats.block.propagation | propagationTimeClass }}") {{node.stats.block.propagation | blockPropagationFilter}}
td(class="{{ node.stats.uptime | upTimeClass }}") {{ node.stats.uptime | upTimeFilter }}