Merge pull request #10 from insolar/PLAT-257-report-style-fixes

PLAT-257: some report style fixes
insolar · Oct 9, 2020 · 41570b1 · 41570b1
2 parents 139c461 + 7cf6e2e
commit 41570b1
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/go.mod b/go.mod
@@ -6,7 +6,7 @@ require (
 	github.com/go-playground/universal-translator v0.17.0 // indirect
 	github.com/insolar/insconfig v0.0.0-20200617131009-dd635d1fc9e9
 	github.com/leodido/go-urn v1.2.0 // indirect
-	github.com/markbates/pkger v0.17.0
+	github.com/markbates/pkger v0.17.1
 	github.com/pkg/errors v0.9.1
 	github.com/prometheus/client_golang v1.6.0
 	github.com/prometheus/common v0.9.1
@@ -16,5 +16,4 @@ require (
 	go.uber.org/zap v1.10.0
 	gopkg.in/go-playground/assert.v1 v1.2.1 // indirect
 	gopkg.in/go-playground/validator.v9 v9.31.0
-	gopkg.in/yaml.v2 v2.2.8
 )
diff --git a/go.sum b/go.sum
@@ -138,8 +138,8 @@ github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
 github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
 github.com/magiconair/properties v1.8.1 h1:ZC2Vc7/ZFkGmsVC9KvOjumD+G5lXy2RtTKyzRKO2BQ4=
 github.com/magiconair/properties v1.8.1/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czPbwD3XqdrwzmxQ=
-github.com/markbates/pkger v0.17.0 h1:RFfyBPufP2V6cddUyyEVSHBpaAnM1WzaMNyqomeT+iY=
-github.com/markbates/pkger v0.17.0/go.mod h1:0JoVlrol20BSywW79rN3kdFFsE5xYM+rSCQDXbLhiuI=
+github.com/markbates/pkger v0.17.1 h1:/MKEtWqtc0mZvu9OinB9UzVN9iYCwLWuyUv4Bw+PCno=
+github.com/markbates/pkger v0.17.1/go.mod h1:0JoVlrol20BSywW79rN3kdFFsE5xYM+rSCQDXbLhiuI=
 github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
 github.com/mattn/go-isatty v0.0.3/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=

diff --git a/pkg/metricreplicator/properties.go b/pkg/metricreplicator/properties.go
@@ -54,21 +54,21 @@ var (
 	phase01Duration = consensusProperty{
 		Name:        "phase01_duration",
 		Formula:     "histogram_quantile(%s, sum(rate(insolar_phase01_latency_bucket[20s])) by (le))",
-		Description: "Duration of consensus phase01",
+		Description: "Duration of consensus phase 1",
 		Unit:        "ms",
 		Quantile:    true,
 	}
 	phase2Duration = consensusProperty{
 		Name:        "phase2_duration",
 		Formula:     "histogram_quantile(%s, sum(rate(insolar_phase2_latency_bucket[20s])) by (le))",
-		Description: "Duration of consensus phase2",
+		Description: "Duration of consensus phase 2",
 		Unit:        "ms",
 		Quantile:    true,
 	}
 	phase3Duration = consensusProperty{
 		Name:        "phase3_duration",
 		Formula:     "histogram_quantile(%s, sum(rate(insolar_phase3_latency_bucket[20s])) by (le))",
-		Description: "Duration of consensus phase3",
+		Description: "Duration of consensus phase 3",
 		Unit:        "ms",
 		Quantile:    true,
 	}

diff --git a/pkg/report/pkged.go b/pkg/report/pkged.go
diff --git a/pkg/report/template.html b/pkg/report/template.html
@@ -3,20 +3,35 @@
 <head>
     <meta charset="UTF-8">
     <title>Consensus performance report</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts-en.js"></script>
 
     <style>
-        h1, h2, h3{text-align: center;}
-        #charts{display: flex; flex-direction: row; flex-wrap: wrap;}
-        .item{height: 40vh; width: 50%; }
+        body {
+            font-family: sans-serif;
+        }
+        h1, h2, h3 {
+            text-align: center;
+        }
+        #charts {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+        .item {
+            height: 40vh;
+            max-height: 400px;
+            width: 50%;
+            max-width: 840px;
+            overflow: hidden;
+        }
     </style>
 </head>
 <body>
 <div class="container">
     <h3>
         Consensus performance report for branch
-        &nbsp;<a target="_blank" href="https://github.com/insolar/assured-ledger/tree/{{.GitBranch}}">{{.GitBranch}}</a>
-        &nbsp;commit hash <a target="_blank" href="https://github.com/insolar/assured-ledger/commit/{{.GitCommitHash}}">{{.GitCommitHash}}</a>
+        <a target="_blank" href="https://github.com/insolar/assured-ledger/tree/{{.GitBranch}}">{{.GitBranch}}</a>,
+        commit <a target="_blank" href="https://github.com/insolar/assured-ledger/commit/{{.GitCommitHash}}">{{.GitCommitHash}}</a>
     </h3>
     <div id="charts"></div>
 </div>
@@ -33,6 +48,7 @@ <h3>
 
     const addChart = (chartData, xAxis) => {
         const option = {
+            animation: false,
             title: {
                 id: chartData.name,
                 text: chartData.description,
@@ -44,12 +60,11 @@ <h3>
             },
             toolbox: {
                 feature: {
-                    saveAsImage: {title: 'Save as PNG'},
+                    saveAsImage: { show: true },
                     magicType: {
-                        type: [ 'line', 'bar', 'stack'],
-                        title: {line: 'line', stack: 'stack', bar: 'bar' }
+                        type: [ 'line', 'bar', 'stack' ]
                     },
-                    restore: {title: 'restore'}
+                    restore: { show: true }
                 }
             },
             legend: {
@@ -61,7 +76,10 @@ <h3>
                 nameLocation: 'center',
                 data: xAxis.data // network sizes
             },
-            yAxis: {type: 'value', name: chartData.yAxisName},
+            yAxis: {
+                type: 'value',
+                name: chartData.yAxisName
+            },
             series: chartData.series.map(q => {
                 return {
                     name: seriesName(q.name),