From 4e4c559db6964cbf17fcadf38d55fc79c995ca42 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 22 Oct 2021 05:36:48 +0900 Subject: [PATCH] Migrate to Chart.js v3 (#7896) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * wip * wip * wip * wip * wip * wip * 定期的にresync * Update overview.vue * wip * wip --- package.json | 11 +- src/client/components/chart.vue | 628 ++++++++++++++++++ src/client/components/instance-stats.vue | 487 +------------- src/client/components/number-diff.vue | 47 ++ src/client/pages/instance-info.vue | 266 +------- src/client/pages/instance/instance.vue | 266 +------- src/client/pages/instance/metrics.vue | 83 ++- src/client/pages/instance/overview.vue | 174 +++-- src/client/pages/instance/queue.chart.vue | 2 +- src/client/scripts/hpml/lib.ts | 7 +- src/queue/index.ts | 28 +- src/queue/processors/system/index.ts | 12 + src/queue/processors/system/resync-charts.ts | 21 + src/queue/queues.ts | 1 + .../api/endpoints/admin/resync-chart.ts | 4 +- yarn.lock | 46 +- 16 files changed, 980 insertions(+), 1103 deletions(-) create mode 100644 src/client/components/chart.vue create mode 100644 src/client/components/number-diff.vue create mode 100644 src/queue/processors/system/index.ts create mode 100644 src/queue/processors/system/resync-charts.ts diff --git a/package.json b/package.json index 10ddea2c1e..f60a51b940 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,9 @@ "@types/jsonld": "1.5.6", "@types/katex": "0.11.1", "@types/koa": "2.13.4", + "@types/koa__cors": "3.0.3", + "@types/koa__multer": "2.0.3", + "@types/koa__router": "8.0.8", "@types/koa-bodyparser": "4.3.3", "@types/koa-cors": "0.0.2", "@types/koa-favicon": "2.0.21", @@ -67,9 +70,6 @@ "@types/koa-mount": "4.0.1", "@types/koa-send": "4.1.3", "@types/koa-views": "7.0.0", - "@types/koa__cors": "3.0.3", - "@types/koa__multer": "2.0.3", - "@types/koa__router": "8.0.8", "@types/markdown-it": "12.2.3", "@types/matter-js": "0.17.5", "@types/mocha": "8.2.3", @@ -119,7 +119,9 @@ "cafy": "15.2.1", "cbor": "8.0.2", "chalk": "4.1.2", - "chart.js": "2.9.4", + "chart.js": "3.5.1", + "chartjs-adapter-date-fns": "2.0.0", + "chartjs-plugin-zoom": "1.1.1", "cli-highlight": "2.1.11", "compare-versions": "3.6.0", "concurrently": "6.3.0", @@ -127,6 +129,7 @@ "crc-32": "1.2.0", "css-loader": "6.4.0", "cssnano": "5.0.8", + "date-fns": "2.25.0", "dateformat": "4.5.1", "escape-regexp": "0.0.1", "eslint": "8.0.1", diff --git a/src/client/components/chart.vue b/src/client/components/chart.vue new file mode 100644 index 0000000000..3599266cb6 --- /dev/null +++ b/src/client/components/chart.vue @@ -0,0 +1,628 @@ + + + diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue index 5e7c71ea65..fd0b75609f 100644 --- a/src/client/components/instance-stats.vue +++ b/src/client/components/instance-stats.vue @@ -24,35 +24,26 @@ - + - + diff --git a/src/client/components/number-diff.vue b/src/client/components/number-diff.vue new file mode 100644 index 0000000000..ba7e6964de --- /dev/null +++ b/src/client/components/number-diff.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index 4fbf104f0c..7a4cd5f016 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -65,17 +65,17 @@
- - - - - - - - - - - + + + + + + + + + + + @@ -83,7 +83,7 @@
- +
@@ -135,7 +135,7 @@ + + diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue index 887fe9a574..4f8fd762bb 100644 --- a/src/client/pages/instance/queue.chart.vue +++ b/src/client/pages/instance/queue.chart.vue @@ -67,7 +67,7 @@ export default defineComponent({ // TODO: var(--panel)の色が暗いか明るいかで判定する const gridColor = this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg'); + Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); this.chart = markRaw(new Chart(this.$refs.chart, { type: 'line', diff --git a/src/client/scripts/hpml/lib.ts b/src/client/scripts/hpml/lib.ts index 150a04732f..200faf820b 100644 --- a/src/client/scripts/hpml/lib.ts +++ b/src/client/scripts/hpml/lib.ts @@ -1,11 +1,11 @@ import * as tinycolor from 'tinycolor2'; -import Chart from 'chart.js'; import { Hpml } from './evaluator'; import { values, utils } from '@syuilo/aiscript'; import { Fn, HpmlScope } from '.'; import { Expr } from './expr'; import * as seedrandom from 'seedrandom'; +/* // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs Chart.pluginService.register({ beforeDraw: (chart, easing) => { @@ -18,6 +18,7 @@ Chart.pluginService.register({ } } }); +*/ export function initAiLib(hpml: Hpml) { return { @@ -49,11 +50,12 @@ export function initAiLib(hpml: Hpml) { ])); }), 'MkPages:chart': values.FN_NATIVE(([id, opts]) => { + /* TODO utils.assertString(id); utils.assertObject(opts); const canvas = hpml.canvases[id.value]; const color = getComputedStyle(document.documentElement).getPropertyValue('--accent'); - Chart.defaults.global.defaultFontColor = '#555'; + Chart.defaults.color = '#555'; const chart = new Chart(canvas, { type: opts.value.get('type').value, data: { @@ -122,6 +124,7 @@ export function initAiLib(hpml: Hpml) { }) } }); + */ }) }; } diff --git a/src/queue/index.ts b/src/queue/index.ts index 43c062bae7..37eb809604 100644 --- a/src/queue/index.ts +++ b/src/queue/index.ts @@ -10,7 +10,7 @@ import procesObjectStorage from './processors/object-storage/index'; import { queueLogger } from './logger'; import { DriveFile } from '@/models/entities/drive-file'; import { getJobInfo } from './get-job-info'; -import { dbQueue, deliverQueue, inboxQueue, objectStorageQueue } from './queues'; +import { systemQueue, dbQueue, deliverQueue, inboxQueue, objectStorageQueue } from './queues'; import { ThinUser } from './types'; import { IActivity } from '@/remote/activitypub/type'; @@ -22,11 +22,20 @@ function renderError(e: Error): any { }; } +const systemLogger = queueLogger.createSubLogger('system'); const deliverLogger = queueLogger.createSubLogger('deliver'); const inboxLogger = queueLogger.createSubLogger('inbox'); const dbLogger = queueLogger.createSubLogger('db'); const objectStorageLogger = queueLogger.createSubLogger('objectStorage'); +systemQueue + .on('waiting', (jobId) => systemLogger.debug(`waiting id=${jobId}`)) + .on('active', (job) => systemLogger.debug(`active id=${job.id}`)) + .on('completed', (job, result) => systemLogger.debug(`completed(${result}) id=${job.id}`)) + .on('failed', (job, err) => systemLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) })) + .on('error', (job: any, err: Error) => systemLogger.error(`error ${err}`, { job, e: renderError(err) })) + .on('stalled', (job) => systemLogger.warn(`stalled id=${job.id}`)); + deliverQueue .on('waiting', (jobId) => deliverLogger.debug(`waiting id=${jobId}`)) .on('active', (job) => deliverLogger.debug(`active ${getJobInfo(job, true)} to=${job.data.to}`)) @@ -220,12 +229,17 @@ export function createCleanRemoteFilesJob() { } export default function() { - if (!envOption.onlyServer) { - deliverQueue.process(config.deliverJobConcurrency || 128, processDeliver); - inboxQueue.process(config.inboxJobConcurrency || 16, processInbox); - processDb(dbQueue); - procesObjectStorage(objectStorageQueue); - } + if (envOption.onlyServer) return; + + deliverQueue.process(config.deliverJobConcurrency || 128, processDeliver); + inboxQueue.process(config.inboxJobConcurrency || 16, processInbox); + processDb(dbQueue); + procesObjectStorage(objectStorageQueue); + + systemQueue.add('resyncCharts', { + }, { + repeat: { cron: '0 0 * * *' } + }); } export function destroy() { diff --git a/src/queue/processors/system/index.ts b/src/queue/processors/system/index.ts new file mode 100644 index 0000000000..52b7868105 --- /dev/null +++ b/src/queue/processors/system/index.ts @@ -0,0 +1,12 @@ +import * as Bull from 'bull'; +import { resyncCharts } from './resync-charts'; + +const jobs = { + resyncCharts, +} as Record | Bull.ProcessPromiseFunction<{}>>; + +export default function(dbQueue: Bull.Queue<{}>) { + for (const [k, v] of Object.entries(jobs)) { + dbQueue.process(k, v); + } +} diff --git a/src/queue/processors/system/resync-charts.ts b/src/queue/processors/system/resync-charts.ts new file mode 100644 index 0000000000..b36b024cfb --- /dev/null +++ b/src/queue/processors/system/resync-charts.ts @@ -0,0 +1,21 @@ +import * as Bull from 'bull'; + +import { queueLogger } from '../../logger'; +import { driveChart, notesChart, usersChart } from '@/services/chart/index'; + +const logger = queueLogger.createSubLogger('resync-charts'); + +export default async function resyncCharts(job: Bull.Job<{}>, done: any): Promise { + logger.info(`Resync charts...`); + + // TODO: ユーザーごとのチャートも更新する + // TODO: インスタンスごとのチャートも更新する + await Promise.all([ + driveChart.resync(), + notesChart.resync(), + usersChart.resync(), + ]); + + logger.succ(`All charts successfully resynced.`); + done(); +} diff --git a/src/queue/queues.ts b/src/queue/queues.ts index d8c09ef86e..a66a7ca451 100644 --- a/src/queue/queues.ts +++ b/src/queue/queues.ts @@ -2,6 +2,7 @@ import config from '@/config/index'; import { initialize as initializeQueue } from './initialize'; import { DeliverJobData, InboxJobData, DbJobData, ObjectStorageJobData } from './types'; +export const systemQueue = initializeQueue<{}>('system'); export const deliverQueue = initializeQueue('deliver', config.deliverJobPerSec || 128); export const inboxQueue = initializeQueue('inbox', config.inboxJobPerSec || 16); export const dbQueue = initializeQueue('db'); diff --git a/src/server/api/endpoints/admin/resync-chart.ts b/src/server/api/endpoints/admin/resync-chart.ts index b0e687333f..e01dfce1b6 100644 --- a/src/server/api/endpoints/admin/resync-chart.ts +++ b/src/server/api/endpoints/admin/resync-chart.ts @@ -1,5 +1,5 @@ import define from '../../define'; -import { driveChart, notesChart, usersChart, instanceChart } from '@/services/chart/index'; +import { driveChart, notesChart, usersChart } from '@/services/chart/index'; import { insertModerationLog } from '@/services/insert-moderation-log'; export const meta = { @@ -15,7 +15,7 @@ export default define(meta, async (ps, me) => { driveChart.resync(); notesChart.resync(); usersChart.resync(); - instanceChart.resync(); // TODO: ユーザーごとのチャートもキューに入れて更新する + // TODO: インスタンスごとのチャートもキューに入れて更新する }); diff --git a/yarn.lock b/yarn.lock index e2140e185a..449390a6a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2664,28 +2664,22 @@ character-parser@^2.2.0: dependencies: is-regex "^1.0.3" -chart.js@2.9.4: - version "2.9.4" - resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" - integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== - dependencies: - chartjs-color "^2.1.0" - moment "^2.10.2" +chart.js@3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a" + integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ== -chartjs-color-string@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" - integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== - dependencies: - color-name "^1.0.0" +chartjs-adapter-date-fns@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b" + integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw== -chartjs-color@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" - integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== +chartjs-plugin-zoom@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.1.1.tgz#8a28923a17fcb5eb57a0dc94c5113bf402677647" + integrity sha512-1q54WOzK7FtAjkbemQeqvmFUV0btNYIQny2HbQ6Awq9wUtCz7Zmj6vIgp3C1DYMQwN0nqgpC3vnApqiwI7cSdQ== dependencies: - chartjs-color-string "^0.6.0" - color-convert "^1.9.3" + hammerjs "^2.0.8" check-more-types@2.24.0, check-more-types@^2.24.0: version "2.24.0" @@ -2974,7 +2968,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.3.0, color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -3616,6 +3610,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns@2.25.0: + version "2.25.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680" + integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w== + date-fns@^2.16.1: version "2.19.0" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.19.0.tgz#65193348635a28d5d916c43ec7ce6fbd145059e1" @@ -5300,6 +5299,11 @@ gulplog@^1.0.0: dependencies: glogg "^1.0.0" +hammerjs@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1" + integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE= + har-schema@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" @@ -7383,7 +7387,7 @@ moment-timezone@^0.5.25: dependencies: moment ">= 2.9.0" -"moment@>= 2.9.0", moment@^2.10.2, moment@^2.22.2: +"moment@>= 2.9.0", moment@^2.22.2: version "2.24.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==