Merge branch 'SigNoz:develop' into develop

manishm · Sep 12, 2023 · a902445 · a902445
2 parents dd7a43f + 86c34bd
commit a902445
Show file tree

Hide file tree

Showing 30 changed files with 502 additions and 289 deletions.
diff --git a/frontend/src/api/dashboard/getAll.ts b/frontend/src/api/dashboard/getAll.ts
@@ -1,24 +1,8 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/dashboard/getAll';
+import { ApiResponse } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
 
-const getAll = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
-	try {
-		const response = await axios.get('/dashboards');
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.message,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getAll;
+export const getAllDashboardList = (): Promise<Dashboard[]> =>
+	axios
+		.get<ApiResponse<Dashboard[]>>('/dashboards')
+		.then((res) => res.data.data);
diff --git a/frontend/src/container/ErrorDetails/config.ts b/frontend/src/container/ErrorDetails/config.ts
@@ -0,0 +1,8 @@
+export const keyToExclude = [
+	'exceptionStacktrace',
+	'exceptionType',
+	'errorId',
+	'timestamp',
+	'exceptionMessage',
+	'exceptionEscaped',
+];
diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx
@@ -14,12 +14,13 @@ import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
 
+import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
 
 function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	const { idPayload } = props;
 	const { t } = useTranslation(['errorDetails', 'common']);
-	const { search } = useLocation();
+	const { search, pathname } = useLocation();
 
 	const params = useMemo(() => new URLSearchParams(search), [search]);
 
@@ -70,18 +71,6 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		[],
 	);
 
-	const keyToExclude = useMemo(
-		() => [
-			'exceptionStacktrace',
-			'exceptionType',
-			'errorId',
-			'timestamp',
-			'exceptionMessage',
-			'exceptionEscaped',
-		],
-		[],
-	);
-
 	const { notifications } = useNotifications();
 
 	const onClickErrorIdHandler = async (
@@ -102,9 +91,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				errorId: id,
 			};
 
