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

fix: realtime stats

Browse Source
This commit is contained in:
Torsten Dittmann
2022-11-02 13:50:33 +01:00
parent ff54164d64
commit bacdcfe973
5 changed files with 132 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/charts/base.svelte
+1
View File
@@ -86,5 +86,6 @@
.echart {
width: 100%;
min-height: 12rem;
height: 100%;
}
</style>
src/lib/layout/usage.svelte
+40 -32
View File
@@ -75,14 +75,16 @@
<Heading tag="h6" size="6">{total(created)}</Heading>
<p>{createdMetadata.title}</p>
<div class="u-margin-block-start-16" />
<LineChart
series={[
{
name: createdMetadata.legend,
data: [...created.map((e) => [e.date, e.value])],
color: Colors.Secondary
}
]} />
<div style="height: 12rem;">
<LineChart
series={[
{
name: createdMetadata.legend,
data: [...created.map((e) => [e.date, e.value])],
color: Colors.Secondary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
@@ -90,14 +92,16 @@
<Heading tag="h6" size="6">{total(read)}</Heading>
<p>{readMetadata.title}</p>
<div class="u-margin-block-start-16" />
<LineChart
series={[
{
name: readMetadata.legend,
data: [...read.map((e) => [e.date, e.value])],
color: Colors.Tertiary
}
]} />
<div style="height: 12rem;">
<LineChart
series={[
{
name: readMetadata.legend,
data: [...read.map((e) => [e.date, e.value])],
color: Colors.Tertiary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
@@ -105,14 +109,16 @@
<Heading tag="h6" size="6">{total(updated)}</Heading>
<p>{updatedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<LineChart
series={[
{
name: updatedMetadata.legend,
data: [...updated.map((e) => [e.date, e.value])],
color: Colors.Quaternary
}
]} />
<div style="height: 12rem;">
<LineChart
series={[
{
name: updatedMetadata.legend,
data: [...updated.map((e) => [e.date, e.value])],
color: Colors.Quaternary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
@@ -120,14 +126,16 @@
<Heading tag="h6" size="6">{total(deleted)}</Heading>
<p>{deletedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<LineChart
series={[
{
name: deletedMetadata.legend,
data: [...deleted.map((e) => [e.date, e.value])],
color: Colors.Quinary
}
]} />
<div style="height: 12rem;">
<LineChart
series={[
{
name: deletedMetadata.legend,
data: [...deleted.map((e) => [e.date, e.value])],
color: Colors.Quinary
}
]} />
</div>
{/if}
</Card>
</Tiles>
src/routes/console/project-[project]/+layout.svelte
+21
View File
@@ -1,5 +1,26 @@
<script lang="ts">
import { UploadBox } from '$lib/components';
import { sdkForConsole } from '$lib/stores/sdk';
import { onDestroy, onMount } from 'svelte';
import { stats } from './store';
let unsubscribe: { (): void };
onMount(() => {
unsubscribe = sdkForConsole.client.subscribe(['project', 'console'], (response) => {
if (response.events.includes('stats.connections')) {
for (const [projectId, value] of Object.entries(response.payload)) {
stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
}
}
});
});
onDestroy(() => {
if (unsubscribe) {
unsubscribe();
}
});
</script>
<slot />
src/routes/console/project-[project]/overview/+layout.svelte
+35 -29
View File
@@ -2,9 +2,7 @@
import type { Models } from '@aw-labs/appwrite-console';
import { Container, type UsagePeriods } from '$lib/layout';
import { page } from '$app/stores';
import { browser } from '$app/environment';
import { sdkForConsole } from '$lib/stores/sdk';
import { project } from '../store';
import { project, stats } from '../store';
import { usage } from './store';
import { onMount } from 'svelte';
import { afterNavigate } from '$app/navigation';
@@ -14,7 +12,7 @@
$: projectId = $page.params.project;
$: path = `/console/project-${projectId}/overview`;
$: console.log($stats.get(projectId));
let period: UsagePeriods = '30d';
let showPeriodBandwidth = false;
let showPeriodRequests = false;
@@ -55,15 +53,6 @@
showPeriodRequests = false;
}
if (browser) {
sdkForConsole.client.subscribe<unknown>('console', (message) => {
if (message.events.includes('stats.connections')) {
// TODO: take care of realtime connections
return;
}
});
}
//TODO: workaround for broken types
$: network = $usage?.network as unknown as Array<{
date: number;
@@ -119,13 +108,15 @@
</DropList>
</div>
{#if network.length}
<BarChart
series={[
{
name: 'Bandwidth',
data: [...network.map((e) => [e.date, e.value])]
}
]} />
<div style="height: 12rem;">
<BarChart
series={[
{
name: 'Bandwidth',
data: [...network.map((e) => [e.date, e.value])]
}
]} />
</div>
{/if}
</div>
<div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -160,13 +151,15 @@
</DropList>
</div>
{#if network.length}
<LineChart
series={[
{
name: 'Requests',
data: [...requests.map((e) => [e.date, e.value])]
}
]} />
<div style="height: 12rem;">
<LineChart
series={[
{
name: 'Requests',
data: [...requests.map((e) => [e.date, e.value])]
}
]} />
</div>
{/if}
</div>
<div class="card is-2-columns-large-screen">
@@ -262,8 +255,21 @@
</div>
<div
class="card is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">
<div class="heading-level-4">XX</div>
<div>Realtime Connections</div>
{#if $stats.get(projectId)}
<div class="heading-level-4">
{format($stats.get(projectId)[11][1])}
</div>
<div>Realtime Connections</div>
<BarChart
series={[
{
name: 'Realtime connection',
data: $stats.get(projectId)
}
]} />
{:else}
<div>waiting for realtime connections</div>
{/if}
</div>
</div>
</section>
src/routes/console/project-[project]/store.ts
+35 -1
View File
@@ -1,5 +1,39 @@
import { derived } from 'svelte/store';
import { derived, writable } from 'svelte/store';
import { page } from '$app/stores';
import type { Models } from '@aw-labs/appwrite-console';
import type { BarSeriesOption } from 'echarts/charts';
export const project = derived(page, ($page) => $page.data.project as Models.Project);
function createStats() {
const { subscribe, set, update } = writable<Map<string, BarSeriesOption['data']>>(new Map());
return {
subscribe,
add: (projectId: string, data: BarSeriesOption['data'][number]) =>
update((n) => {
let series = n.get(projectId) ?? [];
if (series.length === 0) {
const date = new Date(data[0]);
for (let i = 0; i < 12; i++) {
series.push([date.toISOString(), 0]);
date.setSeconds(date.getSeconds() - 5);
}
}
series.push(data);
if (series.length > 12) {
series = series.slice(-12);
}
n.set(projectId, series);
return n;
}),
reset: () => set(new Map())
};
}
export const stats = createStats();