การแสดงผลข้อมูล JSON อย่างง่ายด้วย Grafana

สวัสดีครับ ในบทความนี้ผมจะแนะนำการใช้ Grafana ซึ่งเป็นเครื่องมือแสดงผลข้อมูล time series ในรูปแบบต่างๆ โดยจะใช้ตัวอย่างง่ายๆเป็นข้อมูล JSON จาก Node.js server เพื่อให้เห็นภาพอย่างกว้างๆและสามารถนำไปต่อยอดโดยใช้ข้อมูลจากแหล่งอื่นๆ เช่น NETPIE ได้ครับ

สิ่งที่ต้องเตรียมติดตั้งก่อนเริ่ม :
1. Node.js
2. git
และในบทความนี้จะทำบนระบบปฏิบัติการ Windows นะครับ

Let’s Start

  1. เข้าไปที่ grafana.com และกด Get Grafana เพื่อเข้าสู่หน้าดาวน์โหลด

2. เลือก Windows และกดที่ url ในกรอบสีแดงเพื่อดาวน์โหลด

3. สร้างโฟลเดอร์เตรียมไว้ แล้ว unzip ไฟล์ที่โหลดมาจาก Grafana ไว้ที่นั่น

4. ในโฟลเดอร์ Grafana เข้าไปที่ bin และรันไฟล์ grafana-server.exe (ต้องเปิดไว้ตลอด)

5. ไปที่ localhost:3000 เพื่อดูว่า Grafana เริ่มทำงานแล้ว ซึ่งเราสามารถเปลี่ยนเป็น port อื่นที่ไม่ใช่ 3000 ได้ที่ โฟลเดอร์ conf ไฟล์ defaults.ini

6. login ด้วยสิทธิ์ของ admin ด้วย user และ password คือ admin (สามารถแก้ไข user และ password ของ admin ได้ที่ conf/defaults.ini เช่นกัน)

หน้าตาตอนเริ่มต้นของ Grafana

7. จากหน้าแรกของ Grafana ตามขั้นตอนเราจะต้องมีแหล่งของข้อมูล หรือ data source ก่อนนะครับ คลิกเข้าไปที่ปุ่มสีเขียว Add data source และในตัวเลือกเราจะไม่เห็น data source ที่เป็น JSON ตามเป้าหมายที่วางไว้ต้นบทความ

ไม่มี JSON

8. เราจะต้องเพิ่ม data source ใหม่เข้าไปใน Grafana เริ่มแรกให้กลับไปที่หน้า Home โดยคลิกที่ Dashboard บนเมนูมุมบนซ้าย

9. ในส่วนของ Installed Datasources คลิกที่ None installed. Browse Grafana.net เพื่อค้นหา data source เพิ่มเติม

10. เลือก Data Source และหา SimpleJson

11. กดที่ปุ่มสีส้ม Install plugin

12. จะเห็นว่าในกรอบสีแดงมีคำสั่งในการติดตั้งอยู่ ให้ copy ไว้

13. ในโฟลเดอร์ Grafana ไปที่ bin และเปิด cmd ขึ้นมา (สามารถเปิดได้ด้วย shift+คลิกขวา > Open command window here)

14. paste คำสั่งจากข้อ 12. ลงไปใน cmd แล้ว enter

15. เมื่อติดตั้งเสร็จแล้ว จะต้อง restart grafana-server ในข้อ 4. โดยการปิดหน้าต่างนั้นแล้วรันใหม่

16. กลับไปที่หน้า Home (localhost:3000) จะเห็นว่ามี SimpleJson ขึ้นมาแล้ว

17. จากขั้นตอนที่ผ่านๆมา ทำให้เราสามารถรับข้อมูลที่เป็น JSON ได้แล้ว แต่เรายังไม่มีแหล่งของข้อมูลเลย ในบทความนี้จะใช้ fake-simple-json-datasource จาก github (https://github.com/bergquist/fake-simple-json-datasource) โดยใช้คำสั่งด้านล่างนี้ในโฟลเดอร์เริ่มต้นของเรา หรือจะเข้าไปดาวน์โหลดแบบ zip ก็ได้เช่นกันครับ

git clone https://github.com/bergquist/fake-simple-json-datasource

18. เข้าไปโฟลเดอร์ fake-simple-json-datasource เปิด cmd ขึ้นมาเพิมพ์คำสั่งด้านล่าง เพื่อติดตั้ง Node.js dependencies

npm install

19. สั่งให้ fake-simple-json-datasource ทำงานด้วยคำสั่งด้านล่าง (ทำงานอยู่ที่ port 3333 สามารถเปลี่ยนได้ในไฟล์ index.js บรรทัด 119: app.listen(3333); โดยเปลี่ยนเลข 3333 เป็น port ที่ต้องการ)

node index.js

20. กลับมาที่ Grafana เข้าไปที่ปุ่มสีเขียว Add data source เช่นเดียวกับข้อ 7. จะเห็นว่ามี SimpleJson ให้เลือกใน Type

21. กรอกข้อมูลดังนี้
- Name: ชื่อตามที่ต้องการเพื่อสื่อว่าคือแหล่งข้อมูลอะไร
- Type: SimpleJson
- Url: http://localhost:3333 (ตามข้อ 19.)

22. กดปุ่ม Add หากเชื่อมต่อ data source สำเร็จจะขึ้นแถบสีเขียวที่มีข้อความว่า “Success Data source is working” ขึ้นมาด้านล่าง

23. กลับไปที่หน้า Home (http://localhost:3000) กด New dashboard เพื่อสร้างหน้าสำหรับแสดงผลข้อมูล

24. เราจะนำข้อมูลมาแสดงผลในรูปแบบกราฟกันนะครับ เลือกที่ปุ่ม Graph ได้เลย

25. คลิกที่ Panel Title แล้ว Edit เพื่อทำการตั้งค่า data source ที่จะนำมาแสดง

26. เลือก data source ที่เป็น JSON โดยชื่อตามที่เราตั้งค่าไว้ในข้อ 21.

27. ต่อมา เลือก metric ที่จะนำมาแสดง โดยหนึ่ง data source อาจจะมี metric หรือข้อมูลหลายชุด ให้เลือกสักตัวเพื่อนำมาแสดงครับ (หรือสามารถแสดงผลหลาย metric ในกราฟเดียวกันได้โดยกดปุ่ม Add Query ครับ)

28. เราสามารถตั้งชื่อกราฟได้โดยไปที่แถบ General แล้วแก้ไข Info ที่ Title ครับ

29. กด save แล้วทำการตั้งชื่อ dashboard ของเรา เท่านี้เป็นอันเสร็จเรียบร้อยครับ

สรุปส่งท้าย

หลังจากที่ทำตามขั้นตอนจนครบแล้ว เราจะได้กราฟที่แสดงข้อมูล JSON จาก Node.js server จะสังเกตุว่าข้อมูลไม่มีการอัพเดตหรือเพิ่มขึ้นมา เนื่องจากมันเป็นการดึงข้อมูลออกมาจากไฟล์ JSON เดิมๆซ้ำๆโดยไม่มีการเปลี่ยนแปลงครับ โดยทุกครั้งที่ Grafana ร้องขอข้อมูลก็จะได้แต่ข้อมูลเดิมๆกลับมา ซึ่งในบทความต่อไปผมจะเปลี่ยนให้ Node.js server สามารถรับข้อมูลจากเซนเซอร์ DHT แล้วนำมาแสดงผลบน Grafana แบบ Real time โดยใช้ NETPIE ร่วมด้วยครับ