feat: tabs and filters for alert history page (#5655)

* feat: alert history page route and component setup

* feat: alert history basic tabs and fitlers UI

* feat: route based tabs for alert history and overview and improve the UI to match designs

* chore: unused components and files cleanup

* chore: improve alert history and overview route paths

* chore: use parent selector in scss files

* chore: alert -> alerts

frontend/src/AppRoutes/pageComponents.ts

@@ -92,6 +92,14 @@ export const CreateNewAlerts = Loadable(
 	() => import(/* webpackChunkName: "Create Alerts" */ 'pages/CreateAlert'),
 );
 
+export const AlertHistory = Loadable(
+	() => import(/* webpackChunkName: "Alert History" */ 'pages/AlertDetails'),
+);
+
+export const AlertOverview = Loadable(
+	() => import(/* webpackChunkName: "Alert Overview" */ 'pages/AlertDetails'),
+);
+
 export const CreateAlertChannelAlerts = Loadable(
 	() =>
 		import(/* webpackChunkName: "Create Channels" */ 'pages/AlertChannelCreate'),

frontend/src/AppRoutes/routes.ts

@@ -2,6 +2,8 @@ import ROUTES from 'constants/routes';
 import { RouteProps } from 'react-router-dom';
 
 import {
+	AlertHistory,
+	AlertOverview,
 	AllAlertChannels,
 	AllErrors,
 	APIKeys,
@@ -171,6 +173,20 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
+	{
+		path: ROUTES.ALERT_HISTORY,
+		exact: true,
+		component: AlertHistory,
+		isPrivate: true,
+		key: 'ALERT_HISTORY',
+	},
+	{
+		path: ROUTES.ALERT_OVERVIEW,
+		exact: true,
+		component: AlertOverview,
+		isPrivate: true,
+		key: 'ALERT_OVERVIEW',
+	},
 	{
 		path: ROUTES.TRACE,
 		exact: true,

frontend/src/components/AlertDetailsFilters/Filters.tsx

@@ -0,0 +1,37 @@
+import './filters.styles.scss';
+
+import { Button } from 'antd';
+import { QueryParams } from 'constants/query';
+import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Undo } from 'lucide-react';
+import { useHistory } from 'react-router-dom';
+
+export function Filters(): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+
+	const handleFiltersReset = (): void => {
+		urlQuery.delete(QueryParams.relativeTime);
+
+		history.replace({
+			pathname: history.location.pathname,
+			search: `?${urlQuery.toString()}`,
+		});
+	};
+	return (
+		<div className="filters">
+			{urlQuery.has(QueryParams.relativeTime) && (
+				<Button
+					type="default"
+					className="reset-button"
+					onClick={handleFiltersReset}
+					icon={<Undo size={14} />}
+				>
+					Reset
+				</Button>
+			)}
+			<DateTimeSelector showAutoRefresh={false} hideShareModal />
+		</div>
+	);
+}

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

@@ -0,0 +1,7 @@
+.reset-button {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--Ink-300, #16181d);
+	border: 1px solid var(--Slate-400, #1d212d);
+}

frontend/src/constants/routes.ts

@@ -22,6 +22,8 @@ const ROUTES = {
 	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',
 	ALERTS_NEW: '/alerts/new',
+	ALERT_HISTORY: '/alerts/history',
+	ALERT_OVERVIEW: '/alerts/overview',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/:id',

frontend/src/container/AlertHistory/index.tsx

@@ -0,0 +1,9 @@
+function AlertHistory(): JSX.Element {
+	return (
+		<div>
+			<h1>Alert History</h1>
+		</div>
+	);
+}
+
+export default AlertHistory;

frontend/src/container/AlertHistory/types.ts

@@ -0,0 +1,4 @@
+export enum AlertDetailsTab {
+	OVERVIEW = 'OVERVIEW',
+	HISTORY = 'HISTORY',
+}

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -208,6 +208,8 @@ export const routesToSkip = [
 	ROUTES.DASHBOARD,
 	ROUTES.DASHBOARD_WIDGET,
 	ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
+	ROUTES.ALERT_HISTORY,
+	ROUTES.ALERT_OVERVIEW,
 	ROUTES.MESSAGING_QUEUES,
 	ROUTES.MESSAGING_QUEUES_DETAIL,
 ];

frontend/src/pages/AlertDetails/alertDetails.styles.scss

@@ -0,0 +1,49 @@
+@mixin flex-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tabs-and-filters {
+	margin: 1rem 0;
+
+	& .ant-tabs-nav {
+		&::before {
+			border-bottom: none !important;
+		}
+	}
+
+	.tab-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+	.filters {
+		@include flex-center;
+		gap: 16px;
+		.reset-button {
+			@include flex-center;
+		}
+	}
+	// customize ant tabs
+	.ant-tabs {
+		&-nav-list {
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+			border-radius: 2px;
+		}
+
+		&-tab {
+			padding: 0;
+
+			&-btn {
+				padding: 6px 17px;
+			}
+
+			&-active {
+				background: var(--bg-slate-400, #1d212d);
+			}
+		}
+	}
+}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -0,0 +1,58 @@
+import { TabRoutes } from 'components/RouteTab/types';
+import ROUTES from 'constants/routes';
+import AlertHistory from 'container/AlertHistory';
+import { AlertDetailsTab } from 'container/AlertHistory/types';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { History, Table } from 'lucide-react';
+import EditRules from 'pages/EditRules';
+import { generatePath } from 'react-router-dom';
+
+export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
+	const urlQuery = useUrlQuery();
+
+	const getRouteUrl = (tab: AlertDetailsTab): string => {
+		let route = '';
+		let params = urlQuery.toString();
+
+		switch (tab) {
+			case AlertDetailsTab.OVERVIEW:
+				route = ROUTES.ALERT_OVERVIEW;
+				break;
+			case AlertDetailsTab.HISTORY:
+				params = `ruleId=${urlQuery.get('ruleId') ?? ''}`;
+				route = ROUTES.ALERT_HISTORY;
+				break;
+			default:
+				return '';
+		}
+
+		return `${generatePath(route)}?${params}`;
+	};
+
+	const routes = [
+		{
+			Component: EditRules,
+			name: (
+				<div className="tab-item">
+					<Table size={14} />
+					Overview
+				</div>
+			),
+			route: getRouteUrl(AlertDetailsTab.OVERVIEW),
+			key: ROUTES.ALERT_OVERVIEW,
+		},
+		{
+			Component: AlertHistory,
+			name: (
+				<div className="tab-item">
+					<History size={14} />
+					History
+				</div>
+			),
+			route: getRouteUrl(AlertDetailsTab.HISTORY),
+			key: ROUTES.ALERT_HISTORY,
+		},
+	];
+
+	return { routes };
+};

frontend/src/pages/AlertDetails/index.tsx

@@ -0,0 +1,43 @@
+import './alertDetails.styles.scss';
+
+import { ConfigProvider } from 'antd';
+import { Filters } from 'components/AlertDetailsFilters/Filters';
+import RouteTab from 'components/RouteTab';
+import history from 'lib/history';
+import { useLocation } from 'react-router-dom';
+
+import { useRouteTabUtils } from './hooks';
+
+function AlertDetails(): JSX.Element {
+	const { pathname } = useLocation();
+
+	const { routes } = useRouteTabUtils();
+
+	return (
+		<div className="tabs-and-filters">
+			<ConfigProvider
+				theme={{
+					components: {
+						Tabs: {
+							titleFontSize: 14,
+							inkBarColor: 'none',
+							itemColor: 'var(--vanilla-400, #C0C1C3)',
+							itemSelectedColor: 'var(--Vanilla-100, #FFF)',
+							itemHoverColor: 'var(--Vanilla-100, #FFF)',
+							horizontalItemGutter: 0,
+						},
+					},
+				}}
+			>
+				<RouteTab
+					routes={routes}
+					activeKey={pathname}
+					history={history}
+					tabBarExtraContent={<Filters />}
+				/>
+			</ConfigProvider>
+		</div>
+	);
+}
+
+export default AlertDetails;

frontend/src/pages/AlertHistory/index.tsx

@@ -0,0 +1,3 @@
+import AlertHistory from 'container/AlertHistory';
+
+export default AlertHistory;

frontend/src/utils/permission/index.ts

@@ -64,6 +64,8 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ERROR_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'],
 	HOME_PAGE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LIST_ALL_ALERT: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ALERT_HISTORY: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ALERT_OVERVIEW: ['ADMIN'],
 	LOGIN: ['ADMIN', 'EDITOR', 'VIEWER'],
 	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],