windmill-components 1.430.6 → 1.433.0

package/package/components/apps/editor/AppReportsDrawer.svelte

@@ -1,619 +1,9 @@
-<script>import { enterpriseLicense } from '../../../stores';
-import CronInput from '../../CronInput.svelte';
-import ScriptPicker from '../../ScriptPicker.svelte';
-import Section from '../../Section.svelte';
-import Alert from '../../common/alert/Alert.svelte';
-import Drawer from '../../common/drawer/Drawer.svelte';
-import DrawerContent from '../../common/drawer/DrawerContent.svelte';
-import Tab from '../../common/tabs/Tab.svelte';
-import Tabs from '../../common/tabs/Tabs.svelte';
-import { FlowService, JobService, ScheduleService, SettingService, WorkspaceService } from '../../../gen';
-import { workspaceStore } from '../../../stores';
-import { base } from '../../../base';
-import { emptyString, formatCron, sendUserToast, tryEvery } from '../../../utils';
-import SchemaForm from '../../SchemaForm.svelte';
-import Button from '../../common/button/Button.svelte';
-import Toggle from '../../Toggle.svelte';
-import { RotateCw, Save } from 'lucide-svelte';
-import { CUSTOM_TAGS_SETTING, WORKSPACE_SLACK_BOT_TOKEN_PATH } from '../../../consts';
-import { loadSchemaFromPath } from '../../../infer';
-import { hubPaths } from '../../../hub';
+<script>import { Drawer } from '../../common';
+import AppReportsDrawerInner from './AppReportsDrawerInner.svelte';
 export let appPath;
 export let open = false;
