Next: Table Bulk Actions

Next: Table Bulk Actions

Author: niemyjski

src/Exceptionless.Web/ClientApp/.vscode/settings.json

@@ -50,7 +50,7 @@
     },
     "editor.formatOnSave": true,
     "eslint.validate": ["javascript", "svelte"],
-    "search.exclude": {
+    "files.exclude": {
         ".svelte-kit": true,
         "build": true
     },

src/Exceptionless.Web/ClientApp/api-templates/class-data-contract.ejs

@@ -2,11 +2,10 @@
 const { contract, utils } = it;
 const { formatDescription, require, _ } = utils;
 %>
-export class <%~ contract.name %> {
+class <%~ contract.name %> {
   <% for (const field of contract.$content) { %>
     <%~ includeFile('@base/object-field-jsdoc.ejs', { ...it, field }) %>
     <%~ includeFile('./object-field-class-validator.ejs', { ...it, field }) %>
-    <%~ field.name %><%~ field.isRequired || !field.nullable ? '!' : '' %><%~ field.nullable ? '?' : '' %>: <%~ field.value.replaceAll('any', 'unknown') %>;
+    <%~ field.name %><%~ (field.isRequired && !field.nullable) || !field.nullable || !field.nullable ? '!' : '' %><%~ field.nullable ? '?' : '' %>: <%~ field.value.replaceAll('any', 'unknown') %>;
   <% } %>
 }
-

src/Exceptionless.Web/ClientApp/api-templates/data-contracts.ejs

@@ -28,7 +28,7 @@ const dataContractTemplates = {
   },
   type: (contract) => {
     return `type ${contract.name}${buildGenerics(contract)} = ${contract.content}`;
-  },
+  }
 }
 %>
 
