Skip to content

ui: Cancel previous request when a new query starts #5963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yomete merged 2 commits into from
Sep 30, 2025
Merged

ui: Cancel previous request when a new query starts #5963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80f7ee8
ui: Cancel previous request when new one starts.
yomete Sep 24, 2025
db36eec
Merge branch 'main' into cancel-previous-requests
yomete Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ui/packages/shared/profile/src/MatchersInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const useLabelNames = (

const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
key: ['labelNames', profileType, match?.join(','), start, end],
queryFn: async () => {
queryFn: async signal => {
const request: LabelsRequest = {match: match !== undefined ? match : []};
if (start !== undefined && end !== undefined) {
request.start = millisToProtoTimestamp(start);
Expand All @@ -68,7 +68,7 @@ export const useLabelNames = (
if (profileType !== undefined) {
request.profileType = profileType;
}
const {response} = await client.labels(request, {meta: metadata});
const {response} = await client.labels(request, {meta: metadata, abort: signal});
return response;
},
options: {
Expand Down Expand Up @@ -100,13 +100,13 @@ export const useLabelValues = (

const {data, isLoading, error} = useGrpcQuery<string[]>({
key: ['labelValues', labelName, profileType, start, end],
queryFn: async () => {
queryFn: async signal => {
const request: ValuesRequest = {labelName, match: [], profileType};
if (start !== undefined && end !== undefined) {
request.start = millisToProtoTimestamp(start);
request.end = millisToProtoTimestamp(end);
}
const {response} = await client.values(request, {meta: metadata});
const {response} = await client.values(request, {meta: metadata, abort: signal});
return sanitizeLabelValue(response.labelValues);
},
options: {
Expand Down
4 changes: 2 additions & 2 deletions ui/packages/shared/profile/src/ProfileMetricsGraph/hooks/useQueryRange.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const useQueryRange = (

const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
queryFn: async () => {
queryFn: async signal => {
const stepDuration = getStepDuration(start, end, stepCount);
const {response} = await client.queryRange(
{
Expand All @@ -79,7 +79,7 @@ export const useQueryRange = (
limit: 0,
sumBy,
},
{meta: metadata}
{meta: metadata, abort: signal}
);
return response;
},
Expand Down
6 changes: 3 additions & 3 deletions ui/packages/shared/profile/src/useGrpcQuery/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {useQuery, type UseQueryResult} from '@tanstack/react-query';

interface Props<IRes> {
key: unknown[];
queryFn: () => Promise<IRes>;
queryFn: (signal?: AbortSignal) => Promise<IRes>;
options?: {
enabled?: boolean | undefined;
staleTime?: number | undefined;
Expand All @@ -31,8 +31,8 @@ const useGrpcQuery = <IRes>({
}: Props<IRes>): UseQueryResult<IRes> => {
return useQuery<IRes>(
key,
async () => {
return await queryFn();
async ({signal}) => {
return await queryFn(signal);
},
{
enabled,
Expand Down
4 changes: 2 additions & 2 deletions ui/packages/shared/profile/src/useQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const useQuery = (
options?.sandwichByFunction ?? '',
protoFiltersKey,
],
queryFn: async () => {
queryFn: async signal => {
const req = profileSource.QueryRequest();
req.reportType = reportType;
req.nodeTrimThreshold = options?.nodeTrimThreshold;
Expand All @@ -91,7 +91,7 @@ export const useQuery = (
}

try {
const {response} = await client.query(req, {meta: metadata});
const {response} = await client.query(req, {meta: metadata, abort: signal});
return response;
} catch (e) {
if (options?.sourceOnly === true) {
Expand Down
Loading