rudeshark.net/packages/client/src/pages/admin/overview.vue
ThatOneCalculator 3de967393b
icons
2023-03-11 13:01:04 -08:00

184 lines
4.7 KiB
Vue

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