Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Sep 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
3 changes: 2 additions & 1 deletion packages/frontend/.storybook/generate.tsx
Original file line number Diff line number Diff line change
@@ -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) => {
Original file line number Diff line number Diff line change
@@ -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>;
13 changes: 7 additions & 6 deletions packages/frontend/src/pages/admin/overview.ap-requests.vue
Original file line number Diff line number Diff line change
@@ -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,
},
Loading