rudeshark.net/packages/client/src/pages/admin/overview.vue

184 lines
4.7 KiB
Vue
Raw Normal View History

<template>
2023-02-14 04:48:57 +01:00
<MkSpacer :content-max="1000">
<div ref="rootEl" class="edbbcaef">
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Stats</template>
<XStats/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Active users</template>
<XActiveUsers/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Heatmap</template>
<XHeatmap/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Moderators</template>
<XModerators/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Federation</template>
<XFederation/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Instances</template>
<XInstances/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Ap requests</template>
<XApRequests/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>New users</template>
<XUsers/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Deliver queue</template>
<XQueue domain="deliver"/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2023-02-14 04:54:06 +01:00
<MkFolder class="item">
<template #header>Inbox queue</template>
<XQueue domain="inbox"/>
2023-02-14 04:54:06 +01:00
</MkFolder>
2021-10-23 21:03:07 +02:00
</div>
2023-02-14 04:48:57 +01:00
</MkSpacer>
</template>
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
2022-06-25 16:01:40 +02:00
import XFederation from './overview.federation.vue';
2023-02-14 04:48:57 +01:00
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';
import XModerators from './overview.moderators.vue';
import XHeatmap from './overview.heatmap.vue';
import MkTagCloud from '@/components/MkTagCloud.vue';
2021-11-11 18:02:25 +01:00
import { version, url } from '@/config';
import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
2022-06-25 16:01:40 +02:00
import { defaultStore } from '@/store';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
2023-02-14 04:54:06 +01:00
import MkFolder from '@/components/MkFolder.vue';
2023-02-14 04:48:57 +01:00
const rootEl = $shallowRef<HTMLElement>();
let serverInfo: any = $ref(null);
2022-06-30 15:02:08 +02: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 14:22:15 +02:00
let activeInstances = $shallowRef(null);
const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
2022-06-25 16:01:40 +02:00
const now = new Date();
2022-06-26 06:28:47 +02:00
const filesPagination = {
endpoint: 'admin/drive/files' as const,
limit: 9,
noPaging: true,
};
2022-06-25 16:01:40 +02:00
2022-06-29 14:22:15 +02:00
function onInstanceClick(i) {
os.pageWindow(`/instance-info/${i.host}`);
}
2022-06-25 16:01:40 +02: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 13:15:14 +02:00
os.apiGet('federation/stats', { limit: 10 }).then(res => {
2022-06-30 17:38:20 +02:00
topSubInstancesForPie = res.topSubInstances.map(x => ({
2022-06-30 15:02:08 +02:00
name: x.host,
color: x.themeColor,
value: x.followersCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
2022-06-30 17:38:20 +02:00
})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
topPubInstancesForPie = res.topPubInstances.map(x => ({
2022-06-30 15:02:08 +02:00
name: x.host,
color: x.themeColor,
value: x.followingCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
2022-06-30 17:38:20 +02:00
})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
});
os.api('admin/server-info').then(serverInfoResponse => {
serverInfo = serverInfoResponse;
});
2021-10-22 17:04:19 +02:00
os.api('admin/show-users', {
limit: 5,
sort: '+createdAt',
}).then(res => {
newUsers = res;
});
2022-06-29 14:22:15 +02:00
os.api('federation/instances', {
2023-02-14 04:48:57 +01:00
sort: '+latestRequestReceivedAt',
2022-06-29 14:22:15 +02:00
limit: 25,
}).then(res => {
activeInstances = res;
});
nextTick(() => {
queueStatsConnection.send('requestLog', {
id: Math.random().toString().substr(2, 8),
2022-06-26 06:28:47 +02:00
length: 100,
2021-10-22 17:04:19 +02:00
});
});
});
onBeforeUnmount(() => {
queueStatsConnection.dispose();
});
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.dashboard,
2023-02-14 04:48:57 +01:00
icon: 'ti ti-dashboard',
});
</script>
<style lang="scss" scoped>
.edbbcaef {
2023-02-14 04:48:57 +01:00
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;
}
</style>