feat: add web dashboard

.gitignore

@@ -192,3 +192,8 @@ wip*/
 
 # Used in e2e tests local testing
 .secrets
+
+# dashboard
+dashboard/node_modules
+dashboard/.vite
+dashboard/results/*

dashboard/Makefile

@@ -0,0 +1,16 @@
+LS_EVAL_SYSTEM_CFG_PATH ?= ./dashboard/system.yaml
+LS_EVAL_DATA_PATH ?= ./dashboard/eval.yaml
+LS_EVAL_REPORTS_PATH ?= ./dashboard/results
+LS_EVAL_DASHBOARD_RUN_ENABLED ?= true
+API_KEY ?= $(shell oc whoami -t 2>/dev/null)
+
+.PHONY: dev install build_image
+
+install:
+	npm install
+
+dev:
+	@LS_EVAL_SYSTEM_CFG_PATH="$(LS_EVAL_SYSTEM_CFG_PATH)" LS_EVAL_DATA_PATH="$(LS_EVAL_DATA_PATH)" LS_EVAL_REPORTS_PATH="$(LS_EVAL_REPORTS_PATH)" LS_EVAL_DASHBOARD_RUN_ENABLED="$(LS_EVAL_DASHBOARD_RUN_ENABLED)" API_KEY="$(API_KEY)" npx vite
+
+build_image:
+	@./build.sh $(DOCKER_IMAGE_NAME) $(DOCKER_IMAGE_TAG)

dashboard/README.md

@@ -0,0 +1,73 @@
+# Lightspeed Evaluation Dashboard
+
+> **Note:** This is a Proof of Concept (PoC) implementation.
+
+A web-based dashboard for visualizing, comparing, and managing lightspeed-evaluation results. Built with React 19 and Vite, it provides interactive charts, side-by-side evaluation comparison, PDF export, and the ability to run evaluations directly from the browser.
+
+## Quick Start
+
+```bash
+# Prerequisites: Node.js 20.19+ or 22.12+, lightspeed-eval Python package installed
+make install
+
+# Start development server with default values
+make dev
+
+# Start development server with desired values
+LS_EVAL_SYSTEM_CFG_PATH=<path_to_system.yaml> LS_EVAL_DATA_PATH=<path_to_eval.yaml> LS_EVAL_REPORTS_PATH=<path_to_reports_dir> LS_EVAL_DASHBOARD_RUN_ENABLED=<true|false> npx vite
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+The example above provides enough information to run the dashboard with the yaml files. See the [API Configuration](#api-configuration) section below for API key and API run details.
+
+## Environment Variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `LS_EVAL_SYSTEM_CFG_PATH` | Yes | Path to `system.yaml` |
+| `LS_EVAL_DATA_PATH` | No | Path to `eval.yaml` |
+| `LS_EVAL_REPORTS_PATH` | No | Path to reports directory |
+| `LS_EVAL_DASHBOARD_RUN_ENABLED` | No | Enable/disable running evaluations from dashboard (default: `true`) |
+
+## Development
+
+### Prerequisites
+
+- **Node.js 20.19+ or 22.12+**
+- **Python 3.11+** with `lightspeed-eval` installed (for running evaluations)
+- **OLS service** running at the endpoint configured in `system.yaml`
+
+### Commands
+
+```bash
+make install     # Install npm dependencies
+make dev         # Start Vite dev server (port 5173)
+npm run build    # Production build to dist/
+npm run preview  # Preview production build
+npm run lint     # Run ESLint
+```
+
+### File Conventions
+
+- **Evaluation CSVs**: `evaluation_YYYYMMDD_HHMMSS_detailed.csv` in `results/`
+- **Amended configs**: `*_amended_YYYYMMDD_HHMMSS.yaml` in `results/`
+- **Graph PNGs**: `evaluation_YYYYMMDD_HHMMSS_*.png` in `results/graphs/`
+- **Conversations**: `.yaml` files in `conversations/`
+
+Files are matched by their embedded timestamp (`YYYYMMDD_HHMMSS`). An evaluation CSV, its amended config, and its graphs all share the same timestamp.
+
+## API Configuration
+
+The following environment variables are required when running evaluations from the dashboard:
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `API_KEY` | Yes | API key for OLS service (e.g. `oc whoami -t`) |
+| `OPENAI_API_KEY` | For eval | API key for the judge LLM provider |
+
+To start the development server with API keys:
+
+```bash
+API_KEY="$API_KEY" OPENAI_API_KEY="$OPENAI_API_KEY" npx vite
+```

dashboard/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

dashboard/eval.yaml

@@ -0,0 +1,98 @@
+# Dashboard Test - Evaluation Data
+# Simple evaluation data with basic metrics for dashboard testing
+
+- conversation_group_id: openshift_basics
+  tag: basic
+  description: "Basic OpenShift questions with simple metrics"
+
+  turns:
+    - turn_id: what_is_openshift
+      query: "What is OpenShift?"
+
+      response: "OpenShift is Red Hat's enterprise Kubernetes platform that provides additional tools and features for deploying, managing, and scaling containerized applications."
+
+      contexts:
+        - "OpenShift is a Kubernetes-based container platform developed by Red Hat"
+        - "It provides additional enterprise features beyond standard Kubernetes"
+        - "OpenShift includes integrated CI/CD, monitoring, and security features"
+
+      turn_metrics:
+        - "ragas:response_relevancy"
+        - "ragas:faithfulness"
+
+    - turn_id: create_project
+      query: "How do I create a new project?"
+
+      response: "You can create a new project in OpenShift using the command: oc new-project my-project-name"
+
+      expected_response: "Use the 'oc new-project' command followed by your desired project name"
+
+      contexts:
+        - "Projects in OpenShift are Kubernetes namespaces with additional features"
+        - "The oc new-project command creates and switches to a new project"
+
+      turn_metrics:
+        - "ragas:response_relevancy"
+        - "custom:answer_correctness"
+
+- conversation_group_id: pod_management
+  tag: basic
+  description: "Pod management questions"
+
+  conversation_metrics:
+    - "deepeval:conversation_completeness"
+
+  turns:
+    - turn_id: list_pods
+      query: "How do I list all pods in my project?"
+
+      response: "You can list all pods using the command: oc get pods"
+
+      expected_response: "Use 'oc get pods' to list all pods in the current project"
+
+      contexts:
+        - "The oc get pods command shows all pods in the current project"
+        - "You can add flags like -o wide for more details"
+
+      turn_metrics:
+        - "ragas:response_relevancy"
+        - "custom:answer_correctness"
+
+    - turn_id: pod_logs
+      query: "How can I check the logs of a pod?"
+
+      response: "To check pod logs, use: oc logs pod-name. You can also use -f flag to follow the logs in real-time."
+
+      expected_response: "Use 'oc logs pod-name' to view pod logs"
+
+      contexts:
+        - "The oc logs command displays logs from a specific pod"
+        - "Use -f flag to stream logs continuously"
+        - "You can specify a container name if the pod has multiple containers"
+
+      turn_metrics:
+        - "ragas:response_relevancy"
+        - "ragas:faithfulness"
+        - "custom:answer_correctness"
+
+- conversation_group_id: deployment_basics
+  tag: advanced
+  description: "Deployment creation and management"
+
+  turns:
+    - turn_id: create_deployment
+      query: "How do I create a deployment?"
+
+      response: "You can create a deployment using 'oc create deployment my-app --image=my-image:tag' or by applying a YAML file with 'oc apply -f deployment.yaml'"
+
+      expected_response: "Create deployments using 'oc create deployment' command or by applying a deployment YAML file"
+
+      contexts:
+        - "Deployments manage the lifecycle of pod replicas"
+        - "You can create deployments imperatively or declaratively"
+        - "The oc create deployment command is a quick way to get started"
+
+      turn_metrics:
+        - "ragas:response_relevancy"
+        - "ragas:faithfulness"
+        - "custom:answer_correctness"

dashboard/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lightspeed Evaluation Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>