From 8efec7d0291af6554d7e055138cc17acd3a9346e Mon Sep 17 00:00:00 2001 From: cubedro Date: Mon, 6 Apr 2015 02:28:42 +0300 Subject: [PATCH] added last blocks miners chart --- public/css/style.css | 86 +++++++++--- public/js/controllers.js | 41 ++---- public/js/filters.js | 21 ++- public/js/script.js | 1 - views/index.jade | 276 ++++++++++++++++++++------------------- 5 files changed, 243 insertions(+), 182 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 5a419ad..3099896 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -10,19 +10,35 @@ body { -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 { padding-bottom: 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 { @@ -32,27 +48,22 @@ body { font-size: 70px; line-height: 70px; margin-right: 15px; + margin-left: -15px; } .big-info span { opacity: 0.7; } -.big-info span.small-title { +.big-info span.small-title, +.big-info div.small-title-miner { display: block; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; - color: #aaa !important; -} - -.big-info.chart { - padding-left: 14px; - padding-right: 14px; - -webkit-box-sizing: border-box - box-sizing: border-box; + color: #aaa; } .big-info span.big-details { @@ -67,6 +78,45 @@ body { 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 { } @@ -195,6 +245,6 @@ table td { }*/ } -.ng-cloak { - display: none !important; +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { + display: none !important; } diff --git a/public/js/controllers.js b/public/js/controllers.js index 6e9f731..1e8d742 100644 --- a/public/js/controllers.js +++ b/public/js/controllers.js @@ -14,11 +14,13 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { $scope.lastDifficulty = 0; $scope.upTimeTotal = 0; $scope.avgBlockTime = 0; + $scope.bestStats = {}; $scope.lastBlocksTime = []; $scope.difficultyChange = []; $scope.transactionDensity = []; $scope.gasSpending = []; + $scope.miners = []; $scope.nodes = []; $scope.map = []; @@ -131,39 +133,24 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { if(bestBlock > $scope.bestBlock) { $scope.bestBlock = bestBlock; - - $scope.lastBlock = _.max($scope.nodes, function(node) { + $scope.bestStats = _.max($scope.nodes, function(node) { return parseInt(node.stats.block.number); - }).stats.block.received; + }).stats; - $scope.lastBlocksTime = _.max($scope.nodes, function(node) { - return parseInt(node.stats.block.number); - }).stats.blockTimes; + $scope.lastBlock = $scope.bestStats.block.received; + $scope.lastBlocksTime = $scope.bestStats.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'}); - - $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'}); - - $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'}); - - $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'}); } diff --git a/public/js/filters.js b/public/js/filters.js index db436c7..3147cb5 100644 --- a/public/js/filters.js +++ b/public/js/filters.js @@ -189,7 +189,26 @@ angular.module('netStatsApp.filters', []) .filter('bubbleClass', function() { return function(node, bestBlock) { 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) diff --git a/public/js/script.js b/public/js/script.js index 982088d..90f429f 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -10,7 +10,6 @@ $.fn.sparkline.defaults.bar.barSpacing = 2; $.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip'; $.fn.sparkline.defaults.bar.tooltipOffsetX = 0; - // $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('
●
{{prefix}}{{value}}{{suffix}}
'); $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('
{{prefix}}{{value}}{{suffix}}
'); $.fn.sparkline.defaults.bar.colorMap = $.range_map({ '1:12': '#7bcc3a', diff --git a/views/index.jade b/views/index.jade index 762dfde..19a6148 100644 --- a/views/index.jade +++ b/views/index.jade @@ -3,142 +3,148 @@ extends layout block content div.container-fluid(ng-controller='StatsCtrl') div.row(ng-cloak) - div.col-xs-12 - //- div.col-sm-12 - //- h1= title - //- p Welcome to #{title} - - //- 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.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.col-xs-2.stat-holder + div.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.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.col-xs-12 - //- h1 Nodes in detail + 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 - table.table.table-striped - thead - tr.text-info - th - i.icon-node(data-toggle="tooltip", data-placement="top", title="Node") - 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   - 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  ({{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 }} + 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-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-12 + nodemap#mapHolder(data="map") + + div.clearfix + + div.row + table.table.table-striped + thead + tr.text-info + th + i.icon-node(data-toggle="tooltip", data-placement="top", title="Node") + 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   + 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  ({{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 }}