-let appReportingEnabled = false;
-let appReportingStartupDuration = 5;
-let appReportingSchedule = {
-    cron: '0 0 12 * *',
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-};
-let selectedTab = $enterpriseLicense
-    ? 'slack'
-    : 'custom';
-let screenshotKind = 'pdf';
-let customPath = undefined;
-let customPathSchema = {};
-let args = {};
-let areArgsValid = true;
-$: customPath
-    ? loadSchemaFromPath(customPath).then((schema) => {
-        customPathSchema = schema
-            ? {
-                ...schema,
-                properties: Object.fromEntries(Object.entries(schema.properties ?? {}).filter(([key, _]) => key !== 'screenshot' && key !== 'app_path' && key !== 'kind'))
-            }
-            : {};
-    })
-    : (customPathSchema = {});
-let isSlackConnectedWorkspace = false;
-async function getWorspaceSlackSetting() {
-    const settings = await WorkspaceService.getSettings({
-        workspace: $workspaceStore
-    });
-    if (settings.slack_name) {
-        isSlackConnectedWorkspace = true;
-    }
-    else {
-        isSlackConnectedWorkspace = false;
-    }
-}
-getWorspaceSlackSetting();
-async function getAppReportingInfo() {
-    const flowPath = appPath + '_reports';
-    try {
-        const flow = await FlowService.getFlowByPath({
-            workspace: $workspaceStore,
-            path: flowPath
-        });
-        const schedule = await ScheduleService.getSchedule({
-            workspace: $workspaceStore,
-            path: flowPath
-        });
-        appReportingSchedule = {
-            cron: schedule.schedule,
-            timezone: schedule.timezone
-        };
-        appReportingStartupDuration =
-            schedule.args?.startup_duration ?? appReportingStartupDuration;
-        screenshotKind = schedule.args?.kind ?? screenshotKind;
-        args = schedule.args
-            ? Object.fromEntries(Object.entries(schedule.args).filter(([key, _]) => key !== 'app_path' && key !== 'startup_duration' && key !== 'kind'))
-            : {};
-        selectedTab =
-            flow.value.modules[1]?.value.type === 'script'
-                ? flow.value.modules[1].value.path === notificationScripts.email.path
-                    ? 'email'
-                    : flow.value.modules[1].value.path === notificationScripts.slack.path
-                        ? 'slack'
-                        : flow.value.modules[1].value.path === notificationScripts.discord.path
-                            ? 'discord'
-                            : 'custom'
-                : 'custom';
-        customPath =
-            selectedTab === 'custom' &&
-                flow.value.modules[1]?.value.type === 'script' &&
-                !flow.value.modules[1].value.path.startsWith('hub/')
-                ? flow.value.modules[1].value.path
-                : undefined;
-        appReportingEnabled = true;
-    }
-    catch (err) { }
-}
-$: appPath && getAppReportingInfo();
-async function disableAppReporting() {
-    const flowPath = appPath + '_reports';
-    await ScheduleService.deleteSchedule({
-        workspace: $workspaceStore,
-        path: flowPath
-    });
-    await FlowService.deleteFlowByPath({
-        workspace: $workspaceStore,
-        path: flowPath
-    });
-    appReportingEnabled = false;
-    sendUserToast('App reporting disabled');
-}
-const appPreviewScript = `import puppeteer from 'puppeteer-core';
-import dayjs from 'dayjs';
-export async function main(app_path: string, startup_duration = 5, kind: 'pdf' | 'png' = 'pdf') {
-  let browser = null
-  try {
-  browser = await puppeteer.launch({ headless: true, executablePath: '/usr/bin/chromium', args: ['--no-sandbox',
-      '--no-zygote',
-      '--disable-setuid-sandbox',
-      '--disable-dev-shm-usage',
-      '--disable-gpu'] });
-  const page = await browser.newPage();
-  await page.setCookie({
-    "name": "token",
-    "value": Bun.env["WM_TOKEN"],
-    "domain": Bun.env["BASE_URL"]?.replace(/https?:\\/\\//, '')
-  })
-  page
-    .on('console', msg =>
-      console.log(dayjs().format("HH:mm:ss") + " " + msg.type().substr(0, 3).toUpperCase() + " " + msg.text()))
-    .on('pageerror', ({ msg }) => console.log(dayjs().format("HH:mm:ss") + " " + msg));
-  await page.setViewport({ width: 1200, height: 2000 });
-  await page.goto(Bun.env["BASE_URL"] + '/apps/get/' + app_path + '?workspace=' + Bun.env["WM_WORKSPACE"] + "&hideRefreshBar=true&hideEditBtn=true");
-	await page.waitForSelector("#app-content", { timeout: 20000 })
-  await new Promise((resolve, _) => {
-		setTimeout(resolve, startup_duration * 1000)
-  })
-  await page.$eval("#sidebar", el => el.remove())
-  await page.$eval("#content", el => el.classList.remove("md:pl-12"))
-	await page.$$eval(".app-component-refresh-btn", els => els.forEach(el => el.remove()))
-	await page.$$eval(".app-table-footer-btn", els => els.forEach(el => el.remove()))
-  const elem = await page.$('#app-content');
-  const { height } = await elem.boundingBox();
-  await page.setViewport({ width: 1200, height });
-  await new Promise((resolve, _) => {
-		setTimeout(resolve, 500)
-  })
-  const screenshot = kind === "pdf" ? await page.pdf({
-		printBackground: true,
-		width: 1200,
-		height
-  }) : await page.screenshot({
-		fullPage: true,
-		type: "png",
-    captureBeyondViewport: false
-	});
-	await browser.close();
-	return Buffer.from(screenshot).toString('base64');
-  } catch (err) {
-	if (browser) {
-	  await browser.close();
-	}
-	throw err;
-  }
-}`;
-const notificationScripts = {
-    discord: {
-        path: hubPaths.discordReport,
-        schema: {
-            type: 'object',
-            properties: {
-                discord_webhook: {
-                    type: 'object',
-                    format: 'resource-discord_webhook',
-                    properties: {},
-                    required: [],
-                    description: ''
-                }
-            },
-            required: ['discord_webhook']
-        }
-    },
-    slack: {
-        path: hubPaths.slackReport,
-        schema: {
-            type: 'object',
-            properties: {
-                channel: {
-                    type: 'string',
-                    default: ''
-                }
-            },
-            required: ['channel']
-        }
-    },
-    email: {
-        path: hubPaths.smtpReport,
-        schema: {
-            type: 'object',
-            properties: {
-                smtp: {
-                    type: 'object',
-                    format: 'resource-smtp',
-                    properties: {},
-                    required: [],
-                    description: ''
-                },
-                from_email: {
-                    type: 'string',
-                    default: ''
-                },
-                to_email: {
-                    type: 'string',
-                    default: ''
-                }
-            },
-            required: ['smtp', 'from_email', 'to_email']
-        }
-    }
-};
-function getFlowArgs() {
-    return {
-        app_path: appPath,
-        startup_duration: appReportingStartupDuration,
-        kind: screenshotKind,
-        ...args,
-        ...(selectedTab === 'slack'
-            ? {
-                slack: '$res:' + WORKSPACE_SLACK_BOT_TOKEN_PATH
-            }
-            : {})
-    };
-}
-function getFlowValue() {
-    const notifInputTransforms = {
-        app_path: {
-            type: 'javascript',
-            expr: 'flow_input.app_path'
-        },
-        screenshot: {
-            type: 'javascript',
-            expr: 'results.a'
-        },
-        kind: {
-            type: 'javascript',
-            expr: 'flow_input.kind'
-        },
-        ...Object.fromEntries(Object.keys(args).map((key) => [
-            key,
-            {
-                type: 'javascript',
-                expr: `flow_input.${key}`
-            }
-        ])),
-        ...(selectedTab === 'slack'
-            ? {
-                slack: {
-                    type: 'javascript',
-                    expr: 'flow_input.slack'
-                }
-            }
-            : {})
-    };
-    const value = {
-        modules: [
-            {
-                id: 'a',
-                value: {
-                    type: 'rawscript',
-                    tag: 'chromium',
-                    content: appPreviewScript,
-                    language: 'bun',
-                    input_transforms: {
-                        app_path: {
-                            expr: 'flow_input.app_path',
-                            type: 'javascript'
-                        },
-                        startup_duration: {
-                            expr: 'flow_input.startup_duration',
-                            type: 'javascript'
-                        },
-                        kind: {
-                            expr: 'flow_input.kind',
-                            type: 'javascript'
-                        }
-                    }
-                }
-            },
-            {
-                id: 'b',
-                value: {
-                    type: 'script',
-                    path: selectedTab === 'custom' ? customPath || '' : notificationScripts[selectedTab].path,
-                    input_transforms: notifInputTransforms
-                }
-            }
-        ]
-    };
-    return value;
-}
-async function enableAppReporting() {
-    const flowPath = appPath + '_reports';
-    try {
-        // will only work if the user is super admin
-        const customTags = ((await SettingService.getGlobal({
-            key: CUSTOM_TAGS_SETTING
-        })) ?? []);
-        if (!customTags.includes('chromium')) {
-            await SettingService.setGlobal({
-                key: CUSTOM_TAGS_SETTING,
-                requestBody: {
-                    value: [...customTags, 'chromium']
-                }
-            });
-        }
-    }
-    catch (err) { }
-    await FlowService.deleteFlowByPath({
-        workspace: $workspaceStore,
-        path: flowPath
-    });
-    await FlowService.createFlow({
-        workspace: $workspaceStore,
-        requestBody: {
-            summary: appPath + ' - Reports flow',
-            value: getFlowValue(),
-            schema: {
-                $schema: 'https://json-schema.org/draft/2020-12/schema',
-                properties: {
-                    app_path: {
-                        description: '',
-                        type: 'string',
-                        default: null,
-                        format: ''
-                    },
-                    startup_duration: {
-                        description: '',
-                        type: 'integer',
-                        default: 5,
-                        format: ''
-                    },
-                    kind: {
-                        description: '',
-                        type: 'string',
-                        enum: ['pdf', 'png'],
-                        default: 'pdf',
-                        format: ''
-                    },
-                    ...(selectedTab === 'custom'
-                        ? customPathSchema.properties
-                        : notificationScripts[selectedTab].schema.properties),
-                    ...(selectedTab === 'slack'
-                        ? {
-                            slack: {
-                                description: '',
-                                type: 'object',
-                                format: 'resource-slack',
-                                properties: {},
-                                required: []
-                            }
-                        }
-                        : {})
-                },
-                required: [
-                    'app_path',
-                    'startup_duration',
-                    'kind',
-                    ...(selectedTab === 'custom'
-                        ? customPathSchema.required
-                        : notificationScripts[selectedTab].schema.required),
-                    ...(selectedTab === 'slack' ? ['slack'] : [])
-                ],
-                type: 'object'
-            },
-            path: flowPath
-        }
-    });
-    await ScheduleService.deleteSchedule({
-        workspace: $workspaceStore,
-        path: flowPath
-    });
-    await ScheduleService.createSchedule({
-        workspace: $workspaceStore,
-        requestBody: {
-            path: flowPath,
-            schedule: formatCron(appReportingSchedule.cron),
-            timezone: appReportingSchedule.timezone,
-            script_path: flowPath,
-            is_flow: true,
-            args: getFlowArgs(),
-            enabled: true
-        }
-    });
-    appReportingEnabled = true;
-}
-let testLoading = false;
-async function testReport() {
-    try {
-        testLoading = true;
-        const jobId = await JobService.runFlowPreview({
-            workspace: $workspaceStore,
-            requestBody: {
-                args: getFlowArgs(),
-                value: getFlowValue()
-            }
-        });
-        tryEvery({
-            tryCode: async () => {
-                let testResult = await JobService.getCompletedJob({
-                    workspace: $workspaceStore,
-                    id: jobId
-                });
-                testLoading = false;
-                sendUserToast(testResult.success
-                    ? 'Report sent successfully'
-                    : 'Report error: ' + testResult.result?.['error']?.['message'], !testResult.success);
-            },
-            timeoutCode: async () => {
-                testLoading = false;
-                sendUserToast('Reports flow did not return after 30s', true);
-                try {
-                    await JobService.cancelQueuedJob({
-                        workspace: $workspaceStore,
-                        id: jobId,
-                        requestBody: {
-                            reason: 'Reports flow did not return after 30s'
-                        }
-                    });
-                }
-                catch (err) {
-                    console.error(err);
-                }
-            },
-            interval: 500,
-            timeout: 30000
-        });
-    }
-    catch (err) {
-        sendUserToast('Could not test reports flow: ' + err, true);
-        testLoading = false;
-    }
-}
-let disabled = true;
-$: disabled =
-    emptyString(appReportingSchedule.cron) ||
-        (selectedTab === 'custom' && emptyString(customPath)) ||
-        (selectedTab === 'slack' && !isSlackConnectedWorkspace) ||
-        !areArgsValid;
 </script>
 
 <Drawer bind:open size="800px">
