Feat: Group endpoints by error code

web/frontend/src/components/Run/RunningStatus/ResponseCodes/ResponseCodes.js

@@ -0,0 +1,162 @@
+import { Badge, Collapse, Table, Typography } from "antd";
+import React, { useEffect, useState } from "react";
+
+import { fetchMetrics } from "../../../../lib/api/endpoints/runMetric";
+import PageSpinner from "../../../layout/PageSpinner";
+
+const { Panel } = Collapse;
+const { Text } = Typography;
+
+const ResponseCodes = ({ runId }) => {
+  const [errorCodes, setErrorCodes] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const updateUrlMetrics = async (runIdToFetch) => {
+    setIsLoading(true);
+
+    const metricsRes = await fetchMetrics(runIdToFetch, 0, true);
+
+    const filterMetrics = (metricsArray) => {
+      const responseCodeGroups = {};
+
+      metricsArray.forEach((metric) => {
+        metric.responses.forEach((response) => {
+          const { responseCode } = response;
+
+          if (!responseCodeGroups[responseCode]) {
+            responseCodeGroups[responseCode] = [];
+          }
+
+          responseCodeGroups[responseCode].push(metric);
+        });
+      });
+
+      return responseCodeGroups;
+    };
+
+    const formattedUrlMetrics = metricsRes.map(
+      ({ totalCount, successCount, label, responses }) => {
+        const errorsCount = totalCount - successCount;
+
+        return {
+          key: label,
+          errorsCount,
+          responses
+        };
+      }
+    );
+
+    const errorMetrics = filterMetrics(formattedUrlMetrics);
+
+    setErrorCodes(errorMetrics);
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    updateUrlMetrics(runId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runId]);
+
+  const columns = [
+    {
+      title: "Label",
+      dataIndex: "label",
+      key: "label",
+      ellipsis: true,
+      sorter: (a, b) => a.label.localeCompare(b.label)
+    },
+    {
+      title: "Response Messages",
+      dataIndex: "responses",
+      key: "responses",
+      render: (responses) => (
+        <div>
+          {responses.map((response, idx) => (
+            <Text key={`${response.responseCode}-${idx}`}>
+              {response.messages.map((message, msgIdx) => (
+                <React.Fragment
+                  key={`${response.responseCode}-${idx}-${msgIdx}`}
+                >
+                  {message}
+                  {msgIdx !== response.messages.length - 1 && <br />}
+                </React.Fragment>
+              ))}
+              <br />
+            </Text>
+          ))}
+        </div>
+      )
+    },
+    {
+      title: "Errors Count",
+      dataIndex: "errorsCount",
+      key: "errorsCount",
+      width: 150,
+      defaultSortOrder: "descend",
+      sorter: (a, b) => a.errorsCount - b.errorsCount
+    }
+  ];
+
+  return (
+    <>
+      <div>
+        <h3>{`Error Codes ( Filter applied: < 100 and > 400 )`}</h3>
+      </div>
+      {isLoading ? (
+        <PageSpinner />
+      ) : (
+        <Collapse accordion>
+          {Object.entries(errorCodes).map(([responseCode, metrics]) => {
+            const numericResponseCode = parseInt(responseCode, 10);
+
+            if (
+              Number.isNaN(numericResponseCode) ||
+              numericResponseCode < 100 ||
+              numericResponseCode > 399 ||
+              typeof responseCode !== "string"
+            ) {
+              // Calculate the total errors count for this group
+              const totalErrorsCount = metrics.reduce(
+                (acc, metric) => acc + metric.errorsCount,
+                0
+              );
+
+              return (
+                <Panel
+                  header={
+                    <span>
+                      {responseCode}{" "}
+                      <Badge count={totalErrorsCount} overflowCount={99999} />
+                    </span>
+                  }
+                  key={responseCode}
+                >
+                  <div key={`table-${responseCode}`}>
+                    <Table
+                      dataSource={metrics.map((metric, index) => ({
+                        key: `${metric.key}-${index}`,
+                        label: metric.key,
+                        errorsCount: metric.errorsCount,
+                        responses: metric.responses.filter(
+                          (response) =>
+                            response.responseCode.toString() === responseCode
+                        )
+                      }))}
+                      columns={columns}
+                      pagination={false}
+                    />
+                  </div>
+                </Panel>
+              );
+            }
+
+            return null;
+          })}
+        </Collapse>
+      )}
+    </>
+  );
+};
+
+export default ResponseCodes;

web/frontend/src/components/Run/RunningStatus/ResponseCodes/ResponseCodes.test.js

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseCodes from "./ResponseCodes";
+
+describe("ResponseCodes", () => {
+  const mockRunId = "123";
+
+  test("should render ResponseCodes component", () => {
+    const rendered = render(<ResponseCodes runId={mockRunId} />);
+    const component = rendered.container;
+    expect(component.outerHTML).toMatchSnapshot();
+  });
+});

web/frontend/src/components/Run/RunningStatus/ResponseCodes/__snapshots__/ResponseCodes.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResponseCodes should render ResponseCodes component 1`] = `"<div><div><h3>Error Codes ( Filter applied: &lt; 100 and &gt; 400 )</h3></div><div class=\\"ant-row ant-row-center ant-row-middle\\" style=\\"align-self: center;\\"><div class=\\"ant-spin ant-spin-spinning\\"><span role=\\"img\\" aria-label=\\"loading\\" style=\\"font-size: 64px;\\" class=\\"anticon anticon-loading anticon-spin ant-spin-dot\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" data-icon=\\"loading\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path></svg></span></div></div></div>"`;

web/frontend/src/components/Run/RunningStatus/ResponseCodes/index.js

@@ -0,0 +1,3 @@
+import ResponseCodes from "./ResponseCodes";
+
+export default ResponseCodes;

web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js

@@ -21,9 +21,10 @@ import DownloadMetricsButton from "./DownloadMetricsButton";
 import RunEditableLabelsGroup from "./EditableLabelsGroup";
 import EditableTitle from "./EditableTitle";
 import RunEndpointCharts from "./EndpointCharts";
-import InitialConfiguration from "./InitialConfiguration/InitialConfiguration";
+import InitialConfiguration from "./InitialConfiguration";
 import MoreButtonsMenu from "./MoreButtonsMenu";
 import RunNotesInput from "./NotesInput";
+import ResponseCodes from "./ResponseCodes";
 import RunRunningTime from "./RunningTime";
 import StopExecutionButton from "./StopExecutionButton";
 import RunSummaryTable from "./SummaryTable";
@@ -176,6 +177,13 @@ const RunRunningStatus = ({ run }) => {
                 setActiveTabKey={setActiveTabKey}
               />
             </Tabs.TabPane>
+            <Tabs.TabPane
+              tab="Errors"
+              key="responseCodes"
+              disabled={!isRunMetricsAvailable}
+            >
+              <ResponseCodes runId={run.id} />
+            </Tabs.TabPane>
             {renderLabel ? (
               <Tabs.TabPane
                 tab="Endpoints"