feat(ui): add web dashboard for engagement metrics

Daniel Scholl (MS]requested to merge
feat/web-dashboard into main

  • Concise summary

    • Introduced a complete static dashboard UI (OSDU Engagement Dashboard) with data visualizations and contributor/project tables, plus CI support to publish a GitLab Pages site. Added local data generation and serving utilities to facilitate preview and testing.

  • Key modifications and their purpose

    • .gitlab-ci.yml
      • Added a new pages stage to enable GitLab Pages deployment for the dashboard (dashboard site built from the repository and published to GitLab Pages).
      • Page generation scripts are wired to generate site/data JSON payloads during scheduled/web/api pipelines before deploying site assets.
    • scripts/generate_sample_data.py (new)
      • Python script to generate realistic sample data for contributions, ADRs/decisions, and trends, written to site/data as JSON.
      • Produces dataset that mirrors the shapes expected by the dashboard frontend (contributors, projects, ADRs, etc.) for local preview.
    • scripts/serve_local.sh (new)
      • Simple local HTTP server launcher to preview the static dashboard locally.
    • site/index.html, site/css/styles.css, site/js/charts.js, site/js/dashboard.js (new)
      • Full static frontend scaffold for the dashboard:
        • index.html defines the UI structure (header, metrics, insights, category chart, ADR chart, trends, contributor leaderboard, and project activity).
        • styles.css provides the visual theme and responsive layout.
        • charts.js exposes Chart.js wrappers for ADR doughnut, trend line, and category bar charts.
        • dashboard.js implements a client-side Dashboard class that loads JSON data, renders metrics/insights, and populates tables and charts.
    • site/data/.gitignore (new)
      • Ignores generated JSON data in site/data to avoid committing synthetic data in the repo.
    • site/data (data JSONs)
      • Generated files expected by the frontend: contributions.json, decisions.json, trends.json (populated by the sample data generator or by CI in practice).
    • Flow/UX details (in dashboard.js and charts.js)
      • Dynamic rendering of metrics (Total MRs, Merge Rate, Active Contributors, Open ADRs) with contextual styling based on thresholds.
      • Insights generation from dataset (merge rate, open ADRs, trend direction, top contributor, project activity coverage).
      • Category distribution via horizontal bars, ADR status via a doughnut chart, and contribution trends via a multi-series line chart.
      • Contributor leaderboard and projects-with-activity tables with “View All” toggle for long lists.
    • s ite/index.html
      • HTML structure wired to load CSS and the JavaScript assets and to render the dashboard HTML skeleton with Material Symbols and Chart.js integration references.

  • Notable technical details

    • Frontend data model expectations:
      • contributions.json: contains metadata, parameters, statistics, and data with contributors and projects.
      • decisions.json: contains ADR-related statistics and participants.
      • trends.json: contains monthly/period data with total_mrs, merged_mrs, etc.
    • Visuals and theming:
      • CSS is heavily themed with a teal/open-organization palette and responsive grid/flex layouts for metrics and charts.
    • Charting:
      • ADR distribution uses a doughnut chart with bottom legend and tooltips showing counts and percentages.
      • Trends chart is a multi-dataset line chart (Total MRs, Merged MRs, Contributors) with a secondary y-axis for contributors.
      • Category distribution uses a horizontal bar chart (category MR counts).
    • Interaction:
      • Contributor and project tables include “View All” toggles to switch between compact and full lists.
    • Local preview workflow:
      • Generate sample data via the new Python script, start the local server with serve_local.sh, then open the dashboard in a browser for preview.

  • Security impact analysis

    • No vulnerability data is provided in this diff, so there are no vulnerability fixes or vulnerability impact changes to analyze.
    • The changes are primarily UI scaffolding, static site generation, and client-side rendering logic. No server-side code or input handling changes were introduced that affect security posture.

  • Last specific change or security finding discussed

    • Dashboard initialization wired via DOMContentLoaded: creates Dashboard and runs init.

Merge request reports