Alert history pr review changes (#5778)

* chore: rename alert history scss files in pascal case

* fix: use proper variables

* chore: use color variable for action button dropdown item

* chore: improve the directory structure for alert history components

* chore: move inline style to scss file and extract dropdown renderer component

* chore: use colors from Color instead of css variables inside tsx files

* chore: return null in default case

* chore: update alert details spinner tip

* chore: timelinePlugin warnings and remove file wide warning disabling

* chore: change Arial to Geist Mono in timeline plugin

frontend/src/components/AlertDetailsFilters/filters.styles.scss → frontend/src/components/AlertDetailsFilters/Filters.styles.scss

@@ -2,8 +2,8 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--Ink-300, #16181d);
-	border: 1px solid var(--Slate-400, #1d212d);
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-400);
 }
 
 .lightMode {

frontend/src/components/AlertDetailsFilters/Filters.tsx

@@ -1,4 +1,4 @@
-import './filters.styles.scss';
+import './Filters.styles.scss';
 
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import './tabs.styles.scss';
+import './Tabs.styles.scss';
 
 import { Radio } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -1,6 +1,7 @@
-import './tabsAndFilters.styles.scss';
+import './TabsAndFilters.styles.scss';
+
+import { Filters } from 'components/AlertDetailsFilters/Filters';
 
-import { Filters } from './Filters/Filters';
 import { Tabs } from './Tabs/Tabs';
 
 function TabsAndFilters(): JSX.Element {

frontend/src/container/AlertHistory/AlertHistory.tsx

@@ -0,0 +1,22 @@
+import './AlertHistory.styles.scss';
+
+import { useState } from 'react';
+
+import Statistics from './Statistics/Statistics';
+import Timeline from './Timeline/Timeline';
+
+function AlertHistory(): JSX.Element {
+	const [totalCurrentTriggers, setTotalCurrentTriggers] = useState(0);
+
+	return (
+		<div className="alert-history">
+			<Statistics
+				totalCurrentTriggers={totalCurrentTriggers}
+				setTotalCurrentTriggers={setTotalCurrentTriggers}
+			/>
+			<Timeline totalCurrentTriggers={totalCurrentTriggers} />
+		</div>
+	);
+}
+
+export default AlertHistory;

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -1,5 +1,6 @@
 import './AlertPopover.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import { Popover } from 'antd';
 import LogsIcon from 'assets/AlertHistory/LogsIcon';
 import ROUTES from 'constants/routes';
@@ -43,7 +44,7 @@ function PopoverContent({
 					<div className="icon">
 						<DraftingCompass
 							size={14}
-							color={isDarkMode ? 'var(--bg-vanilla-400)' : 'var(--text-ink-400'}
+							color={isDarkMode ? Color.BG_VANILLA_400 : Color.TEXT_INK_400}
 						/>
 					</div>
 					<div className="text">View Traces</div>

frontend/src/container/AlertHistory/Statistics/Statistics.tsx

@@ -1,4 +1,4 @@
-import './statistics.styles.scss';
+import './Statistics.styles.scss';
 
 import { AlertRuleStats } from 'types/api/alerts/def';
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -1,5 +1,6 @@
-import './statsCard.styles.scss';
+import './StatsCard.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ArrowDownLeft, ArrowUpRight, Calendar } from 'lucide-react';
 import { AlertRuleStats } from 'types/api/alerts/def';
@@ -21,7 +22,7 @@ function ChangePercentage({
 		return (
 			<div className="change-percentage change-percentage--success">
 				<div className="change-percentage__icon">
-					<ArrowDownLeft size={14} color="var(--bg-forest-500)" />
+					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
 				<div className="change-percentage__label">
 					{percentage}% vs Last {duration}
@@ -33,7 +34,7 @@ function ChangePercentage({
 		return (
 			<div className="change-percentage change-percentage--error">
 				<div className="change-percentage__icon">
-					<ArrowUpRight size={14} color="var(--bg-cherry-500)" />
+					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
 				<div className="change-percentage__label">
 					{percentage}% vs Last {duration}
@@ -83,7 +84,7 @@ function StatsCard({
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
 					<div className="icon">
-						<Calendar size={14} color="var(--bg-slate-200)" />
+						<Calendar size={14} color={Color.BG_SLATE_200} />
 					</div>
 					<div className="text">{relativeTime}</div>
 				</div>

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,5 +1,6 @@
-import './topContributorsCard.styles.scss';
+import './TopContributorsCard.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
@@ -56,7 +57,7 @@ function TopContributorsCard({
 							<div className="icon">
 								<ArrowRight
 									size={14}
-									color={isDarkMode ? 'var(--bg-vanilla-400)' : 'var(--bg-ink-400)'}
+									color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
 								/>
 							</div>
 						</Button>

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,3 +1,4 @@
+import { Color } from '@signozhq/design-tokens';
 import { Progress, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
@@ -46,7 +47,7 @@ function TopContributorsRows({
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
 						trailColor="rgba(255, 255, 255, 0)"
-						strokeColor="var(--bg-robin-500)"
+						strokeColor={Color.BG_ROBIN_500}
 					/>
 				</ConditionalAlertPopover>
 			),

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -1,4 +1,4 @@
-import '../Graph/graph.styles.scss';
+import '../Graph/Graph.styles.scss';
 
 import { BarChartOutlined } from '@ant-design/icons';
 import { QueryParams } from 'constants/query';

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -1,4 +1,4 @@
-import './table.styles.scss';
+import './Table.styles.scss';
 
 import { Table } from 'antd';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,3 +1,4 @@
+import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
@@ -31,7 +32,7 @@ function LabelFilter({
 			suffix={
 				<Search
 					size={14}
-					color={isDarkMode ? 'var(--text-vanilla-100)' : 'var(--text-ink-100)'}
+					color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
 				/>
 			}
 		/>

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -1,9 +1,10 @@
-import './tabsAndFilters.styles.scss';
+import './TabsAndFilters.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
 import history from 'lib/history';
 import { Info } from 'lucide-react';
-import Tabs2 from 'periscope/components/Tabs2/Tabs2';
+import Tabs2 from 'periscope/components/Tabs2';
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -12,7 +13,7 @@ function ComingSoon(): JSX.Element {
 		<div className="coming-soon">
 			<div className="coming-soon__text">Coming Soon</div>
 			<div className="coming-soon__icon">
-				<Info size={10} color="var(--bg-sienna-400)" />
+				<Info size={10} color={Color.BG_SIENNA_400} />
 			</div>
 		</div>
 	);

frontend/src/container/AlertHistory/Timeline/Timeline.tsx

@@ -1,4 +1,4 @@
-import './timeline.styles.scss';
+import './Timeline.styles.scss';
 
 import GraphWrapper from './GraphWrapper/GraphWrapper';
 import TimelineTable from './Table/Table';

frontend/src/container/AlertHistory/index.tsx

@@ -1,22 +1,3 @@
-import './alertHistory.styles.scss';
-
-import { useState } from 'react';
-
-import Statistics from './Statistics/Statistics';
-import Timeline from './Timeline/Timeline';
-
-function AlertHistory(): JSX.Element {
-	const [totalCurrentTriggers, setTotalCurrentTriggers] = useState(0);
-
-	return (
-		<div className="alert-history">
-			<Statistics
-				totalCurrentTriggers={totalCurrentTriggers}
-				setTotalCurrentTriggers={setTotalCurrentTriggers}
-			/>
-			<Timeline totalCurrentTriggers={totalCurrentTriggers} />
-		</div>
-	);
-}
+import AlertHistory from './AlertHistory';
 
 export default AlertHistory;