chore: use new signal meta properties in event timeline

frontend/src/component/events/EventTimeline/EventTimeline.tsx

@@ -14,12 +14,14 @@ export type TimelineEventType = 'signal' | EventSchemaType;
 
 type RawTimelineEvent = EventSchema | ISignalQuerySignal;
 
-type TimelineEvent = {
+export type TimelineEvent = {
     id: number;
     timestamp: number;
     type: TimelineEventType;
     label: string;
     summary: string;
+    icon?: string;
+    variant?: string;
 };
 
 export type TimelineEventGroup = TimelineEvent[];
@@ -111,6 +113,9 @@ const getTimestamp = (event: RawTimelineEvent) => {
 const isInRange = (timestamp: number, startTime: number, endTime: number) =>
     timestamp >= startTime && timestamp <= endTime;
 
+const isValidString = (str: unknown): str is string =>
+    typeof str === 'string' && str.trim().length > 0;
+
 const getTimelineEvent = (
     event: RawTimelineEvent,
     timestamp: number,
@@ -122,17 +127,30 @@ const getTimelineEvent = (
             sourceName = 'unknown source',
             sourceDescription,
             tokenName,
+            payload: {
+                unleash_title,
+                unleash_description,
+                unleash_icon,
+                unleash_variant,
+            },
         } = event;
 
-        const label = `Signal: ${sourceName}`;
-        const summary = `Signal originated from **[${sourceName} (${tokenName})](/integrations/signals)** endpoint${sourceDescription ? `: ${sourceDescription}` : ''}`;
+        const title = unleash_title || sourceName;
+        const label = `Signal: ${title}`;
+        const summary = unleash_description
+            ? `Signal: **[${title}](/integrations/signals)** ${unleash_description}`
+            : `Signal originated from **[${sourceName} (${tokenName})](/integrations/signals)** endpoint${sourceDescription ? `: ${sourceDescription}` : ''}`;
 
         return {
             id,
             timestamp,
             type: 'signal',
             label,
             summary,
+            ...(isValidString(unleash_icon) ? { icon: unleash_icon } : {}),
+            ...(isValidString(unleash_variant)
+                ? { variant: unleash_variant }
+                : {}),
         };
     }
 

frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx

@@ -4,14 +4,18 @@ import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
 import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined';
 import SegmentsIcon from '@mui/icons-material/DonutLargeOutlined';
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
-import { styled } from '@mui/material';
-import type { TimelineEventGroup, TimelineEventType } from '../EventTimeline';
+import { Icon, styled } from '@mui/material';
+import type {
+    TimelineEvent,
+    TimelineEventGroup,
+    TimelineEventType,
+} from '../EventTimeline';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import type { HTMLAttributes } from 'react';
 import SensorsIcon from '@mui/icons-material/Sensors';
 
 type DefaultEventVariant = 'secondary';
-type CustomEventVariant = 'success' | 'neutral' | 'warning';
+type CustomEventVariant = 'success' | 'neutral' | 'warning' | 'error';
 type EventVariant = DefaultEventVariant | CustomEventVariant;
 
 const StyledEventCircle = styled('div', {
@@ -26,17 +30,26 @@ const StyledEventCircle = styled('div', {
     alignItems: 'center',
     justifyContent: 'center',
     transition: 'transform 0.2s',
-    '& svg': {
+    '& svg, span': {
         color: theme.palette[variant].main,
+    },
+    '& svg': {
         height: theme.spacing(2.5),
         width: theme.spacing(2.5),
     },
+    '& span': {
+        fontSize: theme.fontSizes.bodySize,
+    },
     '&:hover': {
         transform: 'scale(1.5)',
     },
 }));
 
-const getEventIcon = (type: TimelineEventType) => {
+const getEventIcon = ({ icon, type }: TimelineEvent) => {
+    if (icon) {
+        return <Icon>{icon}</Icon>;
+    }
+
     if (type === 'signal') {
         return <SensorsIcon />;
     }
@@ -72,6 +85,10 @@ const customEventVariants: Partial<
     'feature-archived': 'neutral',
 };
 
+const isValidVariant = (variant?: string): variant is EventVariant =>
+    variant !== undefined &&
+    ['secondary', 'success', 'neutral', 'warning', 'error'].includes(variant);
+
 interface IEventTimelineEventCircleProps
     extends HTMLAttributes<HTMLDivElement> {
     group: TimelineEventGroup;
@@ -89,10 +106,14 @@ export const EventTimelineEventCircle = ({
 
         return (
             <StyledEventCircle
-                variant={customEventVariants[event.type]}
+                variant={
+                    isValidVariant(event.variant)
+                        ? event.variant
+                        : customEventVariants[event.type]
+                }
                 {...props}
             >
-                {getEventIcon(event.type)}
+                {getEventIcon(event)}
             </StyledEventCircle>
         );
     }

frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx

@@ -57,6 +57,9 @@ const StyledEventTimelineEventCircle = styled(EventTimelineEventCircle)(
         '& > svg': {
             height: theme.spacing(1.75),
         },
+        '& > span': {
+            fontSize: theme.fontSizes.smallBody,
+        },
         '&:hover': {
             transform: 'none',
         },