windmill-components 1.448.50 → 1.472.2

package/package/components/apps/svelte-grid/Grid.svelte

@@ -6,7 +6,8 @@ const fakeShadowStore = writable(undefined);
 const isCtrlOrMetaPressedStore = writable(false);
 </script>
 
-<script>import gridHelp from './utils/helper';
+<script>import { columnConfiguration, WIDE_GRID_COLUMNS } from '../gridUtils';
+import gridHelp from './utils/helper';
 import { twMerge } from 'tailwind-merge';
 import { getContainerHeight } from './utils/container';
 import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
@@ -18,7 +19,6 @@ const dispatch = createEventDispatcher();
 const { app, worldStore } = getContext('AppViewerContext');
 export let items;
 export let rowHeight = ROW_HEIGHT;
-export let cols;
 export let gap = [ROW_GAP_X, ROW_GAP_Y];
 export let throttleUpdate = 100;
 export let throttleResize = 100;
@@ -30,7 +30,8 @@ export let sensor = 20;
 export let root = false;
 export let parentWidth = undefined;
 export let disableMove = false;
-let getComputedCols;
+const cols = columnConfiguration;
+let getComputedCols = $app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined;
 let container;
 $: [gapX, gapY] = gap;
 let xPerPx = 0;
@@ -45,13 +46,18 @@ const onResize = throttle(() => {
         width: containerWidth
     });
 }, throttleUpdate);
