From ee8a815cd7baa1e518909fb8b7e538a02aafb42c Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 18 Jun 2024 14:55:53 +0200 Subject: [PATCH] feat: executions new wizard --- src/lib/layout/wizardSecondaryContent.svelte | 4 +- .../executions/+page.svelte | 2 +- .../executions/execute-function/+page.svelte | 163 ++++++++++++++++-- .../executions/execute-function/+page.ts | 18 ++ 4 files changed, 170 insertions(+), 17 deletions(-) create mode 100644 src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.ts diff --git a/src/lib/layout/wizardSecondaryContent.svelte b/src/lib/layout/wizardSecondaryContent.svelte index 6b69d488a..908995692 100644 --- a/src/lib/layout/wizardSecondaryContent.svelte +++ b/src/lib/layout/wizardSecondaryContent.svelte @@ -4,8 +4,6 @@
-
- -
+
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte index 6de32a50f..4806d3f8d 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte @@ -19,7 +19,7 @@ import { log } from '$lib/stores/logs'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; - import { func, execute, showFunctionExecute } from '../store'; + import { func, execute } from '../store'; import type { Models } from '@appwrite.io/console'; import { organization } from '$lib/stores/organization'; import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing'; diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte index 67463cd8b..08524b5d8 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte @@ -3,20 +3,27 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; + import { timer } from '$lib/actions/timer'; import { tooltip } from '$lib/actions/tooltip'; - import { Alert } from '$lib/components'; + import { Alert, Card } from '$lib/components'; import { Dependencies } from '$lib/constants'; + import { Pill } from '$lib/elements'; import { Button, Form, FormItem, FormItemPart, FormList, + Helper, + InputDate, InputSelect, InputText, - InputTextarea + InputTextarea, + InputTime } from '$lib/elements/forms'; + import { humanFileSize } from '$lib/helpers/sizeConvertion'; + import { calculateTime } from '$lib/helpers/timeConversion'; import { WizardSecondaryContainer, WizardSecondaryContent, @@ -25,8 +32,19 @@ } from '$lib/layout'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; - import { ExecutionMethod } from '@appwrite.io/console'; + import { ExecutionMethod, type Models } from '@appwrite.io/console'; import { writable } from 'svelte/store'; + import DeploymentSource from '../../deploymentSource.svelte'; + import DeploymentDomains from '../../deploymentDomains.svelte'; + import { proxyRuleList } from '../../store'; + import DeploymentCreatedBy from '../../deploymentCreatedBy.svelte'; + import { + isSameDay, + toLocaleDate, + toLocaleDateISO, + toLocaleDateTime, + toLocaleTimeISO + } from '$lib/helpers/date'; let previousPage: string = `${base}/console`; let showExitModal = false; @@ -35,15 +53,10 @@ previousPage = from?.url?.pathname || previousPage; }); - let formComponent: Form; - let isSubmitting = writable(false); + export let data; - let path = '/'; - let method = ExecutionMethod.GET; - let body = ''; - let headers: [string, string][] = [['', '']]; - - const func = $page.data.function; + const func = data.function as Models.Function; + const deployment = data.activeDeployment as Models.Deployment; const keyList = [ { label: 'Authorization', value: 'Authorization' }, @@ -67,6 +80,14 @@ { label: 'OPTIONS', value: ExecutionMethod.OPTIONS } ]; + let formComponent: Form; + let isSubmitting = writable(false); + + let path = '/'; + let method = ExecutionMethod.GET; + let body = ''; + let headers: [string, string][] = [['', '']]; + async function handleSubmit() { try { const headersObject = {}; @@ -81,7 +102,8 @@ true, path, method, - headersObject + headersObject, + isScheduled ? dateTime : null ); if (!$page.url?.toString()?.includes('/executions')) { await goto( @@ -103,6 +125,16 @@ }); } } + let isScheduled: boolean = null; + let now = new Date(); + let minDate: string; + let date: string = toLocaleDateISO(now.getTime()); + let time: string = toLocaleTimeISO(now.getTime()); + $: minDate = toLocaleDateISO(now.getTime()); + $: minTime = isSameDay(new Date(date), new Date(minDate)) + ? toLocaleTimeISO(now.getTime()) + : '00:00'; + $: dateTime = new Date(`${date}T${time}`); @@ -231,10 +263,115 @@ placeholder={`Hello, World!`} id="body" bind:value={body} /> + +
  • + + {#if isScheduled} + + + + + {/if} + + {isScheduled + ? `Your function will be executed on ${toLocaleDateTime(dateTime?.toString())}` + : 'Your function will be executed immediately'} + +
    • {/if} - test + + +
    +

    Deployment ID

    + + {func.deployment} + +
    +
      +
    • +

      Status

      +

      + + active + + +

      +
      • +
    • +

      Build time

      +

      + {#if ['processing', 'building'].includes(deployment.status)} + + {:else} + {calculateTime(deployment.buildTime)} + {/if} +

      +
      • +
    • +

      Size

      +

      + {humanFileSize(deployment.size).value + + humanFileSize(deployment.size).unit} +

      +
      • +
    +
    +

    Source

    + + + +
    +
    +

    Domains

    + + + +
    +
    +

    Updated

    + + + +
    +     +     diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.ts new file mode 100644 index 000000000..1d11c6734 --- /dev/null +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.ts @@ -0,0 +1,18 @@ +import { sdk } from '$lib/stores/sdk'; +import { Dependencies } from '$lib/constants'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async ({ params, depends, parent }) => { + const data = await parent(); + depends(Dependencies.DEPLOYMENTS); + + return { + func: data.function, + activeDeployment: data.function.deployment + ? await sdk.forProject.functions.getDeployment( + params.function, + data.function.deployment + ) + : null + }; +};