diff --git a/package.json b/package.json index 771e3a4f2..9dd2b4643 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332", "@appwrite.io/pink-legacy": "^1.0.1", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c19429a8f..e99217a0f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.0.1 version: 1.0.1 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -215,14 +215,14 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@d13e864} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +236,8 @@ packages: '@appwrite.io/pink-legacy@1.0.1': resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4099,11 +4099,11 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@d13e864': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332(svelte@4.2.19)': dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4116,9 +4116,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.3(svelte@4.2.19) diff --git a/src/lib/components/usageCard.svelte b/src/lib/components/usageCard.svelte index 2d4d4a0b7..af652f91d 100644 --- a/src/lib/components/usageCard.svelte +++ b/src/lib/components/usageCard.svelte @@ -16,7 +16,7 @@ {value} {:else} - + {/if} diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte index 844f18c25..9ccb04f53 100644 --- a/src/lib/elements/forms/inputCheckbox.svelte +++ b/src/lib/elements/forms/inputCheckbox.svelte @@ -11,6 +11,7 @@ element?: HTMLInputElement | undefined; indeterminate?: boolean; size?: 's' | 'm'; + description?: string; } export let id: string = ''; @@ -20,6 +21,7 @@ export let disabled = false; export let element: HTMLInputElement | undefined = undefined; export let size: $$Props['size'] = 's'; + export let description = ''; let error: string; const handleInvalid = (event: Event) => { @@ -47,6 +49,7 @@ {size} {label} {required} + {description} on:invalid={handleInvalid} on:click on:change /> diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte index 750493df2..607d9501e 100644 --- a/src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte +++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte @@ -1,22 +1,29 @@

