From 56f79a91c17edcc507ab09fa5d68ab8d53b70df3 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 16 Dec 2024 16:57:04 +0000
Subject: [PATCH] Enhance IncidentView component with HeaderAlert for date
 display and improve metrics card layout

---
 Dashboard/src/Pages/Incidents/View/Index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/Dashboard/src/Pages/Incidents/View/Index.tsx b/Dashboard/src/Pages/Incidents/View/Index.tsx
index e837e70924..ea5775f6c4 100644
--- a/Dashboard/src/Pages/Incidents/View/Index.tsx
+++ b/Dashboard/src/Pages/Incidents/View/Index.tsx
@@ -49,6 +49,9 @@ import TraceTable from "../../../Components/Traces/TraceTable";
 import { TelemetryQuery } from "Common/Types/Telemetry/TelemetryQuery";
 import MetricView from "../../../Components/Metrics/MetricView";
 import MetricViewData from "Common/Types/Metrics/MetricViewData";
+import IconProp from "Common/Types/Icon/IconProp";
+import HeaderAlert, { HeaderAlertType } from "Common/UI/Components/HeaderAlert/HeaderAlert";
+import ColorSwatch from "Common/Types/ColorSwatch";
 
 const IncidentView: FunctionComponent<
   PageComponentProps
@@ -716,7 +719,16 @@ const IncidentView: FunctionComponent<
       {telemetryQuery &&
         telemetryQuery.telemetryType === TelemetryType.Metric &&
         telemetryQuery.metricViewData && (
-          <Card title={"Metrics"} description={"Metrics for this incident."}>
+          <Card title={"Metrics"} description={"Metrics for this incident."} rightElement={telemetryQuery.metricViewData.startAndEndDate ? <HeaderAlert
+            icon={IconProp.Clock}
+            onClick={() => {
+              // do nothing!
+            }}
+            title={OneUptimeDate.getInBetweenDatesAsFormattedString(telemetryQuery.metricViewData.startAndEndDate)}
+            alertType={HeaderAlertType.INFO}
+            colorSwatch={ColorSwatch.Blue}
+             /> : <></>
+          }>
             <MetricView
               data={telemetryQuery.metricViewData}
               hideQueryElements={true}