chore(unused-files): remove all unused files

docs/api/openapi.yml

@@ -17273,9 +17273,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - ADMIN
       - tokenizer:
-        - VIEWER
+        - ADMIN
       summary: Get host info from Zeus.
       tags:
       - zeus

frontend/knip.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "project": ["src/**/*.ts", "src/**/*.tsx"],
-  "ignore": ["src/api/generated/**/*.ts"]
+  "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"]
 }

frontend/src/components/Common/Common.styles.scss

@@ -1,33 +0,0 @@
-.error-state-container {
-	height: 240px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-
-	border-radius: 3px;
-
-	.error-state-container-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		.error-state-text {
-			font-size: 14px;
-			font-weight: 500;
-		}
-
-		.error-state-additional-messages {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.error-state-additional-text {
-				font-size: 12px;
-				font-weight: 400;
-				margin-left: 8px;
-			}
-		}
-	}
-}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,59 +0,0 @@
-import { Typography } from 'antd';
-
-import APIError from '../../types/api/error';
-
-import './Common.styles.scss';
-
-interface ErrorStateComponentProps {
-	message?: string;
-	error?: APIError;
-}
-
-const defaultProps: Partial<ErrorStateComponentProps> = {
-	message: undefined,
-	error: undefined,
-};
-
-function ErrorStateComponent({
-	message,
-	error,
-}: ErrorStateComponentProps): JSX.Element {
-	// Handle API Error object
-	if (error) {
-		const mainMessage = error.getErrorMessage();
-		const additionalErrors = error.getErrorDetails().error.errors || [];
-
-		return (
-			<div className="error-state-container">
-				<div className="error-state-container-content">
-					<Typography className="error-state-text">{mainMessage}</Typography>
-					{additionalErrors.length > 0 && (
-						<div className="error-state-additional-messages">
-							{additionalErrors.map((additionalError) => (
-								<Typography
-									key={`error-${additionalError.message}`}
-									className="error-state-additional-text"
-								>
-									• {additionalError.message}
-								</Typography>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	// Handle simple string message (backwards compatibility)
-	return (
-		<div className="error-state-container">
-			<div className="error-state-container-content">
-				<Typography className="error-state-text">{message}</Typography>
-			</div>
-		</div>
-	);
-}
-
-ErrorStateComponent.defaultProps = defaultProps;
-
-export default ErrorStateComponent;

frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss

@@ -1,4 +0,0 @@
-.custom-date-picker {
-	display: flex;
-	flex-direction: column;
-}

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,105 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { DatePicker } from 'antd';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import {
-	CustomTimeType,
-	LexicalContext,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import dayjs, { Dayjs } from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import './RangePickerModal.styles.scss';
-
-interface RangePickerModalProps {
-	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
-	setIsOpen: Dispatch<SetStateAction<boolean>>;
-	onCustomDateHandler: (
-		dateTimeRange: DateTimeRangeType,
-		lexicalContext?: LexicalContext | undefined,
-	) => void;
-	selectedTime: string;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-function RangePickerModal(props: RangePickerModalProps): JSX.Element {
-	const {
-		setCustomDTPickerVisible,
-		setIsOpen,
-		onCustomDateHandler,
-		selectedTime,
-		onTimeChange,
-	} = props;
-	const { RangePicker } = DatePicker;
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// Using any type here because antd's DatePicker expects its own internal Dayjs type
-	// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
-	const disabledDate = (current: any): boolean => {
-		const currentDay = dayjs(current);
-		return currentDay.isAfter(dayjs());
-	};
-
-	const onPopoverClose = (visible: boolean): void => {
-		if (!visible) {
-			setCustomDTPickerVisible(false);
-		}
-		setIsOpen(visible);
-	};
-
-	const onModalOkHandler = (date_time: any): void => {
-		if (date_time?.[1]) {
-			onPopoverClose(false);
-		}
-		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
-	};
-	const { timezone } = useTimezone();
-
-	const rangeValue: [Dayjs, Dayjs] = useMemo(
-		() => [
-			dayjs(minTime / 1000_000).tz(timezone.value),
-			dayjs(maxTime / 1000_000).tz(timezone.value),
-		],
-		[maxTime, minTime, timezone.value],
-	);
-
-	return (
-		<div className="custom-date-picker">
-			<RangePicker
-				disabledDate={disabledDate}
-				allowClear
-				showTime
-				format={(date: Dayjs): string =>
-					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
-				}
-				onOk={onModalOkHandler}
-				data-1p-ignore
-				{...(selectedTime === 'custom' &&
-					!onTimeChange && {
-						value: rangeValue,
-					})}
-				// use default value if onTimeChange is provided
-				{...(selectedTime === 'custom' &&
-					onTimeChange && {
-						defaultValue: rangeValue,
-					})}
-			/>
-		</div>
-	);
-}
-
-RangePickerModal.defaultProps = {
-	onTimeChange: undefined,
-};
-
-export default RangePickerModal;

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,93 +0,0 @@
-.details-drawer {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-	}
-	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
-
-		.ant-drawer-header-title {
-			display: flex;
-			align-items: center;
-
-			.ant-drawer-close {
-				margin-inline-end: 0px;
-				padding: 0px;
-				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
-			}
-
-			.ant-drawer-title {
-				padding-left: 16px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-	.ant-drawer-body {
-		padding: 16px;
-		background: var(--l2-background);
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-	}
-
-	.details-drawer-tabs {
-		margin-top: 32px;
-
-		.ant-tabs-tab {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 114px;
-			height: 32px;
-			flex-shrink: 0;
-			padding: 7px 20px;
-			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-			letter-spacing: -0.06px;
-
-			.ant-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0px;
-			}
-
-			.ant-btn:hover {
-				background: unset;
-			}
-		}
-
-		.ant-tabs-tab-active {
-			background: var(--l3-background);
-		}
-
-		.ant-tabs-tab + .ant-tabs-tab {
-			margin-left: 0px;
-		}
-
-		.ant-tabs-nav::before {
-			border-bottom: 0px;
-		}
-
-		.ant-tabs-ink-bar {
-			background: none;
-		}
-	}
-}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -1,57 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Drawer, Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
-
-import './DetailsDrawer.styles.scss';
-
-interface IDetailsDrawerProps {
-	open: boolean;
-	setOpen: Dispatch<SetStateAction<boolean>>;
-	title: string;
-	descriptiveContent: JSX.Element;
-	defaultActiveKey: string;
-	items: TabsProps['items'];
-	detailsDrawerClassName?: string;
-	tabBarExtraContent?: JSX.Element;
-}
-
-function DetailsDrawer(props: IDetailsDrawerProps): JSX.Element {
-	const {
-		open,
-		setOpen,
-		title,
-		descriptiveContent,
-		defaultActiveKey,
-		detailsDrawerClassName,
-		items,
-		tabBarExtraContent,
-	} = props;
-	return (
-		<Drawer
-			width="60%"
-			open={open}
-			afterOpenChange={setOpen}
-			mask={false}
-			title={title}
-			onClose={(): void => setOpen(false)}
-			className="details-drawer"
-		>
-			<div>{descriptiveContent}</div>
-			<Tabs
-				items={items}
-				addIcon
-				defaultActiveKey={defaultActiveKey}
-				animated
-				className={cx('details-drawer-tabs', detailsDrawerClassName)}
-				tabBarExtraContent={tabBarExtraContent}
-			/>
-		</Drawer>
-	);
-}
-
-DetailsDrawer.defaultProps = {
-	detailsDrawerClassName: '',
-	tabBarExtraContent: null,
-};
-
-export default DetailsDrawer;

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import { Button } from 'antd';
-
-import { withErrorBoundary } from './index';
-
-/**
- * Example component that can throw errors
- */
-function ProblematicComponent(): JSX.Element {
-	const [shouldThrow, setShouldThrow] = useState(false);
-
-	if (shouldThrow) {
-		throw new Error('This is a test error from ProblematicComponent!');
-	}
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h3>Problematic Component</h3>
-			<p>This component can throw errors when the button is clicked.</p>
-			<Button type="primary" onClick={(): void => setShouldThrow(true)} danger>
-				Trigger Error
-			</Button>
-		</div>
-	);
-}
-
-/**
- * Basic usage - wraps component with default error boundary
- */
-export const SafeProblematicComponent = withErrorBoundary(ProblematicComponent);
-
-/**
- * Usage with custom fallback component
- */
-function CustomErrorFallback(): JSX.Element {
-	return (
-		<div
-			style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}
-		>
-			<h4 style={{ color: 'red' }}>Custom Error Fallback</h4>
-			<p>Something went wrong in this specific component!</p>
-			<Button onClick={(): void => window.location.reload()}>Reload Page</Button>
-		</div>
-	);
-}
-
-export const SafeProblematicComponentWithCustomFallback = withErrorBoundary(
-	ProblematicComponent,
-	{
-		fallback: <CustomErrorFallback />,
-	},
-);
-
-/**
- * Usage with custom error handler
- */
-export const SafeProblematicComponentWithErrorHandler = withErrorBoundary(
-	ProblematicComponent,
-	{
-		onError: (error, errorInfo) => {
-			console.error('Custom error handler:', error);
-			console.error('Error info:', errorInfo);
-			// You could also send to analytics, logging service, etc.
-		},
-		sentryOptions: {
-			tags: {
-				section: 'dashboard',
-				priority: 'high',
-			},
-			level: 'error',
-		},
-	},
-);
-
-/**
- * Example of wrapping an existing component from the codebase
- */
-function ExistingComponent({
-	title,
-	data,
-}: {
-	title: string;
-	data: any[];
-}): JSX.Element {
-	// This could be any existing component that might throw errors
-	return (
-		<div>
-			<h4>{title}</h4>
-			<ul>
-				{data.map((item, index) => (
-					// eslint-disable-next-line react/no-array-index-key
-					<li key={index}>{item.name}</li>
-				))}
-			</ul>
-		</div>
-	);
-}
-
-export const SafeExistingComponent = withErrorBoundary(ExistingComponent, {
-	sentryOptions: {
-		tags: {
-			component: 'ExistingComponent',
-			feature: 'data-display',
-		},
-	},
-});
-
-/**
- * Usage examples in a container component
- */
-export function ErrorBoundaryExamples(): JSX.Element {
-	const sampleData = [
-		{ name: 'Item 1' },
-		{ name: 'Item 2' },
-		{ name: 'Item 3' },
-	];
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h2>Error Boundary HOC Examples</h2>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>1. Basic Usage</h3>
-				<SafeProblematicComponent />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>2. With Custom Fallback</h3>
-				<SafeProblematicComponentWithCustomFallback />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>3. With Custom Error Handler</h3>
-				<SafeProblematicComponentWithErrorHandler />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>4. Wrapped Existing Component</h3>
-				<SafeExistingComponent title="Sample Data" data={sampleData} />
-			</div>
-		</div>
-	);
-}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -1,13 +0,0 @@
-.query-builder-search-wrapper {
-	margin-top: 10px;
-	border: 1px solid var(--l1-border);
-	border-bottom: none;
-
-	.ant-select-selector {
-		border: none !important;
-
-		input {
-			font-size: 12px;
-		}
-	}
-}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -1,79 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import './QueryBuilderSearchWrapper.styles.scss';
-
-function QueryBuilderSearchWrapper({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-	suffixIcon,
-	setFilters,
-	setContextQuery,
-}: QueryBuilderSearchWraperProps): JSX.Element {
-	const initialContextQuery = useInitialQuery(log);
-
-	useEffect(() => {
-		setContextQuery(initialContextQuery);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length ||
-			!contextQuery
-		) {
-			return;
-		}
-
-		const nextQuery: Query = {
-			...contextQuery,
-			builder: {
-				...contextQuery.builder,
-				queryData: contextQuery.builder.queryData.map((item) => ({
-					...item,
-					filters: tagFilters,
-				})),
-			},
-		};
-
-		setFilters({ ...tagFilters });
-		setContextQuery({ ...nextQuery });
-	};
-
-	if (!contextQuery || !isEdit) {
-		return <></>;
-	}
-
-	return (
-		<QueryBuilderSearch
-			query={contextQuery?.builder.queryData[0]}
-			onChange={handleSearch}
-			className="query-builder-search-wrapper"
-			suffixIcon={suffixIcon}
-		/>
-	);
-}
-
-interface QueryBuilderSearchWraperProps {
-	log: ILog;
-	isEdit: boolean;
-	contextQuery: Query | undefined;
-	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
-	filters: TagFilter | null;
-	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
-	suffixIcon?: React.ReactNode;
-}
-
-QueryBuilderSearchWrapper.defaultProps = {
-	suffixIcon: undefined,
-};
-
-export default QueryBuilderSearchWrapper;

frontend/src/components/Logs/RawLogView/config.ts

@@ -1,3 +0,0 @@
-import { CSSProperties } from 'react';
-
-export const rawLineStyle: CSSProperties = {};

frontend/src/components/Logs/styles.ts

@@ -1,8 +0,0 @@
-import { Button } from 'antd';
-import styled from 'styled-components';
-
-export const ButtonContainer = styled(Button)`
-	&&& {
-		padding-left: 0;
-	}
-`;

frontend/src/components/NewSelect/CustomMultiSelect.scss

@@ -1,13 +0,0 @@
-.custom-multiselect-dropdown {
-	.divider {
-		height: 1px;
-		background-color: #e8e8e8;
-		margin: 4px 0;
-	}
-
-	.all-option {
-		font-weight: 500;
-		border-bottom: 1px solid #f0f0f0;
-		margin-bottom: 8px;
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-panel-data {
-	padding: 24px 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-
-	.loading-panel-data-content {
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,17 +0,0 @@
-import { Typography } from 'antd';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './PanelDataLoading.styles.scss';
-
-export function PanelDataLoading(): JSX.Element {
-	return (
-		<div className="loading-panel-data">
-			<div className="loading-panel-data-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography.Text>Fetching data...</Typography.Text>
-			</div>
-		</div>
-	);
-}

frontend/src/components/Styled/styles.ts

@@ -1,41 +0,0 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components';
-
-const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
-	key &&
-	value &&
-	css`
-		${key}: ${value};
-	`;
-
-interface IFlexProps {
-	flexDirection?: string; // Need to replace this with exact css props. Not able to find any :(
-	flex?: number | string;
-}
-export const Flex = ({
-	flexDirection,
-	flex,
-}: IFlexProps): FlattenSimpleInterpolation => css`
-	${cssProperty('flex-direction', flexDirection)}
-	${cssProperty('flex', flex)}
-`;
-
-interface IDisplayProps {
-	display?: string;
-}
-export const Display = ({
-	display,
-}: IDisplayProps): FlattenSimpleInterpolation => css`
-	${cssProperty('display', display)}
-`;
-
-interface ISpacingProps {
-	margin?: string;
-	padding?: string;
-}
-export const Spacing = ({
-	margin,
-	padding,
-}: ISpacingProps): FlattenSimpleInterpolation => css`
-	${cssProperty('margin', margin)}
-	${cssProperty('padding', padding)}
-`;

frontend/src/components/TabLabel/TabLabel.interfaces.ts

@@ -1,5 +0,0 @@
-export type TabLabelProps = {
-	isDisabled: boolean;
-	label: string;
-	tooltipText?: string;
-};

frontend/src/components/TabLabel/index.tsx

@@ -1,29 +0,0 @@
-import { memo } from 'react';
-import { Tooltip } from 'antd';
-
-import { TabLabelProps } from './TabLabel.interfaces';
-
-function TabLabel({
-	label,
-	isDisabled,
-	tooltipText,
-}: TabLabelProps): JSX.Element {
-	const currentLabel = <span data-testid={`${label}`}>{label}</span>;
-
-	if (isDisabled) {
-		return (
-			<Tooltip
-				trigger="hover"
-				autoAdjustOverflow
-				placement="top"
-				title={tooltipText}
-			>
-				{currentLabel}
-			</Tooltip>
-		);
-	}
-
-	return currentLabel;
-}
-
-export default memo(TabLabel);

frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss

@@ -1,5 +0,0 @@
-.tab-title {
-	display: flex;
-	gap: 4px;
-	align-items: center;
-}

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

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { Radio } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
-import { History, Table } from 'lucide-react';
-
-import { ALERT_TABS } from '../constants';
-
-import './Tabs.styles.scss';
-
-export function Tabs(): JSX.Element {
-	const [selectedTab, setSelectedTab] = useState('overview');
-
-	const handleTabChange = (e: RadioChangeEvent): void => {
-		setSelectedTab(e.target.value);
-	};
-
-	return (
-		<Radio.Group className="tabs" onChange={handleTabChange} value={selectedTab}>
-			<Radio.Button
-				className={
-					selectedTab === ALERT_TABS.OVERVIEW ? 'selected_view tab' : 'tab'
-				}
-				value={ALERT_TABS.OVERVIEW}
-			>
-				<div className="tab-title">
-					<Table size={14} />
-					Overview
-				</div>
-			</Radio.Button>
-			<Radio.Button
-				className={selectedTab === ALERT_TABS.HISTORY ? 'selected_view tab' : 'tab'}
-				value={ALERT_TABS.HISTORY}
-			>
-				<div className="tab-title">
-					<History size={14} />
-					History
-				</div>
-			</Radio.Button>
-		</Radio.Group>
-	);
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss

@@ -1,18 +0,0 @@
-@mixin flex-center {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.tabs-and-filters {
-	@include flex-center;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	.filters {
-		@include flex-center;
-		gap: 16px;
-		.reset-button {
-			@include flex-center;
-		}
-	}
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -1,16 +0,0 @@
-import { Filters } from 'components/AlertDetailsFilters/Filters';
-
-import { Tabs } from './Tabs/Tabs';
-
-import './TabsAndFilters.styles.scss';
-
-function TabsAndFilters(): JSX.Element {
-	return (
-		<div className="tabs-and-filters">
-			<Tabs />
-			<Filters />
-		</div>
-	);
-}
-
-export default TabsAndFilters;

frontend/src/components/TabsAndFilters/constants.ts

@@ -1,5 +0,0 @@
-export const ALERT_TABS = {
-	OVERVIEW: 'OVERVIEW',
-	HISTORY: 'HISTORY',
-	ACTIVITY: 'ACTIVITY',
-} as const;

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -1,73 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-
-import { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
-
-import tableStyles from './TanStackTable.module.scss';
-import styles from './TanStackTableSkeleton.module.scss';
-
-type TanStackTableSkeletonProps<TData> = {
-	columns: TableColumnDef<TData>[];
-	rowCount: number;
-	isDarkMode: boolean;
-	columnSizing?: ColumnSizingState;
-};
-
-export function TanStackTableSkeleton<TData>({
-	columns,
-	rowCount,
-	isDarkMode,
-	columnSizing,
-}: TanStackTableSkeletonProps<TData>): JSX.Element {
-	const rows = useMemo(
-		() => Array.from({ length: rowCount }, (_, i) => i),
-		[rowCount],
-	);
-
-	return (
-		<table className={tableStyles.tanStackTable}>
-			<colgroup>
-				{columns.map((column, index) => (
-					<col
-						key={column.id}
-						style={getColumnWidthStyle(
-							column,
-							columnSizing?.[column.id],
-							index === columns.length - 1,
-						)}
-					/>
-				))}
-			</colgroup>
-			<thead>
-				<tr>
-					{columns.map((column) => (
-						<th
-							key={column.id}
-							className={tableStyles.tableHeaderCell}
-							data-dark-mode={isDarkMode}
-						>
-							{typeof column.header === 'function' ? (
-								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
-							) : (
-								column.header
-							)}
-						</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((rowIndex) => (
-					<tr key={rowIndex} className={tableStyles.tableRow}>
-						{columns.map((column) => (
-							<td key={column.id} className={tableStyles.tableCell}>
-								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-}

frontend/src/components/TimePreferenceDropDown/styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-interface TextContainerProps {
-	noButtonMargin?: boolean;
-}
-
-export const TextContainer = styled.div<TextContainerProps>`
-	display: flex;
-
-	> button {
-		margin-left: ${({ noButtonMargin }): string =>
-			noButtonMargin ? '0' : '0.5rem'}
-`;

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -1,42 +0,0 @@
-import { ReactChild } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, Space, Typography } from 'antd';
-
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
-import { Container, LeftContainer, Logo } from './styles';
-
-const { Title } = Typography;
-
-function WelcomeLeftContainer({
-	version,
-	children,
-}: WelcomeLeftContainerProps): JSX.Element {
-	const { t } = useTranslation();
-
-	return (
-		<Container>
-			<LeftContainer direction="vertical">
-				<Space align="center">
-					<Logo src={signozBrandLogoUrl} alt="logo" />
-					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
-				</Space>
-				<Typography>{t('monitor_signup')}</Typography>
-				<Card
-					style={{ width: 'max-content' }}
-					bodyStyle={{ padding: '1px 8px', width: '100%' }}
-				>
-					SigNoz {version}
-				</Card>
-			</LeftContainer>
-			{children}
-		</Container>
-	);
-}
-
-interface WelcomeLeftContainerProps {
-	version: string;
-	children: ReactChild;
-}
-
-export default WelcomeLeftContainer;

frontend/src/components/WelcomeLeftContainer/styles.ts

@@ -1,23 +0,0 @@
-import { Space } from 'antd';
-import styled from 'styled-components';
-
-export const LeftContainer = styled(Space)`
-	flex: 1;
-`;
-
-export const Logo = styled.img`
-	width: 60px;
-`;
-
-export const Container = styled.div`
-	&&& {
-		display: flex;
-		justify-content: center;
-		gap: 16px;
-		align-items: center;
-		min-height: 100vh;
-
-		max-width: 1024px;
-		margin: 0 auto;
-	}
-`;

frontend/src/container/AlertHistory/Timeline/Table/types.ts

@@ -1,9 +0,0 @@
-import {
-	AlertRuleTimelineTableResponse,
-	AlertRuleTimelineTableResponsePayload,
-} from 'types/api/alerts/def';
-
-export type TimelineTableProps = {
-	timelineData: AlertRuleTimelineTableResponse[];
-	totalItems: AlertRuleTimelineTableResponsePayload['data']['total'];
-};

frontend/src/container/AlertHistory/Timeline/constants.ts

@@ -1,2 +0,0 @@
-// setting to 25 hours because we want to display the horizontal graph when the user selects 'Last 1 day' from date and time selector
-export const HORIZONTAL_GRAPH_HOURS_THRESHOLD = 25;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointDetailsZeroState.tsx

@@ -1,42 +0,0 @@
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
-import EndPointsDropDown from './EndPointsDropDown';
-
-function EndPointDetailsZeroState({
-	setSelectedEndPointName,
-	endPointDropDownDataQuery,
-}: {
-	setSelectedEndPointName: (endPointName: string) => void;
-	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>>;
-}): JSX.Element {
-	return (
-		<div className="end-point-details-zero-state-wrapper">
-			<div className="end-point-details-zero-state-content">
-				<img
-					src={noDataUrl}
-					alt="no-data"
-					width={32}
-					height={32}
-					className="end-point-details-zero-state-icon"
-				/>
-				<div className="end-point-details-zero-state-content-wrapper">
-					<div className="end-point-details-zero-state-text-content">
-						<div className="title">No endpoint selected yet</div>
-						<div className="description">Select an endpoint to see the details</div>
-					</div>
-					<EndPointsDropDown
-						setSelectedEndPointName={setSelectedEndPointName}
-						endPointDropDownDataQuery={endPointDropDownDataQuery}
-						parentContainerDiv=".end-point-details-zero-state-wrapper"
-						dropdownStyle={{ width: '60%' }}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default EndPointDetailsZeroState;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ExpandedRow.tsx

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-import { useQueries } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table } from 'antd';
-import type { ColumnType } from 'antd/lib/table';
-import logEvent from 'api/common/logEvent';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	createFiltersForSelectedRowData,
-	EndPointsTableRowData,
-	formatEndPointsDataForTable,
-	getEndPointsColumnsConfig,
-	getEndPointsQueryPayload,
-} from 'container/ApiMonitoring/utils';
-import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { VIEW_TYPES, VIEWS } from '../constants';
-
-function ExpandedRow({
-	domainName,
-	selectedRowData,
-	setSelectedEndPointName,
-	setSelectedView,
-	orderBy,
-}: {
-	domainName: string;
-	selectedRowData: EndPointsTableRowData;
-	setSelectedEndPointName: (name: string) => void;
-	setSelectedView: (view: VIEWS) => void;
-	orderBy: OrderByPayload | null;
-}): JSX.Element {
-	const nestedColumns = useMemo(() => getEndPointsColumnsConfig(false, []), []);
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const groupedByRowDataQueryPayload = useMemo(() => {
-		if (!selectedRowData) {
-			return null;
-		}
-
-		const filters = createFiltersForSelectedRowData(selectedRowData);
-
-		const baseQueryPayload = getEndPointsQueryPayload(
-			[],
-			domainName,
-			Math.floor(minTime / 1e9),
-			Math.floor(maxTime / 1e9),
-		);
-
-		return baseQueryPayload.map((currentQueryPayload) => ({
-			...currentQueryPayload,
-			query: {
-				...currentQueryPayload.query,
-				builder: {
-					...currentQueryPayload.query.builder,
-					queryData: currentQueryPayload.query.builder.queryData.map(
-						(queryData) => ({
-							...queryData,
-							filters: {
-								items: [...(queryData.filters?.items || []), ...(filters?.items || [])],
-								op: 'AND',
-							},
-						}),
-					),
-				},
-			},
-		}));
-	}, [domainName, minTime, maxTime, selectedRowData]);
-
-	const groupedByRowQueries = useQueries(
-		groupedByRowDataQueryPayload
-			? groupedByRowDataQueryPayload.map((payload) => ({
-					queryKey: [
-						`${REACT_QUERY_KEY.GET_NESTED_ENDPOINTS_LIST}-${domainName}-${selectedRowData?.key}`,
-						payload,
-						ENTITY_VERSION_V4,
-						selectedRowData?.key,
-					],
-					queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-						GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-					enabled: !!payload && !!selectedRowData,
-				}))
-			: [],
-	);
-
-	const groupedByRowQuery = groupedByRowQueries[0];
-	return (
-		<div className="expanded-table-container">
-			{groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading ? (
-				<LoadingContainer />
-			) : (
-				<div className="expanded-table">
-					<Table
-						columns={nestedColumns as ColumnType<EndPointsTableRowData>[]}
-						dataSource={
-							groupedByRowQuery?.data
-								? formatEndPointsDataForTable(
-										groupedByRowQuery.data?.payload.data.result[0].table?.rows,
-										[],
-										orderBy,
-									)
-								: []
-						}
-						pagination={false}
-						scroll={{ x: true }}
-						tableLayout="fixed"
-						showHeader={false}
-						loading={{
-							spinning: groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading,
-							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-						}}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
-								setSelectedEndPointName(record.endpointName);
-								setSelectedView(VIEW_TYPES.ENDPOINT_STATS);
-								logEvent('API Monitoring: Endpoint name row clicked', {});
-							},
-							className: 'expanded-clickable-row',
-						})}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ExpandedRow;

frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx

@@ -1,33 +0,0 @@
-import { PureComponent } from 'react';
-
-interface State {
-	hasError: boolean;
-}
-
-interface Props {
-	children: JSX.Element;
-}
-
-class ErrorLink extends PureComponent<Props, State> {
-	constructor(props: Props) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError(): State {
-		return { hasError: true };
-	}
-
-	render(): JSX.Element {
-		const { children } = this.props;
-		const { hasError } = this.state;
-
-		if (hasError) {
-			return <div />;
-		}
-
-		return children;
-	}
-}
-
-export default ErrorLink;

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-
-function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
-	const isInternalLink = href.startsWith('/');
-
-	if (isInternalLink) {
-		return <Link to={href}>{children}</Link>;
-	}
-
-	return (
-		<a rel="noreferrer" target="_blank" href={href}>
-			{children}
-		</a>
-	);
-}
-
-interface LinkContainerProps {
-	children: ReactNode;
-	href: string;
-}
-
-export default LinkContainer;

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -1,49 +0,0 @@
-import { lazy, Suspense, useMemo } from 'react';
-import { Menu, Space } from 'antd';
-import Spinner from 'components/Spinner';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import { lazyRetry } from 'utils/lazyWithRetries';
-
-import ErrorLink from './ErrorLink';
-import LinkContainer from './Link';
-
-function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
-	const sortedConfig = useMemo(
-		() => config.components.sort((a, b) => a.position - b.position),
-		[config.components],
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const items = sortedConfig.map((item) => {
-		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-
-		const Component = lazy(() =>
-			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
-		);
-		return {
-			key: item.text + item.href,
-			label: (
-				<ErrorLink key={item.text + item.href}>
-					<Suspense fallback={<Spinner height="5vh" />}>
-						<LinkContainer href={item.href}>
-							<Space size="small" align="start">
-								<Component />
-								{item.text}
-							</Space>
-						</LinkContainer>
-					</Suspense>
-				</ErrorLink>
-			),
-		};
-	});
-
-	return <Menu items={items} />;
-}
-
-interface HelpToolTipProps {
-	config: ConfigProps;
-}
-
-export default HelpToolTip;

frontend/src/container/ConfigDropdown/index.tsx

@@ -1,76 +0,0 @@
-import { useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import {
-	CaretDownFilled,
-	CaretUpFilled,
-	QuestionCircleFilled,
-	QuestionCircleOutlined,
-} from '@ant-design/icons';
-import { Space } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { AppState } from 'store/reducers';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import AppReducer from 'types/reducer/app';
-
-import HelpToolTip from './Config';
-import { ConfigDropdown } from './styles';
-
-function DynamicConfigDropdown({
-	frontendId,
-}: DynamicConfigDropdownProps): JSX.Element {
-	const { configs } = useSelector<AppState, AppReducer>((state) => state.app);
-	const isDarkMode = useIsDarkMode();
-	const [isHelpDropDownOpen, setIsHelpDropDownOpen] = useState<boolean>(false);
-
-	const config = useMemo(
-		() =>
-			Object.values(configs).find(
-				(config) => config.frontendPositionId === frontendId,
-			),
-		[frontendId, configs],
-	);
-
-	const onToggleHandler = (): void => {
-		setIsHelpDropDownOpen(!isHelpDropDownOpen);
-	};
-
-	const menu = useMemo(
-		() => ({
-			items: [
-				{
-					key: '1',
-					label: <HelpToolTip config={config as ConfigProps} />,
-				},
-			],
-		}),
-		[config],
-	);
-
-	if (!config) {
-		return <div />;
-	}
-
-	const Icon = isDarkMode ? QuestionCircleOutlined : QuestionCircleFilled;
-	const DropDownIcon = isHelpDropDownOpen ? CaretUpFilled : CaretDownFilled;
-
-	return (
-		<ConfigDropdown
-			onOpenChange={onToggleHandler}
-			trigger={['click']}
-			menu={menu}
-			open={isHelpDropDownOpen}
-		>
-			<Space align="center">
-				<Icon style={{ fontSize: 26, color: 'white', paddingTop: 26 }} />
-				<DropDownIcon style={{ color: 'white' }} />
-			</Space>
-		</ConfigDropdown>
-	);
-}
-
-interface DynamicConfigDropdownProps {
-	frontendId: string;
-}
-
-export default DynamicConfigDropdown;

frontend/src/container/ConfigDropdown/styles.ts

@@ -1,6 +0,0 @@
-import { Dropdown } from 'antd';
-import styled from 'styled-components';
-
-export const ConfigDropdown = styled(Dropdown)`
-	cursor: pointer;
-`;

frontend/src/container/CreateAlertV2/EvaluationSettings/index.ts

@@ -1,3 +0,0 @@
-import EvaluationSettings from './EvaluationSettings';
-
-export default EvaluationSettings;

frontend/src/container/DashboardContainer/DashboardDescription/DashboardName/index.tsx

@@ -1,27 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import Input from 'components/Input';
-
-function DashboardName({ setName, name }: DashboardNameProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => {
-			setName(e.target.value);
-		},
-		[setName],
-	);
-
-	return (
-		<Input
-			size="middle"
-			placeholder="Title"
-			value={name}
-			onChangeHandler={onChangeHandler}
-		/>
-	);
-}
-
-interface DashboardNameProps {
-	name: string;
-	setName: Dispatch<SetStateAction<string>>;
-}
-
-export default DashboardName;

frontend/src/container/DashboardContainer/DashboardDescription/ShareModal.tsx

@@ -1,100 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import { CopyFilled, DownloadOutlined } from '@ant-design/icons';
-import { Button, Modal } from 'antd';
-import Editor from 'components/Editor';
-import { useNotifications } from 'hooks/useNotifications';
-import { DashboardData } from 'types/api/dashboard/getAll';
-
-import { downloadObjectAsJson } from './utils';
-
-function ShareModal({
-	isJSONModalVisible,
-	onToggleHandler,
-	selectedData,
-}: ShareModalProps): JSX.Element {
-	const getParsedValue = (): string => JSON.stringify(selectedData, null, 2);
-
-	const [jsonValue, setJSONValue] = useState<string>(getParsedValue());
-	const { t } = useTranslation(['dashboard', 'common']);
-	const [state, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-
-	useEffect(() => {
-		if (state.error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
-
-		if (state.value) {
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
-		}
-	}, [state.error, state.value, t, notifications]);
-
-	const GetFooterComponent = useMemo(() => {
-		return (
-			<>
-				<Button
-					style={{
-						marginTop: '16px',
-					}}
-					onClick={(): void => setCopy(jsonValue)}
-					type="primary"
-					size="small"
-				>
-					<CopyFilled /> {t('copy_to_clipboard')}
-				</Button>
-
-				<Button
-					type="primary"
-					size="small"
-					onClick={(): void => {
-						downloadObjectAsJson(selectedData, selectedData.title);
-					}}
-				>
-					<DownloadOutlined /> {t('download_json')}
-				</Button>
-			</>
-		);
-	}, [jsonValue, selectedData, setCopy, t]);
-
-	return (
-		<Modal
-			open={isJSONModalVisible}
-			onCancel={(): void => {
-				onToggleHandler();
-			}}
-			width="80vw"
-			centered
-			title={t('share', {
-				ns: 'common',
-			})}
-			okText={t('download_json')}
-			cancelText={t('cancel')}
-			destroyOnClose
-			footer={GetFooterComponent}
-		>
-			<Editor
-				height="70vh"
-				onChange={(value): void => setJSONValue(value)}
-				value={jsonValue}
-			/>
-		</Modal>
-	);
-}
-
-interface ShareModalProps {
-	isJSONModalVisible: boolean;
-	onToggleHandler: VoidFunction;
-	selectedData: DashboardData;
-}
-
-export default ShareModal;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/index.tsx

@@ -1,35 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import { Input } from 'antd';
-
-import { Container } from './styles';
-
-const { TextArea } = Input;
-
-function Description({
-	description,
-	setDescription,
-}: DescriptionProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLTextAreaElement>) => {
-			setDescription(e.target.value);
-		},
-		[setDescription],
-	);
-
-	return (
-		<Container>
-			<TextArea
-				placeholder="Description of the dashboard"
-				onChange={onChangeHandler}
-				value={description}
-			/>
-		</Container>
-	);
-}
-
-interface DescriptionProps {
-	description: string;
-	setDescription: Dispatch<SetStateAction<string>>;
-}
-
-export default Description;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 1rem;
-`;

frontend/src/container/DownloadV2/DownloadV2.styles.scss

@@ -1,59 +0,0 @@
-.download-logs-popover {
-	.ant-popover-inner {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 12px 18px 12px 14px;
-
-		.download-logs-content {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			align-items: flex-start;
-
-			.action-btns {
-				padding: 4px 0px !important;
-				width: 159px;
-				display: flex;
-				align-items: center;
-				color: var(--l2-foreground);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				gap: 6px;
-
-				.ant-btn-icon {
-					margin-inline-end: 0px;
-				}
-			}
-
-			.action-btns:hover {
-				&.ant-btn-text {
-					background-color: color-mix(
-						in srgb,
-						var(--bg-robin-200) 4%,
-						transparent
-					) !important;
-				}
-			}
-
-			.export-heading {
-				color: var(--muted-foreground);
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 600;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.88px;
-				text-transform: uppercase;
-			}
-		}
-	}
-}

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { Button, Popover, Typography } from 'antd';
-import { FileDigit, FileDown, Sheet } from 'lucide-react';
-import { unparse } from 'papaparse';
-
-import { DownloadProps } from './DownloadV2.types';
-
-import './DownloadV2.styles.scss';
-
-function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
-	const [isDownloading, setIsDownloading] = useState(false);
-
-	const downloadExcelFile = async (): Promise<void> => {
-		setIsDownloading(true);
-
-		try {
-			const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
-				const updatedTitle = item
-					.split('_')
-					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-					.join(' ');
-				return {
-					title: updatedTitle,
-					dataIndex: item,
-				};
-			});
-			const excelLib = await import('antd-table-saveas-excel');
-			const excel = new excelLib.Excel();
-			excel
-				.addSheet(fileName)
-				.addColumns(headers)
-				.addDataSource(data, {
-					str2Percent: true,
-				})
-				.saveAs(`${fileName}.xlsx`);
-		} finally {
-			setIsDownloading(false);
-		}
-	};
-
-	const downloadCsvFile = (): void => {
-		const csv = unparse(data);
-		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const csvUrl = URL.createObjectURL(csvBlob);
-		const downloadLink = document.createElement('a');
-		downloadLink.href = csvUrl;
-		downloadLink.download = `${fileName}.csv`;
-		downloadLink.click();
-		downloadLink.remove();
-	};
-
-	return (
-		<Popover
-			trigger={['click']}
-			placement="bottomRight"
-			rootClassName="download-logs-popover"
-			arrow={false}
-			content={
-				<div className="download-logs-content">
-					<Typography.Text className="export-heading">Export As</Typography.Text>
-					<Button
-						icon={<Sheet size={14} />}
-						type="text"
-						onClick={downloadExcelFile}
-						className="action-btns"
-						loading={isDownloading}
-					>
-						Excel (.xlsx)
-					</Button>
-					<Button
-						icon={<FileDigit size={14} />}
-						type="text"
-						onClick={downloadCsvFile}
-						className="action-btns"
-					>
-						CSV
-					</Button>
-				</div>
-			}
-		>
-			<Button
-				className="periscope-btn ghost"
-				loading={isLoading}
-				icon={<FileDown size={14} />}
-			/>
-		</Popover>
-	);
-}
-
-Download.defaultProps = {
-	isLoading: undefined,
-};
-
-export default Download;

frontend/src/container/DownloadV2/DownloadV2.types.ts

@@ -1,10 +0,0 @@
-export type DownloadOptions = {
-	isDownloadEnabled: boolean;
-	fileName: string;
-};
-
-export type DownloadProps = {
-	data: Record<string, string>[];
-	isLoading?: boolean;
-	fileName: string;
-};

frontend/src/container/EditRules/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const ButtonContainer = styled.div`
-	&&& {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-
-		margin-top: 2rem;
-	}
-`;

frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts

@@ -1,8 +0,0 @@
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-
-export type ExplorerControlPanelProps = {
-	selectedOptionFormat: string;
-	isShowPageSize: boolean;
-	isLoading: boolean;
-	optionsMenuConfig?: OptionsMenuConfig;
-};

frontend/src/container/ExplorerControlPanel/index.tsx

@@ -1,33 +0,0 @@
-import { Col, Row } from 'antd';
-import OptionsMenu from 'container/OptionsMenu';
-import PageSizeSelect from 'container/PageSizeSelect';
-
-import { ExplorerControlPanelProps } from './ExplorerControlPanel.interfaces';
-import { ContainerStyled } from './styles';
-
-function ExplorerControlPanel({
-	selectedOptionFormat,
-	isLoading,
-	isShowPageSize,
-	optionsMenuConfig,
-}: ExplorerControlPanelProps): JSX.Element {
-	return (
-		<ContainerStyled>
-			<Row justify="end" gutter={30}>
-				{optionsMenuConfig && (
-					<Col>
-						<OptionsMenu
-							selectedOptionFormat={selectedOptionFormat}
-							config={optionsMenuConfig}
-						/>
-					</Col>
-				)}
-				<Col>
-					<PageSizeSelect isLoading={isLoading} isShow={isShowPageSize} />
-				</Col>
-			</Row>
-		</ContainerStyled>
-	);
-}
-
-export default ExplorerControlPanel;

frontend/src/container/ExplorerControlPanel/styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const ContainerStyled = styled.div`
-	margin-bottom: 0.3rem;
-`;

frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx

@@ -1,61 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Form, Input, Select } from 'antd';
-import { LabelFilterStatement } from 'container/CreateAlertChannels/config';
-
-const { Option } = Select;
-
-// LabelFilterForm supports filters or matchers on alert notifications
-// presently un-used but will be introduced to the channel creation at some
-// point
-function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
-	return (
-		<Form.Item name="label_filter" label="Notify When (Optional)">
-			<Input.Group compact>
-				<Select
-					defaultValue="Severity"
-					style={{ width: '15%' }}
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.name = event;
-							return [first];
-						});
-					}}
-				>
-					<Option value="severity">Severity</Option>
-					<Option value="service">Service</Option>
-				</Select>
-				<Select
-					defaultValue="="
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.comparator = event;
-							return [first];
-						});
-					}}
-				>
-					<Option value="=">=</Option>
-					<Option value="!=">!=</Option>
-				</Select>
-				<Input
-					style={{ width: '20%' }}
-					placeholder="enter a text here"
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.value = event.target.value;
-							return [first];
-						});
-					}}
-				/>
-			</Input.Group>
-		</Form.Item>
-	);
-}
-
-export interface LabelFilterProps {
-	setFilter: Dispatch<SetStateAction<Partial<Array<LabelFilterStatement>>>>;
-}
-
-export default LabelFilterForm;

frontend/src/container/FormAlertRules/UserGuide/index.tsx

@@ -1,164 +0,0 @@
-import { Trans, useTranslation } from 'react-i18next';
-import { Col, Row, Typography } from 'antd';
-import TextToolTip from 'components/TextToolTip';
-import { EQueryType } from 'types/common/dashboard';
-
-import {
-	StyledList,
-	StyledListItem,
-	StyledMainContainer,
-	StyledTopic,
-} from './styles';
-
-function UserGuide({ queryType }: UserGuideProps): JSX.Element {
-	// init namespace for translations
-	const { t } = useTranslation('alerts');
-
-	const renderStep1QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForQB = (): JSX.Element => (
-		<>
-			{renderStep1QB()}
-			{renderStep2QB()}
-			{renderStep3QB()}
-		</>
-	);
-	const renderStep1PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForPQL = (): JSX.Element => (
-		<>
-			{renderStep1PQL()}
-			{renderStep2PQL()}
-			{renderStep3PQL()}
-		</>
-	);
-
-	const renderStep1CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>
-					<Trans
-						i18nKey="user_guide_ch_step1a"
-						t={t}
-						components={[
-							<a
-								key={1}
-								target="_blank"
-								href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
-							/>,
-						]}
-					/>
-				</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForCH = (): JSX.Element => (
-		<>
-			{renderStep1CH()}
-			{renderStep2CH()}
-			{renderStep3CH()}
-		</>
-	);
-	return (
-		<StyledMainContainer>
-			<Row>
-				<Col flex="auto">
-					<Typography.Paragraph> {t('user_guide_headline')} </Typography.Paragraph>
-				</Col>
-				<Col flex="none">
-					<TextToolTip
-						text={t('user_tooltip_more_help')}
-						url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
-					/>
-				</Col>
-			</Row>
-			{queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()}
-			{queryType === EQueryType.PROM && renderGuideForPQL()}
-			{queryType === EQueryType.CLICKHOUSE && renderGuideForCH()}
-		</StyledMainContainer>
-	);
-}
-
-interface UserGuideProps {
-	queryType: EQueryType;
-}
-
-export default UserGuide;

frontend/src/container/FormAlertRules/UserGuide/styles.ts

@@ -1,17 +0,0 @@
-import { Card, Typography } from 'antd';
-import styled from 'styled-components';
-
-export const StyledMainContainer = styled(Card)``;
-
-export const StyledTopic = styled(Typography.Paragraph)`
-	font-weight: 600;
-`;
-
-export const StyledList = styled.ul`
-	padding-left: 18px;
-`;
-
-export const StyledListItem = styled.li`
-	font-style: italic;
-	padding-bottom: 0.5rem;
-`;

frontend/src/container/GridCardLayout/GridCard/FullView/GraphManager.tsx

@@ -1,158 +0,0 @@
-import { memo, useCallback, useEffect, useState } from 'react';
-import { Button, Input } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-import { ResizeTable } from 'components/ResizeTable';
-import { useNotifications } from 'hooks/useNotifications';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
-
-import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
-import { ExtendedChartDataset, GraphManagerProps } from './types';
-import {
-	getDefaultTableDataSet,
-	saveLegendEntriesToLocalStorage,
-} from './utils';
-
-import './WidgetFullView.styles.scss';
-
-function GraphManager({
-	data,
-	name,
-	yAxisUnit,
-	onToggleModelHandler,
-	setGraphsVisibilityStates,
-	graphsVisibilityStates = [], // not trimed
-	lineChartRef,
-	parentChartRef,
-	options,
-}: GraphManagerProps): JSX.Element {
-	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(
-		getDefaultTableDataSet(options, data),
-	);
-
-	useEffect(() => {
-		setTableDataSet(getDefaultTableDataSet(options, data));
-	}, [data, options]);
-
-	const { notifications } = useNotifications();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
-
-	const checkBoxOnChangeHandler = useCallback(
-		(e: CheckboxChangeEvent, index: number): void => {
-			const newStates = [...graphsVisibilityStates];
-			newStates[index] = e.target.checked;
-			lineChartRef?.current?.toggleGraph(index, e.target.checked);
-			parentChartRef?.current?.toggleGraph(index, e.target.checked);
-			setGraphsVisibilityStates([...newStates]);
-		},
-		[
-			graphsVisibilityStates,
-			lineChartRef,
-			parentChartRef,
-			setGraphsVisibilityStates,
-		],
-	);
-
-	const labelClickedHandler = useCallback(
-		(labelIndex: number): void => {
-			const newGraphVisibilityStates = Array<boolean>(data.length).fill(false);
-			newGraphVisibilityStates[labelIndex] = true;
-
-			newGraphVisibilityStates.forEach((state, index) => {
-				lineChartRef?.current?.toggleGraph(index, state);
-				parentChartRef?.current?.toggleGraph(index, state);
-			});
-			setGraphsVisibilityStates(newGraphVisibilityStates);
-		},
-		[data.length, lineChartRef, parentChartRef, setGraphsVisibilityStates],
-	);
-
-	const columns = getGraphManagerTableColumns({
-		tableDataSet,
-		checkBoxOnChangeHandler,
-		graphVisibilityState: graphsVisibilityStates,
-		labelClickedHandler,
-		yAxisUnit,
-		isGraphDisabled: isDashboardLocked,
-	});
-
-	const filterHandler = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = event.target.value.toString().toLowerCase();
-			const updatedDataSet = tableDataSet.map((item) => {
-				if (item.label?.toLocaleLowerCase().includes(value)) {
-					return { ...item, show: true };
-				}
-				return { ...item, show: false };
-			});
-			setTableDataSet(updatedDataSet);
-		},
-		[tableDataSet],
-	);
-
-	const saveHandler = useCallback((): void => {
-		saveLegendEntriesToLocalStorage({
-			options,
-			graphVisibilityState: graphsVisibilityStates || [],
-			name,
-		});
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
-		if (onToggleModelHandler) {
-			onToggleModelHandler();
-		}
-	}, [
-		graphsVisibilityStates,
-		name,
-		notifications,
-		onToggleModelHandler,
-		options,
-	]);
-
-	const dataSource = tableDataSet.filter(
-		(item, index) => index !== 0 && item.show,
-	);
-
-	return (
-		<div className="graph-manager-container">
-			<div className="graph-manager-header">
-				<Input onChange={filterHandler} placeholder="Filter Series" />
-				<div className="save-cancel-container">
-					<span className="save-cancel-button">
-						<Button type="default" onClick={onToggleModelHandler}>
-							Cancel
-						</Button>
-					</span>
-					<span className="save-cancel-button">
-						<Button type="primary" onClick={saveHandler}>
-							Save
-						</Button>
-					</span>
-				</div>
-			</div>
-
-			<div className="legends-list-container">
-				<ResizeTable
-					columns={columns}
-					dataSource={dataSource}
-					rowKey="index"
-					pagination={false}
-					style={{
-						maxHeight: 200,
-						overflowX: 'hidden',
-						overflowY: 'auto',
-					}}
-				/>
-			</div>
-		</div>
-	);
-}
-
-GraphManager.defaultProps = {
-	graphVisibilityStateHandler: undefined,
-};
-
-export default memo(GraphManager);

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx

@@ -1,18 +0,0 @@
-import { TableColumnType as ColumnType } from 'antd';
-
-import { DataSetProps } from '../types';
-import Label from './Label';
-
-export const getLabel = (
-	labelClickedHandler: (labelIndex: number) => void,
-	disabled?: boolean,
-): ColumnType<DataSetProps> => ({
-	render: (label: string, record): JSX.Element => (
-		<Label
-			label={label}
-			labelIndex={record.index}
-			labelClickedHandler={labelClickedHandler}
-			disabled={disabled}
-		/>
-	),
-});

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx

@@ -1,85 +0,0 @@
-import { TableColumnType as ColumnType } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-
-import { ColumnsKeyAndDataIndex, ColumnsTitle } from '../contants';
-import { DataSetProps, ExtendedChartDataset } from '../types';
-import { getGraphManagerTableHeaderTitle } from '../utils';
-import CustomCheckBox from './CustomCheckBox';
-import { getLabel } from './GetLabel';
-
-export const getGraphManagerTableColumns = ({
-	tableDataSet,
-	checkBoxOnChangeHandler,
-	graphVisibilityState,
-	labelClickedHandler,
-	yAxisUnit,
-	isGraphDisabled,
-}: GetGraphManagerTableColumnsProps): ColumnType<DataSetProps>[] => [
-	{
-		title: '',
-		width: 50,
-		dataIndex: ColumnsKeyAndDataIndex.Index,
-		key: ColumnsKeyAndDataIndex.Index,
-		render: (_: string, record: DataSetProps): JSX.Element => (
-			<CustomCheckBox
-				data={tableDataSet}
-				index={record.index}
-				checkBoxOnChangeHandler={checkBoxOnChangeHandler}
-				graphVisibilityState={graphVisibilityState}
-				disabled={isGraphDisabled}
-			/>
-		),
-	},
-	{
-		title: ColumnsTitle[ColumnsKeyAndDataIndex.Label],
-		width: 300,
-		dataIndex: ColumnsKeyAndDataIndex.Label,
-		key: ColumnsKeyAndDataIndex.Label,
-		...getLabel(labelClickedHandler, isGraphDisabled),
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Avg],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Avg,
-		key: ColumnsKeyAndDataIndex.Avg,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Sum],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Sum,
-		key: ColumnsKeyAndDataIndex.Sum,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Max],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Max,
-		key: ColumnsKeyAndDataIndex.Max,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Min],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Min,
-		key: ColumnsKeyAndDataIndex.Min,
-	},
-];
-
-interface GetGraphManagerTableColumnsProps {
-	tableDataSet: ExtendedChartDataset[];
-	checkBoxOnChangeHandler: (e: CheckboxChangeEvent, index: number) => void;
-	labelClickedHandler: (labelIndex: number) => void;
-	graphVisibilityState: boolean[];
-	yAxisUnit?: string;
-	isGraphDisabled?: boolean;
-}

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/Label.tsx

@@ -1,34 +0,0 @@
-import { Tooltip } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { LabelContainer } from '../styles';
-import { LabelProps } from '../types';
-import { getAbbreviatedLabel } from '../utils';
-
-function Label({
-	labelClickedHandler,
-	labelIndex,
-	label,
-	disabled = false,
-}: LabelProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	const onClickHandler = (): void => {
-		labelClickedHandler(labelIndex);
-	};
-
-	return (
-		<LabelContainer
-			isDarkMode={isDarkMode}
-			type="button"
-			disabled={disabled}
-			onClick={onClickHandler}
-		>
-			<Tooltip title={label} placement="topLeft">
-				{getAbbreviatedLabel(label)}
-			</Tooltip>
-		</LabelContainer>
-	);
-}
-
-export default Label;

frontend/src/container/GridCardLayout/GridCard/__mock__/mockChartData.ts

@@ -1,15 +0,0 @@
-import { ChartData } from 'chart.js';
-
-export const mockTestData: ChartData = {
-	labels: ['test1', 'test2'],
-	datasets: [
-		{
-			label: 'customer',
-			data: [481.60377358490564, 730.0000000000002],
-		},
-		{
-			label: 'demo-app',
-			data: [4471.4285714285725],
-		},
-	],
-};

frontend/src/container/GridCardLayout/GridCard/__mock__/mockLegendEntryData.ts

@@ -1,12 +0,0 @@
-import { LegendEntryProps } from '../FullView/types';
-
-export const mocklegendEntryResult: LegendEntryProps[] = [
-	{
-		label: 'customer',
-		show: true,
-	},
-	{
-		label: 'demo-app',
-		show: false,
-	},
-];

frontend/src/container/GridValueComponent/config.ts

@@ -1,3 +0,0 @@
-import { GridValueComponentProps } from './types';
-
-export const GridValueConfig: Pick<GridValueComponentProps, 'title'> = {};

frontend/src/container/Home/index.tsx

@@ -1,3 +0,0 @@
-import Home from './Home';
-
-export default Home;

frontend/src/container/HostMetricsLoading/HostMetricsLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-host-metrics {
-	padding: 24px 0;
-	height: 600px;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.loading-host-metrics-content {
-		display: flex;
-		align-items: center;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -1,24 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Typography } from 'antd';
-import { DataSource } from 'types/common/queryBuilder';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './HostMetricsLoading.styles.scss';
-
-export function HostMetricsLoading(): JSX.Element {
-	const { t } = useTranslation('common');
-	return (
-		<div className="loading-host-metrics">
-			<div className="loading-host-metrics-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography>
-					{t('pending_data_placeholder', {
-						dataSource: `host ${DataSource.METRICS}`,
-					})}
-				</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/Integrations/CloudIntegration/ConfigConnectionStatus/ConfigConnectionStatus.styles.scss

@@ -1,42 +0,0 @@
-.config-connection-status-popover {
-	.ant-popover-inner {
-		padding: 0;
-		background-color: var(--l2-background);
-		border-radius: 4px;
-		border: 1px solid var(--l3-background);
-		padding: 8px;
-
-		width: 240px;
-
-		.ant-popover-content {
-			padding: 0;
-		}
-	}
-
-	.config-connection-status-item {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-
-		padding: 4px 8px;
-		border-radius: 4px;
-	}
-
-	.config-connection-status-icon {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.config-connection-status-category-display-name {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 138.462% */
-	}
-}

frontend/src/container/Integrations/CloudIntegration/ConfigConnectionStatus/ConfigConnectionStatus.tsx

@@ -1,30 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { IConfigConnectionStatus } from 'container/Integrations/types';
-import { CheckCircle, TriangleAlert } from 'lucide-react';
-
-import './ConfigConnectionStatus.styles.scss';
-
-export function ConfigConnectionStatus({
-	status,
-}: {
-	status: IConfigConnectionStatus[] | null;
-}): JSX.Element {
-	return (
-		<div className="config-connection-status-container">
-			{status?.map((status) => (
-				<div key={status.category} className="config-connection-status-item">
-					<div className="config-connection-status-icon">
-						{status.last_received_ts_ms && status.last_received_ts_ms > 0 ? (
-							<CheckCircle size={16} color={Color.BG_FOREST_500} />
-						) : (
-							<TriangleAlert size={16} color={Color.BG_AMBER_500} />
-						)}
-					</div>
-					<div className="config-connection-status-category-display-name">
-						{status.category_display_name}
-					</div>
-				</div>
-			))}
-		</div>
-	);
-}

frontend/src/container/Integrations/CloudIntegration/ServiceItem.tsx

@@ -1,39 +0,0 @@
-import cx from 'classnames';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-
-import { Service } from './AmazonWebServices/types';
-
-function ServiceItem({
-	service,
-	onClick,
-	isActive,
-}: {
-	service: Service;
-	onClick: (serviceName: string) => void;
-	isActive?: boolean;
-}): JSX.Element {
-	return (
-		<button
-			className={cx('service-item', { active: isActive })}
-			onClick={(): void => onClick(service.id)}
-			type="button"
-		>
-			<div className="service-item__icon-wrapper">
-				<img
-					src={service.icon}
-					alt={service.title}
-					className="service-item__icon"
-				/>
-			</div>
-			<div className="service-item__title">
-				<LineClampedText text={service.title} />
-			</div>
-		</button>
-	);
-}
-
-ServiceItem.defaultProps = {
-	isActive: false,
-};
-
-export default ServiceItem;

frontend/src/container/Integrations/RequestIntegrationBtn.tsx

@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Button, Input, Space, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { IntegrationType } from 'container/Integrations/types';
-import { useNotifications } from 'hooks/useNotifications';
-import { Check } from 'lucide-react';
-
-import './Integrations.styles.scss';
-
-interface RequestIntegrationBtnProps {
-	type?: IntegrationType;
-	message?: string;
-}
-
-export function RequestIntegrationBtn({
-	type,
-	message,
-}: RequestIntegrationBtnProps): JSX.Element {
-	const [
-		isSubmittingRequestForIntegration,
-		setIsSubmittingRequestForIntegration,
-	] = useState(false);
-
-	const [requestedIntegrationName, setRequestedIntegrationName] = useState('');
-
-	const { notifications } = useNotifications();
-	const { t } = useTranslation(['common']);
-
-	const handleRequestIntegrationSubmit = async (): Promise<void> => {
-		try {
-			setIsSubmittingRequestForIntegration(true);
-			const eventName =
-				type === IntegrationType.AWS_SERVICES
-					? 'AWS service integration requested'
-					: 'Integration requested';
-			const screenName =
-				type === IntegrationType.AWS_SERVICES
-					? 'AWS integration details'
-					: 'Integration list page';
-
-			const response = await logEvent(eventName, {
-				screen: screenName,
-				integration: requestedIntegrationName,
-			});
-
-			if (response.statusCode === 200) {
-				notifications.success({
-					message: 'Integration Request Submitted',
-				});
-
-				setIsSubmittingRequestForIntegration(false);
-			} else {
-				notifications.error({
-					message:
-						response.error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-
-				setIsSubmittingRequestForIntegration(false);
-			}
-		} catch (error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-
-			setIsSubmittingRequestForIntegration(false);
-		}
-	};
-
-	return (
-		<div className="request-entity-container">
-			<Typography.Text>{message}</Typography.Text>
-
-			<div className="form-section">
-				<Space.Compact style={{ width: '100%' }}>
-					<Input
-						placeholder="Enter integration name..."
-						style={{ width: 300, marginBottom: 0 }}
-						value={requestedIntegrationName}
-						onChange={(e): void => setRequestedIntegrationName(e.target.value)}
-					/>
-					<Button
-						className="periscope-btn primary"
-						icon={
-							isSubmittingRequestForIntegration ? (
-								<LoadingOutlined />
-							) : (
-								<Check size={12} />
-							)
-						}
-						type="primary"
-						onClick={handleRequestIntegrationSubmit}
-						disabled={
-							isSubmittingRequestForIntegration ||
-							!requestedIntegrationName ||
-							requestedIntegrationName?.trim().length === 0
-						}
-					>
-						Submit
-					</Button>
-				</Space.Compact>
-			</div>
-		</div>
-	);
-}

frontend/src/container/Integrations/index.ts

@@ -1,3 +0,0 @@
-import Integrations from './Integrations';
-
-export default Integrations;

frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx

@@ -1,17 +0,0 @@
-import { Typography } from 'antd';
-import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
-import getFormattedDate from 'lib/getFormatedDate';
-
-import { Data } from '../DashboardsList';
-
-function Created(createdBy: Data['createdBy']): JSX.Element {
-	const time = new Date(createdBy);
-
-	const date = getFormattedDate(time);
-
-	const timeString = `${date} ${convertDateToAmAndPm(time)}`;
-
-	return <Typography>{`${timeString}`}</Typography>;
-}
-
-export default Created;

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,29 +0,0 @@
-import { LockFilled } from '@ant-design/icons';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { openInNewTab } from 'utils/navigation';
-
-import { Data } from '../DashboardsList';
-import { TableLinkText } from './styles';
-
-function Name(name: Data['name'], data: Data): JSX.Element {
-	const { id: DashboardId, isLocked } = data;
-
-	const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${DashboardId}`;
-
-	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
-		if (event.metaKey || event.ctrlKey) {
-			openInNewTab(getLink());
-		} else {
-			history.push(getLink());
-		}
-	};
-
-	return (
-		<TableLinkText onClick={onClickHandler}>
-			{isLocked && <LockFilled />} {name}
-		</TableLinkText>
-	);
-}
-
-export default Name;

frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx

@@ -1,15 +0,0 @@
-import { Tag } from 'antd';
-
-import { Data } from '../DashboardsList';
-
-function Tags(data: Data['tags']): JSX.Element {
-	return (
-		<>
-			{data.map((e) => (
-				<Tag key={e}>{e}</Tag>
-			))}
-		</>
-	);
-}
-
-export default Tags;

frontend/src/container/ListOfDashboard/dashboardSearchAndFilter.ts

@@ -1,24 +0,0 @@
-import { Dashboard } from 'types/api/dashboard/getAll';
-
-interface IDashboardSearchData {
-	title: string;
-	description: string | undefined;
-	tags: string[];
-	id: string;
-}
-
-export const generateSearchData = (
-	dashboards: Dashboard[],
-): IDashboardSearchData[] => {
-	const dashboardSearchData: IDashboardSearchData[] = [];
-
-	dashboards.forEach((dashboard) => {
-		dashboardSearchData.push({
-			id: dashboard.id,
-			title: dashboard.data.title,
-			description: dashboard.data.description,
-			tags: dashboard.data.tags || [],
-		});
-	});
-	return dashboardSearchData;
-};

frontend/src/container/ListOfDashboard/styles.ts

@@ -1,25 +0,0 @@
-import { Button, Row } from 'antd';
-import styled from 'styled-components';
-
-export const NewDashboardButton = styled(Button)`
-	&&& {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		margin-left: 1rem;
-	}
-`;
-
-export const TableContainer = styled(Row)`
-	&&& {
-		margin-top: 1rem;
-	}
-`;
-
-export const ButtonContainer = styled.div`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;

frontend/src/container/LiveLogs/BackButton/index.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { constructCompositeQuery } from '../constants';
-
-function BackButton(): JSX.Element {
-	const history = useHistory();
-
-	const { updateAllQueriesOperators } = useQueryBuilder();
-
-	const compositeQuery = useGetCompositeQueryParam();
-
-	const handleBack = useCallback(() => {
-		if (!compositeQuery) {
-			return;
-		}
-
-		const nextCompositeQuery = constructCompositeQuery({
-			query: compositeQuery,
-			initialQueryData: initialQueryBuilderFormValuesMap.logs,
-			customQueryData: { disabled: false },
-		});
-
-		const updatedQuery = updateAllQueriesOperators(
-			nextCompositeQuery,
-			PANEL_TYPES.LIST,
-			DataSource.LOGS,
-		);
-
-		const JSONCompositeQuery = encodeURIComponent(JSON.stringify(updatedQuery));
-
-		const path = `${ROUTES.LOGS_EXPLORER}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`;
-
-		history.push(path);
-	}, [history, compositeQuery, updateAllQueriesOperators]);
-
-	return (
-		<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>
-			Exit live view
-		</Button>
-	);
-}
-
-export default BackButton;

frontend/src/container/LiveLogs/FiltersInput/index.tsx

@@ -1,80 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { Col } from 'antd';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useEventSource } from 'providers/EventSource';
-import {
-	IBuilderQuery,
-	Query,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-import { getQueryWithoutFilterId } from '../utils';
-import {
-	ContainerStyled,
-	FilterSearchInputStyled,
-	SearchButtonStyled,
-} from './styles';
-
-function FiltersInput(): JSX.Element {
-	const {
-		stagedQuery,
-		handleSetQueryData,
-		redirectWithQueryBuilderData,
-		currentQuery,
-	} = useQueryBuilder();
-
-	const { initialLoading, handleSetInitialLoading } = useEventSource();
-
-	const handleChange = useCallback(
-		(filters: TagFilter) => {
-			const listQueryData = stagedQuery?.builder.queryData[0];
-
-			if (!listQueryData) {
-				return;
-			}
-
-			const queryData: IBuilderQuery = {
-				...listQueryData,
-				filters,
-			};
-
-			handleSetQueryData(0, queryData);
-		},
-		[stagedQuery, handleSetQueryData],
-	);
-
-	const query = useMemo(() => {
-		if (stagedQuery && stagedQuery.builder.queryData.length > 0) {
-			return stagedQuery?.builder.queryData[0];
-		}
-
-		return initialQueriesMap.logs.builder.queryData[0];
-	}, [stagedQuery]);
-
-	const handleSearch = useCallback(() => {
-		if (initialLoading) {
-			handleSetInitialLoading(false);
-		}
-
-		const preparedQuery: Query = getQueryWithoutFilterId(currentQuery);
-
-		redirectWithQueryBuilderData(preparedQuery);
-	}, [
-		initialLoading,
-		currentQuery,
-		redirectWithQueryBuilderData,
-		handleSetInitialLoading,
-	]);
-
-	return (
-		<ContainerStyled>
-			<Col flex={1}>
-				<FilterSearchInputStyled query={query} onChange={handleChange} />
-			</Col>
-			<SearchButtonStyled onSearch={handleSearch} />
-		</ContainerStyled>
-	);
-}
-
-export default FiltersInput;

frontend/src/container/LiveLogs/FiltersInput/styles.ts

@@ -1,24 +0,0 @@
-import { Input, Row } from 'antd';
-import { themeColors } from 'constants/theme';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import styled from 'styled-components';
-
-export const FilterSearchInputStyled = styled(QueryBuilderSearch)`
-	z-index: 1;
-	.ant-select-selector {
-		width: 100%;
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-`;
-
-export const ContainerStyled = styled(Row)`
-	color: ${themeColors.white};
-`;
-
-export const SearchButtonStyled = styled(Input.Search)`
-	width: 2rem;
-	.ant-input {
-		display: none;
-	}
-`;

frontend/src/container/LiveLogs/ListViewPanel/index.tsx

@@ -1,77 +0,0 @@
-import { useCallback } from 'react';
-import { Button, Popover, Select } from 'antd';
-import Spinner from 'components/Spinner';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import {
-	defaultSelectStyle,
-	logsOptions,
-	viewModeOptionList,
-} from 'pages/Logs/config';
-import PopoverContent from 'pages/Logs/PopoverContent';
-import { useEventSource } from 'providers/EventSource';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { SpinnerWrapper } from './styles';
-
-function ListViewPanel(): JSX.Element {
-	const { config } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
-		aggregateOperator: StringOperators.NOOP,
-	});
-
-	const { isConnectionLoading } = useEventSource();
-
-	const isFormatButtonVisible = logsOptions.includes(config.format?.value);
-
-	const renderPopoverContent = useCallback(() => {
-		if (!config.maxLines) {
-			return null;
-		}
-		const linedPerRow = config.maxLines.value as number;
-		const handleLinesPerRowChange = config.maxLines.onChange as (
-			value: unknown,
-		) => void;
-
-		return (
-			<PopoverContent
-				linesPerRow={linedPerRow}
-				handleLinesPerRowChange={handleLinesPerRowChange}
-			/>
-		);
-	}, [config]);
-
-	return (
-		<div className="live-logs-settings-panel">
-			<Select
-				getPopupContainer={popupContainer}
-				style={defaultSelectStyle}
-				value={config.format?.value}
-				onChange={config.format?.onChange}
-			>
-				{viewModeOptionList.map((option) => (
-					<Select.Option key={option.value}>{option.label}</Select.Option>
-				))}
-			</Select>
-
-			{isFormatButtonVisible && (
-				<Popover
-					getPopupContainer={popupContainer}
-					placement="right"
-					content={renderPopoverContent}
-				>
-					<Button>Format</Button>
-				</Popover>
-			)}
-			{isConnectionLoading && (
-				<SpinnerWrapper>
-					<Spinner style={{ height: 'auto' }} />
-				</SpinnerWrapper>
-			)}
-		</div>
-	);
-}
-
-export default ListViewPanel;

frontend/src/container/LiveLogs/ListViewPanel/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
-	display: flex;
-	align-items: center;
-	gap: 1.5rem;
-`;
-
-export const SpinnerWrapper = styled.div`
-	margin-left: auto;
-`;

frontend/src/container/LiveLogs/LiveLogsContainer/styles.ts

@@ -1,20 +0,0 @@
-import { Row } from 'antd';
-import { themeColors } from 'constants/theme';
-import styled from 'styled-components';
-
-import LiveLogsListChart from '../LiveLogsListChart';
-
-export const LiveLogsChart = styled(LiveLogsListChart)`
-	margin-bottom: 0.5rem;
-`;
-
-export const ContentWrapper = styled(Row)`
-	color: rgba(${(themeColors.white, 0.85)});
-`;
-
-export const Wrapper = styled.div`
-	padding-bottom: 4rem;
-	padding-top: 1rem;
-	padding-left: 1rem;
-	padding-right: 1rem;
-`;

frontend/src/container/LiveLogs/utils.ts

@@ -1,74 +0,0 @@
-import { OPERATORS } from 'constants/queryBuilder';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	Query,
-	TagFilter,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { v4 as uuid } from 'uuid';
-
-const getIdFilter = (filtersItems: TagFilterItem[]): TagFilterItem | null =>
-	filtersItems.find((item) => item.key?.key === 'id') || null;
-
-const getFilter = (
-	filters: TagFilter,
-	tagFilter: BaseAutocompleteData,
-	value: string,
-): TagFilter => {
-	let newItems = filters.items;
-
-	const isExistIdFilter = getIdFilter(newItems);
-
-	if (isExistIdFilter) {
-		newItems = newItems.map((item) =>
-			item.key?.key === 'id' ? { ...item, value } : item,
-		);
-	} else {
-		newItems = [
-			...newItems,
-			{ value, key: tagFilter, op: OPERATORS['>'], id: uuid() },
-		];
-	}
-
-	return { items: newItems, op: filters.op };
-};
-
-export const prepareQueryByFilter = (
-	query: Query,
-	tagFilter: BaseAutocompleteData,
-	value: string | null,
-): Query => {
-	const preparedQuery: Query = {
-		...query,
-		builder: {
-			...query.builder,
-			queryData: query.builder.queryData?.map((item) => ({
-				...item,
-				filters: value
-					? getFilter(item.filters || { items: [], op: 'AND' }, tagFilter, value)
-					: item.filters,
-			})),
-		},
-	};
-
-	return preparedQuery;
-};
-
-export const getQueryWithoutFilterId = (query: Query): Query => {
-	const preparedQuery: Query = {
-		...query,
-		builder: {
-			...query.builder,
-			queryData: query.builder.queryData?.map((item) => ({
-				...item,
-				filters: {
-					...item.filters,
-					items: item.filters?.items?.filter((item) => item.key?.key !== 'id') || [],
-					op: item.filters?.op || 'AND',
-				},
-			})),
-		},
-	};
-
-	return preparedQuery;
-};

frontend/src/container/LiveLogsTopNav/index.tsx

@@ -1,71 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
-import { Space } from 'antd';
-import BackButton from 'container/LiveLogs/BackButton';
-import { getQueryWithoutFilterId } from 'container/LiveLogs/utils';
-import LocalTopNav from 'container/LocalTopNav';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useEventSource } from 'providers/EventSource';
-
-import { LiveButtonStyled } from './styles';
-
-function LiveLogsTopNav(): JSX.Element {
-	const {
-		isConnectionOpen,
-		isConnectionLoading,
-		initialLoading,
-		handleCloseConnection,
-		handleSetInitialLoading,
-	} = useEventSource();
-
-	const { redirectWithQueryBuilderData, currentQuery } = useQueryBuilder();
-
-	const isPlaying = isConnectionOpen || isConnectionLoading || initialLoading;
-
-	const onLiveButtonClick = useCallback(() => {
-		if (initialLoading) {
-			handleSetInitialLoading(false);
-		}
-
-		if ((!isConnectionOpen && isConnectionLoading) || isConnectionOpen) {
-			handleCloseConnection();
-		} else {
-			const preparedQuery = getQueryWithoutFilterId(currentQuery);
-			redirectWithQueryBuilderData(preparedQuery);
-		}
-	}, [
-		initialLoading,
-		isConnectionOpen,
-		isConnectionLoading,
-		currentQuery,
-		handleSetInitialLoading,
-		handleCloseConnection,
-		redirectWithQueryBuilderData,
-	]);
-
-	const liveButton = useMemo(
-		() => (
-			<Space size={16}>
-				<LiveButtonStyled
-					icon={isPlaying ? <PauseCircleFilled /> : <PlayCircleFilled />}
-					danger={isPlaying}
-					onClick={onLiveButtonClick}
-					type="primary"
-				>
-					{isPlaying ? 'Pause' : 'Resume'}
-				</LiveButtonStyled>
-				<BackButton />
-			</Space>
-		),
-		[isPlaying, onLiveButtonClick],
-	);
-
-	return (
-		<LocalTopNav
-			actions={liveButton}
-			renderPermissions={{ isDateTimeEnabled: false }}
-		/>
-	);
-}
-
-export default memo(LiveLogsTopNav);

frontend/src/container/LiveLogsTopNav/styles.ts

@@ -1,19 +0,0 @@
-import { Button, ButtonProps } from 'antd';
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
-
-export const LiveButtonStyled = styled(Button)<ButtonProps>`
-	background-color: #1eb475;
-
-	${({ danger }): FlattenSimpleInterpolation =>
-		!danger
-			? css`
-					&:hover {
-						background-color: #1eb475 !important;
-					}
-
-					&:active {
-						background-color: #1eb475 !important;
-					}
-				`
-			: css``}
-`;

frontend/src/container/LocalTopNav/index.tsx

@@ -1,50 +0,0 @@
-import { useLocation } from 'react-use';
-import { Col, Row, Space, Typography } from 'antd';
-import ROUTES from 'constants/routes';
-import NewExplorerCTA from 'container/NewExplorerCTA';
-import { FileText } from 'lucide-react';
-
-import DateTimeSelector from '../TopNav/DateTimeSelectionV2';
-import { Container } from './styles';
-import { LocalTopNavProps } from './types';
-
-function LocalTopNav({
-	actions,
-	renderPermissions,
-}: LocalTopNavProps): JSX.Element | null {
-	const { pathname } = useLocation();
-
-	const isLiveLogsPage = pathname === ROUTES.LIVE_LOGS;
-
-	return (
-		<Container>
-			{isLiveLogsPage && (
-				<Col span={16}>
-					<Space>
-						<FileText color="#fff" size={16} />
-
-						<Typography.Title level={4} style={{ marginTop: 0, marginBottom: 0 }}>
-							Live Logs
-						</Typography.Title>
-					</Space>
-				</Col>
-			)}
-
-			<Col span={isLiveLogsPage ? 8 : 24}>
-				<Row justify="end">
-					<Space align="start" size={30} direction="horizontal">
-						<NewExplorerCTA />
-						{actions}
-						{renderPermissions?.isDateTimeEnabled && (
-							<div>
-								<DateTimeSelector showAutoRefresh={false} />
-							</div>
-						)}
-					</Space>
-				</Row>
-			</Col>
-		</Container>
-	);
-}
-
-export default LocalTopNav;

frontend/src/container/LocalTopNav/styles.ts

@@ -1,9 +0,0 @@
-import { Row } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled(Row)`
-	&&& {
-		margin-top: 1rem;
-		min-height: 8vh;
-	}
-`;

frontend/src/container/LocalTopNav/types.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export type LocalTopNavProps = {
-	actions?: ReactNode;
-	renderPermissions?: { isDateTimeEnabled: boolean };
-};

frontend/src/container/LogDetailedView/LogContext.styles.scss

@@ -1,3 +0,0 @@
-.log-context-container {
-	border: 1px solid var(--l1-border);
-}

frontend/src/container/LogDetailedView/LogContext.tsx

@@ -1,55 +0,0 @@
-import RawLogView from 'components/Logs/RawLogView';
-import LogsContextList from 'container/LogsContextList';
-import { FontSize } from 'container/OptionsMenu/types';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import './LogContext.styles.scss';
-
-interface LogContextProps {
-	log: ILog;
-	contextQuery: Query | undefined;
-	filters: TagFilter | null;
-	isEdit: boolean;
-}
-
-function LogContext({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-}: LogContextProps): JSX.Element {
-	if (!contextQuery) {
-		return <></>;
-	}
-
-	return (
-		<div className="log-context-container">
-			<LogsContextList
-				order={ORDERBY_FILTERS.ASC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-			<RawLogView
-				isActiveLog
-				isReadOnly
-				isTextOverflowEllipsisDisabled={false}
-				data={log}
-				linesPerRow={1}
-				fontSize={FontSize.SMALL}
-			/>
-			<LogsContextList
-				order={ORDERBY_FILTERS.DESC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-		</div>
-	);
-}
-
-export default LogContext;

frontend/src/container/LogsContextList/LogsContextList.styles.scss

@@ -1,32 +0,0 @@
-.context-logs-list {
-	position: relative;
-
-	.show-more-button {
-		position: absolute;
-		opacity: 1;
-		z-index: 1;
-
-		cursor: pointer;
-
-		&.up {
-			top: -1px;
-			left: -1px;
-		}
-
-		&.down {
-			bottom: -1px;
-			left: -1px;
-		}
-
-		&.disabled {
-			cursor: not-allowed;
-		}
-	}
-
-	.virtuoso-list {
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-			height: 0.3rem;
-		}
-	}
-}

frontend/src/container/LogsContextList/index.tsx

@@ -1,227 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import RawLogView from 'components/Logs/RawLogView';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import Spinner from 'components/Spinner';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { FontSize } from 'container/OptionsMenu/types';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
-import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { SuccessResponse } from 'types/api';
-import { ILog } from 'types/api/logs/log';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	getOrderByTimestamp,
-	INITIAL_PAGE_SIZE,
-	LOGS_MORE_PAGE_SIZE,
-} from './configs';
-import ShowButton from './ShowButton';
-import { EmptyText, ListContainer } from './styles';
-import { getRequestData } from './utils';
-
-import './LogsContextList.styles.scss';
-
-interface LogsContextListProps {
-	className?: string;
-	isEdit: boolean;
-	query: Query;
-	log: ILog;
-	order: string;
-	filters: TagFilter | null;
-}
-
-function LogsContextList({
-	className,
-	isEdit,
-	query,
-	log,
-	order,
-	filters,
-}: LogsContextListProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [logs, setLogs] = useState<ILog[]>([]);
-	const [page, setPage] = useState<number>(1);
-
-	const firstLog = useMemo(() => logs[0], [logs]);
-	const lastLog = useMemo(() => logs[logs.length - 1], [logs]);
-	const orderByTimestamp = useMemo(() => getOrderByTimestamp(order), [order]);
-
-	const logsMorePageSize = useMemo(
-		() => (page - 1) * LOGS_MORE_PAGE_SIZE,
-		[page],
-	);
-	const pageSize = useMemo(
-		() => (page <= 1 ? INITIAL_PAGE_SIZE : logsMorePageSize + INITIAL_PAGE_SIZE),
-		[page, logsMorePageSize],
-	);
-	const isDisabledFetch = useMemo(
-		() => logs.length < pageSize,
-		[logs.length, pageSize],
-	);
-
-	const currentStagedQueryData = useMemo(() => {
-		if (!query || query.builder.queryData.length !== 1) {
-			return null;
-		}
-
-		return query.builder.queryData[0];
-	}, [query]);
-
-	const initialLogsRequest = useMemo(
-		() =>
-			getRequestData({
-				stagedQueryData: currentStagedQueryData,
-				query,
-				log,
-				orderByTimestamp,
-				page,
-			}),
-		[currentStagedQueryData, page, log, query, orderByTimestamp],
-	);
-
-	const [requestData, setRequestData] = useState<Query | null>(
-		initialLogsRequest,
-	);
-
-	const handleSuccess = useCallback(
-		(data: SuccessResponse<MetricRangePayloadProps, unknown>) => {
-			const currentData = data?.payload?.data?.newResult?.data?.result || [];
-
-			if (currentData.length > 0 && currentData[0].list) {
-				const currentLogs: ILog[] = currentData[0].list.map((item) => ({
-					...item.data,
-					timestamp: item.timestamp,
-				}));
-
-				if (order === ORDERBY_FILTERS.ASC) {
-					const reversedCurrentLogs = currentLogs.reverse();
-					setLogs((prevLogs) => [...reversedCurrentLogs, ...prevLogs]);
-				} else {
-					setLogs((prevLogs) => [...prevLogs, ...currentLogs]);
-				}
-			}
-		},
-		[order],
-	);
-
-	const { isError, isFetching } = useGetExplorerQueryRange(
-		requestData,
-		PANEL_TYPES.LIST,
-		DEFAULT_ENTITY_VERSION,
-		{
-			keepPreviousData: true,
-			enabled: !!requestData,
-			onSuccess: handleSuccess,
-		},
-	);
-
-	const handleShowNextLines = useCallback(() => {
-		if (isDisabledFetch) {
-			return;
-		}
-
-		const log = order === ORDERBY_FILTERS.ASC ? firstLog : lastLog;
-
-		const newRequestData = getRequestData({
-			stagedQueryData: currentStagedQueryData,
-			query,
-			log,
-			orderByTimestamp,
-			page: page + 1,
-			pageSize: LOGS_MORE_PAGE_SIZE,
-		});
-
-		setPage((prevPage) => prevPage + 1);
-		setRequestData(newRequestData);
-	}, [
-		query,
-		firstLog,
-		lastLog,
-		page,
-		order,
-		currentStagedQueryData,
-		isDisabledFetch,
-		orderByTimestamp,
-	]);
-
-	useEffect(() => {
-		if (!isEdit) {
-			return;
-		}
-
-		const newRequestData = getRequestData({
-			stagedQueryData: currentStagedQueryData,
-			query,
-			log,
-			orderByTimestamp,
-			page: 1,
-		});
-
-		setPage(1);
-		setLogs([]);
-		setRequestData(newRequestData);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filters]);
-
-	const getItemContent = useCallback(
-		(_: number, log: ILog): JSX.Element => (
-			<RawLogView
-				isReadOnly
-				isTextOverflowEllipsisDisabled
-				key={log.id}
-				data={log}
-				linesPerRow={1}
-				fontSize={FontSize.SMALL}
-			/>
-		),
-		[],
-	);
-
-	return (
-		<div className={`context-logs-list ${className}`}>
-			{order === ORDERBY_FILTERS.ASC && (
-				<ShowButton
-					isLoading={isFetching}
-					isDisabled={isDisabledFetch}
-					order={order}
-					onClick={handleShowNextLines}
-				/>
-			)}
-
-			<ListContainer $isDarkMode={isDarkMode}>
-				{((!logs.length && !isFetching) || isError) && (
-					<EmptyText>No Data</EmptyText>
-				)}
-				{isFetching && <Spinner size="large" height="10rem" />}
-				<OverlayScrollbar isVirtuoso>
-					<Virtuoso
-						className="virtuoso-list"
-						initialTopMostItemIndex={0}
-						data={logs}
-						itemContent={getItemContent}
-						followOutput={order === ORDERBY_FILTERS.DESC}
-					/>
-				</OverlayScrollbar>
-			</ListContainer>
-
-			{order === ORDERBY_FILTERS.DESC && (
-				<ShowButton
-					isLoading={isFetching}
-					isDisabled={isDisabledFetch}
-					order={order}
-					onClick={handleShowNextLines}
-				/>
-			)}
-		</div>
-	);
-}
-
-LogsContextList.defaultProps = {
-	className: '',
-};
-
-export default memo(LogsContextList);

frontend/src/container/LogsContextList/styles.ts

@@ -1,20 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Typography } from 'antd';
-import styled from 'styled-components';
-
-export const ListContainer = styled.div<{ $isDarkMode: boolean }>`
-	position: relative;
-	height: 21rem;
-	overflow: hidden;
-
-	background-color: ${({ $isDarkMode }): string =>
-		$isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100};
-`;
-
-export const EmptyText = styled(Typography)`
-	padding: 0 1.5rem;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-`;

frontend/src/container/LogsExplorerContext/index.tsx

@@ -1,118 +0,0 @@
-import { memo, useCallback, useState } from 'react';
-import { EditFilled } from '@ant-design/icons';
-import { Modal, Typography } from 'antd';
-import RawLogView from 'components/Logs/RawLogView';
-import LogsContextList from 'container/LogsContextList';
-import { FontSize } from 'container/OptionsMenu/types';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { EditButton, LogContainer, TitleWrapper } from './styles';
-import { LogsExplorerContextProps } from './types';
-import useInitialQuery from './useInitialQuery';
-
-function LogsExplorerContext({
-	log,
-	onClose,
-}: LogsExplorerContextProps): JSX.Element | null {
-	const initialContextQuery = useInitialQuery(log);
-
-	const [contextQuery, setContextQuery] = useState<Query>(initialContextQuery);
-	const [filters, setFilters] = useState<TagFilter | null>(null);
-	const [isEdit, setIsEdit] = useState<boolean>(false);
-
-	const isDarkMode = useIsDarkMode();
-
-	const handleClickEditButton = useCallback(
-		() => setIsEdit((prevValue) => !prevValue),
-		[],
-	);
-
-	const handleSearch = useCallback(
-		(tagFilters: TagFilter): void => {
-			const tagFiltersLength = tagFilters.items.length;
-
-			if (
-				(!tagFiltersLength && (!filters || !filters.items.length)) ||
-				tagFiltersLength === filters?.items.length
-			) {
-				return;
-			}
-
-			const nextQuery: Query = {
-				...contextQuery,
-				builder: {
-					...contextQuery.builder,
-					queryData: contextQuery.builder.queryData.map((item) => ({
-						...item,
-						filters: tagFilters,
-					})),
-				},
-			};
-
-			setFilters(tagFilters);
-			setContextQuery(nextQuery);
-		},
-		[contextQuery, filters],
-	);
-
-	return (
-		<Modal
-			centered
-			destroyOnClose
-			open
-			width={816}
-			onCancel={onClose}
-			onOk={onClose}
-			footer={null}
-			title={
-				<TitleWrapper block>
-					<Typography>Logs Context</Typography>
-
-					<EditButton
-						$isDarkMode={isDarkMode}
-						size="small"
-						type="text"
-						icon={<EditFilled />}
-						onClick={handleClickEditButton}
-					/>
-				</TitleWrapper>
-			}
-		>
-			{isEdit && (
-				<QueryBuilderSearch
-					query={contextQuery?.builder.queryData[0]}
-					onChange={handleSearch}
-				/>
-			)}
-			<LogsContextList
-				order={ORDERBY_FILTERS.ASC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-			<LogContainer>
-				<RawLogView
-					isActiveLog
-					isReadOnly
-					isTextOverflowEllipsisDisabled
-					data={log}
-					linesPerRow={1}
-					fontSize={FontSize.SMALL}
-				/>
-			</LogContainer>
-			<LogsContextList
-				order={ORDERBY_FILTERS.DESC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-		</Modal>
-	);
-}
-
-export default memo(LogsExplorerContext);

frontend/src/container/LogsExplorerContext/styles.ts

@@ -1,34 +0,0 @@
-import { Button, Space } from 'antd';
-import { themeColors } from 'constants/theme';
-import styled from 'styled-components';
-import getAlphaColor from 'utils/getAlphaColor';
-
-export const TitleWrapper = styled(Space.Compact)`
-	justify-content: space-between;
-	align-items: center;
-`;
-
-export const EditButton = styled(Button)<{ $isDarkMode: boolean }>`
-	margin-right: 0.938rem;
-	width: 1.375rem !important;
-	height: 1.375rem;
-	position: absolute;
-
-	top: 1rem;
-	right: 1.563rem;
-	padding: 0;
-
-	border-radius: 0.125rem;
-
-	border-start-start-radius: 0.125rem !important;
-	border-end-start-radius: 0.125rem !important;
-
-	color: ${({ $isDarkMode }): string =>
-		$isDarkMode
-			? getAlphaColor(themeColors.white)[45]
-			: getAlphaColor(themeColors.black)[45]};
-`;
-
-export const LogContainer = styled.div`
-	overflow-x: auto;
-`;

frontend/src/container/LogsExplorerContext/types.ts

@@ -1,7 +0,0 @@
-import { MouseEventHandler } from 'react';
-import { ILog } from 'types/api/logs/log';
-
-export interface LogsExplorerContextProps {
-	log: ILog;
-	onClose: MouseEventHandler<HTMLElement>;
-}

frontend/src/container/LogsExplorerList/InfinityTableView/LogsCustomTable.tsx

@@ -1,29 +0,0 @@
-import ReactDragListView from 'react-drag-listview';
-import { TableComponents } from 'react-virtuoso';
-import Spinner from 'components/Spinner';
-import { dragColumnParams } from 'hooks/useDragColumns/configs';
-
-import { TableStyled } from './styles';
-
-interface LogsCustomTableProps {
-	isLoading?: boolean;
-	handleDragEnd: (fromIndex: number, toIndex: number) => void;
-}
-
-export const LogsCustomTable = ({
-	isLoading,
-	handleDragEnd,
-}: LogsCustomTableProps): TableComponents['Table'] =>
-	function CustomTable({ style, children }): JSX.Element {
-		if (isLoading) {
-			return <Spinner height="35px" tip="Getting Logs" />;
-		}
-		return (
-			<ReactDragListView.DragColumn
-				{...dragColumnParams}
-				onDragEnd={handleDragEnd}
-			>
-				<TableStyled style={style}>{children}</TableStyled>
-			</ReactDragListView.DragColumn>
-		);
-	};

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss

@@ -1,26 +0,0 @@
-.logs-table-row {
-	cursor: pointer;
-	position: relative;
-}
-
-.table-row-backdrop {
-	&.INFO {
-		background-color: var(--primary-background) 10;
-	}
-	&.WARNING,
-	&.WARN {
-		background-color: var(--warning-background) 10;
-	}
-	&.ERROR {
-		background-color: var(--danger-background) 10;
-	}
-	&.TRACE {
-		background-color: var(--success-background) 10;
-	}
-	&.DEBUG {
-		background-color: var(--info-background) 10;
-	}
-	&.FATAL {
-		background-color: var(--danger-background) 10;
-	}
-}

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -1,141 +0,0 @@
-import {
-	cloneElement,
-	MouseEventHandler,
-	ReactElement,
-	ReactNode,
-	useCallback,
-	useMemo,
-} from 'react';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { FontSize } from 'container/OptionsMenu/types';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ILog } from 'types/api/logs/log';
-
-import { TableCellStyled } from './styles';
-
-import './TableRow.styles.scss';
-
-interface TableRowProps {
-	tableColumns: ColumnsType<Record<string, unknown>>;
-	index: number;
-	log: Record<string, unknown>;
-	onShowLogDetails?: (
-		log: ILog,
-		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
-	) => void;
-	logs: ILog[];
-	hasActions: boolean;
-	fontSize: FontSize;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
-}
-
-export default function TableRow({
-	tableColumns,
-	index,
-	log,
-	onShowLogDetails,
-	logs,
-	hasActions,
-	fontSize,
-	isActiveLog,
-	onClearActiveLog,
-}: TableRowProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	const currentLog = useMemo(
-		() => logs.find(({ id }) => id === log.id),
-		[logs, log.id],
-	);
-
-	const { onLogCopy, isLogsExplorerPage } = useCopyLogLink(currentLog?.id);
-
-	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
-		(event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			if (!currentLog) {
-				return;
-			}
-
-			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
-		},
-		[currentLog, onShowLogDetails],
-	);
-
-	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
-			return;
-		}
-
-		// If this log is already active, close the detail drawer
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		// Otherwise, open the detail drawer for this log
-		if (onShowLogDetails) {
-			onShowLogDetails(currentLog);
-		}
-	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
-
-	const hasSingleColumn =
-		tableColumns.filter((column) => column.key !== 'state-indicator').length ===
-		1;
-
-	return (
-		<>
-			{tableColumns.map((column) => {
-				if (!column.key) {
-					return null;
-				}
-
-				if (!column.render) {
-					return <td key={column.key}>Empty</td>;
-				}
-
-				const element: ColumnTypeRender<Record<string, unknown>> = column.render(
-					log[column.key as keyof Record<string, unknown>],
-					log,
-					index,
-				);
-
-				const elementWithChildren = element as Exclude<
-					ColumnTypeRender<Record<string, unknown>>,
-					ReactNode
-				>;
-
-				const children = elementWithChildren.children as ReactElement;
-				const props = elementWithChildren.props as Record<string, unknown>;
-
-				return (
-					<TableCellStyled
-						$isDragColumn={false}
-						$isLogIndicator={column.key === 'state-indicator'}
-						$hasSingleColumn={hasSingleColumn}
-						$isDarkMode={isDarkMode}
-						key={column.key}
-						fontSize={fontSize}
-						columnKey={column.key as string}
-						onClick={handleShowLogDetails}
-						className={column.key as string}
-					>
-						{cloneElement(children, props)}
-					</TableCellStyled>
-				);
-			})}
-			{hasActions && isLogsExplorerPage && (
-				<LogLinesActionButtons
-					handleShowContext={handleShowContext}
-					onLogCopy={onLogCopy}
-					customClassName="table-view-log-actions"
-				/>
-			)}
-		</>
-	);
-}

frontend/src/container/LogsExplorerList/InfinityTableView/config.ts

@@ -1,14 +0,0 @@
-import { CSSProperties } from 'react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-export const infinityDefaultStyles: CSSProperties = {
-	width: '100%',
-	overflowX: 'scroll',
-};
-
-export function getInfinityDefaultStyles(_fontSize: FontSize): CSSProperties {
-	return {
-		width: '100%',
-		overflowX: 'scroll',
-	};
-}

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -1,194 +0,0 @@
-import { forwardRef, memo, useCallback, useMemo } from 'react';
-import {
-	TableComponents,
-	TableVirtuoso,
-	TableVirtuosoHandle,
-} from 'react-virtuoso';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
-import { useTableView } from 'components/Logs/TableView/useTableView';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
-import { ILog } from 'types/api/logs/log';
-
-import { getInfinityDefaultStyles } from './config';
-import { LogsCustomTable } from './LogsCustomTable';
-import { TableHeaderCellStyled, TableRowStyled } from './styles';
-import TableRow from './TableRow';
-import { InfinityTableProps } from './types';
-
-interface CustomTableRowProps {
-	activeContextLogId: string;
-	activeLogId: string;
-}
-
-const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
-	children,
-	context,
-	...props
-}) => {
-	const { isHighlighted } = useCopyLogLink(props.item.id);
-
-	const isDarkMode = useIsDarkMode();
-
-	const logType = getLogIndicatorType(props.item);
-
-	return (
-		<TableRowStyled
-			$isDarkMode={isDarkMode}
-			$isActiveLog={
-				isHighlighted ||
-				(context as CustomTableRowProps).activeContextLogId === props.item.id ||
-				(context as CustomTableRowProps).activeLogId === props.item.id
-			}
-			$logType={logType}
-			{...props}
-		>
-			{children}
-		</TableRowStyled>
-	);
-};
-
-const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
-	function InfinityTableView(
-		{
-			isLoading,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		},
-		ref,
-	): JSX.Element | null {
-		const { activeLog: activeContextLog } = useActiveLog();
-
-		const onSetActiveLogExpand = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log);
-			},
-			[onSetActiveLog],
-		);
-
-		const onSetActiveLogContext = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
-			},
-			[onSetActiveLog],
-		);
-
-		const onCloseActiveLog = useCallback(() => {
-			onClearActiveLog?.();
-		}, [onClearActiveLog]);
-
-		const { dataSource, columns } = useTableView({
-			...tableViewProps,
-			onClickExpand: onSetActiveLogExpand,
-			onOpenLogsContext: onSetActiveLogContext,
-		});
-
-		const { draggedColumns, onDragColumns } = useDragColumns<
-			Record<string, unknown>
-		>(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-
-		const isDarkMode = useIsDarkMode();
-
-		const tableColumns = useMemo(
-			() => getDraggedColumns<Record<string, unknown>>(columns, draggedColumns),
-			[columns, draggedColumns],
-		);
-
-		const handleDragEnd = useCallback(
-			(fromIndex: number, toIndex: number) =>
-				onDragColumns(tableColumns, fromIndex, toIndex),
-			[tableColumns, onDragColumns],
-		);
-
-		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-					isActiveLog={activeLog?.id === log.id}
-					onClearActiveLog={onCloseActiveLog}
-				/>
-			),
-			[
-				tableColumns,
-				onSetActiveLog,
-				tableViewProps.logs,
-				tableViewProps.fontSize,
-				activeLog?.id,
-				onCloseActiveLog,
-			],
-		);
-		const tableHeader = useCallback(
-			() => (
-				<tr>
-					{tableColumns
-						.filter((column) => column.key)
-						.map((column) => {
-							const isDragColumn = column.key !== 'expand';
-
-							return (
-								<TableHeaderCellStyled
-									$isLogIndicator={column.key === 'state-indicator'}
-									$isDarkMode={isDarkMode}
-									$isDragColumn={isDragColumn}
-									key={column.key}
-									fontSize={tableViewProps?.fontSize}
-									{...(isDragColumn && { className: `dragHandler ${column.key}` })}
-									columnKey={column.key as string}
-								>
-									{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
-								</TableHeaderCellStyled>
-							);
-						})}
-				</tr>
-			),
-			[tableColumns, isDarkMode, tableViewProps?.fontSize],
-		);
-
-		return (
-			<>
-				<TableVirtuoso
-					ref={ref}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					style={getInfinityDefaultStyles(tableViewProps.fontSize)}
-					data={dataSource}
-					components={{
-						Table: LogsCustomTable({ isLoading, handleDragEnd }),
-						// TODO: fix it in the future
-						TableRow: (props): any =>
-							CustomTableRow({
-								...props,
-								context: {
-									activeContextLogId: activeContextLog?.id,
-									activeLogId: activeLog?.id,
-								},
-							} as any),
-					}}
-					itemContent={itemContent}
-					fixedHeaderContent={tableHeader}
-					totalCount={dataSource.length}
-					{...(infitiyTableProps?.onEndReached
-						? { endReached: infitiyTableProps.onEndReached }
-						: {})}
-				/>
-			</>
-		);
-	},
-);
-
-export default memo(InfinityTable);

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -1,212 +0,0 @@
-import { themeColors } from 'constants/theme';
-import { FontSize } from 'container/OptionsMenu/types';
-import styled from 'styled-components';
-import { getActiveLogBackground } from 'utils/logs';
-
-interface TableHeaderCellStyledProps {
-	$isDragColumn: boolean;
-	$isDarkMode: boolean;
-	$isLogIndicator?: boolean;
-	$hasSingleColumn?: boolean;
-	fontSize?: FontSize;
-	columnKey?: string;
-}
-
-export const TableStyled = styled.table`
-	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0;
-`;
-
-/**
- * TanStack column sizing uses table-layout:fixed + colgroup widths; without clipping,
- * cell content overflows visually on top of neighbouring columns (overlap / "ghost" text).
- */
-export const TanStackTableStyled = styled(TableStyled)`
-	table-layout: fixed;
-	width: 100%;
-	min-width: 100%;
-	max-width: 100%;
-
-	& td,
-	& th {
-		overflow: hidden;
-		min-width: 0;
-		box-sizing: border-box;
-		vertical-align: middle;
-	}
-
-	& td.table-actions-cell {
-		overflow: visible;
-	}
-
-	& td.body {
-		word-break: break-word;
-		overflow-wrap: anywhere;
-	}
-
-	/* Let nested body HTML / line-clamp shrink inside fixed columns */
-	& td.body > * {
-		min-width: 0;
-		max-width: 100%;
-	}
-
-	/* Long column titles: ellipsis when wider than the column (TanStackHeaderRow) */
-	& thead th .tanstack-header-title {
-		min-width: 0;
-		flex: 1 1 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	& thead th .tanstack-header-title > * {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-
-	& td.logs-table-filler-cell,
-	& th.logs-table-filler-header {
-		padding: 0 !important;
-		min-width: 0;
-		border-left: none;
-	}
-
-	& th.logs-table-actions-header {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0 !important;
-		min-width: 0 !important;
-		max-width: 0 !important;
-		padding: 0 !important;
-		overflow: visible;
-		white-space: nowrap;
-		border-left: none;
-	}
-`;
-
-const getTimestampColumnWidth = (
-	columnKey?: string,
-	$hasSingleColumn?: boolean,
-): string =>
-	columnKey === 'timestamp'
-		? $hasSingleColumn
-			? 'width: 100%;'
-			: 'width: 10%;'
-		: '';
-
-export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
-	padding: 0.5rem;
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `padding:0.3rem;`
-			: fontSize === FontSize.MEDIUM
-				? `padding:0.4rem;`
-				: fontSize === FontSize.LARGE
-					? `padding:0.5rem;`
-					: ``}
-	background-color: ${(props): string =>
-		props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
-
-	${({ $isLogIndicator }): string =>
-		$isLogIndicator ? 'padding: 0 0 0 8px;width: 1%;' : ''}
-	color: ${(props): string =>
-		props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
-
-	${({ columnKey, $hasSingleColumn }): string =>
-		getTimestampColumnWidth(columnKey, $hasSingleColumn)}
-
-	&.table-actions-cell {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0;
-		min-width: 0;
-		max-width: 0;
-		padding: 0 !important;
-		white-space: nowrap;
-		overflow: visible;
-		background-color: inherit;
-	}
-`;
-
-export const TableRowStyled = styled.tr<{
-	$isActiveLog: boolean;
-	$isDarkMode: boolean;
-	$logType: string;
-}>`
-	td {
-		${({ $isActiveLog, $isDarkMode, $logType }): string =>
-			$isActiveLog
-				? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
-				: ''};
-	}
-
-	cursor: pointer;
-	position: relative;
-
-	.log-line-action-buttons {
-		display: flex;
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 80ms linear;
-	}
-
-	&:hover {
-		${TableCellStyled} {
-			${({ $isDarkMode, $logType }): string =>
-				getActiveLogBackground(true, $isDarkMode, $logType)}
-		}
-		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
-		}
-	}
-	${({ $isActiveLog }): string =>
-		$isActiveLog
-			? `
-		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
-		}
-	`
-			: ''}
-`;
-
-export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
-	padding: 0.5rem;
-	height: 36px;
-	text-align: left;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	background: ${(props): string => (props.$isDarkMode ? '#0b0c0d' : '#fdfdfd')};
-	${({ $isDragColumn }): string => ($isDragColumn ? 'cursor: grab;' : '')}
-
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `font-size:11px; line-height:16px; padding: 0.1rem;`
-			: fontSize === FontSize.MEDIUM
-				? `font-size:13px; line-height:20px; padding:0.3rem;`
-				: fontSize === FontSize.LARGE
-					? `font-size:14px; line-height:24px; padding: 0.5rem;`
-					: ``};
-	${({ $isLogIndicator }): string =>
-		$isLogIndicator ? 'padding: 0px; width: 1%;' : ''}
-	border-top: 1px solid var(--l2-border);
-	border-bottom: 1px solid var(--l2-border);
-	box-shadow: inset 0 -1px 0 var(--l2-border);
-	&:first-child {
-		border-left: 1px solid var(--l2-border);
-	}
-	color: ${(props): string =>
-		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
-
-	${({ columnKey, $hasSingleColumn }): string =>
-		getTimestampColumnWidth(columnKey, $hasSingleColumn)}
-`;