Skip to content

Commit 97f2150

Browse files
balaji-jrbalaji-jr
authored
feat: UI changes and page scaling (#246)
* Home page - updated scaling and styles * About modal - scaling and style changes * User modal - scaling and styling updates * Users page - scaling and style updates * explore page - scaling and styling updates * Stream Page - style and scaling updates * Login page - Style and scaling updates * style fixes - graph overlaps with toolbar * cluster redesign * hide cluster page in standalone mode * stream info - renamed labels, fixed height and retain data when navigating * close popover on selecting sort * query pills style changes * clear interval instance on unmount * fixed log table height * filter query builder style changes * stream info style changes * show error if the ingestor is not reachable * cluster page - fixed storage size section & x-axis ticks * fixed paging issue * arrange pmeta data in ascending * show raw value in the event count chart tooltip * navbar and sidebar icon changes and style fixes * sidebar menu labels * fix - set headers from data when sql search is active * overall style fixes * fix - manage page styling, log table query firing for every page change * log table column icon size changes
1 parent 3dda331 commit 97f2150

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+1453
-820
lines changed

‎src/@types/parseable/api/clusterInfo.ts

+23
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,26 @@ export type IngestorMetrics = {
1919
};
2020

2121
export type ClusterInfo = Ingestor[];
22+
23+
export type IngestorQueryRecord = {
24+
address: string;
25+
parseable_events_ingested: number;
26+
parseable_events_ingested_size: number;
27+
parseable_lifetime_events_ingested: number;
28+
parseable_lifetime_events_ingested_size: number;
29+
parseable_deleted_events_ingested: number;
30+
parseable_deleted_events_ingested_size: number;
31+
parseable_staging_files: number;
32+
process_resident_memory_bytes: number;
33+
event_type: string;
34+
event_time: string;
35+
commit: string;
36+
staging: string;
37+
cache: string;
38+
parseable_storage_size_data: number;
39+
parseable_storage_size_staging: number;
40+
parseable_lifetime_storage_size_data: number;
41+
parseable_lifetime_storage_size_staging: number;
42+
parseable_deleted_storage_size_data: number;
43+
parseable_deleted_storage_size_staging: number;
44+
};

‎src/api/cluster.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1-
import { Ingestor, IngestorMetrics } from '@/@types/parseable/api/clusterInfo';
1+
import { Ingestor, IngestorMetrics, IngestorQueryRecord } from '@/@types/parseable/api/clusterInfo';
22
import { Axios } from './axios';
3-
import { CLUSTER_INFO_URL, CLUSTER_METRICS_URL, INGESTOR_DELETE_URL } from './constants';
3+
import { CLUSTER_INFO_URL, CLUSTER_METRICS_URL, INGESTOR_DELETE_URL, LOG_QUERY_URL } from './constants';
44

55
export const getClusterInfo = () => {
66
return Axios().get<Ingestor[]>(CLUSTER_INFO_URL);
77
};
88

9+
export const getIngestorInfo = (domain_name: string | null, startTime: Date, endTime: Date) => {
10+
const query = `SELECT * FROM pmeta where address = '${domain_name}' ORDER BY event_time DESC LIMIT 10 OFFSET 0`;
11+
12+
return Axios().post<IngestorQueryRecord[]>(
13+
LOG_QUERY_URL,
14+
{
15+
query,
16+
startTime,
17+
endTime,
18+
},
19+
{},
20+
);
21+
};
22+
923
export const getClusterMetrics = () => {
1024
return Axios().get<IngestorMetrics[]>(CLUSTER_METRICS_URL);
1125
};

‎src/components/Button/Button.module.css

-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@
2323

2424
.iconBtn {
2525
background: #fff;
26-
padding: 0;
27-
width: 36px;
2826
color: #211F1F;
2927
border: 1px #e9ecef solid;
3028
border-radius: rem(8px);

‎src/components/Button/IconButton.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
import { Button, Tooltip } from '@mantine/core';
1+
import { Tooltip, ActionIcon } from '@mantine/core';
22
import type { FC, ReactNode } from 'react';
33
import classes from './Button.module.css';
4-
import React from 'react';
54

65
type IconButtonProps = {
76
onClick?: () => void;
87
renderIcon: () => ReactNode;
98
icon?: ReactNode;
109
active?: boolean;
1110
tooltipLabel?: string;
11+
size?: string | number;
1212
};
1313

1414
const IconButton: FC<IconButtonProps> = (props) => {
1515
const { renderIcon, tooltipLabel } = props;
1616
if (tooltipLabel) {
1717
return (
1818
<Tooltip label={tooltipLabel}>
19-
<Button
19+
<ActionIcon
20+
size={props.size ? props.size : 'xl'}
2021
className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
2122
onClick={props.onClick && props.onClick}>
2223
{renderIcon()}
23-
</Button>
24+
</ActionIcon>
2425
</Tooltip>
2526
);
2627
} else {
2728
return (
28-
<React.Fragment>
29-
<Button
30-
className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
31-
onClick={props.onClick && props.onClick}>
32-
{renderIcon()}
33-
</Button>
34-
</React.Fragment>
29+
<ActionIcon
30+
size={props.size ? props.size : 'xl'}
31+
className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
32+
onClick={props.onClick && props.onClick}>
33+
{renderIcon()}
34+
</ActionIcon>
3535
);
3636
}
3737
};

‎src/components/Empty/Empty.module.css

-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,5 @@
88
}
99

1010
.messageStyle {
11-
margin-top: 1rem;
1211
color: #777777;
1312
}

‎src/components/Empty/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const EmptyBox: FC<EmptyBoxProps> = (props) => {
8080

8181
return (
8282
<Center className={container} {...restProps}>
83-
<EmptySimple height={imgHeight || 70} width={imgWidth || 100} />
83+
<EmptySimple height={imgHeight || 60} width={imgWidth || 60} />
8484
<Text className={messageStyle} {...textProps}>
8585
{message || 'No Data'}
8686
</Text>

‎src/components/Header/PrimaryHeader.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import icon from '@/assets/images/brand/icon.svg';
22
import { HOME_ROUTE } from '@/constants/routes';
33
import { NAVBAR_WIDTH, PRIMARY_HEADER_HEIGHT } from '@/constants/theme';
4-
import { Button, Image, Stack } from '@mantine/core';
4+
import { Button, Divider, Image, Stack } from '@mantine/core';
55
import { FC, useCallback } from 'react';
66
import styles from './styles/Header.module.css';
77
import HelpModal from './HelpModal';
@@ -11,7 +11,7 @@ const PrimaryHeader: FC = () => {
1111
const classes = styles;
1212
const { logoContainer, imageSty } = classes;
1313
const [maximized, setAppStore] = useAppStore((store) => store.maximized);
14-
const toggleHelpModal = useCallback(() => setAppStore(appStoreReducers.toggleHelpModal), [])
14+
const toggleHelpModal = useCallback(() => setAppStore(appStoreReducers.toggleHelpModal), []);
1515
if (maximized) return null;
1616

1717
return (
@@ -22,25 +22,25 @@ const PrimaryHeader: FC = () => {
2222
}}
2323
gap={0}>
2424
<HelpModal />
25-
<Stack className={logoContainer} w={NAVBAR_WIDTH}>
25+
<Stack className={logoContainer} w={NAVBAR_WIDTH + 20} style={{ alignItems: 'center', justifyContent: 'center' }}>
2626
<a href={HOME_ROUTE}>
27-
<Image className={imageSty} src={icon} height={32} alt="Parseable Logo" />
27+
<Image className={imageSty} src={icon} height={24} alt="Parseable Logo" />
2828
</a>
2929
</Stack>
3030
<Stack
3131
className={classes.rightSection}
3232
style={{ flexDirection: 'row', height: '100%', justifyContent: 'flex-end' }}
33-
gap={0}>
33+
gap={8}>
3434
<Button
3535
variant="outline"
36-
style={{ border: 'none', padding: '0 1rem' }}
36+
style={{ border: 'none' }}
3737
component={'a'}
3838
href="mailto:[email protected]?subject=Production%20Support%20Query"
3939
target="_blank">
4040
Upgrade
4141
</Button>
42-
<Stack className={classes.divider} />
43-
<Button onClick={toggleHelpModal} style={{ border: 'none', padding: '0 1rem' }} variant="outline">
42+
<Divider orientation="vertical" />
43+
<Button onClick={toggleHelpModal} style={{ border: 'none' }} variant="outline">
4444
Help
4545
</Button>
4646
</Stack>

‎src/components/Header/RefreshInterval.tsx

+14-7
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,28 @@ const RefreshInterval: FC = () => {
1919

2020
useEffect(() => {
2121
const timerInterval = timerRef.current;
22-
if (timerInterval !== null) {
23-
try {
24-
clearInterval(timerInterval);
25-
timerRef.current = null;
26-
} catch (e) {
27-
console.log(e);
22+
const clearIntervalInstance = () => {
23+
if (timerInterval !== null) {
24+
try {
25+
clearInterval(timerInterval);
26+
timerRef.current = null;
27+
} catch (e) {
28+
console.log(e);
29+
}
2830
}
2931
}
3032

33+
clearIntervalInstance();
3134
if (refreshInterval !== null) {
3235
const intervalId = setInterval(() => {
3336
setLogsStore(getCleanStoreForRefetch);
3437
}, refreshInterval);
3538
timerRef.current = intervalId;
3639
}
40+
41+
return () => {
42+
clearIntervalInstance()
43+
}
3744
}, [refreshInterval]);
3845

3946
const { intervalbtn } = classes;
@@ -42,7 +49,7 @@ const RefreshInterval: FC = () => {
4249
<Menu withArrow>
4350
<Menu.Target>
4451
<Tooltip label="Refresh Interval">
45-
<Button className={intervalbtn} leftSection={<Icon size={px('1.2rem')} stroke={1.5} />}>
52+
<Button className={intervalbtn} h="100%" leftSection={<Icon size={px('1rem')} stroke={1.5} />}>
4653
{refreshInterval ? ms(refreshInterval) : 'Off'}
4754
</Button>
4855
</Tooltip>

‎src/components/Header/RefreshNow.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { Button, Tooltip, px } from '@mantine/core';
1+
import { Tooltip, px } from '@mantine/core';
22
import { IconReload } from '@tabler/icons-react';
33
import { useCallback, type FC } from 'react';
4-
import classes from './styles/LogQuery.module.css';
54
import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider';
5+
import IconButton from '../Button/IconButton';
66

77
const { getCleanStoreForRefetch } = logsStoreReducers;
88

9+
const renderRefreshIcon = () => <IconReload size={px('1rem')} stroke={1.5} />;
10+
911
const RefreshNow: FC = () => {
10-
const { refreshNowBtn } = classes;
1112
const [, setLogsStore] = useLogsStore((_store) => null);
1213

1314
const onRefresh = useCallback(() => {
1415
setLogsStore((store) => getCleanStoreForRefetch(store));
1516
}, []);
1617
return (
1718
<Tooltip label="Refresh">
18-
<Button className={refreshNowBtn} onClick={onRefresh}>
19-
<IconReload size={px('1.2rem')} stroke={1.5} />
20-
</Button>
19+
<IconButton size={38} renderIcon={renderRefreshIcon} onClick={onRefresh} />
2120
</Tooltip>
2221
);
2322
};

‎src/components/Header/StreamDropdown.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
55
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
66
import { STREAM_VIEWS } from '@/constants/routes';
77
import _ from 'lodash';
8+
import { STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme';
89

910
const StreamDropdown = () => {
1011
const { streamName, view } = useParams();
@@ -32,9 +33,12 @@ const StreamDropdown = () => {
3233
searchable
3334
limit={20}
3435
value={valueRef.current}
36+
h="100%"
3537
classNames={{ input: classes.streamInput, description: classes.streamSelectDescription }}
36-
className={classes.streamSelect}
3738
onChange={handleChange}
39+
styles={{input: {
40+
height: STREAM_PRIMARY_TOOLBAR_HEIGHT
41+
}}}
3842
data={userSpecificStreams?.map((stream: any) => ({ value: stream.name, label: stream.name })) ?? []}
3943
/>
4044
);

‎src/components/Header/StreamingButton.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { type FC } from 'react';
33
import useMountedState from '@/hooks/useMountedState';
44
import classes from './styles/LogQuery.module.css';
55
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
6+
import { STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme';
67

78
const { setLiveTailStatus } = logsStoreReducers;
89

@@ -27,7 +28,7 @@ const StreamingButton: FC = () => {
2728
const { streamButton } = classes;
2829

2930
return (
30-
<Button className={streamButton} onClick={handleStreaming}>
31+
<Button className={streamButton} onClick={handleStreaming} style={{height: STREAM_PRIMARY_TOOLBAR_HEIGHT}}>
3132
<Box mr="10px">{liveTailConfig.liveTailStatus === 'streaming' ? '🔴' : '🟢'}</Box>
3233
{liveTailConfig.liveTailStatus === 'streaming' ? 'Stop' : 'Start'}
3334
</Button>

‎src/components/Header/TimeRange.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,18 @@ const TimeRange: FC = () => {
8686
<Menu.Target>
8787
<Stack className={classes.timeRangeBtnContainer}>
8888
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('left')}>
89-
<IconChevronLeft style={{ cursor: 'pointer' }} />
89+
<IconChevronLeft stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
9090
</Stack>
9191
<Button
9292
className={timeRangeBTn}
93-
leftSection={<IconClock size={px('1.2rem')} stroke={1.5} />}
94-
onClick={toggleMenu}>
93+
leftSection={<IconClock size={px('1rem')} stroke={1.5} />}
94+
onClick={toggleMenu}
95+
styles={{label: {fontSize: '0.65rem', fontWeight: 600}}}
96+
>
9597
{FIXED_DURATIONS_LABEL[label] || label}
9698
</Button>
9799
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('right')}>
98-
<IconChevronRight style={{ cursor: 'pointer' }} />
100+
<IconChevronRight stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
99101
</Stack>
100102
</Stack>
101103
</Menu.Target>
@@ -181,7 +183,7 @@ const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened }) => {
181183

182184
return (
183185
<Fragment>
184-
<Text style={{fontSize: '0.9rem', fontWeight: 500}}>Custom Range</Text>
186+
<Text style={{fontSize: '0.7rem', fontWeight: 500}}>Custom Range</Text>
185187
<DateTimePicker
186188
error={isStartTimeMoreThenEndTime ? 'Start time cannot be greater than the end time' : ''}
187189
maxDate={new Date()}

0 commit comments

Comments
 (0)