Reworked Stack queries

exceptionless · Dec 19, 2024 · 8691e8e · 8691e8e
1 parent e59f0f8
commit 8691e8e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 32 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/resources.md b/src/Exceptionless.Web/ClientApp/resources.md
@@ -102,6 +102,13 @@
 
 ## Networking
 
+Analyze current naming patterns
+Define consistent naming convention rules:
+Remove redundant terms
+Use HTTP verb prefixes
+Keep resource names singular/plural based on return type
+Order: [httpVerb][Resource][Qualifier][Query]
+
 - <https://tanstack.com/query/v5/docs/svelte/examples/svelte/simple>
 - <https://kit.svelte.dev/docs/load>
 - <https://github.com/acacode/swagger-typescript-api>

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
@@ -7,7 +7,7 @@ import { createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query
 import type { PersistentEvent } from './models';
 
 export async function invalidatePersistentEventQueries(queryClient: QueryClient, message: WebSocketMessageValue<'PersistentEventChanged'>) {
-    const { id, stack_id } = message;
+    const { id, project_id, stack_id } = message;
     if (id) {
         await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
     }
@@ -16,60 +16,122 @@ export async function invalidatePersistentEventQueries(queryClient: QueryClient,
         await queryClient.invalidateQueries({ queryKey: queryKeys.stacks(stack_id) });
     }
 
+    if (project_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.projects(project_id) });
+    }
+
     if (!id && !stack_id) {
         await queryClient.invalidateQueries({ queryKey: queryKeys.type });
     }
 }
 
 export const queryKeys = {
     id: (id: string | undefined) => [...queryKeys.type, id] as const,
+    projects: (id: string | undefined) => [...queryKeys.type, 'projects', id] as const,
     stacks: (id: string | undefined) => [...queryKeys.type, 'stacks', id] as const,
     type: ['PersistentEvent'] as const
 };
 
-export interface GetEventByIdProps {
-    id: string | undefined;
-}
-
-export interface GetEventsByStackIdProps {
-    limit?: number;
-    stackId: string | undefined;
+export interface GetEventRequest {
+    route: {
+        id: string | undefined;
+    };
 }
 
 export type GetEventsMode = 'stack_frequent' | 'stack_new' | 'stack_recent' | 'stack_users' | 'summary' | null;
 
-export interface IGetEventsParams {
+export interface GetEventsParams {
     after?: string;
     before?: string;
     filter?: string;
     limit?: number;
     mode?: GetEventsMode;
     offset?: string;
-    page?: number;
     sort?: string;
     time?: string;
 }
 
-export function getEventByIdQuery(props: GetEventByIdProps) {
+export interface GetProjectCountRequest {
+    params?: {
+        aggregations?: string;
+        filter?: string;
+        mode?: 'stack_new';
+        offset?: string;
+        time?: string;
+    };
+    route: {
+        projectId: string | undefined;
+    };
+}
+
+export interface GetStackCountRequest {
+    params?: {
+        aggregations?: string;
+        filter?: string;
+        mode?: 'stack_new';
+        offset?: string;
+        time?: string;
+    };
+    route: {
+        stackId: string | undefined;
+    };
+}
+
+export interface GetStackEventsRequest {
+    params?: {
+        after?: string;
+        before?: string;
+        filter?: string;
+        limit?: number;
+        mode?: GetEventsMode;
+        offset?: string;
+        sort?: string;
+        time?: string;
+    };
+    route: {
+        stackId: string | undefined;
+    };
+}
+
+export function getEventQuery(request: GetEventRequest) {
     return createQuery<PersistentEvent, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
+        enabled: () => !!accessToken.value && !!request.route.id,
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<PersistentEvent>(`events/${request.route.id}`, {
+                signal
+            });
+
+            return response.data!;
+        },
+        queryKey: queryKeys.id(request.route.id)
+    }));
+}
+
+export function getProjectCountQuery(request: GetProjectCountRequest) {
+    const queryClient = useQueryClient();
+
+    return createQuery<PersistentEvent[], ProblemDetails>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.projectId,
+        queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
-            const response = await client.getJSON<PersistentEvent>(`events/${props.id}`, {
+            const response = await client.getJSON<PersistentEvent[]>(`/projects/${request.route.projectId}/events/count`, {
+                params: request.params,
                 signal
             });
 
             return response.data!;
         },
-        queryKey: queryKeys.id(props.id)
+        queryKey: queryKeys.projects(request.route.projectId)
     }));
 }
 
