windmill-components 1.408.2 → 1.430.2

package/package/components/sidebar/CriticalAlertModalInner.svelte

@@ -0,0 +1,288 @@
+<script>import Button from '../common/button/Button.svelte';
+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 { goto } from '$app/navigation';
+import { sendUserToast } from '../../toast';
+import Section from '../Section.svelte';
+export let updateHasUnacknowledgedCriticalAlerts;
+export let getCriticalAlerts;
+export let acknowledgeCriticalAlert;
+export let acknowledgeAllCriticalAlerts;
+export let numUnacknowledgedCriticalAlerts;
+let alerts = [];
+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(() => {
+    refreshAlerts();
+    initialMuteSettings = { ...muteSettings };
+});
+// Pagination
+let page = 1;
+let pageSize = 10;
+let hasMore = true;
+let hideAcknowledged = false;
+async function acknowledgeAll() {
+    await acknowledgeAllCriticalAlerts();
+    getAlerts(false);
+}
+async function fetchAlerts(pageNumber) {
+    isRefreshing = true;
+    try {
+        const newAlerts = await getCriticalAlerts({
+            page: pageNumber,
+            pageSize: pageSize,
+            acknowledged: hideAcknowledged ? false : undefined
+        });
+        alerts = newAlerts;
+        hasMore = newAlerts.length === pageSize;
+        page = pageNumber;
+        updateHasUnacknowledgedCriticalAlerts();
+    }
+    finally {
+        setTimeout(() => {
+            isRefreshing = false;
+        }, 500);
+    }
+}
+async function getAlerts(reset) {
+    if (reset)
+        page = 1;
+    updateHasUnacknowledgedCriticalAlerts();
+    await fetchAlerts(page);
+}
+async function checkCriticalAlertChannels() {
+    const channels = (await SettingService.getGlobal({ key: 'critical_error_channels' }));
+    hasCriticalAlertChannels = channels && channels.length > 0;
+}
+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() {
+    if ($superadmin)
+        checkCriticalAlertChannels();
+    await getAlerts(true);
+}
+function goToPreviousPage() {
+    if (page > 1) {
+        fetchAlerts(page - 1);
+    }
+}
+function goToNextPage() {
+    if (hasMore) {
+        fetchAlerts(page + 1);
+    }
+}
+function goToCoreTab() {
+    goto('/#superadmin-settings');
+    instanceSettingsSelectedTab.set('Core');
+}
+export let workspaceContext = false;
+$: {
+    workspaceContextChanged(workspaceContext);
+}
+async function workspaceContextChanged(_ctx) {
+    await getAlerts(true);
+}
+</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}
+		</div>
+
+		<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">
+						<Toggle
+							bind:checked={muteSettings.workspace}
+							options={{ right: 'Mute critical alerts for current workspace' }}
+							size="xs"
+						/>
+					</div>
+				</Section>
+			{/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>
+			</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>
+	</div>
+
+	{#if alerts.length === 0}
+		<p class="text-center text-gray-500 mt-4">No critical alerts available.</p>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        updateHasUnacknowledgedCriticalAlerts: any;
+        getCriticalAlerts: any;
+        acknowledgeCriticalAlert: any;
+        acknowledgeAllCriticalAlerts: any;
+        numUnacknowledgedCriticalAlerts: any;
+        muteSettings?: {
+            workspace: boolean;
+            global: boolean;
+        } | undefined;
+        workspaceContext?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/package/components/sidebar/MenuButton.svelte

@@ -1,13 +1,15 @@
 <script>import { twMerge } from 'tailwind-merge';
 import Popover from '../Popover.svelte';
 import { createEventDispatcher } from 'svelte';
+import SideBarNotification from './SideBarNotification.svelte';
 export let label = undefined;
 export let icon = undefined;
 export let isCollapsed;
 export let disabled = false;
 export let lightMode = false;
 export let stopPropagationOnClick = false;
-export let shortcut = "";
+export let shortcut = '';
+export let notificationsCount = 0;
 let dispatch = createEventDispatcher();
 </script>
 
@@ -57,6 +59,16 @@ let dispatch = createEventDispatcher();
 					</span>
 				</span>
 			{/if}
+
+			{#if isCollapsed && notificationsCount > 0}
+				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">
+					<SideBarNotification notificationCount={notificationsCount} small={true} />
+				</div>
+			{:else if notificationsCount > 0}
+				<div class="ml-auto">
+					<SideBarNotification notificationCount={notificationsCount} small={false} />
+				</div>
+			{/if}
 		</button>
 		<svelte:fragment slot="text">
 			{#if label}

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         lightMode?: boolean | undefined;
         stopPropagationOnClick?: boolean | undefined;
         shortcut?: string | undefined;
+        notificationsCount?: number | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/package/components/sidebar/MenuLink.svelte

@@ -14,7 +14,7 @@ navigating.subscribe(() => {
         isSelected = $page.url.pathname === href;
     }
     else {
-        isSelected = $page.url.pathname.includes(href);
+        isSelected = $page.url.pathname.startsWith(href);
     }
 });
 </script>

package/package/components/sidebar/OperatorMenu.svelte

@@ -19,6 +19,37 @@ const mainMenuLinks = [
     { label: 'Runs', href: `${base}/runs`, icon: Play },
     { label: 'Schedules', href: `${base}/schedules`, icon: Calendar }
 ];
+let secondMenuLinks = [
+    {
+        label: 'Schedules',
+        href: `${base}/schedules`
+    },
+    {
+        label: 'Resources',
+        href: `${base}/resources`
+    },
+    {
+        label: 'Variables',
+        href: `${base}/variables`
+    },
+    {
+        label: 'Audit Logs',
+        href: `${base}/audit_logs`
+    },
+    {
+        label: 'Groups',
+        href: `${base}/groups`
+    },
+    {
+        label: 'Folders',
+        href: `${base}/folders`
+    },
+    {
+        label: 'Workers',
+        href: `${base}/workers`
+    }
+];
+let moreOpen = false;
 </script>
 
 <Menu>
@@ -116,6 +147,27 @@ const mainMenuLinks = [
 				Sign out
 			</MenuItem>
 		</div>
+		<div
+			on:mouseenter={() => (moreOpen = true)}
+			on:mouseleave={() => (moreOpen = false)}
+			class="divide-y"
+			role="none"
+		>
+			{#if moreOpen == false}
+				<div class="px-2 text-tertiary text-2xs">More...</div>
+			{:else}
+				{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+					<div>
+						<a
+							href={menuLink.href}
+							class="flex flex-row gap-3.5 items-center px-2 py-0.5 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer"
+						>
+							{menuLink.label}
+						</a>
+					</div>
+				{/each}
+			{/if}
+		</div>
 	</div>
 	{#if $enterpriseLicense}
 		<MultiplayerMenu />

package/package/components/sidebar/SideBarNotification.svelte

@@ -0,0 +1,13 @@
+<script>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>
+{:else}
+	<div class="bg-red-500 rounded-md w-3 h-3 flex items-center justify-center" />
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        notificationCount?: number | undefined;
+        small?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SideBarNotificationProps = typeof __propDef.props;
+export type SideBarNotificationEvents = typeof __propDef.events;
+export type SideBarNotificationSlots = typeof __propDef.slots;
+export default class SideBarNotification extends SvelteComponent<SideBarNotificationProps, SideBarNotificationEvents, SideBarNotificationSlots> {
+}
+export {};

package/package/components/sidebar/SidebarContent.svelte

@@ -1,7 +1,7 @@
 <script>import MenuLink from './MenuLink.svelte';
-import { superadmin, usedTriggerKinds, userStore, workspaceStore } from '../../stores';
+import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole } from '../../stores';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus } from 'lucide-svelte';
+import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle } from 'lucide-svelte';
 import Menu from '../common/menu/MenuV2.svelte';
 import MenuButton from './MenuButton.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
@@ -17,6 +17,9 @@ import { onMount } from 'svelte';
 import { base } from '../../base';
 import { changelogs } from './changelogs';
 import { page } from '$app/stores';
+import SideBarNotification from './SideBarNotification.svelte';
+import KafkaIcon from '../icons/KafkaIcon.svelte';
+export let numUnacknowledgedCriticalAlerts = 0;
 $: mainMenuLinks = [
     { label: 'Home', href: `${base}/`, icon: Home },
     { label: 'Runs', href: `${base}/runs`, icon: Play },
@@ -50,6 +53,20 @@ const defaultExtraTriggerLinks = [
         icon: Route,
         disabled: $userStore?.operator,
         kind: 'http'
+    },
+    {
+        label: 'Websockets',
+        href: '/websocket_triggers',
+        icon: Unplug,
+        disabled: $userStore?.operator,
+        kind: 'ws'
+    },
+    {
+        label: 'Kafka' + ($enterpriseLicense ? '' : ' (EE)'),
+        href: '/kafka_triggers',
+        icon: KafkaIcon,
+        disabled: $userStore?.operator || !$enterpriseLicense,
+        kind: 'kafka'
     }
 ];
 $: extraTriggerLinks = defaultExtraTriggerLinks.filter((link) => {
@@ -130,7 +147,45 @@ $: secondaryMenuLinks = [
         ],
         disabled: $userStore?.operator
     },
-    { label: 'Audit Logs', href: `${base}/audit_logs`, icon: Eye, disabled: $userStore?.operator }
+    $devopsRole || $userStore?.is_admin
+        ? {
+            label: 'Logs',
+            icon: Logs,
+            subItems: [
+                {
+                    label: 'Audit Logs',
+                    href: `${base}/audit_logs`,
+                    icon: Eye
+                },
+                ...($devopsRole
+                    ? [
+                        {
+                            label: 'Service Logs',
+                            href: `${base}/service_logs`,
+                            icon: Logs
+                        }
+                    ]
+                    : []),
+                ...($enterpriseLicense
+                    ? [
+                        {
+                            label: 'Critical Alerts',
+                            action: () => {
+                                isCriticalAlertsUIOpen.set(true);
+                            },
+                            icon: AlertCircle,
+                            notificationCount: numUnacknowledgedCriticalAlerts
+                        }
+                    ]
+                    : [])
+            ]
+        }
+        : {
+            label: 'Audit Logs',
+            href: `${base}/audit_logs`,
+            icon: Eye,
+            disabled: $userStore?.operator
+        }
 ];
 let hasNewChangelogs = false;
 let recentChangelogs = [];
@@ -178,6 +233,13 @@ const thirdMenuLinks = [
 export let isCollapsed = false;
 export let noGap = false;
 let leaveWorkspaceModal = false;
+function computeAllNotificationsCount(menuItems) {
+    let count = 0;
+    for (const menuItem of menuItems) {
+        count += menuItem?.['notificationCount'] ?? 0;
+    }
+    return count;
+}
 </script>
 
 <nav
@@ -213,9 +275,10 @@ let leaveWorkspaceModal = false;
 							<MenuItem>
 								<div class="py-1" role="none">
 									<a
-										href={subItem.href}
+										href={subItem.disabled ? '' : subItem.href}
 										class={twMerge(
-											'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary'
+											'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary',
+											subItem.disabled ? 'pointer-events-none opacity-50' : ''
 										)}
 										role="menuitem"
 										tabindex="-1"
@@ -241,16 +304,17 @@ let leaveWorkspaceModal = false;
 			<UserMenu {isCollapsed} />
 			{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 				{#if menuLink.subItems}
+					{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
 					<Menu>
 						<div slot="trigger">
-							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} />
+							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {notificationsCount} />
 						</div>
 						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
 							<MenuItem>
 								<div class="py-1" role="none">
 									{#if subItem?.['action']}
 										<button
-											class="text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
+											class="text-secondary font-normal w-full block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
 											on:click={subItem?.['action']}
 										>
 											<div class="flex flex-row items-center gap-2">
@@ -259,14 +323,17 @@ let leaveWorkspaceModal = false;
 												{/if}
 
 												{subItem.label}
+												{#if subItem?.['notificationCount']}
+													<div class="ml-auto">
+														<SideBarNotification notificationCount={subItem['notificationCount']} />
+													</div>
+												{/if}
 											</div>
 										</button>
 									{:else}
 										<a
 											href={subItem.href}
-											class={twMerge(
-												'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary'
-											)}
+											class="text-secondary font-normal block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
 											role="menuitem"
 											tabindex="-1"
 										>
@@ -276,6 +343,12 @@ let leaveWorkspaceModal = false;
 												{/if}
 
 												{subItem.label}
+
+												{#if subItem?.['notificationCount']}
+													<div class="ml-auto">
+														<SideBarNotification notificationCount={subItem['notificationCount']} />
+													</div>
+												{/if}
 											</div>
 										</a>
 									{/if}

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        numUnacknowledgedCriticalAlerts?: number | undefined;
         isCollapsed?: boolean | undefined;
         noGap?: boolean | undefined;
     };