GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 17:29:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added kafka - scenario - 4 (#6370)

Browse Source 
* feat: added kafka - scenario - 4

* feat: added error handling and correct api handler for kafka apis
This commit is contained in:
SagarRajput-7 2024-11-06 14:24:38 +05:30 committed by GitHub
parent 7086470ce2
commit 468f056530
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 124 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
View File

@ -13,7 +13,6 @@ import {
MessagingQueuesViewTypeOptions,
ProducerLatencyOptions,
} from '../MessagingQueuesUtils';
import { SelectLabelWithComingSoon } from '../MQCommon/MQCommon';
import MessagingQueueOverview from '../MQDetails/MessagingQueueOverview';
import MessagingQueuesDetails from '../MQDetails/MQDetails';
import MessagingQueuesConfigOptions from '../MQGraph/MQConfigOptions';
@ -70,13 +69,8 @@ function MQDetailPage(): JSX.Element {
value: MessagingQueuesViewType.producerLatency.value,
},
{
label: (
<SelectLabelWithComingSoon
label={MessagingQueuesViewType.consumerLatency.label}
/>
),
value: MessagingQueuesViewType.consumerLatency.value,
disabled: true,
label: MessagingQueuesViewType.dropRate.label,
value: MessagingQueuesViewType.dropRate.value,
},
]}
/>
@ -96,10 +90,12 @@ function MQDetailPage(): JSX.Element {
)}
</div>
<div className="messaging-queue-details">
<MessagingQueuesDetails
selectedView={selectedView}
producerLatencyOption={producerLatencyOption}
/>
{selectedView !== MessagingQueuesViewType.dropRate.value && (
<MessagingQueuesDetails
selectedView={selectedView}
producerLatencyOption={producerLatencyOption}
/>
)}
</div>
</div>
);

6
frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
View File

