Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1250 from ItzNotABug/functions-screen-fixes

Browse Source 
Functions Screen Fixes
This commit is contained in:
Darshan
2024-12-18 22:10:54 +05:30
committed by GitHub
parent 23105a05a5 3ee44cb457
commit 79cf60a937
9 changed files with 179 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/code.svelte
+7 -1
View File
@@ -32,6 +32,9 @@
export let noBoxPadding = false;
export let allowScroll = false;
let classes = '';
export { classes as class };
Prism.plugins.customClass.prefix('prism-');
afterUpdate(async () => {
@@ -39,7 +42,10 @@
});
</script>
<section class="box u-overflow-hidden" class:common-section={!noMargin} class:noBoxPadding>
<section
class="box u-overflow-hidden {classes}"
class:common-section={!noMargin}
class:noBoxPadding>
<div
class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
{#if label}
src/lib/components/dropListLink.svelte
+2 -1
View File
@@ -6,6 +6,7 @@
export let disabled = false;
export let external = false;
export let event: string = null;
export let iconStyle: string = '';
function track() {
if (!event) {
@@ -29,7 +30,7 @@
rel={external ? 'noopener noreferrer' : ''}>
<span class="text"><slot /></span>
{#if icon}
<span class={`icon-${icon}`} aria-hidden="true" />
<span class={`icon-${icon}`} style={iconStyle} aria-hidden="true" />
{/if}
</a>
</li>
src/lib/layout/logs.svelte
+55 -11
View File
@@ -156,8 +156,9 @@
<div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
<section class="code-panel">
<header class="code-panel-header u-flex u-main-space-between u-width-full-line">
<div class="u-flex u-gap-24">
<header
class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
<div class="u-flex">
<div class="u-flex u-gap-16">
<h4 class="text u-bold">Method:</h4>
<span class="u-text-color-gray">{execution.requestMethod}</span>
@@ -197,8 +198,9 @@
</div>
</div>
</header>
<div class="code-panel-content grid-1-2" style="u-grid">
<div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
<div class="code-panel-content grid-1-2">
<div
class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
<Heading tag="h3" size="6">Request</Heading>
<div class="u-sep-block-end">
<Tabs>
@@ -281,7 +283,7 @@
</div>
{/if}
<p class="text u-text-center u-padding-24">
<p class="text u-text-center u-padding-16">
{execution.requestHeaders?.length
? 'Not all header data is'
: 'Header data is not'}
@@ -296,7 +298,7 @@
>.
</p>
{:else if selectedRequest === 'body'}
<p class="text u-text-center u-padding-24">
<p class="text u-text-center u-padding-16">
Body data is not captured by Appwrite for your user's security
and privacy. To display body data in the Logs tab, use
<b>context.log()</b>.
@@ -309,7 +311,9 @@
</p>
{/if}
</div>
<div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
<div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
<div
class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
<Heading tag="h3" size="6">Response</Heading>
<div class="u-sep-block-end">
<Tabs>
@@ -348,10 +352,12 @@
</Alert>
{/if}
<Code
allowScroll
withCopy
noMargin
code={unescapeNewLines(execution.logs)}
language="sh" />
language="sh"
class="limited-code-height" />
{:else}
<Card isDashed isTile>
<p class="text u-text-center">No response was recorded.</p>
@@ -360,10 +366,12 @@
{:else if selectedResponse === 'errors'}
{#if execution?.errors}
<Code
allowScroll
withCopy
noMargin
code={unescapeNewLines(execution.errors)}
language="sh" />
language="sh"
class="limited-code-height" />
{:else}
<Card isDashed isTile>
<p class="text u-text-center">No response was recorded.</p>
@@ -389,7 +397,7 @@
</TableBody>
</TableScroll>
{/if}
<p class="text u-text-center u-padding-24">
<p class="text u-text-center u-padding-16">
{execution.responseHeaders?.length
? 'Not all header data is'
: 'Header data is not'}
@@ -404,7 +412,7 @@
>.
</p>
{:else if selectedResponse === 'body'}
<p class="text u-text-center u-padding-24">
<p class="text u-text-center u-padding-16">
Body data is not captured by Appwrite for your user's security
and privacy. To display body data in the Logs tab, use
<b>context.log()</b>.
@@ -423,3 +431,39 @@
</div>
</section>
{/if}
<style>
:global(.limited-code-height) {
overflow: auto;
max-height: 50vh;
}
.code-panel-compact-header .u-flex {
gap: 1.5rem;
}
@media (max-width: 768px) {
.code-panel-compact-header {
row-gap: 1rem;
flex-direction: column;
}
.code-panel-content {
padding: unset;
padding-block: 1.5rem;
}
.mobile-only-inline-20-padding {
padding-inline: 1.5rem;
}
.mobile-only-block-start-20-padding {
padding-block-start: 1.5rem;
}
.code-panel-content.grid-1-2 {
display: unset;
row-gap: unset;
}
}
</style>
src/lib/wizards/functions/components/repositories.svelte
+7 -1
View File
@@ -125,7 +125,7 @@
</p>
{#if selectedInstallation}
{#await loadRepositories(selectedInstallation, search)}
<div class="u-flex u-gap-8 u-cross-center u-main-center">
<div class="u-flex u-gap-8 u-cross-center u-main-center" style:height="50vh">
<div class="loader u-margin-32" />
</div>
{:then response}
@@ -225,3 +225,9 @@
</Button>
</div>
{/if}
<style>
.icon-lock-closed {
color: hsl(var(--color-neutral-50));
}
</style>
src/lib/wizards/functions/cover.svelte
+17 -1
View File
@@ -225,7 +225,7 @@
{/each}
{:then templatesListWithoutStarter}
{#each templatesListWithoutStarter.templates as template}
<li class="clickable-list-item">
<li class="clickable-list-item u-padding-block-8">
<button
type="button"
on:click={() => {
@@ -295,6 +295,22 @@
);
}
.u-sep-block-start {
border-block-start: solid 0.0625rem hsl(var(--color-neutral)) !important;
}
.clickable-list-item:not(:last-child) {
border-block-end: solid 0.0625rem hsl(var(--color-neutral)) !important;
}
:global(.theme-light) {
--color-neutral: var(--color-neutral-10);
}
:global(.theme-dark) {
--color-neutral: var(--color-neutral-85);
}
.inline-tag {
line-height: 140%;
font-weight: 500;
src/lib/wizards/functions/steps/gitConfiguration.svelte
+1 -1
View File
@@ -67,7 +67,7 @@
$choices.branch = event.detail.value;
}}
interactiveOutput
name="branch"
name="branches"
{options} />
<InputText
id="root"
src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
+21 -1
View File
@@ -98,7 +98,7 @@
>.
</Alert>
<div class="editor-border">
<div class="editor-border box">
<SecondaryTabs large class="u-sep-block-end u-padding-8">
{#each ['Unix', 'CMD', 'PowerShell'] as cat}
<SecondaryTabsItem
@@ -118,6 +118,7 @@
withLineNumbers
withCopy
language="sh"
class="cli-commands-code-box-no-outline"
label={codeSnippets[cat].language}
code={codeSnippets[cat].code} />
{/if}
@@ -127,3 +128,22 @@
<Button secondary on:click={() => (show = false)}>Close</Button>
</svelte:fragment>
</Modal>
<style>
.box {
padding: unset;
background-color: unset;
}
.editor-border :global(.cli-commands-code-box-no-outline) {
margin: 1rem 0;
border: unset;
border-radius: unset;
background-color: unset;
padding: 0 var(--box-padding, 1.5rem) 0 var(--box-padding, 1.5rem);
}
:global(.editor-border .cli-commands-code-box-no-outline pre) {
background-color: unset;
}
</style>
src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+45 -11
View File
@@ -25,6 +25,9 @@
let showCancel = false;
let showActivate = false;
let enableScrollButton = false;
let codePanelContent: HTMLElement;
function handleActivate() {
invalidate(Dependencies.DEPLOYMENTS);
}
@@ -36,23 +39,41 @@
);
}
function handleScroll() {
const threshold = codePanelContent.clientHeight * 0.25;
enableScrollButton = codePanelContent.scrollTop > threshold;
}
onMount(() => {
logs = $deployment.buildLogs;
codePanelContent = document.querySelector('.code-panel-content');
codePanelContent.addEventListener('scroll', handleScroll);
if ($deployment.status === 'ready') {
return;
}
return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
if (
message.events.includes(
`functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
)
) {
logs = message.payload['logs'];
if (message.payload.status === 'ready') {
invalidate(Dependencies.DEPLOYMENT);
const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
'console',
(message) => {
if (
message.events.includes(
`functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
)
) {
logs = message.payload['logs'];
if (message.payload.status === 'ready') {
invalidate(Dependencies.DEPLOYMENT);
}
}
}
});
);
return () => {
unsubscribe();
codePanelContent.removeEventListener('scroll', handleScroll);
};
});
</script>
@@ -103,7 +124,8 @@
<span class="icon-external-link" aria-hidden="true" /> Raw data</Button> -->
<Button
secondary
on:click={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
disabled={!enableScrollButton}
on:click={() => codePanelContent?.scrollTo({ top: 0, behavior: 'smooth' })}>
<span class="icon-arrow-sm-up" aria-hidden="true" /> Scroll to top</Button>
</div>
</header>
@@ -135,3 +157,15 @@
<Delete selectedDeployment={$deployment} bind:showDelete />
<Cancel selectedDeployment={$deployment} bind:showCancel />
<Activate selectedDeployment={$deployment} bind:showActivate on:activated={handleActivate} />
<style>
@media (max-width: 768px) {
.code-panel-header {
flex-direction: column;
}
}
.code-panel-content {
max-height: 50vh;
}
</style>
src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
+24 -6
View File
@@ -15,17 +15,35 @@
<span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
</button>
<svelte:fragment slot="list">
<DropListLink href={deployment.providerRepositoryUrl} external icon="github">
{deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
<DropListLink
href={deployment.providerRepositoryUrl}
external
icon="github"
iconStyle="font-size:20px">
<Trim alternativeTrim>
<span style:white-space="pre-wrap">
{deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
</span>
</Trim>
</DropListLink>
<DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
<DropListLink
href={deployment.providerBranchUrl}
external
icon="git-branch"
iconStyle="font-size:20px">
{deployment.providerBranch}
</DropListLink>
{#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
<DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
<DropListLink
href={deployment.providerCommitUrl}
external
icon="git-commit"
iconStyle="font-size:20px">
<Trim alternativeTrim>
{deployment?.providerCommitHash?.substring(0, 7)}
{deployment.providerCommitMessage}
<span style="white-space: pre-wrap">
{deployment?.providerCommitHash?.substring(0, 7)}
{deployment.providerCommitMessage}
</span>
</Trim>
</DropListLink>
{/if}