feat: ttl api integration

This commit is contained in:
Pranshu Chittora 2022-04-04 15:06:06 +05:30
parent 20e924b116
commit 8064ae1f37
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
5 changed files with 98 additions and 120 deletions

View File

@ -8,9 +8,9 @@ const setRetention = async (
props: Props, props: Props,
): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => { ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
try { try {
const response = await axios.post<PayloadProps>( const response = await axios.post<PayloadProps>(`/settings/ttl`, {
`/settings/ttl?duration=${props.duration}&type=${props.type}`, props,
); });
return { return {
statusCode: 200, statusCode: 200,

View File

@ -17,6 +17,7 @@ function Retention({
retentionValue, retentionValue,
setRetentionValue, setRetentionValue,
text, text,
hide,
}: RetentionProps): JSX.Element { }: RetentionProps): JSX.Element {
const { const {
value: initialValue, value: initialValue,
@ -64,7 +65,9 @@ function Retention({
func(null); func(null);
} }
}; };
if (hide) {
return null;
}
return ( return (
<RetentionContainer> <RetentionContainer>
<Row justify="space-between"> <Row justify="space-between">
@ -103,6 +106,7 @@ interface RetentionProps {
retentionValue: number; retentionValue: number;
text: string; text: string;
setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>; setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>;
hide: boolean;
} }
export default Retention; export default Retention;

View File

@ -1,13 +1,15 @@
import { Button, Col, Modal, notification, Row, Typography } from 'antd'; import { Button, Col, Modal, notification, Row, Typography } from 'antd';
import getDisks from 'api/disks/getDisks'; import getDisks from 'api/disks/getDisks';
import getRetentionperoidApi from 'api/settings/getRetention'; import getRetentionPeriodApi from 'api/settings/getRetention';
import setRetentionApi from 'api/settings/setRetention'; import setRetentionApi from 'api/settings/setRetention';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import TextToolTip from 'components/TextToolTip'; import TextToolTip from 'components/TextToolTip';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import convertIntoHr from 'lib/convertIntoHr'; import convertIntoHr from 'lib/convertIntoHr';
import getSettingsPeroid from 'lib/getSettingsPeroid'; import getSettingsPeroid from 'lib/getSettingsPeroid';
import React, { useCallback, useEffect, useState } from 'react'; import { find } from 'lodash-es';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { IDiskType } from 'types/api/disks/getDisks';
import { PayloadProps } from 'types/api/settings/getRetention'; import { PayloadProps } from 'types/api/settings/getRetention';
import Retention from './Retention'; import Retention from './Retention';
@ -24,43 +26,36 @@ function GeneralSettings(): JSX.Element {
setSelectedMetricsPeroid, setSelectedMetricsPeroid,
] = useState<SettingPeriod>('month'); ] = useState<SettingPeriod>('month');
const [notifications, Element] = notification.useNotification(); const [notifications, Element] = notification.useNotification();
const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<string>(
'',
);
const [modal, setModal] = useState<boolean>(false); const [modal, setModal] = useState<boolean>(false);
const [postApiLoading, setPostApiLoading] = useState<boolean>(false); const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
const [selectedTracePeroid, setSelectedTracePeroid] = useState<SettingPeriod>(
'hr',
);
const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<string>('');
const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false); const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false); const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
const [availableDisks, setAvailableDisks] = useState(null); const [availableDisks, setAvailableDisks] = useState<IDiskType | null>(null);
useEffect(() => { useEffect(() => {
getDisks().then((resp) => console.log({ disks: resp })) getDisks().then((response) => setAvailableDisks(response));
}, []) }, []);
const currentTTLValues = {
metrics_ttl_duration_hrs: 24 * 30 * 10, const { payload: currentTTLValues, loading, error, errorMessage } = useFetch<
metrics_move_ttl_duration_hrs: -1, PayloadProps,
traces_ttl_duration_hrs: -1, undefined
traces_move_ttl_duration_hrs: -1, >(getRetentionPeriodApi, undefined);
};
const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState< const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState<
number | null number | null
>(currentTTLValues.metrics_ttl_duration_hrs); >(currentTTLValues?.metrics_ttl_duration_hrs);
const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState< const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState<
number | null number | null
>(currentTTLValues.metrics_move_ttl_duration_hrs); >(currentTTLValues?.metrics_move_ttl_duration_hrs);
const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState< const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState<
number | null number | null
>(currentTTLValues.traces_ttl_duration_hrs); >(currentTTLValues?.traces_ttl_duration_hrs);
const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState< const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState<
number | null number | null
>(currentTTLValues.traces_move_ttl_duration_hrs); >(currentTTLValues?.traces_move_ttl_duration_hrs);
const onModalToggleHandler = (): void => { const onModalToggleHandler = (): void => {
setModal((modal) => !modal); setModal((modal) => !modal);
@ -70,11 +65,6 @@ function GeneralSettings(): JSX.Element {
onModalToggleHandler(); onModalToggleHandler();
}, []); }, []);
const { payload, loading, error, errorMessage } = useFetch<
PayloadProps,
undefined
>(getRetentionperoidApi, undefined);
const checkMetricTraceDefault = (trace: number, metric: number): void => { const checkMetricTraceDefault = (trace: number, metric: number): void => {
if (metric === -1) { if (metric === -1) {
setIsDefaultMetrics(true); setIsDefaultMetrics(true);
@ -89,99 +79,78 @@ function GeneralSettings(): JSX.Element {
} }
}; };
// const retentionRenderConfig = () => { }; // const retentionRenderConfig = () => { };
const renderConfig = [ const renderConfig = useMemo(() => {
{ const s3Enabled = !!find(
name: 'Metrics', availableDisks,
retentionFields: [ (disks: IDiskType) => disks?.type === 's3',
{ );
name: 'Total Retention Period', return [
value: metricsTotalRetentionPeriod, {
setValue: setMetricsTotalRetentionPeriod, name: 'Metrics',
}, retentionFields: [
{ {
name: `Move to S3\n(should be lower than total retention period)`, name: 'Total Retention Period',
value: metricsS3RetentionPeriod, value: metricsTotalRetentionPeriod,
setValue: setMetricsS3RetentionPeriod, setValue: setMetricsTotalRetentionPeriod,
}, },
], {
}, name: `Move to S3\n(should be lower than total retention period)`,
{ value: metricsS3RetentionPeriod,
name: 'Traces', setValue: setMetricsS3RetentionPeriod,
retentionFields: [ hide: !s3Enabled,
{ },
name: 'Total Retention Period', ],
value: tracesTotalRetentionPeriod, },
setValue: setTracesTotalRetentionPeriod, {
}, name: 'Traces',
{ retentionFields: [
name: `Move to S3\n(should be lower than total retention period)`, {
value: tracesS3RetentionPeriod, name: 'Total Retention Period',
setValue: setTracesS3RetentionPeriod, value: tracesTotalRetentionPeriod,
}, setValue: setTracesTotalRetentionPeriod,
], },
}, {
]; name: `Move to S3\n(should be lower than total retention period)`,
value: tracesS3RetentionPeriod,
useEffect(() => { setValue: setTracesS3RetentionPeriod,
if (!loading && payload !== undefined) { hide: !s3Enabled,
const { },
metrics_ttl_duration_hrs: metricTllDuration, ],
traces_ttl_duration_hrs: traceTllDuration, },
} = payload; ];
}, [
checkMetricTraceDefault(traceTllDuration, metricTllDuration); availableDisks,
metricsS3RetentionPeriod,
const traceValue = getSettingsPeroid(traceTllDuration); metricsTotalRetentionPeriod,
const metricsValue = getSettingsPeroid(metricTllDuration); tracesS3RetentionPeriod,
tracesTotalRetentionPeriod,
setRetentionPeroidTrace(traceValue.value.toString()); ]);
setSelectedTracePeroid(traceValue.peroid);
setRetentionPeroidMetrics(metricsValue.value.toString());
setSelectedMetricsPeroid(metricsValue.peroid);
}
}, [setSelectedMetricsPeroid, loading, payload]);
const onOkHandler = async (): Promise<void> => { const onOkHandler = async (): Promise<void> => {
try { try {
setPostApiLoading(true); setPostApiLoading(true);
const retentionTraceValue = // 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 // ? payload?.traces_ttl_duration_hrs || 0
: parseInt(retentionPeroidTrace, 10); // : parseInt(retentionPeroidTrace, 10);
// const retentionMetricsValue =
const retentionMetricsValue = // retentionPeroidMetrics === '0' &&
retentionPeroidMetrics === '0' && // (payload?.metrics_ttl_duration_hrs || 0) < 0
(payload?.metrics_ttl_duration_hrs || 0) < 0 // ? payload?.metrics_ttl_duration_hrs || 0
? payload?.metrics_ttl_duration_hrs || 0 // : parseInt(retentionPeroidMetrics, 10);
: parseInt(retentionPeroidMetrics, 10); const apiResponse = await setRetentionApi({
metrics_ttl_duration_hrs: metricsTotalRetentionPeriod || -1,
const [tracesResponse, metricsResponse] = await Promise.all([ metrics_move_ttl_duration_hrs: metricsS3RetentionPeriod || -1,
setRetentionApi({ traces_move_ttl_duration_hrs: tracesS3RetentionPeriod || -1,
duration: `${convertIntoHr(retentionTraceValue, selectedTracePeroid)}h`, traces_ttl_duration_hrs: tracesTotalRetentionPeriod || -1,
type: 'traces', });
}), if (apiResponse.statusCode === 200) {
setRetentionApi({
duration: `${convertIntoHr(
retentionMetricsValue,
selectedMetricsPeroid,
)}h`,
type: 'metrics',
}),
]);
if (
tracesResponse.statusCode === 200 &&
metricsResponse.statusCode === 200
) {
notifications.success({ notifications.success({
message: 'Success!', message: 'Success!',
placement: 'topRight', placement: 'topRight',
description: 'Congrats. The retention periods were updated correctly.', description: 'Congrats. The retention periods were updated correctly.',
}); });
// checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue);
checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue);
onModalToggleHandler(); onModalToggleHandler();
} else { } else {
notifications.error({ notifications.error({
@ -206,7 +175,7 @@ function GeneralSettings(): JSX.Element {
return <Typography>{errorMessage}</Typography>; return <Typography>{errorMessage}</Typography>;
} }
if (loading || payload === undefined) { if (loading || currentTTLValues === undefined) {
return <Spinner tip="Loading.." height="70vh" />; return <Spinner tip="Loading.." height="70vh" />;
} }
@ -230,7 +199,7 @@ function GeneralSettings(): JSX.Element {
}; };
const isDisabledHandler = (): boolean => { const isDisabledHandler = (): boolean => {
return !!(retentionPeroidTrace === '' || retentionPeroidMetrics === ''); return false;
}; };
const errorText = getErrorText(); const errorText = getErrorText();
@ -275,6 +244,7 @@ function GeneralSettings(): JSX.Element {
text={retentionField.name} text={retentionField.name}
retentionValue={retentionField.value} retentionValue={retentionField.value}
setRetentionValue={retentionField.setValue} setRetentionValue={retentionField.setValue}
hide={!!retentionField.hide}
/> />
))} ))}
</Col> </Col>

View File

@ -1,4 +1,6 @@
export interface PayloadProps { export interface PayloadProps {
metrics_ttl_duration_hrs: number; metrics_ttl_duration_hrs: number;
metrics_move_ttl_duration_hrs: number;
traces_ttl_duration_hrs: number; traces_ttl_duration_hrs: number;
traces_move_ttl_duration_hrs: number;
} }

View File

@ -1,6 +1,8 @@
export interface Props { export interface Props {
type: 'metrics' | 'traces'; metrics_ttl_duration_hrs: number;
duration: string; metrics_move_ttl_duration_hrs: number;
traces_ttl_duration_hrs: number;
traces_move_ttl_duration_hrs: number;
} }
export interface PayloadProps { export interface PayloadProps {