Cherrypick Runtime Controls

Feat implement runtime controls

package-lock.json

@@ -6,7 +6,7 @@
         "": {
             "name": "@appwrite/console",
             "dependencies": {
-                "@appwrite.io/console": "^0.6.2",
+                "@appwrite.io/console": "^0.6.4",
                 "@appwrite.io/pink": "0.25.0",
                 "@appwrite.io/pink-icons": "0.25.0",
                 "@popperjs/core": "^2.11.8",
@@ -149,9 +149,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "0.6.2",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.6.2.tgz",
-            "integrity": "sha512-3qYknuFwhvTN2GnPB8G1w5DgxfVorGtfj4uuEaXbTmMUmjA8fHaW5VkJriuUxCi6/TpxDxqV/hhEkdoXL+5H4w=="
+            "version": "0.6.4",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.6.4.tgz",
+            "integrity": "sha512-0LPeeHR3fLQpTiX/AjguXqHYRgjMLf2lxie5TevBPxMssi1tcipctTGmj0YMyjWxQKD05NBmgvkJwAXEsm9rRA==",
+            "license": "BSD-3-Clause"
         },
         "node_modules/@appwrite.io/pink": {
             "version": "0.25.0",

package.json

@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "^0.6.2",
+        "@appwrite.io/console": "^0.6.4",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@popperjs/core": "^2.11.8",

src/lib/elements/forms/inputSelect.svelte

@@ -15,6 +15,7 @@
     export let options: {
         value: string | boolean | number | null;
         label: string;
+        disabled?: boolean;
     }[];
     export let isMultiple = false;
     export let fullWidth = false;
@@ -70,7 +71,10 @@
                 <option value={null} disabled selected hidden>{placeholder}</option>
             {/if}
             {#each options as option}
-                <option value={option.value} selected={option.value === value}>
+                <option
+                    value={option.value}
+                    selected={option.value === value}
+                    disabled={option.disabled}>
                     {option.label}
                 </option>
             {/each}

src/routes/console/project-[project]/functions/+layout.ts

@@ -8,15 +8,17 @@ import type { LayoutLoad } from './$types';
 export const load: LayoutLoad = async ({ depends }) => {
     depends(Dependencies.FUNCTION_INSTALLATIONS);
 
-    const [runtimesList, installations] = await Promise.all([
+    const [runtimesList, installations, specifications] = await Promise.all([
         sdk.forProject.functions.listRuntimes(),
-        sdk.forProject.vcs.listInstallations([Query.limit(100)])
+        sdk.forProject.vcs.listInstallations([Query.limit(100)]),
+        sdk.forProject.functions.getSpecifications()
     ]);
 
     return {
         header: Header,
         breadcrumbs: Breadcrumbs,
         runtimesList,
-        installations
+        installations,
+        specifications
     };
 };

src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte

@@ -10,23 +10,35 @@
     import { onMount } from 'svelte';
     import { func } from '../store';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import { runtimesList } from '../../store';
+    import { runtimesList, specifications } from '../../store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
 
     const functionId = $page.params.function;
     let runtime: string = null;
+    let specification: string = null;
 
     let options = [];
+    let specificationOptions = [];
 
     onMount(async () => {
         runtime ??= $func.runtime;
+        specification ??= $func.specification;
 
         let runtimes = await $runtimesList;
+        let allowedSpecifications = await $specifications;
         options = runtimes.runtimes.map((runtime) => ({
             label: `${runtime.name} - ${runtime.version}`,
             value: runtime.$id
         }));
+
+        specificationOptions = allowedSpecifications.map((size) => ({
+            label:
+                `${size.cpus} CPU, ${size.memory} MB RAM` +
+                (!size.enabled ? ` (Upgrade to use this)` : ''),
+            value: size.slug,
+            disabled: !size.enabled
+        }));
     });
 
     async function updateRuntime() {
@@ -50,11 +62,12 @@
                 $func.providerRepositoryId || undefined,
                 $func.providerBranch || undefined,
                 $func.providerSilentMode || undefined,
-                $func.providerRootDirectory || undefined
+                $func.providerRootDirectory || undefined,
+                specification
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
-                message: 'Runtime has been updated',
+                message: 'Runtime settings have been updated',
                 type: 'success'
             });
             trackEvent(Submit.FunctionUpdateName);
@@ -66,6 +79,8 @@
             trackError(error, Submit.FunctionUpdateName);
         }
     }
+
+    $: isUpdateButtonEnabled = runtime !== $func?.runtime || specification !== $func?.specification;
 </script>
 
 <Form onSubmit={updateRuntime}>
@@ -82,11 +97,19 @@
                     {options}
                     required
                     hideRequired />
+                <InputSelect
+                    label="Specification"
+                    id="size"
+                    placeholder="Select runtime specification"
+                    bind:value={specification}
+                    options={specificationOptions}
+                    required
+                    hideRequired />
             </FormList>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={runtime === $func.runtime} submit>Update</Button>
+            <Button disabled={!isUpdateButtonEnabled} submit>Update</Button>
         </svelte:fragment>
     </CardGrid>
 </Form>

src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte

@@ -9,6 +9,8 @@
     export let data: PageData;
     $: total = data.executionsTotal;
     $: count = data.executions;
+    $: gbHoursTotal = data.executionsMbSecondsTotal / 1000 / 3600;
+    $: mbSecondsCount = data.executionsMbSeconds;
 </script>
 
 <Container>
@@ -46,4 +48,24 @@
                 ]} />
         </Card>
     {/if}
+
+    {#if mbSecondsCount}
+        <Card>
+            <Heading tag="h6" size="6">{formatNumberWithCommas(gbHoursTotal)}</Heading>
+            <p>GB Hours</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of gbHours over time',
+                        data: [
+                            ...mbSecondsCount.map((e) => [
+                                e.date,
+                                Math.ceil((e.value / 1000 / 3600) * 1000) / 1000
+                            ])
+                        ]
+                    }
+                ]} />
+        </Card>
+    {/if}
 </Container>

src/routes/console/project-[project]/functions/store.ts

@@ -7,6 +7,11 @@ export const runtimesList = derived(
     async ($page) => (await $page.data.runtimesList) as Models.RuntimeList
 );
 
+export const specifications = derived(
+    page,
+    async ($page) => (await $page.data.specifications.specifications) as Models.Specification[]
+);
+
 export const baseRuntimesList = derived(runtimesList, async ($runtimesList) => {
     const baseRuntimes = new Map<string, Models.Runtime>();
     for (const runtime of (await $runtimesList).runtimes) {