@@ -47,6 +47,7 @@ import {
     IsNumber,
     IsMongoId,
     IsUrl,
+    Matches,
     Min,
     MinDate,
     MinLength,

src/Exceptionless.Web/ClientApp/api-templates/object-field-class-validator.ejs

@@ -28,7 +28,7 @@ const validationDecorators = _.compact([
     !_.isUndefined(field.format) && getFormatValidation(field),
     !_.isUndefined(field.minLength) && `@MinLength(${field.minLength}, { message: '${field.name} must be at least ${field.minLength} characters long.' })`,
     !_.isUndefined(field.maxLength) && `@MaxLength(${field.maxLength}, { message: '${field.name} must be at most ${field.maxLength} characters long.' })`,
-    !_.isUndefined(field.pattern) && `@Matches(${field.pattern}, { message: '${field.name} must match the pattern ${field.pattern}.' })`,
+    !_.isUndefined(field.pattern) && `@Matches(/${field.pattern}/, { message: '${field.name} must match the pattern ${field.pattern}.' })`,
     !_.isUndefined(field.type) && (field.type === "object" || (field.type === "array" && field.items.$ref)) && `@ValidateNested({ message: '${field.name} must be a valid nested object.' })`,
 ]);
 

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -23,37 +23,37 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@iconify-json/lucide": "^1.2.20",
+        "@iconify-json/lucide": "^1.2.21",
         "@playwright/test": "^1.49.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.15.1",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^22.10.2",
+        "@types/node": "^22.10.5",
         "@types/throttle-debounce": "^5.0.2",
         "autoprefixer": "^10.4.20",
         "cross-env": "^7.0.3",
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-perfectionist": "^4.4.0",
+        "eslint-plugin-perfectionist": "^4.6.0",
         "eslint-plugin-svelte": "^2.46.1",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.49",
         "prettier": "^3.4.2",
         "prettier-plugin-svelte": "^3.3.2",
         "prettier-plugin-tailwindcss": "^0.6.9",
-        "svelte": "^5.16.0",
+        "svelte": "^5.16.1",
         "svelte-check": "^4.1.1",
         "swagger-typescript-api": "^13.0.23",
         "tslib": "^2.8.1",
         "typescript": "^5.7.2",
-        "typescript-eslint": "^8.18.2",
-        "vite": "^6.0.6",
+        "typescript-eslint": "^8.19.0",
+        "vite": "^6.0.7",
         "vitest": "2.1.6"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
-        "@exceptionless/fetchclient": "^0.31.0",
+        "@exceptionless/fetchclient": "^0.33.0",
         "@iconify-json/mdi": "^1.2.2",
         "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@28f98f9",
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@28f98f9",
@@ -66,7 +66,7 @@
         "mode-watcher": "^0.5.0",
         "oidc-client-ts": "^3.1.0",
         "pretty-ms": "^9.2.0",
-        "runed": "^0.22.0",
+        "runed": "^0.23.0",
         "svelte-sonner": "^0.3.28",
         "svelte-time": "^0.9.0",
         "sveltekit-superforms": "^2.22.1",

src/Exceptionless.Web/ClientApp/package.json

@@ -1,10 +1,10 @@
 import type { WebSocketMessageValue } from '$features/websockets/models';
-import type { CountResult } from '$shared/models';
+import type { CountResult, WorkInProgressResult } from '$shared/models';
 
 import { accessToken } from '$features/auth/index.svelte';
-import { DEFAULT_OFFSET } from '$features/shared/api/api.svelte';
+import { DEFAULT_OFFSET } from '$shared/api/api.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
+import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { PersistentEvent } from './models';
 
@@ -31,13 +31,20 @@ export async function invalidatePersistentEventQueries(queryClient: QueryClient,
 
 export const queryKeys = {
     count: () => [...queryKeys.type, 'count'] as const,
+    deleteEvent: (ids: string[] | undefined) => [...queryKeys.type, 'delete', ...(ids ?? [])] as const,
     id: (id: string | undefined) => [...queryKeys.type, id] as const,
     projectsCount: (id: string | undefined) => [...queryKeys.type, 'projects', id] as const,
     stacks: (id: string | undefined) => [...queryKeys.type, 'stacks', id] as const,
     stacksCount: (id: string | undefined) => [...queryKeys.stacks(id), 'count'] as const,
     type: ['PersistentEvent'] as const
 };
 
+export interface DeleteEventsRequest {
+    route: {
+        ids: string[] | undefined;
+    };
+}
+
 export interface GetCountRequest {
     params?: {
         aggregations?: string;
@@ -67,6 +74,7 @@ export interface GetEventsParams {
     limit?: number;
     mode?: GetEventsMode;
     offset?: string;
+    page?: number;
     sort?: string;
     time?: string;
 }
@@ -113,6 +121,26 @@ export interface GetStackEventsRequest {
     };
 }
 
+export function deleteEvent(request: DeleteEventsRequest) {
+    const queryClient = useQueryClient();
+    return createMutation<WorkInProgressResult, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids?.length,
+        mutationFn: async () => {
+            const client = useFetchClient();
+            const response = await client.deleteJSON<WorkInProgressResult>(`events/${request.route.ids?.join(',')}`);
+
+            return response.data!;
+        },
+        mutationKey: queryKeys.deleteEvent(request.route.ids),
+        onError: () => {
+            request.route.ids?.forEach((id) => queryClient.invalidateQueries({ queryKey: queryKeys.id(id) }));
+        },
+        onSuccess: () => {
+            request.route.ids?.forEach((id) => queryClient.invalidateQueries({ queryKey: queryKeys.id(id) }));
+        }
+    }));
+}
+
 export function getCountQuery(request: GetCountRequest) {
     const queryClient = useQueryClient();
 

src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import Number from '$comp/formatters/Number.svelte';
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    import { buttonVariants } from '$comp/ui/button';
+
+    interface Props {
+        count?: number;
+        open: boolean;
+        remove: () => Promise<void>;
+    }
+
+    let { count = 1, open = $bindable(), remove }: Props = $props();
+
+    async function onSubmit() {
+        await remove();
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>
+                Delete
+                {#if count === 1}
+                    Event
+                {:else}
+                    <Number value={count} /> Events
+                {/if}
+            </AlertDialog.Title>
+            <AlertDialog.Description>
+                Are you sure you want to delete
+                {#if count === 1}
+                    this event
+                {:else}
+                    <Number value={count} /> events
+                {/if}?
+            </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>
+                Delete
+                {#if count === 1}
+                    Event
+                {:else}
+                    <Number value={count} /> Events
+                {/if}
+            </AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/dialogs/RemoveEventDialog.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+    type TData = unknown;
+</script>
+
+<script generics="TData" lang="ts">
+    import Button from '$comp/ui/button/button.svelte';
+    import * as DropdownMenu from '$comp/ui/dropdown-menu';
+    import { deleteEvent } from '$features/events/api.svelte';
+    import { type Table as SvelteTable } from '@tanstack/svelte-table';
+    import { toast } from 'svelte-sonner';
+    import ChevronDown from '~icons/mdi/chevron-down';
+
+    import RemoveEventDialog from '../dialogs/RemoveEventDialog.svelte';
+
+    interface Props {
+        table: SvelteTable<TData>;
+    }
+
+    let { table }: Props = $props();
+    const ids = $derived(table.getSelectedRowModel().flatRows.map((row) => row.id));
+
+    let openRemoveEventDialog = $state<boolean>(false);
+
+    const removeEvents = deleteEvent({
+        route: {
+            get ids() {
+                return ids;
+            }
+        }
+    });
+
+    async function remove() {
+        await removeEvents.mutateAsync();
+
+        if (ids.length === 1) {
+            toast.success('Successfully deleted event.');
+        } else {
+            toast.success(`Successfully deleted ${Intl.NumberFormat().format(ids.length)} events.`);
+        }
+
+        table.resetRowSelection();
+    }
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        <Button variant="outline">
+            Bulk Actions
+            <ChevronDown class="size-4" />
+        </Button>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+        <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>Bulk Actions</DropdownMenu.GroupHeading>
+            <DropdownMenu.Item onclick={() => (openRemoveEventDialog = true)} class="text-destructive" title="Delete event">Delete</DropdownMenu.Item>
+        </DropdownMenu.Group>
+    </DropdownMenu.Content>
+</DropdownMenu.Root>
+
+{#if openRemoveEventDialog}
+    <RemoveEventDialog bind:open={openRemoveEventDialog} {remove} count={ids.length} />
+{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/EventsBulkActionsDropdownMenu.svelte

@@ -8,14 +8,16 @@
     import type { EventSummaryModel, SummaryTemplateKeys } from '../summary/index';
 
     interface Props {
+        bodyChildren?: Snippet;
+        footerChildren?: Snippet;
         isLoading: boolean;
         limit: number;
-        rowclick?: (row: EventSummaryModel<SummaryTemplateKeys>) => void;
+        rowClick?: (row: EventSummaryModel<SummaryTemplateKeys>) => void;
         table: Table<EventSummaryModel<SummaryTemplateKeys>>;
         toolbarChildren?: Snippet;
     }
 
-    let { isLoading, limit = $bindable(), rowclick, table, toolbarChildren }: Props = $props();
+    let { bodyChildren, footerChildren, isLoading, limit = $bindable(), rowClick, table, toolbarChildren }: Props = $props();
 </script>
 
 <DataTable.Root>
@@ -24,16 +26,28 @@
             {@render toolbarChildren()}
         {/if}
     </DataTable.Toolbar>
-    <DataTable.Body {rowclick} {table}>
+    <DataTable.Body {rowClick} {table}>
         {#if isLoading}
             <DelayedRender>
                 <DataTable.Loading {table} />
             </DelayedRender>
         {:else}
             <DataTable.Empty {table} />
         {/if}
+        {#if bodyChildren}
+            {@render bodyChildren()}
+        {/if}
     </DataTable.Body>
-    <DataTable.Pagination {table}>
-        <DataTable.PageSize bind:value={limit} {table}></DataTable.PageSize>
-    </DataTable.Pagination>
+    <DataTable.Footer {table} class="space-x-6 lg:space-x-8">
+        {#if footerChildren}
+            {@render footerChildren()}
+        {:else}
+            <DataTable.Selection {table} />
+            <DataTable.PageSize bind:value={limit} {table}></DataTable.PageSize>
+            <div class="flex items-center space-x-6 lg:space-x-8">
+                <DataTable.PageCount {table} />
+                <DataTable.Pagination {table} />
+            </div>
+        {/if}
+    </DataTable.Footer>
 </DataTable.Root>