CipherLabs
/
ethstats-server
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added last blocks miners chart

Browse Source
pull/5/head
cubedro 10 years ago
parent adb3f21a31
commit 8efec7d029
5 changed files with 235 additions and 174 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 84
      public/css/style.css
  2. 41
      public/js/controllers.js
  3. 21
      public/js/filters.js
  4. 1
      public/js/script.js
  5. 262
      views/index.jade

84
public/css/style.css
Unescape 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;
} }
.big-info { .bg-warning {
padding-bottom: 15px; background: #FFD162;
padding-top: 15px; }
.bg-danger {
background: #F74B4B;
}
.container-fluid {
padding-left: 30px;
padding-right: 30px;
}
.stat-holder {
background: #090909; background: #090909;
border: 1px solid rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05);
} }
.stats-boxes .big-info { .big-info {
margin-right: -30px; padding-bottom: 15px;
padding-top: 15px;
} }
.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
Unescape 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);
}).stats.block.received;
$scope.lastBlocksTime = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number); return parseInt(node.stats.block.number);
}).stats.blockTimes; }).stats;
jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
$scope.difficultyChange = _.max($scope.nodes, function(node) { $scope.lastBlock = $scope.bestStats.block.received;
return parseInt(node.stats.block.number); $scope.lastBlocksTime = $scope.bestStats.blockTimes;
}).stats.difficulty; $scope.difficultyChange = $scope.bestStats.difficulty;
$scope.transactionDensity = $scope.bestStats.txDensity;
$scope.gasSpending = $scope.bestStats.gasSpending;
$scope.miners = $scope.bestStats.miners;
$scope.difficultyChange.pop(); $scope.getNumber = function(num) {
return new Array(num);
}
jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
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
Unescape 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
Unescape 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',

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

Write Preview
Loading…
Cancel
Save