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

Commit 2fb5d43

Browse files
committed
JSON view default
1 parent cd6f290 commit 2fb5d43

File tree

5 files changed

+213
-14
lines changed

5 files changed

+213
-14
lines changed

src/components/Navbar/components/CorrelationIcon.tsx

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,45 @@ export const CorrelationIcon = forwardRef<
99
>(({ stroke, strokeWidth }, ref) => (
1010
<svg ref={ref} height="1.2rem" width="1.2rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1111
<path
12-
d="M13.3333 17.3333L14.6667 18.6667C15.0203 19.0203 15.4999 19.219 16 19.219C16.5001 19.219 16.9797 19.0203 17.3333 18.6667L22.6667 13.3333C23.0203 12.9797 23.219 12.5001 23.219 12C23.219 11.4999 23.0203 11.0203 22.6667 10.6667L17.3333 5.33333C16.9797 4.97971 16.5001 4.78105 16 4.78105C15.4999 4.78105 15.0203 4.97971 14.6667 5.33333L9.33333 10.6667C8.97971 11.0203 8.78105 11.4999 8.78105 12C8.78105 12.5001 8.97971 12.9797 9.33333 13.3333L10.6667 14.6667"
12+
d="M13.3335 17.3335L14.6669 18.6669C15.0205 19.0205 15.5001 19.2192 16.0002 19.2192C16.5003 19.2192 16.9799 19.0205 17.3335 18.6669L22.6669 13.3335C23.0205 12.9799 23.2192 12.5003 23.2192 12.0002C23.2192 11.5001 23.0205 11.0205 22.6669 10.6669L17.3335 5.33353C16.9799 4.97991 16.5003 4.78125 16.0002 4.78125C15.5001 4.78125 15.0205 4.97991 14.6669 5.33353L9.33353 10.6669C8.97991 11.0205 8.78125 11.5001 8.78125 12.0002C8.78125 12.5003 8.97991 12.9799 9.33353 13.3335L10.6669 14.6669"
1313
stroke={stroke}
1414
strokeWidth={strokeWidth}
15-
strokeLinecap="round"
16-
strokeLinejoin="round"
15+
stroke-linecap="round"
16+
stroke-linejoin="round"
1717
/>
1818
<path
19-
d="M10.6667 6.66667L9.33333 5.33333C8.97971 4.97971 8.5001 4.78105 8 4.78105C7.4999 4.78105 7.02029 4.97971 6.66667 5.33333L1.33333 10.6667C0.979711 11.0203 0.781049 11.4999 0.781049 12C0.781049 12.5001 0.979711 12.9797 1.33333 13.3333L6.66667 18.6667C7.02029 19.0203 7.4999 19.219 8 19.219C8.5001 19.219 8.97971 19.0203 9.33333 18.6667L14.6667 13.3333C15.0203 12.9797 15.219 12.5001 15.219 12C15.219 11.4999 15.0203 11.0203 14.6667 10.6667L13.3333 9.33333"
19+
d="M10.6669 6.66687L9.33353 5.33353C8.97991 4.97991 8.5003 4.78125 8.0002 4.78125C7.5001 4.78125 7.02049 4.97991 6.66687 5.33353L1.33353 10.6669C0.979912 11.0205 0.78125 11.5001 0.78125 12.0002C0.78125 12.5003 0.979912 12.9799 1.33353 13.3335L6.66687 18.6669C7.02049 19.0205 7.5001 19.2192 8.0002 19.2192C8.5003 19.2192 8.97991 19.0205 9.33353 18.6669L14.6669 13.3335C15.0205 12.9799 15.2192 12.5003 15.2192 12.0002C15.2192 11.5001 15.0205 11.0205 14.6669 10.6669L13.3335 9.33353"
2020
stroke={stroke}
2121
strokeWidth={strokeWidth}
22-
strokeLinecap="round"
23-
strokeLinejoin="round"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
/>
25+
<rect x="14" y="14" width="9.61539" height="10" rx="4.80769" fill="#F8F9FA" />
26+
<path
27+
d="M17.0771 22.4617V17.077C17.0771 16.669 17.2392 16.2777 17.5278 15.9892C17.8163 15.7007 18.2076 15.5386 18.6156 15.5386H18.8079C19.1649 15.5386 19.5073 15.6804 19.7598 15.9329C20.0122 16.1853 20.1541 16.5277 20.1541 16.8847C20.1541 17.2418 20.0122 17.5841 19.7598 17.8366C19.5073 18.0891 19.1649 18.2309 18.8079 18.2309M18.8079 18.2309H18.6156M18.8079 18.2309C19.1502 18.2309 19.4849 18.3324 19.7695 18.5226C20.0541 18.7127 20.2759 18.9831 20.4069 19.2993C20.5379 19.6156 20.5722 19.9636 20.5054 20.2993C20.4386 20.635 20.2738 20.9434 20.0318 21.1855C19.7897 21.4275 19.4813 21.5924 19.1456 21.6592C18.8098 21.7259 18.4618 21.6917 18.1456 21.5607C17.8293 21.4297 17.559 21.2078 17.3688 20.9232C17.1787 20.6386 17.0771 20.304 17.0771 19.9617V19.7693"
28+
stroke="green"
29+
strokeWidth={strokeWidth}
30+
stroke-linecap="round"
31+
stroke-linejoin="round"
2432
/>
2533
</svg>
34+
35+
// <svg ref={ref} height="1.2rem" width="1.2rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
36+
// <path
37+
// d="M13.3333 17.3333L14.6667 18.6667C15.0203 19.0203 15.4999 19.219 16 19.219C16.5001 19.219 16.9797 19.0203 17.3333 18.6667L22.6667 13.3333C23.0203 12.9797 23.219 12.5001 23.219 12C23.219 11.4999 23.0203 11.0203 22.6667 10.6667L17.3333 5.33333C16.9797 4.97971 16.5001 4.78105 16 4.78105C15.4999 4.78105 15.0203 4.97971 14.6667 5.33333L9.33333 10.6667C8.97971 11.0203 8.78105 11.4999 8.78105 12C8.78105 12.5001 8.97971 12.9797 9.33333 13.3333L10.6667 14.6667"
38+
// stroke={stroke}
39+
// strokeWidth={strokeWidth}
40+
// strokeLinecap="round"
41+
// strokeLinejoin="round"
42+
// />
43+
// <path
44+
// d="M10.6667 6.66667L9.33333 5.33333C8.97971 4.97971 8.5001 4.78105 8 4.78105C7.4999 4.78105 7.02029 4.97971 6.66667 5.33333L1.33333 10.6667C0.979711 11.0203 0.781049 11.4999 0.781049 12C0.781049 12.5001 0.979711 12.9797 1.33333 13.3333L6.66667 18.6667C7.02029 19.0203 7.4999 19.219 8 19.219C8.5001 19.219 8.97971 19.0203 9.33333 18.6667L14.6667 13.3333C15.0203 12.9797 15.219 12.5001 15.219 12C15.219 11.4999 15.0203 11.0203 14.6667 10.6667L13.3333 9.33333"
45+
// stroke={stroke}
46+
// strokeWidth={strokeWidth}
47+
// strokeLinecap="round"
48+
// strokeLinejoin="round"
49+
// />
50+
// </svg>
2651
));
2752

