diff --git a/src/css/style.css b/src/css/style.css index 54e4ff1..47e6c16 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -65,27 +65,27 @@ table td { .bg-success, .text-success .propagationBox { - background: #7bcc3a; + background: #50fa7b; } .bg-info, .text-info .propagationBox { - background: #10a0de; + background: #8be9fd; } .bg-warning, .text-warning .propagationBox { - background: #FFD162; + background: #f1fa8c; } .bg-orange, .text-orange .propagationBox { - background: #ff8a00; + background: #ffb86c; } .bg-danger, .text-danger .propagationBox { - background: #F74B4B; + background: #ff5555; } .text-gray .propagationBox { @@ -106,7 +106,7 @@ table td { } .text-orange { - color: #ff8a00; + color: #ffb86c; } .container-fluid { diff --git a/src/css/style.css.orig b/src/css/style.css.orig new file mode 100644 index 0000000..aec09de --- /dev/null +++ b/src/css/style.css.orig @@ -0,0 +1,561 @@ +html { + width: 100%; +} + +body { + width: 100%; + font-smooth: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 200; + src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(../fonts/SourceSansPro-ExtraLight.woff2) format('woff2'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/SourceSansPro-Light.woff2) format('woff2'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/SourceSansPro-SemiBold.woff2) format('woff2'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/SourceSansPro-Bold.woff2) format('woff2'); +} + +table td { + font-size: 14px; + white-space: nowrap !important; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +.propagationBox { + position: relative; + width: 8px; + height: 8px; + float: left; + top: 5px; + margin-right: 5px; + -webkit-border-radius: 2px; + border-radius: 2px; +} + +.bg-success, +.text-success .propagationBox { + background: #50fa7b; +} + +.bg-info, +.text-info .propagationBox { + background: #8be9fd; +} + +.bg-highlight, +.text-highlight .propagationBox { + background: #bd93f9; +} + +.bg-warning, +.text-warning .propagationBox { + background: #f1fa8c; +} + +.bg-orange, +.text-orange .propagationBox { + background: #ffb86c; +} + +.bg-danger, +.text-danger .propagationBox { + background: #ff5555; +} + +.text-gray .propagationBox { + background: none !important; + border: 1px solid #f8f8f2; +} + +.bg-success, +.bg-info, +.bg-warning, +.bg-orange, +.bg-danger { + color: #000; +} + +.text-gray { + color: #f8f8f2 !important; +} + +.text-orange { + color: #ffb86c; +} + +.container-fluid { + padding-left: 30px; + padding-right: 30px; +} + +.stat-holder { + background: #090909; + border: 1px solid rgba(255,255,255,0.05); +} + +.big-info { + padding-top: 15px; + padding-bottom: 15px; +} + +.big-info .icon-full-width i { + display: block; + width: 85px; + height: 70px; + font-size: 70px; + line-height: 70px; + margin-right: 15px; + margin-left: -15px; +} + +.big-info span.small-title, +.big-info div.small-title-miner { + display: block; +} + +span.small-title, +div.small-title-miner { + font-weight: 700; + font-size: 14px; + line-height: 20px; + letter-spacing: 1px; + text-transform: uppercase; + color: #aaa; +} + +span.small-title span.small { + font-size: 11px; + font-weight: 600; + line-height: 16px; + letter-spacing: 0px; + color: #666; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +.big-info .big-details { + display: block; + font-weight: 200; + font-size: 50px; + line-height: 55px; + letter-spacing: -4px; + word-spacing: nowrap !important; +} + +.big-info .big-details .small-hash { + font-size: 87%; +} + +.big-info .big-details-holder { + position: absolute; + top: 15px; + left: 99px; +} + +.big-info.chart { + padding-top: 12px; +} + +.big-info.chart .big-details { + display: table; + top: 40px; + margin: 0 auto; +} + +.big-info.chart { + height: 120px; + -webkit-box-sizing: border-box + box-sizing: border-box; +} + +.big-info.chart.double-chart { + height: 242px; +} + +.blocks-holder { + width: 288px; + padding-top: 6px; + margin-left: -2px; + display: table; + margin: 0 auto; +} + +.blocks-holder { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +.blocks-holder div.small-title-miner { + font-family: "Lucida Console", "Courier New", Courier, monospace; + font-size: 11px; + letter-spacing: -0.1px; + text-transform: none; + white-space: nowrap; + color: #f8f8f2; +} + +.blocks-holder .block-count { + font-family: 'Lucida Console', "Courier New", Courier, monospace; + font-weight: bold; + font-size: 10px; + padding-top: 3px; + float: right; +} + +.blocks-holder .block { + width: 6px; + height: 6px; + margin: 2px 1px 6px 0px; + float: left; + -webkit-border-radius: 1px; + border-radius: 1px; + opacity: .8; +} + +.blocks-holder .block:first-child { + margin-left: 0px; +} + +.blocks-holder .block:last-child { + margin-right: 0px; +} + +.second-row .box { + height: 40px; + line-height: 24px !important; + padding: 5px 15px; +} + +.second-row .box i, +.big-info.chart i { + position: relative; + top: 2px; + left: -3px; + font-size: 24px; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + margin-right: 7px; + float: left; +} + +.big-info.chart i { + font-size: 24px; + top: -2px; +} + +.small-value { + font-weight: 300; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + float: right; +} + +.second-row .box .small-value { + float: right; +} +.big-info .small-value { + position: absolute; + right: 14px; + top: 10px; +} + +table i { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +table th, +table td { + border-color: #222 !important; +} + +table td { + line-height: 18px !important; +} + +table th { + color: #888; +} + +table th i { + line-height: 1em; + font-size: 20px; +} +table td i { + position: relative; + top: 2px; + left: 2px; +} +table td.peerPropagationChart { + padding: 4px 5px !important; +} +nodepropagchart { + display: inline-block; + width: 107px; + height: 20px; + vertical-align: top; +} + +.table>tbody>tr>td, +.table>thead>tr>th { + padding: 5px; +} + +.th-nodecheck, +.td-nodecheck { + width: 38px; + text-align: center; +} + +.td-nodecheck i { + left: 0px; +} + +.th-nodename { + width: 300px; + text-overflow: ellipsis; +} + +.th-nodetype { + width: 220px; +} + +.th-latency { + width: 100px; +} + +.th-blockhash { + width: 150px; +} + +.th-blocktime { + width: 110px; +} + +.th-peerPropagationTime { + width: 120px; +} + +.th-peerPropagationChart { + width: 140px; +} + +.nodeInfo .tooltip .tooltip-inner { + max-width: 400px; + text-align: left; + font-size: 12px; +} + +.map-holder { + padding: 0; +} + +#mapHolder { + position: relative; + display: block; + width: 100%; + height: 242px; + overflow: hidden; +} + +#mapHolder > svg { + right: 0; + bottom: 0; + width: 100%; + height: 100%; + display: inline-block; + position: absolute; + top: 0; + left: 0; +} + +.jqsfield { + position: relative; + padding: 5px 0; + width: auto; + left: -50%; + word-wrap: wrap; + text-align: center; +} + +.d3-tip { + padding: 5px 0; +} + +.jqsfield .tooltip-arrow { + position: absolute; + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #fff; +} + +.datamaps-hoverover .tooltip-arrow, +.d3-tip .tooltip-arrow { + position: absolute; + top: -5px; + left: 0px; + margin-left: -5px; + border-width: 0px 5px 5px 5px; + border-bottom-color: #fff; +} + +.d3-tip .tooltip-arrow { + top: 0px; + left: 50%; +} + +.hoverinfo { + position: relative; + width: auto; + left: -50%; + text-align: center; + color: #333; + border: none !important; + box-shadow: none !important; + border-radius: 3px !important; + padding: 5px !important; + line-height: 14px !important; +} + +.hoverinfo .propagationBox { + top: 3px; +} + +svg { + overflow: visible !important; +} + +svg .bars .bar { + opacity: 1; + shape-rendering: auto; +} + +svg .bars .handle { + opacity: 0; +} + +svg .bars .highlight { + opacity: 0; +} + +svg .bars g:hover .highlight { + opacity: 1; +} + +svg .line { + fill: none; + stroke: #ff0000; + stroke-width: 1.3px; + stroke-linejoin: round; + stroke-linecap: round; + shape-rendering: geometric-precision; + /*-webkit-svg-shadow: 0 0 7px #fff;*/ +} + +svg .bar text { + text-anchor: end; + font-size: 12px; +} + +svg .axis path, +svg .axis line { + fill: none; + stroke: rgba(255,255,255,0.15); + shape-rendering: crispEdges; +} +svg .axis text { + fill: #f8f8f2; + font-size: 10px; + letter-spacing: 0px; + font-family: "Source Sans Pro"; + font-weight: 700; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +svg .y.axis .tick:first-child text { + opacity: 0; +} +<<<<<<< HEAD +======= + +@media (max-width: 768px) { + .container-fluid { + padding-left: 5px; + padding-right: 5px; + } + + .big-info .icon-full-width i { + width: 75px; + height: 67px; + font-size: 67px; + margin-left: -25px; + } + + .big-info .big-details-holder { + left: 75px; + } + + .big-info .big-details { + font-size: 35px; + } + + .blocks-holder div.small-title-miner { + font-family: inherit; + font-size: 11px; + letter-spacing: -.5px; + } + + .blocks-holder { + width: 100%; + } + + .big-info.chart i, .second-row .box i { + font-size: 18px; + margin-right: 0px; + } + + .second-row .box { + height: 100%; /* BUG XXX */ + } +} + + +@media (max-width: 600px) { + .blocks-holder div.small-title-miner { + font-size: 10px; + } +} +>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad diff --git a/src/views/index.jade.orig b/src/views/index.jade.orig new file mode 100644 index 0000000..3f297c7 --- /dev/null +++ b/src/views/index.jade.orig @@ -0,0 +1,300 @@ +//- index.jade +extends ./layout.jade + +block content + div.container-fluid(ng-controller='StatsCtrl') + div.row(ng-cloak) + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder + div.big-info.bestblock.text-info + div.pull-left.icon-full-width + i.icon-block + div.big-details-holder + span.small-title best block + span.big-details {{'#'}}{{ bestBlock | number}} + div.clearfix +<<<<<<< HEAD + div.col-xs-2.stat-holder +======= + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder + div.big-info.uncleCount.text-info + div.pull-left.icon-full-width + i.icon-uncle + div.big-details-holder + span.small-title uncles  + span.small.hidden-xs (current / last 50) + span.big-details {{ bestStats.block.uncles.length }}/{{ uncleCount }} + div.clearfix + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder +>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad + div.big-info.blocktime(class="{{ lastBlock | timeClass : true }}") + div.pull-left.icon-full-width + i.icon-time + div.big-details-holder + span.small-title last block + span.big-details {{ lastBlock | blockTimeFilter }} + //- span.big-details(time-ago="lastBlock") + div.clearfix + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder + div.big-info.avgblocktime(class="{{ avgBlockTime | avgTimeClass }}") + div.pull-left.icon-full-width + i.icon-gas + div.big-details-holder + span.small-title avg block time + span.big-details {{ avgBlockTime | avgTimeFilter }} + div.clearfix +<<<<<<< HEAD + div.col-xs-2.stat-holder + div.big-info.gasprice.text-info +======= + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder + div.big-info.difficulty.text-orange +>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad + div.pull-left.icon-full-width + i.icon-gasprice + div.big-details-holder +<<<<<<< HEAD + span.small-title gas price + span.big-details {{ bestStats.gasPrice.toString() | gasPriceFilter }} + div.clearfix + div.col-xs-2.stat-holder + div.big-info.gasprice.text-highlight +======= + span.small-title + span.hidden-xs avg  + | network hash + span.hidden-xs rate + span.big-details(ng-bind-html="avgHashrate | networkHashrateFilter") + div.clearfix + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder + div.big-info.difficulty.text-danger +>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad + div.pull-left.icon-full-width + i.icon-difficulty + div.big-details-holder + span.small-title gas limit + span.big-details {{ bestStats.block.gasLimit }} gas + div.clearfix + div.col-xs-2.stat-holder + div.big-info.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}") + div.pull-left.icon-full-width + i.icon-node + div.big-details-holder + span.small-title active nodes + span.big-details {{nodesActive}}/{{nodesTotal}} + div.clearfix + div.clearfix + + div.row(ng-cloak) +<<<<<<< HEAD + div.col-xs-2.stat-holder + div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}") + i.icon-time + span.small-title block time + sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s") + div.clearfix + div.col-xs-2.stat-holder.xpull-right + div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}") + i.icon-gas + span.small-title block propagation + histogram.big-details.d3-blockpropagation(data="blockPropagationChart") + div.clearfix + div.col-xs-2.stat-holder + div.big-info.chart.text-info + i.icon-uncle + span.small-title transactions + sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}") + div.clearfix + div.col-xs-2.stat-holder + div.big-info.chart.text-info + i.icon-gasprice + span.small-title gas spending + sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}") + div.clearfix + div.col-xs-2.stat-holder + div.big-info.chart.text-info + i.icon-difficulty + span.small-title gas limit + sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}") + div.clearfix + div.col-xs-2.stat-holder.xpull-right + div.big-info.chart.xdouble-chart.text-danger + //- i.icon-hashrate + span.small-title last blocks miners + div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}") + div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}} + div.small-title-miner {{miner.miner | minerNameFilter : miner.name}} + minerblock(blocks="{{miner.blocks}}") + div.clearfix + div.clearfix + +======= + div.col-xs-12.stats-boxes(style="padding-top: 0px;") + div.row.second-row + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + div.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}") + i.icon-node + span.small-title active nodes + span.small-value {{nodesActive}}/{{nodesTotal}} + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + div.gasprice.text-info + i.icon-gasprice + span.small-title gas price + span.small-value {{ bestStats.gasPrice.toString() | gasPriceFilter }} + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + div.gasprice.text-info + i.icon-gasprice + span.small-title gas limit + span.small-value {{ bestStats.block.gasLimit | number }} gas + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + div.page-latency(class="{{ {active: true, latency: latency} | latencyClass }}") + i.icon-clock + span.small-title page latency + span.small-value {{latency}} ms + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + div.uptime(class="{{ upTimeTotal | upTimeClass : true }}") + i.icon-bulb + span.small-title uptime + span.small-value {{ upTimeTotal | upTimeFilter }} + div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box + + div.row + div.col-xs-12.col-sm-12.col-md-12.col-lg-8 + div.row + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}") + //- i.icon-time + span.small-title block time + //- span.small-value {{ avgBlockTime | avgTimeFilter }} + sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart.text-info + //- i.icon-difficulty + span.small-title difficulty + //- span.small-value {{ lastDifficulty | number }} + sparkchart.big-details.spark-difficulty(data="{{difficultyChart.join(',')}}") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder.xpull-right + div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}") + //- i.icon-gas + span.small-title block propagation + //- span.small-value {{ blockPropagationAvg | blockPropagationFilter : '' }} + histogram.big-details.d3-blockpropagation(data="blockPropagationChart") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder.xpull-right + div.big-info.chart.xdouble-chart + span.small-title last blocks miners + div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}") + //- div.small-title-miner {{miner.miner | minerNameFilter : miner.name}} + div.small-title-miner {{miner.miner}} + div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}} + minerblock(blocks="{{miner.blocks}}") + div.clearfix + + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart.text-info + //- i.icon-uncle + span.small-title uncle count  + span.small.hidden-xs (25 blocks per bar) + //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }} + sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart.text-info + //- i.icon-uncle + span.small-title transactions + sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart.text-info + //- i.icon-gasprice + span.small-title gas spending + sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}") + + div.col-xs-6.col-sm-4.col-md-3.stat-holder + div.big-info.chart.text-info + //- i.icon-difficulty + span.small-title gas limit + //- span.small-value {{ lastDifficulty | number }} + sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}") + + + + div.col-xs-12.col-sm-12.col-md-12.col-lg-4.stat-holder.map-holder + //- div.col-xs-12 + nodemap#mapHolder(data="map") + + div.row.hidden-xs + div.col-xs-12.stats-boxes + div.row.second-row +>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad + div.row(ng-cloak, style="padding-top: 10px") + table.table.table-striped + thead + tr.text-info + th.th-nodecheck + i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Pin nodes to display first", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)") + th.th-nodename + i.icon-node(data-toggle="tooltip", data-placement="top", title="Node name", ng-click="orderTable(['info.name'], false)") + th.th-nodetype.hidden-xs + i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type", ng-click="orderTable(['info.node'], false)") + th.th-latency.hidden-xs + i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency", ng-click="orderTable(['stats.latency'], false)") + th.hidden-xs + i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining", ng-click="orderTable(['-stats.hashrate'], false)") + th + i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers", ng-click="orderTable(['-stats.peers'], false)") + th + i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions", ng-click="orderTable(['-stats.pending'], false)") + th.hidden-xs + i.icon-block(data-toggle="tooltip", data-placement="top", title="Last block", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)") + th.th-blockhash.hidden-xs.hidden-sm.hidden-md   + th.th-blockhash.hidden-xs.hidden-sm.hidden-md + i.icon-difficulty(data-toggle="tooltip", data-placement="top", title="Total difficulty", ng-click="orderTable(['-stats.block.totalDifficulty'], false)") + th.hidden-xs + i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions", ng-click="orderTable(['-stats.block.transactions.length'], false)") + th.hidden-xs + i.icon-uncle(data-toggle="tooltip", data-placement="top", title="Uncles", ng-click="orderTable(['-stats.block.uncles.length'], false)") + th.th-blocktime + i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time", ng-click="orderTable(['-stats.block.received'], false)") + th.th-peerPropagationTime + i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)") + th.th-peerPropagationChart + th.th-peerPropagationAvg.hidden-xs + i.icon-gas(data-toggle="tooltip", data-placement="top", title="Average propagation time", ng-click="orderTable(['stats.propagationAvg'], false)") + th + i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time", ng-click="orderTable(['-stats.uptime'], false)") + tbody(ng-cloak) + tr(ng-repeat='node in nodes | orderBy:predicate track by node.id', class="{{ node.stats | mainClass : bestBlock }}", id="node_{{node.id}}") + td.td-nodecheck + i(ng-click="pinNode(node.id)", class="{{ node.pinned | nodePinClass }}", data-toggle="tooltip", data-placement="right", data-original-title="Click to {{ node.pinned ? 'un' : '' }}pin") + td.nodeInfo(rel="{{node.id}}") + span.small(data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="{{node | geoTooltip}}") {{node.info.name}} + //- span.small  ({{node.info.ip}}) + a.small(href="https://github.com/ethereum/wiki/wiki/Network-Status#updating", target="_blank", data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="Netstats client needs update.
Click this icon for instructions.", class="{{ node.info | nodeClientClass : currentApiVersion }}") + i.icon-warning-o + td.hidden-xs + div.small(ng-bind-html="node.info.node | nodeVersion") + td(class="{{ node.readable.latencyClass }}").hidden-xs + span.small {{ node.readable.latency }} + td(class="{{ node.stats.mining | hashrateClass : node.stats.active }}", ng-bind-html="node.stats.hashrate | hashrateFilter : node.stats.mining").hidden-xs + td(class="{{ node.stats.peers | peerClass : node.stats.active }}", style="padding-left: 11px;") {{node.stats.peers}} + td(style="padding-left: 15px;") {{node.stats.pending}} + td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs + span(class="{{ node.readable.forkMessage ? node.readable.forkClass : '' }}") {{'#'}}{{ node.stats.block.number | number }} + //- a.small(data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="{{ node.readable.forkMessage }}", class="{{ node.readable.forkClass }}") + i.icon-warning-o + td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs.hidden-sm.hidden-md + span.small {{node.stats.block.hash | hashFilter}} + td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs.hidden-sm.hidden-md + span.small {{node.stats.block.totalDifficulty | number}} + td(style="padding-left: 14px;").hidden-xs {{node.stats.block.transactions.length || 0}} + td(style="padding-left: 14px;").hidden-xs {{node.stats.block.uncles.length || 0}} + td(class="{{ node.stats.block.received | timeClass : node.stats.active }}") {{node.stats.block.received | blockTimeFilter }} + td(class="{{ node.stats | propagationTimeClass : bestBlock }}") + div.propagationBox + span {{node.stats.block.propagation | blockPropagationFilter}} + td.peerPropagationChart(class="{{node.id}}") + nodepropagchart(data="{{node.history.join(',')}}") + td(class="{{ node.stats | propagationNodeAvgTimeClass : bestBlock }}").hidden-xs {{ node.stats | blockPropagationAvgFilter : bestBlock }} + td(class="{{ node.stats.uptime | upTimeClass : node.stats.active }}") {{ node.stats.uptime | upTimeFilter }}