feat: add stacks dashboard page

src/Exceptionless.Core/Models/Organization.cs

@@ -135,7 +135,7 @@ public Organization()
     public bool HasPremiumFeatures { get; set; }
 
     /// <summary>
-    /// Set of enabled feature flags for this organization (e.g., "feature-saved-views").
+    /// Set of enabled feature flags for this organization.
     /// Feature identifiers are always stored in lowercase.
     /// </summary>
     public ISet<string> Features { get; set; } = new HashSet<string>();
@@ -277,11 +277,4 @@ public enum BillingStatus
     Unpaid = 4
 }
 
-/// <summary>
-/// Well-known organization feature flag identifiers.
-/// </summary>
-public static class OrganizationFeatures
-{
-    /// <summary>Enables the Saved Views feature for the organization.</summary>
-    public const string SavedViews = "feature-saved-views";
-}
+

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

@@ -42,6 +42,7 @@ export const queryKeys = {
     sessionEvents: (id: string | undefined, params?: GetSessionEventsRequest['params']) => [...queryKeys.type, 'sessions', 'session', id, params] as const,
     sessions: (id: string | undefined) => [...queryKeys.type, 'sessions', 'organizations', id] as const,
     sessionsCount: (id: string | undefined, params?: GetOrganizationSessionsCountRequest['params']) => [...queryKeys.sessions(id), 'count', params] as const,
+    stackEvents: (id: string | undefined, params?: GetStackEventsRequest['params']) => [...queryKeys.stacks(id), 'events', params] as const,
     stacks: (id: string | undefined) => [...queryKeys.type, 'stacks', id] as const,
     stacksCount: (id: string | undefined, params?: GetStackCountRequest['params']) => [...queryKeys.stacks(id), 'count', params] as const,
     type: ['PersistentEvent'] as const
@@ -342,6 +343,6 @@ export function getStackEventsQuery(request: GetStackEventsRequest) {
 
             return response.data!;
         },
-        queryKey: queryKeys.stacks(request.route.stackId)
+        queryKey: queryKeys.stackEvents(request.route.stackId, request.params)
     }));
 }

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte

@@ -10,13 +10,16 @@
     import EventsOverview from './events-overview.svelte';
 
     interface Props {
+        detailsHref?: string;
         eventId: null | string;
         filterChanged: (filter: IFilter) => void;
         onClose: () => void;
         onError?: (problem: ProblemDetails) => void;
     }
 
