Grafana_Claude_Code

Transcript

1. [Session-A-08] GrafanaのGit Sync機能を使って生成AIと共に ダッシュボードを開発してみた
2. 所属 クラスメソッド株式会社
 クラウド事業本部コンサルティング部
 ソリューションアーキテクト 趣味 ラジオ、散歩、山 好きなAWSサービス Amazon Managed Grafana 与那嶺 創（よなみね そう） 自己紹介 ピザのアイコンでブログ書いてます
3. アジェンダ 何を解決したかったのか？ GrafanaのAPI GrafanaのGitSync機能 やってみた やってみた所感
4. 何をしたかったのか？ GrafanaをClaude Codeで操作できないか？
5. データソース毎にクエリ言語が違う Grafanaのオプションが多すぎて作りたいダッシュボードを作る のにどの機能を使えばいいか分らない ダッシュボード構築の時間を削減したい なぜ？ これを普段から使ってるClaude Codeと 組み合わせて解決できないか？ Grafana使う時の課題
6. 何が必要？ ダッシュボードをコード化する リモート↔︎ローカル間でコードを受け渡し リモートのコードをダッシュボードに反映
7. コード化
8. 実は...Grafanaのダッシュボードは JSONで定義されているんです！！ 意外と他の可視化ツールにないメリットかも？
10. ということで、コード化はクリア！
11. リモート↔︎ローカル間のコード管理
12. コード管理の課題 コードをローカル環境のClaude Codeで操作したい そのためには？ どこかでコードを管理する ローカルにコードを落とす ローカルの変更内容をリモートにも反映させる
13. GrafanaのAPIを利用する
14. dashboard.json v1 取得 APIリクエスト
15. dashboard.json v1→v2 dashboard.json v2 編集 v1→v2 アップロード
17. よさそう...だけど...
18. dashboard.json v1→v2 dashboard.json v1 別の人がUI上から ダッシュボードを編集 問題点
19. dashboard.json v2 取得 dashboard.json v1→v2 その都度差分が無いか確認が必要 （実質コードが管理されていない状態） 問題点
20. 問題点 dashboard.json v1→v2 dashboard.json v2 編集 v1→v2 アップロード どんな変更されるか 分らない コードを編集しても 実際にダッシュボードを見るまで変更点が分かりづらい
22. 今年、Grafana v12が発表されました！！ その中で Git Sync という機能がプレビューリリース されました
23. どんな機能？ コードと同じようにダッシュボードを管理できます。 ダッシュボードはGitでバージョン管理され、PRワークフ ローを通じて編集されるため、変更を常に追跡できます ※ドキュメントより
24. 簡単にいうと GrafanaのダッシュボードjsonをGitHubと同期できる！
25. dashboard.json (ほぼ)同期 イメージ図
26. dashboard.json (ほぼ)同期 ここが自動的に同期してるのがGood!!
27. demo_dashboard.json (ほぼ)同期 更新 コード更新の数十秒後にはGrafanaの ダッシュボードに反映される
28. このコードをローカル環境のClaude Codeで操作したい そのためには？ どこかでコードを管理する ローカルにコードを落とす 変更内容をリモートと合わせる これが解決できそう!?
29. やってみる まずはダッシュボードをひとつ作成
30. リポジトリをcloneして、あとはClaude Codeにお任せ
31. 大事なこと Claude Codeにお任せしますが、 「いい感じにダッシュボード作って！」 だとそれっぽいダッシュボードは作られるかもしれませんが、使える ダッシュボードにはならないと思います。（たぶん） まずは何を達成したいのか、目的や利用シーンを考えて ラフでもいいので図を作って渡すと良いダッシュボードが作られます
32. こんな感じ→ のラフ図を作って渡してみる (今回はAWSのコスト分析ダッシュボード) これを文字で説明するのは難しい 図で渡す方が良いインプットになる
33. Claude Codeに渡すラフ図で意識していること パネルには得たい情報を入れる グラフの形式を入れる Grafanaで表現できそうな内容にする(閾値を決めて着色するなど) 一発で完璧なダッシュボードができるとは思わない
34. > [Image #1]こちらの画像をベースにdemo-dashboard.jsonを編集して AWSのコストを分析するダッシュボードを作成してください。 編集を終えたらdevelopにpushしてmainにプルリクを出してください。 プロンプト
35. #develop #main 編集 (New Branch) プルリクエスト プルリクエストの作成まではClaude Codeにやってもらうのが良さそう 人間がダッシュボードのコード見ても良し悪しがわからない
36. #develop プルリクエスト #main とはいえ... プルリクエストでコードの差分を見ても良し悪しが判断できない ダッシュボードに反映してから確認するしかない？
37. #develop プルリクエスト 変更前の ダッシュボード 変更後の ダッシュボード プレビュー機能 #main こんなのがあったら嬉しいのにな...
38. それ、あるんです。
39. プルリクエストプレビュー機能
40. 全てのパネルでエラーが...
41. クエリでエラーが出てた
42. 何度か0からClaude Codeでダッシュボード作ってみたが エラーが出たり出なかったり。 大体はデータソースの選択ミスかクエリの構文エラー
43. > クエリでエラーが出ています。 まずは実際にaws cliでathenaのクエリを実行して、結果が返ってく ることを確認してからダッシュボードに適用してdevelopブランチに pushしてmainにプルリクエストを出してください。 最もうまくいった方法
44. どちらにもアクセスできる
45. ダッシュボードに適用 期待するレスポンス 期待するレスポンスを受け取ってから ダッシュボードに反映した方がエラーが少ない
47. 変数が入っていなかった
48. かなりいい感じじゃないか？？ ここから、実際にダッシュボードを運用しながら修正を繰り返す
49. 最終的にこんな感じに なりました
50. やってみて学んだこと ラフ図でいいのでインプットとなる図を書いた方がいい クエリの構文エラーが多かったので、データソースに直 接クエリできる場合は事前にクエリするとエラーが減る プルリクのプレビュー機能は細かい修正は分かりづらい 一度では絶対に良いダッシュボードは作れないので、 ダッシュボードの運用→改善のライフサイクルを回す
51. +α Grafana Git syncとClaude Codeだけではなく Grafana MCPも合わせると、ダッシュボード構築が捗るかも！？ https://speakerdeck.com/hamadakoji/grafana-mcpsabaniyoruaiezientojing-you- denografanadatusiyubododong-de-sheng-cheng
52. 一番大事なこと Git Syncは実験的な機能なので、実稼働環境 での使用はお勧めされていません！！！
53. おしまい