mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Improve function settings page load speed
This commit is contained in:
Matej Bačo
+1
-1
@@ -42,7 +42,7 @@
|
||||
<ExecuteFunction />
|
||||
<UpdateName />
|
||||
<UpdateRuntime />
|
||||
<UpdateConfiguration repository={data.repository} installations={data.installations} />
|
||||
<UpdateConfiguration installations={data.installations} />
|
||||
<UpdateLogging />
|
||||
<UpdatePermissions />
|
||||
<UpdateEvents />
|
||||
|
||||
+3
-16
@@ -2,22 +2,10 @@ import { sdk } from '$lib/stores/sdk';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load: PageLoad = async ({ params, depends, parent }) => {
|
||||
export const load: PageLoad = async ({ params, depends }) => {
|
||||
depends(Dependencies.VARIABLES);
|
||||
|
||||
const data = await parent();
|
||||
|
||||
const [repository, globalVariables, variables] = await Promise.all([
|
||||
(async () => {
|
||||
if (data.function.installationId && data.function.providerRepositoryId) {
|
||||
return await sdk.forProject.vcs.getRepository(
|
||||
data.function.installationId,
|
||||
data.function.providerRepositoryId
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})(),
|
||||
const [globalVariables, variables] = await Promise.all([
|
||||
sdk.forProject.projectApi.listVariables(),
|
||||
sdk.forProject.functions.listVariables(params.function)
|
||||
]);
|
||||
@@ -42,7 +30,6 @@ export const load: PageLoad = async ({ params, depends, parent }) => {
|
||||
|
||||
return {
|
||||
variables,
|
||||
globalVariables,
|
||||
repository
|
||||
globalVariables
|
||||
};
|
||||
};
|
||||
|
||||
+110
-74
@@ -27,7 +27,6 @@
|
||||
import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
|
||||
|
||||
export let installations: Models.InstallationList;
|
||||
export let repository: Models.ProviderRepository | null;
|
||||
const functionId = $page.params.function;
|
||||
|
||||
let entrypoint: string;
|
||||
@@ -39,6 +38,8 @@
|
||||
let selectedDir: string;
|
||||
let showDisconnect = false;
|
||||
|
||||
let repository: Models.ProviderRepository | null | false = false;
|
||||
|
||||
onMount(() => {
|
||||
entrypoint = $func?.entrypoint;
|
||||
commands = $func?.commands;
|
||||
@@ -49,8 +50,27 @@
|
||||
if ($page.url.searchParams.has('github-installed')) {
|
||||
wizard.start(ConnectExisting);
|
||||
}
|
||||
|
||||
loadRepository();
|
||||
});
|
||||
|
||||
async function loadRepository() {
|
||||
try {
|
||||
if ($func.installationId && $func.providerRepositoryId) {
|
||||
repository = await sdk.forProject.vcs.getRepository(
|
||||
$func.installationId,
|
||||
$func.providerRepositoryId
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
} finally {
|
||||
if (repository === false) {
|
||||
repository = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum ProviderNames {
|
||||
github = 'GitHub',
|
||||
gitlab = 'GitLab',
|
||||
@@ -153,83 +173,99 @@
|
||||
bind:value={entrypoint} />
|
||||
</FormList>
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="u-margin-inline-end-16">Git settings</span>
|
||||
{#if !repository}
|
||||
<Pill>NOT CONNECTED</Pill>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
{#if repository}
|
||||
<div class="box" style:--box-border-radius="var(--border-radius-small)">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="avatar is-size-x-small">
|
||||
<span class={getProviderIcon(repository.provider)} />
|
||||
</div>
|
||||
<div class="u-cross-child-center u-line-height-1-5">
|
||||
<h6 class="u-bold u-trim-1">{repository.name}</h6>
|
||||
<p>Last updated: {toLocaleDateTime(repository.pushedAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-margin-block-start-24">
|
||||
<FormList>
|
||||
<InputSelectSearch
|
||||
required={true}
|
||||
id="branch"
|
||||
label="Branch"
|
||||
placeholder="main"
|
||||
bind:value={selectedBranch}
|
||||
bind:search={selectedBranch}
|
||||
on:select={(event) => {
|
||||
selectedBranch = event.detail.value;
|
||||
}}
|
||||
name="branch"
|
||||
options={branchesList?.branches?.map((branch) => {
|
||||
return {
|
||||
value: branch.name,
|
||||
label: branch.name
|
||||
};
|
||||
}) ?? []} />
|
||||
<InputText
|
||||
id="root"
|
||||
label="Root directory"
|
||||
placeholder="functions/my-function"
|
||||
bind:value={selectedDir} />
|
||||
<InputChoice
|
||||
id="silent"
|
||||
label="Silent mode"
|
||||
tooltip="Don't create comments when pushing to this repository"
|
||||
bind:value={silentMode} />
|
||||
</FormList>
|
||||
</div>
|
||||
<div class="u-margin-block-start-24 u-flex u-gap-16 u-main-end">
|
||||
<Button text on:click={() => (showDisconnect = true)}
|
||||
>Disconnect repository</Button>
|
||||
<Button secondary href={getRepositoryLink(repository)} external>
|
||||
View on {ProviderNames[repository.provider] ??
|
||||
'unknown provider'}
|
||||
<span class="icon-external-link" />
|
||||
</Button>
|
||||
{#if repository === false}
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="u-margin-inline-end-16">Git settings</span>
|
||||
</svelte:fragment>
|
||||
<div class="card-git card is-border-dashed is-no-shadow common-section">
|
||||
<div class="u-flex u-gap-8 u-cross-center u-main-center">
|
||||
<div class="loader u-margin-16" />
|
||||
Loading repository...
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<article class="card-git card is-border-dashed is-no-shadow">
|
||||
<div class="u-flex u-cross-center u-flex-vertical u-gap-32">
|
||||
<div class="u-flex u-cross-center u-gap-8">
|
||||
<AvatarGroup
|
||||
icons={['github', 'gitlab', 'bitBucket', 'azure']} />
|
||||
|
||||
<span class="icon-arrow-narrow-right" />
|
||||
|
||||
<div class="avatar"><span class="icon-appwrite" /></div>
|
||||
</CollapsibleItem>
|
||||
{:else}
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="u-margin-inline-end-16">Git settings</span>
|
||||
{#if !repository}
|
||||
<Pill>NOT CONNECTED</Pill>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
{#if repository}
|
||||
<div class="box" style:--box-border-radius="var(--border-radius-small)">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="avatar is-size-x-small">
|
||||
<span class={getProviderIcon(repository.provider)} />
|
||||
</div>
|
||||
<div class="u-cross-child-center u-line-height-1-5">
|
||||
<h6 class="u-bold u-trim-1">{repository.name}</h6>
|
||||
<p>Last updated: {toLocaleDateTime(repository.pushedAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-margin-block-start-24">
|
||||
<FormList>
|
||||
<InputSelectSearch
|
||||
required={true}
|
||||
id="branch"
|
||||
label="Branch"
|
||||
placeholder="main"
|
||||
bind:value={selectedBranch}
|
||||
bind:search={selectedBranch}
|
||||
on:select={(event) => {
|
||||
selectedBranch = event.detail.value;
|
||||
}}
|
||||
name="branch"
|
||||
options={branchesList?.branches?.map((branch) => {
|
||||
return {
|
||||
value: branch.name,
|
||||
label: branch.name
|
||||
};
|
||||
}) ?? []} />
|
||||
<InputText
|
||||
id="root"
|
||||
label="Root directory"
|
||||
placeholder="functions/my-function"
|
||||
bind:value={selectedDir} />
|
||||
<InputChoice
|
||||
id="silent"
|
||||
label="Silent mode"
|
||||
tooltip="Don't create comments when pushing to this repository"
|
||||
bind:value={silentMode} />
|
||||
</FormList>
|
||||
</div>
|
||||
<div class="u-margin-block-start-24 u-flex u-gap-16 u-main-end">
|
||||
<Button text on:click={() => (showDisconnect = true)}
|
||||
>Disconnect repository</Button>
|
||||
<Button secondary href={getRepositoryLink(repository)} external>
|
||||
View on {ProviderNames[repository.provider] ??
|
||||
'unknown provider'}
|
||||
<span class="icon-external-link" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button secondary on:click={() => wizard.start(ConnectExisting)}>
|
||||
<span class="text">Connect Git</span>
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
{/if}
|
||||
</CollapsibleItem>
|
||||
{:else}
|
||||
<article class="card-git card is-border-dashed is-no-shadow">
|
||||
<div class="u-flex u-cross-center u-flex-vertical u-gap-32">
|
||||
<div class="u-flex u-cross-center u-gap-8">
|
||||
<AvatarGroup
|
||||
icons={['github', 'gitlab', 'bitBucket', 'azure']} />
|
||||
|
||||
<span class="icon-arrow-narrow-right" />
|
||||
|
||||
<div class="avatar"><span class="icon-appwrite" /></div>
|
||||
</div>
|
||||
<Button
|
||||
secondary
|
||||
on:click={() => wizard.start(ConnectExisting)}>
|
||||
<span class="text">Connect Git</span>
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
{/if}
|
||||
</CollapsibleItem>
|
||||
{/if}
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Build settings</svelte:fragment>
|
||||
<FormList>
|
||||
|
||||
@@ -37,12 +37,6 @@
|
||||
let showInstallationDropdown: boolean[] = [];
|
||||
let selectedInstallation: Models.Installation;
|
||||
|
||||
enum ProviderNames {
|
||||
github = 'GitHub',
|
||||
gitlab = 'GitLab',
|
||||
bitBucket = 'BitBucket'
|
||||
}
|
||||
|
||||
function getInstallationLink(installation: Models.Installation) {
|
||||
switch (installation.provider) {
|
||||
case 'github':
|
||||
@@ -153,7 +147,7 @@
|
||||
on:click={() => {
|
||||
showInstallationDropdown[i] = false;
|
||||
}}>
|
||||
Configure {ProviderNames[installation.provider]}
|
||||
Configure
|
||||
</DropListLink>
|
||||
<DropListItem
|
||||
icon="x-circle"
|
||||
|
||||
Reference in New Issue
Block a user