windmill-components 1.434.1 → 1.444.1

package/package/components/sidebar/CriticalAlertModalInner.svelte

@@ -1,64 +1,29 @@
-<script>import Button from '../common/button/Button.svelte';
-import Toggle from '../Toggle.svelte';
+<script>import Toggle from '../Toggle.svelte';
 import { SettingService } from '../../gen';
-import { CheckCircle2, AlertCircle, RefreshCw, CheckSquare2, AlertTriangle } from 'lucide-svelte';
-import { onMount } from 'svelte';
-import { devopsRole, workspaceStore, instanceSettingsSelectedTab, superadmin, userStore } from '../../stores';
+import { devopsRole, instanceSettingsSelectedTab, superadmin } from '../../stores';
 import { goto } from '$app/navigation';
-import { sendUserToast } from '../../toast';
-import Section from '../Section.svelte';
+import List from '../common/layout/List.svelte';
+import RefreshButton from '../common/button/RefreshButton.svelte';
+import CriticalAlertTable from './CriticalAlertTable.svelte';
+import Alert from '../common/alert/Alert.svelte';
 export let updateHasUnacknowledgedCriticalAlerts;
 export let getCriticalAlerts;
 export let acknowledgeCriticalAlert;
 export let acknowledgeAllCriticalAlerts;
 export let numUnacknowledgedCriticalAlerts;
-let alerts = [];
+let filteredAlerts = [];
 let isRefreshing = false;
 let hasCriticalAlertChannels = true;
-export let muteSettings = {
-    workspace: true,
-    global: true
-};
-$: muteSettings;
-$: {
-    if (initialMuteSettings.workspace !== muteSettings.workspace ||
-        initialMuteSettings.global !== muteSettings.global) {
-        saveMuteSettings();
-    }
-}
-$: numUnacknowledgedCriticalAlerts >= 0 && getAlerts(true);
-let initialMuteSettings = muteSettings;
-async function saveMuteSettings() {
-    if (initialMuteSettings.workspace !== muteSettings.workspace) {
-        // Workspace
-        await SettingService.workspaceMuteCriticalAlertsUi({
-            workspace: $workspaceStore,
-            requestBody: {
-                mute_critical_alerts: muteSettings.workspace
-            }
-        });
-    }
-    if ($superadmin && initialMuteSettings.global !== muteSettings.global) {
-        // Global
-        await SettingService.setGlobal({
-            key: 'critical_alert_mute_ui',
-            requestBody: { value: muteSettings.global }
-        });
-    }
-    sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
-    getAlerts(true);
-    initialMuteSettings = { ...muteSettings };
-}
 $: loading = isRefreshing;
-onMount(() => {
+$: if (numUnacknowledgedCriticalAlerts) {
     refreshAlerts();
-    initialMuteSettings = { ...muteSettings };
-});
+}
 // Pagination
 let page = 1;
 let pageSize = 10;
 let hasMore = true;
 let hideAcknowledged = false;