{#if deployment.providerCommitAuthor} - - {capitalize(timeFromNow(deployment.$updatedAt))} - + + + {capitalize(timeFromNow(deployment.$updatedAt))} + + {toLocaleDateTime(deployment.$updatedAt)} + by {deployment.providerCommitAuthor} {:else} - - {capitalize(timeFromNow(deployment.$updatedAt))} - + + + {capitalize(timeFromNow(deployment.$updatedAt))} + + {toLocaleDateTime(deployment.$updatedAt)} + {/if}

diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte index ff94b5d96..3dce20f83 100644 --- a/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte +++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte @@ -28,7 +28,7 @@ - + {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl} - {#key buildLogs} - + {/key} {#if ['processing', 'building'].includes(status)} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte index 582454b82..abda0ca03 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte @@ -7,23 +7,33 @@ import { Button } from '$lib/elements/forms'; import { protocol } from '$routes/(console)/store'; import InstantRollbackDomain from './instantRollbackDomain.svelte'; - import { base } from '$app/paths'; - import { page } from '$app/stores'; - import { invalidate } from '$app/navigation'; - import { Dependencies } from '$lib/constants'; import { app } from '$lib/stores/app'; import EmptyDeploymentDark from './empty-deployment-dark.svg'; import EmptyDeploymentLight from './empty-deployment-light.svg'; + import { sdk } from '$lib/stores/sdk'; + import { invalidate } from '$app/navigation'; + import { Dependencies } from '$lib/constants'; + import { onMount } from 'svelte'; + import { page } from '$app/stores'; export let data; let showRollback = false; - $: console.log(data.site); - $: console.log(data.deployment); - $: console.log(data.deploymentList); - $: console.log(data.proxyRuleList); + let unsubscribe: { (): void }; - // TODO: dark mode empty state + onMount(() => { + unsubscribe = sdk.forConsole.client.subscribe('console', (response) => { + if (response.events.includes(`sites.${$page.params.site}.deployments.*`)) { + console.log('test'); + invalidate(Dependencies.SITE); + } + }); + }); + + // $: console.log(data.site); + $: console.log(data.deployment); + // $: console.log(data.deploymentList); + // $: console.log(data.proxyRuleList); @@ -37,7 +47,7 @@ >Instant rollback - {:else} + {:else if data.deployment?.status === 'building'} - - - - - + + + {:else} + + + + You haven't deployed any sites yet. Get started by deploying your first + site. + {/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte index 097c73a92..0b696c04f 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte @@ -94,11 +94,12 @@ Create deployment - - + + { + on:click={(e) => { + toggle(e); if (!hasInstallation) { showConnectRepo = true; } else { @@ -108,13 +109,15 @@ Git { + on:click={(e) => { + toggle(e); showConnectCLI = true; }}> CLI { + on:click={(e) => { + toggle(e); showConnectManual = true; }}> Manual diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte index 7122848cd..223784b0b 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte @@ -4,80 +4,81 @@ import { Repositories } from '$lib/components/git'; import { Dependencies } from '$lib/constants'; import { Link } from '$lib/elements'; - import { Button } from '$lib/elements/forms'; - import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte'; + import { Button, InputCheckbox, InputSelect } from '$lib/elements/forms'; + import { timeFromNow } from '$lib/helpers/date'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { installation, repository, sortBranches } from '$lib/stores/vcs'; - import type { BuildRuntime, Framework, Models } from '@appwrite.io/console'; + import { Type, type Models } from '@appwrite.io/console'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { Icon, InlineCode, Layout, Spinner, Typography } from '@appwrite.io/pink-svelte'; - import { onMount } from 'svelte'; + import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte'; export let show = false; export let site: Models.Site; let installations = { installations: [], total: 0 }; let hasRepository = !!site?.providerRepositoryId; - let selectedRepository: string = null; + let selectedRepository: string = site.providerRepositoryId; let branch: string = null; + let activate = true; let error = ''; - onMount(async () => { - installations = await sdk.forProject.vcs.listInstallations(); - if (!site?.installationId && installations.total > 0) { - installation.set(installations.installations[0]); - } - if (!$repository?.id && hasRepository) { - $repository = await sdk.forProject.vcs.getRepository( - $installation.$id, - site.providerRepositoryId + async function loadInstallations() { + try { + installations = await sdk.forProject.vcs.listInstallations(); + if (!site?.installationId && installations.total > 0) { + installation.set(installations.installations[0]); + } + $installation = installations.installations.find( + (installation) => installation.$id === site.installationId ); + if (!$installation?.$id) { + $installation = installations.installations[0]; + } + } catch (error) { + console.log(error); } - console.log(installations); - }); + } - async function loadBranches() { - const { branches } = await sdk.forProject.vcs.listRepositoryBranches( - $installation.$id, - selectedRepository - ); - const sorted = sortBranches(branches); - branch = sorted[0]?.name ?? null; + async function load() { + try { + await loadInstallations(); + if (!$repository?.id && hasRepository) { + $repository = await sdk.forProject.vcs.getRepository( + $installation.$id, + site.providerRepositoryId + ); + } + const branchList = await sdk.forProject.vcs.listRepositoryBranches( + $installation.$id, + selectedRepository + ); - if (!branch) { - branch = 'main'; + console.log(branchList); + + const sorted = sortBranches(branchList.branches); + branch = sorted[0]?.name ?? null; + + if (!branch) { + branch = 'main'; + } + + return sorted; + } catch (error) { + console.log(installations); + console.log(error); } - - return sorted; } async function createDeployment() { try { - if (!site.installationId || !site.providerRepositoryId || !branch) { - await sdk.forProject.sites.update( - site.$id, - site.name, - site?.framework as Framework, - site.enabled || undefined, - site.timeout || undefined, - site.installCommand || undefined, - site.buildCommand || undefined, - site.outputDirectory || undefined, - (site?.buildRuntime as BuildRuntime) || undefined, - site.adapter || undefined, - site.fallbackFile || undefined, - site.installationId || $installation.$id || undefined, - site.providerRepositoryId || $repository.id || undefined, - branch, - site.providerSilentMode || undefined, - undefined //TODO: add dir? - ); - } + await sdk.forProject.sites.createVcsDeployment(site.$id, Type.Branch, branch, activate); show = false; invalidate(Dependencies.DEPLOYMENTS); addNotification({ - message: 'Deployment has been created successfully', + message: activate + ? 'Deployment is in progress. It will be automatically activated after build step completes.' + : 'Deployment is in progress. You can activate it after build step completes.', type: 'success' }); } catch (e) { @@ -88,26 +89,26 @@ - Enter a valid commit reference to create a new deployment from or - use the CLI to deploy. Learn more + Enter a valid commit reference to create a new deployment. Learn more - {#if installations && hasRepository} - - - - - - {$repository?.organization}/{$repository?.name} - + {#if hasRepository} + {#await load()} + + + + + + + + + + - - {#await loadBranches()} - {:then branches} {@const options = branches @@ -120,24 +121,48 @@ ?.sort((a, b) => { return a.label > b.label ? 1 : -1; }) ?? []} - - + + + + + + {$repository?.organization}/{$repository?.name} + + + + + Last updated {timeFromNow($repository?.pushedAt)} + + + + { branch = event.detail.value; }} - interactiveOutput - name="branch" {options} /> + {#if branch} + + {/if} {/await} - {/if} - {#if !hasRepository} + {:else} - + diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte index 1d6ff03bd..099dcee3d 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte @@ -55,21 +55,25 @@ }); async function fetchUsage() { - metrics.forEach((metric) => { - metric.value = null; - }); - metrics = metrics; - try { - const usage = await sdk.forProject.sites.getUsage($page.params.site, range); - metrics = metrics.map((metric) => { - metric.value = usage[metric.id] ?? '-'; - return metric; + // Add timeout to make it look nicer + setTimeout(async () => { + metrics.forEach((metric) => { + metric.value = null; }); metrics = metrics; - console.log(usage); - } catch (error) { - console.log(error); - } + + try { + const usage = await sdk.forProject.sites.getUsage($page.params.site, range); + metrics = metrics.map((metric) => { + metric.value = usage[metric.id] ?? '-'; + return metric; + }); + metrics = metrics; + console.log(usage); + } catch (error) { + console.log(error); + } + }, 800); } $: console.log(metrics); @@ -95,9 +99,9 @@ on:change={fetchUsage} /> - + {#each metrics as metric} {/each} - + diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte index f9efb05bd..0252024c3 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte @@ -193,7 +193,7 @@ - + {#each filter.options as option (option.value + option.checked)}