flant / grafana-statusmap

Grafana panel plugin to visualize status of multiple objects over time
MIT License
831 stars 43 forks source link

statusmap (version 0.3.4) plugin compatibility with Grafana 7.3.6 #176

Open zameeransari opened 3 years ago

zameeransari commented 3 years ago

We have upgraded our Grafana from 6.7.2 to 7.3.6, and statusmap plugin (version 0.3.4) is widely used in our dashboards. They all went blank. As a workaround I'm replacing statusmap with heatmap plugin. Is this known compatibility issue with Grafana 7.3.x? Our Data source is Azure Data Explorer and Data format is time series.

Also tried with immediate previous version, but no luck. Please help.

diafour commented 3 years ago

Hello! I've done a quick test of v0.3.4 and saw no issue in Grafana 7.3.6 and switch to 7.4.0. It is known that v0.3.4 is not compatible with 7.4.x (fixed in #172). I'll redo a test in 7.3.6 before cutting v0.4.0.

diafour commented 3 years ago

I have no issues with v0.3.4 in Grafana 7.3.6. Can you please check that plugin in your setup works with random values from "--Grafana--" datasource?

Снимок экрана 2021-02-17 в 13 30 58

zameeransari commented 3 years ago

Statusmap plugin is throwing series of browser exceptions while it is using Azure Data Explorer as data source:

Error: <g> attribute transform: Expected number, "translate(NaN,0)".
deprecationWarning.ts:14 [Deprecation warning] kbn.ts: kbn.secondsToHms() is deprecated. Use @grafana/data instead
w @ deprecationWarning.ts:14
secondsToHms @ kbn.ts:36
calculateInterval @ module.ts:323
updateTimeRange @ module.ts:281
Promise.then (async)
value @ metrics_panel_ctrl.ts:104
s.emit @ index.js:202
value @ emitter.ts:29
value @ PanelModel.ts:278
value @ DashboardModel.ts:267
(anonymous) @ actions.ts:509
c @ runtime.js:45
(anonymous) @ runtime.js:271
forEach.e.<computed> @ runtime.js:97
L @ app.f6aff061b5e274f402d0.js:2
i @ app.f6aff061b5e274f402d0.js:2
Promise.then (async)
L @ app.f6aff061b5e274f402d0.js:2
i @ app.f6aff061b5e274f402d0.js:2
(anonymous) @ app.f6aff061b5e274f402d0.js:2
(anonymous) @ app.f6aff061b5e274f402d0.js:2
(anonymous) @ actions.ts:488
(anonymous) @ index.js:8
i @ store.ts:27
value @ DashboardModel.ts:260
value @ TimeSrv.ts:216
n.onRefresh @ DashNavTimeControls.tsx:62
y @ react-dom.production.min.js:15
w @ react-dom.production.min.js:15
(anonymous) @ react-dom.production.min.js:16
S @ react-dom.production.min.js:16
k @ react-dom.production.min.js:17
_ @ react-dom.production.min.js:17
T @ react-dom.production.min.js:17
jr @ react-dom.production.min.js:81
se @ react-dom.production.min.js:285
Ar @ react-dom.production.min.js:83
Tr @ react-dom.production.min.js:84
kr @ react-dom.production.min.js:84
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
ue @ react-dom.production.min.js:285
Er @ react-dom.production.min.js:82
attr.js:17 Error: <g> attribute transform: Expected number, "translate(NaN,10)".
(anonymous) @ attr.js:17
each @ each.js:5
attr @ attr.js:53
addYAxis @ rendering.ts:273
addStatusmapCanvas @ rendering.ts:344
render @ rendering.ts:767
onRender @ rendering.ts:125
s.emit @ index.js:202
value @ emitter.ts:29
value @ panel_ctrl.ts:102
(anonymous) @ panel_directive.ts:64
(anonymous) @ angular.js:20566
p @ angular.js:6428
(anonymous) @ angular.js:6707
setTimeout (async)
i.defer @ angular.js:6705
a @ angular.js:20564
(anonymous) @ panel_directive.ts:62
s.emit @ index.js:181
value @ emitter.ts:29
value @ PanelChromeAngular.tsx:149
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ec @ react-dom.production.min.js:214
enqueueSetState @ react-dom.production.min.js:133
O.setState @ react.production.min.js:13
n._onResize @ index.esm.js:302
(anonymous) @ index.esm.js:78
(anonymous) @ index.esm.js:77
requestAnimationFrame (async)
a @ index.esm.js:34
s @ index.esm.js:73
scroll (async)
c @ index.esm.js:54
addResizeListener @ index.esm.js:155
value @ index.esm.js:329
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ue @ react-dom.production.min.js:285
Er @ react-dom.production.min.js:82
angular.js:14800 TypeError: Cannot read property 'from' of undefined
at StatusmapRenderer.addXAxis (rendering.ts:183)
at StatusmapRenderer.addStatusmapCanvas (rendering.ts:354)
at StatusmapRenderer.render (rendering.ts:767)
at StatusmapRenderer.onRender (rendering.ts:125)
at s.emit (index.js:202)
at e.value (emitter.ts:29)
at StatusHeatmapCtrl.value (panel_ctrl.ts:102)
at panel_directive.ts:64
at angular.js:20566
at p (angular.js:6428)
(anonymous) @ angular.js:14800
(anonymous) @ angular.js:11218
(anonymous) @ angular.js:20569
p @ angular.js:6428
(anonymous) @ angular.js:6707
setTimeout (async)
i.defer @ angular.js:6705
a @ angular.js:20564
(anonymous) @ panel_directive.ts:62
s.emit @ index.js:181
value @ emitter.ts:29
value @ PanelChromeAngular.tsx:149
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ec @ react-dom.production.min.js:214
enqueueSetState @ react-dom.production.min.js:133
O.setState @ react.production.min.js:13
n._onResize @ index.esm.js:302
(anonymous) @ index.esm.js:78
(anonymous) @ index.esm.js:77
requestAnimationFrame (async)
a @ index.esm.js:34
s @ index.esm.js:73
scroll (async)
c @ index.esm.js:54
addResizeListener @ index.esm.js:155
value @ index.esm.js:329
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ue @ react-dom.production.min.js:285
Er @ react-dom.production.min.js:82
angular.js:14800 TypeError: Cannot read property 'from' of undefined
at StatusmapRenderer.addXAxis (rendering.ts:183)
at StatusmapRenderer.addStatusmapCanvas (rendering.ts:354)
at StatusmapRenderer.render (rendering.ts:767)
at StatusmapRenderer.onRender (rendering.ts:125)
at s.emit (index.js:202)
at e.value (emitter.ts:29)
at StatusHeatmapCtrl.value (panel_ctrl.ts:102)
at panel_directive.ts:64
at angular.js:20566
at p (angular.js:6428) "Possibly unhandled rejection: {}"
(anonymous) @ angular.js:14800
(anonymous) @ angular.js:11218
l @ angular.js:17199
$digest @ angular.js:18351
$apply @ angular.js:18649
(anonymous) @ angular.js:20574
p @ angular.js:6428
(anonymous) @ angular.js:6707
setTimeout (async)
i.defer @ angular.js:6705
a @ angular.js:20564
(anonymous) @ panel_directive.ts:62
s.emit @ index.js:181
value @ emitter.ts:29
value @ PanelChromeAngular.tsx:149
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ec @ react-dom.production.min.js:214
enqueueSetState @ react-dom.production.min.js:133
O.setState @ react.production.min.js:13
n._onResize @ index.esm.js:302
(anonymous) @ index.esm.js:78
(anonymous) @ index.esm.js:77
requestAnimationFrame (async)
a @ index.esm.js:34
s @ index.esm.js:73
scroll (async)
c @ index.esm.js:54
addResizeListener @ index.esm.js:155
value @ index.esm.js:329
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ue @ react-dom.production.min.js:285
Er @ react-dom.production.min.js:82
9rendering.ts:672 Uncaught TypeError: Cannot read property 'invert' of undefined
at StatusmapRenderer.emitGraphHoverEvent (rendering.ts:672)
at StatusmapRenderer.onMouseMove (rendering.ts:639)
at HTMLDivElement.dispatch (jquery.js:5429)
at HTMLDivElement.b.handle (jquery.js:5233)
emitGraphHoverEvent @ rendering.ts:672
onMouseMove @ rendering.ts:639
dispatch @ jquery.js:5429
b.handle @ jquery.js:5233
deprecationWarning.ts:14 [Deprecation warning] kbn.ts: kbn.secondsToHms() is deprecated. Use @grafana/data instead
w @ deprecationWarning.ts:14
secondsToHms @ kbn.ts:36
calculateInterval @ module.ts:323
updateTimeRange @ module.ts:281
Promise.then (async)
value @ metrics_panel_ctrl.ts:104
s.emit @ index.js:202
value @ emitter.ts:29
value @ PanelModel.ts:278
n.onRunQuery @ QueryEditorRow.tsx:161
y @ react-dom.production.min.js:15
w @ react-dom.production.min.js:15
(anonymous) @ react-dom.production.min.js:16
S @ react-dom.production.min.js:16
k @ react-dom.production.min.js:17
_ @ react-dom.production.min.js:17
T @ react-dom.production.min.js:17
jr @ react-dom.production.min.js:81
se @ react-dom.production.min.js:285
Ar @ react-dom.production.min.js:83
Tr @ react-dom.production.min.js:84
kr @ react-dom.production.min.js:84
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
ue @ react-dom.production.min.js:285
Er @ react-dom.production.min.js:82
4rendering.ts:672 Uncaught TypeError: Cannot read property 'invert' of undefined
at StatusmapRenderer.emitGraphHoverEvent (rendering.ts:672)
at StatusmapRenderer.onMouseMove (rendering.ts:639)
at HTMLDivElement.dispatch (jquery.js:5429)
at HTMLDivElement.b.handle (jquery.js:5233)
emitGraphHoverEvent @ rendering.ts:672
onMouseMove @ rendering.ts:639
dispatch @ jquery.js:5429
b.handle @ jquery.js:5233

It is working fine with MS-SQL data source. There could be possibility of incompatibility of statusmap with Azure Data Explorer plugin.

@diafour Any thoughts?

diafour commented 3 years ago

So here is the answer: https://github.com/flant/grafana-statusmap/issues/143#issuecomment-785338025. Somehow Azure datasource returns data in 'table' format instead of required 'timeseries'.

zameeransari commented 3 years ago

@diafour Is there any update on this issue?

diafour commented 3 years ago

@zameeransari Sorry, I have no time for the plugin improvements until June.