+export let workspaceContext = false;
 async function acknowledgeAll() {
     await acknowledgeAllCriticalAlerts();
     getAlerts(false);
@@ -66,14 +31,14 @@ async function acknowledgeAll() {
 async function fetchAlerts(pageNumber) {
     isRefreshing = true;
     try {
-        const newAlerts = await getCriticalAlerts({
+        const res = await getCriticalAlerts({
             page: pageNumber,
             pageSize: pageSize,
             acknowledged: hideAcknowledged ? false : undefined
         });
-        alerts = newAlerts;
-        hasMore = newAlerts.length === pageSize;
-        page = pageNumber;
+        hasMore = pageNumber < res.total_pages;
+        totalNumberOfAlerts = res.total_rows;
+        filteredAlerts = res.alerts;
         updateHasUnacknowledgedCriticalAlerts();
     }
     finally {
@@ -83,9 +48,9 @@ async function fetchAlerts(pageNumber) {
     }
 }
 async function getAlerts(reset) {
-    if (reset)
+    if (reset) {
         page = 1;
-    updateHasUnacknowledgedCriticalAlerts();
+    }
     await fetchAlerts(page);
 }
 async function checkCriticalAlertChannels() {
@@ -96,193 +61,81 @@ async function acknowledgeAlert(id) {
     await acknowledgeCriticalAlert({ id });
     getAlerts(false);
 }
-function formatDate(dateString) {
-    if (!dateString)
-        return '';
-    const date = new Date(dateString);
-    return new Intl.DateTimeFormat('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit'
-    }).format(date);
-}
-async function refreshAlerts() {
+export async function refreshAlerts() {
     if ($superadmin)
         checkCriticalAlertChannels();
     await getAlerts(true);
 }
 function goToPreviousPage() {
     if (page > 1) {
-        fetchAlerts(page - 1);
+        page -= 1;
+        fetchAlerts(page);
     }
 }
 function goToNextPage() {
     if (hasMore) {
-        fetchAlerts(page + 1);
+        page += 1;
+        fetchAlerts(page);
     }
 }
 function goToCoreTab() {
     goto('/#superadmin-settings');
     instanceSettingsSelectedTab.set('Core');
 }
-export let workspaceContext = false;
-$: {
-    workspaceContextChanged(workspaceContext);
-}
-async function workspaceContextChanged(_ctx) {
-    await getAlerts(true);
+function onFiltersChange() {
+    getAlerts(true);
 }
+// Update filter change handlers
+$: hideAcknowledged, workspaceContext, onFiltersChange();
+let totalNumberOfAlerts = 0;
 </script>
 
-<div>
-	<div class="grid grid-cols-3 gap-4 col-start-3">
-		<div class="pt-1 col-span-2">
-			{#if !hasCriticalAlertChannels && $superadmin}
-				<div class="flex flex-row pb-4">
-					<AlertTriangle color="orange" class="w-6 h-6 mr-2" />
-					<p>
-						No critical alert channels are set up. Go to the
-						<a href="/#superadmin-settings" on:click|preventDefault={goToCoreTab}
-							>Instance Settings</a
-						>
-						page to configure critical alert channels.
-					</p>
-				</div>
-			{/if}
+<List gap="sm">
+	{#if !hasCriticalAlertChannels && $superadmin}
+		<div class="w-full">
+			<Alert title="No critical alert channels are set up" type="warning" size="xs">
+				Go to the
+				<a href="/#superadmin-settings" on:click|preventDefault={goToCoreTab}>Instance settings</a>
+				page to configure critical alert channels.
+			</Alert>
 		</div>
+	{/if}
 
-		<div class="flex flex-col justify-between col-start-3">
-			<div class="flex flex-row justify-end mt-[-38px] pb-3">
-				<Button
-					color="green"
-					startIcon={{ icon: CheckSquare2 }}
-					size="xs"
-					disabled={numUnacknowledgedCriticalAlerts === 0}
-					on:click={acknowledgeAll}
-				>
-					Acknowledge All</Button
-				>
-			</div>
-
-			{#if $devopsRole}
-				<div class="flex flex-row py-2 pb-3">
-					<Toggle
-						bind:checked={workspaceContext}
-						options={{ right: `Workspace: '${$workspaceStore}'`, left: "Context: 'Global'" }}
-						size="xs"
-					/>
-				</div>
-			{/if}
-
-			{#if $superadmin || $userStore?.is_admin}
-				<Section label="Mute Settings" collapsable={true} small={true}>
-					{#if $superadmin}
-						<div class="flex flex-row pb-1">
-							<Toggle
-								bind:checked={muteSettings.global}
-								options={{ right: 'Mute critical alerts instance wide' }}
-								size="xs"
-							/>
-						</div>
-					{/if}
-
-					<div class="flex flex-row pb-1">
+	<div class="w-full">
+		<List horizontal justify="between">
+			<div class="w-full">
+				<List horizontal justify="start" gap="md">
+					{#if $devopsRole}
 						<Toggle
-							bind:checked={muteSettings.workspace}
-							options={{ right: 'Mute critical alerts for current workspace' }}
+							bind:checked={workspaceContext}
+							options={{ right: `Workspace only` }}
 							size="xs"
 						/>
-					</div>
-				</Section>
-			{/if}
+					{/if}
 
-			<div class="pt-2 flex justify-between items-center">
-				<div class="pr-2">
-					<Toggle
-						bind:checked={hideAcknowledged}
-						on:change={refreshAlerts}
-						options={{ right: 'Hide Acknowledged' }}
-						size="xs"
-					/>
-				</div>
-				<button
-					class="mb-1 p-2 rounded-full hover:bg-gray-200"
-					on:click={refreshAlerts}
-					disabled={loading}
-				>
-					<RefreshCw class={loading ? 'animate-spin ' : ''} size="20" />
-				</button>
+					<Toggle bind:checked={hideAcknowledged} options={{ right: 'Non-Acked only' }} size="xs" />
+				</List>
 			</div>
-		</div>
-	</div>
 
-	<!-- Table of alerts with scrollable body -->
-	<div class="overflow-y-auto max-h-1/2">
-		<table class="min-w-full w-full">
-			<thead class="bg-gray-600 text-white sticky top-0 z-10">
-				<tr>
-					<th class="w-[60px] px-4 py-2 text-center">Type</th>
-					<th class="px-4 py-2 text-center">Message</th>
-					<th class="w-[150px] px-4 py-2 text-center">Created At</th>
-					{#if $devopsRole}
-						<th class="w-[80px] px-4 py-2 text-center">Workspace</th>
-					{/if}
-					<th class="w-[180px] px-4 py-2 text-center">Acknowledge</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each alerts as { id, alert_type, message, created_at, acknowledged, workspace_id }}
-					{#if !hideAcknowledged || !acknowledged}
-						<tr class="bg-gray-100 dark:bg-gray-700 dark:text-white text-center">
-							<td class="border px-4 py-2 w-[100px]">
-								{#if alert_type === 'recovered_critical_error'}
-									<span title="Recovered Critical Alert">
-										<CheckCircle2 size="20" color="green" />
-									</span>
-								{:else}
-									<span title="Critical Alert">
-										<AlertCircle size="20" color="red" />
-									</span>
-								{/if}
-							</td>
-							<td class="border px-4 py-2">{message}</td>
-							<!-- Flexible width -->
-							<td class="border px-4 py-2 w-[150px]">{formatDate(created_at)}</td>
-							{#if $devopsRole}
-								<td class="border px-4 py-2 w-[150px]">{workspace_id ? workspace_id : 'global'}</td>
-							{/if}
-							<td class="border px-4 py-2 w-[180px]">
-								<div class="flex justify-center items-center">
-									{#if !acknowledged}
-										<Button
-											color="green"
-											startIcon={{ icon: CheckSquare2 }}
-											size="xs2"
-											on:click={() => {
-												if (id) acknowledgeAlert(id)
-											}}>Acknowledge</Button
-										>
-									{:else}
-										<CheckCircle2 size="20" color="green" />
-									{/if}
-								</div>
-							</td>
-						</tr>
-					{/if}
-				{/each}
-			</tbody>
-		</table>
-	</div>
-	<div class="flex flex-1 pt-2 gap-x-4 justify-end">
-		<Button size="xs2" on:click={goToPreviousPage} disabled={page <= 1}>Previous</Button>
-		<span>Page {page}</span>
-		<Button size="xs2" on:click={goToNextPage} disabled={!hasMore}>Next</Button>
+			<List wFull={false} horizontal gap="md" justify="end">
+				<div class="text-xs text-tertiary whitespace-nowrap"
+					>{`${totalNumberOfAlerts === 1000 ? '1000+' : totalNumberOfAlerts ?? '?'} items`}
+				</div>
+				<RefreshButton {loading} on:click={refreshAlerts} />
+			</List>
+		</List>
 	</div>
 
-	{#if alerts.length === 0}
-		<p class="text-center text-gray-500 mt-4">No critical alerts available.</p>
-	{/if}
-</div>
+	<CriticalAlertTable
+		alerts={filteredAlerts}
+		{acknowledgeAlert}
+		{hideAcknowledged}
+		{goToNextPage}
+		{goToPreviousPage}
+		bind:page
+		{hasMore}
+		{acknowledgeAll}
+		{numUnacknowledgedCriticalAlerts}
+		{pageSize}
+	/>
+</List>

package/package/components/sidebar/CriticalAlertModalInner.svelte.d.ts

@@ -6,11 +6,8 @@ declare const __propDef: {
         acknowledgeCriticalAlert: any;
         acknowledgeAllCriticalAlerts: any;
         numUnacknowledgedCriticalAlerts: any;
-        muteSettings?: {
-            workspace: boolean;
-            global: boolean;
-        } | undefined;
         workspaceContext?: boolean | undefined;
+        refreshAlerts?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,5 +18,6 @@ export type CriticalAlertModalInnerProps = typeof __propDef.props;
 export type CriticalAlertModalInnerEvents = typeof __propDef.events;
 export type CriticalAlertModalInnerSlots = typeof __propDef.slots;
 export default class CriticalAlertModalInner extends SvelteComponent<CriticalAlertModalInnerProps, CriticalAlertModalInnerEvents, CriticalAlertModalInnerSlots> {
+    get refreshAlerts(): () => Promise<void>;
 }
 export {};

package/package/components/sidebar/CriticalAlertTable.svelte

@@ -0,0 +1,142 @@
+<script>import Cell from '../table/Cell.svelte';
+import DataTable from '../table/DataTable.svelte';
+import Head from '../table/Head.svelte';
+import Row from '../table/Row.svelte';
+import Button from '../common/button/Button.svelte';
+import { AlertCircle, CheckCircle2 } from 'lucide-svelte';
+import { devopsRole } from '../../stores';
+import List from '../common/layout/List.svelte';
+import { Skeleton } from '../common';
+export let alerts;
+export let hideAcknowledged = false;
+export let goToNextPage;
+export let goToPreviousPage;
+export let acknowledgeAlert;
+export let acknowledgeAll;
+export let numUnacknowledgedCriticalAlerts;
+export let page = 1;
+export let hasMore = true;
+export let pageSize = 0;
+let headerHeight = 0;
+let contentHeight = 0;
+function formatDate(dateString) {
+    if (!dateString)
+        return '';
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    }).format(date);
+}
+$: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
+</script>
+
+<div class="relative grow min-h-0 w-full">
+	<DataTable
+		size="xs"
+		paginated
+		on:next={goToNextPage}
+		on:previous={goToPreviousPage}
+		bind:currentPage={page}
+		{hasMore}
+		bind:contentHeight
+	>
+		<Head>
+			<tr bind:clientHeight={headerHeight}>
+				<Cell head first class="min-w-12">&nbsp;</Cell>
+				<Cell head class="min-w-24 w-full">Message</Cell>
+				<Cell head class="min-w-28">Created At</Cell>
+				{#if $devopsRole}
+					<Cell head class="min-w-24">Context</Cell>
+				{/if}
+				<Cell head last class="min-w-36">
+					<List horizontal gap="sm">
+						<span>Acked</span>
+
+						<Button
+							color="green"
+							startIcon={{ icon: CheckCircle2 }}
+							size="xs2"
+							disabled={numUnacknowledgedCriticalAlerts === 0}
+							on:click={acknowledgeAll}
+							title="Acknowledge all"
+						>
+							All</Button
+						>
+					</List>
+				</Cell>
+			</tr>
+		</Head>
+		{#if alerts == undefined}
+			<tbody>
+				{#each new Array(3) as _}
+					<Row>
+						{#each new Array(5) as _}
+							<Cell>
+								<Skeleton layout={[[5]]} />
+							</Cell>
+						{/each}
+					</Row>
+				{/each}
+			</tbody>
+		{:else if alerts.length === 0}
+			<div class="absolute top-0 left-0 w-full h-full center-center">
+				<p class="text-center text-gray-500 mt-4">No critical alerts.</p>
+			</div>
+		{:else}
+			<tbody class="divide-y border-b w-full overflow-y-auto">
+				{#each alerts as { id, alert_type, message, created_at, acknowledged, workspace_id }}
+					{#if !hideAcknowledged || !acknowledged}
+						<Row disabled={acknowledged}>
+							<Cell class="py-0">
+								<div class="flex items-center justify-center" style="height: {availableHeight}px">
+									{#if alert_type === 'recovered_critical_error'}
+										<span title="Recovered Critical Alert">
+											<CheckCircle2 size="20" color="green" />
+										</span>
+									{:else}
+										<span title="Critical Alert">
+											<AlertCircle size="20" color="red" />
+										</span>
+									{/if}
+								</div>
+							</Cell>
+
+							<Cell wrap>
+								<div class="flex-shrink min-w-0 break-words">{message}</div>
+							</Cell>
+							<!-- Flexible width -->
+							<Cell wrap>{formatDate(created_at)}</Cell>
+							{#if $devopsRole}
+								<Cell>{workspace_id ? workspace_id : 'global'}</Cell>
+							{/if}
+							<Cell>
+								<div class="w-full flex justify-center items-center">
+									{#if !acknowledged}
+										<Button
+											color="green"
+											startIcon={{ icon: CheckCircle2 }}
+											size="xs2"
+											on:click={() => {
+												if (id) acknowledgeAlert(id)
+											}}
+											title="Acknowledge"
+										>
+											Acknowledge
+										</Button>
+									{:else}
+										<CheckCircle2 size="20" />
+									{/if}
+								</div>
+							</Cell>
+						</Row>
+					{/if}
+				{/each}
+			</tbody>
+		{/if}
+	</DataTable>
+</div>

package/package/components/sidebar/CriticalAlertTable.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        alerts: any[];
+        hideAcknowledged?: boolean | undefined;
+        goToNextPage: () => void;
+        goToPreviousPage: () => void;
+        acknowledgeAlert: (id: number) => void;
+        acknowledgeAll: () => void;
+        numUnacknowledgedCriticalAlerts: number;
+        page?: number | undefined;
+        hasMore?: boolean | undefined;
+        pageSize?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CriticalAlertTableProps = typeof __propDef.props;
+export type CriticalAlertTableEvents = typeof __propDef.events;
+export type CriticalAlertTableSlots = typeof __propDef.slots;
+export default class CriticalAlertTable extends SvelteComponent<CriticalAlertTableProps, CriticalAlertTableEvents, CriticalAlertTableSlots> {
+}
+export {};

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,8 +1,8 @@
-<script>import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar } from 'lucide-svelte';
+<script>import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog } from 'lucide-svelte';
 import { base } from '../../base';
 import Menu from '../common/menu/MenuV2.svelte';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
-import { enterpriseLicense } from '../../stores';
+import { enterpriseLicense, superadmin } from '../../stores';
 import MenuButton from './MenuButton.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import MenuLink from './MenuLink.svelte';
@@ -20,10 +20,6 @@ const mainMenuLinks = [
     { label: 'Schedules', href: `${base}/schedules`, icon: Calendar }
 ];
 let secondMenuLinks = [
-    {
-        label: 'Schedules',
-        href: `${base}/schedules`
-    },
     {
         label: 'Resources',
         href: `${base}/resources`
@@ -33,7 +29,19 @@ let secondMenuLinks = [
         href: `${base}/variables`
     },
     {
-        label: 'Audit Logs',
+        label: 'Custom HTTP Routes',
+        href: `${base}/routes`
+    },
+    {
+        label: 'Websocket Triggers',
+        href: `${base}/websockets`
+    },
+    {
+        label: 'Kafka Triggers',
+        href: `${base}/kafka`
+    },
+    {
+        label: 'Audit logs',
         href: `${base}/audit_logs`
     },
     {
@@ -131,9 +139,23 @@ let moreOpen = false;
 				tabindex="-1"
 			>
 				<Building size={14} />
-				All Workspaces
+				All workspaces
 			</a>
 
+			{#if $superadmin}
+				<MenuItem
+					href="#superadmin-settings"
+					class={twMerge(
+						'flex flex-row gap-3.5 items-center px-2 py-2 ',
+						'text-secondary text-xs',
+						'hover:bg-surface-hover hover:text-primary cursor-pointer'
+					)}
+				>
+					<ServerCog size={14} />
+					Instance settings
+				</MenuItem>
+			{/if}
+
 			<MenuItem
 				href="#"
 				on:click={() => logout()}

package/package/components/sidebar/SideBarNotification.svelte

@@ -1,13 +1,10 @@
-<script>export let notificationCount = 0;
+<script>import Notification from '../common/alert/Notification.svelte';
+export let notificationCount = 0;
 export let small = false;
 </script>
 
 {#if !small}
-	<div
-		class="bg-red-500 text-white text-[0.6rem] rounded-md w-5 h-5 flex items-center justify-center"
-	>
-		{notificationCount > 9 ? '9+' : notificationCount}
-	</div>
+	<Notification {notificationCount} notificationLimit={9} />
 {:else}
 	<div class="bg-red-500 rounded-md w-3 h-3 flex items-center justify-center" />
 {/if}

package/package/components/sidebar/SidebarContent.svelte

@@ -112,7 +112,7 @@ $: secondaryMenuLinks = [
             ...(!$superadmin && !$userStore?.is_admin
                 ? [
                     {
-                        label: 'Leave Workspace',
+                        label: 'Leave workspace',
                         action: () => {
                             leaveWorkspaceModal = true;
                         },
@@ -153,14 +153,14 @@ $: secondaryMenuLinks = [
             icon: Logs,
             subItems: [
                 {
-                    label: 'Audit Logs',
+                    label: 'Audit logs',
                     href: `${base}/audit_logs`,
                     icon: Eye
                 },
                 ...($devopsRole
                     ? [
                         {
-                            label: 'Service Logs',
+                            label: 'Service logs',
                             href: `${base}/service_logs`,
                             icon: Logs
                         }
@@ -169,7 +169,7 @@ $: secondaryMenuLinks = [
                 ...($enterpriseLicense
                     ? [
                         {
-                            label: 'Critical Alerts',
+                            label: 'Critical alerts',
                             action: () => {
                                 isCriticalAlertsUIOpen.set(true);
                             },
@@ -181,7 +181,7 @@ $: secondaryMenuLinks = [
             ]
         }
         : {
-            label: 'Audit Logs',
+            label: 'Audit logs',
             href: `${base}/audit_logs`,
             icon: Eye,
             disabled: $userStore?.operator