diff --git a/package.json b/package.json index 96260c21a..83bf17a5d 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464", + "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6 ", "@appwrite.io/pink-legacy": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f37e4783..adaf43804 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464 - version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464 + specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400 + version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400 '@appwrite.io/pink-icons': specifier: 0.25.0 version: 0.25.0 @@ -211,8 +211,8 @@ packages: '@analytics/type-utils@0.6.2': resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==} - '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464': - resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464} + '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400': + resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400} version: 1.2.1 '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6': @@ -4097,7 +4097,7 @@ snapshots: '@analytics/type-utils@0.6.2': {} - '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464': {} + '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400': {} '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6(svelte@4.2.19)': dependencies: diff --git a/src/lib/helpers/timeConversion.ts b/src/lib/helpers/timeConversion.ts index 330a38c2f..a0cdf725e 100644 --- a/src/lib/helpers/timeConversion.ts +++ b/src/lib/helpers/timeConversion.ts @@ -114,3 +114,29 @@ export function formatTimeDetailed(time: number): string { return parts.join(' '); } + +/** + * Calculates the time difference between a starting date/time and the current time. + * Returns the difference formatted in seconds, minutes, or hours depending on the magnitude. + * + * @export + * @param {Date | number | string} startTime - The starting date/time, timestamp in milliseconds, or ISO date string (e.g., '2025-03-20T15:50:43.495+00:00') + * @returns {string} The formatted time difference + */ +export function timer(startTime: Date | number | string): string { + let start: number; + + if (startTime instanceof Date) { + start = startTime.getTime(); + } else if (typeof startTime === 'number') { + start = startTime; + } else { + // Handle ISO date string format + start = new Date(startTime).getTime(); + } + + const now = new Date().getTime(); + const diffInSeconds = (now - start) / 1000; + + return calculateTime(diffInSeconds); +} diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte index 58864b1c0..4025cc497 100644 --- a/src/routes/(console)/project-[project]/sites/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/+page.svelte @@ -22,6 +22,10 @@ import { columns } from './store'; import { View } from '$lib/helpers/load'; import Table from './table.svelte'; + import { onMount } from 'svelte'; + import { invalidate } from '$app/navigation'; + import { Dependencies } from '$lib/constants'; + import { sdk } from '$lib/stores/sdk'; export let data; let show = false; @@ -41,6 +45,14 @@ ]); $updateCommandGroupRanks({ sites: 1000 }); + + onMount(() => { + return sdk.forConsole.client.subscribe('console', (response) => { + if (response.events.includes(`sites.*`)) { + invalidate(Dependencies.SITES); + } + }); + }); @@ -60,7 +72,7 @@ {#if data.siteList.total} {#if data.view === View.Grid} - + {:else} {/if} diff --git a/src/routes/(console)/project-[project]/sites/+page.ts b/src/routes/(console)/project-[project]/sites/+page.ts index 1525d8c9e..73c610a59 100644 --- a/src/routes/(console)/project-[project]/sites/+page.ts +++ b/src/routes/(console)/project-[project]/sites/+page.ts @@ -17,35 +17,11 @@ export const load = async ({ url, depends, route }) => { search || undefined ); - // TODO: @Meldiron Discuss better solution for getting screnshot IDs - const deployments: Models.Deployment[] = []; - await Promise.all( - siteList.sites.map(async (site) => { - if (!site.deploymentId) { - return; - } - - // TODO: @Meldiron Tripple-check if this can ever happened - // It happened to me but on QA that might have corrupted data - try { - const deployment = await sdk.forProject.sites.getDeployment( - site.$id, - site.deploymentId - ); - deployments.push(deployment); - } catch (err) { - // Active deployment no longer available (deleted?) - console.warn(err); - } - }) - ); - return { offset, limit, search, siteList, - deployments, view }; }; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte index eaf9ca1bb..548b66be2 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte @@ -37,6 +37,7 @@ export let frameworks: Models.Framework[]; export let selectedFramework: Models.Framework; $: frameworkData = frameworks.find((framework) => framework.key === selectedFramework?.key); + $: ssr = frameworkData?.adapters.find((adapter) => adapter.key === 'ssr'); export let variables: Partial[] = []; export let installCommand = ''; @@ -54,9 +55,9 @@ let frameworkId = selectedFramework.key; $: if (!installCommand || !buildCommand || !outputDirectory) { - installCommand ||= frameworkData?.adapters?.ssr?.installCommand; - buildCommand ||= frameworkData?.adapters?.ssr?.buildCommand; - outputDirectory ||= frameworkData?.adapters?.ssr?.outputDirectory; + installCommand ||= ssr?.installCommand; + buildCommand ||= ssr?.buildCommand; + outputDirectory ||= ssr?.outputDirectory; } @@ -86,15 +87,12 @@ id="installCommand" label="Install command" bind:value={installCommand} - placeholder={frameworkData?.adapters?.ssr?.installCommand} /> + placeholder={ssr?.installCommand} /> @@ -103,14 +101,12 @@ id="buildCommand" label="Build command" bind:value={buildCommand} - placeholder={frameworkData?.adapters?.ssr?.buildCommand} /> + placeholder={ssr?.buildCommand} /> @@ -119,15 +115,12 @@ id="outputDirectory" label="Output directory" bind:value={outputDirectory} - placeholder={frameworkData?.adapters?.ssr?.outputDirectory} /> + placeholder={ssr?.outputDirectory} /> diff --git a/src/routes/(console)/project-[project]/sites/grid.svelte b/src/routes/(console)/project-[project]/sites/grid.svelte index 8bf682b60..bc0365011 100644 --- a/src/routes/(console)/project-[project]/sites/grid.svelte +++ b/src/routes/(console)/project-[project]/sites/grid.svelte @@ -11,25 +11,22 @@ import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte'; import SitesActionMenu from './sitesActionMenu.svelte'; import { capitalize } from '$lib/helpers/string'; + import { timer } from '$lib/helpers/timeConversion'; export let siteList: Models.SiteList; - export let deployments: Models.Deployment[]; let showAddCollaborator = false; let selectedSite: Models.Site = null; function getScreenshot(theme: string, site: Models.Site) { - const deployment = - deployments.find((d) => site.deploymentId && d.$id === site.deploymentId) ?? null; - if (theme === 'dark') { - return deployment?.screenshotDark - ? getFilePreview(deployment.screenshotDark) + return site?.deploymentScreenshotDark + ? getFilePreview(site?.deploymentScreenshotDark) : `${base}/images/sites/screenshot-placeholder-dark.svg`; } - return deployment?.screenshotLight - ? getFilePreview(deployment.screenshotLight) + return site?.deploymentScreenshotLight + ? getFilePreview(site?.deploymentScreenshotLight) : `${base}/images/sites/screenshot-placeholder-light.svg`; } @@ -38,6 +35,14 @@ const endpoint = getApiEndpoint(); return endpoint + `/storage/buckets/screenshots/files/${fileId}/view?project=console`; } + + function generateDesc(site: Models.Site) { + if (site.latestDeploymentStatus === 'building') { + return `Deployment building ${timer(site.latestDeploymentCreatedAt)}`; + } else { + return `Deployed ${timeFromNow(site.deploymentCreatedAt)}`; + } + } @@ -47,7 +52,7 @@ padding="xxs"> diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte index 12b32e0fb..dcd79f94a 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte @@ -25,8 +25,8 @@ } if (message.events.includes('sites.*.deployments.*.update')) { invalidate(Dependencies.DEPLOYMENTS); - invalidate(Dependencies.FUNCTION); - + invalidate(Dependencies.SITE); + console.log(message); return; } if (message.events.includes('sites.*.deployments.*.delete')) { diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts index c0da6dbc3..853decfdf 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts @@ -19,7 +19,7 @@ export const columns = writable([ id: 'buildDuration', title: 'Build duration', type: 'integer', - width: { min: 110, max: 170 }, + width: { min: 110, max: 190 }, elements: [ { @@ -37,12 +37,32 @@ export const columns = writable([ ], filter: false }, + { + id: 'totalSize', + title: 'Total size', + type: 'integer', + width: { min: 110, max: 190 }, + elements: [ + { + value: 2 * 1000 * 1000, + label: 'more than 2MB' + }, + { + value: 10 * 1000 * 1000, + label: 'more than 10MB' + }, + { + value: 50 * 1000 * 1000, + label: 'more than 50MB' + } + ] + }, { id: 'sourceSize', title: 'Source size', type: 'integer', hide: true, - width: { min: 110, max: 170 }, + width: { min: 110, max: 190 }, elements: [ { value: 2 * 1000 * 1000, @@ -62,14 +82,15 @@ export const columns = writable([ id: 'buildSize', title: 'Build size', type: 'integer', + hide: true, filter: false, - width: { min: 90, max: 140 } + width: { min: 90, max: 190 } }, { id: 'type', title: 'Source', type: 'string', - width: { min: 90, max: 140 }, + width: { min: 90, max: 160 }, array: true, format: 'enum', elements: [ diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte index 505614071..5692c2e05 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte @@ -68,6 +68,8 @@ {:else} {formatTimeDetailed(deployment.buildDuration)} {/if} + {:else if column.id === 'totalSize'} + {calculateSize(deployment.totalSize)} {:else if column.id === 'sourceSize'} {calculateSize(deployment.sourceSize)} {:else if column.id === 'buildSize'} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte index 07f4f783a..cf99080bd 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte @@ -28,15 +28,12 @@ let fallback = site.fallbackFile; let isButtonDisabled = true; let showFallback = site.adapter === Adapter.Static; + $: adapterData = selectedFramework.adapters.find((a) => a.key === site.adapter); - onMount(async () => { - installCommand = - site?.installCommand ?? selectedFramework.adapters[site.adapter].defaultInstallCommand; - buildCommand = - site?.buildCommand ?? selectedFramework.adapters[site.adapter].defaultBuildCommand; - outputDirectory = - site?.outputDirectory ?? - selectedFramework.adapters[site.adapter].defaultOutputDirectory; + $: onMount(async () => { + installCommand = site?.installCommand ?? adapterData.installCommand; + buildCommand = site?.buildCommand ?? adapterData.buildCommand; + outputDirectory = site?.outputDirectory ?? adapterData.outputDirectory; }); async function updateName() { @@ -89,8 +86,9 @@ $: if (adapter === Adapter.Static) { showFallback = true; - fallback ||= selectedFramework.adapters.static.fallbackFile; - console.log(fallback, selectedFramework.adapters.static); + fallback ||= selectedFramework.adapters.find((a) => a.key === Adapter.Static).fallbackFile; + + console.log(selectedFramework.adapters.find((a) => a.key === Adapter.Static)); } else { showFallback = false; fallback = undefined; @@ -101,14 +99,17 @@ } $: frameworkDataAdapter = selectedFramework.adapters?.length - ? selectedFramework.adapters[site.adapter] - : frameworks[0].adapters[site.adapter]; + ? adapterData + : frameworks[0].adapters.find((a) => a.key === site.adapter); //TODO: fix after backend type is fixed - $: if (selectedFramework?.adapters?.length <= 1 || !selectedFramework?.adapters?.ssr?.key) { + + $: hasSSR = selectedFramework?.adapters?.some((a) => a?.key === Adapter.Ssr); + $: hasStatic = selectedFramework?.adapters?.some((a) => a?.key === Adapter.Static); + $: if (selectedFramework?.adapters?.length <= 1 || !hasSSR) { adapter = Adapter.Static; } - $: if (selectedFramework?.adapters?.length <= 1 || !selectedFramework?.adapters?.static?.key) { + $: if (selectedFramework?.adapters?.length <= 1 || !hasStatic) { adapter = Adapter.Ssr; } @@ -139,7 +140,7 @@ (framework) => framework.key === frameworkKey ); }} /> - {#if selectedFramework.adapters?.length || (selectedFramework.adapters?.ssr?.key && selectedFramework.adapters?.static?.key)} + {#if selectedFramework.adapters?.length || (hasSSR && hasStatic)} + placeholder={frameworkDataAdapter?.installCommand} />