Skip to content

Commit

Permalink
feat: fixed celery state - count display
Browse files Browse the repository at this point in the history
  • Loading branch information
SagarRajput-7 committed Jan 28, 2025
1 parent fe46dd3 commit 7383302
Show file tree
Hide file tree
Showing 7 changed files with 310 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ const getColumnSearchProps = (
</div>
),
filterIcon: (filtered: boolean): JSX.Element => (
<SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
<SearchOutlined
style={{ color: filtered ? Color.BG_ROBIN_500 : undefined }}
/>
),
onFilter: (value, record): boolean =>
record[dataIndex || '']
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ function CeleryTaskBar({
});

const customSeries = (data: QueryData[]): uPlot.Series[] => {
console.log(data);
const configurations: uPlot.Series[] = [
{ label: 'Timestamp', stroke: 'purple' },
];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

.widget-graph-container {
&.bar {
height: calc(100% - 85px);
height: calc(100% - 105px);
}
}
}
Expand All @@ -45,9 +45,12 @@
height: calc(100% - 18px);

.widget-graph-container {
&.bar,
&.bar {
height: calc(100% - 105px);
}

&.graph {
height: calc(100% - 85px);
height: calc(100% - 80px);
}
}
}
Expand Down Expand Up @@ -93,7 +96,10 @@
}

&__label-wrapper {
margin-bottom: 8px;
margin-bottom: 4px;
display: flex;
flex-direction: column;
gap: 8px;
}

&__label {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -917,3 +917,215 @@ export const celeryTimeSeriesTablesWidgetData = (
columnUnits: { A: 'ns' },
}),
);

// State Count Widget
export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
getWidgetQuery({
title: 'All State Count',
description: 'Represents the all state count.',
panelTypes: PANEL_TYPES.VALUE,
queryData: [
{
aggregateAttribute: {
dataType: DataTypes.EMPTY,
id: '------false',
isColumn: false,
isJSON: false,
key: '',
type: '',
},
aggregateOperator: 'count',
dataSource: DataSource.TRACES,
disabled: false,
expression: 'A',
filters: {
items: [
{
id: uuidv4(),
key: {
dataType: DataTypes.String,
id: 'celery.task_name--string--tag--false',
isColumn: false,
isJSON: false,
key: 'celery.task_name',
type: 'tag',
},
op: '=',
value: 'tasks.tasks.divide',
},
],
op: 'AND',
},
functions: [],
groupBy: [],
having: [],
legend: '',
limit: null,
orderBy: [],
queryName: 'A',
reduceTo: 'avg',
spaceAggregation: 'sum',
stepInterval: 60,
timeAggregation: 'rate',
},
],
}),
);

export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
getWidgetQuery({
title: 'Successful State Count',
description: 'Represents the successful state count.',
panelTypes: PANEL_TYPES.VALUE,
queryData: [
{
aggregateAttribute: {
dataType: DataTypes.EMPTY,
id: '------false',
isColumn: false,
isJSON: false,
key: '',
type: '',
},
aggregateOperator: 'count',
dataSource: DataSource.TRACES,
disabled: false,
expression: 'A',
filters: {
items: [
{
id: uuidv4(),
key: {
dataType: DataTypes.String,
id: 'celery.state--string--tag--false',
isColumn: false,
isJSON: false,
key: 'celery.state',
type: 'tag',
},
op: '=',
value: 'SUCCESS',
},
],
op: 'AND',
},
functions: [],
groupBy: [],
having: [],
legend: '',
limit: null,
orderBy: [],
queryName: 'A',
reduceTo: 'avg',
spaceAggregation: 'sum',
stepInterval: 60,
timeAggregation: 'rate',
},
],
}),
);

export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
getWidgetQuery({
title: 'Failed State Count',
description: 'Represents the failed state count.',
panelTypes: PANEL_TYPES.VALUE,
queryData: [
{
aggregateAttribute: {
dataType: DataTypes.EMPTY,
id: '------false',
isColumn: false,
isJSON: false,
key: '',
type: '',
},
aggregateOperator: 'count',
dataSource: DataSource.TRACES,
disabled: false,
expression: 'A',
filters: {
items: [
{
id: uuidv4(),
key: {
dataType: DataTypes.String,
id: 'celery.state--string--tag--false',
isColumn: false,
isJSON: false,
key: 'celery.state',
type: 'tag',
},
op: '=',
value: 'FAILURE',
},
],
op: 'AND',
},
functions: [],
groupBy: [],
having: [],
legend: '',
limit: null,
orderBy: [],
queryName: 'A',
reduceTo: 'avg',
spaceAggregation: 'sum',
stepInterval: 60,
timeAggregation: 'rate',
},
],
}),
);

