fix(UI): Allow empty input values in settings retention page. (#459)

This commit is contained in:
Aryan Shridhar 2021-12-10 13:27:07 +05:30 committed by GitHub
parent b27e30db58
commit fc7a0a8354
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions

View File

@ -56,17 +56,18 @@ const Retention = ({
const onChangeHandler = (
e: React.ChangeEvent<HTMLInputElement>,
func: React.Dispatch<React.SetStateAction<number>>,
func: React.Dispatch<React.SetStateAction<string>>,
): void => {
const value = e.target.value;
const integerValue = parseInt(value, 10);
if (value.length > 0) {
const parsedValue = Math.abs(parseInt(value, 10));
if (value.length > 0 && integerValue.toString() === value) {
const parsedValue = Math.abs(integerValue).toString();
func(parsedValue);
}
if (value.length === 0) {
func(0);
func('');
}
};
@ -96,9 +97,9 @@ interface Option {
}
interface RetentionProps {
retentionValue: number;
retentionValue: string;
text: string;
setRentionValue: React.Dispatch<React.SetStateAction<number>>;
setRentionValue: React.Dispatch<React.SetStateAction<string>>;
selectedRetentionPeroid: SettingPeroid;
setSelectedRetentionPeroid: React.Dispatch<
React.SetStateAction<SettingPeroid>

View File

@ -23,8 +23,8 @@ const GeneralSettings = (): JSX.Element => {
] = useState<SettingPeroid>('month');
const [notifications, Element] = notification.useNotification();
const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<number>(
0,
const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<string>(
'',
);
const [modal, setModal] = useState<boolean>(false);
const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
@ -33,7 +33,7 @@ const GeneralSettings = (): JSX.Element => {
'hr',
);
const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<number>(0);
const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<string>('');
const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
@ -73,10 +73,10 @@ const GeneralSettings = (): JSX.Element => {
const traceValue = getSettingsPeroid(traces_ttl_duration_hrs);
const metricsValue = getSettingsPeroid(metrics_ttl_duration_hrs);
setRetentionPeroidTrace(traceValue.value);
setRetentionPeroidTrace(traceValue.value.toString());
setSelectedTracePeroid(traceValue.peroid);
setRetentionPeroidMetrics(metricsValue.value);
setRetentionPeroidMetrics(metricsValue.value.toString());
setSelectedMetricsPeroid(metricsValue.peroid);
}
}, [setSelectedMetricsPeroid, loading, payload]);
@ -85,14 +85,15 @@ const GeneralSettings = (): JSX.Element => {
try {
setPostApiLoading(true);
const retentionTraceValue =
retentionPeroidTrace === 0 && (payload?.traces_ttl_duration_hrs || 0) < 0
retentionPeroidTrace === '0' && (payload?.traces_ttl_duration_hrs || 0) < 0
? payload?.traces_ttl_duration_hrs || 0
: retentionPeroidTrace;
: parseInt(retentionPeroidTrace, 10);
const retentionMetricsValue =
retentionPeroidMetrics === 0 && (payload?.metrics_ttl_duration_hrs || 0) < 0
retentionPeroidMetrics === '0' &&
(payload?.metrics_ttl_duration_hrs || 0) < 0
? payload?.metrics_ttl_duration_hrs || 0
: retentionPeroidMetrics;
: parseInt(retentionPeroidMetrics, 10);
const [tracesResponse, metricsResponse] = await Promise.all([
setRetentionApi({
@ -167,6 +168,14 @@ const GeneralSettings = (): JSX.Element => {
return `${getValue('Trace , Metrics')}`;
};
const isDisabledHandler = (): boolean => {
if (retentionPeroidTrace === '' || retentionPeroidMetrics === '') {
return true;
}
return false;
};
const errorText = getErrorText();
return (
@ -213,7 +222,11 @@ const GeneralSettings = (): JSX.Element => {
</Modal>
<ButtonContainer>
<Button onClick={onClickSaveHandler} type="primary">
<Button
onClick={onClickSaveHandler}
disabled={isDisabledHandler()}
type="primary"
>
Save
</Button>
</ButtonContainer>