diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx
index 296f35ff06..9d4f85ccbc 100644
--- a/frontend/src/component/events/EventTimeline/EventTimeline.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimeline.tsx
@@ -33,7 +33,7 @@ const StyledRow = styled('div')({
const StyledTimelineBody = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
- padding: theme.spacing(1, 0),
+ padding: theme.spacing(1.5, 0),
}));
const StyledTimelineContainer = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
index e8e571fb53..c6218e50d6 100644
--- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -11,6 +11,7 @@ import { useEffect, useMemo } from 'react';
import { timeSpanOptions } from '../EventTimelineProvider';
import CloseIcon from '@mui/icons-material/Close';
import { useEventTimelineContext } from '../EventTimelineContext';
+import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
const StyledCol = styled('div')(({ theme }) => ({
display: 'flex',
@@ -86,6 +87,7 @@ export const EventTimelineHeader = ({
))}
+
({
+ '&&&': {
+ color: theme.palette.primary.main,
+ },
+}));
+
+const signalsLink = '/integrations/signals';
+
+export const EventTimelineHeaderTip = () => {
+ const navigate = useNavigate();
+ const { signalsSuggestionSeen, setSignalsSuggestionSeen } =
+ useEventTimelineContext();
+
+ const { isEnterprise } = useUiConfig();
+ const { isAdmin } = useContext(AccessContext);
+ const signalsEnabled = useUiFlag('signals');
+ const { signalEndpoints, loading } = useSignalEndpoints();
+
+ if (
+ !signalsSuggestionSeen &&
+ isEnterprise() &&
+ isAdmin &&
+ signalsEnabled &&
+ !loading &&
+ signalEndpoints.length === 0
+ ) {
+ return (
+
+ }
+ label={
+ <>
+ See signals from
+ external sources in real-time within Unleash
+ >
+ }
+ onClick={() => navigate(signalsLink)}
+ onDelete={() => setSignalsSuggestionSeen(true)}
+ />
+
+ );
+ }
+
+ return null;
+};
diff --git a/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx
index 680bd7bfed..da3714ea6b 100644
--- a/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx
@@ -14,14 +14,14 @@ type EventTimelineState = {
open: boolean;
timeSpan: TimeSpanOption;
environment?: IEnvironment;
- signalsAlertSeen?: boolean;
+ signalsSuggestionSeen?: boolean;
};
type EventTimelineStateSetters = {
setOpen: (open: boolean) => void;
setTimeSpan: (timeSpan: TimeSpanOption) => void;
setEnvironment: (environment: IEnvironment) => void;
- setSignalsAlertSeen: (seen: boolean) => void;
+ setSignalsSuggestionSeen: (seen: boolean) => void;
};
export interface IEventTimelineContext
@@ -108,8 +108,8 @@ export const EventTimelineProvider = ({
setField('timeSpan', timeSpan),
setEnvironment: (environment: IEnvironment) =>
setField('environment', environment),
- setSignalsAlertSeen: (seen: boolean) =>
- setField('signalsAlertSeen', seen),
+ setSignalsSuggestionSeen: (seen: boolean) =>
+ setField('signalsSuggestionSeen', seen),
};
return (
diff --git a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
index 8b39eec23d..e50ebe81d2 100644
--- a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
@@ -8,10 +8,10 @@ import { useEffect, useState } from 'react';
const StyledEventTimelineSlider = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
- height: '105px',
+ height: '120px',
overflow: 'hidden',
boxShadow: theme.boxShadows.popup,
- borderLeft: `1px solid ${theme.palette.divider}`,
+ borderLeft: `1px solid ${theme.palette.background.application}`,
}));
const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
@@ -36,7 +36,7 @@ export const MainLayoutEventTimeline = () => {
transition: isInitialLoad
? 'none'
: 'max-height 0.3s ease-in-out',
- maxHeight: open ? '105px' : '0',
+ maxHeight: open ? '120px' : '0',
}}
>