From 55a413084df70e177f4e46786497411c44e4e12d Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 18 Jun 2024 10:25:20 +0200 Subject: [PATCH 01/23] feat: execute function wizard --- .../executions/+page.svelte | 7 +- .../executions/execute-function/+page.svelte | 249 ++++++++++++++++++ 2 files changed, 254 insertions(+), 2 deletions(-) create mode 100644 src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte 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 c9eae98f7..6de32a50f 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 @@ -1,5 +1,5 @@ + + + Execute function - Appwrite + + + + (showExitModal = true)}> + Execute function + + +
+ + {#if func?.version !== 'v3'} + + + Customizable execution data now available for functions v3.0 + + Update your function version to make use of new features including customizable + HTTP data in your executions. + + + + + + {:else} + + + + +
+

+ Headers + (optional) + +

+ + + {#if headers} + {#each headers as [name, value], index} + + + + + + + + {/each} + {/if} + + +
+ + + {/if} + +
+ test + + + + + + + From 739673cbce825a6bd3ef0fcf26582512422c5aea Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 18 Jun 2024 14:55:39 +0200 Subject: [PATCH 02/23] feat: input date and time compatible with formItemPart --- src/lib/elements/forms/inputDate.svelte | 9 ++++++--- src/lib/elements/forms/inputTime.svelte | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/lib/elements/forms/inputDate.svelte b/src/lib/elements/forms/inputDate.svelte index 95cd6813c..a108130fc 100644 --- a/src/lib/elements/forms/inputDate.svelte +++ b/src/lib/elements/forms/inputDate.svelte @@ -1,6 +1,6 @@ - + @@ -93,4 +96,4 @@ {#if error} {error} {/if} - + diff --git a/src/lib/elements/forms/inputTime.svelte b/src/lib/elements/forms/inputTime.svelte index 2e0caf60b..42cad1017 100644 --- a/src/lib/elements/forms/inputTime.svelte +++ b/src/lib/elements/forms/inputTime.svelte @@ -1,6 +1,6 @@ - + @@ -68,4 +71,4 @@ {#if error} {error} {/if} - + From ee8a815cd7baa1e518909fb8b7e538a02aafb42c Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 18 Jun 2024 14:55:53 +0200 Subject: [PATCH 03/23] 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 + }; +}; From 6d96d688598562cffefb78f3dc12801365de2b5d Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 18 Jun 2024 18:48:48 +0200 Subject: [PATCH 04/23] feat: replace routes --- src/lib/layout/containerButton.svelte | 4 +++- src/lib/layout/containerHeader.svelte | 4 +++- .../functions/function-[function]/+page.svelte | 8 +++----- .../functions/function-[function]/execute.svelte | 1 + .../function-[function]/executions/+page.svelte | 16 +++++++--------- .../settings/executeFunction.svelte | 11 ++++++----- .../functions/function-[function]/store.ts | 4 ++-- 7 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte index 97fb3efd7..facdf58c5 100644 --- a/src/lib/layout/containerButton.svelte +++ b/src/lib/layout/containerButton.svelte @@ -15,6 +15,7 @@ export let disabled: boolean; export let buttonText: string; export let buttonMethod: () => void | Promise; + export let buttonHref: string = null; export let buttonEvent: string = buttonText?.toLocaleLowerCase(); export let icon = 'plus'; export let showIcon = true; @@ -31,7 +32,8 @@ secondary={buttonType === 'secondary'} on:click={buttonMethod} event={buttonEvent} - {disabled}> + {disabled} + href={buttonHref}> {#if showIcon}     - - (showExitModal = true)}> - Execute function - + + Execute function
    From 01ea844ec65d6a7dd37aaf0e0238f317f1bb2a39 Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 21 Jun 2024 15:02:39 +0200 Subject: [PATCH 06/23] feat: executions filters --- src/lib/layout/logs.svelte | 9 +- .../executions/+page.svelte | 139 +++++++----------- .../function-[function]/executions/+page.ts | 11 +- .../executions/table.svelte | 104 +++++++++++++ 4 files changed, 171 insertions(+), 92 deletions(-) create mode 100644 src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte index 55deb7332..484dc25f7 100644 --- a/src/lib/layout/logs.svelte +++ b/src/lib/layout/logs.svelte @@ -16,7 +16,6 @@ import { isCloud } from '$lib/system'; import { getServiceLimit, tierToPlan, upgradeURL } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; - import { app } from '$lib/stores/app'; import { Button } from '$lib/elements/forms'; import { BillingPlan } from '$lib/constants'; @@ -163,9 +162,7 @@
    -
    +
    Request
    @@ -276,9 +273,7 @@

    {/if}
    -
    +
    Response
    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 05ef8bb35..0d04ac273 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 @@ -1,36 +1,37 @@ - +

    The {tier} plan has limits

      @@ -82,6 +73,42 @@ {/if} +
      + +
      + + +
      +
      + +
      +
      +
      + +
      +
      + +
      +
      + +
      {#if !$func.logging}
      @@ -97,62 +124,8 @@
      {/if} - {#if data.executions.total} - - - Execution ID - Status - Created - Trigger - Method - Path - Duration - - - {#each data.executions.executions as execution} - showLogs(execution)}> - - {execution.$id} - - - {@const status = execution.status} -
      - - {#if status === 'scheduled'} - -
      -       - - {timeFromNow(execution.$createdAt)} - - - - {execution.trigger} - - - - {execution.requestMethod} - - - {execution.requestPath} - - - {calculateTime(execution.duration)} - -       - {/each} -       -       + {#if data?.executions?.total} + { depends(Dependencies.EXECUTIONS); const page = getPage(url); const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); + const query = getQuery(url); + + const parsedQueries = queryParamToMap(query || '[]'); + queries.set(parsedQueries); return { offset, limit, + query, executions: await sdk.forProject.functions.listExecutions(params.function, [ Query.limit(limit), Query.offset(offset), - Query.orderDesc('') + Query.orderDesc(''), + ...parsedQueries.values() ]) }; }; diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte new file mode 100644 index 000000000..37c21d3c8 --- /dev/null +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte @@ -0,0 +1,104 @@ + + + + + {#each columns as column} + {#if column.show} + {column.title} + {/if} + {/each} + + + {#each data.executions.executions as execution (execution.$id)} + showLogs(execution)}> + {#each columns as column} + {#if column.show} + {#if column.id === '$id'} + {#key column.id} + + {execution.$id} + + {/key} + {:else if column.id === 'status'} + + {@const status = execution.status} +
      + + {#if status === 'scheduled'} + +
      +       + {:else if column.id === '$createdAt'} + + {timeFromNow(execution.$createdAt)} + + {:else if column.id === 'trigger'} + + + {execution.trigger} + + + {:else if column.id === 'requestMethod'} + + {execution.requestMethod} + + {:else if column.id === 'requestPath'} + + {execution.requestPath} + + {:else if column.id === 'duration'} + + {calculateTime(execution.duration)} + + {/if} + {/if} + {/each} +       + {/each} +       +       From 94dcccc27c85d5a29bbd05de213f03fba82eecef Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 21 Jun 2024 16:16:34 +0200 Subject: [PATCH 07/23] refactor: operators are now writable --- src/lib/components/filters/content.svelte | 4 ++-- src/lib/components/filters/store.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte index d4de55a86..6c4a00bcb 100644 --- a/src/lib/components/filters/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -24,14 +24,14 @@ $: column = $columns.find((c) => c.id === columnId) as Column; - $: operatorsForColumn = Object.entries(operators) + $: operatorsForColumn = Object.entries($operators) .filter(([, v]) => v.types.includes(column?.type)) .map(([k]) => ({ label: k, value: k })); - $: operator = operatorKey ? operators[operatorKey] : null; + $: operator = operatorKey ? $operators[operatorKey] : null; $: { columnId; operatorKey = null; diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index f919a9402..1f7777aba 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -1,6 +1,6 @@ import { goto } from '$app/navigation'; -import { derived, get, writable } from 'svelte/store'; +import { derived, get, writable, type Writable } from 'svelte/store'; import { page } from '$app/stores'; import deepEqual from 'deep-equal'; import type { Column, ColumnType } from '$lib/helpers/types'; @@ -105,7 +105,7 @@ export function addFilter( } } -export const operators: Record = { +export const operators: Writable> = writable({ 'starts with': { toQuery: Query.startsWith, toTag: (attribute, input) => `**${attribute}** starts with **${input}**`, @@ -172,7 +172,7 @@ export const operators: Record = { }, types: ['string', 'integer', 'double', 'boolean', 'datetime', 'enum'] } -}; +}); function formatArray(array: string[]) { if (!array?.length) return; From 013ca8e3b0621a6112c9edfe46c44942f694bf19 Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 21 Jun 2024 16:17:02 +0200 Subject: [PATCH 08/23] empty commit From e74876018d1c432ac62473dd1ff4c6f64d815808 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 24 Jun 2024 15:24:23 +0200 Subject: [PATCH 09/23] fix: droplist element not being full witdh --- src/lib/components/dropList.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte index 0c802cffd..effecd4a6 100644 --- a/src/lib/components/dropList.svelte +++ b/src/lib/components/dropList.svelte @@ -36,10 +36,10 @@ }`}> {#if $$slots.list}
      + class="drop-section" + style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
      From b5648d6c72c4cefe5ee38581c2d2ec9c77c3633c Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 24 Jun 2024 16:05:45 +0200 Subject: [PATCH 10/23] feat: add elements to array --- package.json | 2 +- src/lib/components/filters/store.ts | 2 +- .../executions/+page.svelte | 69 +++++++++++++++++-- .../executions/table.svelte | 4 ++ 4 files changed, 69 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 42ec216dd..c49a3eae4 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "^0.6.2", + "@appwrite.io/console": "npm:khushboo-console@0.0.3", "@appwrite.io/pink": "0.23.0", "@appwrite.io/pink-icons": "0.23.0", "@popperjs/core": "^2.11.8", diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index 1f7777aba..ce4895420 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -96,7 +96,7 @@ export function addFilter( ) { const operator = operatorKey ? operators[operatorKey] : null; const column = columns.find((c) => c.id === columnId) as Column; - + console.log(column, operator); if (!column || !operator) return; if (column.array) { queries.addFilter({ column, operator, value: arrayValues }); 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 0d04ac273..4f341efb2 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 @@ -24,12 +24,69 @@ const columns = writable([ { id: '$id', title: 'Execution ID', type: 'string', show: true, width: 150 }, - { id: 'status', title: 'Status', type: 'string', show: true, width: 110 }, - { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }, - { id: 'trigger', title: 'Trigger', type: 'string', show: true, filter: false, width: 90 }, - { id: 'requestMethod', title: 'Method', type: 'string', show: true, width: 70 }, - { id: 'requestPath', title: 'Path', type: 'string', show: true, width: 90 }, - { id: 'duration', title: 'Duration', type: 'string', show: true, width: 80 } + { + id: 'status', + title: 'Status', + type: 'string', + show: true, + width: 110, + array: true, + format: 'enum', + elements: ['completed', 'scheduled', 'waiting', 'processing', 'cancelled', 'failed'] + }, + { + id: '$createdAt', + title: 'Created', + type: 'datetime', + show: true, + width: 140, + format: 'datetime' + }, + { + id: 'trigger', + title: 'Trigger', + type: 'string', + show: true, + width: 90, + array: true, + format: 'enum', + elements: ['http', 'scheduled', 'event'] + }, + { + id: 'requestMethod', + title: 'Method', + type: 'string', + show: true, + width: 70, + array: true, + format: 'enum', + elements: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] + }, + { + id: 'responseStatusCode', + title: 'Status code', + type: 'string', + show: true, + width: 100, + array: true, + format: 'integer' + }, + { + id: 'requestPath', + title: 'Path', + type: 'string', + show: true, + width: 90, + format: 'string' + }, + { + id: 'duration', + title: 'Duration', + type: 'string', + show: true, + width: 80, + format: 'integer' + } ]); onMount(() => { diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte index 37c21d3c8..89cead33b 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/table.svelte @@ -87,6 +87,10 @@ {execution.requestMethod} + {:else if column.id === 'responseStatusCode'} + + {execution.responseStatusCode} + {:else if column.id === 'requestPath'} {execution.requestPath} From 8ad01b38dcbc10ead7f37396619ad772151d0a76 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 24 Jun 2024 16:59:57 +0200 Subject: [PATCH 11/23] fix: operators is now a store not a const --- src/lib/components/filters/store.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index ce4895420..01de6d7f0 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -94,9 +94,8 @@ export function addFilter( value: any, // We cast to any to not cause type errors in the input components arrayValues: string[] = [] ) { - const operator = operatorKey ? operators[operatorKey] : null; + const operator = operatorKey ? get(operators)[operatorKey] : null; const column = columns.find((c) => c.id === columnId) as Column; - console.log(column, operator); if (!column || !operator) return; if (column.array) { queries.addFilter({ column, operator, value: arrayValues }); From 963217220296db917a7cf2035486adbefabdf27a Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 24 Jun 2024 18:07:21 +0200 Subject: [PATCH 12/23] feat: refactor operators --- src/lib/components/filters/store.ts | 317 ++++++++++++++++++++++------ 1 file changed, 250 insertions(+), 67 deletions(-) diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index 01de6d7f0..944d702f6 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -104,74 +104,212 @@ export function addFilter( } } -export const operators: Writable> = writable({ - 'starts with': { - toQuery: Query.startsWith, - toTag: (attribute, input) => `**${attribute}** starts with **${input}**`, - types: ['string'] - }, - 'ends with': { - toQuery: Query.endsWith, - toTag: (attribute, input) => `**${attribute}** ends with **${input}**`, - types: ['string'] - }, - 'greater than': { - toQuery: (attr, input) => Query.greaterThan(attr, Number(input)), - toTag: (attribute, input) => `**${attribute}** greater than **${input}**`, - types: ['integer', 'double', 'datetime'] - }, - 'greater than or equal': { - toQuery: (attr, input) => Query.greaterThanEqual(attr, Number(input)), - toTag: (attribute, input) => `**${attribute}** greater than or equal to **${input}**`, - types: ['integer', 'double', 'datetime'] - }, - 'less than': { - toQuery: Query.lessThan, - toTag: (attribute, input) => `**${attribute}** less than **${input}**`, - types: ['integer', 'double', 'datetime'] - }, - 'less than or equal': { - toQuery: Query.lessThanEqual, - toTag: (attribute, input) => `**${attribute}** less than or equal to **${input}**`, - types: ['integer', 'double', 'datetime'] - }, - equal: { - toQuery: Query.equal, - toTag: (attribute, input) => `**${attribute}** equal to **${input}**`, - types: ['string', 'integer', 'double', 'boolean'] - }, - 'not equal': { - toQuery: Query.notEqual, - toTag: (attribute, input) => `**${attribute}** not equal to **${input}**`, - types: ['string', 'integer', 'double', 'boolean'] - }, - 'is not null': { - toQuery: Query.isNotNull, - toTag: (attribute) => `**${attribute}** is not null`, - types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], - hideInput: true - }, - 'is null': { - toQuery: Query.isNull, - toTag: (attribute) => `**${attribute}** is null`, - types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], - hideInput: true - }, - contains: { - toQuery: Query.contains, - toTag: (attribute, input) => { - if (Array.isArray(input) && input.length > 2) { - return { - value: input, - tag: `**${attribute}** contains **${formatArray(input)}** ` - }; - } else { - return `**${attribute}** contains **${input}**`; - } - }, - types: ['string', 'integer', 'double', 'boolean', 'datetime', 'enum'] +// const defaultOperators: Record = { +// 'starts with': { +// toQuery: Query.startsWith, +// toTag: (attribute, input) => `**${attribute}** starts with **${input}**`, +// types: ['string'] +// }, +// 'ends with': { +// toQuery: Query.endsWith, +// toTag: (attribute, input) => `**${attribute}** ends with **${input}**`, +// types: ['string'] +// }, +// 'greater than': { +// toQuery: (attr, input) => Query.greaterThan(attr, Number(input)), +// toTag: (attribute, input) => `**${attribute}** greater than **${input}**`, +// types: ['integer', 'double', 'datetime'] +// }, +// 'greater than or equal': { +// toQuery: (attr, input) => Query.greaterThanEqual(attr, Number(input)), +// toTag: (attribute, input) => `**${attribute}** greater than or equal to **${input}**`, +// types: ['integer', 'double', 'datetime'] +// }, +// 'less than': { +// toQuery: Query.lessThan, +// toTag: (attribute, input) => `**${attribute}** less than **${input}**`, +// types: ['integer', 'double', 'datetime'] +// }, +// 'less than or equal': { +// toQuery: Query.lessThanEqual, +// toTag: (attribute, input) => `**${attribute}** less than or equal to **${input}**`, +// types: ['integer', 'double', 'datetime'] +// }, +// equal: { +// toQuery: Query.equal, +// toTag: (attribute, input) => `**${attribute}** equal to **${input}**`, +// types: ['string', 'integer', 'double', 'boolean'] +// }, +// 'not equal': { +// toQuery: Query.notEqual, +// toTag: (attribute, input) => `**${attribute}** not equal to **${input}**`, +// types: ['string', 'integer', 'double', 'boolean'] +// }, +// 'is not null': { +// toQuery: Query.isNotNull, +// toTag: (attribute) => `**${attribute}** is not null`, +// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], +// hideInput: true +// }, +// 'is null': { +// toQuery: Query.isNull, +// toTag: (attribute) => `**${attribute}** is null`, +// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], +// hideInput: true +// }, +// contains: { +// toQuery: Query.contains, +// toTag: (attribute, input) => { +// if (Array.isArray(input) && input.length > 2) { +// return { +// value: input, +// tag: `**${attribute}** contains **${formatArray(input)}** ` +// }; +// } else { +// return `**${attribute}** contains **${input}**`; +// } +// }, +// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'enum'] +// } +// }; + +enum ValidOperators { + startsWith = 'starts with', + endsWith = 'ends with', + greaterThan = 'greater than', + greaterThanOrEqual = 'greater than or equal', + lessThan = 'less than', + lessThanOrEqual = 'less than or equal', + equal = 'equal', + notEqual = 'not equal', + isNotNull = 'is not null', + isNull = 'is null', + contains = 'contains' +} + +enum ValidTypes { + string = 'string', + integer = 'integer', + double = 'double', + boolean = 'boolean', + datetime = 'datetime', + relationship = 'relationship', + enum = 'enum' +} + +const operatorsMap = new Map< + ValidOperators, + { + name: ValidOperators; + query: (attr: string, input: string | number | string[]) => string; + types: ColumnType[]; + hideInput?: boolean; } -}); +>([ + [ + ValidOperators.startsWith, + { name: ValidOperators.startsWith, query: Query.startsWith, types: [ValidTypes.string] } + ], + [ + ValidOperators.endsWith, + { name: ValidOperators.endsWith, query: Query.endsWith, types: [ValidTypes.string] } + ], + [ + ValidOperators.greaterThan, + { + name: ValidOperators.greaterThan, + query: Query.greaterThan, + types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + } + ], + [ + ValidOperators.greaterThanOrEqual, + { + name: ValidOperators.greaterThanOrEqual, + query: Query.greaterThanEqual, + types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + } + ], + [ + ValidOperators.lessThan, + { + name: ValidOperators.lessThan, + query: Query.lessThan, + types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + } + ], + [ + ValidOperators.lessThanOrEqual, + { + name: ValidOperators.lessThanOrEqual, + query: Query.lessThanEqual, + types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + } + ], + [ + ValidOperators.equal, + { + name: ValidOperators.equal, + query: Query.equal, + types: [ValidTypes.string, ValidTypes.integer, ValidTypes.double, ValidTypes.boolean] + } + ], + [ + ValidOperators.notEqual, + { + name: ValidOperators.notEqual, + query: Query.notEqual, + types: [ValidTypes.string, ValidTypes.integer, ValidTypes.double, ValidTypes.boolean] + } + ], + [ + ValidOperators.isNotNull, + { + name: ValidOperators.isNotNull, + query: Query.isNotNull, + types: [ + ValidTypes.string, + ValidTypes.integer, + ValidTypes.double, + ValidTypes.boolean, + ValidTypes.datetime, + ValidTypes.relationship + ], + hideInput: true + } + ], + [ + ValidOperators.isNull, + { + name: ValidOperators.isNull, + query: Query.isNull, + types: [ + ValidTypes.string, + ValidTypes.integer, + ValidTypes.double, + ValidTypes.boolean, + ValidTypes.datetime, + ValidTypes.relationship + ], + hideInput: true + } + ], + [ + ValidOperators.contains, + { + name: ValidOperators.contains, + query: Query.contains, + types: [ + ValidTypes.string, + ValidTypes.integer, + ValidTypes.double, + ValidTypes.boolean, + ValidTypes.datetime, + ValidTypes.enum + ] + } + ] +]); function formatArray(array: string[]) { if (!array?.length) return; @@ -181,3 +319,48 @@ function formatArray(array: string[]) { return array.join(' or '); } } + +function createOperatorStore() { + const generateDefaultOperators = () => { + const operators: Record = {}; + operatorsMap.forEach((value, key) => { + operators[key] = { + toQuery: value.query, + toTag: (attribute, input = null) => { + if (input === null) { + return `**${attribute}** ${value.name}`; + } else if (Array.isArray(input) && input.length > 2) { + return { + value: input, + tag: `**${attribute}** ${value.name} **${formatArray(input)}** ` + }; + } else { + return `**${attribute}** ${value.name} **${input}**`; + } + }, + types: value.types, + hideInput: value.hideInput + }; + }); + return operators; + }; + + const { subscribe, set, update } = writable>({ + ...generateDefaultOperators() + }); + + return { + subscribe, + set, + update, + setOperatorType: (operator: ValidOperators, type: ColumnType[]) => { + if (!operatorsMap.has(operator)) return; + update((operators) => { + operators[operator].types = type; + return operators; + }); + } + }; +} + +export const operators = createOperatorStore(); From 7c0bdac7f5035e140ae23c1f1ae913fbde8c9b69 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 25 Jun 2024 16:38:01 +0200 Subject: [PATCH 13/23] refactor: operators store --- src/lib/components/filters/store.ts | 259 ++++++------------ .../executions/+page.svelte | 4 +- 2 files changed, 92 insertions(+), 171 deletions(-) diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index 944d702f6..bf15ba091 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -1,6 +1,6 @@ import { goto } from '$app/navigation'; -import { derived, get, writable, type Writable } from 'svelte/store'; +import { derived, get, writable } from 'svelte/store'; import { page } from '$app/stores'; import deepEqual from 'deep-equal'; import type { Column, ColumnType } from '$lib/helpers/types'; @@ -104,208 +104,123 @@ export function addFilter( } } -// const defaultOperators: Record = { -// 'starts with': { -// toQuery: Query.startsWith, -// toTag: (attribute, input) => `**${attribute}** starts with **${input}**`, -// types: ['string'] -// }, -// 'ends with': { -// toQuery: Query.endsWith, -// toTag: (attribute, input) => `**${attribute}** ends with **${input}**`, -// types: ['string'] -// }, -// 'greater than': { -// toQuery: (attr, input) => Query.greaterThan(attr, Number(input)), -// toTag: (attribute, input) => `**${attribute}** greater than **${input}**`, -// types: ['integer', 'double', 'datetime'] -// }, -// 'greater than or equal': { -// toQuery: (attr, input) => Query.greaterThanEqual(attr, Number(input)), -// toTag: (attribute, input) => `**${attribute}** greater than or equal to **${input}**`, -// types: ['integer', 'double', 'datetime'] -// }, -// 'less than': { -// toQuery: Query.lessThan, -// toTag: (attribute, input) => `**${attribute}** less than **${input}**`, -// types: ['integer', 'double', 'datetime'] -// }, -// 'less than or equal': { -// toQuery: Query.lessThanEqual, -// toTag: (attribute, input) => `**${attribute}** less than or equal to **${input}**`, -// types: ['integer', 'double', 'datetime'] -// }, -// equal: { -// toQuery: Query.equal, -// toTag: (attribute, input) => `**${attribute}** equal to **${input}**`, -// types: ['string', 'integer', 'double', 'boolean'] -// }, -// 'not equal': { -// toQuery: Query.notEqual, -// toTag: (attribute, input) => `**${attribute}** not equal to **${input}**`, -// types: ['string', 'integer', 'double', 'boolean'] -// }, -// 'is not null': { -// toQuery: Query.isNotNull, -// toTag: (attribute) => `**${attribute}** is not null`, -// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], -// hideInput: true -// }, -// 'is null': { -// toQuery: Query.isNull, -// toTag: (attribute) => `**${attribute}** is null`, -// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'], -// hideInput: true -// }, -// contains: { -// toQuery: Query.contains, -// toTag: (attribute, input) => { -// if (Array.isArray(input) && input.length > 2) { -// return { -// value: input, -// tag: `**${attribute}** contains **${formatArray(input)}** ` -// }; -// } else { -// return `**${attribute}** contains **${input}**`; -// } -// }, -// types: ['string', 'integer', 'double', 'boolean', 'datetime', 'enum'] -// } -// }; - -enum ValidOperators { - startsWith = 'starts with', - endsWith = 'ends with', - greaterThan = 'greater than', - greaterThanOrEqual = 'greater than or equal', - lessThan = 'less than', - lessThanOrEqual = 'less than or equal', - equal = 'equal', - notEqual = 'not equal', - isNotNull = 'is not null', - isNull = 'is null', - contains = 'contains' +export enum ValidOperators { + StartsWith = 'starts with', + EndsWith = 'ends with', + GreaterThan = 'greater than', + GreaterThanOrEqual = 'greater than or equal', + LessThan = 'less than', + LessThanOrEqual = 'less than or equal', + Equal = 'equal', + NotEqual = 'not equal', + IsNotNull = 'is not null', + IsNull = 'is null', + Contains = 'contains' } -enum ValidTypes { - string = 'string', - integer = 'integer', - double = 'double', - boolean = 'boolean', - datetime = 'datetime', - relationship = 'relationship', - enum = 'enum' +export enum ValidTypes { + String = 'string', + Integer = 'integer', + Double = 'double', + Boolean = 'boolean', + Datetime = 'datetime', + Relationship = 'relationship', + Enum = 'enum' } -const operatorsMap = new Map< +const operatorsDefault = new Map< ValidOperators, { - name: ValidOperators; query: (attr: string, input: string | number | string[]) => string; types: ColumnType[]; hideInput?: boolean; } >([ + [ValidOperators.StartsWith, { query: Query.startsWith, types: [ValidTypes.String] }], + [ValidOperators.EndsWith, { query: Query.endsWith, types: [ValidTypes.String] }], [ - ValidOperators.startsWith, - { name: ValidOperators.startsWith, query: Query.startsWith, types: [ValidTypes.string] } - ], - [ - ValidOperators.endsWith, - { name: ValidOperators.endsWith, query: Query.endsWith, types: [ValidTypes.string] } - ], - [ - ValidOperators.greaterThan, + ValidOperators.GreaterThan, { - name: ValidOperators.greaterThan, query: Query.greaterThan, - types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + types: [ValidTypes.Integer, ValidTypes.Double, ValidTypes.Datetime] } ], [ - ValidOperators.greaterThanOrEqual, + ValidOperators.GreaterThanOrEqual, { - name: ValidOperators.greaterThanOrEqual, query: Query.greaterThanEqual, - types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + types: [ValidTypes.Integer, ValidTypes.Double, ValidTypes.Datetime] } ], [ - ValidOperators.lessThan, + ValidOperators.LessThan, { - name: ValidOperators.lessThan, query: Query.lessThan, - types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + types: [ValidTypes.Integer, ValidTypes.Double, ValidTypes.Datetime] } ], [ - ValidOperators.lessThanOrEqual, + ValidOperators.LessThanOrEqual, { - name: ValidOperators.lessThanOrEqual, query: Query.lessThanEqual, - types: [ValidTypes.integer, ValidTypes.double, ValidTypes.datetime] + types: [ValidTypes.Integer, ValidTypes.Double, ValidTypes.Datetime] } ], [ - ValidOperators.equal, + ValidOperators.Equal, { - name: ValidOperators.equal, query: Query.equal, - types: [ValidTypes.string, ValidTypes.integer, ValidTypes.double, ValidTypes.boolean] + types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean] } ], [ - ValidOperators.notEqual, + ValidOperators.NotEqual, { - name: ValidOperators.notEqual, query: Query.notEqual, - types: [ValidTypes.string, ValidTypes.integer, ValidTypes.double, ValidTypes.boolean] + types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean] } ], [ - ValidOperators.isNotNull, + ValidOperators.IsNotNull, { - name: ValidOperators.isNotNull, query: Query.isNotNull, types: [ - ValidTypes.string, - ValidTypes.integer, - ValidTypes.double, - ValidTypes.boolean, - ValidTypes.datetime, - ValidTypes.relationship + ValidTypes.String, + ValidTypes.Integer, + ValidTypes.Double, + ValidTypes.Boolean, + ValidTypes.Datetime, + ValidTypes.Relationship ], hideInput: true } ], [ - ValidOperators.isNull, + ValidOperators.IsNull, { - name: ValidOperators.isNull, query: Query.isNull, types: [ - ValidTypes.string, - ValidTypes.integer, - ValidTypes.double, - ValidTypes.boolean, - ValidTypes.datetime, - ValidTypes.relationship + ValidTypes.String, + ValidTypes.Integer, + ValidTypes.Double, + ValidTypes.Boolean, + ValidTypes.Datetime, + ValidTypes.Relationship ], hideInput: true } ], [ - ValidOperators.contains, + ValidOperators.Contains, { - name: ValidOperators.contains, query: Query.contains, types: [ - ValidTypes.string, - ValidTypes.integer, - ValidTypes.double, - ValidTypes.boolean, - ValidTypes.datetime, - ValidTypes.enum + ValidTypes.String, + ValidTypes.Integer, + ValidTypes.Double, + ValidTypes.Boolean, + ValidTypes.Datetime, + ValidTypes.Enum ] } ] @@ -320,31 +235,31 @@ function formatArray(array: string[]) { } } -function createOperatorStore() { - const generateDefaultOperators = () => { - const operators: Record = {}; - operatorsMap.forEach((value, key) => { - operators[key] = { - toQuery: value.query, - toTag: (attribute, input = null) => { - if (input === null) { - return `**${attribute}** ${value.name}`; - } else if (Array.isArray(input) && input.length > 2) { - return { - value: input, - tag: `**${attribute}** ${value.name} **${formatArray(input)}** ` - }; - } else { - return `**${attribute}** ${value.name} **${input}**`; - } - }, - types: value.types, - hideInput: value.hideInput - }; - }); - return operators; - }; +function generateDefaultOperators() { + const operators: Record = {}; + operatorsDefault.forEach((operator, operatorName) => { + operators[operatorName] = { + toQuery: operator.query, + toTag: (attribute, input = null) => { + if (input === null) { + return `**${attribute}** ${operatorName}`; + } else if (Array.isArray(input) && input.length > 2) { + return { + value: input, + tag: `**${attribute}** ${operatorName} **${formatArray(input)}** ` + }; + } else { + return `**${attribute}** ${operatorName} **${input}**`; + } + }, + types: operator.types, + hideInput: operator.hideInput + }; + }); + return operators; +} +function createOperatorStore() { const { subscribe, set, update } = writable>({ ...generateDefaultOperators() }); @@ -353,10 +268,16 @@ function createOperatorStore() { subscribe, set, update, - setOperatorType: (operator: ValidOperators, type: ColumnType[]) => { - if (!operatorsMap.has(operator)) return; + reset: () => { + update(() => { + return { ...generateDefaultOperators() }; + }); + }, + setActiveOperators: (activeOperators: ValidOperators[]) => { update((operators) => { - operators[operator].types = type; + operatorsDefault.forEach((value, key) => { + operators[key].types = activeOperators.includes(key) ? value.types : []; + }); return operators; }); } 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 4f341efb2..2b0794b8c 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 @@ -22,6 +22,8 @@ export let data; + const logs = getServiceLimit('logs'); + const columns = writable([ { id: '$id', title: 'Execution ID', type: 'string', show: true, width: 150 }, { @@ -96,8 +98,6 @@ } }); }); - - const logs = getServiceLimit('logs'); From afce6892910ec9edea039b40bfd88a231a66ef6e Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 25 Jun 2024 16:39:10 +0200 Subject: [PATCH 14/23] refactor: operators doesn't need to be a store --- src/lib/components/filters/content.svelte | 4 ++-- src/lib/components/filters/store.ts | 29 ++--------------------- 2 files changed, 4 insertions(+), 29 deletions(-) diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte index e29c7698b..6bd854c4c 100644 --- a/src/lib/components/filters/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -24,14 +24,14 @@ $: column = $columns.find((c) => c.id === columnId) as Column; - $: operatorsForColumn = Object.entries($operators) + $: operatorsForColumn = Object.entries(operators) .filter(([, v]) => v.types.includes(column?.type)) .map(([k]) => ({ label: k, value: k })); - $: operator = operatorKey ? $operators[operatorKey] : null; + $: operator = operatorKey ? operators[operatorKey] : null; $: { columnId; operatorKey = null; diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index bf15ba091..af66910f1 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -94,7 +94,7 @@ export function addFilter( value: any, // We cast to any to not cause type errors in the input components arrayValues: string[] = [] ) { - const operator = operatorKey ? get(operators)[operatorKey] : null; + const operator = operatorKey ? operators[operatorKey] : null; const column = columns.find((c) => c.id === columnId) as Column; if (!column || !operator) return; if (column.array) { @@ -259,29 +259,4 @@ function generateDefaultOperators() { return operators; } -function createOperatorStore() { - const { subscribe, set, update } = writable>({ - ...generateDefaultOperators() - }); - - return { - subscribe, - set, - update, - reset: () => { - update(() => { - return { ...generateDefaultOperators() }; - }); - }, - setActiveOperators: (activeOperators: ValidOperators[]) => { - update((operators) => { - operatorsDefault.forEach((value, key) => { - operators[key].types = activeOperators.includes(key) ? value.types : []; - }); - return operators; - }); - } - }; -} - -export const operators = createOperatorStore(); +export const operators = generateDefaultOperators(); From 049f3a358788a4ff6d663b3e7bde758320f7c748 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 25 Jun 2024 16:52:34 +0200 Subject: [PATCH 15/23] feat: add datetime filter --- src/lib/components/filters/content.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte index 6bd854c4c..b954e1514 100644 --- a/src/lib/components/filters/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -6,7 +6,8 @@ InputText, InputTags, FormList, - InputSelectCheckbox + InputSelectCheckbox, + InputDateTime } from '$lib/elements/forms'; import { createEventDispatcher, onMount } from 'svelte'; import { tags, queries, type TagValue, operators, addFilter } from './store'; @@ -138,6 +139,8 @@ { label: 'False', value: false } ].filter(Boolean)} bind:value /> + {:else if column.type === 'datetime'} + {:else} {/if} From 45cb5971cfe4dfe6213700f8a29ee51c268b78a6 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 25 Jun 2024 16:52:51 +0200 Subject: [PATCH 16/23] fix: use colum title in the tag, not id --- src/lib/components/filters/store.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index af66910f1..eb20d01e2 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -39,7 +39,7 @@ function initQueries(initialValue = new Map()) { function addFilter({ column, operator, value }: AddFilterArgs) { queries.update((map) => { - map.set(operator.toTag(column.id, value), operator.toQuery(column.id, value)); + map.set(operator.toTag(column.title, value), operator.toQuery(column.id, value)); return map; }); } From ca30a2ddeee7c77940e85a17b7a90e8487248c25 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 26 Jun 2024 16:33:39 +0200 Subject: [PATCH 17/23] feat: create tagList component, fix logic for enums and arrays --- src/lib/components/filters/content.svelte | 48 ++--------------- src/lib/components/filters/filters.svelte | 6 ++- src/lib/components/filters/index.ts | 1 + src/lib/components/filters/store.ts | 16 +++++- src/lib/components/filters/tagList.svelte | 51 +++++++++++++++++++ .../executions/+page.svelte | 5 +- 6 files changed, 76 insertions(+), 51 deletions(-) create mode 100644 src/lib/components/filters/tagList.svelte diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte index b954e1514..6bba3b686 100644 --- a/src/lib/components/filters/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -10,10 +10,10 @@ InputDateTime } from '$lib/elements/forms'; import { createEventDispatcher, onMount } from 'svelte'; - import { tags, queries, type TagValue, operators, addFilter } from './store'; + import { tags, operators, addFilter } from './store'; import type { Column } from '$lib/helpers/types'; import type { Writable } from 'svelte/store'; - import { tooltip } from '$lib/actions/tooltip'; + import { TagList } from '.'; // We cast to any to not cause type errors in the input components /* eslint @typescript-eslint/no-explicit-any: 'off' */ @@ -52,21 +52,6 @@ arrayValues = []; } - function tagFormat(node: HTMLElement) { - node.innerHTML = node.innerHTML.replace(/\*\*(.*?)\*\*/g, '$1'); - } - - function isTypeTagValue(obj: any): obj is TagValue { - if (typeof obj === 'string') return false; - return ( - obj && - typeof obj.tag === 'string' && - (typeof obj.value === 'string' || - typeof obj.value === 'number' || - Array.isArray(obj.value)) - ); - } - const dispatch = createEventDispatcher<{ clear: void; apply: { applied: number }; @@ -154,34 +139,7 @@
        - {#each $tags as tag (tag)} - {#if isTypeTagValue(tag)} - - {:else} - - {/if} - {/each} +
      diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte index 45e121eb7..f56584fe0 100644 --- a/src/lib/components/filters/filters.svelte +++ b/src/lib/components/filters/filters.svelte @@ -39,7 +39,7 @@ } function apply() { - if (selectedColumn && operatorKey && value) { + if (selectedColumn && operatorKey && (value || arrayValues.length)) { addFilter($columns, selectedColumn, operatorKey, value, arrayValues); selectedColumn = null; value = null; @@ -53,7 +53,9 @@ selectedColumn = null; } - $: isButtonDisabled = $queriesAreDirty ? false : !selectedColumn || !operatorKey || !value; + $: isButtonDisabled = $queriesAreDirty + ? false + : !selectedColumn || !operatorKey || (!value && !arrayValues.length);
      diff --git a/src/lib/components/filters/index.ts b/src/lib/components/filters/index.ts index 223e43ebf..7d3b7f3d2 100644 --- a/src/lib/components/filters/index.ts +++ b/src/lib/components/filters/index.ts @@ -1,2 +1,3 @@ export { default as Filters } from './filters.svelte'; +export { default as TagList } from './tagList.svelte'; export { hasPageQueries, queryParamToMap, queries } from '$lib/components/filters/store'; diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts index eb20d01e2..a3a94bd31 100644 --- a/src/lib/components/filters/store.ts +++ b/src/lib/components/filters/store.ts @@ -170,14 +170,26 @@ const operatorsDefault = new Map< ValidOperators.Equal, { query: Query.equal, - types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean] + types: [ + ValidTypes.String, + ValidTypes.Integer, + ValidTypes.Double, + ValidTypes.Boolean, + ValidTypes.Enum + ] } ], [ ValidOperators.NotEqual, { query: Query.notEqual, - types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean] + types: [ + ValidTypes.String, + ValidTypes.Integer, + ValidTypes.Double, + ValidTypes.Boolean, + ValidTypes.Enum + ] } ], [ diff --git a/src/lib/components/filters/tagList.svelte b/src/lib/components/filters/tagList.svelte new file mode 100644 index 000000000..6b69efa4c --- /dev/null +++ b/src/lib/components/filters/tagList.svelte @@ -0,0 +1,51 @@ + + +{#each $tags as tag (tag)} + {#if isTypeTagValue(tag)} + + {:else} + + {/if} +{/each} 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 2b0794b8c..963022919 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 @@ -14,7 +14,7 @@ import Create from '../create.svelte'; import { abbreviateNumber } from '$lib/helpers/numbers'; import { base } from '$app/paths'; - import { Filters } from '$lib/components/filters'; + import { Filters, TagList } from '$lib/components/filters'; import { writable } from 'svelte/store'; import type { Column } from '$lib/helpers/types'; import { View } from '$lib/helpers/load'; @@ -29,7 +29,7 @@ { id: 'status', title: 'Status', - type: 'string', + type: 'enum', show: true, width: 110, array: true, @@ -101,6 +101,7 @@ +

      The {tier} plan has limits

      From 85673b764a01c98ef23cfca1977aba3361f0c14a Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 27 Jun 2024 14:36:23 +0200 Subject: [PATCH 18/23] feat: new layout --- src/lib/components/filters/content.svelte | 36 +++++++++++++---- src/lib/components/filters/filters.svelte | 39 +++++++++++++------ src/lib/components/filters/store.ts | 24 +++++++----- .../executions/+page.svelte | 34 ++++++++++++++-- 4 files changed, 100 insertions(+), 33 deletions(-) diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte index 6bba3b686..b43bddd85 100644 --- a/src/lib/components/filters/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -22,6 +22,7 @@ export let columnId: string | null = null; export let arrayValues: string[] = []; export let operatorKey: string | null = null; + export let singleCondition = false; $: column = $columns.find((c) => c.id === columnId) as Column; @@ -42,6 +43,12 @@ onMount(() => { value = column?.array ? [] : null; + if (column?.type === 'datetime') { + const today = new Date(); + console.log(today.toISOString()); + value = today.toISOString(); + console.log(value); + } }); function addFilterAndReset() { @@ -57,6 +64,13 @@ apply: { applied: number }; }>(); dispatch('apply', { applied: $tags.length }); + + // $: if (column?.type === 'datetime' && !value) { + // const today = new Date(); + // console.log(today.toISOString()); + // value = today.toISOString(); + // console.log('value', value); + // }
      @@ -125,22 +139,28 @@ ].filter(Boolean)} bind:value /> {:else if column.type === 'datetime'} - + {#key value} + + {/key} {:else} {/if} {/if} {/if} - + {#if !singleCondition} + + {/if} -
        - -
      + {#if !singleCondition} +
        + +
      + {/if}