upgrade to build with @grafana/toolkit and be compatible with v8.0+

peishaofeng commented 2 years ago

Overview

Convert to TypeScript and build with @grafana/toolkit
Be compatible with Grafan v8.0+, auto-convert DataFrame query format to TimeSeries
fix prettier/eslint errors
upgrade @grafana SDK to ~8.2.5

What this PR does / why we need it

1. use TypeScript and @grafana/toolkit

Convert to TypeScript to add syntax checking, also replace Babel with official @grafana/toolkit build tool, so plugin can be released with bundled module.js

2. optimize src/ folder

move Chart.min.js to src/external
move template HTMLs to src/partials according Grafana convention
move plugin.json under src/
add LICENSE and CHANGELOG.md according grafana-toolkit suggestion, all change list copied from README.md

3. compatible with Grafana v6.7+ to v8.2+

This panel display empty result in v8.0+ because Grafana introduce new DataFrame as query result format and remove TimeSeries support since v8.0, need to convert DataFrame to TimeSeries in v8.0+, data_processor.ts is used to perform format conversion, i copied this code snippet from official Graph panel and made minor modification.

Special notes for your reviewer

1. auto-convert data format according Grafana version

for v6.0+ keep existing data format, no conversion.

for v7.0 or higher made changes below:

listen on new event PanelEvents.dataFramesReceived for DataFrame format
convert DataFrame to TimeSeries format with DataProcessor
copy data_processor.ts from Grafana graph panel plugin with minor modification

${GRAFANA}/public/app/plugins/panel/graph/data_processor.ts

I have verified the same plugin package on Grafana v6.7.1, v7.4.1, v8.2.5, it works fine.

2. SDK 8.3.0 report fail

@grafana SDK 8.3.0 report error, so i use 8.2.5 instead

✖ PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
  Trace: Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Does this PR introduce a user-facing change?

NONE

snuids commented 2 years ago

Lot of changes. Looks nice. I will merge without checking. We should probably create a 1.5 version. Do you want to join this repository commiters. I don't have time to work on it for the moment.

peishaofeng commented 2 years ago

We should probably create a 1.5 version.

YES, prior v6.7 might not be supported due to @grafana/data & @grafana/runtime package import, these two packages seem to emerge since v6.7

Do you want to join this repository commiters

I'd like join to make this panel better

snuids commented 2 years ago

Welcome new commiter from China :-) You should have received the invitation.

Where are you based ? I worked in china a few years ago in Kunming and Wuhan. I am now based in Brussels Belgium.

peishaofeng commented 2 years ago

Thanks for your invitation.

I live and work in TianJin, a city very close to BeiJing, I found this bug while migrating inner-use Grafana to v8.0+, it is also my first PR accepted, be glad to co-work with you to make this plug useful to all Grafana users.

snuids / grafana-radar-panel