diff --git a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss
index 43d645efa5..144996ba38 100644
--- a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss
@@ -1,3 +1,21 @@
-.alert-popover {
+.alert-popover-trigger-action {
cursor: pointer;
}
+
+.alert-history-popover {
+ .ant-popover-inner {
+ border: 1px solid var(--bg-slate-400);
+
+ .lightMode & {
+ background: var(--bg-vanilla-100) !important;
+ border: 1px solid var(--bg-vanilla-300);
+ }
+ }
+ .ant-popover-arrow {
+ &::before {
+ .lightMode & {
+ background: var(--bg-vanilla-100);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
index 83605a61d3..d70da07903 100644
--- a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
@@ -64,12 +64,13 @@ function AlertPopover({
relatedLogsLink,
}: Props): JSX.Element {
return (
-
+
tr > td {
border: none;
- &:last-of-type,
- &:nth-last-of-type(2) {
- text-align: right;
- }
}
}
@@ -52,7 +41,7 @@
}
.alert-rule {
&-value,
- &-created-at {
+ &__created-at {
font-size: 14px;
color: var(--text-vanilla-400);
}
@@ -60,7 +49,7 @@
font-weight: 500;
line-height: 20px;
}
- &-created-at {
+ &__created-at {
line-height: 18px;
letter-spacing: -0.07px;
}
diff --git a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
index 5a42fcd5bd..1eb43fc417 100644
--- a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
@@ -1,3 +1,5 @@
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -10,43 +12,42 @@ export const timelineTableColumns = (): ColumnsType (
-
-
-
+ width: 140,
+ render: (value): JSX.Element => (
+
),
},
{
title: 'LABELS',
dataIndex: 'labels',
- width: '54.5%',
- render: (labels, record): JSX.Element => (
-
-
-
+ render: (labels): JSX.Element => (
+
),
},
{
title: 'CREATED AT',
dataIndex: 'unixMilli',
- width: '32.5%',
- render: (value, record): JSX.Element => (
+ width: 200,
+ render: (value): JSX.Element => (
+ {formatEpochTimestamp(value)}
+ ),
+ },
+ {
+ title: 'ACTIONS',
+ width: 140,
+ align: 'right',
+ render: (record): JSX.Element => (
- {formatEpochTimestamp(value)}
+
),
},