Merge pull request #1764 from appwrite/chore-fix-backend-breaking-changes

Meldiron · web-flow · commit afdd97ea7693 · 2025-03-24T11:40:59.000+01:00
Chore fix backend breaking changes
diff --git 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
diff --git 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
@@ -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);
+            }
+        });
+    });
 </script>
 
 <Container>
@@ -60,7 +72,7 @@
     </Layout.Stack>
     {#if data.siteList.total}
         {#if data.view === View.Grid}
-            <Grid deployments={data.deployments} siteList={data.siteList} />
+            <Grid siteList={data.siteList} />
         {:else}
             <Table siteList={data.siteList} />
         {/if}
diff --git 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
@@ -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<Models.Variable>[] = [];
     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;
     }
 </script>
 
@@ -86,15 +87,12 @@
                                 id="installCommand"
                                 label="Install command"
                                 bind:value={installCommand}
-                                placeholder={frameworkData?.adapters?.ssr?.installCommand} />
+                                placeholder={ssr?.installCommand} />
                             <Button
                                 secondary
                                 size="s"
-                                disabled={frameworkData?.adapters?.ssr?.installCommand ===
-                                    installCommand}
-                                on:click={() =>
-                                    (installCommand =
-                                        frameworkData?.adapters?.ssr?.installCommand)}>
+                                disabled={ssr?.installCommand === installCommand}
+                                on:click={() => (installCommand = ssr?.installCommand)}>
                                 Reset
                             </Button>
                         </Layout.Stack>
@@ -103,14 +101,12 @@
                                 id="buildCommand"
                                 label="Build command"
                                 bind:value={buildCommand}
-                                placeholder={frameworkData?.adapters?.ssr?.buildCommand} />
+                                placeholder={ssr?.buildCommand} />
                             <Button
                                 secondary
                                 size="s"
-                                disabled={frameworkData?.adapters?.ssr?.buildCommand ===
-                                    buildCommand}
-                                on:click={() =>
-                                    (buildCommand = frameworkData?.adapters?.ssr?.buildCommand)}>
+                                disabled={ssr?.buildCommand === buildCommand}
+                                on:click={() => (buildCommand = ssr?.buildCommand)}>
                                 Reset
                             </Button>
                         </Layout.Stack>
@@ -119,15 +115,12 @@
                                 id="outputDirectory"
                                 label="Output directory"
                                 bind:value={outputDirectory}
-                                placeholder={frameworkData?.adapters?.ssr?.outputDirectory} />
+                                placeholder={ssr?.outputDirectory} />
                             <Button
                                 secondary
                                 size="s"
-                                disabled={frameworkData?.adapters?.ssr?.outputDirectory ===
-                                    outputDirectory}
-                                on:click={() =>
-                                    (outputDirectory =
-                                        frameworkData?.adapters?.ssr?.outputDirectory)}>
+                                disabled={ssr?.outputDirectory === outputDirectory}
+                                on:click={() => (outputDirectory = ssr?.outputDirectory)}>
                                 Reset
                             </Button>
                         </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/grid.svelte b/src/routes/(console)/project-[project]/sites/grid.svelte
@@ -3,33 +3,32 @@
     import { page } from '$app/stores';
     import { timeFromNow } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
-    import { Card, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Card, Icon, Layout, Popover, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { getFrameworkIcon } from './store';
     import { SvgIcon } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
     import SitesActionMenu from './sitesActionMenu.svelte';
     import { capitalize } from '$lib/helpers/string';
+    import { timer } from '$lib/helpers/timeConversion';
+    import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
 
     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 +37,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)}`;
+        }
+    }
 </script>
 
 <Layout.Grid columns={3} columnsXS={1} columnsXXS={1}>
@@ -47,7 +54,7 @@
             padding="xxs">
             <Card.Media
                 title={site.name}
-                description={`Updated ${timeFromNow(site.$updatedAt)}`}
+                description={generateDesc(site)}
                 src={getScreenshot($app.themeInUse, site)}
                 alt={site.name}
                 avatar>
@@ -60,6 +67,31 @@
                     </Tooltip>
                 </svelte:fragment>
                 <SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
+
+                <svelte:fragment slot="description-end">
+                    {#if site.latestDeploymentStatus === 'failed'}
+                        <Popover let:toggle portal>
+                            <button on:mouseenter={(e) => toggle(e)}>
+                                <Layout.Stack alignItems="center">
+                                    <Icon
+                                        icon={IconExclamation}
+                                        size="s"
+                                        color="--bgcolor-warning" />
+                                </Layout.Stack>
+                            </button>
+                            <svelte:fragment slot="tooltip">
+                                <Typography.Text variant="m-400">
+                                    Last deployment failed {timeFromNow(
+                                        site.latestDeploymentCreatedAt
+                                    )}. <Link
+                                        href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                        View logs
+                                    </Link>
+                                </Typography.Text>
+                            </svelte:fragment>
+                        </Popover>
+                    {/if}
+                </svelte:fragment>
             </Card.Media>
         </Card.Link>
     {/each}
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
@@ -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
@@ -19,7 +19,7 @@ export const columns = writable<Column[]>([
         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<Column[]>([
         ],
         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<Column[]>([
         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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -25,8 +25,8 @@`
`25`	`25`	`}`
`26`	`26`	`if (message.events.includes('sites..deployments..update')) {`
`27`	`27`	`invalidate(Dependencies.DEPLOYMENTS);`
`28`		`- invalidate(Dependencies.FUNCTION);`
`29`		`-`
	`28`	`+ invalidate(Dependencies.SITE);`
	`29`	`+ console.log(message);`
`30`	`30`	`return;`
`31`	`31`	`}`
`32`	`32`	`if (message.events.includes('sites..deployments..delete')) {`