fix(frontend): weird AP delivered chart in control panel (#14481)

* fix(frontend): `Out: Fail` was negative number

* fix(frontend): don't stack AP delivered chart

* test(#10336): add `pages/admin/overview.ap-requests.vue` story

* Update CHANGELOG.md

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
zyoshoka 2024-09-24 09:47:31 +09:00 committed by GitHub
parent 6378dfbffc
commit a37df2cd8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 51 additions and 7 deletions

View file

@ -12,6 +12,7 @@
- Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく
- Enhance: ScratchpadにUIインスペクターを追加
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
- Fix: コントロールパネル内のAp requests内のチャートの表示がおかしかった問題を修正
- Fix: 月の違う同じ日はセパレータが表示されないのを修正
- Fix: タッチ画面でレンジスライダーを操作するとツールチップが複数表示される問題を修正
(Cherry-picked from https://github.com/taiyme/misskey/pull/265)

View file

@ -405,8 +405,9 @@ function toStories(component: string): Promise<string> {
glob('src/components/MkUserSetupDialog.*.vue'),
glob('src/components/MkInstanceCardMini.vue'),
glob('src/components/MkInviteCode.vue'),
glob('src/pages/search.vue'),
glob('src/pages/admin/overview.ap-requests.vue'),
glob('src/pages/user/home.vue'),
glob('src/pages/search.vue'),
]);
const components = globs.flat();
await Promise.all(components.map(async (component) => {

View file

@ -0,0 +1,41 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { StoryObj } from '@storybook/vue3';
import { http, HttpResponse } from 'msw';
import { action } from '@storybook/addon-actions';
import { commonHandlers } from '../../../.storybook/mocks.js';
import overview_ap_requests from './overview.ap-requests.vue';
export const Default = {
render(args) {
return {
components: {
overview_ap_requests,
},
setup() {
return {
args,
};
},
template: '<overview_ap_requests />',
};
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
...commonHandlers,
http.post('/api/charts/ap-request', async ({ request }) => {
action('POST /api/charts/ap-request')(await request.json());
return HttpResponse.json({
deliverFailed: [0, 0, 0, 2, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 2, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 1, 0, 0, 0, 3, 1, 1, 2, 0, 0],
deliverSucceeded: [0, 1, 51, 34, 136, 189, 51, 17, 17, 34, 1, 17, 18, 51, 34, 68, 287, 0, 17, 33, 32, 96, 96, 0, 49, 64, 0, 32, 0, 32, 81, 48, 65, 1, 16, 50, 90, 148, 33, 43, 72, 127, 17, 138, 78, 91, 78, 91, 13, 52],
inboxReceived: [507, 1173, 1096, 871, 958, 937, 908, 1026, 956, 909, 807, 1002, 832, 995, 1039, 1047, 1109, 930, 711, 835, 764, 679, 835, 958, 634, 654, 691, 895, 811, 676, 1044, 1389, 1318, 863, 887, 952, 1011, 1061, 592, 900, 611, 595, 604, 562, 607, 621, 854, 666, 1197, 644],
});
}),
],
},
},
} satisfies StoryObj<typeof overview_ap_requests>;

View file

@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { onMounted, shallowRef, ref } from 'vue';
import { Chart } from 'chart.js';
import gradient from 'chartjs-plugin-gradient';
import isChromatic from 'chromatic';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
import { chartVLine } from '@/scripts/chart-vline.js';
@ -41,7 +42,7 @@ const { handler: externalTooltipHandler } = useChartTooltip();
const { handler: externalTooltipHandler2 } = useChartTooltip();
onMounted(async () => {
const now = new Date();
const now = isChromatic() ? new Date('2024-08-31T10:00:00Z') : new Date();
const getDate = (ago: number) => {
const y = now.getFullYear();
@ -51,14 +52,14 @@ onMounted(async () => {
return new Date(y, m, d - ago);
};
const format = (arr) => {
const format = (arr: number[]) => {
return arr.map((v, i) => ({
x: getDate(i).getTime(),
y: v,
}));
};
const formatMinus = (arr) => {
const formatMinus = (arr: number[]) => {
return arr.map((v, i) => ({
x: getDate(i).getTime(),
y: -v,
@ -78,7 +79,6 @@ onMounted(async () => {
type: 'line',
data: {
datasets: [{
stack: 'a',
parsing: false,
label: 'Out: Succ',
data: format(raw.deliverSucceeded).slice().reverse(),
@ -92,7 +92,6 @@ onMounted(async () => {
fill: true,
clip: 8,
}, {
stack: 'a',
parsing: false,
label: 'Out: Fail',
data: formatMinus(raw.deliverFailed).slice().reverse(),
@ -137,7 +136,6 @@ onMounted(async () => {
min: getDate(chartLimit).getTime(),
},
y: {
stacked: true,
position: 'left',
suggestedMax: 10,
grid: {
@ -171,6 +169,9 @@ onMounted(async () => {
duration: 0,
},
external: externalTooltipHandler,
callbacks: {
label: context => `${context.dataset.label}: ${Math.abs(context.parsed.y)}`,
},
},
gradient,
},