-export function getEventsByStackIdQuery(props: GetEventsByStackIdProps) {
+export function getStackEventsQuery(request: GetStackEventsRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<PersistentEvent[], ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!props.stackId,
+        enabled: () => !!accessToken.value && !!request.route.stackId,
         onSuccess: (data: PersistentEvent[]) => {
             data.forEach((event) => {
                 queryClient.setQueryData(queryKeys.id(event.id!), event);
@@ -78,15 +140,13 @@ export function getEventsByStackIdQuery(props: GetEventsByStackIdProps) {
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
-            const response = await client.getJSON<PersistentEvent[]>(`stacks/${props.stackId}/events`, {
-                params: {
-                    limit: props.limit ?? 10
-                },
+            const response = await client.getJSON<PersistentEvent[]>(`stacks/${request.route.stackId}/events`, {
+                params: request.params,
                 signal
             });
 
             return response.data!;
         },
-        queryKey: queryKeys.stacks(props.stackId)
+        queryKey: queryKeys.stacks(request.route.stackId)
     }));
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/EventsDrawer.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/EventsDrawer.svelte
@@ -9,7 +9,7 @@
     import { P } from '$comp/typography';
     import * as Table from '$comp/ui/table';
     import * as Tabs from '$comp/ui/tabs';
-    import { getEventByIdQuery } from '$features/events/api.svelte';
+    import { getEventQuery } from '$features/events/api.svelte';
     import { getExtendedDataItems, hasErrorOrSimpleError } from '$features/events/persistent-event';
     import { getProjectByIdQuery } from '$features/projects/api.svelte';
     import StackCard from '$features/stacks/components/StackCard.svelte';
@@ -76,9 +76,11 @@
         return tabs;
     }
 
-    let eventResponse = getEventByIdQuery({
-        get id() {
-            return id;
+    let eventResponse = getEventQuery({
+        route: {
+            get id() {
+                return id;
+            }
         }
     });
 

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts
@@ -18,7 +18,7 @@ import {
     type VisibilityState
 } from '@tanstack/svelte-table';
 
-import type { GetEventsMode, IGetEventsParams } from '../../api.svelte';
+import type { GetEventsMode, GetEventsParams } from '../../api.svelte';
 import type { EventSummaryModel, StackSummaryModel, SummaryModel, SummaryTemplateKeys } from '../summary/index';
 
 import Summary from '../summary/Summary.svelte';
@@ -138,7 +138,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 }
 
 export function getTableContext<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
-    params: IGetEventsParams,
+    params: GetEventsParams,
     configureOptions: (options: TableOptions<TSummaryModel>) => TableOptions<TSummaryModel> = (options) => options
 ) {
     let _parameters = $state(params);

diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
@@ -7,7 +7,7 @@
     import { Button } from '$comp/ui/button';
     import * as Card from '$comp/ui/card';
     import * as Sheet from '$comp/ui/sheet';
-    import { getEventsByStackIdQuery } from '$features/events/api.svelte';
+    import { getStackEventsQuery } from '$features/events/api.svelte';
     import EventsDrawer from '$features/events/components/EventsDrawer.svelte';
     import { shouldRefreshPersistentEventChanged } from '$features/events/components/filters';
     import EventsDataTable from '$features/events/components/table/EventsDataTable.svelte';
@@ -27,10 +27,14 @@
     }
 
     // Load the latest event for the stack and display it in the sidebar.
-    const eventsResponse = getEventsByStackIdQuery({
-        limit: 1,
-        get stackId() {
-            return selectedStackId;
+    const eventsResponse = getStackEventsQuery({
+        params: {
+            limit: 1
+        },
+        route: {
+            get stackId() {
+                return selectedStackId;
+            }
         }
     });
     const eventId = $derived(eventsResponse?.data?.[0]?.id);