Sharkey/packages/frontend/src/pages/admin/overview.vue

186 lines
4.8 KiB
Vue
Raw Normal View History

<template>
2023-05-19 14:52:15 +03:00
<MkSpacer :contentMax="1000">
2023-05-14 04:21:56 +03:00
<div ref="rootEl" :class="$style.root">
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Active users</template>
<XActiveUsers/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
2022-12-27 02:47:54 +02:00
<template #header>Heatmap</template>
<XHeatmap/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
2022-12-27 07:31:24 +02:00
<template #header>Retention rate</template>
<XRetention/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 07:31:24 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
2022-12-26 02:22:39 +02:00
<template #header>Moderators</template>
<XModerators/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Federation</template>
<XFederation/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Instances</template>
<XInstances/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Ap requests</template>
<XApRequests/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>New users</template>
<XUsers/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Deliver queue</template>
<XQueue domain="deliver"/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-12-27 02:47:54 +02:00
2023-01-09 02:41:25 +02:00
<MkFoldableSection class="item">
<template #header>Inbox queue</template>
<XQueue domain="inbox"/>
2023-01-09 02:41:25 +02:00
</MkFoldableSection>
2022-06-25 17:01:40 +03:00
</div>
</MkSpacer>
</template>
<script lang="ts" setup>
import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
2022-06-25 17:01:40 +03:00
import XFederation from './overview.federation.vue';
import XInstances from './overview.instances.vue';
import XQueue from './overview.queue.vue';
import XApRequests from './overview.ap-requests.vue';
import XUsers from './overview.users.vue';
import XActiveUsers from './overview.active-users.vue';
import XStats from './overview.stats.vue';
2022-12-27 07:31:24 +02:00
import XRetention from './overview.retention.vue';
2022-12-26 02:22:39 +02:00
import XModerators from './overview.moderators.vue';
2022-12-27 02:47:54 +02:00
import XHeatmap from './overview.heatmap.vue';
2021-11-11 19:02:25 +02:00
import * as os from '@/os';
import { useStream } from '@/stream';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
2023-01-09 02:41:25 +02:00
import MkFoldableSection from '@/components/MkFoldableSection.vue';
2022-06-25 17:01:40 +03:00
const rootEl = $shallowRef<HTMLElement>();
let serverInfo: any = $ref(null);
2022-06-30 16:02:08 +03:00
let topSubInstancesForPie: any = $ref(null);
let topPubInstancesForPie: any = $ref(null);
let federationPubActive = $ref<number | null>(null);
let federationPubActiveDiff = $ref<number | null>(null);
let federationSubActive = $ref<number | null>(null);
let federationSubActiveDiff = $ref<number | null>(null);
let newUsers = $ref(null);
2022-06-29 15:22:15 +03:00
let activeInstances = $shallowRef(null);
const queueStatsConnection = markRaw(useStream().useChannel('queueStats'));
2022-06-25 17:01:40 +03:00
const now = new Date();
2022-06-26 07:28:47 +03:00
const filesPagination = {
endpoint: 'admin/drive/files' as const,
limit: 9,
noPaging: true,
};
2022-06-25 17:01:40 +03:00
2022-06-29 15:22:15 +03:00
function onInstanceClick(i) {
os.pageWindow(`/instance-info/${i.host}`);
}
2022-06-25 17:01:40 +03:00
onMounted(async () => {
/*
const magicGrid = new MagicGrid({
container: rootEl,
static: true,
animate: true,
});
magicGrid.listen();
*/
os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
federationPubActive = chart.pubActive[0];
federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
federationSubActive = chart.subActive[0];
federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
});
2022-06-30 14:15:14 +03:00
os.apiGet('federation/stats', { limit: 10 }).then(res => {
2022-06-30 18:38:20 +03:00
topSubInstancesForPie = res.topSubInstances.map(x => ({
2022-06-30 16:02:08 +03:00
name: x.host,
color: x.themeColor,
value: x.followersCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
2022-06-30 18:38:20 +03:00
})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
topPubInstancesForPie = res.topPubInstances.map(x => ({
2022-06-30 16:02:08 +03:00
name: x.host,
color: x.themeColor,
value: x.followingCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
2022-06-30 18:38:20 +03:00
})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
});
os.api('admin/server-info').then(serverInfoResponse => {
serverInfo = serverInfoResponse;
});
2021-10-22 18:04:19 +03:00
os.api('admin/show-users', {
limit: 5,
sort: '+createdAt',
}).then(res => {
newUsers = res;
});
2022-06-29 15:22:15 +03:00
os.api('federation/instances', {
2023-01-03 02:00:42 +02:00
sort: '+latestRequestReceivedAt',
2022-06-29 15:22:15 +03:00
limit: 25,
}).then(res => {
activeInstances = res;
});
nextTick(() => {
queueStatsConnection.send('requestLog', {
id: Math.random().toString().substring(2, 10),
2022-06-26 07:28:47 +03:00
length: 100,
2021-10-22 18:04:19 +03:00
});
});
});
onBeforeUnmount(() => {
queueStatsConnection.dispose();
});
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.dashboard,
icon: 'ti ti-dashboard',
});
</script>
2023-05-14 04:21:56 +03:00
<style lang="scss" module>
.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;
}
</style>