Skip to content

Commit

Permalink
Refactors RunRunningStatus
Browse files Browse the repository at this point in the history
  • Loading branch information
André Santos committed Sep 26, 2023
1 parent d877fd2 commit 89646fd
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 116 deletions.
24 changes: 21 additions & 3 deletions web/frontend/src/components/Run/RunningStatus/MetricsHandler/MetricsHandler.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable max-statements */
// MetricManager.js
import moment from "moment";
import { useEffect, useRef, useState } from "react";

Expand All @@ -9,6 +8,7 @@ import { calculateErrorRate } from "../../../../lib/utils";

const MetricsHandler = ({ run, children }) => {
const [runMetrics, setMetrics] = useState([]);
const [errorCodes, setErrorCodes] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [totals, setTotals] = useState({
totalLatencyAvg: 0,
Expand Down Expand Up @@ -72,7 +72,6 @@ const MetricsHandler = ({ run, children }) => {
);

setMetrics(formattedUrlMetrics);

setIsLoading(false);
};

Expand Down Expand Up @@ -129,6 +128,24 @@ const MetricsHandler = ({ run, children }) => {
});
};

const groupByErrorCode = () => {
const responseCodeGroups = {};

runMetrics.forEach((metric) => {
metric.responses.forEach((response) => {
const { responseCode } = response;

if (!responseCodeGroups[responseCode]) {
responseCodeGroups[responseCode] = [];
}

responseCodeGroups[responseCode].push(metric);
});
});

setErrorCodes(responseCodeGroups);
};

