views: restore pow layout

src/pow/views/index.jade

@@ -12,6 +12,15 @@ block content
             span.small-title best block
             span.big-details {{'#'}}{{ bestBlock | number}}
           div.clearfix
+      div.col-xs-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 (current / last 50)
+            span.big-details {{ bestStats.block.uncles.length }}/{{ uncleCount }}
+          div.clearfix
       div.col-xs-2.stat-holder
         div.big-info.blocktime(class="{{ lastBlock | timeClass : true }}")
           div.pull-left.icon-full-width
@@ -30,72 +39,140 @@ block content
             span.big-details {{ avgBlockTime | avgTimeFilter }}
           div.clearfix
       div.col-xs-2.stat-holder
-        div.big-info.gasprice.text-info
+        div.big-info.difficulty.text-orange
           div.pull-left.icon-full-width
-            i.icon-gasprice
+            i.icon-hashrate
           div.big-details-holder
-            span.small-title gas price
-            span.big-details {{ bestStats.gasPrice.toString() | gasPriceFilter }}
+            span.small-title avg network hashrate
+            span.big-details(ng-bind-html="avgHashrate | networkHashrateFilter")
           div.clearfix
       div.col-xs-2.stat-holder
-        div.big-info.gasprice.text-highlight
+        div.big-info.difficulty.text-danger
           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}}
+            span.small-title difficulty
+            span.big-details
+              span.small-hash {{ lastDifficulty | totalDifficultyFilter }}
           div.clearfix
+
       div.clearfix
 
+
     div.row(ng-cloak)
-      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-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-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-2.stat-holder.box
+            div.gasprice.text-info
+              i.icon-gasprice
+              span.small-title gas limit
+              span.small-value {{ bestStats.block.gasLimit }} gas
+          div.col-xs-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-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-2.stat-holder.box
+
+        div.row
+          div.col-xs-8
+            div.row
+              div.col-xs-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-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-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-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.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}
+                    //- div.small-title-miner {{miner.miner | minerNameFilter : miner.name}}
+                    div.small-title-miner {{miner.miner}}
+                    minerblock(blocks="{{miner.blocks}}")
+                    div.clearfix
+
+              div.col-xs-3.stat-holder
+                div.big-info.chart.text-info
+                  //- i.icon-uncle
+                  span.small-title uncle count 
+                    span.small (25 blocks per bar)
+                  //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }}
+                  sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}")
+
+              div.col-xs-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-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-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-4.stat-holder.map-holder
+            //- div.col-xs-12
+            nodemap#mapHolder(data="map")
+
+    div.row
+      div.col-xs-12.stats-boxes
+        div.row.second-row
+          div.col-xs-12.stat-holder.box
+            div.active-nodes.text-warning
+              i.icon-warning-o
+              span.small-title ATTENTION!
+              span.small-value This page does not represent the entire state of the ethereum network - listing a node on this page is a voluntary process.
+          //- div.col-xs-12.stat-holder.box
+          //-   div.active-nodes.text-danger
+          //-     i.icon-hashrate
+          //-     span.small-title SECURITY ALERT
+          //-     span.small-value
+          //-       a(href="https://blog.ethereum.org/2015/09/10/security-alert-previous-security-patch-can-lead-to-invalid-state-root-on-go-clients-with-a-specific-transaction-sequence-fixed-please-update/", target="_blank", class="text-danger") Read the blog post
+
+
+      //- div.clearfix
 
     div.row(ng-cloak, style="padding-top: 10px")
       table.table.table-striped

src/pow/views/layout.jade

@@ -3,7 +3,7 @@ doctype html
 html(ng-app="netStatsApp")
   head
     meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
-    title Görli Network Status
+    title Ethereum Network Status
     style(type="text/css") [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
     link(rel='stylesheet', href='/css/netstats.min.css')
     meta(name='robots', content='index,follow')