Skip to content
Snippets Groups Projects
Commit 6a4574b6 authored by syuilo's avatar syuilo
Browse files

enhance(client): tweak control panel dashboard

parent f071ea49
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/client/src/pages/admin/overview.federation.vue
+ 6
− 6
View file @ 6a4574b6
......@@ -2,14 +2,14 @@
<div class="wbrkwale">
<MkLoading v-if="fetching"/>
<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
<div class="body">
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.name ?? instance.host }}</a>
<p>{{ instance.host }}</p>
<div class="name">{{ instance.name ?? instance.host }}</div>
<div class="host">{{ instance.host }}</div>
</div>
<MkMiniChart class="chart" :src="charts[i].requests.received"/>
</div>
</MkA>
</transition-group>
</div>
</template>
......@@ -78,7 +78,7 @@ onUnmounted(() => {
color: var(--fg);
padding-right: 8px;
> .a {
> .name {
display: block;
width: 100%;
white-space: nowrap;
......@@ -86,7 +86,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
}
> p {
> .host {
margin: 0;
font-size: 75%;
opacity: 0.7;
......
packages/client/src/pages/admin/overview.queue-chart.vue
+ 1
− 1
View file @ 6a4574b6
......@@ -146,7 +146,7 @@ onMounted(() => {
}],
},
options: {
aspectRatio: 2.5,
aspectRatio: 3,
layout: {
padding: {
left: 0,
......
packages/client/src/pages/admin/overview.user.vue 0 → 100644
+ 76
− 0
View file @ 6a4574b6
<template>
<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
<span class="name"><MkUserName class="name" :user="user"/></span>
<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
</div>
<MkMiniChart v-if="chart" class="chart" :src="chart.inc"/>
</MkA>
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import MkMiniChart from '@/components/mini-chart.vue';
import * as os from '@/os';
import { acct } from '@/filters/user';
const props = defineProps<{
user: misskey.entities.User;
}>();
const chart = $ref(null);
os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
chart = res;
});
</script>
<style lang="scss" module>
.root {
$bodyTitleHieght: 18px;
$bodyInfoHieght: 16px;
display: flex;
align-items: center;
> :global(.avatar) {
display: block;
width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght);
margin-right: 12px;
}
> :global(.body) {
flex: 1;
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
padding-right: 8px;
> :global(.name) {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: $bodyTitleHieght;
}
> :global(.sub) {
display: block;
width: 100%;
font-size: 95%;
opacity: 0.7;
line-height: $bodyInfoHieght;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
> :global(.chart) {
height: 30px;
}
}
</style>
packages/client/src/pages/admin/overview.vue
+ 75
− 6
View file @ 6a4574b6
......@@ -34,6 +34,13 @@
</div>
</div>
<div class="container users">
<div class="title">New users</div>
<div v-if="newUsers" class="body">
<XUser v-for="user in newUsers" :key="user.id" class="user" :user="user"/>
</div>
</div>
<!--<XMetrics/>-->
<div class="container env">
......@@ -75,6 +82,30 @@
<XFederation/>
</div>
</div>
<div v-if="stats" class="container federationStats">
<div class="title">Federation</div>
<div class="body">
<div class="number _panel">
<div class="label">Sub</div>
<div class="value _monospace">
{{ number(federationSubActive) }}
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div>
</div>
<div class="number _panel">
<div class="label">Pub</div>
<div class="value _monospace">
{{ number(federationPubActive) }}
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div>
</div>
</div>
</div>
<div class="container files">
<div class="title">Recent files</div>
<div class="body">
</div>
</div>
</div>
</div>
</MkSpacer>
......@@ -105,6 +136,7 @@ import MagicGrid from 'magic-grid';
import XMetrics from './metrics.vue';
import XFederation from './overview.federation.vue';
import XQueueChart from './overview.queue-chart.vue';
import XUser from './overview.user.vue';
import MkInstanceStats from '@/components/instance-stats.vue';
import MkNumberDiff from '@/components/number-diff.vue';
import { version, url } from '@/config';
......@@ -141,6 +173,11 @@ let stats: any = $ref(null);
let serverInfo: any = $ref(null);
let usersComparedToThePrevDay: any = $ref(null);
let notesComparedToThePrevDay: 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);
const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
const now = new Date();
let chartInstance: Chart = null;
......@@ -325,10 +362,24 @@ onMounted(async () => {
});
});
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.api('admin/server-info').then(serverInfoResponse => {
serverInfo = serverInfoResponse;
});
os.api('admin/show-users', {
limit: 5,
sort: '+createdAt',
}).then(res => {
newUsers = res;
});
nextTick(() => {
queueStatsConnection.send('requestLog', {
id: Math.random().toString().substr(2, 8),
......@@ -364,12 +415,12 @@ definePageMetadata({
margin: 32px 0;
> .title {
font-size: 1.2em;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 16px;
}
&.stats {
&.stats, &.federationStats {
> .body {
display: grid;
grid-gap: 16px;
......@@ -388,7 +439,7 @@ definePageMetadata({
font-size: 1.5em;
> .diff {
font-size: 0.8em;
font-size: 0.7em;
}
}
}
......@@ -410,7 +461,7 @@ definePageMetadata({
}
> .value {
font-size: 1.2em;
font-size: 1.1em;
}
}
}
......@@ -424,6 +475,21 @@ definePageMetadata({
}
}
&.users {
> .body {
background: var(--panel);
border-radius: var(--radius);
> .user {
padding: 16px 20px;
&:not(:last-child) {
border-bottom: solid 0.5px var(--divider);
}
}
}
}
&.federation {
> .body {
background: var(--panel);
......@@ -434,7 +500,8 @@ definePageMetadata({
&.queue {
> .body {
padding: 32px;
position: relative;
padding: 24px;
background: var(--panel);
border-radius: var(--radius);
......@@ -443,7 +510,9 @@ definePageMetadata({
}
> .title {
position: absolute;
top: 24px;
left: 24px;
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment