Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 6af2086

Browse files
praveen5959praveen5959
authored
feat: collapsible explore page sidebar. (#378)
1 parent e6d532f commit 6af2086

File tree

5 files changed

+99
-26
lines changed

5 files changed

+99
-26
lines changed

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

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import { LOGS_CONFIG_SIDEBAR_WIDTH } from '@/constants/theme';
22
import { Checkbox, Divider, Group, ScrollArea, Select, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
33
import classes from '../../styles/LogsViewConfig.module.css';
4-
import { useStreamStore } from '../../providers/StreamProvider';
4+
import { streamStoreReducers, useStreamStore } from '../../providers/StreamProvider';
55
import _ from 'lodash';
66
import { Field } from '@/@types/parseable/dataType';
77
import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
88
import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
9-
import { IconGripVertical, IconPin, IconPinFilled } from '@tabler/icons-react';
9+
import { IconChevronsLeft, IconGripVertical, IconPin, IconPinFilled } from '@tabler/icons-react';
1010
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
11-
import { ResizableBox } from 'react-resizable';
1211
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
1312

1413
const { toggleConfigViewType, toggleDisabledColumns, setOrderedHeaders, togglePinnedColumns, setDisabledColumns } =
1514
logsStoreReducers;
1615

16+
const { toggleSideBar } = streamStoreReducers;
17+
1718
const Header = () => {
1819
const [configViewType, setLogsStore] = useLogsStore((store) => store.tableOpts.configViewType);
1920

@@ -300,6 +301,8 @@ const ColumnsList = (props: { isLoading: boolean }) => {
300301
const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; infoLoading: boolean }) => {
301302
const [configViewType] = useLogsStore((store) => store.tableOpts.configViewType);
302303
const [maximized] = useAppStore((store) => store.maximized);
304+
const [{ sideBarOpen }, setStreamStore] = useStreamStore((store) => store);
305+
303306
const divRef = useRef<HTMLDivElement | null>(null);
304307
const [height, setHeight] = useState(0);
305308

@@ -308,23 +311,35 @@ const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; i
308311
setHeight(divRef.current.offsetHeight);
309312
}
310313
}, [maximized]);
314+
311315
return (
312-
<Stack ref={divRef}>
313-
<ResizableBox
314-
width={LOGS_CONFIG_SIDEBAR_WIDTH}
315-
height={height}
316-
axis="x"
317-
maxConstraints={[500, height]}
318-
minConstraints={[200, height]}>
319-
<Stack style={{ width: '100%', height: '100%' }} className={classes.container}>
320-
<Header />
321-
{configViewType === 'schema' ? (
322-
<SchemaList isLoading={props.schemaLoading || props.infoLoading} />
323-
) : (
324-
<ColumnsList isLoading={props.logsLoading || props.infoLoading} />
325-
)}
326-
</Stack>
327-
</ResizableBox>
316+
<Stack
317+
ref={divRef}
318+
style={{
319+
borderRight: '1px solid var(--mantine-color-gray-2)',
320+
width: sideBarOpen ? 0 : LOGS_CONFIG_SIDEBAR_WIDTH,
321+
transition: 'width 0.5s',
322+
}}>
323+
<Stack style={{ width: LOGS_CONFIG_SIDEBAR_WIDTH, height: height - 30 }} className={classes.container}>
324+
<Header />
325+
{configViewType === 'schema' ? (
326+
<SchemaList isLoading={props.schemaLoading || props.infoLoading} />
327+
) : (
328+
<ColumnsList isLoading={props.logsLoading || props.infoLoading} />
329+
)}
330+
</Stack>
331+
<Stack className={classes.collapseBtn}>
332+
{!sideBarOpen && (
333+
<Tooltip label="Collapse" position="left">
334+
<IconChevronsLeft
335+
className={classes.collapseIcon}
336+
onClick={() => setStreamStore((store) => toggleSideBar(store))}
337+
stroke={1.2}
338+
size="1.2rem"
339+
/>
340+
</Tooltip>
341+
)}
342+
</Stack>
328343
</Stack>
329344
);
330345
};

‎src/pages/Stream/components/Sidebar.tsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { Stack, Tooltip } from '@mantine/core';
22
import classes from '../styles/SideBar.module.css';
3-
import { IconBolt, IconFilterSearch, IconSettings2 } from '@tabler/icons-react';
3+
import { IconBolt, IconChevronsRight, IconFilterSearch, IconSettings2 } from '@tabler/icons-react';
44
import { useCallback } from 'react';
55
import { useNavigate, useParams } from 'react-router-dom';
66
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
77
import { STREAM_VIEWS } from '@/constants/routes';
88
import _ from 'lodash';
9+
import { streamStoreReducers, useStreamStore } from '../providers/StreamProvider';
10+
11+
const { toggleSideBar } = streamStoreReducers;
912

