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

Commit b6be5e7

Browse files
praveen5959praveen5959
committed
Added badge for correlated data
1 parent d11deb1 commit b6be5e7

File tree

4 files changed

+92
-91
lines changed

4 files changed

+92
-91
lines changed

‎src/pages/Correlation/components/CorrelationFieldItem.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@tabler/icons-react';
99
import { Text, Tooltip } from '@mantine/core';
1010
import classes from '../styles/Correlation.module.css';
11-
import { useRef, useState, useEffect } from 'react';
11+
import { useRef } from 'react';
1212

1313
const dataTypeIcons = (iconColor: string): Record<string, JSX.Element> => ({
1414
text: <IconLetterASmall size={16} style={{ color: iconColor }} />,
@@ -40,13 +40,6 @@ export const CorrelationFieldItem = ({
4040
onDelete,
4141
}: CorrelationFieldItemProps) => {
4242
const textRef = useRef<HTMLDivElement>(null);
43-
const [isOverflowing, setIsOverflowing] = useState(false);
44-
45-
useEffect(() => {
46-
if (textRef.current) {
47-
setIsOverflowing(textRef.current.scrollWidth > textRef.current.clientWidth);
48-
}
49-
}, [fieldName]);
5043

5144
return (
5245
<div
@@ -57,21 +50,16 @@ export const CorrelationFieldItem = ({
5750
opacity: isSelected ? 0.5 : 1,
5851
...(dataType
5952
? { height: '24px', minHeight: '24px' }
60-
: { width: 'fit-content', borderRadius: '12px', height: '100%' }),
53+
: { width: 'fit-content', borderRadius: '12px', height: '15px' }),
6154
}}
6255
className={classes.fieldItem}
6356
onClick={onClick}>
64-
{isOverflowing ? (
65-
<Tooltip label={fieldName} position="top">
66-
<Text size="sm" className={classes.fieldItemText} ref={textRef}>
67-
{fieldName}
68-
</Text>
69-
</Tooltip>
70-
) : (
57+
<Tooltip label={fieldName} position="top">
7158
<Text size="sm" className={classes.fieldItemText} ref={textRef}>
7259
{fieldName}
7360
</Text>
74-
)}
61+
</Tooltip>
62+
7563
{!dataType && <IconX color={iconColor} size={12} onClick={onDelete} />}
7664
{dataType && dataTypeIcons(iconColor)[dataType]}
7765
</div>

‎src/pages/Correlation/components/CorrelationViewToggle.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Button, rem } from '@mantine/core';
22
import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider';
33
import { useCallback } from 'react';
44
import { IconTable } from '@tabler/icons-react';
5-
import classes from '../styles/Correlation.module.css';
5+
import classes from '../styles/SavedCorrelationsBtn.module.css';
66

77
const { onToggleView } = correlationStoreReducers;
88

@@ -19,11 +19,11 @@ const ViewToggle = () => {
1919
const isActive = viewMode === 'table';
2020
return (
2121
<Button
22-
className={classes.savedFiltersBtn}
22+
className={classes.savedCorrelationsBtn}
2323
h="100%"
2424
style={{
2525
backgroundColor: isActive ? '#535BEB' : 'white',
26-
color: isActive ? 'white' : 'black',
26+
color: isActive ? 'white' : '#495057',
2727
}}
2828
onClick={onToggle}
2929
leftSection={<IconTable {...iconProps} />}>

‎src/pages/Correlation/index.tsx‎

Lines changed: 79 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useEffect, useState } from 'react';
22
import { useDocumentTitle } from '@mantine/hooks';
3-
import { Stack, Box, TextInput, Text, Select, Button, Center, Skeleton, Stepper, Pill } from '@mantine/core';
4-
import { IconTrashX } from '@tabler/icons-react';
3+
import { Stack, Box, TextInput, Text, Select, Button, Center, Stepper, Badge } from '@mantine/core';
4+
import { IconTrashX, IconX } from '@tabler/icons-react';
55
import {
66
PRIMARY_HEADER_HEIGHT,
77
STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT,
@@ -266,12 +266,12 @@ const Correlation = () => {
266266
/>
267267
<div className={classes.streamBox}>
268268
{Object.entries(fields).map(([stream, fieldsIter]: [any, any]) => {
269+
if (!fieldsIter) return;
269270
const filteredFields = filterFields(fieldsIter);
270271
const totalStreams = Object.entries(fields).length;
271272
const heightPercentage = totalStreams === 1 ? '50%' : `${100 / totalStreams}%`;
272273

273274
const isLoading = loadingState || schemaLoading || streamsLoading || multipleSchemasLoading;
274-
if (!fieldsIter) return;
275275
return (
276276
<div
277277
key={stream}
@@ -301,13 +301,7 @@ const Correlation = () => {
301301
}}
302302
/>
303303
</div>
304-
{isLoading ? (
305-
<Stack style={{ padding: '0.5rem 0.7rem' }}>
306-
{Array.from({ length: 8 }).map((_, index) => (
307-
<Skeleton key={index} height="24px" />
308-
))}
309-
</Stack>
310-
) : filteredFields.length > 0 ? (
304+
{filteredFields.length > 0 ? (
311305
<div className={classes.fieldsWrapper}>
312306
{filteredFields.map((field: string) => {
313307
const isSelected = selectedFields[stream]?.includes(field);
@@ -322,6 +316,7 @@ const Correlation = () => {
322316
dataType={dataType}
323317
isSelected={isSelected}
324318
onClick={() => {
319+
if (isLoading) return;
325320
if (isCorrelatedData) {
326321
setIsCorrelationEnabled(true);
327322
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
@@ -382,7 +377,7 @@ const Correlation = () => {
382377
className={classes.selectionWrapper}>
383378
<Stack className={classes.topSectionWrapper}>
384379
<Stack>
385-
<div className={classes.fieldsJoinsWrapper} style={{ height: STREAM_PRIMARY_TOOLBAR_HEIGHT }}>
380+
<div className={classes.fieldsJoinsWrapper}>
386381
<Text
387382
style={{
388383
width: '35px',
@@ -469,6 +464,68 @@ const Correlation = () => {
469464
onChange={(value) => handleFieldChange(value, false)}
470465
/>
471466
</div>
467+
<div style={{ height: '100%', width: '20%', display: 'flex' }}>
468+
{isCorrelatedData && (
469+
<Badge
470+
variant="outline"
471+
color="#535BED"
472+
h={'100%'}
473+
size="lg"
474+
styles={{
475+
root: {
476+
textTransform: 'none',
477+
},
478+
}}
479+
rightSection={
480+
<IconX
481+
style={{ cursor: 'pointer' }}
482+
size={12}
483+
color="#535BED"
484+
onClick={() => {
485+
setSelect1Value(null);
486+
setSelect2Value(null);
487+
setCorrelationData((store) => setCorrelationCondition(store, ''));
488+
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
489+
setCorrelationData((store) => setCorrelationId(store, ''));
490+
setCorrelationData((store) => setActiveCorrelation(store, null));
491+
setIsCorrelationEnabled(false);
492+
setAppStore(syncTimeRange);
493+
}}
494+
/>
495+
}>
496+
Join Applied
497+
</Badge>
498+
)}
499+
</div>
500+
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
501+
<Button
502+
className={classes.correlateBtn}
503+
variant="outline"
504+
disabled={!isCorrelatedData}
505+
onClick={(e) => {
506+
openSaveCorrelationModal(e);
507+
}}>
508+
Save
509+
</Button>
510+
<Button
511+
className={classes.correlateBtn}
512+
disabled={!isCorrelationEnabled || Object.keys(selectedFields).length === 0}
513+
variant="filled"
514+
onClick={() => {
515+
setCorrelationData((store) => setIsCorrelatedFlag(store, true));
516+
setIsCorrelationEnabled(false);
517+
refetchCount();
518+
getCorrelationData();
519+
}}>
520+
Correlate
521+
</Button>
522+
<Button
523+
className={classes.clearBtn}
524+
onClick={clearQuery}
525+
disabled={streamNames.length == 0 || Object.keys(selectedFields).length === 0}>
526+
Clear
527+
</Button>
528+
</div>
472529
</div>
473530
</div>
474531
</Stack>
@@ -481,64 +538,17 @@ const Correlation = () => {
481538
}}>
482539
{/* <CorrelationFilters /> */}
483540
<div className={classes.logTableControlWrapper}>
484-
<TimeRange />
485-
<RefreshInterval />
486-
<RefreshNow />
487-
<ShareButton />
488-
<MaximizeButton />
489-
490-
<SavedCorrelationsButton />
491-
<ViewToggle />
492-
493-
{correlationCondition && (
494-
<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
495-
<Pill
496-
withRemoveButton
497-
onRemove={() => {
498-
setSelect1Value(null);
499-
setSelect2Value(null);
500-
setCorrelationData((store) => setCorrelationCondition(store, ''));
501-
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
502-
setCorrelationData((store) => setCorrelationId(store, ''));
503-
setCorrelationData((store) => setActiveCorrelation(store, null));
504-
setIsCorrelationEnabled(false);
505-
setAppStore(syncTimeRange);
506-
}}>
507-
<Pill>{correlationCondition?.split('=')[0]?.replace(/"/g, '').trim()}</Pill>
508-
<Pill className={classes.childCombinatorPill}>=</Pill>
509-
<Pill>{correlationCondition?.split('=')[1]?.replace(/"/g, '').trim()}</Pill>
510-
</Pill>
511-
</Stack>
512-
)}
513-
</div>
514-
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
515-
<Button
516-
className={classes.correlateBtn}
517-
variant="outline"
518-
disabled={!isCorrelatedData}
519-
onClick={(e) => {
520-
openSaveCorrelationModal(e);
521-
}}>
522-
Save
523-
</Button>
524-
<Button
525-
className={classes.correlateBtn}
526-
disabled={!isCorrelationEnabled || Object.keys(selectedFields).length === 0}
527-
variant="filled"
528-
onClick={() => {
529-
setCorrelationData((store) => setIsCorrelatedFlag(store, true));
530-
setIsCorrelationEnabled(false);
531-
refetchCount();
532-
getCorrelationData();
533-
}}>
534-
Correlate
535-
</Button>
536-
<Button
537-
className={classes.clearBtn}
538-
onClick={clearQuery}
539-
disabled={streamNames.length == 0 || Object.keys(selectedFields).length === 0}>
540-
Clear
541-
</Button>
541+
<div style={{ display: 'flex', gap: '10px' }}>
542+
<SavedCorrelationsButton />
543+
<TimeRange />
544+
<RefreshInterval />
545+
<RefreshNow />
546+
</div>
547+
<div style={{ display: 'flex', gap: '10px' }}>
548+
<ViewToggle />
549+
<ShareButton />
550+
<MaximizeButton />
551+
</div>
542552
</div>
543553
</div>
544554
</Stack>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,12 +157,13 @@
157157

158158
.fieldsPillsWrapper {
159159
width: 100%;
160-
height: 100%;
160+
height: auto;
161161
border-radius: rem(8px);
162162
display: flex;
163163
gap: 10px;
164-
padding: 5px 8px;
164+
padding: 5px;
165165
align-items: center;
166+
flex-wrap: wrap;
166167
}
167168

168169
.joinsWrapper {
@@ -181,6 +182,8 @@
181182
padding: 5px;
182183
height: 100%;
183184
margin-left: 44px;
185+
width: 100%;
186+
justify-content: space-between;
184187
}
185188

186189
.clearBtn {

0 commit comments

Comments
 (0)