Skip to content

Commit

Permalink
Added stepper for placeholder
Browse files Browse the repository at this point in the history
  • Loading branch information
praveen5959 committed Dec 20, 2024
1 parent 5c98cb1 commit 751ae35
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 45 deletions.
53 changes: 27 additions & 26 deletions src/components/Navbar/components/CorrelationIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
import { FC } from 'react';
import { forwardRef } from 'react';

export const CorrelationIcon: FC<{
stroke?: string;
strokeWidth?: number;
height?: string;
width?: string;
}> = ({ stroke, strokeWidth, height, width }) => {
return (
<svg height={height} width={width} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
stroke={stroke}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
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"
stroke={stroke}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export const CorrelationIcon = forwardRef<

Check failure on line 3 in src/components/Navbar/components/CorrelationIcon.tsx

View workflow job for this annotation

GitHub Actions / prettier

Component definition is missing display name
SVGSVGElement,
{
stroke?: string;
strokeWidth?: number;
height?: string;
width?: string;
}
>(({ stroke, strokeWidth, height, width }, ref) => (
<svg ref={ref} height={height} width={width} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
stroke={stroke}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
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"
stroke={stroke}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
));
56 changes: 43 additions & 13 deletions src/pages/Correlation/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import _ from 'lodash';
import { useDocumentTitle } from '@mantine/hooks';
import { Stack, Box, TextInput, Text, Select, Button, Center, Skeleton } from '@mantine/core';
import { Stack, Box, TextInput, Text, Select, Button, Center, Skeleton, Stepper } from '@mantine/core';
import {
PRIMARY_HEADER_HEIGHT,
STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT,
Expand Down Expand Up @@ -316,6 +316,11 @@ const Correlation = () => {
backgroundColor: streamNames.length > 0 ? 'white' : '#F7F8F9',
}}
className={classes.fieldsPillsWrapper}>
{Object.keys(selectedFields).length < 1 && (
<Text c={'#ACB5BD'} size="sm">
Click on fields to correlate
</Text>
)}
{Object.entries(selectedFields).map(([streamName, fieldsMap]: [any, any]) =>
fieldsMap.map((field: any, index: any) => (
<FieldItem
Expand Down Expand Up @@ -343,6 +348,9 @@ const Correlation = () => {
<div className={classes.joinsWrapper}>
<div style={{ width: '50%' }}>
<Select
styles={{
input: { height: 26 },
}}
disabled={streamNames.length === 0}
placeholder={streamNames[0] ? `Select field from ${streamNames[0]}` : 'Select Stream 1'}
style={{ height: '100%' }}
Expand All @@ -361,6 +369,9 @@ const Correlation = () => {
<Text size="md"> = </Text>
<div style={{ width: '50%' }}>
<Select
styles={{
input: { height: 26 },
}}
disabled={streamNames.length < 2}
placeholder={streamNames[1] ? `Select field from ${streamNames[1]}` : 'Select Stream 2'}
radius="md"
Expand All @@ -376,13 +387,6 @@ const Correlation = () => {
/>
</div>
</div>
<Button
className={classes.correlateBtn}
h="100%"
disabled={!select1Value || !select2Value || Object.keys(selectedFields).length < 1}
onClick={() => getCorrelationData()}>
Correlate
</Button>
</div>
</Stack>
<div
Expand All @@ -391,7 +395,6 @@ const Correlation = () => {
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
paddingRight: '10px',
}}>
{/* <CorrelationFilters /> */}
<div className={classes.logTableControlWrapper}>
Expand All @@ -401,9 +404,17 @@ const Correlation = () => {
<ShareButton />
<MaximizeButton />
</div>
<Button className={classes.clearBtn} onClick={clearQuery} disabled={streamNames.length == 0}>
Clear
</Button>
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
<Button
className={classes.correlateBtn}
disabled={!select1Value || !select2Value || Object.keys(selectedFields).length < 1}
onClick={() => getCorrelationData()}>
Correlate
</Button>
<Button className={classes.clearBtn} onClick={clearQuery} disabled={streamNames.length == 0}>
Clear
</Button>
</div>
</div>
</Stack>
<Stack className={classes.logsSecondaryToolbar} style={{ height: STREAM_SECONDARY_TOOLBAR_HRIGHT }}>
Expand All @@ -421,7 +432,26 @@ const Correlation = () => {
{Object.keys(selectedFields).length === 0 && (
<Center className={classes.container}>
<CorrelationEmptyPlaceholder height={200} width={200} />
<Text className={classes.addStreamPlaceholder}>Create Correlation to view data</Text>
<Stepper
styles={{
stepBody: {
marginTop: '5%',
color: 'var(--mantine-color-gray-6)',
},
stepCompletedIcon: {
color: '#535BED',
},
stepIcon: {
color: 'var(--mantine-color-gray-6)',
},
}}
color="gray"
active={streamNames.length}
orientation="vertical">
<Stepper.Step label="Select first stream" />
<Stepper.Step label="Select second stream" />
<Stepper.Step label="Click on fields to correlate" />
</Stepper>
</Center>
)}
</Stack>
Expand Down
12 changes: 6 additions & 6 deletions src/pages/Correlation/styles/Correlation.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
.streamBox {
display: flex;
flex-direction: column;
gap: 14px;
gap: 10px;
height: calc(100vh - 150px);
}

Expand Down Expand Up @@ -154,16 +154,17 @@
.fieldsPillsWrapper {
width: 100%;
height: 100%;
border-radius: calc(0.5rem * var(--mantine-scale));
border-radius: rem(8px);
display: flex;
gap: 10px;
padding: 5px 10px;
padding: 5px 8px;
align-items: center;
}

.joinsWrapper {
width: 100%;
height: 100%;
border-radius: calc(0.5rem * var(--mantine-scale));
border-radius: rem(8px);
display: flex;
gap: 10px;
align-items: center;
Expand All @@ -185,7 +186,7 @@

&:hover {
background-color: #545beb;
border-radius: 10px;
border-radius: rem(8px);
}
}

Expand Down Expand Up @@ -226,7 +227,6 @@
border-radius: rem(8px);
font-size: 0.65rem;
cursor: pointer;
width: 8%;
&:hover {
color: black;
}
Expand Down

0 comments on commit 751ae35

Please sign in to comment.