feat: Save report to single responsible HTML file

.gitignore

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

assets/assets.go

@@ -9,13 +9,17 @@ import (
 	"io/fs"
 )
 
-//go:embed ui
+//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 {

assets/assets_test.go

@@ -10,7 +10,7 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
-func TestGetFS(t *testing.T) {
+func TestDirUI(t *testing.T) {
 	t.Parallel()
 
 	fs := DirUI()
@@ -24,3 +24,18 @@ func TestGetFS(t *testing.T) {
 
 	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/boot.js

@@ -0,0 +1,186 @@
+const overviewPanels = [
+  {
+    id: 'iterations',
+    title: 'Iterations',
+    metric: 'iterations_counter_count',
+    format: 'counter'
+  },
+  {
+    id: 'vus',
+    title: 'Virtual Users',
+    metric: 'vus_gauge_value',
+    format: 'counter'
+  },
+  {
+    id: 'http_reqs',
+    title: 'Request Rate',
+    metric: 'http_reqs_counter_rate',
+    format: 'rps'
+  },
+  {
+    id: 'http_req_duration',
+    title: 'Request Duration',
+    metric: 'http_req_duration_trend_avg',
+    format: 'duration'
+  },
+  {
+    id: 'data_received',
+    title: 'Received Rate',
+    metric: 'data_received_counter_rate',
+    format: 'bps'
+  },
+  {
+    id: 'data_sent',
+    title: 'Sent Rate',
+    metric: 'data_sent_counter_rate',
+    format: 'bps'
+  }
+]
+
+const overviewCharts = [
+  {
+    id: 'http_reqs',
+    title: 'Generated Load',
+    series: {
+      vus_gauge_value: { label: 'user count', width: 2, scale: 'n' },
+      http_reqs_counter_rate: { label: 'request rate', scale: '1/s' }
+    },
+    axes: [{}, { scale: 'n' }, { scale: '1/s', side: 1 }],
+    scales: [{}, {}, {}]
+  },
+  {
+    id: 'data',
+    title: 'Transfer Rate (byte/sec)',
+    series: {
+      data_sent_counter_rate: { label: 'data sent', rate: true, scale: 'sent' },
+      data_received_counter_rate: {
+        label: 'data received',
+        rate: true,
+        with: 2,
+        scale: 'received'
+      }
+    },
+    axes: [{}, { scale: 'sent' }, { scale: 'received', side: 1 }]
+  },
+  {
+    id: 'http_req_duration',
+    title: 'Request Duration (ms)',
+    series: {
+      http_req_duration_trend_avg: { label: 'avg', width: 2 },
+      'http_req_duration_trend_p(90)': { label: 'p(90)' },
+      'http_req_duration_trend_p(95)': { label: 'p(95)' }
+    },
+    axes: [{}, {}, { side: 1 }]
+  },
+  {
+    id: 'iteration_duration',
+    title: 'Iteration Duration (ms)',
+    series: {
+      iteration_duration_trend_avg: { label: 'avg', width: 2 },
+      'iteration_duration_trend_p(90)': { label: 'p(90)' },
+      'iteration_duration_trend_p(95)': { label: 'p(95)' }
+    },
+    axes: [{}, {}, { side: 1 }]
+  }
+]
+
+function suffix (event) {
+  return event == 'snapshot' ? '' : ' (cum)'
+}
+
+function reportable (event) {
+  return event == 'snapshot'
+}
+
+function tabOverview (event) {
+  return {
+    id: `overview_${event}`,
+    title: `Overview${suffix(event)}`,
+    event: event,
+    panels: overviewPanels,
+    charts: overviewCharts,
+    description:
+      'This section provides an overview of the most important metrics of the test run. Graphs plot the value of metrics over time.'
+  }
+}
+
+function chartTimings (metric, title) {
+  return {
+    id: metric,
+    title: title,
+    series: {
+      [`${metric}_trend_avg`]: { label: 'avg', width: 2 },
+      [`${metric}_trend_p(90)`]: { label: 'p(90)' },
+      [`${metric}_trend_p(95)`]: { label: 'p(95)' }
+    },
+    axes: [{}, {}, { side: 1 }],
+    height: 224
+  }
+}
+
+function tabTimings (event) {
+  return {
+    id: `timings_${event}`,
+    title: `Timings${suffix(event)}`,
+    event: event,
+    charts: [
+      chartTimings('http_req_duration', 'Request Duration (ms)'),
+      chartTimings('http_req_waiting', 'Request Waiting (ms)'),
+      chartTimings('http_req_tls_handshaking', 'TLS handshaking (ms)'),
+      chartTimings('http_req_sending', 'Request Sending (ms)'),
+      chartTimings('http_req_connecting', 'Request Connecting (ms)'),
+      chartTimings('http_req_receiving', 'Request Receiving (ms)')
+    ],
+    report: reportable(event),
+    description:
+      'This section provides an overview of test run HTTP timing metrics. Graphs plot the value of metrics over time.'
+  }
+}
+
+const defaultConfig = {
+  title: 'k6 dashboard',
+  tabs: [
+    tabOverview('snapshot'),
+    tabOverview('cumulative'),
+    tabTimings('snapshot'),
+    tabTimings('cumulative'),
+  ],
+
+  tab (id) {
+    let tab = null
+
+    for (const t of this.tabs) {
+      if (t.id == id) {
+        tab = t
+
+        break
+      }
+    }
+
+    if (tab == null) {
+      tab = { id: id }
+
+      this.tabs.push(tab)
+    }
+
+    let lookup = (collection, id) => {
+      for (const item of collection) {
+        if (item.id == id) {
+          return item
+        }
+      }
+
+      let item = { id: id }
+      collection.push(item)
+
+      return item
+    }
+
+    tab.chart = id => lookup(tab.charts, id)
+    tab.panel = id => lookup(tab.panels, id)
+
+    return tab
+  }
+}
+
+window.defaultConfig = defaultConfig

assets/brief/init.js

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

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"
+  }
+}