From 0dc4bbe67dd9fe369d32dc1d1494988e0733890f Mon Sep 17 00:00:00 2001
From: Andy Librian <andylibrian@gmail.com>
Date: Sun, 20 Dec 2020 06:59:43 +0700
Subject: [PATCH] UI: Add load test result detail

---
 web/src/App.vue                      |  5 +++
 web/src/components/result_detail.vue | 67 ++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 web/src/components/result_detail.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index efbb98e..d3c536c 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -12,6 +12,9 @@
   <div class="section" :class="{'is-hidden': !isResultVisible}">
     <ResultSummary :summary="metricsSummary"/>
   </div>
+  <div class="section" :class="{'is-hidden': !isResultVisible}">
+    <ResultDetail :workers="workers" :summary="metricsSummary" />
+  </div>
 
 </template>
 
@@ -20,6 +23,7 @@
   import Navbar from './components/navbar.vue'
   import LaunchTest from './components/launch_test.vue'
   import ResultSummary from './components/result_summary.vue'
+  import ResultDetail from './components/result_detail.vue'
 
   let serverBaseUrl = process.env.VUE_APP_SERVER_BASE_URL;
   if (!serverBaseUrl) {
@@ -32,6 +36,7 @@
       Navbar,
       LaunchTest,
       ResultSummary,
+      ResultDetail,
     },
     data: function() {
       return {
diff --git a/web/src/components/result_detail.vue b/web/src/components/result_detail.vue
new file mode 100644
index 0000000..e20c9df
--- /dev/null
+++ b/web/src/components/result_detail.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="content">
+    <div class="card">
+      <div class="card-header">
+        <strong class="card-header-title"><span class="icon"><i class="fas fa-table" aria-hidden="true"></i></span> Result</strong>
+      </div>
+      <div class="card-content">
+        <table class="table is-bordered is-hoverable is-fullwidth">
+          <thead>
+            <tr>
+              <th>Worker</th>
+              <th>Requests (sum)</th>
+              <th>Rate (per second)</th>
+              <th>Throughput (per second)</th>
+              <th>Success (%)</th>
+              <th>Avg Resp Time (ms)</th>
+              <th>P95 Resp Time (ms)</th>
+              <th><span class="has-tooltip-arrow" data-tooltip="The total number of bytes received with the response bodies.">Total Bytes In</span></th>
+              <th><span class="has-tooltip-arrow" data-tooltip="The total number of bytes sent with the request bodies.">Total Bytes Out</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(worker, name) in workers" :key="name">
+              <td>{{ name }}</td>
+              <td>{{ worker.metrics.requests }}</td>
+              <td>{{ Math.floor(worker.metrics.rate) }}</td>
+              <td>{{ Math.floor(worker.metrics.throughput) }}</td>
+              <td>{{ Math.floor(worker.metrics.success * 100) }}</td>
+              <td>{{ worker.metrics.latencies.mean / 1000000 }}</td>
+              <td>{{ worker.metrics.latencies['95th'] / 1000000 }}</td>
+              <td>{{ worker.metrics.bytes_in.total }}</td>
+              <td>{{ worker.metrics.bytes_out.total }}</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <th>Summary</th>
+              <th>{{ summary.requests }}</th>
+              <th>{{ Math.floor(summary.rate) }}</th>
+              <th>{{ Math.floor(summary.throughput) }}</th>
+              <th>{{ Math.floor(summary.success * 100) }}</th>
+              <th>{{ summary.meanLatencies / 1000000 }}</th>
+              <th>{{ summary.meanP95Latencies / 1000000 }}</th>
+              <th>{{ summary.totalBytesIn }}</th>
+              <th>{{ summary.totalBytesOut }}</th>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ResultDetail',
+  props: {
+    workers: Object,
+    summary: Object,
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>