-    let { eventId = $bindable(), filterChanged, onClose, onError }: Props = $props();
+    let { detailsHref, eventId = $bindable(), filterChanged, onClose, onError }: Props = $props();
+
+    const resolvedHref = $derived(detailsHref ?? (eventId ? resolve('/(app)/event/[eventId]', { eventId }) : '#'));
 
     function handleOpenChange() {
         onClose();
@@ -34,18 +37,11 @@
 <Sheet.Root onOpenChange={handleOpenChange} open={!!eventId}>
     <Sheet.Content class="w-full overflow-y-scroll sm:max-w-full! md:w-5/6!">
         <Sheet.Header>
-            <Sheet.Title
-                >Event Details <Button
-                    href={eventId ? resolve('/(app)/event/[eventId]', { eventId }) : '#'}
-                    size="sm"
-                    title="Open in new window"
-                    variant="ghost"><ExternalLink /></Button
-                ></Sheet.Title
-            >
+            <Sheet.Title>Event Details <Button href={resolvedHref} size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button></Sheet.Title>
         </Sheet.Header>
         <div class="px-4">
             {#if eventId}
-                <EventsOverview {filterChanged} id={eventId} {handleError} onSessionFilter={onClose} />
+                <EventsOverview {filterChanged} id={eventId} {handleError} />
             {/if}
         </div>
     </Sheet.Content>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte

@@ -5,7 +5,6 @@
 
     import DateTime from '$comp/formatters/date-time.svelte';
     import TimeAgo from '$comp/formatters/time-ago.svelte';
-    import { Button } from '$comp/ui/button';
     import { Skeleton } from '$comp/ui/skeleton';
     import * as Table from '$comp/ui/table';
     import * as Tabs from '$comp/ui/tabs';
@@ -15,9 +14,6 @@
     import { getOrganizationQuery } from '$features/organizations/api.svelte';
     import { getProjectQuery } from '$features/projects/api.svelte';
     import StackCard from '$features/stacks/components/stack-card.svelte';
-    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-    import ChevronRight from '@lucide/svelte/icons/chevron-right';
-    import { onMount, tick } from 'svelte';
 
     import type { PersistentEvent } from '../models/index';
 
@@ -35,10 +31,9 @@
         filterChanged: (filter: IFilter) => void;
         handleError: (problem: ProblemDetails) => void;
         id: string;
-        onSessionFilter?: () => void;
     }
 
-    let { filterChanged, handleError, id, onSessionFilter }: Props = $props();
+    let { filterChanged, handleError, id }: Props = $props();
 
     function getTabs(event?: null | PersistentEvent, project?: ViewProject): TabType[] {
         if (!event) {
@@ -63,7 +58,7 @@
         }
 
         if (getSessionId(event)) {
-            tabs.push('Session');
+            tabs.push('Session Events');
         }
 
         if (!project) {
@@ -117,60 +112,8 @@
     type TabType = 'Environment' | 'Exception' | 'Extended Data' | 'Overview' | 'Request' | 'Trace Log' | string;
 
     let activeTab = $state<TabType>('Overview');
-    let areTabsScrollable = $state(false);
-    let canScrollTabsLeft = $state(false);
-    let canScrollTabsRight = $state(false);
-    let shouldRoundLastTab = $state(false);
-    let tabsListElement = $state<HTMLElement | null>(null);
     let tabs = $derived<TabType[]>(getTabs(eventQuery.data, projectQuery.data));
 
-    function updateTabScrollState(): void {
-        if (!tabsListElement) {
-            areTabsScrollable = false;
-            canScrollTabsLeft = false;
-            canScrollTabsRight = false;
-            shouldRoundLastTab = false;
-            return;
-        }
-
-        const maxScrollLeft = tabsListElement.scrollWidth - tabsListElement.clientWidth;
-        const lastTabElement = tabsListElement.querySelector('[data-slot="tabs-trigger"]:last-child');
-        areTabsScrollable = maxScrollLeft > 1;
-        canScrollTabsLeft = tabsListElement.scrollLeft > 1;
-        canScrollTabsRight = tabsListElement.scrollLeft < maxScrollLeft - 1;
-        shouldRoundLastTab = areTabsScrollable || (lastTabElement?.getBoundingClientRect().right ?? 0) >= tabsListElement.getBoundingClientRect().right - 1;
-    }
-
-    function scrollTabs(direction: -1 | 1): void {
-        if (!tabsListElement) {
-            return;
-        }
-
-        tabsListElement.scrollBy({
-            behavior: 'smooth',
-            left: direction * Math.max(tabsListElement.clientWidth * 0.75, 160)
-        });
-    }
-
-    async function refreshTabScrollState(currentTabs: TabType[]): Promise<void> {
-        await tick();
-        if (currentTabs !== tabs) {
-            return;
-        }
-
-        updateTabScrollState();
-    }
-
-    async function scrollActiveTabIntoView(currentTab: TabType): Promise<void> {
-        await tick();
-        if (currentTab !== activeTab) {
-            return;
-        }
-
-        tabsListElement?.querySelector('[data-state="active"]')?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-        updateTabScrollState();
-    }
-
     function onPromoted(title: string): void {
         activeTab = title;
     }
@@ -188,23 +131,6 @@
             handleError(eventQuery.error);
         }
     });
-
-    $effect(() => {
-        void refreshTabScrollState(tabs);
-    });
-
-    $effect(() => {
-        void scrollActiveTabIntoView(activeTab);
-    });
-
-    onMount(() => {
-        updateTabScrollState();
-        window.addEventListener('resize', updateTabScrollState);
-
-        return () => {
-            window.removeEventListener('resize', updateTabScrollState);
-        };
-    });
 </script>
 
 <StackCard {filterChanged} id={eventQuery.data?.stack_id}></StackCard>
