Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ダッシュボード作ってみた
Search
yamamotoshota
November 19, 2024
1
110
ダッシュボード作ってみた
2024/11/19 NRUG沖縄でLT発表
yamamotoshota
November 19, 2024
Tweet
Share
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Site-Speed That Sticks
csswizardry
13
920
Leading Effective Engineering Teams in the AI Era
addyosmani
7
550
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Automating Front-end Workflow
addyosmani
1371
200k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Why Our Code Smells
bkeepers
PRO
340
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
How to train your dragon (web standard)
notwaldorf
97
6.3k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. ダッシュボード作ってみた 株式会社ドリーム・アーツ 山本将大 2024年11月19日
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 自己紹介+会社紹介
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 自己紹介 株式会社ドリーム・アーツ サービス&プロダクト開発本部 SRE推進グループ 山本
将大 Yamamoto Shota 出身 勤務地 入社年度 趣味 広島 - > 福岡(大学から) 東京 2023年4月 新卒として入社 総合格闘技 読書(Audible率高め) 最近読んだ面白かった本 ・方舟⋯めちゃおもろミステリ ・三体シリーズ…特に第二部が好き
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 会社紹介 社 名 株式会社ドリーム・アーツ 東京本社
東京都渋谷区恵比寿4-20-3 恵比寿ガーデンプレイス29F 広島本社 広島県広島市中区大手町1-2-1 おりづるタワー6F 那覇 沖縄県那覇市前島3-25-1 泊ふ頭旅客ターミナルビルディング2F 石垣 沖縄県石垣市字登野城9-4 ICT文化ホール4F 関 連 会 社 夢創信息(大連)有限公司 (ドリーム・アーツ China) 設 立 1996年(平成8年)12月 事 業 概 要 大企業向けクラウド製品の企画・開発・販売 コンサルティング及びシステム開発サービスの提供 4
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 沖縄での思い出 2024年2月初頭に初めて沖縄の那覇オフィスに出張 A&Wのルートビア。美味しかった 首里城修復中だったけど見に行った。とりあえず守禮門を撮影
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. New Relicダッシュボードで手動テストを助けたい
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 背景 ・自分が担当する製品の開発では手動テストが行われる。 ・手動テストではCLIを使ってログを確認する機会が多い。
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. コンセプト テストエンジニアがNew Relic見ながらテストできるようにしたい! テストエンジニアのバックボーンは様々。 CLIが得意な人は少ない。
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 目標 誰でも簡単にログ確認できるようにしたい (できればCLIよりNew Relicが便利だと思われたい)
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 実際に作ってみた
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. どんな感じのダッシュボードになったか 条件入力 条件にあったログが出力される ログがいつどのくらいでていたのかのグラフ
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. 頑張ったところ 条件を入力してログの絞り込みを行いたい 悩んだところ ・AP選択を複数選択にしたら書き方がわからなくなった ・class.nameを入力していない状態だと絞り込みを行わないようにしたかった。
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. AP選択を複数選択にしたら書き方がわからなくなった APサーバーを複数選択可能にした host.hostname = {{ap}}
知ってるやつで試してみた。まあ無理か… host.hostname LIKE {{ap}} 悩んだ過程 知ってるやつで試してみたver.2 host.hostname IN {{ap}} 公式で、IN使うらしいって見かけた host.hostname IN ({{ap}}) AIに提案してもらった
DreamArts Confidential 2024/11/19 ©DreamArts Corporation. テキストボックスを入力していない状態だと絞り込みを行わないようにしたかった 入力されているclass.nameと一致するものがあれば絞り込む。 何も入力していなかったら絞り込まない。 テキストボックスに入力されたクラス名で絞り込む 悩んだ過程
class.name LIKE {{class_name}} (class.name LIKE {{class_name}} OR {{class_name}} = ‘’) class_nameが未入力のとき、class.nameがブランクになっているログを絞り込んで表示 class.nameに入力が無いときは絞り込みたくない… 「AIに聞きまくって上手くいくまで入力する戦法」でたどり着いた