Merge branch 'feat-usage-1.4' of github.com:appwrite/console into feat-usage-sh-1.4

This commit is contained in:
shimon
2023-10-05 15:59:14 +03:00
27 changed files with 1735 additions and 2976 deletions
+1660 -2633
View File
File diff suppressed because it is too large Load Diff
+39 -38
View File
@@ -10,66 +10,67 @@
"sync": "svelte-kit sync",
"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin prettier-plugin-svelte . && eslint .",
"format": "prettier --ignore-path .gitignore --write --plugin prettier-plugin-svelte .",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
"test": "vitest run",
"test:ui": "vitest --ui",
"test:watch": "vitest watch",
"e2e": "playwright test tests/e2e"
},
"dependencies": {
"@analytics/google-analytics": "^1.0.7",
"@analytics/google-tag-manager": "^0.5.5",
"@appwrite.io/console": "^0.3.0",
"@appwrite.io/pink": "0.1.0-next.9",
"@appwrite.io/pink-icons": "^0.1.0-next.9",
"@popperjs/core": "^2.11.8",
"@sentry/svelte": "^7.66.0",
"@sentry/tracing": "^7.66.0",
"ai": "^2.2.11",
"analytics": "^0.8.9",
"@analytics/google-analytics": "^1.0.5",
"@analytics/google-tag-manager": "^0.5.3",
"@appwrite.io/console": "npm:shimon-appwrite-console@0.1.2",
"@appwrite.io/pink": "0.1.0-next.8",
"@appwrite.io/pink-icons": "^0.1.0-next.8",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
"ai": "^2.1.15",
"analytics": "^0.8.1",
"dayjs": "^1.11.9",
"deep-equal": "^2.2.2",
"dotenv": "^16.3.1",
"echarts": "^5.4.3",
"logrocket": "^5.0.1",
"dotenv": "^16.0.3",
"echarts": "^5.4.1",
"logrocket": "^3.0.1",
"nanoid": "^4.0.2",
"pretty-bytes": "^6.1.1",
"pretty-bytes": "^6.1.0",
"prismjs": "^1.29.0",
"svelte-confetti": "^1.3.0",
"svelte-confetti": "^1.2.2",
"tippy.js": "^6.3.7",
"web-vitals": "^3.4.0"
"web-vitals": "^3.1.1"
},
"devDependencies": {
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.24.0",
"@sveltejs/vite-plugin-svelte": "^2.4.5",
"@playwright/test": "^1.31.2",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.15.4",
"@sveltejs/vite-plugin-svelte": "^2.0.4",
"@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/svelte": "^4.0.3",
"@testing-library/svelte": "^3.2.2",
"@testing-library/user-event": "^14.4.3",
"@types/deep-equal": "^1.0.1",
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^6.5.0",
"@typescript-eslint/parser": "^6.5.0",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitest/ui": "^0.29.7",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-svelte": "^2.33.0",
"jsdom": "^22.1.0",
"eslint": "^8.36.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-svelte": "^2.33.2",
"eslint-plugin-svelte3": "^4.0.0",
"jsdom": "^21.1.1",
"kleur": "^4.1.5",
"pre-commit": "^1.2.2",
"prettier": "^3.0.3",
"prettier-plugin-svelte": "^3.0.3",
"sass": "^1.66.1",
"svelte": "^4.2.0",
"svelte-check": "^3.5.1",
"prettier": "^2.8.6",
"prettier-plugin-svelte": "^2.9.0",
"sass": "^1.59.3",
"svelte": "^3.57.0",
"svelte-check": "^3.1.4",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^5.0.4",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.4.9",
"svelte-preprocess": "^5.0.3",
"tslib": "^2.5.0",
"typescript": "^5.0.2",
"vite": "^4.2.1",
"vitest": "^0.29.7"
},
"type": "module",
+1 -1
View File
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -22,6 +22,6 @@ export const collectionsSearcher = (async (query: string) => {
`/console/project-${projectId}/databases/database-${databaseId}/collection-${col.$id}`
);
}
}) as const
} as const)
);
}) satisfies Searcher;
+1 -1
View File
@@ -18,6 +18,6 @@ export const dbSearcher = (async (query: string) => {
goto(`/console/project-${get(project).$id}/databases/database-${db.$id}`);
},
icon: 'database'
}) as const
} as const)
);
}) satisfies Searcher;
+1 -1
View File
@@ -13,7 +13,7 @@ const getTeamCommand = (team: Models.Team<Models.Preferences>, projectId: string
},
group: 'teams',
icon: 'user-circle'
}) satisfies Command;
} satisfies Command);
export const teamSearcher = (async (query: string) => {
const { teams } = await sdk.forProject.teams.list([], query);
+1 -1
View File
@@ -14,7 +14,7 @@ const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string
},
group: 'users',
icon: 'user-circle'
}) satisfies Command;
} satisfies Command);
export const userSearcher = (async (query: string) => {
const { users } = await sdk.forProject.users.list([], query || undefined);
+1 -82
View File
@@ -13,12 +13,10 @@
<script lang="ts">
import { Container } from '$lib/layout';
import { BarChart, LineChart } from '$lib/charts';
import { BarChart } from '$lib/charts';
import { Card, SecondaryTabs, SecondaryTabsItem, Heading } from '$lib/components';
import { Colors } from '$lib/charts/config';
import type { Models } from '@appwrite.io/console';
import { page } from '$app/stores';
import { Tiles } from '../components/index.js';
type MetricMetadata = {
title: string;
@@ -27,16 +25,7 @@
export let title: string;
export let count: Models.Metric[];
export let created: Models.Metric[];
export let read: Models.Metric[];
export let updated: Models.Metric[];
export let deleted: Models.Metric[];
export let countMetadata: MetricMetadata;
export let createdMetadata: MetricMetadata;
export let readMetadata: MetricMetadata;
export let updatedMetadata: MetricMetadata;
export let deletedMetadata: MetricMetadata;
export let path: string = null;
</script>
@@ -73,76 +62,6 @@
</div>
{/if}
</Card>
<Tiles>
<Card isTile>
{#if created}
<Heading tag="h6" size="6">{total(created)}</Heading>
<p>{createdMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: createdMetadata.legend,
data: [...created.map((e) => [e.date, e.value])],
color: Colors.Secondary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if read}
<Heading tag="h6" size="6">{total(read)}</Heading>
<p>{readMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: readMetadata.legend,
data: [...read.map((e) => [e.date, e.value])],
color: Colors.Tertiary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if updated}
<Heading tag="h6" size="6">{total(updated)}</Heading>
<p>{updatedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: updatedMetadata.legend,
data: [...updated.map((e) => [e.date, e.value])],
color: Colors.Quaternary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if deleted}
<Heading tag="h6" size="6">{total(deleted)}</Heading>
<p>{deletedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: deletedMetadata.legend,
data: [...deleted.map((e) => [e.date, e.value])],
color: Colors.Quinary
}
]} />
</div>
{/if}
</Card>
</Tiles>
</Container>
<style lang="scss">
+2 -6
View File
@@ -202,12 +202,8 @@
border-radius: var(--border-radius);
border: var(--border-size) solid transparent;
background: var(--border-gradient) border-box;
mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
+1 -1
View File
@@ -145,7 +145,7 @@
},
group: 'security',
icon: 'pencil'
}) as const
} as const)
),
// Settings
{
@@ -5,38 +5,14 @@
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.usersTotal;
</script>
<Usage
title="Users"
path={`/console/project-${$page.params.project}/auth/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Users',
title: 'Registered users'
}}
createdMetadata={{
legend: 'Create',
title: 'Users created'
}}
readMetadata={{
legend: 'Read',
title: 'Users read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Users updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Users deleted'
}} />
@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
try {
const response = await sdk.forProject.users.getUsage(period ?? '30d');
return {
count: response.usersCount as unknown as Models.Metric[],
created: response.usersCreate as unknown as Models.Metric[],
read: response.usersRead as unknown as Models.Metric[],
updated: response.usersUpdate as unknown as Models.Metric[],
deleted: response.usersDelete as unknown as Models.Metric[]
usersTotal: response.usersTotal as unknown as Models.Metric[]
};
} catch (e) {
throw error(e.code, e.message);
@@ -5,38 +5,14 @@
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.documentsTotal;
</script>
<Usage
title="Databases"
path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Documents',
title: 'Total documents'
}}
createdMetadata={{
legend: 'Create',
title: 'Documents created'
}}
readMetadata={{
legend: 'Read',
title: 'Documents read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Documents updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Documents deleted'
}} />
@@ -10,10 +10,6 @@ export const load: PageLoad = async ({ params }) => {
);
return {
count: response.documentsCount as unknown as Models.Metric[],
created: response.documentsCreate as unknown as Models.Metric[],
read: response.documentsRead as unknown as Models.Metric[],
updated: response.documentsUpdate as unknown as Models.Metric[],
deleted: response.documentsDelete as unknown as Models.Metric[]
documentsTotal: response.documentsTotal as unknown as Models.Metric[]
};
};
@@ -5,38 +5,14 @@
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.collectionsTotal;
</script>
<Usage
title="Databases"
path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Collections',
title: 'Total collections'
}}
createdMetadata={{
legend: 'Create',
title: 'Collections created'
}}
readMetadata={{
legend: 'Read',
title: 'Collections read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Collections updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Collections deleted'
}} />
@@ -9,10 +9,6 @@ export const load: PageLoad = async ({ params }) => {
);
return {
count: response.collectionsCount as unknown as Models.Metric[],
created: response.collectionsCreate as unknown as Models.Metric[],
read: response.collectionsRead as unknown as Models.Metric[],
updated: response.collectionsUpdate as unknown as Models.Metric[],
deleted: response.collectionsDelete as unknown as Models.Metric[]
collectionsTotal: response.collectionsTotal as unknown as Models.Metric[]
};
};
@@ -5,38 +5,14 @@
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.databasesTotal;
</script>
<Usage
title="Databases"
path={`/console/project-${$page.params.project}/databases/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Databases',
title: 'Total databases'
}}
createdMetadata={{
legend: 'Create',
title: 'Databases created'
}}
readMetadata={{
legend: 'Read',
title: 'Databases read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Databases updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Databases deleted'
}} />
@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
try {
const response = await sdk.forProject.databases.getUsage(period ?? '30d');
return {
count: response.databasesCount as unknown as Models.Metric[],
created: response.databasesCreate as unknown as Models.Metric[],
read: response.databasesRead as unknown as Models.Metric[],
updated: response.databasesUpdate as unknown as Models.Metric[],
deleted: response.databasesDelete as unknown as Models.Metric[]
databasesTotal: response.databasesTotal as unknown as Models.Metric[]
};
} catch (e) {
throw error(e.code, e.message);
@@ -7,9 +7,7 @@
import type { PageData } from './$types';
export let data: PageData;
$: count = data.count;
$: errors = data.errors;
$: count = data.executionsTotal;
</script>
<Container>
@@ -47,18 +45,4 @@
]} />
</Card>
{/if}
{#if errors}
<Card>
<Heading tag="h6" size="6">{total(errors)}</Heading>
<p>Errors</p>
<div class="u-margin-block-start-16" />
<BarChart
series={[
{
name: 'Count of function errors over time',
data: [...errors.map((e) => [e.date, e.value])]
}
]} />
</Card>
{/if}
</Container>
@@ -11,8 +11,7 @@ export const load: PageLoad = async ({ params }) => {
);
return {
count: response.executionsTotal as unknown as Models.Metric[],
errors: response.executionsFailure as unknown as Models.Metric[]
executionsTotal: response.executionsTotal as unknown as Models.Metric[]
};
} catch (e) {
throw error(e.code, e.message);
@@ -82,7 +82,7 @@
<Onboard {projectId} />
{:else}
{#if $usage}
{@const storage = humanFileSize(totalMetrics($usage.storage) ?? 0)}
{@const storage = humanFileSize(totalMetrics($usage.filesStorage) ?? 0)}
<section class="common-section">
<div class="grid-dashboard-1s-2m-6l">
<div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -106,14 +106,16 @@
<div class="grid-item-1-end-start">
<div class="heading-level-4">
{formatNum(totalMetrics($usage.documents) ?? 0)}
{formatNum(totalMetrics($usage.documentsTotal) ?? 0)}
</div>
<div>Documents</div>
</div>
<div class="grid-item-1-end-end">
<div class="text">
Databases: {formatNum(totalMetrics($usage.databases) ?? 0)}
Databases: {formatNum(
totalMetrics($usage.databasesTotal) ?? 0
)}
</div>
</div>
</div>
@@ -141,7 +143,7 @@
<div class="grid-item-1-end-end">
<div class="text">
Buckets: {formatNum(totalMetrics($usage.buckets) ?? 0)}
Buckets: {formatNum(totalMetrics($usage.bucketsTotal) ?? 0)}
</div>
</div>
</div>
@@ -161,7 +163,7 @@
<div class="grid-item-1-end-start">
<div class="heading-level-4">
{formatNum(totalMetrics($usage.users) ?? 0)}
{formatNum(totalMetrics($usage.usersTotal) ?? 0)}
</div>
<div>Users</div>
</div>
@@ -182,7 +184,7 @@
<div class="grid-item-1-end-start">
<div class="heading-level-4">
{formatNum(totalMetrics($usage.executions) ?? 0)}
{formatNum(totalMetrics($usage.executionsTotal) ?? 0)}
</div>
<div>Executions</div>
</div>
@@ -1,6 +1,6 @@
<script lang="ts">
export let indeterminate: boolean = false;
export let checked: boolean = false;
export let indeterminate = false;
export let checked = false;
interface $$Props extends Partial<HTMLInputElement> {
indeterminate?: boolean;
@@ -13,7 +13,7 @@
const dispatch = createEventDispatcher();
$: requests = $usage?.requests as unknown as Array<{
$: requests = $usage?.requestsTotal as unknown as Array<{
date: number;
value: number;
}>;
@@ -26,7 +26,7 @@
<div class="u-flex u-gap-16 u-main-space-between">
<div>
<div class="heading-level-4">
{formatNum(totalMetrics($usage?.requests))}
{formatNum(totalMetrics($usage?.requestsTotal))}
</div>
<div>Requests</div>
</div>
@@ -42,7 +42,7 @@
</svelte:fragment>
</DropList>
</div>
{#if totalMetrics($usage?.requests) !== 0}
{#if totalMetrics($usage?.requestsTotal) !== 0}
<div style="height: 12rem;">
<LineChart
options={{
@@ -5,38 +5,14 @@
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.filesTotal;
</script>
<Usage
title="Files"
path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Files',
title: 'Total files'
}}
createdMetadata={{
legend: 'Create',
title: 'Files created'
}}
readMetadata={{
legend: 'Read',
title: 'Files read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Files updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Files deleted'
}} />
@@ -9,10 +9,6 @@ export const load: PageLoad = async ({ params }) => {
);
return {
count: response.filesCount as unknown as Models.Metric[],
created: response.filesCreate as unknown as Models.Metric[],
read: response.filesRead as unknown as Models.Metric[],
updated: response.filesUpdate as unknown as Models.Metric[],
deleted: response.filesDelete as unknown as Models.Metric[]
filesTotal: response.filesTotal as unknown as Models.Metric[]
};
};
@@ -4,39 +4,14 @@
import type { PageData } from './$types';
export let data: PageData;
$: count = data.count;
$: created = data.created;
$: read = data.read;
$: updated = data.updated;
$: deleted = data.deleted;
$: count = data.bucketsTotal;
</script>
<Usage
title="Buckets"
path={`/console/project-${$page.params.project}/storage/usage`}
{count}
{created}
{read}
{updated}
{deleted}
countMetadata={{
legend: 'Buckets',
title: 'Total buckets'
}}
createdMetadata={{
legend: 'Create',
title: 'Buckets created'
}}
readMetadata={{
legend: 'Read',
title: 'Buckets read'
}}
updatedMetadata={{
legend: 'Update',
title: 'Buckets updated'
}}
deletedMetadata={{
legend: 'Delete',
title: 'Buckets deleted'
}} />
@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
const response = await sdk.forProject.storage.getUsage(params.period ?? '30d');
return {
count: response.bucketsCount as unknown as Models.Metric[],
created: response.bucketsCreate as unknown as Models.Metric[],
read: response.bucketsRead as unknown as Models.Metric[],
updated: response.bucketsUpdate as unknown as Models.Metric[],
deleted: response.bucketsDelete as unknown as Models.Metric[]
bucketsTotal: response.bucketsTotal as unknown as Models.Metric[]
};
} catch (e) {
throw error(e.code, e.message);