Front end migration to only react

.github/workflows/build-ui.yml

@@ -26,16 +26,44 @@ jobs:
               uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               with:
                   node-version: "${{ env.NODE_VERSION }}"
-            - name: Setup pnpm
-              uses: pnpm/action-setup@eae0cfeb286e66ffb5155f1a79b90583a127a68b # v2.4.1
-              with:
-                  version: 8
+                  cache: "npm"
+                  cache-dependency-path: webapp/package-lock.json
             - name: Install dependencies
               working-directory: ./webapp
-              run: pnpm install
+              run: npm ci
             - name: Build
               working-directory: ./webapp
-              run: pnpm run build
+              run: npm run build
+            - name: Unit tests (vitest)
+              working-directory: ./webapp
+              run: npm run test:run
             - name: Check formatting with Prettier
               working-directory: ./webapp
-              run: pnpm exec prettier . --check
+              run: npx prettier . --check
+
+    e2e-ui:
+        runs-on: ubuntu-22.04
+        steps:
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+            - name: Use Node.js
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+              with:
+                  node-version: "${{ env.NODE_VERSION }}"
+                  cache: "npm"
+                  cache-dependency-path: webapp/package-lock.json
+            - name: Install dependencies
+              working-directory: ./webapp
+              run: npm ci
+            - name: Install Playwright browsers
+              working-directory: ./webapp
+              run: npx playwright install --with-deps chromium
+            - name: Run Playwright tests (mock mode, no backend)
+              working-directory: ./webapp
+              run: npm run test:e2e
+            - name: Upload Playwright report
+              if: failure()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: playwright-report
+                  path: webapp/playwright-report
+                  retention-days: 7

.gitignore

@@ -17,6 +17,7 @@ __pycache__/
 build/
 develop-eggs/
 dist/
