mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: add donwload to functions
This commit is contained in:
Arman
+55
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { SubMenu } from '$lib/components/menu';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
|
||||
import { IconDownload } from '@appwrite.io/pink-icons-svelte';
|
||||
import { ActionMenu } from '@appwrite.io/pink-svelte';
|
||||
|
||||
export let deployment: Models.Deployment;
|
||||
export let toggle: () => void;
|
||||
function getOutputDownload(deploymentId: string) {
|
||||
return (
|
||||
sdk.forProject.functions.getDeploymentDownload(
|
||||
$page.params.function,
|
||||
deploymentId.toString(),
|
||||
DeploymentDownloadType.Output
|
||||
) + '&mode=admin'
|
||||
);
|
||||
}
|
||||
function getSourceDownload(deploymentId: string) {
|
||||
return (
|
||||
sdk.forProject.functions.getDeploymentDownload(
|
||||
$page.params.function,
|
||||
deploymentId.toString(),
|
||||
DeploymentDownloadType.Source
|
||||
) + '&mode=admin'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if deployment?.status === 'ready' || deployment?.status === 'failed'}
|
||||
<SubMenu>
|
||||
<ActionMenu.Root noPadding>
|
||||
<ActionMenu.Item.Button trailingIcon={IconDownload}>Download</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
<svelte:fragment slot="menu">
|
||||
<ActionMenu.Root noPadding>
|
||||
<ActionMenu.Item.Anchor
|
||||
on:click={toggle}
|
||||
href={getSourceDownload(deployment.$id)}
|
||||
external>
|
||||
Download source
|
||||
</ActionMenu.Item.Anchor>
|
||||
|
||||
<ActionMenu.Item.Anchor
|
||||
disabled={deployment?.status !== 'ready'}
|
||||
on:click={toggle}
|
||||
href={getOutputDownload(deployment.$id)}
|
||||
external>
|
||||
Download output
|
||||
</ActionMenu.Item.Anchor>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</SubMenu>
|
||||
{/if}
|
||||
@@ -13,15 +13,7 @@
|
||||
import DeploymentCard from './(components)/deploymentCard.svelte';
|
||||
import RedeployModal from './(modals)/redeployModal.svelte';
|
||||
import { canWriteFunctions } from '$lib/stores/roles';
|
||||
import {
|
||||
ActionMenu,
|
||||
Alert,
|
||||
Card,
|
||||
Empty,
|
||||
Icon,
|
||||
Layout,
|
||||
Popover
|
||||
} from '@appwrite.io/pink-svelte';
|
||||
import { ActionMenu, Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
|
||||
import { Click, trackEvent } from '$lib/actions/analytics';
|
||||
import {
|
||||
IconDotsHorizontal,
|
||||
@@ -32,6 +24,8 @@
|
||||
import { app } from '$lib/stores/app';
|
||||
import CreateActionMenu from './(components)/createActionMenu.svelte';
|
||||
import { ParsedTagList, QuickFilters } from '$lib/components/filters';
|
||||
import { Menu } from '$lib/components/menu';
|
||||
import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -82,24 +76,27 @@
|
||||
activeDeployment>
|
||||
<svelte:fragment slot="footer">
|
||||
<Layout.Stack direction="row" gap="s" alignItems="center" inline>
|
||||
<Popover let:toggle placement="bottom-start" padding="none">
|
||||
<Button secondary icon text on:click={toggle}>
|
||||
<Menu>
|
||||
<Button secondary icon text>
|
||||
<Icon icon={IconDotsHorizontal} size="s" />
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<svelte:fragment slot="menu" let:toggle>
|
||||
<ActionMenu.Root>
|
||||
{#if $canWriteFunctions}
|
||||
<ActionMenu.Item.Button
|
||||
trailingIcon={IconRefresh}
|
||||
on:click={(e) => {
|
||||
on:click={() => {
|
||||
selectedDeployment = activeDeployment;
|
||||
showRedeploy = true;
|
||||
trackEvent(Click.FunctionsRedeployClick);
|
||||
toggle(e);
|
||||
toggle();
|
||||
}}>
|
||||
Redeploy
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
<DownloadActionMenuItem
|
||||
deployment={activeDeployment}
|
||||
{toggle} />
|
||||
<ActionMenu.Item.Anchor
|
||||
trailingIcon={IconTerminal}
|
||||
href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${activeDeployment.$id}`}>
|
||||
@@ -107,7 +104,7 @@
|
||||
</ActionMenu.Item.Anchor>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</Menu>
|
||||
<Button
|
||||
secondary
|
||||
href={`${base}/project-${$page.params.project}/functions/function-${$func.$id}/executions/execute-function`}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Id } from '$lib/components';
|
||||
import type { PageData } from './$types';
|
||||
import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
|
||||
import { type Models } from '@appwrite.io/console';
|
||||
import type { Column } from '$lib/helpers/types';
|
||||
import { formatTimeDetailed } from '$lib/helpers/timeConversion';
|
||||
import { timer } from '$lib/actions/timer';
|
||||
@@ -13,13 +13,11 @@
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import Cancel from './(modals)/cancel.svelte';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { base } from '$app/paths';
|
||||
import { ActionMenu, Icon, Layout, Popover, Status, Table } from '@appwrite.io/pink-svelte';
|
||||
import { ActionMenu, Icon, Layout, Status, Table } from '@appwrite.io/pink-svelte';
|
||||
import { Click, trackEvent } from '$lib/actions/analytics';
|
||||
import {
|
||||
IconDotsHorizontal,
|
||||
IconDownload,
|
||||
IconLightningBolt,
|
||||
IconRefresh,
|
||||
IconTrash,
|
||||
@@ -30,11 +28,12 @@
|
||||
import Delete from './(modals)/deleteModal.svelte';
|
||||
import { capitalize } from '$lib/helpers/string';
|
||||
import { deploymentStatusConverter } from '$lib/stores/git';
|
||||
import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
|
||||
import { Menu } from '$lib/components/menu';
|
||||
|
||||
export let columns: Column[];
|
||||
export let data: PageData;
|
||||
|
||||
let showDropdown = [];
|
||||
let showDelete = false;
|
||||
let showActivate = false;
|
||||
let showRedeploy = false;
|
||||
@@ -45,15 +44,6 @@
|
||||
function handleActivate() {
|
||||
invalidate(Dependencies.DEPLOYMENTS);
|
||||
}
|
||||
|
||||
//TODO: implement output download
|
||||
function getDownload(deploymentId: string) {
|
||||
return (
|
||||
sdk.forProject.functions.getDeploymentDownload($func.$id, deploymentId).toString() +
|
||||
'&mode=admin',
|
||||
DeploymentDownloadType.Source
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Table.Root>
|
||||
@@ -67,7 +57,7 @@
|
||||
{/each}
|
||||
<Table.Header.Cell width="40" />
|
||||
</svelte:fragment>
|
||||
{#each data.deploymentList.deployments as deployment, index (deployment.$id)}
|
||||
{#each data.deploymentList.deployments as deployment (deployment.$id)}
|
||||
<Table.Link
|
||||
href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
|
||||
{#each columns as column}
|
||||
@@ -126,18 +116,19 @@
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
inline>
|
||||
<Popover let:toggle placement="bottom-start" padding="none">
|
||||
<Button text icon ariaLabel="more options" on:click={toggle}>
|
||||
<Icon icon={IconDotsHorizontal} size="s" />
|
||||
<Menu>
|
||||
<Button text icon size="s">
|
||||
<Icon size="s" icon={IconDotsHorizontal} />
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
|
||||
<svelte:fragment slot="menu" let:toggle>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
trailingIcon={IconRefresh}
|
||||
on:click={(e) => {
|
||||
on:click={() => {
|
||||
selectedDeployment = deployment;
|
||||
showRedeploy = true;
|
||||
toggle(e);
|
||||
toggle();
|
||||
trackEvent(Click.FunctionsRedeployClick);
|
||||
}}>
|
||||
Redeploy
|
||||
@@ -145,27 +136,23 @@
|
||||
{#if deployment.status === 'ready' && deployment.$id !== $func.deploymentId}
|
||||
<ActionMenu.Item.Button
|
||||
trailingIcon={IconLightningBolt}
|
||||
on:click={(e) => {
|
||||
on:click={() => {
|
||||
selectedDeployment = deployment;
|
||||
showActivate = true;
|
||||
toggle(e);
|
||||
toggle();
|
||||
}}>
|
||||
Activate
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
|
||||
<ActionMenu.Item.Anchor
|
||||
trailingIcon={IconDownload}
|
||||
href={getDownload(deployment.$id)}
|
||||
on:click={() => (showDropdown[index] = false)}>
|
||||
Download
|
||||
</ActionMenu.Item.Anchor>
|
||||
<DownloadActionMenuItem {deployment} {toggle} />
|
||||
|
||||
{#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
trailingIcon={IconXCircle}
|
||||
on:click={(e) => {
|
||||
on:click={() => {
|
||||
selectedDeployment = deployment;
|
||||
toggle(e);
|
||||
toggle();
|
||||
|
||||
showCancel = true;
|
||||
trackEvent(Click.FunctionsDeploymentCancelClick);
|
||||
@@ -177,9 +164,9 @@
|
||||
<ActionMenu.Item.Button
|
||||
trailingIcon={IconTrash}
|
||||
status="danger"
|
||||
on:click={(e) => {
|
||||
on:click={() => {
|
||||
selectedDeployment = deployment;
|
||||
toggle(e);
|
||||
toggle();
|
||||
|
||||
showDelete = true;
|
||||
trackEvent(Click.FunctionsDeploymentDeleteClick);
|
||||
@@ -189,7 +176,7 @@
|
||||
{/if}
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</Menu>
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
</Table.Link>
|
||||
|
||||
Reference in New Issue
Block a user