diff --git a/public/css/style.css b/public/css/style.css index 76449a8..5a419ad 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,10 +1,19 @@ +html { + width: 100%; +} + body { + width: 100%; min-width: 1900px; font-smooth: auto; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } +.stat-holder { + +} + .big-info { padding-bottom: 15px; padding-top: 15px; @@ -12,6 +21,10 @@ body { border: 1px solid rgba(255,255,255,0.05); } +.stats-boxes .big-info { + margin-right: -30px; +} + .big-info .icon-full-width i { display: block; width: 85px; @@ -117,10 +130,30 @@ table td i { left: 0; } +table td { + white-space: nowrap !important; +} +.table>tbody>tr>td, +.table>thead>tr>th { + padding: 5px; +} + +.th-nodename { + width: 400px; +} + .th-latency { width: 100px; } +.th-blockhash { + width: 460px; +} + +.th-blocktime { + width: 110px; +} + @media only screen and (max-width: 639px) { /*.big-info { padding-bottom: 15px; diff --git a/public/js/controllers.js b/public/js/controllers.js index fb3110d..6e9f731 100644 --- a/public/js/controllers.js +++ b/public/js/controllers.js @@ -74,16 +74,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { break; case "update": - var index = findIndex({id: data.id}); - - // if(data.stats.block.number > $scope.nodes[index].stats.block.number) { - // data.stats.block.firstarrived = (data.stats.block.number > $scope.bestBlock ? data.stats.block.received : $scope.lastBlock); - // } else { - // data.stats.block.firstarrived = $scope.nodes[index].stats.block.firstarrived; - // } - - $scope.nodes[index].stats = data.stats; - + $scope.nodes[findIndex({id: data.id})].stats = data.stats; break; case "info": @@ -155,18 +146,24 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { 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/views/index.jade b/views/index.jade index d23803b..762dfde 100644 --- a/views/index.jade +++ b/views/index.jade @@ -63,28 +63,29 @@ block content div.col-xs-12 div.row - div.col-xs-8(style="padding-top: 30px;") - div.col-xs-3.stat-holder - div.row.big-info.chart - span.small-title block time - span.big-details.spark-blocktimes + 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-3.stat-holder - div.row.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 difficulty + span.big-details.spark-difficulty - div.col-xs-3.stat-holder - div.row.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 transactions + span.big-details.spark-transactions - div.col-xs-3.stat-holder - div.row.big-info.chart - span.small-title gas spending - span.big-details.spark-gasspending + div.col-xs-6.stat-holder + div.big-info.chart + span.small-title gas spending + span.big-details.spark-gasspending - //- div.clearfix + div.col-xs-4 div.col-xs-4 div.col-xs-12 @@ -100,7 +101,7 @@ block content tr.text-info th i.icon-node(data-toggle="tooltip", data-placement="top", title="Node") - th + 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") @@ -112,10 +113,10 @@ block content 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.hidden-sm.hidden-xs   + th.th-blockhash   th i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions") - th + 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") @@ -124,7 +125,7 @@ block content tbody tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}") td(rel="{{node.id}}") - span(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.info.name}} + 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") @@ -132,13 +133,12 @@ block content 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: 18px;") {{node.stats.peers}} - td(style="padding-left: 18px;") {{node.stats.pending}} + 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 }}").hidden-sm.hidden-xs - span.small {{node.stats.block.hash | hashFilter}} - //- div.small Difficulty: {{node.stats.block.difficulty | gasFilter}} | Gas used: {{node.stats.block.gasUsed | gasFilter}} | Min gas price: {{node.stats.block.minGasPrice | gasFilter}} | Gas limit: {{node.stats.block.gasLimit | gasFilter}} - td(style="padding-left: 18px;") {{node.stats.block.transactions.length || 0}} + 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 }}