windmill-components 1.434.1 → 1.444.1

package/package/components/scriptEditor/LogPanel.svelte

@@ -26,6 +26,7 @@ export let editor = undefined;
 export let diffEditor = undefined;
 export let args = undefined;
 export let workspace = undefined;
+export let showCaptures = false;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
@@ -64,170 +65,181 @@ let forceJson = false;
 	</DrawerContent>
 </Drawer>
 
-<Tabs bind:selected={selectedTab} class="mt-1">
-	<Tab value="logs" size="xs">Logs & Result</Tab>
-	<Tab value="history" size="xs">History</Tab>
+<div class="h-full flex flex-col">
+	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
+		<Tab value="logs" size="xs">Logs & Result</Tab>
+		<Tab value="history" size="xs">History</Tab>
+		{#if showCaptures}
+			<Tab value="captures" size="xs">Captures</Tab>
+		{/if}
 
-	<svelte:fragment slot="content">
-		<!--
-			TabContent would wrap it in an extra div which is undesirable in this situation
-			because SplitPanesWrapper uses the parent element as a reference point.
-		-->
-		{#if selectedTab === 'logs'}
-			<SplitPanesWrapper>
-				<Splitpanes horizontal>
-					{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
-						<Pane class="relative">
-							<WorkflowTimeline
-								flow_status={asWorkflowStatus(previewJob.flow_status)}
-								flowDone={previewJob.type == 'CompletedJob'}
-							/>
-						</Pane>
-					{/if}
-					<Pane class="relative">
-						<LogViewer
-							jobId={previewJob?.id}
-							duration={previewJob?.['duration_ms']}
-							mem={previewJob?.['mem_peak']}
-							content={previewJob?.logs}
-							isLoading={previewJob?.['running'] == false && previewIsLoading}
-							tag={previewJob?.tag}
-						/>
-					</Pane>
-					<Pane>
-						<slot></slot>
-						{#if previewJob != undefined && 'result' in previewJob}
-							<div class="relative w-full h-full p-2">
-								<div class="relative">
-									<DisplayResult
-										bind:forceJson
-										workspaceId={previewJob?.workspace_id}
-										jobId={previewJob?.id}
-										result={previewJob.result}
-									>
-										<svelte:fragment slot="copilot-fix">
-											{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
-												<ScriptFix
-													error={JSON.stringify(previewJob.result.error)}
-													{lang}
-													{editor}
-													{diffEditor}
-													{args}
-												/>
+		<svelte:fragment slot="content">
+			<div class="grow min-h-0">
+				{#if selectedTab === 'logs'}
+					<SplitPanesWrapper>
+						<Splitpanes horizontal>
+							{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
+								<Pane class="relative">
+									<WorkflowTimeline
+										flow_status={asWorkflowStatus(previewJob.flow_status)}
+										flowDone={previewJob.type == 'CompletedJob'}
+									/>
+								</Pane>
+							{/if}
+							<Pane class="relative">
+								<LogViewer
+									jobId={previewJob?.id}
+									duration={previewJob?.['duration_ms']}
+									mem={previewJob?.['mem_peak']}
+									content={previewJob?.logs}
+									isLoading={previewJob?.['running'] == false && previewIsLoading}
+									tag={previewJob?.tag}
+								/>
+							</Pane>
+							<Pane>
+								<slot />
+								{#if previewJob != undefined && 'result' in previewJob}
+									<div class="relative w-full h-full p-2">
+										<div class="relative">
+											<DisplayResult
+												bind:forceJson
+												workspaceId={previewJob?.workspace_id}
+												jobId={previewJob?.id}
+												result={previewJob.result}
+											>
+												<svelte:fragment slot="copilot-fix">
+													{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
+														<ScriptFix
+															error={JSON.stringify(previewJob.result.error)}
+															{lang}
+															{editor}
+															{diffEditor}
+															{args}
+														/>
+													{/if}
+												</svelte:fragment>
+											</DisplayResult>
+										</div>
+									</div>
+								{:else}
+									<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+										<span>
+											{#if previewIsLoading}
+												<Loader2 class="animate-spin" />
+											{:else}
+												Test to see the result here
 											{/if}
-										</svelte:fragment>
-									</DisplayResult>
-								</div>
-							</div>
-						{:else}
-							<div class="text-sm text-tertiary p-2 flex justify-between items-center">
-								<span>
-									{#if previewIsLoading}
-										<Loader2 class="animate-spin" />
-									{:else}
-										Test to see the result here
-									{/if}
-								</span>
-								<Tooltip
-									documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
-								>
-									The result renderer in Windmill supports rich display rendering, allowing you to
-									customize the display format of your results.
-								</Tooltip>
-							</div>
-						{/if}
-					</Pane>
-				</Splitpanes>
-			</SplitPanesWrapper>
-		{/if}
-		{#if selectedTab === 'history'}
-			<div>
-				<DataTable size="xs" noBorder>
-					<Head>
-						<tr>
-							<Cell first>Id</Cell>
-							<Cell>Created at</Cell>
-							<Cell>Success</Cell>
-							<Cell>Result</Cell>
-							<Cell>Code</Cell>
-							<Cell last>Logs</Cell>
-						</tr>
-					</Head>
-					<tbody class="divide-y">
-						{#each pastPreviews as { id, created_at, success }}
-							<tr>
-								<Cell first>
-									<a
-										class="pr-3"
-										href="{base}/run/{id}?workspace={workspace ?? $workspaceStore}"
-										target="_blank">{id.substring(30)}</a
-									>
-								</Cell>
-								<Cell>{displayDate(created_at)}</Cell>
-								<Cell>
-									{#if success}
-										<CheckCircle2 size={10} class="text-green-600" />
-									{:else}
-										<XCircle size={10} class="text-red-700" />
-									{/if}
-								</Cell>
-								<Cell>
-									<button
-										class="text-xs"
-										on:click|preventDefault={() => {
-											openDrawer({ mode: 'json', content: undefined, title: 'Result' })
-											JobService.getCompletedJobResult({
-												workspace: workspace ?? $workspaceStore ?? 'NO_W',
-												id
-											}).then((res) => {
-												drawerContent && (drawerContent.content = res)
-											})
-										}}
-									>
-										See Result
-									</button>
-								</Cell>
-								<Cell>
-									<button
-										class="text-xs"
-										on:click|preventDefault={async () => {
-											const code = (
-												await JobService.getCompletedJob({
-													workspace: workspace ?? $workspaceStore ?? 'NO_W',
-													id
-												})
-											).raw_code
-											openDrawer({
-												mode: lang ?? 'plain',
-												content: String(code),
-												title: `Code ${lang}`
-											})
-										}}
-									>
-										View code
-									</button>
-								</Cell>
-								<Cell last>
-									<button
-										class="text-xs"
-										on:click|preventDefault={async () => {
-											const logs = await (
-												await fetch(
-													OpenAPI.BASE + `/w/${workspace ?? $workspaceStore}/jobs_u/get_logs/${id}`
-												)
-											).text()
-											console.log(logs)
-											openDrawer({ mode: 'plain', content: String(logs), title: `Logs for ${id}` })
-										}}
-									>
-										View logs
-									</button>
-								</Cell>
-							</tr>
-						{/each}
-					</tbody>
-				</DataTable>
+										</span>
+										<Tooltip
+											documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
+										>
+											The result renderer in Windmill supports rich display rendering, allowing you
+											to customize the display format of your results.
+										</Tooltip>
+									</div>
+								{/if}
+							</Pane>
+						</Splitpanes>
+					</SplitPanesWrapper>
+				{/if}
+				{#if selectedTab === 'history'}
+					<div>
+						<DataTable size="xs" noBorder>
+							<Head>
+								<tr>
+									<Cell first>Id</Cell>
+									<Cell>Created at</Cell>
+									<Cell>Success</Cell>
+									<Cell>Result</Cell>
+									<Cell>Code</Cell>
+									<Cell last>Logs</Cell>
+								</tr>
+							</Head>
+							<tbody class="divide-y">
+								{#each pastPreviews as { id, created_at, success }}
+									<tr>
+										<Cell first>
+											<a
+												class="pr-3"
+												href="{base}/run/{id}?workspace={workspace ?? $workspaceStore}"
+												target="_blank">{id.substring(30)}</a
+											>
+										</Cell>
+										<Cell>{displayDate(created_at)}</Cell>
+										<Cell>
+											{#if success}
+												<CheckCircle2 size={10} class="text-green-600" />
+											{:else}
+												<XCircle size={10} class="text-red-700" />
+											{/if}
+										</Cell>
+										<Cell>
+											<button
+												class="text-xs"
+												on:click|preventDefault={() => {
+													openDrawer({ mode: 'json', content: undefined, title: 'Result' })
+													JobService.getCompletedJobResult({
+														workspace: workspace ?? $workspaceStore ?? 'NO_W',
+														id
+													}).then((res) => {
+														drawerContent && (drawerContent.content = res)
+													})
+												}}
+											>
+												See Result
+											</button>
+										</Cell>
+										<Cell>
+											<button
+												class="text-xs"
+												on:click|preventDefault={async () => {
+													const code = (
+														await JobService.getCompletedJob({
+															workspace: workspace ?? $workspaceStore ?? 'NO_W',
+															id
+														})
+													).raw_code
+													openDrawer({
+														mode: lang ?? 'plain',
+														content: String(code),
+														title: `Code ${lang}`
+													})
+												}}
+											>
+												View code
+											</button>
+										</Cell>
+										<Cell last>
+											<button
+												class="text-xs"
+												on:click|preventDefault={async () => {
+													const logs = await (
+														await fetch(
+															OpenAPI.BASE +
+																`/w/${workspace ?? $workspaceStore}/jobs_u/get_logs/${id}`
+														)
+													).text()
+													console.log(logs)
+													openDrawer({
+														mode: 'plain',
+														content: String(logs),
+														title: `Logs for ${id}`
+													})
+												}}
+											>
+												View logs
+											</button>
+										</Cell>
+									</tr>
+								{/each}
+							</tbody>
+						</DataTable>
+					</div>
+				{/if}
+				{#if selectedTab === 'captures'}
+					<slot name="capturesTab" />
+				{/if}
 			</div>
-		{/if}
-	</svelte:fragment>
-</Tabs>
+		</svelte:fragment>
+	</Tabs>
+</div>

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         diffEditor?: DiffEditor | undefined;
         args?: Record<string, any> | undefined;
         workspace?: string | undefined;
+        showCaptures?: boolean | undefined;
         setFocusToLogs?: (() => void) | undefined;
     };
     events: {
@@ -19,6 +20,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        capturesTab: {};
     };
 };
 export type LogPanelProps = typeof __propDef.props;

package/package/components/search/GlobalSearchModal.svelte

@@ -9,7 +9,7 @@ import { twMerge } from 'tailwind-merge';
 import ContentSearchInner from '../ContentSearchInner.svelte';
 import { goto } from '$app/navigation';
 import QuickMenuItem from '../search/QuickMenuItem.svelte';
-import { enterpriseLicense, superadmin, workspaceStore } from '../../stores';
+import { devopsRole, enterpriseLicense, workspaceStore } from '../../stores';
 import uFuzzy from '@leeoniya/ufuzzy';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { scroll_into_view_if_needed_polyfill } from '../multiselect/utils';
@@ -180,7 +180,7 @@ async function handleSearch() {
                 indexMetadata = searchResults.index_metadata;
             }
             catch (e) {
-                sendUserToast(e, true);
+                sendUserToast(e.body, true);
             }
             loadingCompletedRuns = false;
             selectedItem = selectItem(0);
@@ -509,7 +509,7 @@ function maxModalHeight(tab) {
 						/>
 					{:else if tab === 'logs'}
 						<div class="p-2">
-							{#if !$superadmin}
+							{#if !$devopsRole}
 								<Alert title="Service logs are only available to superadmins" type="warning">
 									Service logs are only available to superadmins
 								</Alert>

package/package/components/sidebar/CriticalAlertModal.svelte

@@ -2,12 +2,19 @@
 import CriticalAlertModalInner from './CriticalAlertModalInner.svelte';
 import { SettingService } from '../../gen';
 import { sendUserToast } from '../../toast';
-import { workspaceStore, isCriticalAlertsUIOpen, devopsRole } from '../../stores';
-import Modal from '../common/modal/Modal.svelte';
+import { workspaceStore, isCriticalAlertsUIOpen, devopsRole, userStore, superadmin } from '../../stores';
+import Modal2 from '../common/modal/Modal2.svelte';
+import { Button, Popup } from '../common';
+import List from '../common/layout/List.svelte';
+import Toggle from '../Toggle.svelte';
+import { BellOff, Bell, ExternalLink, Settings } from 'lucide-svelte';
+import { base } from '../../base';
+import Notification from '../common/alert/Notification.svelte';
 export let open = false;
 export let numUnacknowledgedCriticalAlerts = 0;
 export let muteSettings;
 let workspaceContext = false;
+let childRef;
 $: {
     setupApiFunctions(workspaceContext);
 }
@@ -47,16 +54,46 @@ onMount(async () => {
 onDestroy(() => {
     clearInterval(checkForNewAlertsInterval);
 });
+async function saveWorkSpaceMuteSetting() {
+    await SettingService.workspaceMuteCriticalAlertsUi({
+        workspace: $workspaceStore,
+        requestBody: {
+            mute_critical_alerts: muteSettings.workspace
+        }
+    });
+    sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
+    childRef.refreshAlerts();
+}
+async function saveGlobalMuteSetting() {
+    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.`);
+    childRef.refreshAlerts();
+}
 async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
     if (checkingForNewAlerts)
         return;
     checkingForNewAlerts = true;
     try {
-        const unacknowledged = await getCriticalAlerts({
+        const params = {
             page: 1,
-            pageSize: 10,
+            pageSize: 1000,
             acknowledged: false
-        });
+        };
+        let unacknowledged = [];
+        if (!$devopsRole && $workspaceStore) {
+            const res = await SettingService.workspaceGetCriticalAlerts({
+                ...params,
+                workspace: $workspaceStore
+            });
+            unacknowledged = res.alerts ?? [];
+        }
+        else {
+            const res = await SettingService.getCriticalAlerts(params);
+            unacknowledged = res.alerts ?? [];
+        }
         if (numUnacknowledgedCriticalAlerts === 0 &&
             unacknowledged.length > 0 &&
             sendToast &&
@@ -89,14 +126,123 @@ async function acknowledgeAlert(id) {
 }
 </script>
 
-<Modal bind:open title="Critical Alerts" cancelText="Close" style="max-width: 66%;">
+<Modal2 bind:isOpen={open} title="Critical Alerts" target="#content" fixedSize="lg">
+	<svelte:fragment slot="header-left">
+		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
+	</svelte:fragment>
+	<svelte:fragment slot="header-right">
+		<List horizontal>
+			{#if $superadmin || $userStore?.is_admin}
+				<Popup
+					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+					target="#mute-settings-button"
+					preventPopupClosingOnClickInside={true}
+				>
+					<svelte:fragment slot="button">
+						<div id="mute-settings-button">
+							<Button variant="border" color="light" nonCaptureEvent>
+								{#if muteSettings.global || muteSettings.workspace}
+									<BellOff size="16" />
+								{:else}
+									<Bell size="16" />
+								{/if}
+							</Button>
+						</div>
+					</svelte:fragment>
+					<List justify="start">
+						<div class="w-full">
+							{#if $superadmin}
+								<Toggle
+									on:change={saveGlobalMuteSetting}
+									bind:checked={muteSettings.global}
+									options={{
+										right: 'Automatically acknowledge critical alerts instance wide'
+									}}
+									size="xs"
+									stopPropagation={true}
+								/>
+							{/if}
+						</div>
+
+						<div class="w-full">
+							<Toggle
+								on:change={saveWorkSpaceMuteSetting}
+								bind:checked={muteSettings.workspace}
+								options={{
+									right: 'Automatically acknowledge critical alerts for current workspace'
+								}}
+								size="xs"
+								stopPropagation={true}
+							/>
+						</div>
+					</List>
+				</Popup>
+			{/if}
+
+			{#if $superadmin}
+				<Popup
+					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+					target="#settings-button"
+				>
+					<svelte:fragment slot="button">
+						<div id="settings-button">
+							<Button variant="border" color="light" nonCaptureEvent>
+								<Settings size="16" />
+							</Button>
+						</div>
+					</svelte:fragment>
+					<List justify="start" gap="none">
+						<div class="w-full">
+							<Button
+								size="xs"
+								color="light"
+								href="{base}/?workspace=admins#superadmin-settings"
+								target="_blank"
+							>
+								<div class="w-full">
+									<List horizontal justify="between" gap="sm">
+										<div>Instance Critical Alert Settings</div>
+										<ExternalLink size="16" />
+									</List>
+								</div>
+							</Button>
+						</div>
+						<div class="w-full">
+							<Button
+								size="xs"
+								color="light"
+								href="{base}/workspace_settings?tab=error_handler"
+								target="_blank"
+							>
+								Workspace Critical Alert Settings <ExternalLink size="16" />
+							</Button>
+						</div>
+					</List>
+				</Popup>
+			{:else}
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					href="{base}/workspace_settings?tab=error_handler"
+					target="_blank"
+				>
+					<List horizontal justify="between" gap="sm">
+						<Settings size="16" />
+						<ExternalLink size="16" />
+					</List>
+				</Button>
+			{/if}
+		</List>
+	</svelte:fragment>
+
 	<CriticalAlertModalInner
+		bind:workspaceContext
 		{numUnacknowledgedCriticalAlerts}
 		{updateHasUnacknowledgedCriticalAlerts}
 		{getCriticalAlerts}
 		{acknowledgeCriticalAlert}
 		{acknowledgeAllCriticalAlerts}
-		{muteSettings}
-		bind:workspaceContext
+		bind:this={childRef}
 	/>
-</Modal>
+</Modal2>