+!webapp/dist/**
 downloads/
 eggs/
 .eggs/

carbonserver/carbonserver/api/infra/database/database_manager.py

@@ -13,7 +13,7 @@
 
 class Database:
     def __init__(self, db_url: str) -> None:
-        self._engine = create_engine(db_url, echo=True)
+        self._engine = create_engine(db_url, echo=True, pool_pre_ping=True)
         self._session_factory = orm.scoped_session(
             orm.sessionmaker(
                 autocommit=False,

carbonserver/carbonserver/api/routers/runs.py

@@ -87,7 +87,7 @@ def read_runs_from_experiment(
 
 
 @router.get(
-    "/experiments/{experiment_id}/runs/sums/",
+    "/experiments/{experiment_id}/runs/sums",
     tags=RUNS_ROUTER_TAGS,
     status_code=status.HTTP_200_OK,
 )

carbonserver/pyproject.toml

@@ -62,3 +62,5 @@ exclude = ["*"]
 
 [tool.pytest.ini_options]
 pythonpath = "."
+asyncio_mode = "strict"
+asyncio_default_fixture_loop_scope = "function"

docker-compose.yml

@@ -42,14 +42,11 @@ services:
   ui:
     build:
       context: ./webapp
-      dockerfile: dev.Dockerfile
+      dockerfile: Dockerfile
 
     # Set environment variables based on the .env file
     env_file:
       - ./webapp/.env.development
-    volumes:
-      - ./webapp/src:/app/src
-      - ./webapp/public:/app/public
     restart: always
     labels:
       - "traefik.enable=true"

pyproject.toml

@@ -79,6 +79,34 @@ Changelog = "https://github.com/mlco2/codecarbon/releases"
 
 
 [dependency-groups]
+api  = [
+    "alembic<2.0.0",
+    "authlib>=1.2.1",
+    "bcrypt<5.0.0",
+    "python-dateutil<3.0.0",
+    "dependency-injector<5.0.0",
+    "fastapi<1.0.0",
+    "fief-client[fastapi]",
+    "httpx",
+    "pydantic[email]<2.0.0",
+    "psycopg2-binary<3.0.0",
+    "requests<3.0.0",
+    "sqlalchemy<2.0.0",
+    "uvicorn[standard]<1.0.0",
+    "fastapi-pagination<1.0.0",
+    "pytest",
+    "pytest-asyncio",
+    "mock",
+    "responses",
+    "fastapi-oidc;python_version>='3.10'",
+    "numpy",
+    "psutil",
+    "requests-mock",
+    "rapidfuzz",
+    "PyJWT",
+    "logfire[fastapi]>=1.0.1",
+    "itsdangerous",
+]
 dev = [
     "taskipy",
     "bumpver",
@@ -119,9 +147,33 @@ viz-legacy = [
     "dash_bootstrap_components > 1.0.0",
     "fire",
 ]
-# To support AMD GPU
-amdsmi = [
-    "amdsmi>=6.0.0"
+
+api  = [
+    "alembic<2.0.0",
+    "authlib>=1.2.1",
+    "bcrypt<5.0.0",
+    "python-dateutil<3.0.0",
+    "dependency-injector<5.0.0",
+    "fastapi<1.0.0",
+    "fief-client[fastapi]",
+    "httpx",
+    "itsdangerous",
+    "pydantic[email]<2.0.0",
+    "psycopg2-binary<3.0.0",
+    "requests<3.0.0",
+    "sqlalchemy<2.0.0",
+    "uvicorn[standard]<1.0.0",
+    "fastapi-pagination<1.0.0",
+    "pytest",
+    "pytest-asyncio",
+    "mock",
+    "responses",
+    "fastapi-oidc;python_version>='3.10'",
+    "numpy",
+    "psutil",
+    "requests-mock",
+    "rapidfuzz",
+    "PyJWT",
 ]
 
 [project.scripts]

webapp/.gitignore

@@ -8,6 +8,9 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
+/playwright/.cache
 
 # next.js
 /.next/

webapp/.prettierignore

@@ -3,4 +3,7 @@ build
 coverage
 node_modules
 .next
-pnpm-lock.yaml
+pnpm-lock.yaml
+dist
+playwright-report
+test-results

webapp/Caddyfile

@@ -0,0 +1,20 @@
+:{$CC_STATIC_PORT:8080} {
+	encode gzip
+
+	handle {
+		root * {$APP_HOME}/webapp/dist
+
+		@spa {
+			not file
+		}
+		rewrite @spa /index.html
+
+		file_server
+
+		header {
+			X-Content-Type-Options nosniff
+			X-Frame-Options DENY
+			Referrer-Policy strict-origin-when-cross-origin
+		}
+	}
+}

webapp/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable pnpm && pnpm install --frozen-lockfile
+COPY . .
+RUN pnpm build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

webapp/e2e/landing.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Landing page (mock mode)", () => {
+    test("renders welcome heading and the mock-only login button", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        await expect(
+            page.getByRole("heading", { name: /welcome to code carbon/i }),
+        ).toBeVisible();
+
+        // In mock mode the real-login button is hidden — there is no real
+        // OAuth backend in this build.
+        await expect(page.getByTestId("real-login")).toHaveCount(0);
+        await expect(page.getByTestId("mock-login")).toBeVisible();
+    });
+
+    test("clicking 'Mock Login' lands on the dashboard", async ({ page }) => {
+        await page.goto("/");
+        await page.getByTestId("mock-login").click();
+
+        // After mock login we should land in the authenticated app shell.
+        await expect(page).toHaveURL(/\/home/);
+        // The dashboard layout pulls organizations from /organizations,
+        // which the mock returns. We just assert we're past the auth wall.
+        await expect(
+            page.getByRole("heading", { name: /welcome to code carbon/i }),
+        ).toHaveCount(0);
+    });
+});

webapp/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" class="dark">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" href="/logo.svg" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <title>CodeCarbon</title>
+    </head>
+    <body class="font-mono">
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

webapp/nginx.conf

@@ -0,0 +1,8 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}