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.small-title avg network hashrate
-            span.big-details {{ bestStats.gasPrice.toString() | gasPriceFilter }}
+            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.small-title difficulty
-            span.big-details {{ bestStats.block.gasLimit }} gas
+            span.big-details
-          div.clearfix
+              span.small-hash {{ lastDifficulty | totalDifficultyFilter }}
-      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)
-      div.col-xs-2.stat-holder
+      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
+                  //- i.icon-time
                   span.small-title block time
+                  //- span.small-value {{ avgBlockTime | avgTimeFilter }}
                   sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s")
-          div.clearfix
+
-      div.col-xs-2.stat-holder.xpull-right
+              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
+                  //- 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-2.stat-holder
+
+              div.col-xs-3.stat-holder
                 div.big-info.chart.text-info
-          i.icon-uncle
+                  //- 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.clearfix
+
-      div.col-xs-2.stat-holder
+              div.col-xs-3.stat-holder
                 div.big-info.chart.text-info
-          i.icon-gasprice
+                  //- 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.col-xs-3.stat-holder
                 div.big-info.chart.text-info
-          i.icon-difficulty
+                  //- i.icon-difficulty
                   span.small-title gas limit
+                  //- span.small-value {{ lastDifficulty | number }}
                   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
+
+          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 last blocks miners
+          //-     span.small-title SECURITY ALERT
-          div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}")
+          //-     span.small-value
-            div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}
+          //-       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.small-title-miner {{miner.miner | minerNameFilter : miner.name}}
+
-            minerblock(blocks="{{miner.blocks}}")
+
-            div.clearfix
+      //- div.clearfix
-      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')