feat: display a status code legend for the area chart

dashboard/src/main/home/app-dashboard/expanded-app/metrics/MetricsChart.tsx

@@ -8,6 +8,7 @@ import { ChartTypeWithExtendedConfig } from "shared/types";
 import { Context } from "shared/Context";
 
 import AggregatedDataLegend from "../../../cluster-dashboard/expanded-chart/metrics/AggregatedDataLegend";
+import StatusCodeDataLegend from "../../../cluster-dashboard/expanded-chart/metrics/StatusCodeDataLegend";
 import AreaChart from "./AreaChart";
 import CheckboxRow from "components/form-components/CheckboxRow";
 import Loading from "components/Loading";
@@ -282,7 +283,7 @@ const MetricsChart: React.FunctionComponent<PropsType> = ({
             axios
                 .all(requests)
                 .then((responses) => {
-                    let aggregatedMetrics: Record<string, NormalizedMetricsData[]> = {}
+                    let aggregatedMetrics: Record<string, NormalizedMetricsData[]> = {};
                     for (let i = 0; i <= 4; i++) {
                         const metrics = new MetricNormalizer(
                             responses[i].data,
@@ -376,9 +377,21 @@ const MetricsChart: React.FunctionComponent<PropsType> = ({
                             />
                         )}
                     </ParentSize>
-                    <RowWrapper>
-                        <AggregatedDataLegend data={data} hideAvg={isAggregated} />
-                    </RowWrapper>
+                    {data.length > 0 && (
+                        <RowWrapper>
+                            <AggregatedDataLegend data={data} hideAvg={isAggregated} />
+                        </RowWrapper>
+                    )}
+                </>
+            )}
+
+            {Object.keys(areaData).length > 0 && isLoading === 0 && (
+                <>
+                    {Object.keys(areaData).length > 0 && (
+                        <RowWrapper>
+                            <StatusCodeDataLegend />
+                        </RowWrapper>
+                    )}
                 </>
             )}
         </StyledMetricsChart>

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/StatusCodeDataLegend.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import * as stats from "simple-statistics";
+import styled from "styled-components";
+import chroma from "chroma-js";
+import { NormalizedMetricsData } from "./types";
+import { StatusCodeDataColors } from "./utils";
+
+interface StatusCodeDataLegendProps {}
+
+const StatusCodeDataLegend = ({ }: StatusCodeDataLegendProps) => {
+  const statusCodes = ["1xx", "2xx", "3xx", "4xx", "5xx"];
+
+  return (
+    <StatusCodeDataContainer>
+      {statusCodes.map((key) => (
+        <StatusCodeDataItem key={key}>
+          <DataBar color={StatusCodeDataColors[key]} />
+          {key.toUpperCase()}
+        </StatusCodeDataItem>
+      ))}
+    </StatusCodeDataContainer>
+  );
+};
+
+export default StatusCodeDataLegend;
+
+const StatusCodeDataContainer = styled.div`
+  display: flex;
+  margin-block: 8px;
+`;
+
+const StatusCodeDataItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 20px;
+  align-items: center;
+  gap: 4px;
+`;
+
+const DataBar = styled.div<{ color: string }>`
+  height: 10px;
+  width: 10px;
+  margin-left: 10px;
+  border: 1px solid ${(props) => props.color};
+  background-color: ${(props) => chroma(props.color).alpha(0.6).css()};
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/utils.ts

@@ -3,3 +3,11 @@ export const AggregatedDataColors: Record<string, string> = {
   avg: "#F2C94C",
   max: "#B04649",
 };
+
+export const StatusCodeDataColors: Record<string, string> = {
+  "1xx": "#D3AFD6", // purple
+  "2xx": "#C6E6AD", // green
+  "3xx": "#59DFEE", // blue
+  "4xx": "#FCE49D", // yellow
+  "5xx": "#FFB2A6", // red
+};