+let mounted = false;
 onMount(() => {
     const sizeObserver = new ResizeObserver((entries) => {
         requestAnimationFrame(() => {
             let width = entries[0].contentRect.width;
-            if (width === containerWidth)
+            if (width === containerWidth) {
+                mounted = true;
                 return;
-            getComputedCols = getColumn(parentWidth ?? width, cols);
+            }
+            if ($app.mobileViewOnSmallerScreens != false || !getComputedCols) {
+                getComputedCols = getColumn(parentWidth ?? width, cols);
+            }
             xPerPx = width / getComputedCols;
             if (!containerWidth) {
                 items = specifyUndefinedColumns(items, getComputedCols, cols);
@@ -65,13 +71,14 @@ onMount(() => {
                 onResize();
             }
             containerWidth = width;
+            mounted = true;
         });
     });
     sizeObserver.observe(container);
     return () => sizeObserver.disconnect();
 });
 let sortedItems = [];
-$: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
+$: sortedItems = smartCopy(items).sort((a, b) => a.id.localeCompare(b.id));
 let resizing = false;
 function handleKeyUp(event) {
     if ((event.key === 'Control' || event.key === 'Meta') && $isCtrlOrMetaPressedStore) {
@@ -83,23 +90,33 @@ function handleKeyUp(event) {
 }
 const initialFixedStates = new Map();
 let initItems = undefined;
+function smartCopy(items) {
+    return getComputedCols != undefined
+        ? items.map((item) => {
+            return {
+                ...item,
+                [getComputedCols]: structuredClone(item[getComputedCols])
+            };
+        })
+        : [];
+}
 const updateMatrix = ({ detail }) => {
     let isPointerUp = detail.isPointerUp;
     let citems;
     if (isPointerUp) {
-        try {
-            citems = JSON.parse(JSON.stringify(initItems));
+        if (initItems == undefined) {
+            citems = smartCopy(sortedItems);
         }
-        catch (e) {
-            citems = JSON.parse(JSON.stringify(sortedItems));
+        else {
+            citems = smartCopy(initItems);
         }
         initItems = undefined;
     }
     else {
         if (initItems == undefined) {
-            initItems = JSON.parse(JSON.stringify(sortedItems));
+            initItems = smartCopy(sortedItems);
         }
-        citems = JSON.parse(JSON.stringify(initItems));
+        citems = smartCopy(initItems);
     }
     let nselectedIds = selectedIds ?? [];
     if (detail.id && !selectedIds?.includes(detail.id)) {
@@ -108,7 +125,7 @@ const updateMatrix = ({ detail }) => {
     sortedItems = citems;
     for (let id of nselectedIds) {
         let activeItem = getItemById(id, sortedItems);
-        if (activeItem) {
+        if (activeItem && getComputedCols) {
             activeItem = {
                 ...activeItem,
                 [getComputedCols]: {
@@ -154,8 +171,8 @@ const updateMatrix = ({ detail }) => {
             moveResizes?.[id]?.inActivate();
         }
     }
-    if (isPointerUp) {
-        dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
+    if (isPointerUp && getComputedCols) {
+        dispatch('redraw', sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
     }
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
@@ -194,7 +211,7 @@ let shadows = {};
 export function handleMove({ detail }) {
     Object.entries(moveResizes).forEach(([id, moveResize]) => {
         if (selectedIds?.includes(id)) {
-            moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
+            moveResize?.updateMove(structuredClone(detail.cordDiff), detail.eventY);
         }
     });
     lastDetail = detail;
@@ -210,7 +227,7 @@ export function handleMove({ detail }) {
         // only update the fake shadow if the are different
         !areShadowsTheSame($fakeShadowStore, detail.shadow)) {
         const draggedItem = sortedItems.find((item) => item.id === $componentDraggedIdStore);
-        if (draggedItem) {
+        if (draggedItem && getComputedCols) {
             draggedItem[getComputedCols].x = detail.shadow.x;
             draggedItem[getComputedCols].y = detail.shadow.y;
         }
@@ -315,33 +332,33 @@ export function handleInitMove(id) {
 			</div>
 		{/if}
 	{/if}
+	{#if xPerPx > 0 && getComputedCols}
+		{#each sortedItems as item (item.id)}
+			{#if item[getComputedCols] != undefined}
+				{#if $isCtrlOrMetaPressedStore && item.id === $overlappedStore && $componentDraggedIdStore && $componentDraggedParentIdStore !== item.id && $fakeShadowStore}
+					{@const columnGap = gapX}
+					<!-- gap between the columns in px -->
+					{@const containerBorder = 0.5 * 16}
+					<!-- 0.5rem converted to px (1rem = 16px) -->
+					{@const gridTotalWidth = containerWidth ? containerWidth - 2 * containerBorder : 0}
+					<!-- subtract borders -->
+					{@const availableWidth = gridTotalWidth - 11 * columnGap}
+					<!-- subtract gaps between the 12 columns (11 gaps) -->
+					{@const columnWidthPx = availableWidth / 12}
+					<!-- divide by the number of columns -->
+					{@const maxX = Math.floor(availableWidth / columnWidthPx) - $fakeShadowStore.w}
 
-	{#each sortedItems as item (item.id)}
-		{#if item[getComputedCols] != undefined}
-			{#if $isCtrlOrMetaPressedStore && item.id === $overlappedStore && $componentDraggedIdStore && $componentDraggedParentIdStore !== item.id && $fakeShadowStore}
-				{@const columnGap = gapX}
-				<!-- gap between the columns in px -->
-				{@const containerBorder = 0.5 * 16}
-				<!-- 0.5rem converted to px (1rem = 16px) -->
-				{@const gridTotalWidth = containerWidth ? containerWidth - 2 * containerBorder : 0}
-				<!-- subtract borders -->
-				{@const availableWidth = gridTotalWidth - 11 * columnGap}
-				<!-- subtract gaps between the 12 columns (11 gaps) -->
-				{@const columnWidthPx = availableWidth / 12}
-				<!-- divide by the number of columns -->
-				{@const maxX = Math.floor(availableWidth / columnWidthPx) - $fakeShadowStore.w}
-
-				<div
-					class="absolute"
-					style={`
+					<div
+						class="absolute"
+						style={`
 						left: ${item[getComputedCols].x * xPerPx + gapX}px;
 						top: ${item[getComputedCols].y * yPerPx + gapY}px;
 					`}
-				>
-					<div class="relative h-full w-full">
-						<div
-							class={twMerge('absolute transition-all duration-[50ms] bg-blue-300')}
-							style={`
+					>
+						<div class="relative h-full w-full">
+							<div
+								class={twMerge('absolute transition-all duration-[50ms] bg-blue-300')}
+								style={`
 								left: calc(${
 									Math.min($fakeShadowStore.x, maxX) * $fakeShadowStore.xPerPx + gapX
 								}px + 0.5rem + ${getDeltaXByComponent(item.data['type'])});
@@ -351,68 +368,73 @@ export function handleInitMove(id) {
 								width: ${$fakeShadowStore.w * $fakeShadowStore.xPerPx - gapX * 2}px;
 								height: ${$fakeShadowStore.h * $fakeShadowStore.yPerPx - gapY * 2}px;
 							`}
-						/>
+							/>
+						</div>
 					</div>
-				</div>
-			{/if}
-
-			<MoveResize
-				on:initmove={() => handleInitMove(item.id)}
-				on:move={handleMove}
-				bind:shadow={shadows[item.id]}
-				bind:this={moveResizes[item.id]}
-				on:repaint={handleRepaint}
-				on:resizeStart={() => (resizing = true)}
-				on:resizeEnd={() => (resizing = false)}
-				onTop={Boolean(allIdsInPath?.includes(item.id))}
-				id={item.id}
-				{xPerPx}
-				{yPerPx}
-				fakeShadow={$fakeShadowStore}
-				on:dropped={(e) => {
-					$componentDraggedIdStore = undefined
-					$componentDraggedParentIdStore = undefined
-					$overlappedStore = undefined
-					$fakeShadowStore = undefined
-					lastDetail = undefined
+				{/if}
+				<MoveResize
+					{mounted}
+					on:initmove={() => handleInitMove(item.id)}
+					on:move={handleMove}
+					bind:shadow={shadows[item.id]}
+					bind:this={moveResizes[item.id]}
+					on:repaint={handleRepaint}
+					on:resizeStart={() => (resizing = true)}
+					on:resizeEnd={() => (resizing = false)}
+					onTop={Boolean(allIdsInPath?.includes(item.id))}
+					id={item.id}
+					{xPerPx}
+					{yPerPx}
+					fakeShadow={$fakeShadowStore}
+					on:dropped={(e) => {
+						$componentDraggedIdStore = undefined
+						$componentDraggedParentIdStore = undefined
+						$overlappedStore = undefined
+						$fakeShadowStore = undefined
+						lastDetail = undefined
 
-					if (!$isCtrlOrMetaPressedStore) {
-						return
-					}
+						if (!$isCtrlOrMetaPressedStore) {
+							return
+						}
 
-					dispatch('dropped', e.detail)
-				}}
-				width={xPerPx == 0
-					? 0
-					: Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
-					  gapX * 2}
-				height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
-				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
-				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
-				item={item[getComputedCols]}
-				cols={getComputedCols}
-				{gapX}
-				{gapY}
-				{sensor}
-				container={scroller}
-				nativeContainer={container}
-				overlapped={$overlappedStore}
-				moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
-				type={item.data['type']}
-				{disableMove}
-			>
-				{#if item[getComputedCols]}
-					<slot
-						dataItem={item}
-						hidden={false}
-						overlapped={$overlappedStore}
-						moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
-						componentDraggedId={$componentDraggedIdStore}
-					/>
-				{/if}
-			</MoveResize>
-		{/if}
-	{/each}
+						dispatch('dropped', e.detail)
+					}}
+					width={xPerPx == 0
+						? 0
+						: Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
+						  gapX * 2}
+					height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+					top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
+					left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+					item={item[getComputedCols]}
+					cols={getComputedCols}
+					{gapX}
+					{gapY}
+					{sensor}
+					container={scroller}
+					nativeContainer={container}
+					overlapped={$overlappedStore}
+					moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
+					type={item.data['type']}
+					{disableMove}
+				>
+					{#if item[getComputedCols]}
+						<slot
+							dataItem={item}
+							hidden={false}
+							overlapped={$overlappedStore}
+							moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
+							componentDraggedId={$componentDraggedIdStore}
+						/>
+					{/if}
+				</MoveResize>
+			{/if}
+		{/each}
+	{:else if root}
+		<div
+			class="h-full w-full flex-col animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]"
+		/>
+	{/if}
 </div>
 
 <style>

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -4,7 +4,6 @@ declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
         rowHeight?: number | undefined;
-        cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
         throttleResize?: number | undefined;

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -25,6 +25,7 @@ export let moveMode = 'move';
 export let type = undefined;
 export let fakeShadow = undefined;
 export let disableMove = true;
+export let mounted = false;
 const ctx = getContext('AppEditorContext');
 const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
@@ -394,7 +395,7 @@ function shouldDisplayShadow(moveMode, overlapped) {
 		: trans
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
 		: `${
-				xPerPx > 0 ? 'transition: transform 0.1s, opacity 0.1s;' : ''
+				xPerPx > 0 && mounted ? 'transition: transform 0.1s, opacity 0.1s;' : ''
 		  } transform: translate(${left}px, ${top}px); `} "
 >
 	<slot />

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
         type?: string | undefined;
         fakeShadow?: GridShadow | undefined;
         disableMove?: boolean | undefined;
+        mounted?: boolean | undefined;
         inActivate?: (() => void) | undefined;
         initmove?: (() => void) | undefined;
         updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;

package/package/components/apps/svelte-select/lib/Select.svelte.d.ts

@@ -10,10 +10,12 @@ export default class Select extends SvelteComponent<{
     label?: string | undefined;
     filter?: typeof _filter | undefined;
     class?: string | undefined;
-    placeholder?: string | undefined;
+    portal?: boolean | undefined;
+    items?: any;
     loading?: boolean | undefined;
     required?: boolean | undefined;
-    items?: any;
+    placeholder?: string | undefined;
+    floatingConfig?: {} | undefined;
     container?: any;
     loadOptions?: any;
     filterText?: string | undefined;
@@ -21,7 +23,6 @@ export default class Select extends SvelteComponent<{
     groupBy?: any;
     filterSelectedItems?: boolean | undefined;
     itemFilter?: ((label: any, filterText: any, option: any) => boolean) | undefined;
-    portal?: boolean | undefined;
     justValue?: any;
     inAppEditor?: boolean | undefined;
     getItems?: typeof _getItems | undefined;
@@ -49,7 +50,6 @@ export default class Select extends SvelteComponent<{
     showChevron?: boolean | undefined;
     listOffset?: number | undefined;
     hoverItemIndex?: number | undefined;
-    floatingConfig?: {} | undefined;
     handleClear?: (() => void) | undefined;
     ariaValues?: ((values: any) => string) | undefined;
     ariaListOpen?: ((label: any, count: any) => string) | undefined;
@@ -115,10 +115,12 @@ declare const __propDef: {
         label?: string | undefined;
         filter?: typeof _filter | undefined;
         class?: string | undefined;
-        placeholder?: string | undefined;
+        portal?: boolean | undefined;
+        items?: any;
         loading?: boolean | undefined;
         required?: boolean | undefined;
-        items?: any;
+        placeholder?: string | undefined;
+        floatingConfig?: {} | undefined;
         container?: any;
         loadOptions?: any;
         filterText?: string | undefined;
@@ -126,7 +128,6 @@ declare const __propDef: {
         groupBy?: any;
         filterSelectedItems?: boolean | undefined;
         itemFilter?: ((label: any, filterText: any, option: any) => boolean) | undefined;
-        portal?: boolean | undefined;
         justValue?: any;
         inAppEditor?: boolean | undefined;
         getItems?: typeof _getItems | undefined;
@@ -154,7 +155,6 @@ declare const __propDef: {
         showChevron?: boolean | undefined;
         listOffset?: number | undefined;
         hoverItemIndex?: number | undefined;
-        floatingConfig?: {} | undefined;
         handleClear?: (() => void) | undefined;
         ariaValues?: ((values: any) => string) | undefined;
         ariaListOpen?: ((label: any, count: any) => string) | undefined;

package/package/components/apps/types.d.ts

@@ -108,6 +108,7 @@ export type App = {
     css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
     theme: AppTheme | undefined;
+    lazyInitRequire?: string[] | undefined;
     hideLegacyTopBar?: boolean | undefined;
     mobileViewOnSmallerScreens?: boolean | undefined;
     version?: number;
@@ -142,6 +143,7 @@ export type AppViewerContext = {
     initialized: Writable<{
         initializedComponents: string[];
         initialized: boolean;
+        runnableInitialized: Record<string, any>;
     }>;
     selectedComponent: Writable<string[] | undefined>;
     mode: Writable<EditorMode>;

package/package/components/apps/utils.js

@@ -198,7 +198,7 @@ declare function setValue(id: string, value: any): void;
  */
 declare function setSelectedIndex(id: string, index: number): void;
 
-/** close a drawer or modal
+/** open a drawer or modal
   * @param id component's id
  */
 declare function open(id: string): void;

package/package/components/auditLogs/AuditLogMobileFilters.svelte

@@ -1,17 +1,18 @@
 <script>import { Filter } from 'lucide-svelte';
-import { Popup, Button } from '../common';
+import { Button } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	contentClasses="border rounded-lg shadow-lg p-4 flex flex-col w-80 pt-8 bg-surface"
 >
 	<svelte:fragment slot="button">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 			Filters
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-80">
+	<svelte:fragment slot="content">
 		<slot name="filters" />
-	</div>
-</Popup>
+	</svelte:fragment>
+</Popover>

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -4,21 +4,26 @@ import CalendarPicker from '../common/calendarPicker/CalendarPicker.svelte';
 import { AuditService, ResourceService, UserService, ScriptService, FlowService, AppService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
 import { Loader2, RefreshCcw } from 'lucide-svelte';
-import { onDestroy } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 let usernames;
 let resources;
 let loading = false;
+let page = undefined;
 export let logs = [];
 export let username = 'all';
-export let pageIndex = 0;
+export let pageIndex = 1;
+export let hasMore = false;
 export let before = undefined;
 export let after = undefined;
 export let perPage = 100;
 export let operation = 'all';
 export let resource = 'all';
 export let actionKind = 'all';
-async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind) {
+export let scope = undefined;
+async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) {
     loading = true;
     if (username == 'all') {
         username = undefined;
@@ -34,7 +39,7 @@ async function loadLogs(username, page, perPage, before, after, operation, resou
         resource = undefined;
     }
     logs = await AuditService.listAuditLogs({
-        workspace: $workspaceStore,
+        workspace: scope === 'instance' ? 'global' : $workspaceStore,
         page,
         perPage,
         before,
@@ -42,8 +47,10 @@ async function loadLogs(username, page, perPage, before, after, operation, resou
         username,
         operation,
         resource,
-        actionKind
+        actionKind,
+        allWorkspaces: scope === 'all_workspaces'
     });
+    hasMore = logs.length > 0 && logs.length === perPage;
     loading = false;
 }
 async function loadUsers() {
@@ -72,14 +79,17 @@ async function loadResources() {
         .concat(a.map((a) => a.path))
         .sort();
 }
-$: {
-    if ($workspaceStore && refresh) {
-        loadUsers();
-        loadResources();
-        loadLogs(username, pageIndex, perPage, before, after, operation, resource, actionKind);
-    }
+$: $workspaceStore && refresh && refreshLogs();
+let initialLoad = true;
+function refreshLogs() {
+    loadUsers();
+    loadResources();
+    loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
+    tick().then(() => {
+        initialLoad = false;
+    });
 }
-function updateQueryParams({ username, perPage, before, after, operation, resource, actionKind }) {
+function updateLogs() {
     const queryParams = [];
     function addQueryParam(key, value) {
         if (value !== undefined && value !== null && value !== '' && value !== 'all') {
@@ -87,43 +97,39 @@ function updateQueryParams({ username, perPage, before, after, operation, resour
         }
     }
     addQueryParam('username', username);
-    addQueryParam('page', 0);
+    addQueryParam('page', page);
     addQueryParam('perPage', perPage);
     addQueryParam('before', before);
     addQueryParam('after', after);
     addQueryParam('operation', operation);
     addQueryParam('resource', resource);
     addQueryParam('actionKind', actionKind);
+    if (scope && $workspaceStore == 'admins') {
+        addQueryParam('scope', scope);
+        addQueryParam('workspace', 'admins');
+    }
     const query = '?' + queryParams.join('&');
     goto(query);
+    loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
+}
+function updateQueryParams() {
+    if (initialLoad) {
+        return;
+    }
+    page = 1;
+    pageIndex = 1;
+    updateLogs();
 }
 function updatePageQueryParams(pageIndex) {
-    const queryParams = [];
-    function addQueryParam(key, value) {
-        if (value !== undefined && value !== null && value !== '' && value !== 'all') {
-            queryParams.push(`${key}=${encodeURIComponent(value)}`);
-        }
+    if (initialLoad) {
+        return;
     }
-    addQueryParam('username', username);
-    addQueryParam('page', pageIndex);
-    addQueryParam('perPage', perPage);
-    addQueryParam('before', before);
-    addQueryParam('after', after);
-    addQueryParam('operation', operation);
-    addQueryParam('resource', resource);
-    addQueryParam('actionKind', actionKind);
-    const query = '?' + queryParams.join('&');
-    goto(query);
+    page = pageIndex;
+    updateLogs();
 }
-$: updateQueryParams({
-    username,
-    perPage,
-    before,
-    after,
-    operation,
-    resource,
-    actionKind
-});
+// observe all the variables that should trigger an update
+$: username, perPage, before, after, operation, resource, actionKind, scope, updateQueryParams();
+// observe the pageIndex variable that should trigger an update
 $: updatePageQueryParams(pageIndex);
 window.addEventListener('popstate', handlePopState);
 function handlePopState() {
@@ -232,6 +238,37 @@ let refresh = 1;
 </script>
 
 <div class="flex flex-col items-center gap-6 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
+	{#if $workspaceStore == 'admins'}
+		<div class="flex gap-1 relative w-full">
+			<span class="text-xs absolute -top-4">Scope</span>
+			<ToggleButtonGroup
+				selected={scope ?? 'admins'}
+				on:selected={({ detail }) => {
+					scope = detail === 'admins' ? undefined : detail
+				}}
+				let:item
+			>
+				<ToggleButton
+					value={'admins'}
+					label="Admins"
+					tooltip="Displays events from the admins workspace only."
+					{item}
+				/>
+				<ToggleButton
+					value="all_workspaces"
+					label="All"
+					tooltip="Displays events from all workspaces."
+					{item}
+				/>
+				<ToggleButton
+					value="instance"
+					label="Instance"
+					tooltip="Displays instance-scope events, such as user logins and registrations, instance user and group management, and worker configuration changes."
+					{item}
+				/>
+			</ToggleButtonGroup>
+		</div>
+	{/if}
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">After</span>
 		<input type="text" value={after ?? 'After'} disabled />
@@ -329,6 +366,7 @@ let refresh = 1;
 				pageIndex = 1
 				perPage = 100
 				resource = 'all'
+				scope = undefined
 			}}
 			size="xs"
 		>