Skip to content

Commit f172f66

Browse files
praveen5959praveen5959
committed
Added the new UpdateStreamInfo file
1 parent 8410f3a commit f172f66

File tree

1 file changed

+120
-42
lines changed

1 file changed

+120
-42
lines changed

‎src/pages/Stream/Views/Manage/UpdateStreamInfo.tsx

+120-42
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1-
import _ from 'lodash';
1+
import { Box, Group, Loader, Stack, TagsInput, Tooltip, Text, TextInput } from '@mantine/core';
2+
import classes from '../../styles/Management.module.css';
3+
import { IconCheck, IconX, IconEdit } from '@tabler/icons-react';
24
import { useStreamStore } from '../../providers/StreamProvider';
3-
import { ChangeEvent, useCallback, useState, useEffect } from 'react';
5+
import _ from 'lodash';
6+
import { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
47
import { useLogStream } from '@/hooks/useLogStream';
58
import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
6-
import { Box, Loader, Stack, TextInput, Tooltip, Text, Group } from '@mantine/core';
7-
import { IconCheck, IconX, IconEdit } from '@tabler/icons-react';
8-
import classes from '../../styles/Management.module.css';
99

10-
const UpdateFieldButtons = (props: { onClose: () => void; onUpdateClick: () => void; isUpdating: boolean }) => {
10+
interface UpdateFieldButtonsProps {
11+
onClose: () => void;
12+
onUpdateClick: () => void;
13+
isUpdating: boolean;
14+
}
15+
16+
interface PartitionLimitProps {
17+
timePartition: string;
18+
currentStream: string;
19+
}
20+
21+
type PartitionValue = string[] | number | undefined;
22+
23+
const UpdateFieldButtons: FC<UpdateFieldButtonsProps> = ({ onClose, onUpdateClick, isUpdating }) => {
1124
return (
1225
<Box>
13-
{!props.isUpdating ? (
26+
{!isUpdating ? (
1427
<Stack gap={4} style={{ display: 'flex', flexDirection: 'row' }}>
1528
<Tooltip label="Update" withArrow position="top">
16-
<IconCheck className={classes.infoEditBtn} onClick={() => props.onUpdateClick()} stroke={1.6} size={16} />
29+
<IconCheck className={classes.infoEditBtn} onClick={() => onUpdateClick()} stroke={1.6} size={16} />
1730
</Tooltip>
1831

1932
<Tooltip label="Close" withArrow position="top">
20-
<IconX className={classes.infoEditBtn} stroke={1.6} size={16} onClick={() => props.onClose()} />
33+
<IconX className={classes.infoEditBtn} stroke={1.6} size={16} onClick={() => onClose()} />
2134
</Tooltip>
2235
</Stack>
2336
) : (
@@ -27,27 +40,55 @@ const UpdateFieldButtons = (props: { onClose: () => void; onUpdateClick: () => v
2740
);
2841
};
2942

30-
function UpdateStreamInfo(props: { timePartition: string; currentStream: string }) {
43+
const UpdateStreamInfo: FC<PartitionLimitProps> = ({ timePartition, currentStream }) => {
3144
const [info] = useStreamStore((store) => store.info);
32-
const timePartitonLimit = _.get(info, 'time_partition_limit');
33-
const [value, setValue] = useState<number | undefined>(timePartitonLimit);
34-
const [updating, setUpdating] = useState<boolean>(false);
45+
const [partitionFields] = useStreamStore((store) => store.fieldNames);
46+
47+
const isStaticSchema = _.get(info, 'static_schema_flag', false);
48+
const initialPartitionValue = isStaticSchema
49+
? _.get(info, 'custom_partition', '-').split(',')
50+
: _.get(info, 'time_partition_limit');
51+
52+
const [value, setValue] = useState<PartitionValue>(initialPartitionValue);
53+
const [updating, setUpdating] = useState(false);
3554
const [error, setError] = useState<string | null>(null);
36-
const [showEditField, setShowEditField] = useState<boolean>(false);
55+
const [showEditField, setShowEditField] = useState(false);
56+
3757
const { updateLogStreamMutation } = useLogStream();
38-
const { getStreamInfoRefetch } = useGetStreamInfo(props.currentStream, props.currentStream !== null);
58+
const { getStreamInfoRefetch } = useGetStreamInfo(currentStream, currentStream !== null);
3959

4060
useEffect(() => {
41-
setValue(timePartitonLimit);
42-
}, [props.currentStream, info]);
61+
setValue(initialPartitionValue);
62+
}, [currentStream, info, initialPartitionValue]);
63+
64+
const handleCustomPartitionChange = useCallback(
65+
(value: string[]) => {
66+
setValue(value);
67+
68+
if (isStaticSchema) {
69+
value?.forEach((el) => {
70+
if (!partitionFields.includes(el)) {
71+
setError('Unknown Field Included');
72+
} else {
73+
setError(null);
74+
}
75+
});
76+
}
77+
if (Array.isArray(value) && value.length === 0) {
78+
setError(null);
79+
}
80+
},
81+
[setValue],
82+
);
4383

44-
const onChange = useCallback(
84+
const handleTimePartitionChange = useCallback(
4585
(e: ChangeEvent<HTMLInputElement>) => {
4686
const inputTime = e.target.value;
4787
const numberRegex = /^\d*$/;
4888
if (numberRegex.test(inputTime)) {
49-
if (parseInt(inputTime) > 0) {
50-
setValue(parseInt(inputTime));
89+
const parsedValue = parseInt(inputTime);
90+
if (parsedValue > 0) {
91+
setValue(parsedValue);
5192
setError(null);
5293
} else {
5394
setValue(0);
@@ -66,35 +107,52 @@ function UpdateStreamInfo(props: { timePartition: string; currentStream: string
66107
}, [getStreamInfoRefetch]);
67108

68109
const updateLogStream = useCallback(
69-
(updatedValue: number) => {
110+
(updatedValue: string | number) => {
70111
updateLogStreamMutation({
71-
streamName: props.currentStream,
72-
header: { 'x-p-time-partition-limit': `${updatedValue}d` },
112+
streamName: currentStream,
113+
header: isStaticSchema
114+
? { 'x-p-custom-partition': String(updatedValue) }
115+
: { 'x-p-time-partition-limit': `${updatedValue}d` },
73116
onSuccess: updateLogStreamSuccess,
74117
onError: () => setUpdating(false),
75118
});
76119
},
77-
[updateLogStreamMutation, props.currentStream],
120+
[updateLogStreamMutation, currentStream, isStaticSchema],
78121
);
79122

80-
const updateTimePartitionLimit = useCallback(() => {
81-
if (value === undefined) return;
82-
if (error !== null) return;
83-
84-
setUpdating(true);
85-
updateLogStream(value);
123+
const updatePartitionLimit = useCallback(() => {
124+
if (error) return;
125+
if (isStaticSchema) {
126+
if (!Array.isArray(value) || value.length === 0) return;
127+
setUpdating(true);
128+
updateLogStream(value.join(','));
129+
} else {
130+
if (typeof value !== 'number') return;
131+
setUpdating(true);
132+
updateLogStream(value);
133+
}
86134
}, [value, updateLogStream]);
87135

88136
return (
89-
<Stack style={{ height: '3.5rem', width: '33%' }} gap={6}>
137+
<Stack style={{ height: '3.5rem', width: isStaticSchema ? '30rem' : '33%' }} gap={6}>
90138
<Group>
91139
<Text
92140
className={classes.fieldDescription}
93141
style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
94-
Max Historical Difference
142+
{isStaticSchema ? 'Custom Partition Field' : 'Max Historical Difference'}
95143
</Text>
96144

97-
{props.timePartition !== '-' && (
145+
{timePartition !== '-' && !isStaticSchema && (
146+
<Tooltip label="Edit" withArrow position="top">
147+
<IconEdit
148+
className={classes.infoEditBtn}
149+
stroke={1.6}
150+
size={12}
151+
onClick={() => setShowEditField((prev) => !prev)}
152+
/>
153+
</Tooltip>
154+
)}
155+
{isStaticSchema && !showEditField && (
98156
<Tooltip label="Edit" withArrow position="top">
99157
<IconEdit
100158
className={classes.infoEditBtn}
@@ -105,16 +163,30 @@ function UpdateStreamInfo(props: { timePartition: string; currentStream: string
105163
</Tooltip>
106164
)}
107165
</Group>
166+
108167
{showEditField ? (
109168
<Group style={{ flexDirection: 'row', alignItems: 'baseline' }} gap={6}>
110-
<TextInput
111-
placeholder="Max Historical Difference"
112-
value={value}
113-
onChange={(e) => onChange(e)}
114-
error={error}
115-
/>
169+
{isStaticSchema ? (
170+
<TagsInput
171+
w={'30rem'}
172+
placeholder="Select column from the list"
173+
data={partitionFields}
174+
onChange={handleCustomPartitionChange}
175+
maxTags={3}
176+
value={Array.isArray(value) ? value : []}
177+
error={error}
178+
/>
179+
) : (
180+
<TextInput
181+
placeholder="Max Historical Difference"
182+
value={typeof value === 'number' ? value.toString() : ''}
183+
onChange={handleTimePartitionChange}
184+
error={error}
185+
/>
186+
)}
187+
116188
<UpdateFieldButtons
117-
onUpdateClick={updateTimePartitionLimit}
189+
onUpdateClick={updatePartitionLimit}
118190
onClose={() => setShowEditField(false)}
119191
isUpdating={updating}
120192
/>
@@ -128,11 +200,17 @@ function UpdateStreamInfo(props: { timePartition: string; currentStream: string
128200
overflow: 'hidden',
129201
fontWeight: 400,
130202
}}>
131-
{timePartitonLimit !== undefined ? `${timePartitonLimit} day(s)` : '-'}
203+
{isStaticSchema
204+
? Array.isArray(value)
205+
? value.join(',')
206+
: '-'
207+
: typeof value === 'number'
208+
? `${value} day(s)`
209+
: '-'}
132210
</Text>
133211
)}
134212
</Stack>
135213
);
136-
}
214+
};
137215

138216
export default UpdateStreamInfo;

0 commit comments

Comments
 (0)