const startMetricsRefreshTimer = () => {
if (run.runStatus === runStatusModel.RUNNING) {
timerRef.current = setInterval(() => {
Expand All @@ -148,14 +165,15 @@ const MetricsHandler = ({ run, children }) => {

useEffect(() => {
calculateTotals();
groupByErrorCode();
startMetricsRefreshTimer();
return () => {
stopMetricsRefreshTimer();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [runMetrics, run.runStatus]);

return children(runMetrics, isLoading, totals);
return children(runMetrics, isLoading, totals, errorCodes);
};

export default MetricsHandler;
2 changes: 1 addition & 1 deletion web/frontend/src/components/Run/RunningStatus/MetricsHandler/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import MetricsHandler from "./MetricsHandler";

export default MetricsHandler;
export default MetricsHandler;
247 changes: 135 additions & 112 deletions web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import RunEditableLabelsGroup from "./EditableLabelsGroup";
import EditableTitle from "./EditableTitle";
import RunEndpointCharts from "./EndpointCharts";
import InitialConfiguration from "./InitialConfiguration";
import MetricsHandler from "./MetricsHandler";
import MoreButtonsMenu from "./MoreButtonsMenu";
import RunNotesInput from "./NotesInput";
import OverviewMetrics from "./OverviewMetrics";
Expand Down Expand Up @@ -98,122 +99,144 @@ const RunRunningStatus = ({ run }) => {
};

return (
<PageHeader
ghost={false}
onBack={() => navigate(-1)}
title={<EditableTitle runId={run.id} currentTitle={run.title} />}
subTitle={
<RunStatusTag
runStatus={run.runStatus}
key={`tag-${run.id}-${run.runStatus}`}
/>
}
extra={getButtonsByStatus(run.runStatus)}
breadcrumb={{
routes,
itemRender: (route, params, routesToRender) => (
<Breadcrumb route={route} routes={routesToRender} />
)
}}
tags={<RunEditableLabelsGroup runId={run.id} defaultValue={run.labels} />}
>
<Row gutter={[0, 0]} type="flex" align="middle" justify="end">
<Col span={16}>
<Space direction="vertical" size={0}>
<RunNotesInput
runId={run.id}
defaultValue={run.notes || "Add running test execution notes..."}
<MetricsHandler run={run}>
{(metrics, isLoading, totals, errorCodes) => (
<PageHeader
ghost={false}
onBack={() => navigate(-1)}
title={<EditableTitle runId={run.id} currentTitle={run.title} />}
subTitle={
<RunStatusTag
runStatus={run.runStatus}
key={`tag-${run.id}-${run.runStatus}`}
/>
}
extra={getButtonsByStatus(run.runStatus)}
breadcrumb={{
routes,
itemRender: (route, params, routesToRender) => (
<Breadcrumb route={route} routes={routesToRender} />
)
}}
tags={
<RunEditableLabelsGroup runId={run.id} defaultValue={run.labels} />
}
>
<Row gutter={[0, 0]} type="flex" align="middle" justify="end">
<Col span={16}>
<Space direction="vertical" size={0}>
<RunNotesInput
runId={run.id}
defaultValue={
run.notes || "Add running test execution notes..."
}
/>

<Space size="large">
<div>
<Typography.Text type="secondary">Started at: </Typography.Text>
{run.startedAt ? run.startedAt.format("L HH:mm:ss") : null}
</div>
<div>
<Typography.Text type="secondary">Agents: </Typography.Text>
{run.agentIds.length}
</div>
</Space>
</Space>
</Col>
<Col span={8} style={{ textAlign: "right" }}>
{isTimerAvailable ? (
<>
<RunRunningTime
startedAt={run.startedAt}
finishedAt={
run.runStatus !== runStatusModel.RUNNING
? run.finishedAt
: false
}
<Space size="large">
<div>
<Typography.Text type="secondary">
Started at:{" "}
</Typography.Text>
{run.startedAt ? run.startedAt.format("L HH:mm:ss") : null}
</div>
<div>
<Typography.Text type="secondary">Agents: </Typography.Text>
{run.agentIds.length}
</div>
</Space>
</Space>
</Col>
<Col span={8} style={{ textAlign: "right" }}>
{isTimerAvailable ? (
<>
<RunRunningTime
startedAt={run.startedAt}
finishedAt={
run.runStatus !== runStatusModel.RUNNING
? run.finishedAt
: false
}
/>
</>
) : null}
</Col>
<Col style={{ flex: 1, marginTop: "10px" }}>
<OverviewMetrics
metrics={metrics}
isLoading={isLoading}
totals={totals}
/>
</>
) : null}
</Col>
<Col style={{ flex: 1, marginTop: "10px" }}>
<OverviewMetrics run={run} />
</Col>
<Col span={24}>
<Tabs
defaultActiveKey={activeTabKey}
activeKey={activeTabKey}
onChange={setActiveTabKey}
>
<Tabs.TabPane tab="Overview" key="overview">
<RunAnalyticCharts
run={run}
loadProfile={run.loadProfile}
isLoadProfileEnabled={run.isLoadProfileEnabled}
isRunMetricsAvailable={isRunMetricsAvailable}
setIsRunMetricsAvailable={setIsRunMetricsAvailable}
/>
</Tabs.TabPane>
<Tabs.TabPane
tab="Summary"
key="summary"
disabled={!isRunMetricsAvailable}
>
<RunSummaryTable
runId={run.id}
setLabelToShowGraph={setLabelToShowGraph}
setActiveTabKey={setActiveTabKey}
/>
</Tabs.TabPane>
<Tabs.TabPane
tab="Errors"
key="responseCodes"
disabled={!isRunMetricsAvailable}
>
<ResponseCodes runId={run.id} />
</Tabs.TabPane>
{renderLabel ? (
<Tabs.TabPane
tab="Endpoints"
key="endpoints"
disabled={!isRunMetricsAvailable}
>
<RunEndpointCharts run={run} labelToShowGraph={labelToShow} />
</Tabs.TabPane>
) : (
<Tabs.TabPane
tab="Endpoints"
key="endpoints"
disabled={!isRunMetricsAvailable}
</Col>
<Col span={24}>
<Tabs
defaultActiveKey={activeTabKey}
activeKey={activeTabKey}
onChange={setActiveTabKey}
>
<RunEndpointCharts run={run} />
</Tabs.TabPane>
)}
<Tabs.TabPane
tab="Initial Configuration"
key="initialConfiguration"
>
<InitialConfiguration run={run} />
</Tabs.TabPane>
</Tabs>
</Col>
</Row>
</PageHeader>
<Tabs.TabPane tab="Overview" key="overview">
<RunAnalyticCharts
run={run}
loadProfile={run.loadProfile}
isLoadProfileEnabled={run.isLoadProfileEnabled}
isRunMetricsAvailable={isRunMetricsAvailable}
setIsRunMetricsAvailable={setIsRunMetricsAvailable}
/>
</Tabs.TabPane>
<Tabs.TabPane
tab="Summary"
key="summary"
disabled={!isRunMetricsAvailable}
>
<RunSummaryTable
metrics={metrics}
isLoading={isLoading}
totals={totals}
setLabelToShowGraph={setLabelToShowGraph}
setActiveTabKey={setActiveTabKey}
/>
</Tabs.TabPane>
<Tabs.TabPane
tab="Errors"
key="responseCodes"
disabled={!isRunMetricsAvailable}
>
<ResponseCodes
errorCodes={errorCodes}
isLoading={isLoading}
/>
</Tabs.TabPane>
{renderLabel ? (
<Tabs.TabPane
tab="Endpoints"
key="endpoints"
disabled={!isRunMetricsAvailable}
>
<RunEndpointCharts
run={run}
labelToShowGraph={labelToShow}
/>
</Tabs.TabPane>
) : (
<Tabs.TabPane
tab="Endpoints"
key="endpoints"
disabled={!isRunMetricsAvailable}
>
<RunEndpointCharts run={run} />
</Tabs.TabPane>
)}
<Tabs.TabPane
tab="Initial Configuration"
key="initialConfiguration"
>
<InitialConfiguration run={run} />
</Tabs.TabPane>
</Tabs>
</Col>
</Row>
</PageHeader>
)}
</MetricsHandler>
);
};
export default RunRunningStatus;

0 comments on commit 89646fd

Please sign in to comment.