From 9426750a4622dfe94e00afcd35e504f8a54457d2 Mon Sep 17 00:00:00 2001 From: takkaO_Work Date: Thu, 19 May 2022 10:31:29 +0900 Subject: [PATCH 1/2] [fix] fix custom precision bug - fix custom precision bug (#128, #139) - change date library (moment -> dayjs) - update some packages - add dayjs library - remove moment library --- package.json | 15 +++++------ src/canvas-metric.ts | 13 +++++++--- src/module.ts | 60 +++++++++++++++++++++++++++++++++++--------- yarn.lock | 31 +++++++++++++++++------ 4 files changed, 89 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 78c8f87..6b84abf 100644 --- a/package.json +++ b/package.json @@ -22,13 +22,14 @@ "url": "https://github.com/NatelEnergy/grafana-discrete-panel.git" }, "devDependencies": { - "@types/grafana": "github:CorpGlory/types-grafana.git", - "@types/lodash": "latest", - "jquery": "^3.2.1", - "lodash": "^4.17.10", - "moment": "^2.22.1", "@grafana/data": "latest", "@grafana/toolkit": "latest", - "@grafana/ui": "latest" - } + "@grafana/ui": "latest", + "@types/grafana": "github:CorpGlory/types-grafana.git", + "@types/lodash": "^4.14.182", + "dayjs": "^1.11.2", + "jquery": "^3.2.1", + "lodash": "^4.17.10" + }, + "dependencies": {} } diff --git a/src/canvas-metric.ts b/src/canvas-metric.ts index ce18bff..136c901 100644 --- a/src/canvas-metric.ts +++ b/src/canvas-metric.ts @@ -1,7 +1,14 @@ import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk'; /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */ -import moment from 'moment'; +//import moment from 'moment'; +import dayjs, { extend } from 'dayjs'; +import duration from 'dayjs/plugin/duration'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import utc from 'dayjs/plugin/utc'; +extend(duration); +extend(relativeTime); +extend(utc); import $ from 'jquery'; @@ -72,7 +79,7 @@ export class CanvasPanelCtrl extends MetricsPanelCtrl { let time = ''; if (this.mouse.position != null) { - time = this.dashboard.formatDate(moment(this.mouse.position.ts)); + time = this.dashboard.formatDate(dayjs(this.mouse.position.ts)); } ctx.fillStyle = '#999999'; @@ -237,7 +244,7 @@ export class CanvasPanelCtrl extends MetricsPanelCtrl { } else { const min = Math.min(this.mouse.down.ts, up.ts); const max = Math.max(this.mouse.down.ts, up.ts); - const range = { from: moment.utc(min), to: moment.utc(max) }; + const range = { from: dayjs.utc(min), to: dayjs.utc(max) }; this.mouse.position = up; this.onMouseSelectedRange(range, evt); } diff --git a/src/module.ts b/src/module.ts index c8b012f..d467663 100644 --- a/src/module.ts +++ b/src/module.ts @@ -22,7 +22,14 @@ import kbn from 'grafana/app/core/utils/kbn'; import appEvents from 'grafana/app/core/app_events'; /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */ -import moment from 'moment'; +//import moment from 'moment'; +import dayjs, { extend } from 'dayjs'; +import duration from 'dayjs/plugin/duration'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import utc from 'dayjs/plugin/utc'; +extend(duration); +extend(relativeTime); +extend(utc); const grafanaColors = [ '#7EB26D', @@ -255,7 +262,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { body += info.count + ' times
for
'; } - body += this.formatDuration(moment.duration(info.ms)); + body += this.formatDuration(dayjs.duration(info.ms)); if (info.count > 1) { body += '
total'; @@ -499,9 +506,39 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { let limit = false; for (const o of this.panel.timeOptions) { - dir[o.value] = parseInt(duration.as(o.value), 10); + switch(o.value) { + case "years": + dir[o.value] = duration.years(); + break; + case "months": + dir[o.value] = duration.months(); + break; + case "weeks": + dir[o.value] = duration.weeks(); + break; + case "days": + dir[o.value] = duration.days(); + break; + case "hours": + dir[o.value] = duration.hours(); + break; + case "minutes": + dir[o.value] = duration.minutes(); + break; + case "seconds": + dir[o.value] = duration.seconds(); + break; + case "milliseconds": + dir[o.value] = duration.milliseconds(); + break; + default: + dir[o.value] = 0; + break; + } + //dir[o.value] = 0; + //dir[o.value] = parseInt(duration['$d'][o.value], 10); hasValue = dir[o.value] || hasValue; - duration.subtract(moment.duration(dir[o.value], o.value)); + duration.subtract(dayjs.duration(dir[o.value], o.value)); limit = this.panel.timePrecision.value === o.value || limit; // always show a value in case it is less than the configured @@ -510,7 +547,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { break; } } - + const rs = Object.keys(dir).reduce((carry, key) => { const value = dir[key]; if (!value) { @@ -519,7 +556,6 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { key = value < 2 ? key.replace(/s$/, '') : key; return `${carry} ${value} ${key},`; }, ''); - return rs.substr(0, rs.length - 1); } @@ -529,7 +565,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { disp += ' ('; let hassomething = false; if (this.panel.showLegendTime) { - disp += this.formatDuration(moment.duration(info.ms)); + disp += this.formatDuration(dayjs.duration(info.ms)); hassomething = true; } @@ -586,10 +622,10 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { let body = '
' + val + '
'; body += '
'; - body += this.dashboard.formatDate(moment(from), timeformat) + '
'; + body += this.dashboard.formatDate(dayjs(from), timeformat) + '
'; body += 'to
'; - body += this.dashboard.formatDate(moment(to), timeformat) + '

'; - body += this.formatDuration(moment.duration(time)) + '
'; + body += this.dashboard.formatDate(dayjs(to), timeformat) + '

'; + body += this.formatDuration(dayjs.duration(time)) + '
'; body += '
'; let pageX = 0; @@ -616,7 +652,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { } getCorrectTime(ts: number) { - const from = moment(this.range.from).valueOf(); + const from = dayjs(this.range.from).valueOf(); return ts < from ? from : ts; } @@ -704,7 +740,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { const pt = this.hoverPoint; if (pt && pt.start) { - const range = { from: moment.utc(pt.start), to: moment.utc(pt.start + pt.ms) }; + const range = { from: dayjs.utc(pt.start), to: dayjs.utc(pt.start + pt.ms) }; this.timeSrv.setTime(range); this.clear(); } diff --git a/yarn.lock b/yarn.lock index a03ebed..6833e27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1686,7 +1686,7 @@ "@types/grafana@github:CorpGlory/types-grafana.git": version "4.6.3" - resolved "https://codeload.github.com/CorpGlory/types-grafana/tar.gz/c58c08dc33585cc234f4d69013616edc05760e21" + resolved "https://codeload.github.com/CorpGlory/types-grafana/tar.gz/4beede5fa0e5bdebdb23b09e4e1e214dcc4c267f" "@types/hoist-non-react-statics@3.3.1": version "3.3.1" @@ -1792,10 +1792,10 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== -"@types/lodash@latest": - version "4.14.165" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f" - integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg== +"@types/lodash@^4.14.182": + version "4.14.182" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2" + integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q== "@types/mime@*": version "2.0.3" @@ -4462,6 +4462,11 @@ date-fns@^1.23.0: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== +dayjs@^1.11.2: + version "1.11.2" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5" + integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw== + debug@=3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" @@ -7316,11 +7321,16 @@ jest@^25: import-local "^3.0.2" jest-cli "^25.5.4" -jquery@3.5.1, jquery@^3.2.1: +jquery@3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5" integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg== +jquery@^3.2.1: + version "3.6.0" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" + integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== + js-base64@^2.1.8: version "2.6.4" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" @@ -7709,11 +7719,16 @@ lodash@4.17.19: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b" integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== -lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10: +lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== +lodash@^4.17.10: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + log-symbols@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4" @@ -8104,7 +8119,7 @@ moment@2.24.0: resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg== -moment@2.x, moment@^2.22.1: +moment@2.x: version "2.29.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== From c057890e10954fc25807abed8cdef232267cb1ac Mon Sep 17 00:00:00 2001 From: takkaO_Work Date: Thu, 2 Jun 2022 14:54:17 +0900 Subject: [PATCH 2/2] [fix] unexpected error when select time range --- package.json | 1 + src/canvas-metric.ts | 4 ++-- src/module.ts | 4 ++-- yarn.lock | 5 +++++ 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6b84abf..69c41af 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@types/grafana": "github:CorpGlory/types-grafana.git", "@types/lodash": "^4.14.182", "dayjs": "^1.11.2", + "moment": "^2.22.1", "jquery": "^3.2.1", "lodash": "^4.17.10" }, diff --git a/src/canvas-metric.ts b/src/canvas-metric.ts index 136c901..b730ec2 100644 --- a/src/canvas-metric.ts +++ b/src/canvas-metric.ts @@ -1,7 +1,7 @@ import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk'; /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */ -//import moment from 'moment'; +import moment from 'moment'; import dayjs, { extend } from 'dayjs'; import duration from 'dayjs/plugin/duration'; import relativeTime from 'dayjs/plugin/relativeTime'; @@ -244,7 +244,7 @@ export class CanvasPanelCtrl extends MetricsPanelCtrl { } else { const min = Math.min(this.mouse.down.ts, up.ts); const max = Math.max(this.mouse.down.ts, up.ts); - const range = { from: dayjs.utc(min), to: dayjs.utc(max) }; + const range = { from: moment.utc(min), to: moment.utc(max) }; this.mouse.position = up; this.onMouseSelectedRange(range, evt); } diff --git a/src/module.ts b/src/module.ts index d467663..d9913b1 100644 --- a/src/module.ts +++ b/src/module.ts @@ -22,7 +22,7 @@ import kbn from 'grafana/app/core/utils/kbn'; import appEvents from 'grafana/app/core/app_events'; /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */ -//import moment from 'moment'; +import moment from 'moment'; import dayjs, { extend } from 'dayjs'; import duration from 'dayjs/plugin/duration'; import relativeTime from 'dayjs/plugin/relativeTime'; @@ -740,7 +740,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl { const pt = this.hoverPoint; if (pt && pt.start) { - const range = { from: dayjs.utc(pt.start), to: dayjs.utc(pt.start + pt.ms) }; + const range = { from: moment.utc(pt.start), to: moment.utc(pt.start + pt.ms) }; this.timeSrv.setTime(range); this.clear(); } diff --git a/yarn.lock b/yarn.lock index 6833e27..16bbe6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8124,6 +8124,11 @@ moment@2.x: resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== +moment@^2.22.1: + version "2.29.3" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3" + integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw== + monaco-editor@*: version "0.21.2" resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.21.2.tgz#37054e63e480d51a2dd17d609dcfb192304d5605"