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

Add badges and links to functions/projects tables

Browse Source
This commit is contained in:
Khushboo Verma
2025-09-16 12:56:47 +05:30
parent 6df5f66ec0
commit 995ef38eab
10 changed files with 255 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/domains/index.ts
+5
View File
@@ -0,0 +1,5 @@
export { default as ViewLogsModal } from './viewLogsModal.svelte';
export { default as CnameTable } from './cnameTable.svelte';
export { default as DnsRecordsAction } from './dnsRecordsAction.svelte';
export { default as NameserverTable } from './nameserverTable.svelte';
export { default as RecordTable } from './recordTable.svelte';
src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/viewLogsModal.svelte → src/lib/components/domains/viewLogsModal.svelte
View File
src/lib/components/index.ts
+1
View File
@@ -87,3 +87,4 @@ export { default as ExpirationInput } from './expirationInput.svelte';
export { default as EstimatedCard } from './estimatedCard.svelte';
export { default as EmailVerificationBanner } from './alerts/emailVerificationBanner.svelte';
export { default as SortButton, type SortDirection } from './sortButton.svelte';
export * from './domains';
src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+7 -3
View File
@@ -101,9 +101,13 @@
await goto(routeBase);
await invalidate(Dependencies.FUNCTION_DOMAINS);
} else {
await goto(
`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}&domain=${domain.$id}`
);
let redirect = `${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`;
if (isCloud && domain?.$id) {
redirect += `&domain=${domain.$id}`;
}
await goto(redirect);
await invalidate(Dependencies.FUNCTION_DOMAINS);
}
} catch (error) {
src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/store.ts
+8 -1
View File
@@ -7,7 +7,7 @@ export const columns = writable<Column[]>([
title: 'Domain',
type: 'string',
format: 'string',
width: { min: 200 }
width: { min: 300 }
},
{
@@ -15,5 +15,12 @@ export const columns = writable<Column[]>([
title: 'Target',
type: 'string',
width: { min: 120, max: 400 }
},
{
id: 'updated',
title: '',
type: 'string',
width: { min: 160, max: 180 }
}
]);
src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte
+103 -9
View File
@@ -3,10 +3,16 @@
import { Link } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import type { Models } from '@appwrite.io/console';
import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
import {
IconDotsHorizontal,
IconRefresh,
IconTerminal,
IconTrash
} from '@appwrite.io/pink-icons-svelte';
import {
ActionMenu,
Badge,
Divider,
Icon,
Layout,
Popover,
@@ -15,9 +21,11 @@
} from '@appwrite.io/pink-svelte';
import DeleteDomainModal from './deleteDomainModal.svelte';
import RetryDomainModal from './retryDomainModal.svelte';
import { ViewLogsModal } from '$lib/components';
import { columns } from './store';
import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
import DnsRecordsAction from '$lib/components/domains/dnsRecordsAction.svelte';
import { timeFromNowShort } from '$lib/helpers/date';
let {
proxyRules,
@@ -29,6 +37,7 @@
let showDelete = $state(false);
let showRetry = $state(false);
let showLogs = $state(false);
let selectedProxyRule: Models.ProxyRule = $state(null);
const proxyTarget = (proxy: Models.ProxyRule) => {
@@ -63,18 +72,77 @@
{proxyRule.domain}
</Typography.Text>
</Link>
{#if proxyRule.status === 'verifying'}
<Badge variant="secondary" content="Verifying" size="s" />
{:else if proxyRule.status !== 'verified'}
<Badge
variant="secondary"
type="warning"
content="Verification failed"
size="s" />
{#if proxyRule.status === 'created'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
type="error"
content="Verification failed"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedProxyRule = proxyRule;
showRetry = true;
}}>
Retry
</Link>
</Layout.Stack>
{:else if proxyRule.status === 'verifying'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
content="Generating certificate"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedProxyRule = proxyRule;
showLogs = true;
}}>
View logs
</Link>
</Layout.Stack>
{:else if proxyRule.status === 'unverified'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
type="error"
content="Certificate generation failed"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedProxyRule = proxyRule;
showLogs = true;
}}>
View logs
</Link>
</Layout.Stack>
{/if}
</Layout.Stack>
{:else if column.id === 'target'}
{proxyTarget(proxyRule)}
{:else if column.id === 'updated'}
<Layout.Stack direction="row" justifyContent="flex-end">
{#if proxyRule.status !== 'verified'}
<Typography.Text
variant="m-400"
color="--fgcolor-neutral-tertiary"
style="font-size: 0.875rem;">
{#if proxyRule.status === 'created'}
Checked {timeFromNowShort(proxyRule.$updatedAt)}
{:else if proxyRule.status === 'verifying'}
Updated {timeFromNowShort(proxyRule.$updatedAt)}
{:else if proxyRule.status === 'unverified'}
Failed {timeFromNowShort(proxyRule.$updatedAt)}
{/if}
</Typography.Text>
{/if}
</Layout.Stack>
{/if}
</Table.Cell>
{/each}
@@ -93,6 +161,17 @@
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root>
{#if proxyRule.logs && (proxyRule.status === 'unverified' || proxyRule.status === 'verifying')}
<ActionMenu.Item.Button
leadingIcon={IconTerminal}
on:click={(e) => {
selectedProxyRule = proxyRule;
showLogs = true;
toggle(e);
}}>
View logs
</ActionMenu.Item.Button>
{/if}
{#if proxyRule.status !== 'verified' && proxyRule.status !== 'verifying'}
<ActionMenu.Item.Button
leadingIcon={IconRefresh}
@@ -105,6 +184,11 @@
</ActionMenu.Item.Button>
{/if}
<DnsRecordsAction rule={proxyRule} {organizationDomains} />
{#if proxyRule.logs && (proxyRule.status === 'unverified' || proxyRule.status === 'verifying')}
<div class="action-menu-divider">
<Divider />
</div>
{/if}
<ActionMenu.Item.Button
status="danger"
leadingIcon={IconTrash}
@@ -134,3 +218,13 @@
{#if showRetry}
<RetryDomainModal bind:show={showRetry} {selectedProxyRule} />
{/if}
{#if showLogs}
<ViewLogsModal bind:show={showLogs} {selectedProxyRule} />
{/if}
<style>
.action-menu-divider {
margin-inline: -1rem;
}
</style>
src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
} else {
let redirect = `${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`;
if (isCloud) {
if (isCloud && domain?.$id) {
/**
* Domains are only on cloud!
* Self-hosted instances have rules.
src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte
+111 -11
View File
@@ -3,10 +3,16 @@
import { Link } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import type { Models } from '@appwrite.io/console';
import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
import {
IconDotsHorizontal,
IconRefresh,
IconTerminal,
IconTrash
} from '@appwrite.io/pink-icons-svelte';
import {
ActionMenu,
Badge,
Divider,
Icon,
Layout,
Popover,
@@ -15,8 +21,10 @@
} from '@appwrite.io/pink-svelte';
import DeleteDomainModal from './deleteDomainModal.svelte';
import RetryDomainModal from './retryDomainModal.svelte';
import { ViewLogsModal } from '$lib/components';
import { regionalProtocol } from '../../store';
import DnsRecordsAction from '$lib/components/domains/dnsRecordsAction.svelte';
import { timeFromNowShort } from '$lib/helpers/date';
let {
domains,
@@ -28,6 +36,7 @@
let showDelete = $state(false);
let showRetry = $state(false);
let showLogs = $state(false);
let selectedDomain: Models.ProxyRule = $state(null);
const columns = [
@@ -36,7 +45,13 @@
title: 'Domain',
type: 'string',
format: 'string',
width: { min: 200, max: 550 }
width: { min: 300, max: 550 }
},
{
id: 'updated',
title: '',
type: 'string',
width: { min: 160, max: 180 }
}
];
</script>
@@ -64,14 +79,73 @@
{domain.domain}
</Typography.Text>
</Link>
{#if domain.status === 'verifying'}
<Badge variant="secondary" content="Verifying" size="s" />
{:else if domain.status !== 'verified'}
<Badge
variant="secondary"
type="warning"
content="Verification failed"
size="s" />
{#if domain.status === 'created'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
type="error"
content="Verification failed"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedDomain = domain;
showRetry = true;
}}>
Retry
</Link>
</Layout.Stack>
{:else if domain.status === 'verifying'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
content="Generating certificate"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedDomain = domain;
showLogs = true;
}}>
View logs
</Link>
</Layout.Stack>
{:else if domain.status === 'unverified'}
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Badge
variant="secondary"
type="error"
content="Certificate generation failed"
size="xs" />
<Link
size="s"
on:click={(e) => {
e.preventDefault();
selectedDomain = domain;
showLogs = true;
}}>
View logs
</Link>
</Layout.Stack>
{/if}
</Layout.Stack>
{:else if column.id === 'updated'}
<Layout.Stack direction="row" justifyContent="flex-end">
{#if domain.status !== 'verified'}
<Typography.Text
variant="m-400"
color="--fgcolor-neutral-tertiary"
style="font-size: 0.875rem;">
{#if domain.status === 'created'}
Checked {timeFromNowShort(domain.$updatedAt)}
{:else if domain.status === 'verifying'}
Updated {timeFromNowShort(domain.$updatedAt)}
{:else if domain.status === 'unverified'}
Failed {timeFromNowShort(domain.$updatedAt)}
{/if}
</Typography.Text>
{/if}
</Layout.Stack>
{/if}
@@ -92,7 +166,18 @@
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root>
{#if domain.status !== 'verified' && domain.status !== 'verifiying'}
{#if domain.logs && (domain.status === 'unverified' || domain.status === 'verifying')}
<ActionMenu.Item.Button
leadingIcon={IconTerminal}
on:click={(e) => {
selectedDomain = domain;
showLogs = true;
toggle(e);
}}>
View logs
</ActionMenu.Item.Button>
{/if}
{#if domain.status !== 'verified' && domain.status !== 'verifying'}
<ActionMenu.Item.Button
leadingIcon={IconRefresh}
on:click={(e) => {
@@ -104,6 +189,11 @@
</ActionMenu.Item.Button>
{/if}
<DnsRecordsAction rule={domain} {organizationDomains} />
{#if domain.logs && (domain.status === 'unverified' || domain.status === 'verifying')}
<div class="action-menu-divider">
<Divider />
</div>
{/if}
<ActionMenu.Item.Button
status="danger"
leadingIcon={IconTrash}
@@ -133,3 +223,13 @@
{#if showRetry}
<RetryDomainModal bind:show={showRetry} {selectedDomain} />
{/if}
{#if showLogs}
<ViewLogsModal bind:show={showLogs} selectedProxyRule={selectedDomain} />
{/if}
<style>
.action-menu-divider {
margin-inline: -1rem;
}
</style>
src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/store.ts
+2 -2
View File
@@ -7,7 +7,7 @@ export const columns = writable<Column[]>([
title: 'Domain',
type: 'string',
format: 'string',
width: { min: 200 }
width: { min: 300 }
},
{
@@ -21,6 +21,6 @@ export const columns = writable<Column[]>([
id: 'updated',
title: '',
type: 'string',
width: { min: 100, max: 140 }
width: { min: 160, max: 180 }
}
]);
src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte
+17 -15
View File
@@ -21,7 +21,7 @@
} from '@appwrite.io/pink-svelte';
import DeleteDomainModal from './deleteDomainModal.svelte';
import RetryDomainModal from './retryDomainModal.svelte';
import ViewLogsModal from './viewLogsModal.svelte';
import { ViewLogsModal } from '$lib/components';
import { columns } from './store';
import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
import DnsRecordsAction from '$lib/components/domains/dnsRecordsAction.svelte';
@@ -128,20 +128,22 @@
{:else if column.id === 'target'}
{proxyTarget(rule)}
{:else if column.id === 'updated'}
{#if rule.status !== 'verified'}
<Typography.Text
variant="m-400"
color="--fgcolor-neutral-tertiary"
style="font-size: 0.875rem;">
{#if rule.status === 'created'}
Checked {timeFromNowShort(rule.$updatedAt)}
{:else if rule.status === 'verifying'}
Updated {timeFromNowShort(rule.$updatedAt)}
{:else if rule.status === 'unverified'}
Failed {timeFromNowShort(rule.$updatedAt)}
{/if}
</Typography.Text>
{/if}
<Layout.Stack direction="row" justifyContent="flex-end">
{#if rule.status !== 'verified'}
<Typography.Text
variant="m-400"
color="--fgcolor-neutral-tertiary"
style="font-size: 0.875rem;">
{#if rule.status === 'created'}
Checked {timeFromNowShort(rule.$updatedAt)}
{:else if rule.status === 'verifying'}
Updated {timeFromNowShort(rule.$updatedAt)}
{:else if rule.status === 'unverified'}
Failed {timeFromNowShort(rule.$updatedAt)}
{/if}
</Typography.Text>
{/if}
</Layout.Stack>
{/if}
</Table.Cell>
{/each}