mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge branch 'feat-pink-v2' of https://github.com/appwrite/console into feat-pink-v2
This commit is contained in:
Torsten Dittmann
+2
-2
@@ -21,9 +21,9 @@
|
||||
"dependencies": {
|
||||
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153",
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7",
|
||||
"@appwrite.io/pink-legacy": "^1.0.1",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+14
-14
@@ -15,14 +15,14 @@ importers:
|
||||
specifier: 0.25.0
|
||||
version: 0.25.0
|
||||
'@appwrite.io/pink-icons-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)
|
||||
'@appwrite.io/pink-legacy':
|
||||
specifier: ^1.0.1
|
||||
version: 1.0.1
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -215,14 +215,14 @@ packages:
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153}
|
||||
version: 1.2.1
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac598ef40fccedd1cf50366527036e64827c':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac598ef40fccedd1cf50366527036e64827c}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -236,8 +236,8 @@ packages:
|
||||
'@appwrite.io/pink-legacy@1.0.1':
|
||||
resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4099,11 +4099,11 @@ snapshots:
|
||||
|
||||
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153': {}
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac59(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac598ef40fccedd1cf50366527036e64827c(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
@@ -4116,9 +4116,9 @@ snapshots:
|
||||
'@appwrite.io/pink-icons': 1.0.0
|
||||
the-new-css-reset: 1.11.3
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3ff9ac59(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3ff9ac598ef40fccedd1cf50366527036e64827c(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)
|
||||
'@floating-ui/dom': 1.6.13
|
||||
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
|
||||
'@melt-ui/svelte': 0.86.3(svelte@4.2.19)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { beforeNavigate } from '$app/navigation';
|
||||
import { Drop, Modal } from '$lib/components';
|
||||
import { Modal } from '$lib/components';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import type { Column } from '$lib/helpers/types';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import { SvgIcon } from '$lib/components';
|
||||
</script>
|
||||
|
||||
<SvgIcon name="angular" type="color" iconSize="" />
|
||||
@@ -21,7 +21,8 @@
|
||||
IconReact,
|
||||
IconNuxt,
|
||||
IconInfo,
|
||||
IconExternalLink
|
||||
IconExternalLink,
|
||||
IconAngular
|
||||
} from '@appwrite.io/pink-icons-svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { type ComponentType, onMount } from 'svelte';
|
||||
@@ -38,6 +39,7 @@
|
||||
import NextjsFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte';
|
||||
import VueFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/VueFrameworkIcon.svelte';
|
||||
import NoFrameworkIcon from './components/NoFrameworkIcon.svelte';
|
||||
import AngularFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte';
|
||||
|
||||
export let key;
|
||||
|
||||
@@ -97,6 +99,13 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
|
||||
icon: VueFrameworkIcon,
|
||||
smallIcon: IconVue,
|
||||
portNumber: 5173
|
||||
},
|
||||
{
|
||||
key: 'angular',
|
||||
label: 'Angular',
|
||||
icon: AngularFrameworkIcon,
|
||||
smallIcon: IconAngular,
|
||||
portNumber: 4200
|
||||
}
|
||||
];
|
||||
|
||||
@@ -225,10 +234,18 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
|
||||
code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for--${selectedFramework.key}`} />
|
||||
</div>
|
||||
|
||||
<Typography.Text variant="m-500"
|
||||
>2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
|
||||
size="s"
|
||||
code=".env" /> and update the values.</Typography.Text>
|
||||
{#if selectedFramework.key === 'angular'}
|
||||
<Typography.Text variant="m-500"
|
||||
>2. Change <InlineCode
|
||||
size="s"
|
||||
code="src/environments/environment.ts" />
|
||||
to reflect the values below:</Typography.Text>
|
||||
{:else}
|
||||
<Typography.Text variant="m-500"
|
||||
>2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
|
||||
size="s"
|
||||
code=".env" /> and update the values.</Typography.Text>
|
||||
{/if}
|
||||
|
||||
<!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
|
||||
<div class="pink2-code-margin-fix">
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
let selectedRepository = '';
|
||||
let installations = { installations: [], total: 0 };
|
||||
let hasInstallations = !!installations?.total;
|
||||
let error = '';
|
||||
|
||||
onMount(async () => {
|
||||
installations = await sdk.forProject.vcs.listInstallations();
|
||||
@@ -54,18 +55,17 @@
|
||||
repository.set(repo);
|
||||
selectedRepository = repo.id;
|
||||
}
|
||||
console.log(Object.keys(Framework));
|
||||
|
||||
const s = await sdk.forProject.sites.update(
|
||||
site.$id,
|
||||
site.name,
|
||||
Framework[site.framework],
|
||||
site.framework as Framework,
|
||||
site.enabled,
|
||||
site.timeout,
|
||||
site.installCommand,
|
||||
site.buildCommand,
|
||||
site.outputDirectory,
|
||||
BuildRuntime[site.buildRuntime],
|
||||
site.buildRuntime as BuildRuntime,
|
||||
site.adapter,
|
||||
site.fallbackFile,
|
||||
selectedInstallationId,
|
||||
@@ -79,20 +79,20 @@
|
||||
type: 'success',
|
||||
message: 'Repository connected successfully'
|
||||
});
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
$: console.log(selectedInstallationId);
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
title="Connect repository"
|
||||
bind:show
|
||||
hideFooter={!repositoryBehaviour}
|
||||
onSubmit={connectRepo}>
|
||||
onSubmit={connectRepo}
|
||||
bind:error>
|
||||
<span slot="description"> Connect to a new repository or an existing one. </span>
|
||||
{#if hasInstallations}
|
||||
<Layout.Stack gap="xl">
|
||||
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import {
|
||||
IconDotsHorizontal,
|
||||
IconDownload,
|
||||
IconLightningBolt,
|
||||
IconRefresh,
|
||||
IconTerminal,
|
||||
IconTrash,
|
||||
IconXCircle
|
||||
} from '@appwrite.io/pink-icons-svelte';
|
||||
import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
|
||||
|
||||
export let selectedDeployment: Models.Deployment;
|
||||
export let deployment: Models.Deployment;
|
||||
export let showDelete = false;
|
||||
export let showActivate = false;
|
||||
export let showRedeploy = false;
|
||||
export let showCancel = false;
|
||||
export let activeDeployment: string;
|
||||
|
||||
function getDownload(deploymentId: string) {
|
||||
return (
|
||||
sdk.forProject.sites.getDeploymentDownload($page.params.site, deploymentId).toString() +
|
||||
'&mode=admin'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Popover placement="bottom-end" let:toggle>
|
||||
<Button
|
||||
text
|
||||
icon
|
||||
size="s"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(e);
|
||||
}}>
|
||||
<Icon size="s" icon={IconDotsHorizontal} />
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconRefresh}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showRedeploy = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Redeploy
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Anchor
|
||||
leadingIcon={IconTerminal}
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(e);
|
||||
}}>
|
||||
View details
|
||||
</ActionMenu.Item.Anchor>
|
||||
{#if deployment?.status === 'ready' && deployment?.$id !== activeDeployment}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconLightningBolt}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showActivate = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Activate
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
{#if deployment?.status === 'ready'}
|
||||
<ActionMenu.Item.Anchor
|
||||
href={getDownload(deployment.$id)}
|
||||
external
|
||||
leadingIcon={IconDownload}
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
}}>
|
||||
Download
|
||||
</ActionMenu.Item.Anchor>
|
||||
{/if}
|
||||
|
||||
{#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconXCircle}
|
||||
status="danger"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showCancel = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Cancel
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
{#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
status="danger"
|
||||
leadingIcon={IconTrash}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showDelete = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Delete
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
@@ -41,11 +41,11 @@
|
||||
return deployment.screenshotDark
|
||||
? getFilePreview(deployment.screenshotDark)
|
||||
: `${base}/images/sites/screenshot-placeholder-dark.svg`;
|
||||
} else {
|
||||
return deployment.screenshotLight
|
||||
? getFilePreview(deployment.screenshotLight)
|
||||
: `${base}/images/sites/screenshot-placeholder-light.svg`;
|
||||
}
|
||||
|
||||
return deployment.screenshotLight
|
||||
? getFilePreview(deployment.screenshotLight)
|
||||
: `${base}/images/sites/screenshot-placeholder-light.svg`;
|
||||
}
|
||||
|
||||
function getFilePreview(fileId: string) {
|
||||
|
||||
@@ -99,12 +99,14 @@
|
||||
</PinkButton.Button>
|
||||
</Layout.Stack>
|
||||
{/each}
|
||||
<Button
|
||||
text
|
||||
compact
|
||||
disabled={newVariables.some((pair) => !pair.key)}
|
||||
on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
|
||||
<Icon slot="start" icon={IconPlus} />Add variable</Button>
|
||||
<div>
|
||||
<Button
|
||||
text
|
||||
compact
|
||||
disabled={newVariables.some((pair) => !pair.key)}
|
||||
on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
|
||||
<Icon slot="start" icon={IconPlus} />Add variable</Button>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<Selector.Checkbox
|
||||
size="s"
|
||||
|
||||
@@ -39,10 +39,10 @@
|
||||
<svelte:fragment slot="aside">
|
||||
<!-- TODO: fix use repository name instead of id-->
|
||||
<Aside
|
||||
framework={data.frameworks.frameworks.find((f) => f.name === data.site.framework)}
|
||||
repositoryName={data.repository.name}
|
||||
branch={data.site.providerBranch}
|
||||
rootDir={data.site.providerRootDirectory}
|
||||
framework={data.frameworks.frameworks.find((f) => f.key === data.site.framework)}
|
||||
repositoryName={data?.repository?.name}
|
||||
branch={data.repository?.id ? data.site.providerBranch : ''}
|
||||
rootDir={data.repository?.id ? data.site.providerRootDirectory : ''}
|
||||
domain={data.deployment.domain} />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="footer">
|
||||
|
||||
@@ -15,9 +15,8 @@ export const load: PageLoad = async ({ url }) => {
|
||||
return {
|
||||
site,
|
||||
deployment,
|
||||
repository: await sdk.forProject.vcs.getRepository(
|
||||
site.installationId,
|
||||
site.providerRepositoryId
|
||||
)
|
||||
repository: site?.installationId
|
||||
? await sdk.forProject.vcs.getRepository(site.installationId, site.providerRepositoryId)
|
||||
: undefined
|
||||
};
|
||||
};
|
||||
|
||||
+1
-1
@@ -63,7 +63,7 @@
|
||||
// TODO: fix design
|
||||
</script>
|
||||
|
||||
<Modal title="Add collaborators" {error} bind:show onSubmit={create}>
|
||||
<Modal title="Share site" {error} bind:show onSubmit={create}>
|
||||
<span slot="description">
|
||||
Share your progress and start collaborating by adding members to your organization.
|
||||
</span>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
<div style="margin-block-start: var(--gap-xxl);">
|
||||
<Step.List>
|
||||
<Step.Item state="current" shortLine={true}>
|
||||
<Layout.Stack direction="row" gap="l">
|
||||
<Layout.Stack direction="row" gap="l" wrap="wrap">
|
||||
{#if !data.site.installationId && !data.site.providerRepositoryId}
|
||||
<Card
|
||||
isTile
|
||||
@@ -71,7 +71,7 @@
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s">
|
||||
Connect to repository
|
||||
Add repository
|
||||
</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
@@ -101,7 +101,7 @@
|
||||
color="--color-fgcolor-neutral-weak" />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Connect to an existing domain or purchase a new one.
|
||||
Connect to an existing domain or add a new one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
@@ -111,13 +111,12 @@
|
||||
isButton
|
||||
padding="s"
|
||||
on:click={() => (showInviteCollaborator = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack gap="s" justifyContent="flex-start">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s"
|
||||
>Add collaborators</Typography.Title>
|
||||
<Typography.Title size="s">Share site</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
size="l"
|
||||
|
||||
+1
-2
@@ -356,8 +356,7 @@
|
||||
? `${base}/images/sites/screenshot-placeholder-dark.svg`
|
||||
: `${base}/images/sites/screenshot-placeholder-light.svg`)}
|
||||
alt={data.template.name}
|
||||
width={357}
|
||||
height={200} />
|
||||
ratio="16/9" />
|
||||
</Layout.Stack>
|
||||
</Aside>
|
||||
</svelte:fragment>
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
<Image
|
||||
alt="repositories"
|
||||
radius="xxs"
|
||||
ratio="16/9"
|
||||
src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
|
||||
<Layout.Stack gap="s">
|
||||
<Typography.Text variant="m-600">Clone a template</Typography.Text>
|
||||
@@ -42,6 +43,7 @@
|
||||
<Image
|
||||
alt="repositories"
|
||||
radius="xxs"
|
||||
ratio="16/9"
|
||||
src={$app?.themeInUse === 'dark' ? RepoDark : RepoLight} />
|
||||
|
||||
<Layout.Stack gap="s">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import DeploymentsOverview from './deploymentsOverview.svelte';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { protocol } from '$routes/(console)/store';
|
||||
import InstantRollbackDomain from './instantRollbackDomain.svelte';
|
||||
import InstantRollbackDomain from './instantRollbackModal.svelte';
|
||||
import { app } from '$lib/stores/app';
|
||||
import EmptyDeploymentDark from './empty-deployment-dark.svg';
|
||||
import EmptyDeploymentLight from './empty-deployment-light.svg';
|
||||
@@ -43,8 +43,9 @@
|
||||
<svelte:fragment slot="footer">
|
||||
<Button external href={`${$protocol}${data.deployment.domain}`}>Visit</Button>
|
||||
<!-- TODO: disable when disabled={data.hasProdReadyDeployments} -->
|
||||
<Button secondary on:click={() => (showRollback = true)}
|
||||
>Instant rollback</Button>
|
||||
<Button secondary on:click={() => (showRollback = true)}>
|
||||
Instant rollback
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</SiteCard>
|
||||
{:else if data.deployment?.status === 'building'}
|
||||
@@ -61,11 +62,11 @@
|
||||
{:else}
|
||||
<Card.Base padding="none">
|
||||
<Empty
|
||||
title="No deployments found"
|
||||
title="There is no active deployment"
|
||||
src={$app.themeInUse === 'dark' ? EmptyDeploymentDark : EmptyDeploymentLight}>
|
||||
<span slot="description">
|
||||
You haven't deployed any sites yet. Get started by deploying your first
|
||||
site.
|
||||
Deploy your site to get started. Once deployed, you'll see your latest build
|
||||
details here.
|
||||
</span>
|
||||
</Empty>
|
||||
</Card.Base>
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
import { Filters } from '$lib/components/filters';
|
||||
import { queries, tags } from '$lib/components/filters/store';
|
||||
import { View } from '$lib/helpers/load';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { ActionMenu, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
|
||||
import { ActionMenu, Icon, Layout, Popover, Tag } from '@appwrite.io/pink-svelte';
|
||||
import Table from './table.svelte';
|
||||
import QuickFilters from './quickFilters.svelte';
|
||||
import RedeployModal from '../../redeployModal.svelte';
|
||||
@@ -21,6 +20,7 @@
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import CreateCliModal from './createCliModal.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -55,92 +55,47 @@
|
||||
{/if}
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack justifyContent="space-between" direction="row">
|
||||
<Layout.Stack alignItems="center" direction="row">
|
||||
{#if data.deploymentList.total}
|
||||
<QuickFilters {columns} />
|
||||
<Filters
|
||||
query={data.query}
|
||||
{columns}
|
||||
let:disabled
|
||||
let:toggle
|
||||
singleCondition>
|
||||
<Layout.Stack alignItems="center" direction="row" gap="xs">
|
||||
<Button
|
||||
compact
|
||||
on:click={toggle}
|
||||
{disabled}
|
||||
size="s"
|
||||
ariaLabel="open filter">
|
||||
<Icon icon={IconFilterLine} size="s" slot="start" />
|
||||
More filters
|
||||
</Button>
|
||||
{#if $tags?.length}
|
||||
<!-- TODO: add vertical divider to pink 2 -->
|
||||
<div
|
||||
style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
|
||||
</div>
|
||||
<Button text on:click={clearAll} size="s">Clear all</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Filters>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
<Layout.Stack direction="row" inline>
|
||||
{#if data.deploymentList.total}
|
||||
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
|
||||
{/if}
|
||||
<Popover let:toggle>
|
||||
<Button size="s" on:click={toggle}>
|
||||
<Icon size="s" icon={IconPlus} />
|
||||
Create deployment
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root noPadding>
|
||||
<ActionMenu.Item.Button
|
||||
badge="Recommended"
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
if (!hasInstallation) {
|
||||
showConnectRepo = true;
|
||||
} else {
|
||||
showCreateDeployment = true;
|
||||
}
|
||||
}}>
|
||||
Git
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
showConnectCLI = true;
|
||||
}}>
|
||||
CLI
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
showConnectManual = true;
|
||||
}}>
|
||||
Manual
|
||||
</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
{#if data.deploymentList.total}
|
||||
<div class="is-only-mobile">
|
||||
<Layout.Stack justifyContent="space-between" direction="row">
|
||||
<Button
|
||||
text
|
||||
size="s"
|
||||
on:click={() => (showMobileFilters = !showMobileFilters)}
|
||||
ariaLabel="toggle filters">
|
||||
<span class="icon-filter-line" />
|
||||
<span class="text">Filters</span>
|
||||
</Button>
|
||||
|
||||
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
|
||||
<div class="is-not-mobile">
|
||||
<Layout.Stack alignItems="center" direction="row">
|
||||
{#if data.deploymentList.total}
|
||||
<QuickFilters {columns} />
|
||||
<Filters
|
||||
query={data.query}
|
||||
{columns}
|
||||
let:disabled
|
||||
let:toggle
|
||||
singleCondition>
|
||||
<Layout.Stack alignItems="center" direction="row" gap="xs">
|
||||
<Button
|
||||
compact
|
||||
on:click={toggle}
|
||||
{disabled}
|
||||
size="s"
|
||||
ariaLabel="open filter">
|
||||
<Icon icon={IconFilterLine} size="s" slot="start" />
|
||||
More filters
|
||||
</Button>
|
||||
{#if $tags?.length}
|
||||
<!-- TODO: add vertical divider to pink 2 -->
|
||||
<div
|
||||
style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
|
||||
</div>
|
||||
<Button text on:click={clearAll} size="s">Clear all</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Filters>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
<div class="is-only-mobile">
|
||||
<Button
|
||||
secondary
|
||||
size="s"
|
||||
on:click={() => (showMobileFilters = !showMobileFilters)}
|
||||
ariaLabel="toggle filters">
|
||||
<span class="icon-filter-line" />
|
||||
<span class="text">Filters</span>
|
||||
</Button>
|
||||
<div
|
||||
class:u-hide={!showMobileFilters}
|
||||
class:u-flex={showMobileFilters}
|
||||
@@ -149,20 +104,59 @@
|
||||
|
||||
<Filters query={data.query} {columns} clearOnClick>
|
||||
<svelte:fragment slot="mobile" let:disabled let:toggle>
|
||||
<Pill
|
||||
button
|
||||
on:click={toggle}
|
||||
{disabled}
|
||||
class="u-flex u-gap-4 u-cross-center"
|
||||
style="--p-tag-content-height: auto">
|
||||
<Tag on:click={toggle} {disabled}>
|
||||
<span class="text">More filters</span>
|
||||
<span class="icon-cheveron-down" />
|
||||
</Pill>
|
||||
</Tag>
|
||||
</svelte:fragment>
|
||||
</Filters>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<Layout.Stack direction="row" inline>
|
||||
{#if data.deploymentList.total}
|
||||
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
|
||||
{/if}
|
||||
<Popover let:toggle>
|
||||
<Button size="s" on:click={toggle}>
|
||||
<Icon size="s" icon={IconPlus} />
|
||||
Create deployment
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root noPadding>
|
||||
<ActionMenu.Item.Button
|
||||
badge="Recommended"
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
if (!hasInstallation) {
|
||||
showConnectRepo = true;
|
||||
} else {
|
||||
showCreateDeployment = true;
|
||||
}
|
||||
}}>
|
||||
Git
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
showConnectCLI = true;
|
||||
}}>
|
||||
CLI
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button
|
||||
on:click={(e) => {
|
||||
toggle(e);
|
||||
showConnectManual = true;
|
||||
}}>
|
||||
Manual
|
||||
</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
|
||||
{#if data.deploymentList.total}
|
||||
<Table {data} />
|
||||
|
||||
@@ -208,3 +202,6 @@
|
||||
{#if showConnectManual}
|
||||
<CreateManualDeploymentModal bind:show={showConnectManual} site={data.site} />
|
||||
{/if}
|
||||
{#if showConnectCLI}
|
||||
<CreateCliModal bind:show={showConnectCLI} />
|
||||
{/if}
|
||||
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { Modal, Alert } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { Code, Layout, Tabs } from '@appwrite.io/pink-svelte';
|
||||
|
||||
export let show = false;
|
||||
|
||||
let lang = 'js';
|
||||
let codeSnippets = {};
|
||||
let os = 'unknown';
|
||||
let category = 'Unix';
|
||||
|
||||
const siteId = $page.params.site;
|
||||
codeSnippets = setCodeSnippets(lang);
|
||||
|
||||
onMount(() => {
|
||||
// lang = setLanguage($func.runtime);
|
||||
codeSnippets = setCodeSnippets(lang);
|
||||
os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
|
||||
|
||||
if (os.includes('Win')) {
|
||||
category = 'CMD';
|
||||
} else if (os.includes('Mac') || os.includes('Linux')) {
|
||||
category = 'Unix';
|
||||
} else {
|
||||
category = 'Unix';
|
||||
}
|
||||
});
|
||||
|
||||
function setCodeSnippets(lang: string) {
|
||||
return {
|
||||
Unix: {
|
||||
code: `appwrite functions createDeployment \\
|
||||
--siteId=${siteId} \\
|
||||
--entrypoint='index.${lang}' \\
|
||||
--code="." \\
|
||||
--activate=true`,
|
||||
language: 'bash'
|
||||
},
|
||||
|
||||
CMD: {
|
||||
code: `appwrite functions createDeployment ^
|
||||
--siteId=${siteId} ^
|
||||
--entrypoint='index.${lang}' ^
|
||||
--code="." ^
|
||||
--activate=true`,
|
||||
language: 'CMD'
|
||||
},
|
||||
PowerShell: {
|
||||
code: `appwrite functions createDeployment ,
|
||||
--siteId=${siteId} ,
|
||||
--entrypoint='index.${lang}' ,
|
||||
--code="." ,
|
||||
--activate=true`,
|
||||
language: 'PowerShell'
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal title="Create CLI deployment" bind:show hideFooter>
|
||||
<span slot="description">
|
||||
Deploy your site using the Appwrite CLI by running the following command inside your
|
||||
function's folder.
|
||||
</span>
|
||||
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack gap="s">
|
||||
<Tabs.Root let:root stretch>
|
||||
{#each ['Unix', 'CMD', 'PowerShell'] as cat}
|
||||
<Tabs.Item.Button
|
||||
{root}
|
||||
on:click={() => (category = cat)}
|
||||
active={category === cat}>
|
||||
{cat}
|
||||
</Tabs.Item.Button>
|
||||
{/each}
|
||||
</Tabs.Root>
|
||||
|
||||
{#each ['Unix', 'CMD', 'PowerShell'] as cat}
|
||||
{#if category === cat}
|
||||
<Code hideHeader lang="sh" code={codeSnippets[cat].code} />
|
||||
{/if}
|
||||
{/each}
|
||||
</Layout.Stack>
|
||||
|
||||
<Alert dismissible={false} type="warning">
|
||||
If you did not create your site using the CLI, initialize your function by following our <a
|
||||
href="https://appwrite.io/docs/tooling/command-line/installation"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">documentation</a
|
||||
>.
|
||||
</Alert>
|
||||
</Layout.Stack>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (show = false)}>Close</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
-2
@@ -1,10 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
|
||||
import { Modal } from '$lib/components';
|
||||
import Confirm from '$lib/components/confirm.svelte';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
|
||||
+12
-7
@@ -75,8 +75,6 @@
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
|
||||
$: console.log(metrics);
|
||||
</script>
|
||||
|
||||
<Layout.Stack gap="xl">
|
||||
@@ -99,9 +97,16 @@
|
||||
on:change={fetchUsage} />
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<Layout.Stack gap="m" direction="row">
|
||||
{#each metrics as metric}
|
||||
<UsageCard description={metric.description} bind:value={metric.value} />
|
||||
{/each}
|
||||
</Layout.Stack>
|
||||
<Layout.Grid gap="m" columnsL={2} columns={1}>
|
||||
<Layout.Stack direction="row" gap="m">
|
||||
{#each metrics.slice(0, 3) as metric}
|
||||
<UsageCard description={metric.description} bind:value={metric.value} />
|
||||
{/each}
|
||||
</Layout.Stack>
|
||||
<Layout.Stack direction="row" gap="m">
|
||||
{#each metrics.slice(3) as metric}
|
||||
<UsageCard description={metric.description} bind:value={metric.value} />
|
||||
{/each}
|
||||
</Layout.Stack>
|
||||
</Layout.Grid>
|
||||
</Layout.Stack>
|
||||
|
||||
@@ -12,20 +12,13 @@
|
||||
import RedeployModal from '../../redeployModal.svelte';
|
||||
import Cancel from './cancelDeploymentModal.svelte';
|
||||
import { base } from '$app/paths';
|
||||
import { ActionMenu, Icon, Layout, Popover, Status, Table } from '@appwrite.io/pink-svelte';
|
||||
import {
|
||||
IconDotsHorizontal,
|
||||
IconLightningBolt,
|
||||
IconRefresh,
|
||||
IconTerminal,
|
||||
IconTrash,
|
||||
IconXCircle
|
||||
} from '@appwrite.io/pink-icons-svelte';
|
||||
import { Layout, Status, Table } from '@appwrite.io/pink-svelte';
|
||||
|
||||
import { columns } from './store';
|
||||
import ActivateDeploymentModal from '../../activateDeploymentModal.svelte';
|
||||
import { deploymentStatusConverter } from '../store';
|
||||
import { capitalize } from '$lib/helpers/string';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import DeploymentActionMenu from '../../(components)/deploymentActionMenu.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -107,80 +100,14 @@
|
||||
{/each}
|
||||
<Table.Cell>
|
||||
<Layout.Stack alignItems="flex-end">
|
||||
<Popover placement="bottom-end" let:toggle>
|
||||
<Button
|
||||
text
|
||||
icon
|
||||
size="s"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(e);
|
||||
}}>
|
||||
<Icon size="s" icon={IconDotsHorizontal} />
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconRefresh}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showRedeploy = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Redeploy
|
||||
</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Anchor
|
||||
leadingIcon={IconTerminal}
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(e);
|
||||
}}>
|
||||
View details
|
||||
</ActionMenu.Item.Anchor>
|
||||
{#if deployment?.status === 'ready' && deployment?.$id !== data.site.deploymentId}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconLightningBolt}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showActivate = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Activate
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
|
||||
{#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconXCircle}
|
||||
status="danger"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showCancel = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Cancel
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
{#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
status="danger"
|
||||
leadingIcon={IconTrash}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showDelete = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Delete
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
<DeploymentActionMenu
|
||||
{deployment}
|
||||
bind:selectedDeployment
|
||||
bind:showRedeploy
|
||||
bind:showActivate
|
||||
bind:showDelete
|
||||
bind:showCancel
|
||||
activeDeployment={data.site.deploymentId} />
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
</Table.Link>
|
||||
|
||||
+16
-68
@@ -1,15 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
ActionMenu,
|
||||
Badge,
|
||||
Empty,
|
||||
Icon,
|
||||
Layout,
|
||||
Popover,
|
||||
Status,
|
||||
Table,
|
||||
Typography
|
||||
} from '@appwrite.io/pink-svelte';
|
||||
import { Badge, Empty, Layout, Status, Table, Typography } from '@appwrite.io/pink-svelte';
|
||||
import Button from '$lib/elements/forms/button.svelte';
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
@@ -17,18 +7,15 @@
|
||||
import DeploymentCreatedBy from '../(components)/deploymentCreatedBy.svelte';
|
||||
import DeploymentSource from '../(components)/deploymentSource.svelte';
|
||||
import Id from '$lib/components/id.svelte';
|
||||
import {
|
||||
IconDotsHorizontal,
|
||||
IconLightningBolt,
|
||||
IconRefresh,
|
||||
IconXCircle
|
||||
} from '@appwrite.io/pink-icons-svelte';
|
||||
|
||||
import RedeployModal from '../redeployModal.svelte';
|
||||
import { Card } from '$lib/components';
|
||||
import ActivateDeploymentModal from '../activateDeploymentModal.svelte';
|
||||
import CancelDeploymentModal from './deployments/cancelDeploymentModal.svelte';
|
||||
import { capitalize } from '$lib/helpers/string';
|
||||
import { deploymentStatusConverter } from './store';
|
||||
import DeleteDeploymentModal from './deployments/deleteDeploymentModal.svelte';
|
||||
import DeploymentActionMenu from '../(components)/deploymentActionMenu.svelte';
|
||||
|
||||
export let site: Models.Site;
|
||||
export let activeDeployment: Models.Deployment;
|
||||
@@ -37,6 +24,7 @@
|
||||
let showActivate = false;
|
||||
let showRedeploy = false;
|
||||
let showCancel = false;
|
||||
let showDelete = false;
|
||||
let selectedDeployment: Models.Deployment = null;
|
||||
</script>
|
||||
|
||||
@@ -90,57 +78,14 @@
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Layout.Stack alignItems="flex-end">
|
||||
<Popover placement="bottom-end" let:toggle>
|
||||
<Button
|
||||
text
|
||||
icon
|
||||
size="s"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(e);
|
||||
}}>
|
||||
<Icon size="s" icon={IconDotsHorizontal} />
|
||||
</Button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconRefresh}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showRedeploy = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Redeploy
|
||||
</ActionMenu.Item.Button>
|
||||
{#if deployment?.status === 'ready' && deployment?.$id !== site.deploymentId}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconLightningBolt}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showActivate = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Activate
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
{#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconXCircle}
|
||||
status="danger"
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
selectedDeployment = deployment;
|
||||
showCancel = true;
|
||||
toggle(e);
|
||||
}}>
|
||||
Cancel
|
||||
</ActionMenu.Item.Button>
|
||||
{/if}
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
<DeploymentActionMenu
|
||||
{deployment}
|
||||
bind:selectedDeployment
|
||||
bind:showRedeploy
|
||||
bind:showActivate
|
||||
bind:showDelete
|
||||
bind:showCancel
|
||||
activeDeployment={site.deploymentId} />
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
</Table.Link>
|
||||
@@ -172,3 +117,6 @@
|
||||
{#if selectedDeployment && showCancel}
|
||||
<CancelDeploymentModal {selectedDeployment} bind:showCancel />
|
||||
{/if}
|
||||
{#if selectedDeployment && showDelete}
|
||||
<DeleteDeploymentModal {selectedDeployment} bind:showDelete />
|
||||
{/if}
|
||||
|
||||
@@ -50,12 +50,14 @@
|
||||
unique domain.
|
||||
</Typography.Caption>
|
||||
</Layout.Stack>
|
||||
<Button
|
||||
secondary
|
||||
size="xs"
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
|
||||
Add domain
|
||||
</Button>
|
||||
<div>
|
||||
<Button
|
||||
secondary
|
||||
size="xs"
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
|
||||
Add domain
|
||||
</Button>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
{#if proxyRuleList?.rules?.length}
|
||||
<Divider />
|
||||
@@ -68,7 +70,7 @@
|
||||
direction="row"
|
||||
gap="xl">
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Link variant="quiet" href={`${$protocol}${rule.domain}`} size="m">
|
||||
<Link variant="quiet" href={`${$protocol}${rule.domain}`} size="m" external>
|
||||
<Layout.Stack gap="xs" inline direction="row" alignItems="center">
|
||||
<Trim alternativeTrim>
|
||||
{rule.domain}
|
||||
|
||||
Reference in New Issue
Block a user