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

(feat): Add dedicated database overview and layout support

Browse Source
This commit is contained in:
Jake Barnby
2026-03-25 23:32:25 +13:00
parent e149dd13f6
commit d67029ffae
9 changed files with 24 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/helpers/terminology.ts
-6
View File
@@ -13,7 +13,6 @@ export type DatabaseType =
| 'tablesdb'
| 'documentsdb'
| 'vectordb'
| 'prisma'
| 'shared'
| 'dedicated';
@@ -68,11 +67,6 @@ export const baseTerminology = {
record: 'document'
},
vectordb: {},
prisma: {
entity: 'table',
field: 'column',
record: 'row'
},
shared: {
entity: 'table',
field: 'column',
src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
+1 -2
View File
@@ -17,7 +17,7 @@
import { SortButton } from '$lib/components';
import { columnsOrder, columnsWidth, reorderItems } from '../table-[table]/store';
import { preferences } from '$lib/stores/preferences';
import { expandTabs, type Columns } from '../store';
import { expandTabs } from '../store';
import { SpreadsheetContainer } from '$database/(entity)';
import { onDestroy, onMount, tick } from 'svelte';
import { sdk, realtime, type RealtimeResponse } from '$lib/stores/sdk';
@@ -28,7 +28,6 @@
mapSuggestedColumns,
type SuggestedColumnSchema,
entityColumnSuggestions,
basicColumnOptions,
mockSuggestions,
showIndexesSuggestions
} from './store';
src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
// Check if this is a dedicated database type
$: isDedicatedType =
terminology.type === 'prisma' || terminology.type === 'dedicated' || terminology.type === 'shared';
terminology.type === 'dedicated' || terminology.type === 'shared';
$: $registerCommands([
{
src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
+1 -1
View File
@@ -12,7 +12,7 @@ type DatabaseWithType = Models.Database & {
};
function isDedicatedDatabaseType(type: string | undefined): boolean {
return type === 'prisma' || type === 'dedicated' || type === 'shared';
return type === 'dedicated' || type === 'shared';
}
export const load: LayoutLoad = async ({ params, depends }) => {
src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
const databaseType = database.type as DatabaseType;
// For dedicated databases, we don't fetch entities (tables/collections)
const isDedicatedType = databaseType === 'prisma' || databaseType === 'dedicated';
const isDedicatedType = databaseType === 'dedicated';
if (isDedicatedType) {
return {
src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
const params = page.params;
const project = page.data.project;
const database = page.data.database;
const organization = page.data.organization as Organization;
const organization = page.data.organization as Models.Organization;
return [
{
src/routes/(console)/project-[region]-[project]/databases/database-[database]/dedicatedOverview.svelte
+17 -26
View File
@@ -19,8 +19,7 @@
Input,
Skeleton,
Tabs,
Divider,
Card
Divider
} from '@appwrite.io/pink-svelte';
import { IconDuplicate, IconRefresh } from '@appwrite.io/pink-icons-svelte';
@@ -37,8 +36,6 @@
let isSpinningDown = $state(false);
let connectionTab = $state<'direct' | 'string'>('direct');
// Check if this is a Prisma database
const isPrisma = $derived(database.backend === 'prisma');
const isDedicated = $derived(database.type === 'dedicated');
const isShared = $derived(database.type === 'shared');
const isActive = $derived(database.status === 'ready' || database.status === 'active');
@@ -356,12 +353,12 @@
<svelte:fragment slot="title">Status</svelte:fragment>
<svelte:fragment slot="aside">
<Layout.Stack gap="l">
<Layout.Stack direction="row" gap="xl" alignItems="center" wrap>
<Layout.Stack direction="row" gap="xl" alignItems="center" wrap="wrap">
<Status status={statusComponentStatus}>
{capitalizeFirst(database.status)}
</Status>
{#if database.containerStatus && !isPrisma}
{#if database.containerStatus}
<Status status={containerComponentStatus}>
Container: {capitalizeFirst(database.containerStatus)}
</Status>
@@ -378,7 +375,7 @@
</Alert.Inline>
{/if}
<Layout.Stack direction="row" gap="xl" wrap>
<Layout.Stack direction="row" gap="xl" wrap="wrap">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Created {toLocaleDateTime(database.$createdAt)}
</Typography.Caption>
@@ -389,12 +386,12 @@
</Layout.Stack>
</svelte:fragment>
<svelte:fragment slot="actions">
{#if database.containerStatus === 'inactive' && !isPrisma}
{#if database.containerStatus === 'inactive'}
<Button secondary disabled={isColdStarting} on:click={triggerColdStart}>
{isColdStarting ? 'Starting...' : 'Start Database'}
</Button>
{/if}
{#if isDedicated && isActive && !isPrisma}
{#if isDedicated && isActive}
<Button secondary disabled={isPausing} on:click={pauseDatabase}>
{isPausing ? 'Pausing...' : 'Pause'}
</Button>
@@ -404,7 +401,7 @@
{isResuming ? 'Resuming...' : 'Resume'}
</Button>
{/if}
{#if isShared && isActive && containerIsRunning && !isPrisma}
{#if isShared && isActive && containerIsRunning}
<Button secondary disabled={isSpinningDown} on:click={spinDownDatabase}>
{isSpinningDown ? 'Spinning down...' : 'Spin Down'}
</Button>
@@ -480,7 +477,7 @@
color="--fgcolor-neutral-tertiary">
Terminal Command
</Typography.Caption>
<Code language="bash" code={getConnectionCommand()} withCopy />
<Code language="sh" code={getConnectionCommand()} withCopy />
</Layout.Stack>
</Layout.Stack>
{/if}
@@ -553,7 +550,7 @@
<svelte:fragment slot="title">Resources</svelte:fragment>
Your database configuration and allocated resources.
<svelte:fragment slot="aside">
<Layout.Grid columns={3} columnsM={2} columnsS={1} gap="l">
<Layout.Grid columns={3} columnsL={2} columnsS={1} gap="l">
<Layout.Stack gap="xxs">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Engine
@@ -610,13 +607,11 @@
</svelte:fragment>
</CardGrid>
<!-- High Availability - Only show for non-Prisma databases -->
{#if !isPrisma}
<CardGrid>
<CardGrid>
<svelte:fragment slot="title">High Availability</svelte:fragment>
Configure replicas and failover settings for your database.
<svelte:fragment slot="aside">
<Layout.Grid columns={3} columnsM={2} columnsS={1} gap="l">
<Layout.Grid columns={3} columnsL={2} columnsS={1} gap="l">
<Layout.Stack gap="xxs">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Status
@@ -652,16 +647,13 @@
</Layout.Grid>
</svelte:fragment>
</CardGrid>
{/if}
<!-- Network - Only show for non-Prisma databases -->
{#if !isPrisma}
<CardGrid>
<CardGrid>
<svelte:fragment slot="title">Network</svelte:fragment>
Connection limits and network configuration.
<svelte:fragment slot="aside">
<Layout.Stack gap="l">
<Layout.Grid columns={3} columnsM={2} columnsS={1} gap="l">
<Layout.Grid columns={3} columnsL={2} columnsS={1} gap="l">
<Layout.Stack gap="xxs">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Max Connections
@@ -701,7 +693,7 @@
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
IP Allowlist
</Typography.Caption>
<Layout.Stack direction="row" gap="xs" wrap>
<Layout.Stack direction="row" gap="xs" wrap="wrap">
{#each database.networkIPAllowlist as ip}
<Badge variant="secondary" size="s" content={ip} />
{/each}
@@ -711,7 +703,6 @@
</Layout.Stack>
</svelte:fragment>
</CardGrid>
{/if}
<!-- Backups -->
<CardGrid>
@@ -771,7 +762,7 @@
<svelte:fragment slot="title">Storage Autoscaling</svelte:fragment>
Automatically expand storage when usage reaches the configured threshold.
<svelte:fragment slot="aside">
<Layout.Grid columns={3} columnsM={2} columnsS={1} gap="l">
<Layout.Grid columns={3} columnsL={2} columnsS={1} gap="l">
<Layout.Stack gap="xxs">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Status
@@ -809,7 +800,7 @@
<svelte:fragment slot="title">Security</svelte:fragment>
Encryption, key management, and audit logging configuration.
<svelte:fragment slot="aside">
<Layout.Grid columns={3} columnsM={2} columnsS={1} gap="l">
<Layout.Grid columns={3} columnsL={2} columnsS={1} gap="l">
<Layout.Stack gap="xxs">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Encryption at Rest
@@ -960,7 +951,7 @@
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Allowed Statements
</Typography.Caption>
<Layout.Stack direction="row" gap="xs" wrap>
<Layout.Stack direction="row" gap="xs" wrap="wrap">
{#each database.sqlApiAllowedStatements as statement}
<Badge variant="secondary" size="s" content={statement.toUpperCase()} />
{/each}
src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+1 -2
View File
@@ -22,8 +22,7 @@
// Check if this is a dedicated database type
const isDedicatedType = $derived(
(database?.type as DatabaseType) === 'prisma' ||
(database?.type as DatabaseType) === 'dedicated' ||
(database?.type as DatabaseType) === 'dedicated' ||
(database?.type as DatabaseType) === 'shared'
);
src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
// Check if this is a dedicated database type
const isDedicatedType = $derived(
terminology.type === 'prisma' || terminology.type === 'dedicated' || terminology.type === 'shared'
terminology.type === 'dedicated' || terminology.type === 'shared'
);
const entityTypePlural = terminology.entity.lower.plural;