Ethereum network status dashboard for PoW and PoA networks
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
ethstats-server/dist/index.html

1 lines
11 KiB

<!DOCTYPE html><html ng-app="netStatsApp"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>Ethereum Network Status</title><style type="text/css">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }</style><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700"><link rel="stylesheet" href="/css/netstats.min.css"></head><body><div ng-controller="StatsCtrl" class="container-fluid"><div ng-cloak class="row"><div class="col-xs-2 stat-holder"><div class="big-info bestblock text-info"><div class="pull-left icon-full-width"><i class="icon-block"></i></div><div class="big-details-holder"><span class="small-title">best block</span><span class="big-details">{{'#'}}{{ bestBlock | number}}</span></div><div class="clearfix"></div></div></div><div class="col-xs-2 stat-holder"><div class="big-info uncleCount text-info"><div class="pull-left icon-full-width"><i class="icon-uncle"></i></div><div class="big-details-holder"><span class="small-title">uncles &nbsp;<span class="small">(current / last 50)</span></span><span class="big-details">{{ bestStats.block.uncles.length }}/{{ uncleCount }}</span></div><div class="clearfix"></div></div></div><div class="col-xs-2 stat-holder"><div class="big-info blocktime {{ lastBlock | timeClass : true }}"><div class="pull-left icon-full-width"><i class="icon-time"></i></div><div class="big-details-holder"><span class="small-title">last block</span><span class="big-details">{{ lastBlock | blockTimeFilter }}</span></div><div class="clearfix"></div></div></div><div class="col-xs-2 stat-holder"><div class="big-info avgblocktime {{ avgBlockTime | avgTimeClass }}"><div class="pull-left icon-full-width"><i class="icon-gas"></i></div><div class="big-details-holder"><span class="small-title">avg block time</span><span class="big-details">{{ avgBlockTime | avgTimeFilter }}</span></div><div class="clearfix"></div></div></div><div class="col-xs-2 stat-holder"><div class="big-info difficulty text-orange"><div class="pull-left icon-full-width"><i class="icon-hashrate"></i></div><div class="big-details-holder"><span class="small-title">avg network hashrate</span><span ng-bind-html="avgHashrate | networkHashrateFilter" class="big-details"></span></div><div class="clearfix"></div></div></div><div class="col-xs-2 stat-holder"><div class="big-info difficulty text-danger"><div class="pull-left icon-full-width"><i class="icon-difficulty"></i></div><div class="big-details-holder"><span class="small-title">difficulty</span><span class="big-details"><span class="small-hash">{{ lastDifficulty | number }}</span></span></div><div class="clearfix"></div></div></div><div class="clearfix"></div></div><div ng-cloak class="row"><div style="padding-top: 0px;" class="col-xs-8 stats-boxes"><div class="row second-row"><div class="col-xs-3 stat-holder box"><div class="active-nodes {{ nodesActive | nodesActiveClass : nodesTotal }}"><i class="icon-node"></i><span class="small-title">active nodes</span><span class="small-value">{{nodesActive}}/{{nodesTotal}}</span></div></div><div class="col-xs-3 stat-holder box"><div class="gasprice text-info"><i class="icon-gasprice"></i><span class="small-title">gas price</span><span class="small-value">{{ bestStats.gasPrice.toString() | gasPriceFilter }}</span></div></div><div class="col-xs-3 stat-holder box"><div class="page-latency {{ {active: true, latency: latency} | latencyClass }}"><i class="icon-clock"></i><span class="small-title">page latency</span><span class="small-value">{{latency}} ms</span></div></div><div class="col-xs-3 stat-holder box"><div class="uptime {{ upTimeTotal | upTimeClass : true }}"><i class="icon-bulb"></i><span class="small-title">uptime</span><span class="small-value">{{ upTimeTotal | upTimeFilter }}</span></div></div></div><div class="row"><div class="col-xs-3 stat-holder"><div class="big-info chart {{ avgBlockTime | avgTimeClass }}"><span class="small-title">block time</span><sparkchart data="lastBlocksTime" tooltipsuffix="s" class="big-details spark-blocktimes"></sparkchart></div></div><div class="col-xs-3 stat-holder"><div class="big-info chart text-info"><span class="small-title">difficulty</span><sparkchart data="difficultyChart" class="big-details spark-difficulty"></sparkchart></div></div><div class="col-xs-3 stat-holder xpull-right"><div class="big-info chart xdouble-chart {{ blockPropagationAvg | propagationAvgTimeClass : true }}"><span class="small-title">block propagation</span><histogram data="blockPropagationChart" class="big-details d3-blockpropagation"></histogram></div></div><div class="col-xs-3 stat-holder pull-right"><div class="big-info chart double-chart"><span class="small-title">last blocks miners</span><div ng-repeat="miner in miners" data-toggle="tooltip" data-placement="right" title="{{miner.blocks}}" class="blocks-holder"><div class="block-count {{miner.blocks | minerBlocksClass : 'text-'}}">{{miner.blocks}}</div><div class="small-title-miner">{{miner.miner | minerNameFilter : miner.name}}</div><div ng-repeat="i in getNumber(miner.blocks) track by $index" class="block {{miner.blocks | minerBlocksClass}}"></div><div class="clearfix"></div></div></div></div><div class="col-xs-3 stat-holder"><div class="big-info chart text-info"><span class="small-title">uncle count &nbsp;<span class="small">(25 blocks per bar)</span></span><sparkchart data="uncleCountChart" class="big-details spark-uncles"></sparkchart></div></div><div class="col-xs-3 stat-holder"><div class="big-info chart text-info"><span class="small-title">transactions</span><sparkchart data="transactionDensity" class="big-details spark-transactions"></sparkchart></div></div><div class="col-xs-3 stat-holder"><div class="big-info chart text-info"><span class="small-title">gas spending</span><sparkchart data="gasSpending" class="big-details spark-gasspending"></sparkchart></div></div></div></div><div class="col-xs-4 stat-holder map-holder"><nodemap id="mapHolder" data="map"></nodemap></div></div><div ng-cloak style="padding-top: 10px" class="row"><table class="table table-striped"><thead><tr class="text-info"><th class="th-nodecheck"><i data-toggle="tooltip" data-placement="top" title="Pin nodes to display first" ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)" class="icon-check-o"></i></th><th class="th-nodename"><i data-toggle="tooltip" data-placement="top" title="Node name" ng-click="orderTable(['info.name'], false)" class="icon-node"></i></th><th class="th-nodetype"><i data-toggle="tooltip" data-placement="top" title="Node type" ng-click="orderTable(['info.node'], false)" class="icon-laptop"></i></th><th class="th-latency"><i data-toggle="tooltip" data-placement="top" title="Node latency" ng-click="orderTable(['stats.latency'], false)" class="icon-clock"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Is mining" ng-click="orderTable(['-stats.mining'], false)" class="icon-mining"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Peers" ng-click="orderTable(['-stats.peers'], false)" class="icon-group"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Pending transactions" ng-click="orderTable(['-stats.pending'], false)" class="icon-network"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Last block" ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)" class="icon-block"></i></th><th class="th-blockhash">&nbsp;</th><th class="th-blockhash"><i data-toggle="tooltip" data-placement="top" title="Total difficulty" ng-click="orderTable(['-stats.block.totalDifficulty'], false)" class="icon-difficulty"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Block transactions" ng-click="orderTable(['-stats.block.transactions.length'], false)" class="icon-check-o"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Uncles" ng-click="orderTable(['-stats.block.uncles.length'], false)" class="icon-uncle"></i></th><th class="th-blocktime"><i data-toggle="tooltip" data-placement="top" title="Last block time" ng-click="orderTable(['-stats.block.received'], false)" class="icon-time"></i></th><th class="th-peerPropagationTime"><i data-toggle="tooltip" data-placement="top" title="Propagation time" ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)" class="icon-gas"></i></th><th class="th-peerPropagationChart"></th><th class="th-peerPropagationAvg"><i data-toggle="tooltip" data-placement="top" title="Average propagation time" ng-click="orderTable(['stats.propagationAvg'], false)" class="icon-gas"></i></th><th><i data-toggle="tooltip" data-placement="top" title="Up-time" ng-click="orderTable(['-stats.uptime'], false)" class="icon-bulb"></i></th></tr></thead><tbody ng-cloak><tr ng-repeat="node in nodes | orderBy:predicate" class="{{ node.stats | mainClass : bestBlock }}"><td class="td-nodecheck"><i ng-click="node.pinned = !node.pinned" data-toggle="tooltip" data-placement="right" data-original-title="Click to {{ node.pinned ? 'un' : '' }}pin" class="{{ node.pinned | nodePinClass }}"></i></td><td rel="{{node.id}}" class="nodeInfo"><span data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="{{node | geoTooltip}}" class="small">{{node.info.name}}</span><span class="small">&nbsp;({{node.info.ip}})</span><a 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.&lt;br&gt;Click this icon for instructions." class="small {{ node.info | nodeClientClass : currentApiVersion }}"><i class="icon-warning-o"></i></a></td><td><div ng-bind-html="node.info.node | nodeVersion" class="small"></div></td><td class="{{ node.stats | latencyClass }}"><span class="small">{{node.stats | latencyFilter}}</span></td><td ng-bind-html="node.stats.hashrate | hashrateFilter : node.stats.mining" class="{{ node.stats.mining | hashrateClass : node.stats.active }}"></td><td style="padding-left: 11px;" class="{{ node.stats.peers | peerClass : node.stats.active }}">{{node.stats.peers}}</td><td style="padding-left: 15px;">{{node.stats.pending}}</td><td class="{{ node.stats | blockClass : bestBlock }}">{{'#'}}{{ node.stats.block.number | number }}</td><td class="{{ node.stats | blockClass : bestBlock }}"><span class="small">{{node.stats.block.hash | hashFilter}}</span></td><td class="{{ node.stats | blockClass : bestBlock }}"><span class="small">{{node.stats.block.totalDifficulty | number}}</span></td><td style="padding-left: 14px;">{{node.stats.block.transactions.length || 0}}</td><td style="padding-left: 14px;">{{node.stats.block.uncles.length || 0}}</td><td class="{{ node.stats.block.received | timeClass : node.stats.active }}">{{node.stats.block.received | blockTimeFilter }}</td><td class="{{ node.stats | propagationTimeClass : bestBlock }}"><div class="propagationBox"></div><span>{{node.stats.block.propagation | blockPropagationFilter}}</span></td><td class="peerPropagationChart {{node.id}}"><nodepropagchart data="node.history"></nodepropagchart></td><td class="{{ node.stats | propagationNodeAvgTimeClass : bestBlock }}">{{ node.stats | blockPropagationAvgFilter : bestBlock }}</td><td class="{{ node.stats.uptime | upTimeClass : node.stats.active }}">{{ node.stats.uptime | upTimeFilter }}</td></tr></tbody></table></div></div><script src="/js/netstats.min.js"></script></body></html>