@ -139,7 +139,7 @@ const checkValidityOfDetailConfigs = (
return Boolean(configDetails?.topic && configDetails?.service_name);
}
return false;
return selectedView === MessagingQueuesViewType.dropRate.value;
};
function MessagingQueuesDetails({
@ -213,14 +213,14 @@ function MessagingQueuesDetails({
<MessagingQueuesTable
currentTab={currentTab}
selectedView={selectedView}
tableApi={serviceConfigDetails[selectedView].tableApi}
tableApi={serviceConfigDetails[selectedView]?.tableApi}
validConfigPresent={checkValidityOfDetailConfigs(
timelineQueryData,
selectedView,
currentTab,
configDetailQueryData,
)}
tableApiPayload={serviceConfigDetails[selectedView].tableApiPayload}
tableApiPayload={serviceConfigDetails[selectedView]?.tableApiPayload}
/>
</div>
);

24
frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable no-nested-ternary */
/* eslint-disable react/require-default-props */
import './MQTables.styles.scss';
@ -169,15 +170,18 @@ function MessagingQueuesTable({
});
};
const { mutate: getViewDetails, isLoading } = useMutation(tableApi, {
onSuccess: (data) => {
if (data.payload) {
setColumns(getColumns(data?.payload, history));
setTableData(getTableData(data?.payload));
}
const { mutate: getViewDetails, isLoading, error, isError } = useMutation(
tableApi,
{
onSuccess: (data) => {
if (data.payload) {
setColumns(getColumns(data?.payload, history));
setTableData(getTableData(data?.payload));
}
},
onError: handleConsumerDetailsOnError,
},
onError: handleConsumerDetailsOnError,
});
);
useEffect(
() => {
@ -230,6 +234,10 @@ function MessagingQueuesTable({
</Typography.Text>
<Skeleton />
</div>
) : isError ? (
<div className="no-data-style">
<Typography.Text>{error?.message || SOMETHING_WENT_WRONG}</Typography.Text>
</div>
) : (
<>
{currentTab && (

34
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
View File

@ -1,20 +1,18 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
import { ErrorResponse, SuccessResponse } from 'types/api';
export interface MessagingQueueServicePayload {
start?: number | string;
end?: number | string;
variables: {
variables?: {
partition?: string;
topic?: string;
consumer_group?: string;
service_name?: string;
};
detailType?: MessagingQueueServiceDetailType | 'producer' | 'consumer';
evalTime?: number;
}
export interface MessagingQueuesPayloadProps {
@ -42,21 +40,17 @@ export const getConsumerLagDetails = async (
SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
> => {
const { detailType, ...restProps } = props;
try {
const response = await axios.post(
`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
{
...restProps,
},
);
const response = await axios.post(
`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
{
...restProps,
},
);
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
}
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

27
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx Normal file
View File

@ -0,0 +1,27 @@
import axios from 'api';
import { ErrorResponse, SuccessResponse } from 'types/api';
import {
MessagingQueueServicePayload,
MessagingQueuesPayloadProps,
} from './getConsumerLagDetails';
export const getKafkaSpanEval = async (
props: Omit<MessagingQueueServicePayload, 'detailType' | 'variables'>,
): Promise<
SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
> => {
const { start, end, evalTime } = props;
const response = await axios.post(`messaging-queues/kafka/span/evaluation`, {
start,
end,
eval_time: evalTime,
});
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

26
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts
View File

@ -1,7 +1,4 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
import { ErrorResponse, SuccessResponse } from 'types/api';
@ -22,18 +19,15 @@ export const getPartitionLatencyDetails = async (
} else {
endpoint = `/messaging-queues/kafka/consumer-lag/producer-details`;
}
try {
const response = await axios.post(endpoint, {
...rest,
});
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
}
const response = await axios.post(endpoint, {
...rest,
});
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

31
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts
View File

@ -1,7 +1,4 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { ErrorResponse, SuccessResponse } from 'types/api';
import {
@ -14,21 +11,17 @@ export const getPartitionLatencyOverview = async (
): Promise<
SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
> => {
try {
const response = await axios.post(
`/messaging-queues/kafka/partition-latency/overview`,
{
...props,
},
);
const response = await axios.post(
`/messaging-queues/kafka/partition-latency/overview`,
{
...props,
},
);
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
}
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

25
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputDetails.ts
View File

@ -1,7 +1,4 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { ErrorResponse, SuccessResponse } from 'types/api';
import {
@ -16,18 +13,14 @@ export const getTopicThroughputDetails = async (
> => {
const { detailType, ...rest } = props;
const endpoint = `/messaging-queues/kafka/topic-throughput/${detailType}`;
try {
const response = await axios.post(endpoint, {
...rest,
});
const response = await axios.post(endpoint, {
...rest,
});
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
}
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

34
frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputOverview.ts
View File

@ -1,7 +1,4 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { ErrorResponse, SuccessResponse } from 'types/api';
import {
@ -15,23 +12,18 @@ export const getTopicThroughputOverview = async (
SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
> => {
const { detailType, start, end } = props;
console.log(detailType);
try {
const response = await axios.post(
`messaging-queues/kafka/topic-throughput/${detailType}`,
{
start,
end,
},
);
const response = await axios.post(
`messaging-queues/kafka/topic-throughput/${detailType}`,
{
start,
end,
},
);
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
}
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
};

8
frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx
View File

@ -12,6 +12,7 @@ import {
ProducerLatencyOptions,
} from '../MessagingQueuesUtils';
import { MessagingQueueServicePayload } from './MQTables/getConsumerLagDetails';
import { getKafkaSpanEval } from './MQTables/getKafkaSpanEval';
import { getPartitionLatencyOverview } from './MQTables/getPartitionLatencyOverview';
import { getTopicThroughputOverview } from './MQTables/getTopicThroughputOverview';
import MessagingQueuesTable from './MQTables/MQTables';
@ -51,6 +52,9 @@ const getTableApi = (selectedView: MessagingQueuesViewTypeOptions): any => {
if (selectedView === MessagingQueuesViewType.producerLatency.value) {
return getTopicThroughputOverview;
}
if (selectedView === MessagingQueuesViewType.dropRate.value) {
return getKafkaSpanEval;
}
return getPartitionLatencyOverview;
};
@ -78,6 +82,10 @@ function MessagingQueueOverview({
? 'producer'
: 'consumer'
: undefined,
evalTime:
selectedView === MessagingQueuesViewType.dropRate.value
? 2363404
: undefined,
};
return (

2
frontend/src/pages/MessagingQueues/MessagingQueues.tsx
View File

@ -187,7 +187,7 @@ function MessagingQueues(): JSX.Element {
</div>
<div className="summary-card coming-soon-card">
<div className="summary-title">
<p>{MessagingQueuesViewType.consumerLatency.label}</p>
<p>{MessagingQueuesViewType.dropRate.label}</p>
<div className="time-value">
<Calendar size={14} color={Color.BG_SLATE_200} />
<p className="time-value">1D</p>

6
frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
View File

@ -238,9 +238,9 @@ export const MessagingQueuesViewType = {
label: 'Producer Latency view',
value: MessagingQueuesViewTypeOptions.ProducerLatency,
},
consumerLatency: {
label: 'Consumer latency view',
value: MessagingQueuesViewTypeOptions.ConsumerLatency,
dropRate: {
label: 'Drop Rate',
value: 'dropRate',
},
};