-			history.replace(
-				`${history.location.pathname}?${createQueryParams(queryParams)}`,
-			);
+			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
 		} catch (error) {
 			notifications.error({
 				message: t('something_went_wrong'),

diff --git a/frontend/src/container/ExportPanel/ExportPanel.tsx b/frontend/src/container/ExportPanel/ExportPanel.tsx
@@ -44,10 +44,10 @@ function ExportPanel({ isLoading, onExport }: ExportPanelProps): JSX.Element {
 		onError: handleError,
 	});
 
-	const options = useMemo(() => getSelectOptions(data?.payload || []), [data]);
+	const options = useMemo(() => getSelectOptions(data || []), [data]);
 
 	const handleExportClick = useCallback((): void => {
-		const currentSelectedDashboard = data?.payload?.find(
+		const currentSelectedDashboard = data?.find(
 			({ uuid }) => uuid === selectedDashboardId,
 		);
 

diff --git a/frontend/src/container/GridGraphLayout/Graph/WidgetGraphComponent.tsx b/frontend/src/container/GridGraphLayout/Graph/WidgetGraphComponent.tsx
@@ -19,6 +19,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { DeleteWidget } from 'store/actions/dashboard/deleteWidget';
@@ -62,6 +63,7 @@ function WidgetGraphComponent({
 	const [hovered, setHovered] = useState(false);
 	const { notifications } = useNotifications();
 	const { t } = useTranslation(['common']);
+	const { pathname } = useLocation();
 
 	const { graphVisibilityStates: localstoredVisibilityStates } = useMemo(
 		() =>
@@ -195,11 +197,7 @@ function WidgetGraphComponent({
 					graphType: widget?.panelTypes,
 					widgetId: uuid,
 				};
-				setTimeout(() => {
-					history.push(
-						`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-					);
-				}, 1500);
+				history.push(`${pathname}/new?${createQueryParams(queryParams)}`);
 			});
 		}
 	};

diff --git a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
@@ -10,7 +10,11 @@ import AppActions from 'types/actions';
 import { Data } from '../index';
 import { TableLinkText } from './styles';
 
-function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
+function DeleteButton({
+	deleteDashboard,
+	id,
+	refetchDashboardList,
+}: DeleteButtonProps): JSX.Element {
 	const [modal, contextHolder] = Modal.useModal();
 
 	const openConfirmationDialog = useCallback((): void => {
@@ -20,13 +24,14 @@ function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
 			onOk() {
 				deleteDashboard({
 					uuid: id,
+					refetch: refetchDashboardList,
 				});
 			},
 			okText: 'Delete',
 			okButtonProps: { danger: true },
 			centered: true,
 		});
-	}, [id, modal, deleteDashboard]);
+	}, [modal, deleteDashboard, id, refetchDashboardList]);
 
 	return (
 		<>
@@ -51,13 +56,22 @@ const mapDispatchToProps = (
 	deleteDashboard: bindActionCreators(DeleteDashboard, dispatch),
 });
 
-type DeleteButtonProps = Data & DispatchProps;
+export type DeleteButtonProps = Data & DispatchProps;
 
 const WrapperDeleteButton = connect(null, mapDispatchToProps)(DeleteButton);
 
 // This is to avoid the type collision
 function Wrapper(props: Data): JSX.Element {
-	const { createdBy, description, id, key, lastUpdatedTime, name, tags } = props;
+	const {
+		createdBy,
+		description,
+		id,
+		key,
+		refetchDashboardList,
+		lastUpdatedTime,
+		name,
+		tags,
+	} = props;
 
 	return (
 		<WrapperDeleteButton
@@ -69,6 +83,7 @@ function Wrapper(props: Data): JSX.Element {
 				lastUpdatedTime,
 				name,
 				tags,
+				refetchDashboardList,
 			}}
 		/>
 	);

diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
@@ -14,6 +14,7 @@ import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import SearchFilter from 'container/ListOfDashboard/SearchFilter';
+import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import {
@@ -25,27 +26,32 @@ import {
 	useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { UseQueryResult } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GET_ALL_DASHBOARD_SUCCESS } from 'types/actions/dashboard';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
-import DashboardReducer from 'types/reducer/dashboards';
 
 import ImportJSON from './ImportJSON';
 import { ButtonContainer, NewDashboardButton, TableContainer } from './styles';
 import Createdby from './TableComponents/CreatedBy';
 import DateComponent from './TableComponents/Date';
-import DeleteButton from './TableComponents/DeleteButton';
+import DeleteButton, {
+	DeleteButtonProps,
+} from './TableComponents/DeleteButton';
 import Name from './TableComponents/Name';
 import Tags from './TableComponents/Tags';
 
 function ListOfAllDashboard(): JSX.Element {
-	const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
-		(state) => state.dashboards,
-	);
+	const {
+		data: dashboardListResponse = [],
+		isLoading: isDashboardListLoading,
+		refetch: refetchDashboardList,
+	} = useGetAllDashboard();
+
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
@@ -66,8 +72,10 @@ function ListOfAllDashboard(): JSX.Element {
 	const [filteredDashboards, setFilteredDashboards] = useState<Dashboard[]>();
 
 	useEffect(() => {
-		setFilteredDashboards(dashboards);
-	}, [dashboards]);
+		if (dashboardListResponse.length) {
+			setFilteredDashboards(dashboardListResponse);
+		}
+	}, [dashboardListResponse]);
 
 	const [newDashboardState, setNewDashboardState] = useState({
 		loading: false,
@@ -125,22 +133,43 @@ function ListOfAllDashboard(): JSX.Element {
 				title: 'Action',
 				dataIndex: '',
 				width: 40,
-				render: DeleteButton,
+				render: ({
+					createdBy,
+					description,
+					id,
+					key,
+					lastUpdatedTime,
+					name,
+					tags,
+				}: DeleteButtonProps) => (
+					<DeleteButton
+						description={description}
+						id={id}
+						key={key}
+						lastUpdatedTime={lastUpdatedTime}
+						name={name}
+						tags={tags}
+						createdBy={createdBy}
+						refetchDashboardList={refetchDashboardList}
+					/>
+				),
 			});
 		}
 
 		return tableColumns;
-	}, [action]);
-
-	const data: Data[] = (filteredDashboards || dashboards).map((e) => ({
-		createdBy: e.created_at,
-		description: e.data.description || '',
-		id: e.uuid,
-		lastUpdatedTime: e.updated_at,
-		name: e.data.title,
-		tags: e.data.tags || [],
-		key: e.uuid,
-	}));
+	}, [action, refetchDashboardList]);
+
+	const data: Data[] =
+		filteredDashboards?.map((e) => ({
+			createdBy: e.created_at,
+			description: e.data.description || '',
+			id: e.uuid,
+			lastUpdatedTime: e.updated_at,
+			name: e.data.title,
+			tags: e.data.tags || [],
+			key: e.uuid,
+			refetchDashboardList,
+		})) || [];
 
 	const onNewDashboardHandler = useCallback(async () => {
 		try {
@@ -209,7 +238,7 @@ function ListOfAllDashboard(): JSX.Element {
 			menuItems.push({
 				key: t('create_dashboard').toString(),
 				label: t('create_dashboard'),
-				disabled: loading,
+				disabled: isDashboardListLoading,
 				onClick: onNewDashboardHandler,
 			});
 		}
@@ -228,7 +257,7 @@ function ListOfAllDashboard(): JSX.Element {
 		});
 
 		return menuItems;
-	}, [createNewDashboard, loading, onNewDashboardHandler, t]);
+	}, [createNewDashboard, isDashboardListLoading, onNewDashboardHandler, t]);
 
 	const menu: MenuProps = useMemo(
 		() => ({
@@ -250,7 +279,11 @@ function ListOfAllDashboard(): JSX.Element {
 						}}
 					/>
 					{newDashboard && (
-						<Dropdown disabled={loading} trigger={['click']} menu={menu}>
+						<Dropdown
+							disabled={isDashboardListLoading}
+							trigger={['click']}
+							menu={menu}
+						>
 							<NewDashboardButton
 								icon={<PlusOutlined />}
 								type="primary"
@@ -266,7 +299,7 @@ function ListOfAllDashboard(): JSX.Element {
 		),
 		[
 			newDashboard,
-			loading,
+			isDashboardListLoading,
 			menu,
 			newDashboardState.loading,
 			newDashboardState.error,
@@ -278,9 +311,9 @@ function ListOfAllDashboard(): JSX.Element {
 		<Card>
 			{GetHeader}
 
-			{!loading && (
+			{!isDashboardListLoading && (
 				<SearchFilter
-					searchData={dashboards}
+					searchData={dashboardListResponse}
 					filterDashboards={setFilteredDashboards}
 				/>
 			)}
@@ -300,7 +333,7 @@ function ListOfAllDashboard(): JSX.Element {
 					showHeader
 					bordered
 					sticky
-					loading={loading}
+					loading={isDashboardListLoading}
 					dataSource={data}
 					showSorterTooltip
 				/>
@@ -317,6 +350,7 @@ export interface Data {
 	createdBy: string;
 	lastUpdatedTime: string;
 	id: string;
+	refetchDashboardList: UseQueryResult['refetch'];
 }
 
 export default ListOfAllDashboard;
diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -100,7 +100,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 
 			{logs.length !== 0 && (
 				<InfinityWrapperStyled>
-					{options.format === 'table' ? (
+					{options.format === OptionFormatTypes.TABLE ? (
 						<InfinityTableView
 							ref={ref}
 							isLoading={false}