Added data table refresh component

Author: niemyjski

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

@@ -8,14 +8,15 @@
     import type { EventSummaryModel, SummaryTemplateKeys } from '../summary/index';
 
     interface Props {
+        bodyChildren?: 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, isLoading, limit = $bindable(), rowClick, table, toolbarChildren }: Props = $props();
 </script>
 
 <DataTable.Root>
@@ -24,14 +25,17 @@
             {@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>

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

@@ -12,11 +12,11 @@
 
     interface Props {
         children?: Snippet;
-        rowclick?: (row: TData) => void;
+        rowClick?: (row: TData) => void;
         table: SvelteTable<TData>;
     }
 
-    let { children, rowclick, table }: Props = $props();
+    let { children, rowClick, table }: Props = $props();
 
     function getHeaderColumnClass(header: Header<TData, unknown>) {
         const classes = [(header.column.columnDef.meta as { class?: string })?.class || ''];
@@ -36,8 +36,8 @@
             return;
         }
 
-        if (rowclick) {
-            rowclick(cell.row.original);
+        if (rowClick) {
+            rowClick(cell.row.original);
         }
     }
 </script>

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

@@ -0,0 +1,30 @@
+<script module lang="ts">
+    type TData = unknown;
+</script>
+
+<script generics="TData" lang="ts">
+    import type { Snippet } from 'svelte';
+
+    import { Button } from '$comp/ui/button';
+    import * as Table from '$comp/ui/table';
+    import { type Table as SvelteTable } from '@tanstack/svelte-table';
+
+    interface Props {
+        children?: Snippet;
+        refresh: () => Promise<void>;
+        table: SvelteTable<TData>;
+    }
+
+    let { children, refresh, table }: Props = $props();
+</script>
+
+<Table.Row class="text-center">
+    <Table.Cell colspan={table.getVisibleLeafColumns().length}>
+        {#if children}
+            {@render children()}
+        {:else}
+            New data is available!
+            <Button variant="link" onclick={refresh} class="px-0">Click here to see the latest changes and reset any selections.</Button>
+        {/if}
+    </Table.Cell>
+</Table.Row>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/index.ts

@@ -3,6 +3,7 @@ import Empty from './data-table-empty.svelte';
 import Loading from './data-table-loading.svelte';
 import PageSize from './data-table-page-size.svelte';
 import Pagination from './data-table-pagination.svelte';
+import Refresh from './data-table-refresh.svelte';
 import Toolbar from './data-table-toolbar.svelte';
 import Root from './data-table.svelte';
 
@@ -14,11 +15,13 @@ export {
     Loading as DataTableLoading,
     PageSize as DataTablePageSize,
     Pagination as DataTablePagination,
+    Refresh as DataTableRefresh,
     Toolbar as DataTableToolbar,
     Empty,
     Loading,
     PageSize,
     Pagination,
+    Refresh,
     Root,
     Toolbar
 };

src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { EventSummaryModel, SummaryTemplateKeys } from '$features/events/components/summary/index';
 
+    import * as DataTable from '$comp/data-table';
     import * as FacetedFilter from '$comp/faceted-filter';
     import { toFacetedFilters } from '$comp/filters/facets';
     import { DateFilter, filterChanged, filterRemoved, FilterSerializer, getDefaultFilters, type IFilter, toFilter } from '$comp/filters/filters.svelte';
@@ -15,7 +16,7 @@
     import { useFetchClientStatus } from '$shared/api/api.svelte';
     import { persisted } from '$shared/persisted.svelte';
     import { type FetchClientResponse, useFetchClient } from '@exceptionless/fetchclient';
-    import { createTable, type RowSelectionState } from '@tanstack/svelte-table';
+    import { createTable } from '@tanstack/svelte-table';
     import { useEventListener } from 'runed';
     import { debounce } from 'throttle-debounce';
     import IconOpenInNew from '~icons/mdi/open-in-new';
@@ -122,6 +123,11 @@
         await debouncedLoadData();
     }
 
+    async function refresh() {
+        showRefreshStaleDataRow = false;
+        await loadData();
+    }
+
     useEventListener(document, 'refresh', async () => await loadData());
     useEventListener(document, 'PersistentEventChanged', async (event) => await onPersistentEvent((event as CustomEvent).detail));
 
@@ -134,10 +140,15 @@
     <Card.Root>
         <Card.Title class="p-6 pb-0 text-2xl" level={2}>Events</Card.Title>
         <Card.Content>
-            <EventsDataTable bind:limit={limit.value} isLoading={clientStatus.isLoading} {rowclick} {table}>
+            <EventsDataTable bind:limit={limit.value} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
                 {#snippet toolbarChildren()}
                     <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
                 {/snippet}
+                {#snippet bodyChildren()}
+                    {#if showRefreshStaleDataRow}
+                        <DataTable.DataTableRefresh {table} {refresh} />
+                    {/if}
+                {/snippet}
             </EventsDataTable>
         </Card.Content>
     </Card.Root>

src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

@@ -112,7 +112,7 @@
     <Card.Root>
         <Card.Title class="p-6 pb-0 text-2xl" level={2}>Issues</Card.Title>
         <Card.Content>
-            <EventsDataTable bind:limit={limit.value} isLoading={clientStatus.isLoading} {rowclick} {table}>
+            <EventsDataTable bind:limit={limit.value} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
                 {#snippet toolbarChildren()}
                     <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
                 {/snippet}

src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte

@@ -140,7 +140,7 @@
             <DataTable.Toolbar {table}>
                 <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
             </DataTable.Toolbar>
-            <DataTable.Body {rowclick} {table}>
+            <DataTable.Body rowClick={rowclick} {table}>
                 {#if clientStatus.isLoading}
                     <DelayedRender>
                         <DataTable.Loading {table} />