Merge pull request #476 from newrelic/sidebar-time-notification

fix: display time period in sidebar when in playback
newrelic · Dec 16, 2024 · 88af399 · 88af399
2 parents acae43a + ff37774
commit 88af399
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/components/signal-detail-sidebar/index.js b/src/components/signal-detail-sidebar/index.js
@@ -5,6 +5,7 @@ import {
   Card,
   CardBody,
   HeadingText,
+  InlineMessage,
   Link,
   SectionMessage,
   navigation,
@@ -17,6 +18,7 @@ import GoldenMetrics from './golden-metrics';
 import { AppContext } from '../../contexts';
 
 import typesList from '../../../nerdlets/signal-selection/types.json';
+import { formatTimestamp } from '../../utils';
 
 const NO_ENTITY_TYPE = '(unknown entity type)';
 
@@ -82,6 +84,15 @@ const SignalDetailSidebar = ({ guid, name, type, data, timeWindow }) => {
                 {detailLinkText}
               </Link>
             ) : null}
+            {timeWindow ? (
+              <InlineMessage
+                className="detail-time-info"
+                description="Showing data for the specified time period."
+                label={`${formatTimestamp(
+                  timeWindow.start
+                )} - ${formatTimestamp(timeWindow.end)}`}
+              />
+            ) : null}
           </CardBody>
         </Card>
       </div>

diff --git a/src/components/signal-detail-sidebar/styles.scss b/src/components/signal-detail-sidebar/styles.scss
@@ -17,6 +17,10 @@
     line-height: 16px;
   }
 
+  .detail-time-info {
+    margin-top: 4px;
+  }
+
   .alert-incidents-wrapper {
     .alert-incidents-header {
       margin-bottom: 8px;