2853
CorrelationIcon.displayName = 'CorrelationIcon';

src/pages/Correlation/index.tsx

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback, useEffect, useState } from 'react';
22
import { useDocumentTitle } from '@mantine/hooks';
3-
import { Stack, Box, TextInput, Text, Select, Button, Center, Skeleton, Stepper } from '@mantine/core';
3+
import { Stack, Box, TextInput, Text, Select, Button, Center, Skeleton, Stepper, Pill } from '@mantine/core';
44
import { IconTrashX } from '@tabler/icons-react';
55
import {
66
PRIMARY_HEADER_HEIGHT,
@@ -32,6 +32,8 @@ import SavedCorrelationsButton from './components/SavedCorrelationsBtn';
3232
import SavedCorrelationsModal from './components/SavedCorrelationsModal';
3333
import SaveCorrelationModal from './components/SaveCorrelationModal';
3434
import { useCorrelationFetchCount } from './hooks/useCorrelationFetchCount';
35+
import CorrleationJSONView from './Views/CorrelationJSONView';
36+
import ViewToggle from './components/CorrelationViewToggle';
3537

3638
const { changeStream, syncTimeRange } = appStoreReducers;
3739
const {
@@ -61,6 +63,7 @@ const Correlation = () => {
6163
correlationCondition,
6264
correlationId,
6365
savedCorrelationId,
66+
viewMode,
6467
},
6568
setCorrelationData,
6669
] = useCorrelationStore((store) => store);
@@ -113,6 +116,7 @@ const Correlation = () => {
113116

114117
useEffect(() => {
115118
if (multipleSchemasLoading || !activeCorrelation) return;
119+
setCorrelationData((store) => setSelectedFields(store, '', '', true));
116120

117121
const tableOrder = activeCorrelation?.tableConfigs.reduce((acc, config, index) => {
118122
acc[config.tableName] = index;
@@ -482,6 +486,28 @@ const Correlation = () => {
482486
<MaximizeButton />
483487

484488
<SavedCorrelationsButton />
489+
<ViewToggle />
490+
491+
{isCorrelatedData && (
492+
<Stack style={{ flexDirection: 'row' }} gap={8}>
493+
<Pill
494+
withRemoveButton
495+
onRemove={() => {
496+
setSelect1Value(null);
497+
setSelect2Value(null);
498+
setCorrelationData((store) => setCorrelationCondition(store, ''));
499+
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
500+
setCorrelationData((store) => setCorrelationId(store, ''));
501+
setCorrelationData((store) => setActiveCorrelation(store, null));
502+
setIsCorrelationEnabled(false);
503+
setAppStore(syncTimeRange);
504+
}}>
505+
<Pill>{correlationCondition?.split('=')[0]?.replace(/"/g, '').trim()}</Pill>
506+
<Pill className={classes.childCombinatorPill}>=</Pill>
507+
<Pill>{correlationCondition?.split('=')[1]?.replace(/"/g, '').trim()}</Pill>
508+
</Pill>
509+
</Stack>
510+
)}
485511
</div>
486512
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
487513
<Button
@@ -519,10 +545,18 @@ const Correlation = () => {
519545
</Stack>
520546
{Object.keys(selectedFields).length > 0 && (
521547
<>
522-
<CorrelationTable
523-
{...{ errorMessage, logsLoading: loadingState, streamsLoading, showTable, hasNoData }}
524-
primaryHeaderHeight={primaryHeaderHeight}
525-
/>
548+
{viewMode === 'table' ? (
549+
<>
550+
<CorrelationTable
551+
{...{ errorMessage, logsLoading: loadingState, streamsLoading, showTable, hasNoData }}
552+
primaryHeaderHeight={primaryHeaderHeight}
553+
/>
554+
</>
555+
) : (
556+
<CorrleationJSONView
557+
{...{ errorMessage, logsLoading: loadingState, streamsLoading, showTable, hasNoData }}
558+
/>
559+
)}
526560
<CorrelationFooter loaded={showTable} hasNoData={hasNoData} isFetchingCount={countLoading} />
527561
</>
528562
)}

src/pages/Correlation/providers/CorrelationProvider.tsx

Lines changed: 120 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { QueryType } from '@/pages/Stream/providers/FilterProvider';
77
import { FilterQueryBuilder } from '@/utils/queryBuilder';
88
import { formatQuery } from 'react-querybuilder';
99
import { Correlation } from '@/@types/parseable/api/correlation';
10+
import { isJqSearch, ViewMode } from '@/pages/Stream/providers/LogsProvider';
1011

1112
export const CORRELATION_LOAD_LIMIT = 1000;
1213

@@ -49,6 +50,7 @@ type CorrelationStore = {
4950
activeCorrelation: Correlation | null;
5051
isSavedCorrelationsModalOpen: boolean;
5152
isSaveCorrelationModalOpen: boolean;
53+
viewMode: ViewMode;
5254
tableOpts: {
5355
disabledColumns: string[];
5456
wrapDisabledColumns: string[];
@@ -73,7 +75,7 @@ type CorrelationStore = {
7375
};
7476

7577
type CorrelationStoreReducers = {
76-
setStreamData: (store: CorrelationStore, currentStream: string, data: Log[]) => ReducerOutput;
78+
setStreamData: (store: CorrelationStore, currentStream: string, data: Log[], jqFilteredData?: Log[]) => ReducerOutput;
7779
deleteStreamData: (store: CorrelationStore, currentStream: string) => ReducerOutput;
7880
setSelectedFields: (store: CorrelationStore, field: string, streamName: string, clearAll?: boolean) => ReducerOutput;
7981
deleteSelectedField: (store: CorrelationStore, field: string, streamName: string) => ReducerOutput;
@@ -94,6 +96,10 @@ type CorrelationStoreReducers = {
9496
setTotalCount: (store: CorrelationStore, count: number) => ReducerOutput;
9597
setTargetPage: (store: CorrelationStore, target: number | undefined) => ReducerOutput;
9698
setPerPage: (store: CorrelationStore, perPage: number) => ReducerOutput;
99+
onToggleView: (store: CorrelationStore, viewMode: 'json' | 'table') => ReducerOutput;
100+
// applyJqSearch: (store: CorrelationStore, jqFilteredData: any[]) => ReducerOutput;
101+
// applyInstantSearch: (store: CorrelationStore) => ReducerOutput;
102+
setInstantSearchValue: (store: CorrelationStore, value: string) => ReducerOutput;
97103
};
98104

99105
const initialState: CorrelationStore = {
@@ -109,6 +115,7 @@ const initialState: CorrelationStore = {
109115
activeCorrelation: null,
110116
isSavedCorrelationsModalOpen: false,
111117
isSaveCorrelationModalOpen: false,
118+
viewMode: 'json',
112119
tableOpts: {
113120
disabledColumns: [],
114121
wrapDisabledColumns: [],
@@ -252,8 +259,79 @@ const generatePaginatedPageData = (
252259
.filter(Boolean);
253260
};
254261

262+
const setInstantSearchValue = (store: CorrelationStore, value: string) => {
263+
return { tableOpts: { ...store.tableOpts, instantSearchValue: value } };
264+
};
265+
266+
const searchAndSortData = (opts: { searchValue: string }, data: Log[]) => {
267+
const { searchValue } = opts;
268+
const filteredData = _.isEmpty(searchValue)
269+
? data
270+
: (_.reduce(
271+
data,
272+
(acc: Log[], d: Log) => {
273+
const allValues = _.chain(d)
274+
.entries()
275+
.map(([key, value]) => [key, _.toString(value)])
276+
.value();
277+
278+
const doesMatch = _.some(
279+
allValues,
280+
([key, value]) => key.includes(searchValue) || value.includes(searchValue),
281+
);
282+
283+
return doesMatch ? [...acc, d] : acc;
284+
},
285+
[],
286+
) as Log[]);
287+
const sortedData = _.orderBy(filteredData, [defaultSortKey], [defaultSortOrder]);
288+
return sortedData;
289+
};
290+
255291
// Reducer Functions
256292

293+
// const applyJqSearch = (store: CorrelationStore, jqFilteredData: any[]) => {
294+
// const { data, tableOpts } = store;
295+
// const currentPage = 1;
296+
// const newPageSlice = getPageSlice(currentPage, tableOpts.perPage, jqFilteredData);
297+
298+
// return {
299+
// data: {
300+
// ...data,
301+
// filteredData: jqFilteredData,
302+
// },
303+
// tableOpts: {
304+
// ...tableOpts,
305+
// filters: {},
306+
// pageData: newPageSlice,
307+
// currentPage,
308+
// totalPages: getTotalPages(jqFilteredData, tableOpts.perPage),
309+
// },
310+
// };
311+
// };
312+
313+
// const applyInstantSearch = (store: CorrelationStore) => {
314+
// const { data, tableOpts } = store;
315+
// const { instantSearchValue: searchValue } = tableOpts;
316+
// const filteredData = searchAndSortData({ searchValue }, data.rawData);
317+
// const currentPage = 1;
318+
// const newPageSlice = getPageSlice(currentPage, tableOpts.perPage, filteredData);
319+
320+
// return {
321+
// data: {
322+
// ...data,
323+
// filteredData,
324+
// },
325+
// tableOpts: {
326+
// ...tableOpts,
327+
// filters: {},
328+
// pageData: newPageSlice,
329+
// currentPage,
330+
// totalPages: getTotalPages(filteredData, tableOpts.perPage),
331+
// },
332+
// };
333+
// };
334+
257335
const cleanCorrelationStore = (store: CorrelationStore) => {
258336
return {
259337
...store,
@@ -439,15 +517,27 @@ const deleteSelectedField = (store: CorrelationStore, field: string, streamName:
439517
};
440518
};
441519

442-
const setStreamData = (store: CorrelationStore, currentStream: string, data: Log[]): ReducerOutput => {
520+
const setStreamData = (
521+
store: CorrelationStore,
522+
currentStream: string,
523+
data: Log[],
524+
jqFilteredData?: Log[],
525+
): ReducerOutput => {
443526
if (!currentStream) return { fields: store.fields };
527+
const { tableOpts, viewMode } = store;
528+
const isJsonView = viewMode === 'json';
444529
// Update streamData
445530
const updatedStreamData = {
446531
...store.streamData,
447532
[currentStream]: { logData: data },
448533
};
449534
// Recompute filtered and sliced data for the table
450-
const filteredData = filterAndSortData(store.tableOpts, updatedStreamData[currentStream]?.logData || []);
535+
const filteredData =
536+
isJsonView && !_.isEmpty(tableOpts.instantSearchValue)
537+
? isJqSearch(tableOpts.instantSearchValue)
538+
? jqFilteredData || []
539+
: searchAndSortData({ searchValue: tableOpts.instantSearchValue }, data)
540+
: filterAndSortData(tableOpts, data);
451541
const currentPage = 1;
452542

453543
if (store.isCorrelatedData) {
@@ -478,6 +568,29 @@ const setStreamData = (store: CorrelationStore, currentStream: string, data: Log
478568
};
479569
};
480570

571+
const onToggleView = (store: CorrelationStore, viewMode: 'json' | 'table') => {
572+
const { tableOpts } = store;
573+
// const filteredData = filterAndSortData(
574+
// { sortOrder: defaultSortOrder, sortKey: defaultSortKey, filters: {} },
575+
// streamData,
576+
// );
577+
// const currentPage = tableOpts.currentPage;
578+
// const newPageSlice = getPageSlice(currentPage, tableOpts.perPage, filteredData);
579+
580+
return {
581+
...store,
582+
tableOpts: {
583+
...tableOpts,
584+
filters: {},
585+
// pageData: newPageSlice,
586+
instantSearchValue: '',
587+
// currentPage,
588+
// totalPages: getTotalPages(filteredData, tableOpts.perPage),
589+
},
590+
viewMode,
591+
};
592+
};
593+
481594
const setCorrelationCondition = (store: CorrelationStore, correlationCondition: string) => {
482595
return {
483596
...store,
@@ -634,6 +747,10 @@ const correlationStoreReducers: CorrelationStoreReducers = {
634747
setTotalCount,
635748
setTargetPage,
636749
setPerPage,
750+
onToggleView,
751+
// applyJqSearch,
752+
// applyInstantSearch,
753+
setInstantSearchValue,
637754
};
638755

639756
export { CorrelationProvider, useCorrelationStore, correlationStoreReducers };

src/pages/Correlation/styles/Correlation.module.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,3 +237,25 @@
237237
font-size: 0.65rem;
238238
cursor: pointer;
239239
}
240+
241+
.savedFiltersBtn {
242+
background-color: white;
243+
color: var(--mantine-color-gray-7);
244+
border: 1px #e9ecef solid;
245+
border-radius: rem(8px);
246+
font-size: 0.65rem;
247+
&:hover {
248+
color: black;
249+
}
250+
}
251+
252+
.savedFiltersBtn:hover {
253+
background-color: #e0e0e0;
254+
}
255+
256+
.childCombinatorPill {
257+
color: white;
258+
background: var(--mantine-color-indigo-4);
259+
text-transform: uppercase;
260+
font-weight: 700;
261+
}

src/pages/Stream/styles/JSONView.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
display: flex;
1313
flex-direction: column;
1414
overflow: hidden;
15+
width: 100%;
1516
}
1617

1718
.actionIconContainer {

0 commit comments

Comments
 (0)