export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
getWidgetQuery({
title: 'Retry State Count',
description: 'Represents the retry state count.',
panelTypes: PANEL_TYPES.VALUE,
queryData: [
{
aggregateAttribute: {
dataType: DataTypes.EMPTY,
id: '------false',
isColumn: false,
key: '',
type: '',
},
aggregateOperator: 'count',
dataSource: DataSource.TRACES,
disabled: false,
expression: 'A',
filters: {
items: [
{
id: uuidv4(),
key: {
dataType: DataTypes.String,
id: 'celery.state--string--tag--false',
isColumn: false,
isJSON: false,
key: 'celery.state',
type: 'tag',
},
op: '=',
value: 'RETRY',
},
],
op: 'AND',
},
functions: [],
groupBy: [],
having: [],
legend: '',
limit: null,
orderBy: [],
queryName: 'A',
reduceTo: 'avg',
spaceAggregation: 'sum',
stepInterval: 60,
timeAggregation: 'rate',
},
],
}),
);
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
/* eslint-disable no-nested-ternary */
import './CeleryTaskGraph.style.scss';

import { Col, Row } from 'antd';
import { Dispatch, SetStateAction } from 'react';

import {
celeryAllStateCountWidgetData,
celeryFailedStateCountWidgetData,
celeryRetryStateCountWidgetData,
celerySuccessStateCountWidgetData,
} from './CeleryTaskGraphUtils';
import { useGetValueFromWidget } from './useGetValueFromWidget';

interface TabData {
label: string;
key: string;
Expand Down Expand Up @@ -33,6 +42,16 @@ function CeleryTaskStateGraphConfig({
setBarState(key as CeleryTaskState);
};

const { values, isLoading, isError } = useGetValueFromWidget(
[
celeryAllStateCountWidgetData,
celeryFailedStateCountWidgetData,
celeryRetryStateCountWidgetData,
celerySuccessStateCountWidgetData,
],
['celery-task-states'],
);

return (
<Row className="celery-task-states">
{tabs.map((tab, index) => (
Expand All @@ -46,6 +65,9 @@ function CeleryTaskStateGraphConfig({
>
<div className="celery-task-states__label-wrapper">
<div className="celery-task-states__label">{tab.label}</div>
<div className="celery-task-states__value">
{isLoading ? '-' : isError ? '-' : values[index]}
</div>
</div>
{tab.key === barState && <div className="celery-task-states__indicator" />}
</Col>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
import { useCallback } from 'react';
import { useQueries } from 'react-query';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { SuccessResponse } from 'types/api';
import { Widgets } from 'types/api/dashboard/getAll';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { GlobalReducer } from 'types/reducer/globalTime';

interface UseGetValueResult {
values: string[];
isLoading: boolean;
isError: boolean;
}

export const useGetValueFromWidget = (
widgetsData: Widgets | Widgets[],
queryKey: string[],
): UseGetValueResult => {
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);

const queryPayloads = useCallback(
() =>
getQueryPayloadFromWidgetsData({
start: Math.floor(minTime / 1000000000),
end: Math.floor(maxTime / 1000000000),
widgetsData: Array.isArray(widgetsData) ? widgetsData : [widgetsData],
panelType: PANEL_TYPES.VALUE,
}),
[minTime, maxTime, widgetsData],
);

const queries = useQueries(
queryPayloads().map((payload) => ({
queryKey: [...queryKey, payload, ENTITY_VERSION_V4],
queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
GetMetricQueryRange(payload, ENTITY_VERSION_V4),
enabled: !!payload,
})),
);

const isLoading = queries.some((query) => query.isLoading);
const isError = queries.some((query) => query.isError);

const values = queries.map((query) => {
if (query.isLoading) return 'Loading...';
if (query.isError) return 'Error';

const value = parseFloat(
query.data?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
?.values?.[0]?.value || 'NaN',
);
return Number.isNaN(value) ? 'NaN' : value.toFixed(2);
});

return { values, isLoading, isError };
};
2 changes: 0 additions & 2 deletions frontend/src/container/MetricsApplication/Tabs/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,6 @@ export function onGraphClickHandler(
): Promise<void> => {
const id = `${type}_button`;

console.log(xValue, yValue, mouseX, mouseY, type);

const buttonElement = document.getElementById(id);

if (xValue) {
Expand Down

0 comments on commit 7383302

Please sign in to comment.