1013
type MenuItemProps = {
1114
setCurrentView: (view: string) => void;
@@ -59,6 +62,24 @@ const ConfigButton = (props: MenuItemProps) => {
5962
);
6063
};
6164

65+
const ExpandCollapseButton = () => {
66+
const [{ sideBarOpen }, setStreamStore] = useStreamStore((store) => store);
67+
return (
68+
<Stack
69+
onClick={() => setStreamStore((store) => toggleSideBar(store))}
70+
style={{ padding: '4px 0', alignItems: 'center', marginTop: 'auto' }}
71+
className={classes.menuItemContainer}>
72+
{sideBarOpen && (
73+
<Tooltip label="Expand" position="right">
74+
<Stack className={classes.collapseBtn} style={{ padding: '4px 4px' }}>
75+
<IconChevronsRight className={classes.collapseIcon} stroke={1.2} size="1.2rem" />
76+
</Stack>
77+
</Tooltip>
78+
)}
79+
</Stack>
80+
);
81+
};
82+
6283
const LiveTailMenu = (props: MenuItemProps) => {
6384
const viewName = 'live-tail';
6485
const isActive = props.currentView === viewName;
@@ -104,6 +125,9 @@ const SideBar = () => {
104125
{isStandAloneMode && <LiveTailMenu setCurrentView={setCurrentView} currentView={view || ''} />}
105126
<ConfigButton setCurrentView={setCurrentView} currentView={view || ''} />
106127
</Stack>
128+
<Stack style={{ marginTop: 'auto' }}>
129+
<ExpandCollapseButton />
130+
</Stack>
107131
</Stack>
108132
);
109133
};

‎src/pages/Stream/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Box, Stack, rem } from '@mantine/core';
2-
import { useDocumentTitle } from '@mantine/hooks';
1+
import { Box, Stack } from '@mantine/core';
2+
import { useDocumentTitle, useHotkeys } from '@mantine/hooks';
33
import { FC, useCallback, useEffect } from 'react';
44
import LiveLogTable from './Views/LiveTail/LiveLogTable';
55
import ViewLog from './components/ViewLog';
@@ -20,7 +20,7 @@ import { useGetStreamSchema } from '@/hooks/useGetLogStreamSchema';
2020
import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
2121
import useParamsController from './hooks/useParamsController';
2222

23-
const { streamChangeCleanup } = streamStoreReducers;
23+
const { streamChangeCleanup, toggleSideBar } = streamStoreReducers;
2424

2525
const ErrorView = (props: { error: string | null; onRetry: () => void }) => {
2626
return (
@@ -45,12 +45,14 @@ const Stream: FC = () => {
4545
const [maximized] = useAppStore((store) => store.maximized);
4646
const [instanceConfig] = useAppStore((store) => store.instanceConfig);
4747
const queryEngine = instanceConfig?.queryEngine;
48-
const [sideBarOpen, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
48+
const [, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
4949
const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo(
5050
currentStream || '',
5151
currentStream !== null,
5252
);
5353

54+
useHotkeys([['mod+/', () => setStreamStore((store) => toggleSideBar(store))]]);
55+
5456
const {
5557
refetch: refetchSchema,
5658
isLoading: isSchemaLoading,
@@ -78,7 +80,7 @@ const Stream: FC = () => {
7880
}
7981
}, [isStoreSynced, currentStream]);
8082

81-
const sideBarWidth = sideBarOpen ? rem(180) : SECONDARY_SIDEBAR_WIDTH;
83+
const sideBarWidth = SECONDARY_SIDEBAR_WIDTH;
8284

8385
if (!currentStream) return null;
8486
if (!_.includes(STREAM_VIEWS, view)) return null;

‎src/pages/Stream/styles/LogsViewConfig.module.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.container {
2-
border: 1px solid var(--mantine-color-gray-2);
32
border-top: none;
43
border-left: none;
54
border-bottom: none;
@@ -110,3 +109,21 @@
110109
color: var(--mantine-color-brandPrimary-4);
111110
cursor: pointer;
112111
}
112+
113+
.collapseBtn {
114+
display: flex;
115+
align-items: end;
116+
cursor: pointer;
117+
padding: 4px;
118+
}
119+
120+
.collapseIcon{
121+
color: var(--mantine-color-gray-6);
122+
border-radius: 0.175rem;
123+
height: 20px;
124+
width: 20px;
125+
&:hover {
126+
background-color: #F0F3F5;
127+
color: black;
128+
}
129+
}

‎src/pages/Stream/styles/SideBar.module.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,19 @@
4949

5050
.icon {
5151
color: var(--mantine-color-gray-6);
52+
}
53+
54+
.collapseBtn {
55+
display: flex;
56+
align-items: end;
57+
cursor: pointer;
58+
}
59+
60+
.collapseIcon{
61+
color: var(--mantine-color-gray-6);
62+
border-radius: 0.175rem;
63+
&:hover {
64+
background-color: #F0F3F5;
65+
color: black;
66+
}
5267
}

0 commit comments

Comments
 (0)