feat: total line for run run summary table (#215)

Farfetch · Feb 18, 2022 · a1eead5 · a1eead5
1 parent a1ef5bb
commit a1eead5
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 6 deletions.
diff --git a/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js b/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js
@@ -1,8 +1,9 @@
-import { Table } from "antd";
+import { Table, Typography } from "antd";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
 
 import { fetchMetrics } from "../../../../lib/api/endpoints/runMetric";
+import { avg } from "../../../../lib/utils";
 
 const columns = [
   {
@@ -153,11 +154,64 @@ const RunSummaryTable = ({ runId }) => {
         loading={isLoading}
         dataSource={urlMetrics}
         columns={columns}
-        pagination={{
-          defaultPageSize: 200,
-          hideOnSinglePage: true,
-          pageSizeOptions: [50, 100, 200, 1000],
-          position: ["bottomRight"]
+        pagination={false}
+        summary={(pageData) => {
+          let total = 0;
+          let totalLatencyP50 = 0;
+          let totalSuccessCount = 0;
+          let totalRpm = 0;
+          let totalErrorRate = 0;
+          const itemsCount = pageData.length;
+
+          pageData.forEach(
+            ({ totalCount, latencyP50, successCount, rpm, errorRate }) => {
+              total += totalCount;
+              totalLatencyP50 += latencyP50;
+              totalSuccessCount += successCount;
+              totalRpm += parseFloat(rpm);
+              totalErrorRate += parseFloat(errorRate);
+            }
+          );
+
+          return (
+            <>
+              <Table.Summary.Row>
+                <Table.Summary.Cell>
+                  <Typography.Text strong>Total</Typography.Text>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  <Typography.Text>
+                    <Typography.Text strong>
+                      {avg(totalLatencyP50, itemsCount).toFixed(2)}
+                    </Typography.Text>
+                    <span style={{ fontSize: 11 }}> ms</span>
+                  </Typography.Text>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  <Table.Summary.Cell>
+                    <Typography.Text strong>
+                      {totalSuccessCount}
+                    </Typography.Text>
+                  </Table.Summary.Cell>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  <Typography.Text strong>{total}</Typography.Text>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  <Typography.Text strong>
+                    {avg(totalRpm, itemsCount).toFixed(0)}
+                  </Typography.Text>
+                  <span style={{ fontSize: 11 }}> req/min</span>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  <Typography.Text strong>
+                    {avg(totalErrorRate, itemsCount).toFixed(2)}
+                  </Typography.Text>
+                  <span style={{ fontSize: 11 }}> %</span>
+                </Table.Summary.Cell>
+              </Table.Summary.Row>
+            </>
+          );
         }}
       />
     </>

diff --git a/web/frontend/src/lib/utils.js b/web/frontend/src/lib/utils.js
@@ -0,0 +1,2 @@
+export const avg = (value, itemsCount) =>
+  itemsCount === 0 ? 0 : value / itemsCount;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const avg = (value, itemsCount) =>
		itemsCount === 0 ? 0 : value / itemsCount;