-	<DrawerContent
-		on:close={() => (open = false)}
-		title="Schedule Reports"
-		tooltip="Send a PDF or PNG preview of any app at a given schedule"
-		documentationLink="https://www.windmill.dev/docs/apps/schedule_reports"
-		><svelte:fragment slot="actions">
-			<div class="mr-4 center-center -mt-2">
-				<Toggle
-					checked={appReportingEnabled}
-					options={{ right: 'enable', left: 'disable' }}
-					on:change={async () => {
-						if (appReportingEnabled) {
-							disableAppReporting()
-						} else {
-							await enableAppReporting()
-							sendUserToast('App reporting enabled')
-						}
-					}}
-					disabled={disabled && !appReportingEnabled}
-				/>
-			</div>
-			<Button
-				color="dark"
-				startIcon={{ icon: Save }}
-				size="sm"
-				on:click={async () => {
-					await enableAppReporting()
-					sendUserToast('App reporting updated')
-					open = false
-				}}
-				{disabled}
-			>
-				{appReportingEnabled ? 'Update' : 'Save and enable'}
-			</Button>
-		</svelte:fragment>
-		<div class="flex flex-col gap-8">
-			<Alert type="info" title="Scheduled PDF/PNG reports"
-				>Send a PDF or PNG preview of the app at a given schedule. Enabling this feature will create
-				a flow and a schedule in your workspace.
-				<br /><br />
-				For the flow to be executed, you need to set the WORKER_GROUP environment variable of one of
-				your workers to "reports" or add the tag "chromium" to one of your worker groups.
-			</Alert>
-
-			<Section label="Reporting schedule">
-				<CronInput
-					bind:schedule={appReportingSchedule.cron}
-					bind:timezone={appReportingSchedule.timezone}
-				/>
-			</Section>
-
-			<Section
-				label="Startup duration in seconds"
-				tooltip="The number of seconds to wait before capturing a preview to ensure that all startup scripts
-		have been executed."
-			>
-				<div class="w-full pt-2">
-					<input
-						type="number"
-						class="text-sm w-full font-semibold"
-						bind:value={appReportingStartupDuration}
-					/>
-				</div>
-			</Section>
-
-			<Section label="Screenshot kind">
-				<div class="w-full pt-2">
-					<select class="text-sm w-full font-semibold" bind:value={screenshotKind}>
-						<option value="pdf">PDF</option>
-						<option value="png">PNG</option>
-					</select>
-				</div></Section
-			>
-
-			<Section label="Notification">
-				<Tabs bind:selected={selectedTab}>
-					{#if !$enterpriseLicense}
-						<Tab value="custom">Custom</Tab>
-					{/if}
-					<Tab value="slack" disabled={!$enterpriseLicense}
-						>Slack{!$enterpriseLicense ? ' (EE only)' : ''}</Tab
-					>
-					<Tab value="discord" disabled={!$enterpriseLicense}
-						>Discord{!$enterpriseLicense ? ' (EE only)' : ''}</Tab
-					>
-					<Tab value="email" disabled={!$enterpriseLicense}>
-						<div class="flex flex-row gap-1 items-center"
-							>Email{!$enterpriseLicense ? ' (EE only)' : ''}
-						</div>
-					</Tab>
-					{#if $enterpriseLicense}
-						<Tab value="custom">Custom</Tab>
-					{/if}
-				</Tabs>
-				{#if selectedTab === 'custom'}
-					<div class="pt-2">
-						<ScriptPicker
-							on:select={(ev) => {
-								customPath = ev.detail.path
-							}}
-							initialPath={customPath}
-							allowRefresh
-						/>
-					</div>
-					<div class="prose text-2xs text-tertiary mt-2">
-						Pick a script that does whatever with the PDF/PNG report.
-
-						<br />
-
-						The script chosen is passed the parameters `screenshot: string`, `kind: 'pdf' | 'png'`,
-						`app_path: string` where `screenshot` is the base64 encoded PDF/PNG report, `kind` is
-						the type of the screenshot, and `app_path` is the path of the app being reported.
-					</div>
-				{/if}
-				{#if selectedTab === 'slack'}
-					<div class="pt-4">
-						{#if isSlackConnectedWorkspace}
-							<Alert type="info" title="Will use the Slack resource linked to the workspace" />
-						{:else}
-							<Alert type="error" title="Workspace not connected to Slack">
-								<div class="flex flex-row gap-x-1 w-full items-center">
-									<p class="text-clip grow min-w-0">
-										The workspace needs to be connected to Slack to use this feature. You can <a
-											target="_blank"
-											href="{base}/workspace_settings?tab=slack">configure it here</a
-										>.
-									</p>
-									<Button
-										variant="border"
-										color="light"
-										on:click={getWorspaceSlackSetting}
-										startIcon={{ icon: RotateCw }}
-									/>
-								</div>
-							</Alert>
-						{/if}
-					</div>
-				{/if}
-				<div class="w-full pt-4">
-					{#if selectedTab !== 'custom' || customPath !== undefined}
-						{#key selectedTab + JSON.stringify(customPathSchema ?? {})}
-							<SchemaForm
-								bind:isValid={areArgsValid}
-								bind:args
-								schema={selectedTab !== 'custom'
-									? notificationScripts[selectedTab].schema
-									: customPathSchema}
-							/>
-						{/key}
-					{/if}
-				</div>
-				<Button
-					loading={testLoading}
-					{disabled}
-					on:click={testReport}
-					size="xs"
-					color="dark"
-					btnClasses="w-auto"
-				>
-					Send test report
-				</Button>
-			</Section>
-		</div>
-	</DrawerContent>
+	<AppReportsDrawerInner bind:open {appPath} />
 </Drawer>