├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── dev
    ├── export.json
    ├── index.js
    └── report.html
├── jest.config.js
├── package-lock.json
├── package.json
├── screenshot
    └── k6.png
├── src
    ├── index.test.ts
    ├── index.ts
    ├── reporter.ts
    ├── types.ts
    └── util.ts
├── templates
    └── template.ejs
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | *.tgz
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /dev
2 | /src
3 | node_modules
4 | /screenshot
5 | *.test.ts
6 | *.tgz
7 | jest.config.js


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 15


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Baidi Liu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # k6-html-reporter
 2 | 
 3 | A light weight html reporter for k6
 4 | 
 5 | [![Build Status](https://travis-ci.com/szboynono/k6-html-reporter.svg?branch=main)](https://travis-ci.com/szboynono/k6-html-reporter) 
 6 | <a href="https://www.npmjs.com/package/k6-html-reporter" alt="Latest Stable Version">![npm](https://img.shields.io/npm/v/k6-html-reporter.svg)</a>
 7 | <a href="https://www.npmjs.com/package/k6-html-reporter" alt="Total Downloads">![npm](https://img.shields.io/npm/dw/k6-html-reporter.svg)</a>
 8 |  
 9 | 
10 | 
11 | ## Install
12 | NPM:
13 | 
14 | ``` bash
15 | npm install k6-html-reporter --save-dev
16 | ```
17 | 
18 | YARN:
19 | 
20 | ```bash
21 | yarn add k6-html-reporter --dev
22 | ```
23 | 
24 | 
25 | 
26 | ## Usage
27 | 
28 | 1. Install the package
29 | 2. Create a js/ts file and specify the options:
30 | 
31 | ```js
32 | 
33 | const reporter = require('k6-html-reporter');
34 | 
35 | const options = {
36 |         jsonFile: <path-to-json-report>,
37 |         output: <path-to-output-directory>,
38 |     };
39 | 
40 | reporter.generateSummaryReport(options);
41 |     
42 | ```
43 | 
44 | for typescript
45 | 
46 | ```ts
47 | import {generateSummaryReport} from 'k6-html-reporter';
48 | 
49 | const options = {
50 |         jsonFile: <path-to-json-report>,
51 |         output: <path-to-output-directory>,
52 |     };
53 | 
54 | generateSummaryReport(options);
55 | ```
56 | 3. Output a JSON summary output with the `handleSummary` function provided by k6, [more info](https://k6.io/docs/results-visualization/end-of-test-summary).
57 | ```js
58 | export default function () { /** some tests here */}
59 | export function handleSummary(data) {
60 |   console.log('Preparing the end-of-test summary...');
61 |   return {
62 |       <path-to-json-report>: JSON.stringify(data),
63 |   }
64 | }
65 | ```
66 | 
67 | > **Note**: The ` --summary-export=path/to/file.json` run option is no longer recomanded after k6 v0.30.0.
68 | 
69 | 4. Run the code in step two as a node.js script after the test execution:
70 | ```bash
71 | node xxxx.js
72 | ```
73 | 
74 | ### Sample report:
75 | ![Alt text](./screenshot/k6.png?raw=true "Optional Title")
76 | 


--------------------------------------------------------------------------------
/dev/export.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "root_group": {
  3 |     "groups": [
  4 |       {
  5 |         "path": "::bigger group",
  6 |         "id": "226c69e91e8a461f435cbf90a58e220a",
  7 |         "groups": [
  8 |           {
  9 |             "name": "group one",
 10 |             "path": "::bigger group::group one",
 11 |             "id": "07005d932c18483963641fb146c1def3",
 12 |             "groups": [],
 13 |             "checks": [
 14 |               {
 15 |                 "fails": 149,
 16 |                 "name": "status is 201 in group one",
 17 |                 "path": "::bigger group::group one::status is 201 in group one",
 18 |                 "id": "992a99f5953e3f64aac15d77bc3f1235",
 19 |                 "passes": 0
 20 |               }
 21 |             ]
 22 |           },
 23 |           {
 24 |             "name": "group two",
 25 |             "path": "::bigger group::group two",
 26 |             "id": "67c97ab65738bc85d1f8da78e117315a",
 27 |             "groups": [],
 28 |             "checks": [
 29 |               {
 30 |                 "name": "status is 200 in group one",
 31 |                 "path": "::bigger group::group two::status is 200 in group one",
 32 |                 "id": "9d81d9068470b1a392559b29d4b3294d",
 33 |                 "passes": 149,
 34 |                 "fails": 0
 35 |               }
 36 |             ]
 37 |           }
 38 |         ],
 39 |         "checks": [],
 40 |         "name": "bigger group"
 41 |       }
 42 |     ],
 43 |     "checks": [
 44 |       {
 45 |         "name": "status is 200 in individual group",
 46 |         "path": "::status is 200 in individual group",
 47 |         "id": "a04a5961ccb8808a2490d8a850747ee5",
 48 |         "passes": 149,
 49 |         "fails": 0
 50 |       }
 51 |     ],
 52 |     "name": "",
 53 |     "path": "",
 54 |     "id": "d41d8cd98f00b204e9800998ecf8427e"
 55 |   },
 56 |   "options": {
 57 |     "summaryTrendStats": [
 58 |       "avg",
 59 |       "min",
 60 |       "med",
 61 |       "max",
 62 |       "p(90)",
 63 |       "p(95)"
 64 |     ],
 65 |     "summaryTimeUnit": ""
 66 |   },
 67 |   "metrics": {
 68 |     "http_req_tls_handshaking": {
 69 |       "type": "trend",
 70 |       "contains": "time",
 71 |       "values": {
 72 |         "med": 0,
 73 |         "max": 0,
 74 |         "p(90)": 0,
 75 |         "p(95)": 0,
 76 |         "avg": 0,
 77 |         "min": 0
 78 |       }
 79 |     },
 80 |     "vus": {
 81 |       "type": "gauge",
 82 |       "contains": "default",
 83 |       "values": {
 84 |         "min": 1,
 85 |         "max": 9,
 86 |         "value": 1
 87 |       }
 88 |     },
 89 |     "http_req_blocked": {
 90 |       "type": "trend",
 91 |       "contains": "time",
 92 |       "values": {
 93 |         "min": 0.0039,
 94 |         "med": 0.0162,
 95 |         "max": 97.9576,
 96 |         "p(90)": 0.02458000000000005,
 97 |         "p(95)": 34.254439999999995,
 98 |         "avg": 2.6951053691275164
 99 |       }
100 |     },
101 |     "http_req_waiting": {
102 |       "values": {
103 |         "p(90)": 41.78374000000001,
104 |         "p(95)": 43.446780000000004,
105 |         "avg": 37.561263758389266,
106 |         "min": 31.3698,
107 |         "med": 35.505,
108 |         "max": 220.0312
109 |       },
110 |       "type": "trend",
111 |       "contains": "time"
112 |     },
113 |     "data_received": {
114 |       "type": "counter",
115 |       "contains": "data",
116 |       "values": {
117 |         "count": 1645162,
118 |         "rate": 52973.82121211533
119 |       }
120 |     },
121 |     "iterations": {
122 |       "values": {
123 |         "count": 149,
124 |         "rate": 4.797764208391139
125 |       },
126 |       "thresholds": {
127 |         "count > 1000": {
128 |           "ok": false
129 |         }
130 |       },
131 |       "type": "counter",
132 |       "contains": "default"
133 |     },
134 |     "http_req_sending": {
135 |       "values": {
136 |         "med": 0.0421,
137 |         "max": 2.9039,
138 |         "p(90)": 0.06222000000000004,
139 |         "p(95)": 0.11393999999999987,
140 |         "avg": 0.060091275167785195,
141 |         "min": 0.0098
142 |       },
143 |       "type": "trend",
144 |       "contains": "time"
145 |     },
146 |     "group_duration": {
147 |       "type": "trend",
148 |       "contains": "time",
149 |       "values": {
150 |         "max": 2.1008,
151 |         "p(90)": 0.21678,
152 |         "p(95)": 0.26238999999999996,
153 |         "avg": 0.08931565995525728,
154 |         "min": 0.0096,
155 |         "med": 0.0534
156 |       }
157 |     },
158 |     "http_reqs": {
159 |       "type": "counter",
160 |       "contains": "default",
161 |       "values": {
162 |         "count": 149,
163 |         "rate": 4.797764208391139
164 |       }
165 |     },
166 |     "http_req_duration": {
167 |       "type": "trend",
168 |       "contains": "time",
169 |       "values": {
170 |         "min": 32.015,
171 |         "med": 35.7894,
172 |         "max": 225.6931,
173 |         "p(90)": 42.34002000000001,
174 |         "p(95)": 44.55441999999999,
175 |         "avg": 38.04265570469799
176 |       },
177 |       "thresholds": {
178 |         "p(90) < 4": {
179 |           "ok": false
180 |         },
181 |         "p(95) < 800": {
182 |           "ok": true
183 |         },
184 |         "p(99.9) < 2000": {
185 |           "ok": true
186 |         }
187 |       }
188 |     },
189 |     "http_req_receiving": {
190 |       "type": "trend",
191 |       "contains": "time",
192 |       "values": {
193 |         "med": 0.1969,
194 |         "max": 6.3429,
195 |         "p(90)": 0.9294600000000013,
196 |         "p(95)": 2.013659999999999,
197 |         "avg": 0.4213006711409398,
198 |         "min": 0.0413
199 |       }
200 |     },
201 |     "data_sent": {
202 |       "contains": "data",
203 |       "values": {
204 |         "count": 11324,
205 |         "rate": 364.6300798377266
206 |       },
207 |       "type": "counter"
208 |     },
209 |     "vus_max": {
210 |       "type": "gauge",
211 |       "contains": "default",
212 |       "values": {
213 |         "value": 10,
214 |         "min": 10,
215 |         "max": 10
216 |       }
217 |     },
218 |     "iteration_duration": {
219 |       "type": "trend",
220 |       "contains": "time",
221 |       "values": {
222 |         "max": 1332.5394,
223 |         "p(90)": 1044.70342,
224 |         "p(95)": 1079.7749000000001,
225 |         "avg": 1042.4809630872487,
226 |         "min": 1032.6804,
227 |         "med": 1037.3097
228 |       }
229 |     },
230 |     "http_req_connecting": {
231 |       "type": "trend",
232 |       "contains": "time",
233 |       "values": {
234 |         "p(90)": 0,
235 |         "p(95)": 34.10865999999999,
236 |         "avg": 2.2673449664429532,
237 |         "min": 0,
238 |         "med": 0,
239 |         "max": 44.6731
240 |       }
241 |     },
242 |     "errorRate": {
243 |       "type": "rate",
244 |       "contains": "default",
245 |       "values": {
246 |         "rate": 0,
247 |         "passes": 0,
248 |         "fails": 29
249 |       },
250 |       "thresholds": {
251 |         "rate < 0.1": {
252 |           "ok": false
253 |         }
254 |       }
255 |     },
256 |     "checks": {
257 |       "type": "rate",
258 |       "contains": "default",
259 |       "values": {
260 |         "rate": 0.6666666666666666,
261 |         "passes": 298,
262 |         "fails": 149
263 |       },
264 |       "thresholds": {
265 |         "rate>0.9": {
266 |           "ok": false
267 |         }
268 |       }
269 |     }
270 |   }
271 | }


--------------------------------------------------------------------------------
/dev/index.js:
--------------------------------------------------------------------------------
1 | const reporter = require('../dist/index');
2 | 
3 | reporter.generateSummaryReport({
4 |   jsonFile: './export.json',
5 |   output: '.'
6 | })


--------------------------------------------------------------------------------
/dev/report.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <title>K6 Summary Report</title>
  6 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  7 |   <style>
  8 |     ::-webkit-scrollbar {
  9 |       width: 0px;
 10 |       background: transparent; /* make scrollbar transparent */
 11 |     }
 12 |     .fail-block {
 13 |       background-color: #F9DCDE;
 14 |       color: #9b0909;
 15 |     }
 16 |     .success-block {
 17 |       background-color: #D7EADA;
 18 |       color: #283618;
 19 |     }
 20 |     .banner-danger {
 21 |       background-color: #D94851;
 22 |       color: white;
 23 |     }
 24 |     .banner-success {
 25 |       background-color: #D7EADA;
 26 |       color: #283618;
 27 |     }
 28 |   </style>
 29 | </head>
 30 | 
 31 | <body>
 32 |   <div class="container">
 33 |     <div class="jumbotron jumbotron-fluid bg-white my-5">
 34 |       <div class="container px-0 mb-5">
 35 |         <h1 class="display-2 text-primary text-dark text-center">K6 Summary Report</h1>
 36 |         <p class="text-secondary text-center">Generated at 6/29/2021, 9:47:10 PM</p>
 37 |       </div>
 38 | 
 39 |       
 40 |         <div class="my-3">
 41 |           <div class="mt-3">
 42 |             <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseThreshold"
 43 |             aria-expanded="false" aria-controls="collapseThreshold">
 44 |               Thresholds
 45 |             </button>
 46 |             <p class="text-secondary">Pass/fail criteria used to specify the performance expectations of the system under test.</p>
 47 |             
 48 |               <div class="alert alert-warning alert-dismissible fade show banner-danger mt-3" role="alert">
 49 |                 4 thresholds were not met
 50 |               </div>
 51 |             
 52 |           </div>
 53 |           
 54 |           <div class="collapse show" id="collapseThreshold">
 55 |             <p class="d-inline-block me-3 text-success">passes: 2</p>
 56 |             <p class="d-inline-block me-3 text-danger">fails: 4</p>
 57 |             <ul class="list-group">
 58 |               
 59 |                 <li class="list-group-item">
 60 |                   <h6>iterations</h6>
 61 |                   <ul class="list-group">
 62 |                     
 63 |                     
 64 |                     <li class="list-group-item fail-block">
 65 |                     
 66 |                       count &gt; 1000
 67 |                     </li>
 68 |                     
 69 |                   </ul>
 70 |                 </li>
 71 |               
 72 |                 <li class="list-group-item">
 73 |                   <h6>http_req_duration</h6>
 74 |                   <ul class="list-group">
 75 |                     
 76 |                     
 77 |                     <li class="list-group-item fail-block">
 78 |                     
 79 |                       p(90) &lt; 4
 80 |                     </li>
 81 |                     
 82 |                     
 83 |                     <li class="list-group-item success-block">
 84 |                     
 85 |                       p(95) &lt; 800
 86 |                     </li>
 87 |                     
 88 |                     
 89 |                     <li class="list-group-item success-block">
 90 |                     
 91 |                       p(99.9) &lt; 2000
 92 |                     </li>
 93 |                     
 94 |                   </ul>
 95 |                 </li>
 96 |               
 97 |                 <li class="list-group-item">
 98 |                   <h6>errorRate</h6>
 99 |                   <ul class="list-group">
100 |                     
101 |                     
102 |                     <li class="list-group-item fail-block">
103 |                     
104 |                       rate &lt; 0.1
105 |                     </li>
106 |                     
107 |                   </ul>
108 |                 </li>
109 |               
110 |                 <li class="list-group-item">
111 |                   <h6>checks</h6>
112 |                   <ul class="list-group">
113 |                     
114 |                     
115 |                     <li class="list-group-item fail-block">
116 |                     
117 |                       rate&gt;0.9
118 |                     </li>
119 |                     
120 |                   </ul>
121 |                 </li>
122 |               
123 |             </ul>
124 |           </div>
125 |         </div>
126 |       
127 | 
128 |       
129 |       <div>
130 |         <div>
131 |           <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseExample"
132 |             aria-expanded="false" aria-controls="collapseExample">
133 |             Checks
134 |           </button>
135 |           <p class="text-secondary">Asserts that don't halt the execution unless specified in the threshold.</p>
136 |         </div>
137 |         <div class="collapse show mt-4" id="collapseExample">
138 |           <table class="table table-hover table-sm">
139 |             <thead>
140 |               <tr>
141 |                 <th scope="col">#</th>
142 |                 <th scope="col">check</th>
143 |                 <th scope="col">passes</th>
144 |                 <th scope="col">fails</th>
145 |               </tr>
146 |             </thead>
147 |             <tbody>
148 |               
149 |               
150 |               <tr>
151 |                 
152 |                 <th scope="row" class="text-secondary">1</th>
153 |                 <td>status is 200 in individual group</td>
154 |                 <td>149</td>
155 |                 <td>0</td>
156 |               </tr>
157 |               
158 |               
159 |               <tr class="fail-block">
160 |                 
161 |                 <th scope="row" class="text-secondary">2</th>
162 |                 <td>bigger group ⇀ group one ⇀ status is 201 in group one</td>
163 |                 <td>0</td>
164 |                 <td>149</td>
165 |               </tr>
166 |               
167 |               
168 |               <tr>
169 |                 
170 |                 <th scope="row" class="text-secondary">3</th>
171 |                 <td>bigger group ⇀ group two ⇀ status is 200 in group one</td>
172 |                 <td>149</td>
173 |                 <td>0</td>
174 |               </tr>
175 |               
176 |             </tbody>
177 |           </table>
178 |           <p class="d-inline-block me-3 text-success">passes: 298</p>
179 |           <p class="d-inline-block me-3 text-danger">fails: 149</p>
180 |           <p class="d-inline-block text-info">pass rate: 66.67%</p>
181 |           
182 |           
183 |             
184 |               <p class="text-danger">Threshold for checks was not met, more details in the threshold session</p>
185 |             
186 |           
187 |         </div>
188 |       </div>
189 |       
190 | 
191 |       <div class="mt-3">
192 |         <div class="mb-4">
193 |           <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseMetric"
194 |             aria-expanded="false" aria-controls="collapseMetric">
195 |             Metrics
196 |           </button>
197 |           <p class="text-secondary">Important aspect of metrics management in k6</p>
198 |         </div>
199 |         <div class="collapse show" id="collapseMetric">
200 |           
201 |           <div class="mb-5">
202 |             <h5>A metric that cumulatively sums added values.</h5>
203 |             <table class="table table-hover table-sm">
204 |               <thead>
205 |                 <tr>
206 |                   <th scope="col">#</th>
207 |                   <th scope="col">name</th>
208 |                   <th scope="col">count</th>
209 |                   <th scope="col">rate</th>
210 |                 </tr>
211 |               </thead>
212 |               <tbody>
213 |                 
214 |                 
215 |                 <tr>
216 |                 
217 |                   <th scope="row" class="text-secondary">1</th>
218 |                   <td>data_received</td>
219 |                   <td>1645162</td>
220 |                   <td>52973.82121211533</td>
221 |                 </tr>
222 |                 
223 |                 
224 |                 <tr>
225 |                 
226 |                   <th scope="row" class="text-secondary">2</th>
227 |                   <td>data_sent</td>
228 |                   <td>11324</td>
229 |                   <td>364.6300798377266</td>
230 |                 </tr>
231 |                 
232 |                 
233 |                 <tr>
234 |                 
235 |                   <th scope="row" class="text-secondary">3</th>
236 |                   <td>http_reqs</td>
237 |                   <td>149</td>
238 |                   <td>4.797764208391139</td>
239 |                 </tr>
240 |                 
241 |                 
242 |                 <tr class="fail-block">
243 |                 
244 |                   <th scope="row" class="text-secondary">4</th>
245 |                   <td>iterations</td>
246 |                   <td>149</td>
247 |                   <td>4.797764208391139</td>
248 |                 </tr>
249 |                 
250 |               </tbody>
251 |             </table>
252 |           </div>
253 |           
254 | 
255 |           
256 |           <div class="mb-5">
257 |             <h5>A metric that allows for calculating statistics on the added values (min, max, average and percentiles).</h5>
258 |             <table class="table table-hover table-sm">
259 |               <thead>
260 |                 <tr>
261 |                   <th scope="col">#</th>
262 |                   <th scope="col">name</th>
263 |                   <th scope="col">avg</th>
264 |                   <th scope="col">max</th>
265 |                   <th scope="col">med</th>
266 |                   <th scope="col">min</th>
267 |                   <th scope="col">P(90)</th>
268 |                   <th scope="col">P(95)</th>
269 |                 </tr>
270 |               </thead>
271 |               <tbody>
272 |                 
273 |                 
274 |                 <tr>
275 |                 
276 |                   <th scope="row" class="text-secondary">1</th>
277 |                   <td>group_duration</td>
278 |                   <td>0.09 ms</td>
279 |                   <td>2.10 ms</td>
280 |                   <td>0.05 ms</td>
281 |                   <td>0.01 ms</td>
282 |                   <td>0.22 ms</td>
283 |                   <td>0.26 ms</td>
284 |                 </tr>
285 |                 
286 |                 
287 |                 <tr>
288 |                 
289 |                   <th scope="row" class="text-secondary">2</th>
290 |                   <td>http_req_blocked</td>
291 |                   <td>2.70 ms</td>
292 |                   <td>97.96 ms</td>
293 |                   <td>0.02 ms</td>
294 |                   <td>0.00 ms</td>
295 |                   <td>0.02 ms</td>
296 |                   <td>34.25 ms</td>
297 |                 </tr>
298 |                 
299 |                 
300 |                 <tr>
301 |                 
302 |                   <th scope="row" class="text-secondary">3</th>
303 |                   <td>http_req_connecting</td>
304 |                   <td>2.27 ms</td>
305 |                   <td>44.67 ms</td>
306 |                   <td>0.00 ms</td>
307 |                   <td>0.00 ms</td>
308 |                   <td>0.00 ms</td>
309 |                   <td>34.11 ms</td>
310 |                 </tr>
311 |                 
312 |                 
313 |                 <tr class="fail-block">
314 |                 
315 |                   <th scope="row" class="text-secondary">4</th>
316 |                   <td>http_req_duration</td>
317 |                   <td>38.04 ms</td>
318 |                   <td>225.69 ms</td>
319 |                   <td>35.79 ms</td>
320 |                   <td>32.02 ms</td>
321 |                   <td>42.34 ms</td>
322 |                   <td>44.55 ms</td>
323 |                 </tr>
324 |                 
325 |                 
326 |                 <tr>
327 |                 
328 |                   <th scope="row" class="text-secondary">5</th>
329 |                   <td>http_req_receiving</td>
330 |                   <td>0.42 ms</td>
331 |                   <td>6.34 ms</td>
332 |                   <td>0.20 ms</td>
333 |                   <td>0.04 ms</td>
334 |                   <td>0.93 ms</td>
335 |                   <td>2.01 ms</td>
336 |                 </tr>
337 |                 
338 |                 
339 |                 <tr>
340 |                 
341 |                   <th scope="row" class="text-secondary">6</th>
342 |                   <td>http_req_sending</td>
343 |                   <td>0.06 ms</td>
344 |                   <td>2.90 ms</td>
345 |                   <td>0.04 ms</td>
346 |                   <td>0.01 ms</td>
347 |                   <td>0.06 ms</td>
348 |                   <td>0.11 ms</td>
349 |                 </tr>
350 |                 
351 |                 
352 |                 <tr>
353 |                 
354 |                   <th scope="row" class="text-secondary">7</th>
355 |                   <td>http_req_tls_handshaking</td>
356 |                   <td>0.00 ms</td>
357 |                   <td>0.00 ms</td>
358 |                   <td>0.00 ms</td>
359 |                   <td>0.00 ms</td>
360 |                   <td>0.00 ms</td>
361 |                   <td>0.00 ms</td>
362 |                 </tr>
363 |                 
364 |                 
365 |                 <tr>
366 |                 
367 |                   <th scope="row" class="text-secondary">8</th>
368 |                   <td>http_req_waiting</td>
369 |                   <td>37.56 ms</td>
370 |                   <td>220.03 ms</td>
371 |                   <td>35.51 ms</td>
372 |                   <td>31.37 ms</td>
373 |                   <td>41.78 ms</td>
374 |                   <td>43.45 ms</td>
375 |                 </tr>
376 |                 
377 |                 
378 |                 <tr>
379 |                 
380 |                   <th scope="row" class="text-secondary">9</th>
381 |                   <td>iteration_duration</td>
382 |                   <td>1042.48 ms</td>
383 |                   <td>1332.54 ms</td>
384 |                   <td>1037.31 ms</td>
385 |                   <td>1032.68 ms</td>
386 |                   <td>1044.70 ms</td>
387 |                   <td>1079.77 ms</td>
388 |                 </tr>
389 |                 
390 |               </tbody>
391 |             </table>
392 |           </div>
393 |           
394 | 
395 |           
396 |             <div class="mb-5">
397 |               <h5>A metric that tracks the percentage of added values that are non-zero.</h5>
398 |               <table class="table table-hover table-sm">
399 |                 <thead>
400 |                   <tr>
401 |                     <th scope="col">#</th>
402 |                     <th scope="col">name</th>
403 |                     <th scope="col">rate</th>
404 |                     <th scope="col">passes</th>
405 |                     <th scope="col">fails</th>
406 |                   </tr>
407 |                 </thead>
408 |                 <tbody>
409 |                   
410 |                   
411 |                   <tr class="fail-block">
412 |                   
413 |                     <th scope="row" class="text-secondary">1</th>
414 |                     <td>errorRate</td>
415 |                     <td>0</td>
416 |                     <td>0</td>
417 |                     <td>29</td>
418 |                   </tr>
419 |                   
420 |                 </tbody>
421 |               </table>
422 |             </div>
423 |           
424 | 
425 |           
426 |             <div>
427 |               <h5>A metric that stores the min, max and last values added to it.</h5>
428 |               <table class="table table-hover table-sm">
429 |                 <thead>
430 |                   <tr>
431 |                     <th scope="col">#</th>
432 |                     <th scope="col">name</th>
433 |                     <th scope="col">max</th>
434 |                     <th scope="col">min</th>
435 |                     <th scope="col">value</th>
436 |                   </tr>
437 |                 </thead>
438 |                 <tbody>
439 |                   
440 |                   
441 |                   <tr>
442 |                   
443 |                     <th scope="row" class="text-secondary">1</th>
444 |                     <td>vus</td>
445 |                     <td>9</td>
446 |                     <td>1</td>
447 |                     <td>1</td>
448 |                   </tr>
449 |                   
450 |                   
451 |                   <tr>
452 |                   
453 |                     <th scope="row" class="text-secondary">2</th>
454 |                     <td>vus_max</td>
455 |                     <td>10</td>
456 |                     <td>10</td>
457 |                     <td>10</td>
458 |                   </tr>
459 |                   
460 |                 </tbody>
461 |               </table>
462 |               
463 |                  
464 |                   <p class="text-danger">3 metrics failed the thresholds, more details in the threshold session</p>
465 |                 
466 |               
467 |             </div>
468 |           
469 |         </div>
470 |       </div>
471 |       <hr class="mt-5"/>
472 |       <footer class="text-secondary text-center">Powered by k6-html-reporter</footer>
473 | 
474 | 
475 | 
476 | 
477 |     </div>
478 |   </div>
479 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
480 | </body>
481 | 
482 | </html>


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "roots": [
 3 |     "<rootDir>/src"
 4 |   ],
 5 |   "testMatch": [
 6 |     "**/__tests__/**/*.+(ts|tsx|js)",
 7 |     "**/?(*.)+(spec|test).+(ts|tsx|js)"
 8 |   ],
 9 |   "transform": {
10 |     "^.+\\.(ts|tsx)$": "ts-jest"
11 |   },
12 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "k6-html-reporter",
 3 |   "version": "1.0.5",
 4 |   "description": "A html reporter for k6",
 5 |   "main": "dist/index.js",
 6 |   "typings": "dist/index.d.ts",
 7 |   "dependencies": {
 8 |     "ejs": "^3.1.5"
 9 |   },
10 |   "devDependencies": {
11 |     "@types/jest": "^26.0.20",
12 |     "@types/node": "^14.14.10",
13 |     "jest": "^26.6.3",
14 |     "ts-jest": "^26.5.3",
15 |     "ts-node": "^9.1.0",
16 |     "typescript": "^4.2.3"
17 |   },
18 |   "scripts": {
19 |     "build": "rm -rf dist && tsc",
20 |     "dev": "rm -rf dist && tsc && cd dev && node index.js",
21 |     "start": "ts-node src/index.ts",
22 |     "test": "jest"
23 |   },
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/szboynono/k6-html-reporter.git"
27 |   },
28 |   "keywords": [
29 |     "report",
30 |     "k6",
31 |     "html",
32 |     "json to html",
33 |     "k6 html reporter",
34 |     "k6 summary report"
35 |   ],
36 |   "author": "",
37 |   "license": "ISC",
38 |   "bugs": {
39 |     "url": "https://github.com/szboynono/k6-html-reporter/issues"
40 |   },
41 |   "homepage": "https://github.com/szboynono/k6-html-reporter#readme"
42 | }
43 | 


--------------------------------------------------------------------------------
/screenshot/k6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/szboynono/k6-html-reporter/6470d7a96ea91fb3da2fd064ce6c89ce7e055bd4/screenshot/k6.png


--------------------------------------------------------------------------------
/src/index.test.ts:
--------------------------------------------------------------------------------
 1 | import * as reporter from "./reporter";
 2 | import { generateSummaryReport } from './index'
 3 | 
 4 | describe('generateSummaryReport()', () => {
 5 |   test('should generate a summary report', () => {
 6 |     jest.spyOn(reporter, 'generate').mockImplementation(jest.fn())
 7 |     generateSummaryReport({} as any)
 8 |     expect(reporter.generate).toHaveBeenCalledWith({})
 9 |   })
10 | })


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { generate } from "./reporter";
2 | import { Options } from "./types";
3 | 
4 | export function generateSummaryReport(options: Options) {
5 |   generate(options);
6 | }
7 | 


--------------------------------------------------------------------------------
/src/reporter.ts:
--------------------------------------------------------------------------------
  1 | import fs from "fs";
  2 | import path from "path";
  3 | import ejs from "ejs";
  4 | import { DisplayTotalThresholdResult, MetricsType, Options } from "./types";
  5 | import { compareNameAscending } from "./util";
  6 | 
  7 | export function generate(options: Options) {
  8 |   const resolvedInputPath = path.resolve(process.cwd(), options.jsonFile);
  9 |   const resolvedOutputPath = path.resolve(process.cwd(), options.output);
 10 |   const jsonReport = readJsonReport(resolvedInputPath);
 11 |   writeHtmlReport(jsonReport, resolvedOutputPath);
 12 | }
 13 | 
 14 | function readJsonReport(filePath: string): JSON {
 15 |   const resolvedPath = path.resolve(__dirname, filePath);
 16 |   const rawData = fs.readFileSync(resolvedPath);
 17 |   return JSON.parse(rawData.toString());
 18 | }
 19 | 
 20 | function writeHtmlReport(content: JSON, filePath: string): void {
 21 |   const time = new Date().toLocaleString();
 22 |   const templatePath = path.resolve(__dirname, "../templates/template.ejs");
 23 |   const checkRootGroupData = content["root_group"];
 24 |   const metricsData = content["metrics"];
 25 | 
 26 |   const {
 27 |     checkMetric,
 28 |     counterMetrics,
 29 |     trendMetrics,
 30 |     gaugeMetrics,
 31 |     rateMetrics,
 32 |     allThresholds,
 33 |     totalThresholdResult,
 34 |   } = mapMetrics(metricsData);
 35 |   const checks = getChecks(checkRootGroupData).map((data) => {
 36 |     const splitedPath = data.path.split("::");
 37 |     splitedPath.shift();
 38 | 
 39 |     return {
 40 |       ...data,
 41 |       pathArray: splitedPath.join(" \u21C0 "),
 42 |     };
 43 |   });
 44 | 
 45 |   ejs.renderFile(
 46 |     templatePath,
 47 |     {
 48 |       checks,
 49 |       rateMetrics: rateMetrics.sort(compareNameAscending),
 50 |       checkMetric,
 51 |       counterMetrics: counterMetrics.sort(compareNameAscending),
 52 |       trendMetrics: trendMetrics.sort(compareNameAscending),
 53 |       gaugeMetrics: gaugeMetrics.sort(compareNameAscending),
 54 |       allThresholds,
 55 |       totalThresholdResult,
 56 |       time,
 57 |     },
 58 |     {},
 59 |     function (err, str) {
 60 |       if (err) {
 61 |         console.error(err);
 62 |       }
 63 | 
 64 |       let html = ejs.render(str);
 65 |       if (!fs.existsSync(filePath)) {
 66 |         fs.mkdirSync(filePath, { recursive: true });
 67 |       }
 68 |       fs.writeFileSync(`${filePath}/report.html`, html);
 69 |       console.log(`Report is created at ${filePath}`);
 70 |     }
 71 |   );
 72 | }
 73 | 
 74 | function mapMetrics(data: Object) {
 75 |   let checkMetric = {};
 76 |   const counterMetrics = [];
 77 |   const trendMetrics = [];
 78 |   const gaugeMetrics = [];
 79 |   const rateMetrics = [];
 80 |   const allThresholds = [];
 81 | 
 82 |   let totalThresholdResult: DisplayTotalThresholdResult = {
 83 |     passes: 0,
 84 |     fails: 0,
 85 |     failedMetricsNum: 0,
 86 |   };
 87 | 
 88 |   Object.entries(data).forEach(([key, value]) => {
 89 |     if (value.type === MetricsType.COUNTER) {
 90 |       const { updatedThresholdResult, displayThreshold, metric } =
 91 |         handleMetricValues(key, value, totalThresholdResult);
 92 |       totalThresholdResult = {
 93 |         ...totalThresholdResult,
 94 |         ...updatedThresholdResult,
 95 |       };
 96 |       if (displayThreshold) {
 97 |         allThresholds.push(displayThreshold);
 98 |       }
 99 |       counterMetrics.push(metric);
100 |     } else if (value.type === MetricsType.TREND) {
101 |       const { updatedThresholdResult, displayThreshold, metric } =
102 |         handleMetricValues(key, value, totalThresholdResult);
103 |       totalThresholdResult = {
104 |         ...totalThresholdResult,
105 |         ...updatedThresholdResult,
106 |       };
107 |       if (displayThreshold) {
108 |         allThresholds.push(displayThreshold);
109 |       }
110 |       trendMetrics.push(metric);
111 |     } else if (key === "checks") {
112 |       const { updatedThresholdResult, displayThreshold, metric } =
113 |         handleMetricValues(key, value, totalThresholdResult);
114 |       totalThresholdResult = {
115 |         ...totalThresholdResult,
116 |         ...updatedThresholdResult,
117 |       };
118 |       if (displayThreshold) {
119 |         allThresholds.push(displayThreshold);
120 |       }
121 |       checkMetric = metric;
122 |     } else if (value.type === MetricsType.GAUGE) {
123 |       const { updatedThresholdResult, displayThreshold, metric } =
124 |         handleMetricValues(key, value, totalThresholdResult);
125 |       totalThresholdResult = {
126 |         ...totalThresholdResult,
127 |         ...updatedThresholdResult,
128 |       };
129 |       if (displayThreshold) {
130 |         allThresholds.push(displayThreshold);
131 |       }
132 |       gaugeMetrics.push(metric);
133 |     } else if (value.type === MetricsType.RATE && key !== "checks") {
134 |       const { updatedThresholdResult, displayThreshold, metric } =
135 |         handleMetricValues(key, value, totalThresholdResult);
136 |       totalThresholdResult = {
137 |         ...totalThresholdResult,
138 |         ...updatedThresholdResult,
139 |       };
140 |       if (displayThreshold) {
141 |         allThresholds.push(displayThreshold);
142 |       }
143 |       rateMetrics.push(metric);
144 |     }
145 |   });
146 |   return {
147 |     checkMetric,
148 |     counterMetrics,
149 |     trendMetrics,
150 |     gaugeMetrics,
151 |     rateMetrics,
152 |     allThresholds,
153 |     totalThresholdResult,
154 |   };
155 | }
156 | 
157 | function handleMetricValues(
158 |   key: string,
159 |   value: any,
160 |   currentTotalThresholdResult: DisplayTotalThresholdResult
161 | ) {
162 |   const metric = {
163 |     name: key,
164 |     ...value,
165 |     thresholdFailed: undefined,
166 |   };
167 | 
168 |   const updatedThresholdResult = { ...currentTotalThresholdResult };
169 | 
170 |   if (value.thresholds) {
171 |     const [passes, fails] = thresholdResult(value.thresholds);
172 | 
173 |     if (fails > 0 && key !== "checks") {
174 |       updatedThresholdResult.failedMetricsNum++;
175 |     }
176 |     updatedThresholdResult.passes += passes;
177 |     updatedThresholdResult.fails += fails;
178 |     metric.thresholdFailed = fails > 0;
179 | 
180 |     return {
181 |       displayThreshold: {
182 |         name: key,
183 |         thresholds: value.thresholds,
184 |       },
185 |       updatedThresholdResult,
186 |       metric,
187 |     };
188 |   }
189 | 
190 |   return { updatedThresholdResult, metric };
191 | }
192 | 
193 | function thresholdResult(thresholds: Object | undefined) {
194 |   if (thresholds) {
195 |     const thresholdArr = Object.values(thresholds);
196 |     const passes = thresholdArr.filter((value) => value.ok === true).length;
197 |     const fails = thresholdArr.length - passes;
198 |     return [passes, fails];
199 |   }
200 | }
201 | 
202 | function getChecks(data: any) {
203 |   let checksOutput = [];
204 | 
205 |   findChecksRecursively(data);
206 | 
207 |   function findChecksRecursively(data) {
208 |     if (data.groups.length === 0 && data.checks.length === 0) {
209 |       return;
210 |     }
211 | 
212 |     if (data.checks.length > 0) {
213 |       Object.values(data.checks).forEach((value) => {
214 |         checksOutput.push(value);
215 |       });
216 |     }
217 | 
218 |     for (let item in data.groups) {
219 |       findChecksRecursively(data.groups[item]);
220 |     }
221 |   }
222 | 
223 |   return checksOutput;
224 | }
225 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export type Options = {
 2 |   jsonFile: string,
 3 |   output: string,
 4 | }
 5 | 
 6 | export enum MetricsType {
 7 |   GAUGE = 'gauge',
 8 |   RATE = 'rate',
 9 |   TREND = 'trend',
10 |   COUNTER = 'counter'
11 | }
12 | 
13 | export interface DisplayTotalThresholdResult {
14 |   passes: number,
15 |   fails: number,
16 |   failedMetricsNum: number
17 | }


--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
 1 | export const compareNameAscending = (a, b): number => {
 2 |   if (a.name < b.name) {
 3 |     return -1;
 4 |   } else if (a.name > b.name) {
 5 |     return 1;
 6 |   } else {
 7 |     return 0;
 8 |   }
 9 | };
10 | 


--------------------------------------------------------------------------------
/templates/template.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <title>K6 Summary Report</title>
  6 |   <meta charset="UTF-8">
  7 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  8 |   <style>
  9 |     ::-webkit-scrollbar {
 10 |       width: 0px;
 11 |       background: transparent; /* make scrollbar transparent */
 12 |     }
 13 |     .fail-block {
 14 |       background-color: #F9DCDE;
 15 |       color: #9b0909;
 16 |     }
 17 |     .success-block {
 18 |       background-color: #D7EADA;
 19 |       color: #283618;
 20 |     }
 21 |     .banner-danger {
 22 |       background-color: #D94851;
 23 |       color: white;
 24 |     }
 25 |     .banner-success {
 26 |       background-color: #D7EADA;
 27 |       color: #283618;
 28 |     }
 29 |   </style>
 30 | </head>
 31 | 
 32 | <body>
 33 |   <div class="container">
 34 |     <div class="jumbotron jumbotron-fluid bg-white my-5">
 35 |       <div class="container px-0 mb-5">
 36 |         <h1 class="display-2 text-primary text-dark text-center">K6 Summary Report</h1>
 37 |         <p class="text-secondary text-center">Generated at <%=time%></p>
 38 |       </div>
 39 | 
 40 |       <% if(allThresholds.length > 0) { %>
 41 |         <div class="my-3">
 42 |           <div class="mt-3">
 43 |             <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseThreshold"
 44 |             aria-expanded="false" aria-controls="collapseThreshold">
 45 |               Thresholds
 46 |             </button>
 47 |             <p class="text-secondary">Pass/fail criteria used to specify the performance expectations of the system under test.</p>
 48 |             <% if(totalThresholdResult.fails > 0) { %>
 49 |               <div class="alert alert-warning alert-dismissible fade show banner-danger mt-3" role="alert">
 50 |                 <%=totalThresholdResult.fails%> <%if(totalThresholdResult.fails === 1){%>threshold was<%} else {%>thresholds were<%}%> not met
 51 |               </div>
 52 |             <% } else { %>
 53 |               <div class="alert banner-success my-2" role="alert">
 54 |                 All thresholds were met!
 55 |               </div>
 56 |             <% } %>
 57 |           </div>
 58 |           
 59 |           <div class="collapse show" id="collapseThreshold">
 60 |             <p class="d-inline-block me-3 text-success">passes: <%= totalThresholdResult.passes %></p>
 61 |             <p class="d-inline-block me-3 text-danger">fails: <%= totalThresholdResult.fails %></p>
 62 |             <ul class="list-group">
 63 |               <%allThresholds.forEach(data => {%>
 64 |                 <li class="list-group-item">
 65 |                   <h6><%= data.name %></h6>
 66 |                   <ul class="list-group">
 67 |                     <% for(let [key, value] of Object.entries(data.thresholds)) {%>
 68 |                     <% if(value.ok === false) { %>
 69 |                     <li class="list-group-item fail-block">
 70 |                     <%} else {%>
 71 |                     <li class="list-group-item success-block">
 72 |                     <%}%>
 73 |                       <%= key %>
 74 |                     </li>
 75 |                     <%}%>
 76 |                   </ul>
 77 |                 </li>
 78 |               <%})%>
 79 |             </ul>
 80 |           </div>
 81 |         </div>
 82 |       <% } %>
 83 | 
 84 |       <% if(checks.length > 0) {%>
 85 |       <div>
 86 |         <div>
 87 |           <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseExample"
 88 |             aria-expanded="false" aria-controls="collapseExample">
 89 |             Checks
 90 |           </button>
 91 |           <p class="text-secondary">Asserts that don't halt the execution unless specified in the threshold.</p>
 92 |         </div>
 93 |         <div class="collapse show mt-4" id="collapseExample">
 94 |           <table class="table table-hover table-sm">
 95 |             <thead>
 96 |               <tr>
 97 |                 <th scope="col">#</th>
 98 |                 <th scope="col">check</th>
 99 |                 <th scope="col">passes</th>
100 |                 <th scope="col">fails</th>
101 |               </tr>
102 |             </thead>
103 |             <tbody>
104 |               <% for(var i=0; i < checks.length; i++) { %>
105 |               <% if(checks[i].fails > 0) { %>
106 |               <tr class="fail-block">
107 |                 <% } else { %>
108 |               <tr>
109 |                 <% } %>
110 |                 <th scope="row" class="text-secondary"><%= i+1 %></th>
111 |                 <td><%= checks[i].pathArray%></td>
112 |                 <td><%= checks[i].passes %></td>
113 |                 <td><%= checks[i].fails %></td>
114 |               </tr>
115 |               <% } %>
116 |             </tbody>
117 |           </table>
118 |           <p class="d-inline-block me-3 text-success">passes: <%= checkMetric.values.passes %></p>
119 |           <p class="d-inline-block me-3 text-danger">fails: <%= checkMetric.values.fails %></p>
120 |           <p class="d-inline-block text-info">pass rate: <%= (checkMetric.values.passes * 100/(checkMetric.values.fails + checkMetric.values.passes)).toFixed(2) %>%</p>
121 |           
122 |           <% if(checkMetric["thresholds"]) { %>
123 |             <% if(checkMetric.thresholdFailed === true) { %>
124 |               <p class="text-danger">Threshold for checks was not met, more details in the threshold session</p>
125 |             <% } else { %>
126 |               <p class="text-success">All thresholds for checks were met</p>
127 |             <% } %>
128 |           <% } %>
129 |         </div>
130 |       </div>
131 |       <% } %>
132 | 
133 |       <div class="mt-3">
134 |         <div class="mb-4">
135 |           <button class="btn btn-lg fs-2 px-0 text-primary" style="box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#collapseMetric"
136 |             aria-expanded="false" aria-controls="collapseMetric">
137 |             Metrics
138 |           </button>
139 |           <p class="text-secondary">Important aspect of metrics management in k6</p>
140 |         </div>
141 |         <div class="collapse show" id="collapseMetric">
142 |           <% if(counterMetrics.length > 0) {%>
143 |           <div class="mb-5">
144 |             <h5>A metric that cumulatively sums added values.</h5>
145 |             <table class="table table-hover table-sm">
146 |               <thead>
147 |                 <tr>
148 |                   <th scope="col">#</th>
149 |                   <th scope="col">name</th>
150 |                   <th scope="col">count</th>
151 |                   <th scope="col">rate</th>
152 |                 </tr>
153 |               </thead>
154 |               <tbody>
155 |                 <% for(let i=0; i < counterMetrics.length; i++) { %>
156 |                 <% if(counterMetrics[i].thresholdFailed === true) {%>
157 |                 <tr class="fail-block">
158 |                 <% } else { %>
159 |                 <tr>
160 |                 <% } %>
161 |                   <th scope="row" class="text-secondary"><%= i+1 %></th>
162 |                   <td><%= counterMetrics[i].name %></td>
163 |                   <td><%= counterMetrics[i].values.count %></td>
164 |                   <td><%= counterMetrics[i].values.rate %></td>
165 |                 </tr>
166 |                 <% } %>
167 |               </tbody>
168 |             </table>
169 |           </div>
170 |           <% } %>
171 | 
172 |           <% if(trendMetrics.length > 0) {%>
173 |           <div class="mb-5">
174 |             <h5>A metric that allows for calculating statistics on the added values (min, max, average and percentiles).</h5>
175 |             <table class="table table-hover table-sm">
176 |               <thead>
177 |                 <tr>
178 |                   <th scope="col">#</th>
179 |                   <th scope="col">name</th>
180 |                   <th scope="col">avg</th>
181 |                   <th scope="col">max</th>
182 |                   <th scope="col">med</th>
183 |                   <th scope="col">min</th>
184 |                   <th scope="col">P(90)</th>
185 |                   <th scope="col">P(95)</th>
186 |                 </tr>
187 |               </thead>
188 |               <tbody>
189 |                 <% for(let i=0; i < trendMetrics.length; i++) { %>
190 |                 <% if(trendMetrics[i].thresholdFailed === true) {%>
191 |                 <tr class="fail-block">
192 |                 <% } else { %>
193 |                 <tr>
194 |                 <% } %>
195 |                   <th scope="row" class="text-secondary"><%= i+1 %></th>
196 |                   <td><%= trendMetrics[i].name %></td>
197 |                   <td><%= trendMetrics[i].values.avg.toFixed(2) %> ms</td>
198 |                   <td><%= trendMetrics[i].values.max.toFixed(2) %> ms</td>
199 |                   <td><%= trendMetrics[i].values.med.toFixed(2) %> ms</td>
200 |                   <td><%= trendMetrics[i].values.min.toFixed(2) %> ms</td>
201 |                   <td><%= trendMetrics[i].values["p(90)"].toFixed(2) %> ms</td>
202 |                   <td><%= trendMetrics[i].values["p(95)"].toFixed(2) %> ms</td>
203 |                 </tr>
204 |                 <% } %>
205 |               </tbody>
206 |             </table>
207 |           </div>
208 |           <% } %>
209 | 
210 |           <% if(rateMetrics.length > 0) {%>
211 |             <div class="mb-5">
212 |               <h5>A metric that tracks the percentage of added values that are non-zero.</h5>
213 |               <table class="table table-hover table-sm">
214 |                 <thead>
215 |                   <tr>
216 |                     <th scope="col">#</th>
217 |                     <th scope="col">name</th>
218 |                     <th scope="col">rate</th>
219 |                     <th scope="col">passes</th>
220 |                     <th scope="col">fails</th>
221 |                   </tr>
222 |                 </thead>
223 |                 <tbody>
224 |                   <% for(let i=0; i < rateMetrics.length; i++) { %>
225 |                   <% if(rateMetrics[i].thresholdFailed === true) {%>
226 |                   <tr class="fail-block">
227 |                   <% } else { %>
228 |                   <tr>
229 |                   <% } %>
230 |                     <th scope="row" class="text-secondary"><%= i+1 %></th>
231 |                     <td><%= rateMetrics[i].name %></td>
232 |                     <td><%= rateMetrics[i].values.rate %></td>
233 |                     <td><%= rateMetrics[i].values.passes %></td>
234 |                     <td><%= rateMetrics[i].values.fails %></td>
235 |                   </tr>
236 |                   <% } %>
237 |                 </tbody>
238 |               </table>
239 |             </div>
240 |           <% } %>
241 | 
242 |           <% if(gaugeMetrics.length > 0) {%>
243 |             <div>
244 |               <h5>A metric that stores the min, max and last values added to it.</h5>
245 |               <table class="table table-hover table-sm">
246 |                 <thead>
247 |                   <tr>
248 |                     <th scope="col">#</th>
249 |                     <th scope="col">name</th>
250 |                     <th scope="col">max</th>
251 |                     <th scope="col">min</th>
252 |                     <th scope="col">value</th>
253 |                   </tr>
254 |                 </thead>
255 |                 <tbody>
256 |                   <% for(let i=0; i < gaugeMetrics.length; i++) { %>
257 |                   <% if(gaugeMetrics[i].thresholdFailed === true) {%>
258 |                   <tr class="fail-block">
259 |                   <% } else { %>
260 |                   <tr>
261 |                   <% } %>
262 |                     <th scope="row" class="text-secondary"><%= i+1 %></th>
263 |                     <td><%= gaugeMetrics[i].name %></td>
264 |                     <td><%= gaugeMetrics[i].values.max %></td>
265 |                     <td><%= gaugeMetrics[i].values.min %></td>
266 |                     <td><%= gaugeMetrics[i].values.value %></td>
267 |                   </tr>
268 |                   <% } %>
269 |                 </tbody>
270 |               </table>
271 |               <% if(allThresholds.length > 0) { %>
272 |                 <%if(totalThresholdResult.failedMetricsNum === 0) {%>
273 |                   <p class="text-success mt-4">All thresholds for metrics were met</p>
274 |                 <%} else {%> 
275 |                   <p class="text-danger"><%=totalThresholdResult.failedMetricsNum%> <%if(totalThresholdResult.failedMetricsNum === 1){%>metric<%} else {%>metrics<%}%> failed the thresholds, more details in the threshold session</p>
276 |                 <%}%>
277 |               <% } %>
278 |             </div>
279 |           <% } %>
280 |         </div>
281 |       </div>
282 |       <hr class="mt-5"/>
283 |       <footer class="text-secondary text-center">Powered by k6-html-reporter</footer>
284 | 
285 | 
286 | 
287 | 
288 |     </div>
289 |   </div>
290 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
291 | </body>
292 | 
293 | </html>
294 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "commonjs",
 4 |     "esModuleInterop": true,
 5 |     "target": "es2020",
 6 |     "moduleResolution": "node",
 7 |     "sourceMap": true,
 8 |     "outDir": "dist",
 9 |     "declaration": true
10 |   },
11 |   "lib": ["es2015"],
12 |   "exclude": [
13 |     "src/**/*.test.ts"
14 |   ]
15 | }


--------------------------------------------------------------------------------