yasithdev opened a new pull request, #230: URL: https://github.com/apache/airavata-portals/pull/230
## Summary Replaces the cluttered Experiment Statistics admin page (`/experiment-statistics`) with a single cohesive "filter-and-find" interface led by an interactive multi-line time-series graph of gateway experiment activity. The page now leads with the graph and its filters: - **Top-level multi-line time-series graph** with one line per experiment type — all, created, running, completed, cancelled, failed. X axis is time buckets across the selected range; Y axis is count. - **Inline filter bar**: a date-range picker plus **Last 24 hours / Last week / Last 30 days** shortcuts, and an "Add filter" menu for optional scoping filters (username / application / hostname) that scope both the graph and the drill-down list. - **Legend doubles as on/off toggles** for each of the six series, in the series colors. - A slim secondary **"Find an experiment"** card (the by-experiment-id / by-job-id lookup, which is unique to this page) and a compact **per-status experiments list** with the existing experiment-detail tabs/drill-down, below the graph. The `/experiment-statistics` route and name are unchanged. ## Client-side bucketing There is no time-series endpoint — `ExperimentStatistics.get` returns aggregate counts for a single `[fromTime, toTime]` window. To draw lines over time, the selected range is bucketed into N intervals client-side and one aggregate request is issued per bucket, all concurrently via `Promise.all`, plus one full-range request that feeds the drill-down list and totals. Granularity adapts to the range length (hourly / daily / weekly) and the bucket count is capped at 30 to keep long ranges responsive. A loading overlay covers the chart while requests are in flight. ## Charting decision **No charting dependency was added.** The chart is a dependency-free, hand-rolled SVG component (`ExperimentStatisticsChart.vue`): responsive via `viewBox`, with axes/gridlines, one `<polyline>` per series in the series color, a hover tooltip showing the bucket time and per-series counts, and a legend that doubles as the on/off toggles. Series colors use the existing shadcn design tokens (`--primary`, `--chart-3`, `--warning`, `--success`, `--muted-foreground`, `--destructive`) for all/created/running/completed/cancelled/failed. ## Removed vs kept - **Removed**: the separate "Load experiment details" lookup card, the "Filter Options" card with its scattered controls, and the row of six stat cards (the now-unused `ExperimentStatisticsCard.vue` is deleted). - **Kept (relocated/slimmed)**: the by-experiment-id / by-job-id lookup (it is the only way to reach admin-side experiment details, so it is preserved as a compact "Find an experiment" card), the per-status experiments drill-down list, and the experiment-detail tabs. ## Test plan - `./build_js.sh` — all 8 JS packages build cleanly. - `./lint_js.sh` — all packages lint cleanly (ESLint + Prettier). - Admin unit tests (`yarn test` in the admin app) pass; the existing statistics spec was updated for the new layout (job-id lookup flow + GRP-filtered hostname options). - Manual verification of the graph, legend toggles, date-range shortcuts, scoping filters, and the experiment drill-down is recommended in a running portal. 🤖 Generated with [Claude Code](https://claude.com/claude-code) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
