Sidebar quick action buttons

src/pages/Stream/Views/Explore/LogsViewConfig.tsx

@@ -1,5 +1,5 @@
 import { LOGS_CONFIG_SIDEBAR_WIDTH } from '@/constants/theme';
-import { Checkbox, ScrollArea, Select, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { Checkbox, Group, ScrollArea, Select, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
 import classes from '../../styles/LogsViewConfig.module.css';
 import { useStreamStore } from '../../providers/StreamProvider';
 import _ from 'lodash';
@@ -9,7 +9,7 @@ import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
 import { IconGripVertical, IconPin, IconPinFilled } from '@tabler/icons-react';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 
-const { toggleConfigViewType, toggleDisabledColumns, setOrderedHeaders, togglePinnedColumns } =
+const { toggleConfigViewType, toggleDisabledColumns, setOrderedHeaders, togglePinnedColumns, setDisabledColumns } =
 	logsStoreReducers;
 
 const Header = () => {
@@ -116,6 +116,7 @@ const ColumnItem = (props: {
 	onToggleColumn: (column: string) => void;
 	pinned: boolean;
 	onPinColumn: (column: string) => void;
+	onOnlyClick: (column: string) => void;
 }) => {
 	const onToggle = useCallback(() => {
 		props.onToggleColumn(props.column);
@@ -125,6 +126,10 @@ const ColumnItem = (props: {
 		props.onPinColumn(props.column);
 	}, []);
 
+	const handleOnlyClick = useCallback(() => {
+		props.onOnlyClick(props.column);
+	}, []);
+
 	return (
 		<Stack className={classes.columnItemContainer} gap={8} style={{ cursor: 'default', alignItems: 'center' }}>
 			<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={4}>
@@ -147,6 +152,9 @@ const ColumnItem = (props: {
 					</Text>
 				</Tooltip>
 			</Stack>
+			<Text className={classes.onlyBtn} onClick={handleOnlyClick}>
+				only
+			</Text>
 		</Stack>
 	);
 };
@@ -192,10 +200,26 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 		setLogsStore((store) => toggleDisabledColumns(store, column));
 	}, []);
 
+	const handleClearAllClick = useCallback(() => {
+		setLogsStore((store) => setDisabledColumns(store, orderedHeaders));
+	}, [orderedHeaders]);
+
+	const handleSelectAllClick = useCallback(() => {
+		setLogsStore((store) => setDisabledColumns(store, []));
+	}, [orderedHeaders]);
+
 	// const onToggleWordWrap = useCallback(() => {
 	// 	setLogsStore((store) => toggleWordWrap(store));
 	// }, []);
 
+	const handleOnlyClick = useCallback(
+		(column: string) => {
+			const filteredHeaders = orderedHeaders.filter((el) => el !== column);
+			setLogsStore((store) => setDisabledColumns(store, filteredHeaders));
+		},
+		[orderedHeaders],
+	);
+
 	const onPinColumn = useCallback((column: string) => {
 		setLogsStore((store) => togglePinnedColumns(store, column));
 	}, []);
@@ -234,6 +258,21 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 				onChangeHandler={onSearchHandler}
 				disabled={_.isEmpty(headers)}
 			/>
+			<Group gap={8} style={{ display: 'flex', justifyContent: 'flex-start', paddingLeft: '1.3rem' }}>
+				<Text
+					className={classes.fieldActionBtn}
+					onClick={handleSelectAllClick}
+					style={!_.isEmpty(disabledColumns) ? { color: '#131fcd' } : {}}>
+					Select All
+				</Text>
+				|
+				<Text
+					className={classes.fieldActionBtn}
+					onClick={handleClearAllClick}
+					style={!(orderedHeaders.length === disabledColumns.length) ? { color: '#131fcd' } : {}}>
+					Clear All
+				</Text>
+			</Group>
 			<ScrollArea scrollbars="y">
 				<DragDropContext onDragEnd={onDropEnd}>
 					<Droppable droppableId="columns">
@@ -249,6 +288,7 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 													visible={!_.includes(disabledColumns, column)}
 													pinned={_.includes(pinnedColumns, column)}
 													onPinColumn={onPinColumn}
+													onOnlyClick={handleOnlyClick}
 												/>
 											</div>
 										)}
@@ -264,7 +304,7 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 	);
 };
 
-const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean, infoLoading: boolean }) => {
+const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; infoLoading: boolean }) => {
 	const [configViewType] = useLogsStore((store) => store.tableOpts.configViewType);
 	return (
 		<Stack style={{ width: LOGS_CONFIG_SIDEBAR_WIDTH }} className={classes.container}>

src/pages/Stream/providers/LogsProvider.tsx

@@ -205,7 +205,7 @@ type LogsStore = {
 		perPage: number;
 		currentOffset: number;
 		headers: string[];
-		orderedHeaders: string[]; 
+		orderedHeaders: string[];
 		sortKey: string;
 		sortOrder: 'asc' | 'desc';
 		filters: Record<string, string[]>;
@@ -324,7 +324,7 @@ const initialState: LogsStore = {
 		filters: {},
 		instantSearchValue: '',
 		configViewType: 'columns',
-		enableWordWrap: true
+		enableWordWrap: true,
 	},
 
 	// data
@@ -450,7 +450,7 @@ const resetCustQuerySearchState = (store: LogsStore) => {
 	return {
 		custQuerySearchState: { ...defaultCustQuerySearchState, viewMode: custQuerySearchState.viewMode },
 		...getCleanStoreForRefetch(store),
-		timeRange
+		timeRange,
 	};
 };
 
@@ -491,10 +491,10 @@ const setDisabledColumns = (store: LogsStore, columns: string[]) => {
 	return {
 		tableOpts: {
 			...store.tableOpts,
-			disabledColumns: columns
-		}
-	}
-}
+			disabledColumns: columns,
+		},
+	};
+};
 
 const togglePinnedColumns = (store: LogsStore, columnName: string) => {
 	const { tableOpts } = store;
@@ -563,7 +563,10 @@ const setLogData = (store: LogsStore, data: Log[], headers: string[], jqFiltered
 			: filterAndSortData(tableOpts, data);
 	const newPageSlice = filteredData && getPageSlice(currentPage, tableOpts.perPage, filteredData);
 	const unknownHeaders = _.difference(headers, orderedHeaders);
-	const updatedOrderedHeaders = _.chain([...orderedHeaders, ...unknownHeaders]).uniq().without(...columnsToSkip).value();
+	const updatedOrderedHeaders = _.chain([...orderedHeaders, ...unknownHeaders])
+		.uniq()
+		.without(...columnsToSkip)
+		.value();
 	return {
 		tableOpts: {
 			...store.tableOpts,
@@ -657,7 +660,7 @@ const getCleanStoreForRefetch = (store: LogsStore) => {
 			currentPage: 0,
 			currentOffset: 0,
 			totalPages: 0,
-			orderedHeaders: []
+			orderedHeaders: [],
 		},
 		data: {
 			...data,
@@ -895,7 +898,7 @@ const onToggleView = (store: LogsStore, viewMode: 'json' | 'table') => {
 			instantSearchValue: '',
 			currentPage,
 			totalPages: getTotalPages(filteredData, tableOpts.perPage),
-			configViewType: 'schema' as 'schema'
+			configViewType: 'schema' as 'schema',
 		},
 		viewMode,
 	};
@@ -917,10 +920,10 @@ const setOrderedHeaders = (store: LogsStore, headers: string[]) => {
 	return {
 		tableOpts: {
 			...store.tableOpts,
-			orderedHeaders: headers
-		}
-	}
-}
+			orderedHeaders: headers,
+		},
+	};
+};
 
 const toggleWordWrap = (store: LogsStore) => {
 	return {
@@ -977,7 +980,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	toggleConfigViewType,
 	setDisabledColumns,
 	setOrderedHeaders,
-	toggleWordWrap
+	toggleWordWrap,
 };
 
 export { LogsProvider, useLogsStore, logsStoreReducers };