Locust : カスタマイズ可能な統計ページのパーセンタイル表示機能

Locust OSSプロジェクトに提出した Pull Request #2550 の内容をまとめた スライドです。

このPRでは、統計ページに表示するパーセンタイルをカスタマイズできる機能を追加し、モダンUIとの整合性を改善しました。
フィードバックを受けて Web UI へのカラム選択機能も実装しています。

内容はスクリプトとChatGPTを活用して自動生成されたものです。

Transcript

1. Locust PR #2550 カスタマイズ可能な統計ページのパーセンタイル表示機能 Author: @FooQoo Date: 2024-01-14 〜 2024-01-16 PR #2550 on GitHub Repository: locustio/locust produced by pr2slide 1
2. Locustとは？ Python製の負荷テスト・性能試験ツール シナリオはPythonで記述、カスタマイズ性が高い Web UIでリアルタイムモニタリングも可能 スケーラブルで分散実行も容易 公式ドキュメント produced by pr2slide 2
3. このPRの背景 なぜこの変更が必要だったか？ 統計ページで表示されるパーセンタイルが固定（90%、99%）で、ユーザーが変更で きなかった チャートページでは PERCENTILES_TO_CHART により表示の制御が可能 統計ページとの整合性が取れておらず、UXに一貫性がなかった produced by pr2slide 3
4. 解決した課題とアプローチ 解決した課題 統計ページで表示するパーセンタイルをユーザーが指定可能に チャートページと同様に、統一された構成管理を実現 統計ページの列構成をWeb UIから切り替え可能に 採用したアプローチ 新しい変数 PERCENTILES_TO_STATISTICS を導入 modern UI限定でパーセンタイルの動的表示を実装 カラムの表示切替UIをReactフックで提供 produced by pr2slide 4
5. 実装内容とコード変更 Backend: パーセンタイル設定の導入 +PERCENTILES_TO_STATISTICS = [0.95, 0.99] +for percentile in stats.PERCENTILES_TO_STATISTICS: + if not is_valid_percentile(percentile): + logging.error("value between 0 < percentile < 1") + sys.exit(1) 統一されたバリデーションロジックも追加。 produced by pr2slide 5
6. 実装内容とコード変更（2） Backend: APIレスポンスにパーセンタイルを動的に追加 +response_time_percentiles = { + f"response_time_percentile_{percentile}": self.get_response_time_percentile(percentile) + for percentile in PERCENTILES_TO_STATISTICS +} ... +**response_time_percentiles これにより、任意のパーセンタイル列が返されるように。 produced by pr2slide 6
7. 実装内容とコード変更（3） Web UI: 統計表にパーセンタイル列を表示 const percentilesToStatisticsRows = swarmTemplateArgs.percentilesToStatistics.map( percentile => ({ title: `${percentile * 100}%ile (ms)`, key: `responseTimePercentile${percentile}`, }) ); const tableStructure = [ ... ...percentilesToStatisticsRows, ]; stateからUI構造を生成し、拡張性を確保。 produced by pr2slide 7
8. 実装内容とコード変更（4） Web UI: カラム表示切替 UI の追加 produced by pr2slide 8
9. 実装内容とコード変更（5） React Hook: 表示列の選択状態管理 const [selectedColumns, setSelectedColumns] = useState<string[]>( defaultStructure.map(column => column.key) ); const filteredStructure = structure.filter(s => selectedColumns.includes(s.key)); 再利用可能な useSelectViewColumns を導入 produced by pr2slide 9
10. 技術スタックと利用技術 React (TypeScript) UI表示とカラム選択UI Redux 状態管理 Vitest + Testing Library 単体テスト・UIテスト Python + Gevent Locust本体の負荷生成エンジン Jinja2 Web UIへの値伝搬 produced by pr2slide 10
11. 開発の進め方とコミット構成 バリデーション追加 → 変数名修正 統計列のUIレンダリング処理追加 Web UI列選択機能追加（新コンポーネントとHook） 単体テストと統合テストを追加 フィードバックを反映し、Hook構造を改善 produced by pr2slide 11
12. レビューフィードバックと対応 @cyberw 「Median は分かりやすいからデフォルト表示のままでいいのでは？」 → 50%ile を削除し、 Median 表記を維持 「変数名 _TO_STATICS は変。buildも通ってない」 → PERCENTILES_TO_STATISTICS に修正し、 ruff で整形 produced by pr2slide 12
13. レビューフィードバックと対応（2） @andrewbaldwin44 Column Control UI、いい感じ！Table コンポーネントを変更しない実装が良い → useSelectViewColumns Hook で filteredStructure を返す設計に変更 → Table 側には一切変更を加えずに対応！ 最終コメント： Looks awesome, nice work! produced by pr2slide 13
14. 作業のタイムライン 2024-01-14: PR作成、基本機能追加 2024-01-15 AM: 名前修正、バリデーション追加 2024-01-15 PM: Web UI機能実装＆プレビュー 2024-01-15 深夜: Hook構造化、テスト追加 2024-01-16: レビュー完了、マージ直前へ produced by pr2slide 14
15. 成果まとめ 統計ページの表示パーセンタイルをカスタマイズ可能に チャートとの整合性と一貫性を実現 Web UIで列表示を切り替えられる UX を提供 バリデーション、テスト、構成の一貫性を確保 produced by pr2slide 15
16. 今後の展望・改善ポイント PERCENTILES_TO_STATISTICS のUI側制御を runtime configurable に？ legacy UI との整合性は？ → 切り離しの検討 パーセンタイル以外の指標（例: percent fail）表示切替も候補に 既存定数の共通化・命名整理 produced by pr2slide 16
17. ご清聴ありがとうございました！ PR #2550 の全体を見る produced by pr2slide produced by pr2slide 17