Merge pull request #43 from szkiba/feature/report

export HTML report feature

.gitignore

@@ -4,7 +4,7 @@
 
 k6
 
-test_result.*
+test_result*
 
 coverage.txt
 

.golangci.yml

@@ -35,3 +35,29 @@ linters:
     - sqlclosecheck
     - wastedassign
 
+linters-settings:
+  depguard:
+    rules:
+      main:
+        files:
+        - $all
+        - "!$test"
+        allow:
+          - $gostd
+          - github.com/sirupsen/logrus
+          - github.com/spf13/cobra
+          - github.com/pkg/browser
+          - github.com/gorilla/schema
+          - github.com/tidwall/gjson
+          - github.com/r3labs/sse/v2
+          - github.com/szkiba/xk6-dashboard/assets
+          - github.com/szkiba/xk6-dashboard/dashboard
+      test:
+        files:
+        - $test
+        allow:
+        - $gostd
+        - github.com/stretchr/testify/assert
+        - github.com/sirupsen/logrus
+        - github.com/szkiba/xk6-dashboard/assets
+        - github.com/szkiba/xk6-dashboard/dashboard

README.md

@@ -9,6 +9,8 @@ A [k6 extension](https://k6.io/docs/extensions/) that enables creating web based
 
 By using **xk6-dashboard** output extension you can access metrics from [k6](https://k6.io) process via [Server-sent events (SSE)](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events). All custom [k6](https://k6.io) metrics ([Counter](https://k6.io/docs/javascript-api/k6-metrics/counter/),[Gauge](https://k6.io/docs/javascript-api/k6-metrics/gauge/),[Rate](https://k6.io/docs/javascript-api/k6-metrics/rate/),[Trend](https://k6.io/docs/javascript-api/k6-metrics/trend/)) and [build-in metrics](https://k6.io/docs/using-k6/metrics/#built-in-metrics) will be accessible in the event stream.
 
+The test run report can be exported to a responsive self-contained HTML file, which can be displayed even without an Internet connection.
+
 **Screenshots**
 
 *Overview*
@@ -52,13 +54,23 @@ The report tab contains a test run report in a printable (or saveable to PDF) fo
 
 See [sample PDF report](screenshot/k6-dashboard-report.pdf)
 
+**HTML Report**
+
+The report can be saved in a single responsive HTML file.
+
+*Single file HTML report*
+![k6 dashboard HTML report](screenshot/k6-dashboard-html-report.png)
+
+See [sample HTML report](screenshot/k6-dashboard-html-report.html) or try the [online version](https://raw.githack.com/szkiba/xk6-dashboard/master/screenshot/k6-dashboard-html-report.html)
+
 **Table of Contents**
 
 - [Download](#download)
 - [Build](#build)
 - [Usage](#usage)
 - [Parameters](#parameters)
 - [Docker](#docker)
+- [Save report](#save-report)
 - [Events](#events)
 - [Customization](#customization)
   - [Examples](#examples)
@@ -123,10 +135,11 @@ The following parameters are recognized:
 parameter | description
 ----------|------------
 host      | Hostname or IP address for HTTP endpoint (default: "", empty, listen on all interfaces)
-port      | TCP port for HTTP endpoint (default: `5665`), example: `8080`
+port      | TCP port for HTTP endpoint (default: `5665`; `0` = random, `-1` = no HTTP), example: `8080`
 period    | Event emitting frequency (default: `10s`), example: `1m`
 open      | Set to `true` (or empty) for opening browser window automatically
 config    | UI configuration file location (default: `.dashboard.js`) (see [Customization](#customization))
+report    | File name to save the report (dafault: "", empty, the report will not be saved)
 
 ## Docker
 
@@ -146,6 +159,27 @@ docker run -v %cd%:/scripts -p 5665:5665 -it --rm ghcr.io/szkiba/xk6-dashboard:l
 
 The dashboard will accessible on port `5665` with any web browser: http://127.0.0.1:5665
 
+## Save report
+
+The test run report can be exported to a responsive self-contained HTML file. For export, the file name must be specified in the `report` parameter. If the file name ends with `.gz`, the HTML report will automatically be gzip compressed.
+
+```plain
+k6 run --out dashboard=report=test-report.html script.js
+```
+
+The exported HTML report file does not contain external dependencies, so it can be displayed even without an Internet connection. Graphs can be zoomed by selecting a time interval. If necessary, the report can be printed or converted to PDF format.
+
+By using the `--report` switch of the `dashboard replay` command, the report can also be generated afterwards from the previously saved JSON format result (`--out json=test-restult.json`).
+
+```plain
+k6 dashboard replay --report test-report.html test-result.json
+```
+
+*Example HTML report*
+![k6 dashboard HTML report](screenshot/k6-dashboard-html-report.png)
+
+See [sample HTML report](screenshot/k6-dashboard-html-report.html) or try the [online version](https://raw.githack.com/szkiba/xk6-dashboard/master/screenshot/k6-dashboard-html-report.html)
+
 ## Events
 
 The `/events` endpoint (default: http://127.0.0.1:5665/events) is a standard SSE event source endpoint. Using this event source you can create your own dashboard UI.
@@ -285,11 +319,12 @@ Usage:
   k6 dashboard replay file [flags]
 
 Flags:
-      --config string   UI configuration file location (default: '.dashboard.js')
+      --config string   UI configuration file location (default ".dashboard.js")
       --host string     Hostname or IP address for HTTP endpoint (default: '', empty, listen on all interfaces)
       --open            Open browser window automatically
-      --period 10s      Event emitting frequency (default: 10s), example: `1m` (default 10s)
-      --port int        TCP port for HTTP endpoint (default: 5665), example: 8080 (default 5665)
+      --period 1m       Event emitting frequency, example: 1m (default 10s)
+      --port int        TCP port for HTTP endpoint (0=random, -1=no HTTP), example: 8080 (default 5665)
+      --report string   Report file location (default: '', no report)
   -h, --help            help for replay
 ```
 

assets/.gitignore

@@ -0,0 +1,5 @@
+# SPDX-FileCopyrightText: 2023 Iván Szkiba
+#
+# SPDX-License-Identifier: MIT
+
+node_modules/

assets/assets.go

@@ -0,0 +1,30 @@
+// SPDX-FileCopyrightText: 2023 Iván Szkiba
+//
+// SPDX-License-Identifier: MIT
+
+package assets
+
+import (
+	"embed"
+	"io/fs"
+)
+
+//go:embed ui brief
+var distFS embed.FS
+
+func DirUI() fs.FS {
+	return dir("ui")
+}
+
+func DirBrief() fs.FS {
+	return dir("brief")
+}
+
+func dir(dirname string) fs.FS {
+	subfs, err := fs.Sub(distFS, dirname)
+	if err != nil {
+		panic(err)
+	}
+
+	return subfs
+}

assets/assets_test.go

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: 2023 Iván Szkiba
+//
+// SPDX-License-Identifier: MIT
+
+package assets
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func Test_dir(t *testing.T) {
+	t.Parallel()
+
+	fs := dir("hu")
+
+	assert.NotNil(t, fs)
+	assert.Panics(t, func() {
+		dir("..") //nolint:errcheck
+	})
+}
+
+func TestDirUI(t *testing.T) {
+	t.Parallel()
+
+	fs := DirUI()
+
+	assert.NotNil(t, fs)
+
+	file, err := fs.Open("index.html")
+
+	assert.NoError(t, err)
+	assert.NotNil(t, file)
+
+	assert.NoError(t, file.Close())
+}
+
+func TestDirBrief(t *testing.T) {
+	t.Parallel()
+
+	fs := DirBrief()
+
+	assert.NotNil(t, fs)
+
+	file, err := fs.Open("index.html")
+
+	assert.NoError(t, err)
+	assert.NotNil(t, file)
+
+	assert.NoError(t, file.Close())
+}

assets/brief/init.js

@@ -0,0 +1 @@
+window.config = window.config || window.defaultConfig

assets/lerna.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "npmClient": "yarn",
+  "version": "independent"
+}

assets/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "xk6-dashboard-assets",
+  "version": "1.0.0",
+  "description": "xk6-dashboard embeddable assets",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "build": "lerna run build"
+  },
+  "devDependencies": {
+    "lerna": "^7.1.5",
+    "vite": "^4.4.9"
+  },
+  "workspaces": [
+    "packages/*"
+  ]
+}

assets/packages/brief/.gitignore

@@ -0,0 +1,28 @@
+# SPDX-FileCopyrightText: 2023 Iván Szkiba
+#
+# SPDX-License-Identifier: MIT
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

assets/packages/brief/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml"
+    href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgNjcuNzMzIDY3LjczMyIgZmlsbD0iIzdiNjVmYSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy45MDIgNjMuODMxVjEwLjI2NiIvPjxwYXRoIGQ9Ik0zLjAwNSAxMC4yNjZWNjMuODNoMS43OTNWMTAuMjY2eiIvPjxwYXRoIGQ9Ik0zLjkwMiAzLjA5NWwyLjM5MyA3LjE3MUgxLjUwOXoiLz48cGF0aCBkPSJNMy45MDEuMjY0TC4yNjUgMTEuMTYySDcuNTR6bS0uOTM4IDYzLjU2N2g1NC41MDQiLz48cGF0aCBkPSJNMi45NjQgNjIuOTI2djEuODA5aDU0LjUwNHYtMS44MDl6Ii8+PHBhdGggZD0iTTY0LjYzOCA2My44MzFsLTcuMTcxIDIuMzkzdi00Ljc4NnoiLz48cGF0aCBkPSJNNTYuNTcxIDYwLjE5M3Y3LjI3NUw2Ny40NyA2My44M2wtMTAuODk4LTMuNjM3eiIvPjxwYXRoIGQ9Ik01NC4xOTMgNjMuNjg1SDQuNjhsMTYuNDgzLTM1LjE2IDkuOTI5IDcuMjk5IDEyLjk1MS0yMC4xOTJ6IiBmaWxsLW9wYWNpdHk9Ii41MDIiIHN0cm9rZT0iIzdiNjVmYSIgc3Ryb2tlLXdpZHRoPSIxLjg3MyIvPjwvc3ZnPg==" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>k6 report</title>
+  <script id="init" type="module">{{{ testconfig }}}</script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+  <script id="data" type="application/json; charset=utf-8; gzip; base64">{{{ testdata }}}</script>
+<body>
+
+</html>

assets/packages/brief/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "xk6-dashboard-brief",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.1",
+    "byte-size": "^8.1.1",
+    "humanize-duration": "^3.28.0",
+    "numeral": "^2.0.6",
+    "preact": "^10.16.0",
+    "pretty-bytes": "^6.1.0",
+    "pretty-ms": "^8.0.0",
+    "round-to": "^6.0.0",
+    "uplot": "^1.6.24",
+    "uplot-react": "^1.1.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.5.0",
+    "sass": "^1.65.1",
+    "vite": "^4.4.5",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-plugin-singlefile": "^0.13.5"
+  }
+}

assets/packages/brief/public/init.js

@@ -0,0 +1 @@
+window.config = window.config || window.defaultConfig

assets/packages/brief/src/Brief.css

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Iván Szkiba
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.usage {
+    color: #808080;
+    font-style: italic;
+}