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)}
+
), },