@@ -241,53 +167,11 @@
 
 {#if eventQuery.isSuccess}
     <Tabs.Root class="mt-4 mb-4" value={activeTab}>
-        <div class="flex min-w-0 items-center gap-1">
-            {#if areTabsScrollable}
-                <Button
-                    aria-label="Scroll tabs left"
-                    class="flex-none"
-                    disabled={!canScrollTabsLeft}
-                    onclick={() => scrollTabs(-1)}
-                    size="icon-sm"
-                    title="Scroll tabs left"
-                    variant="ghost"
-                >
-                    <ChevronLeft />
-                </Button>
-            {/if}
-
-            <Tabs.List
-                bind:ref={tabsListElement}
-                class="divide-border bg-background h-8 min-w-0 flex-1 justify-normal divide-x overflow-x-auto overflow-y-hidden rounded-lg border p-0 shadow-xs [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-                onscroll={updateTabScrollState}
-            >
-                {#each tabs as tab (tab)}
-                    <Tabs.Trigger
-                        class={[
-                            'data-[state=active]:bg-muted flex-none rounded-none border-0 px-4 shadow-none first:rounded-l-lg data-[state=active]:shadow-none',
-                            shouldRoundLastTab && 'last:rounded-r-lg'
-                        ]}
-                        value={tab}
-                    >
-                        {tab}
-                    </Tabs.Trigger>
-                {/each}
-            </Tabs.List>
-
-            {#if areTabsScrollable}
-                <Button
-                    aria-label="Scroll tabs right"
-                    class="flex-none"
-                    disabled={!canScrollTabsRight}
-                    onclick={() => scrollTabs(1)}
-                    size="icon-sm"
-                    title="Scroll tabs right"
-                    variant="ghost"
-                >
-                    <ChevronRight />
-                </Button>
-            {/if}
-        </div>
+        <Tabs.List class="w-full justify-normal overflow-scroll">
+            {#each tabs as tab (tab)}
+                <Tabs.Trigger value={tab}>{tab}</Tabs.Trigger>
+            {/each}
+        </Tabs.List>
 
         {#each tabs as tab (tab)}
             <Tabs.Content value={tab}>
@@ -301,8 +185,8 @@
                     <Request {filterChanged} event={eventQuery.data}></Request>
                 {:else if tab === 'Trace Log'}
                     <TraceLog logs={eventQuery.data.data?.['@trace']}></TraceLog>
-                {:else if tab === 'Session'}
-                    <SessionEvents event={eventQuery.data} {hasPremiumFeatures} {onSessionFilter}></SessionEvents>
+                {:else if tab === 'Session Events'}
+                    <SessionEvents event={eventQuery.data} {hasPremiumFeatures}></SessionEvents>
                 {:else if tab === 'Extended Data'}
                     <ExtendedData event={eventQuery.data} project={projectQuery.data} promoted={onPromoted}></ExtendedData>
                 {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/saved-views/use-saved-views.svelte.ts

@@ -2,16 +2,13 @@ import type { IFilter } from '$comp/faceted-filter';
 import type { ColumnVisibilityState } from '@tanstack/svelte-table';
 
 import { deserializeFilters } from '$features/events/components/filters/helpers.svelte';
-import { getOrganizationQuery } from '$features/organizations/api.svelte';
 import { organization } from '$features/organizations/context.svelte';
 import { untrack } from 'svelte';
 
 import type { SavedView } from './models';
 
 import { getSavedViewsByViewQuery } from './api.svelte';
 
-const SAVED_VIEWS_FEATURE = 'feature-saved-views';
-
 export interface SavedViewQueryParams {
     filter: null | string;
     saved: null | string | undefined;
@@ -35,6 +32,7 @@ export interface UseSavedViewsReturn {
     handleLoadView: (id: string) => void;
     handleResetToSaved: () => void;
     isEnabled: boolean;
+    isLoading: boolean;
     isModified: boolean;
     savedViews: SavedView[];
 }
@@ -60,16 +58,7 @@ export function supportsTimeQueryParam(queryParams: SavedViewQueryParams): query
 }
 
 export function useSavedViews(options: UseSavedViewsOptions): UseSavedViewsReturn {
-    const organizationQuery = getOrganizationQuery({
-        route: {
-            get id() {
-                return organization.current;
-            }
-        }
-    });
-
-    // Feature flag gate: only enable saved views if the organization has the feature
-    const isEnabled = $derived(organizationQuery.data?.features?.includes(SAVED_VIEWS_FEATURE) ?? false);
+    const isEnabled = $derived(!!organization.current);
 
     // Some routes, such as stream, do not declare every saved-view query parameter.
     const supportsSort = supportsSortQueryParam(options.queryParams);
@@ -78,7 +67,7 @@ export function useSavedViews(options: UseSavedViewsOptions): UseSavedViewsRetur
     const savedViewsListQuery = getSavedViewsByViewQuery({
         route: {
             get organizationId() {
-                return isEnabled ? organization.current : undefined;
+                return organization.current;
             },
             get view() {
                 return options.view;
@@ -269,6 +258,9 @@ export function useSavedViews(options: UseSavedViewsOptions): UseSavedViewsRetur
         get isEnabled() {
             return isEnabled;
         },
+        get isLoading() {
+            return savedViewsListQuery.isLoading;
+        },
         get isModified() {
             return isModified;
         },

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte

@@ -57,6 +57,13 @@
             return;
         }
 
+        const target = event.target as HTMLElement | null;
+
+        // Don't intercept clicks on interactive elements (links, buttons)
+        if (target?.closest('a, button')) {
+            return;
+        }
+
         // For regular clicks with href, prevent default navigation
         if (rowHref) {
             event.preventDefault();
@@ -86,7 +93,20 @@
                 {@render children()}
             {/if}
             {#each table.getRowModel().rows as row (row.id)}
-                <Table.Row>
+                <Table.Row
+                    tabindex={rowClick ? 0 : undefined}
+                    onkeydown={rowClick
+                        ? (event) => {
+                              if (event.key === 'Enter' || event.key === ' ') {
+                                  event.preventDefault();
+                                  const firstCell = row.getVisibleCells()[0];
+                                  if (firstCell) {
+                                      rowClick(firstCell.row.original);
+                                  }
+                              }
+                          }
+                        : undefined}
+                >
                     {#each row.getVisibleCells() as cell (cell.id)}
                         {#if rowHref && cell.row.original}
                             {@const href = rowHref(cell.row.original)}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte

@@ -12,12 +12,11 @@
     }
 
     let { table }: Props = $props();
-    let page = $state(1);
+    const page = $derived(table.store.state.pagination.pageIndex + 1);
 
     const pageCount = $derived(Math.max(1, table.getPageCount() || 1));
 
     function handlePageChange(nextPage: number) {
-        page = nextPage;
         table.setPageIndex(nextPage - 1);
     }
 </script>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/table.svelte.ts

@@ -175,9 +175,12 @@ export function getSharedTableOptions<TData extends RowData, TPaginationStrategy
     const setMetaImpl = (meta: QueryMeta | undefined) => {
         setMeta(meta);
         const limit = configuration.queryParameters.limit ?? DEFAULT_LIMIT;
-
-        const total = isMemoryPaging ? allData().length : ((meta?.total as number) ?? 0);
-        const totalPages = Math.ceil(total / limit);
+        const currentPage =
+            (configuration.paginationStrategy === 'offset'
+                ? (configuration.queryParameters as TableOffsetPagingParameters).page
+                : (configuration.queryParameters as TableMemoryPagingParameters).page) ?? 1;
+        const total = isMemoryPaging ? allData().length : (meta?.total as number | undefined);
+        const totalPages = total != null ? Math.ceil(total / limit) : meta?.links?.next ? currentPage + 1 : currentPage;
         setPageCount(totalPages);
 
         // // Only adjust pagination for offset pagination here