From f76a5dd2286bef915511e6e88f72b273e7d376a7 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 20:31:05 +0530 Subject: [PATCH 1/7] exosphere-state-manager-frontend -> exosphere-dashboard --- .../.gitignore | 0 .../Dockerfile | 0 .../README.md | 0 .../env.example | 0 .../eslint.config.mjs | 0 .../next.config.ts | 0 .../package-lock.json | 4 +- .../package.json | 2 +- .../postcss.config.mjs | 0 .../public/DarkerGrotesque-Regular.ttf | Bin .../public/Pattanakarn_Regular.ttf | Bin .../public/exospheresmall.png | Bin .../public/file.svg | 0 .../public/globe.svg | 0 .../public/next.svg | 0 .../public/vercel.svg | 0 .../public/window.svg | 0 .../src/app/favicon.ico | Bin .../src/app/globals.css | 0 .../src/app/layout.tsx | 0 .../src/app/page.tsx | 0 .../src/components/GraphTemplateBuilder.tsx | 0 .../components/GraphTemplateDetailModal.tsx | 0 .../src/components/GraphVisualization.tsx | 0 .../src/components/NamespaceOverview.tsx | 0 .../src/components/NodeDetailModal.tsx | 0 .../src/components/StatesByRunId.tsx | 0 .../src/services/api.ts | 2 +- .../src/types/state-manager.ts | 0 .../tsconfig.json | 0 state-manager-frontend/docker-compose.yml | 49 ------------------ state-manager-frontend/quick-start.bat | 44 ---------------- state-manager-frontend/quick-start.sh | 41 --------------- 33 files changed, 4 insertions(+), 138 deletions(-) rename {state-manager-frontend => dashboard}/.gitignore (100%) rename {state-manager-frontend => dashboard}/Dockerfile (100%) rename {state-manager-frontend => dashboard}/README.md (100%) rename {state-manager-frontend => dashboard}/env.example (100%) rename {state-manager-frontend => dashboard}/eslint.config.mjs (100%) rename {state-manager-frontend => dashboard}/next.config.ts (100%) rename {state-manager-frontend => dashboard}/package-lock.json (99%) rename {state-manager-frontend => dashboard}/package.json (95%) rename {state-manager-frontend => dashboard}/postcss.config.mjs (100%) rename {state-manager-frontend => dashboard}/public/DarkerGrotesque-Regular.ttf (100%) rename {state-manager-frontend => dashboard}/public/Pattanakarn_Regular.ttf (100%) rename {state-manager-frontend => dashboard}/public/exospheresmall.png (100%) rename {state-manager-frontend => dashboard}/public/file.svg (100%) rename {state-manager-frontend => dashboard}/public/globe.svg (100%) rename {state-manager-frontend => dashboard}/public/next.svg (100%) rename {state-manager-frontend => dashboard}/public/vercel.svg (100%) rename {state-manager-frontend => dashboard}/public/window.svg (100%) rename {state-manager-frontend => dashboard}/src/app/favicon.ico (100%) rename {state-manager-frontend => dashboard}/src/app/globals.css (100%) rename {state-manager-frontend => dashboard}/src/app/layout.tsx (100%) rename {state-manager-frontend => dashboard}/src/app/page.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/GraphTemplateBuilder.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/GraphTemplateDetailModal.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/GraphVisualization.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/NamespaceOverview.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/NodeDetailModal.tsx (100%) rename {state-manager-frontend => dashboard}/src/components/StatesByRunId.tsx (100%) rename {state-manager-frontend => dashboard}/src/services/api.ts (98%) rename {state-manager-frontend => dashboard}/src/types/state-manager.ts (100%) rename {state-manager-frontend => dashboard}/tsconfig.json (100%) delete mode 100644 state-manager-frontend/docker-compose.yml delete mode 100644 state-manager-frontend/quick-start.bat delete mode 100644 state-manager-frontend/quick-start.sh diff --git a/state-manager-frontend/.gitignore b/dashboard/.gitignore similarity index 100% rename from state-manager-frontend/.gitignore rename to dashboard/.gitignore diff --git a/state-manager-frontend/Dockerfile b/dashboard/Dockerfile similarity index 100% rename from state-manager-frontend/Dockerfile rename to dashboard/Dockerfile diff --git a/state-manager-frontend/README.md b/dashboard/README.md similarity index 100% rename from state-manager-frontend/README.md rename to dashboard/README.md diff --git a/state-manager-frontend/env.example b/dashboard/env.example similarity index 100% rename from state-manager-frontend/env.example rename to dashboard/env.example diff --git a/state-manager-frontend/eslint.config.mjs b/dashboard/eslint.config.mjs similarity index 100% rename from state-manager-frontend/eslint.config.mjs rename to dashboard/eslint.config.mjs diff --git a/state-manager-frontend/next.config.ts b/dashboard/next.config.ts similarity index 100% rename from state-manager-frontend/next.config.ts rename to dashboard/next.config.ts diff --git a/state-manager-frontend/package-lock.json b/dashboard/package-lock.json similarity index 99% rename from state-manager-frontend/package-lock.json rename to dashboard/package-lock.json index 141b5e46..c2fe3ab7 100644 --- a/state-manager-frontend/package-lock.json +++ b/dashboard/package-lock.json @@ -1,11 +1,11 @@ { - "name": "state-manager-frontend", + "name": "exosphere-dashboard", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "state-manager-frontend", + "name": "exosphere-dashboard", "version": "0.1.0", "dependencies": { "@reactflow/node-resizer": "^2.2.14", diff --git a/state-manager-frontend/package.json b/dashboard/package.json similarity index 95% rename from state-manager-frontend/package.json rename to dashboard/package.json index e6efd7bd..80669c57 100644 --- a/state-manager-frontend/package.json +++ b/dashboard/package.json @@ -1,5 +1,5 @@ { - "name": "state-manager-frontend", + "name": "exosphere-dashboard", "version": "0.1.0", "private": true, "scripts": { diff --git a/state-manager-frontend/postcss.config.mjs b/dashboard/postcss.config.mjs similarity index 100% rename from state-manager-frontend/postcss.config.mjs rename to dashboard/postcss.config.mjs diff --git a/state-manager-frontend/public/DarkerGrotesque-Regular.ttf b/dashboard/public/DarkerGrotesque-Regular.ttf similarity index 100% rename from state-manager-frontend/public/DarkerGrotesque-Regular.ttf rename to dashboard/public/DarkerGrotesque-Regular.ttf diff --git a/state-manager-frontend/public/Pattanakarn_Regular.ttf b/dashboard/public/Pattanakarn_Regular.ttf similarity index 100% rename from state-manager-frontend/public/Pattanakarn_Regular.ttf rename to dashboard/public/Pattanakarn_Regular.ttf diff --git a/state-manager-frontend/public/exospheresmall.png b/dashboard/public/exospheresmall.png similarity index 100% rename from state-manager-frontend/public/exospheresmall.png rename to dashboard/public/exospheresmall.png diff --git a/state-manager-frontend/public/file.svg b/dashboard/public/file.svg similarity index 100% rename from state-manager-frontend/public/file.svg rename to dashboard/public/file.svg diff --git a/state-manager-frontend/public/globe.svg b/dashboard/public/globe.svg similarity index 100% rename from state-manager-frontend/public/globe.svg rename to dashboard/public/globe.svg diff --git a/state-manager-frontend/public/next.svg b/dashboard/public/next.svg similarity index 100% rename from state-manager-frontend/public/next.svg rename to dashboard/public/next.svg diff --git a/state-manager-frontend/public/vercel.svg b/dashboard/public/vercel.svg similarity index 100% rename from state-manager-frontend/public/vercel.svg rename to dashboard/public/vercel.svg diff --git a/state-manager-frontend/public/window.svg b/dashboard/public/window.svg similarity index 100% rename from state-manager-frontend/public/window.svg rename to dashboard/public/window.svg diff --git a/state-manager-frontend/src/app/favicon.ico b/dashboard/src/app/favicon.ico similarity index 100% rename from state-manager-frontend/src/app/favicon.ico rename to dashboard/src/app/favicon.ico diff --git a/state-manager-frontend/src/app/globals.css b/dashboard/src/app/globals.css similarity index 100% rename from state-manager-frontend/src/app/globals.css rename to dashboard/src/app/globals.css diff --git a/state-manager-frontend/src/app/layout.tsx b/dashboard/src/app/layout.tsx similarity index 100% rename from state-manager-frontend/src/app/layout.tsx rename to dashboard/src/app/layout.tsx diff --git a/state-manager-frontend/src/app/page.tsx b/dashboard/src/app/page.tsx similarity index 100% rename from state-manager-frontend/src/app/page.tsx rename to dashboard/src/app/page.tsx diff --git a/state-manager-frontend/src/components/GraphTemplateBuilder.tsx b/dashboard/src/components/GraphTemplateBuilder.tsx similarity index 100% rename from state-manager-frontend/src/components/GraphTemplateBuilder.tsx rename to dashboard/src/components/GraphTemplateBuilder.tsx diff --git a/state-manager-frontend/src/components/GraphTemplateDetailModal.tsx b/dashboard/src/components/GraphTemplateDetailModal.tsx similarity index 100% rename from state-manager-frontend/src/components/GraphTemplateDetailModal.tsx rename to dashboard/src/components/GraphTemplateDetailModal.tsx diff --git a/state-manager-frontend/src/components/GraphVisualization.tsx b/dashboard/src/components/GraphVisualization.tsx similarity index 100% rename from state-manager-frontend/src/components/GraphVisualization.tsx rename to dashboard/src/components/GraphVisualization.tsx diff --git a/state-manager-frontend/src/components/NamespaceOverview.tsx b/dashboard/src/components/NamespaceOverview.tsx similarity index 100% rename from state-manager-frontend/src/components/NamespaceOverview.tsx rename to dashboard/src/components/NamespaceOverview.tsx diff --git a/state-manager-frontend/src/components/NodeDetailModal.tsx b/dashboard/src/components/NodeDetailModal.tsx similarity index 100% rename from state-manager-frontend/src/components/NodeDetailModal.tsx rename to dashboard/src/components/NodeDetailModal.tsx diff --git a/state-manager-frontend/src/components/StatesByRunId.tsx b/dashboard/src/components/StatesByRunId.tsx similarity index 100% rename from state-manager-frontend/src/components/StatesByRunId.tsx rename to dashboard/src/components/StatesByRunId.tsx diff --git a/state-manager-frontend/src/services/api.ts b/dashboard/src/services/api.ts similarity index 98% rename from state-manager-frontend/src/services/api.ts rename to dashboard/src/services/api.ts index 8c25da15..8be8e949 100644 --- a/state-manager-frontend/src/services/api.ts +++ b/dashboard/src/services/api.ts @@ -17,7 +17,7 @@ import { GraphStructureResponse } from '@/types/state-manager'; -const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'; +const API_BASE_URL = process.env.EXOSPHERE_STATE_MANAGER_URL || 'http://localhost:8000'; class ApiService { private async makeRequest( diff --git a/state-manager-frontend/src/types/state-manager.ts b/dashboard/src/types/state-manager.ts similarity index 100% rename from state-manager-frontend/src/types/state-manager.ts rename to dashboard/src/types/state-manager.ts diff --git a/state-manager-frontend/tsconfig.json b/dashboard/tsconfig.json similarity index 100% rename from state-manager-frontend/tsconfig.json rename to dashboard/tsconfig.json diff --git a/state-manager-frontend/docker-compose.yml b/state-manager-frontend/docker-compose.yml deleted file mode 100644 index 1ac53c56..00000000 --- a/state-manager-frontend/docker-compose.yml +++ /dev/null @@ -1,49 +0,0 @@ -services: - state-manager-frontend: - build: . - ports: - - "3000:3000" - environment: - - NEXT_PUBLIC_API_BASE_URL=http://state-manager:8000 - depends_on: - - state-manager - networks: - - state-manager-network - - state-manager: - build: ../state-manager - ports: - - "8000:8000" - environment: - - .env - depends_on: - - mongo - - redis - networks: - - state-manager-network - - mongo: - image: mongo:7.0 - ports: - - 27017:27017 - volumes: - - mongo_data:/data/db - networks: - - state-manager-network - - redis: - image: redis:7.2-alpine - ports: - - "6379:6379" - volumes: - - redis_data:/data - networks: - - state-manager-network - -volumes: - mongo_data: - redis_data: - -networks: - state-manager-network: - driver: bridge diff --git a/state-manager-frontend/quick-start.bat b/state-manager-frontend/quick-start.bat deleted file mode 100644 index cc8f0dd2..00000000 --- a/state-manager-frontend/quick-start.bat +++ /dev/null @@ -1,44 +0,0 @@ -@echo off -REM State Manager Frontend Quick Start Script for Windows - -echo 🚀 Starting State Manager Frontend... - -REM Check if Node.js is installed -node --version >nul 2>&1 -if %errorlevel% neq 0 ( - echo ❌ Node.js is not installed. Please install Node.js 18+ first. - pause - exit /b 1 -) - -REM Check if npm is installed -npm --version >nul 2>&1 -if %errorlevel% neq 0 ( - echo ❌ npm is not installed. Please install npm first. - pause - exit /b 1 -) - -REM Install dependencies -echo 📦 Installing dependencies... -npm install - -REM Create .env.local if it doesn't exist -if not exist .env.local ( - echo 🔧 Creating .env.local file... - ( - echo # State Manager Frontend Environment Configuration - echo NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 - ) > .env.local - echo ✅ Created .env.local file -) - -REM Start the development server -echo 🌐 Starting development server... -echo 📱 Frontend will be available at: http://localhost:3000 -echo 🔗 Make sure your State Manager backend is running at: http://localhost:8000 -echo. -echo Press Ctrl+C to stop the server -echo. - -npm run dev diff --git a/state-manager-frontend/quick-start.sh b/state-manager-frontend/quick-start.sh deleted file mode 100644 index 73eed18d..00000000 --- a/state-manager-frontend/quick-start.sh +++ /dev/null @@ -1,41 +0,0 @@ -#!/bin/bash - -# State Manager Frontend Quick Start Script - -echo "🚀 Starting State Manager Frontend..." - -# Check if Node.js is installed -if ! command -v node &> /dev/null; then - echo "❌ Node.js is not installed. Please install Node.js 18+ first." - exit 1 -fi - -# Check if npm is installed -if ! command -v npm &> /dev/null; then - echo "❌ npm is not installed. Please install npm first." - exit 1 -fi - -# Install dependencies -echo "📦 Installing dependencies..." -npm install - -# Create .env.local if it doesn't exist -if [ ! -f .env.local ]; then - echo "🔧 Creating .env.local file..." - cat > .env.local << EOF -# State Manager Frontend Environment Configuration -NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 -EOF - echo "✅ Created .env.local file" -fi - -# Start the development server -echo "🌐 Starting development server..." -echo "📱 Frontend will be available at: http://localhost:3000" -echo "🔗 Make sure your State Manager backend is running at: http://localhost:8000" -echo "" -echo "Press Ctrl+C to stop the server" -echo "" - -npm run dev From c239c3a8484b31ff1586b686782dda0ab5593784 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 20:47:16 +0530 Subject: [PATCH 2/7] Add .dockerignore file and update Dockerfile for improved image management - Introduced a .dockerignore file to exclude unnecessary files and directories from the Docker build context. - Updated Dockerfile to use a slimmer Node.js base image and modified dependency installation commands. - Set environment variables for runtime configuration, including NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL. - Adjusted user permissions and ownership for better security practices in the Docker container. - Updated environment variable references in env.example and README.md for consistency. --- dashboard/.dockerignore | 40 +++++++++++++++++++++++++++ dashboard/Dockerfile | 51 ++++++++++++----------------------- dashboard/README.md | 40 ++++++++++++++++++++++++++- dashboard/env.example | 2 +- dashboard/src/services/api.ts | 2 +- 5 files changed, 98 insertions(+), 37 deletions(-) create mode 100644 dashboard/.dockerignore diff --git a/dashboard/.dockerignore b/dashboard/.dockerignore new file mode 100644 index 00000000..9ee01ec1 --- /dev/null +++ b/dashboard/.dockerignore @@ -0,0 +1,40 @@ +# Dependency directories +node_modules + +# Debug log files +npm-debug.log +yarn-debug.log* +yarn-error.log* + +# Next.js build output +dist +.next +out + +# Local env files +.env +.env.*.local +.env.local +.env.development +.env.test +.env.production + +# Git-related files +.git +.git/* +.gitignore + +# IDE & system files +.vscode +.idea +.DS_Store + +# Testing & coverage +coverage + +# Logs +*.log + +# Docker & Compose files (not needed in image) +Dockerfile* +docker-compose*.yml diff --git a/dashboard/Dockerfile b/dashboard/Dockerfile index 8110b378..353aaf3c 100644 --- a/dashboard/Dockerfile +++ b/dashboard/Dockerfile @@ -1,51 +1,29 @@ -# Use the official Node.js runtime as the base image -FROM node:20-alpine AS base +FROM node:slim AS base -# Install dependencies only when needed FROM base AS deps -# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. -RUN apk add --no-cache libc6-compat WORKDIR /app - -# Install dependencies based on the preferred package manager COPY package.json package-lock.json* ./ -RUN npm ci +RUN npm install -# Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . - -# Next.js collects completely anonymous telemetry data about general usage. -# Learn more here: https://nextjs.org/telemetry -# Uncomment the following line in case you want to disable telemetry during the build. -ENV NEXT_TELEMETRY_DISABLED 1 - +ENV NEXT_TELEMETRY_DISABLED=1 +RUN apt update && apt install -y openssl RUN npm run build -# Production image, copy all the files and run next FROM base AS runner WORKDIR /app - -ENV NODE_ENV production -# Uncomment the following line in case you want to disable telemetry during runtime. -ENV NEXT_TELEMETRY_DISABLED 1 - -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - -COPY --from=builder /app/public ./public - -# Set the correct permission for prerender cache +ENV NODE_ENV=production +ENV NEXT_TELEMETRY_DISABLED=1 +RUN addgroup --system --gid 1001 app +RUN adduser --system --uid 1001 app RUN mkdir .next -RUN chown nextjs:nodejs .next - -# Automatically leverage output traces to reduce image size -# https://nextjs.org/docs/advanced-features/output-file-tracing -COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ -COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static - +RUN chown app:app .next +COPY --from=builder --chown=app:app /app/.next/standalone ./ +COPY --from=builder --chown=app:app /app/.next/static ./.next/static +COPY --from=builder --chown=app:app /app/public ./public USER nextjs EXPOSE 3000 @@ -54,6 +32,11 @@ ENV PORT 3000 # set hostname to localhost ENV HOSTNAME 0.0.0.0 +# Expose environment variable for runtime configuration +# Users can override this by setting NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL +ENV NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://localhost:8000 +ENV NEXT_PUBLIC_DEV_MODE=true + # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output CMD ["node", "server.js"] diff --git a/dashboard/README.md b/dashboard/README.md index e92d5781..6831fae2 100644 --- a/dashboard/README.md +++ b/dashboard/README.md @@ -75,7 +75,7 @@ npm install 3. Set up environment variables (optional): ```bash # Create .env.local file -NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 +NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://localhost:8000 ``` 4. Start the development server: @@ -85,6 +85,44 @@ npm run dev 5. Open [http://localhost:3000](http://localhost:3000) in your browser +### Docker Deployment + +You can also run the dashboard using Docker. The container is configurable through environment variables. + +#### Using Docker Compose + +1. Create a `.env` file in the dashboard directory: +```bash +# Configure the State Manager URL +NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://your-state-manager-url:8000 +``` + +2. Run with Docker Compose: +```bash +docker-compose up -d +``` + +#### Using Docker directly + +1. Build the image: +```bash +docker build -t exosphere-dashboard . +``` + +2. Run the container with custom configuration: +```bash +docker run -d \ + -p 3000:3000 \ + -e NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://your-state-manager-url:8000 \ + exosphere-dashboard +``` + +#### Environment Variables + +| Variable | Default | Description | +|----------|---------|-------------| +| `NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL` | `http://localhost:8000` | URL of the State Manager backend API | + ### Configuration The frontend requires the following configuration: diff --git a/dashboard/env.example b/dashboard/env.example index 7ef758a4..3b593048 100644 --- a/dashboard/env.example +++ b/dashboard/env.example @@ -1,7 +1,7 @@ # State Manager Frontend Environment Configuration # API Configuration -NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 +NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://localhost:8000 # Development Configuration NEXT_PUBLIC_DEV_MODE=true diff --git a/dashboard/src/services/api.ts b/dashboard/src/services/api.ts index 8be8e949..54cb54c3 100644 --- a/dashboard/src/services/api.ts +++ b/dashboard/src/services/api.ts @@ -17,7 +17,7 @@ import { GraphStructureResponse } from '@/types/state-manager'; -const API_BASE_URL = process.env.EXOSPHERE_STATE_MANAGER_URL || 'http://localhost:8000'; +const API_BASE_URL = process.env.NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL || 'http://localhost:8000'; class ApiService { private async makeRequest( From c049592b1f0c5b201e2b0ae59721578cc52c9193 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 20:53:51 +0530 Subject: [PATCH 3/7] Update package dependencies and improve type definitions in GraphTemplateBuilder and NodeDetailModal - Added @types/d3 as a development dependency in package.json and package-lock.json. - Updated GraphTemplateBuilder to use HTML entity for quotes in the "Add Node" message. - Enhanced type definitions in NodeDetailModal for better type safety in schema rendering. --- dashboard/package-lock.json | 2 +- dashboard/package.json | 1 + .../src/components/GraphTemplateBuilder.tsx | 2 +- dashboard/src/components/NodeDetailModal.tsx | 18 +++++++++++++++--- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json index c2fe3ab7..6b2fca05 100644 --- a/dashboard/package-lock.json +++ b/dashboard/package-lock.json @@ -21,6 +21,7 @@ "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", + "@types/d3": "^7.4.3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", @@ -1423,7 +1424,6 @@ "version": "7.4.3", "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz", "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==", - "license": "MIT", "dependencies": { "@types/d3-array": "*", "@types/d3-axis": "*", diff --git a/dashboard/package.json b/dashboard/package.json index 80669c57..fa7a8bec 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -22,6 +22,7 @@ "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", + "@types/d3": "^7.4.3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/dashboard/src/components/GraphTemplateBuilder.tsx b/dashboard/src/components/GraphTemplateBuilder.tsx index ab503d16..1dd2a7e8 100644 --- a/dashboard/src/components/GraphTemplateBuilder.tsx +++ b/dashboard/src/components/GraphTemplateBuilder.tsx @@ -220,7 +220,7 @@ export const GraphTemplateBuilder: React.FC = ({ {nodes.length === 0 && (
-

No nodes added yet. Click "Add Node" to get started.

+

No nodes added yet. Click "Add Node" to get started.

)} diff --git a/dashboard/src/components/NodeDetailModal.tsx b/dashboard/src/components/NodeDetailModal.tsx index 877355a7..cb4f8cc2 100644 --- a/dashboard/src/components/NodeDetailModal.tsx +++ b/dashboard/src/components/NodeDetailModal.tsx @@ -4,17 +4,29 @@ import React from 'react'; import { NodeRegistration } from '@/types/state-manager'; import { X, Code, Eye, EyeOff, Key } from 'lucide-react'; +interface SchemaProperty { + type: string; + description?: string; + enum?: string[]; +} + +interface Schema { + type?: string; + properties?: Record; + required?: string[]; +} + interface NodeDetailModalProps { node: NodeRegistration | null; isOpen: boolean; onClose: () => void; } -const SchemaRenderer: React.FC<{ schema: any; title: string }> = ({ schema, title }) => { +const SchemaRenderer: React.FC<{ schema: Schema; title: string }> = ({ schema, title }) => { const [isExpanded, setIsExpanded] = React.useState(true); - const renderSchemaProperties = (properties: any, required: string[] = []) => { - return Object.entries(properties).map(([key, value]: [string, any]) => ( + const renderSchemaProperties = (properties: Record, required: string[] = []) => { + return Object.entries(properties).map(([key, value]: [string, SchemaProperty]) => (
From 3160d33cf3171bee0b2614e3d8cfc819dcb73f36 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 21:01:32 +0530 Subject: [PATCH 4/7] Update Dockerfile and next.config.ts for improved configuration - Changed the user in the Dockerfile from 'nextjs' to 'app' for better security. - Set environment variables in the Dockerfile to use the format 'ENV VAR=value'. - Added 'output: standalone' to next.config.ts to optimize the build output for deployment. --- dashboard/Dockerfile | 6 +++--- dashboard/next.config.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/dashboard/Dockerfile b/dashboard/Dockerfile index 353aaf3c..9bb890be 100644 --- a/dashboard/Dockerfile +++ b/dashboard/Dockerfile @@ -24,13 +24,13 @@ RUN chown app:app .next COPY --from=builder --chown=app:app /app/.next/standalone ./ COPY --from=builder --chown=app:app /app/.next/static ./.next/static COPY --from=builder --chown=app:app /app/public ./public -USER nextjs +USER app EXPOSE 3000 -ENV PORT 3000 +ENV PORT=3000 # set hostname to localhost -ENV HOSTNAME 0.0.0.0 +ENV HOSTNAME=0.0.0.0 # Expose environment variable for runtime configuration # Users can override this by setting NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL diff --git a/dashboard/next.config.ts b/dashboard/next.config.ts index e9ffa308..f7b60bbb 100644 --- a/dashboard/next.config.ts +++ b/dashboard/next.config.ts @@ -1,6 +1,7 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { + output: 'standalone', /* config options here */ }; From 313d7273a4c057259942f921a6fb58696050632c Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 21:05:32 +0530 Subject: [PATCH 5/7] Add GitHub Actions workflow for publishing dashboard image to GHCR and deploying to K8s - Created a new workflow file to automate the process of building and pushing the dashboard Docker image to GitHub Container Registry (GHCR). - Configured triggers for pushes to the main branch, releases, and manual dispatch. - Included steps for logging into GHCR, generating image tags, and building the Docker image from the dashboard directory. --- .github/workflows/publish-dashboard.yml | 57 +++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 .github/workflows/publish-dashboard.yml diff --git a/.github/workflows/publish-dashboard.yml b/.github/workflows/publish-dashboard.yml new file mode 100644 index 00000000..8d09a064 --- /dev/null +++ b/.github/workflows/publish-dashboard.yml @@ -0,0 +1,57 @@ +name: Publish Dashboard image to GHCR and Deploy to K8s + +on: + push: + branches: [main] + paths: + - 'dashboard/**' + release: + types: [published] + workflow_dispatch: + +env: + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository_owner }}/exosphere-dashboard + SHA_TAG: ${{ github.sha }} + +jobs: + publish-image: + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + outputs: + tags: ${{ steps.meta.outputs.tags }} + json: ${{ steps.meta.outputs.json }} + + steps: + - uses: actions/checkout@v4 + + - uses: docker/setup-buildx-action@v3 + + - name: Log in to GHCR + uses: docker/login-action@v3 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Generate tags & labels + id: meta + uses: docker/metadata-action@v5 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + tags: | + type=raw,value=latest + type=sha,format=short + type=ref,event=tag # v1.2.3 → v1.2.3 + + - name: Build and push + uses: docker/build-push-action@v5 + with: + context: ./dashboard + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} From 4cbc6d58b44a14ed3667bc4f692f131a25e60611 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 21:08:28 +0530 Subject: [PATCH 6/7] Enhance Dependabot configuration for dashboard package updates - Added npm package ecosystem for the dashboard directory to enable daily updates for dependencies. --- .github/dependabot.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 7edfea33..27261d8b 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -17,6 +17,10 @@ updates: directory: "/landing-page/" # Location of package manifests schedule: interval: "daily" + - package-ecosystem: "npm" # See documentation for possible values + directory: "/dashboard/" # Location of package manifests + schedule: + interval: "daily" - package-ecosystem: "uv" # See documentation for possible values directory: "/python-sdk/" # Location of package manifests schedule: From 3815b9ef9ff7820387b07d4686d8058de3288015 Mon Sep 17 00:00:00 2001 From: NiveditJain Date: Sat, 23 Aug 2025 21:13:33 +0530 Subject: [PATCH 7/7] Update Dockerfile and README for improved build process and documentation - Replaced 'npm install' with 'npm ci' in Dockerfile for faster and more reliable builds. - Combined apt-get commands in Dockerfile to reduce image size. - Updated README to reflect changes in features and improved clarity, including renaming sections and enhancing descriptions. - Set development mode to false in Dockerfile for production readiness. --- dashboard/Dockerfile | 7 +- dashboard/README.md | 326 ++++++++++++++++++++++++------------------- 2 files changed, 183 insertions(+), 150 deletions(-) diff --git a/dashboard/Dockerfile b/dashboard/Dockerfile index 9bb890be..51227ece 100644 --- a/dashboard/Dockerfile +++ b/dashboard/Dockerfile @@ -3,15 +3,14 @@ FROM node:slim AS base FROM base AS deps WORKDIR /app COPY package.json package-lock.json* ./ -RUN npm install +RUN npm ci FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . ENV NEXT_TELEMETRY_DISABLED=1 -RUN apt update && apt install -y openssl -RUN npm run build +RUN apt-get update && apt-get install -y --no-install-recommends openssl FROM base AS runner WORKDIR /app @@ -35,7 +34,7 @@ ENV HOSTNAME=0.0.0.0 # Expose environment variable for runtime configuration # Users can override this by setting NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL ENV NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://localhost:8000 -ENV NEXT_PUBLIC_DEV_MODE=true +ENV NEXT_PUBLIC_DEV_MODE=false # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output diff --git a/dashboard/README.md b/dashboard/README.md index 6831fae2..c8c91ef2 100644 --- a/dashboard/README.md +++ b/dashboard/README.md @@ -1,115 +1,96 @@ -# State Manager Frontend +# Exosphere Dashboard -A comprehensive Next.js frontend for visualizing and managing the Exosphere State Manager workflow. This application provides an intuitive interface for understanding and interacting with the state manager's node registration, graph template creation, and state execution processes. +A modern Next.js dashboard for visualizing and managing the Exosphere State Manager workflow. This application provides an intuitive interface for understanding and interacting with the state manager's node registration, graph template creation, and state execution processes. -## Features +## ✨ Features -### 🎯 Workflow Visualization -- **Interactive Workflow Steps**: Visual representation of the complete state manager workflow -- **Real-time Status Updates**: See each step progress from pending → active → completed/error -- **Step-by-step Execution**: Click on any step to execute it individually -- **Auto-advancement**: Automatically progress through the workflow +### 📊 Overview Dashboard +- **Namespace Overview**: Comprehensive view of your state manager namespace +- **Real-time Statistics**: Live metrics and status indicators +- **Quick Actions**: Fast access to common operations +- **Visual Analytics**: Charts and graphs showing system performance -### 🔧 Node Management -- **Node Schema Viewer**: Detailed view of registered nodes with input/output schemas -- **Parameter Highlighting**: Clear visualization of required vs optional parameters -- **Secret Management**: View and manage node secrets -- **Schema Validation**: JSON schema rendering with type information - -### 🏗️ Graph Template Builder -- **Visual Graph Builder**: Create and edit graph templates with a user-friendly interface +### 🔧 Graph Template Management +- **Visual Graph Builder**: Create and edit graph templates with an intuitive drag-and-drop interface - **Node Configuration**: Add, edit, and remove nodes with their parameters -- **Connection Management**: Define node relationships and data flow -- **Secret Configuration**: Manage graph-level secrets +- **Connection Management**: Define node relationships and data flow with visual connections +- **Template Validation**: Real-time validation of graph templates +- **Template Details**: Comprehensive view of saved graph templates -### 📊 State Management -- **State Lifecycle Tracking**: Monitor states through their complete lifecycle -- **Status Visualization**: Color-coded status indicators for all state types +### 📈 State Execution Tracking +- **Run States View**: Track execution states by run ID +- **Real-time Status Updates**: Monitor state progression through the workflow - **Execution Control**: Execute, retry, or cancel states directly from the UI - **Detailed State Information**: Expand states to view inputs, outputs, and metadata +- **State Lifecycle Visualization**: Color-coded status indicators for all state types -## State Manager Workflow - -The frontend visualizes the complete state manager workflow: - -1. **Register Nodes** → Register nodes with their schemas and secrets -2. **Create Graph Template** → Define the workflow structure with nodes and connections -3. **Create States** → Generate execution states for the graph template -4. **Enqueue States** → Queue states for execution -5. **Execute States** → Execute states and handle results - -## State Status Types - -The application tracks various state statuses: - -- **CREATED**: State has been created and is waiting to be processed -- **QUEUED**: State is queued and waiting for execution -- **EXECUTED**: State has been executed successfully -- **NEXT_CREATED**: Next state has been created based on this execution -- **RETRY_CREATED**: Retry state has been created due to failure -- **TIMEDOUT**: State execution timed out -- **ERRORED**: State execution failed with an error -- **CANCELLED**: State execution was cancelled -- **SUCCESS**: State completed successfully +### 🔍 Node Management +- **Node Schema Viewer**: Detailed view of registered nodes with input/output schemas +- **Parameter Highlighting**: Clear visualization of required vs optional parameters +- **Secret Management**: View and manage node secrets securely +- **Schema Validation**: JSON schema rendering with type information +- **Node Details Modal**: Comprehensive node information display -## Getting Started +## 🚀 Getting Started ### Prerequisites -- Node.js 18+ -- A running State Manager backend (default: http://localhost:8000) -- Valid API key and namespace +- **Node.js 18+** +- **A running State Manager backend** (default: http://localhost:8000) +- **Valid API key and namespace** -### Installation +### Quick Start -1. Clone the repository and navigate to the frontend directory: +1. **Clone and navigate to the dashboard directory:** ```bash -cd state-manager-frontend +cd dashboard ``` -2. Install dependencies: +2. **Install dependencies:** ```bash npm install ``` -3. Set up environment variables (optional): +3. **Set up environment variables:** ```bash -# Create .env.local file +# Copy the example environment file +cp env.example .env.local + +# Edit .env.local with your configuration NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://localhost:8000 +NEXT_PUBLIC_DEV_MODE=true ``` -4. Start the development server: +4. **Start the development server:** ```bash npm run dev ``` -5. Open [http://localhost:3000](http://localhost:3000) in your browser - -### Docker Deployment +5. **Open your browser** and navigate to [http://localhost:3000](http://localhost:3000) -You can also run the dashboard using Docker. The container is configurable through environment variables. +### Environment Configuration -#### Using Docker Compose +The dashboard supports the following environment variables: -1. Create a `.env` file in the dashboard directory: -```bash -# Configure the State Manager URL -NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL=http://your-state-manager-url:8000 -``` +| Variable | Default | Description | +|----------|---------|-------------| +| `NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL` | `http://localhost:8000` | URL of the State Manager backend API | +| `NEXT_PUBLIC_DEV_MODE` | `false` | Enable development mode features | +| `NEXT_PUBLIC_DEFAULT_NAMESPACE` | - | Default namespace to use | +| `NEXT_PUBLIC_DEFAULT_API_KEY` | - | Default API key (use with caution) | +| `NEXT_PUBLIC_DEFAULT_RUNTIME_NAME` | - | Default runtime name | +| `NEXT_PUBLIC_DEFAULT_GRAPH_NAME` | - | Default graph name | -2. Run with Docker Compose: -```bash -docker-compose up -d -``` +## 🐳 Docker Deployment -#### Using Docker directly +### Using Docker -1. Build the image: +1. **Build the image:** ```bash docker build -t exosphere-dashboard . ``` -2. Run the container with custom configuration: +2. **Run the container:** ```bash docker run -d \ -p 3000:3000 \ @@ -117,58 +98,61 @@ docker run -d \ exosphere-dashboard ``` -#### Environment Variables +## 📖 Usage Guide -| Variable | Default | Description | -|----------|---------|-------------| -| `NEXT_PUBLIC_EXOSPHERE_STATE_MANAGER_URL` | `http://localhost:8000` | URL of the State Manager backend API | +### 1. Overview Dashboard -### Configuration +The Overview tab provides a comprehensive view of your namespace: -The frontend requires the following configuration: +- **Namespace Statistics**: View total nodes, graphs, and states +- **Recent Activity**: See the latest state executions and updates +- **Quick Actions**: Fast access to create new graphs or view states +- **System Health**: Monitor the overall health of your state manager -- **Namespace**: Your state manager namespace -- **API Key**: Authentication key for the state manager -- **Runtime Name**: Name for your runtime (used in node registration) -- **Graph Name**: Name for your graph template +### 2. Graph Template Builder + +Create and manage graph templates: + +1. **Navigate to the "Graph Template" tab** +2. **Add Nodes**: Click to add nodes to your graph +3. **Configure Parameters**: Set input/output parameters for each node +4. **Create Connections**: Define data flow between nodes +5. **Save Template**: Save your graph template to the state manager +6. **View Details**: Click on saved templates to see detailed information -These can be configured in the header of the application. +### 3. State Execution Tracking -## Usage +Monitor and control state execution: -### 1. Workflow Execution +1. **Navigate to the "Run States" tab** +2. **View States by Run ID**: See all states for a specific execution run +3. **Monitor Status**: Track state progression through the workflow +4. **Control Execution**: Execute, retry, or cancel states as needed +5. **View Details**: Expand states to see inputs, outputs, and metadata -1. Navigate to the "Workflow" tab -2. Configure your namespace and API key in the header -3. Click "Start Workflow" to begin the automated execution -4. Watch as each step progresses through the workflow -5. Click on individual steps to execute them manually +### 4. Node Management -### 2. Node Management +Explore registered nodes: -1. Navigate to the "Nodes" tab after running the workflow -2. View registered nodes with their schemas -3. Expand nodes to see detailed input/output specifications -4. Review required secrets and parameters +1. **Access from Overview**: Click on nodes in the overview +2. **View Schemas**: See detailed input/output specifications +3. **Parameter Details**: Understand required vs optional parameters +4. **Secret Information**: View node secret requirements -### 3. Graph Template Building +## 🔧 Configuration -1. Navigate to the "Graph Template" tab -2. Add nodes with their configurations -3. Define node connections and data flow -4. Configure secrets for the graph -5. Save the template to the state manager +### Header Configuration -### 4. State Management +Configure your dashboard settings in the header: -1. Navigate to the "States" tab -2. View all created states with their current status -3. Execute, retry, or cancel states as needed -4. Expand states to view detailed information +- **Namespace**: Your state manager namespace +- **API Key**: Authentication key for the state manager +- **Runtime Name**: Name for your runtime (used in node registration) +- **Graph Name**: Name for your graph template -## API Integration +### API Integration -The frontend integrates with the State Manager API endpoints: +The dashboard integrates with the State Manager API endpoints: - `PUT /v0/namespace/{namespace}/nodes/` - Register nodes - `PUT /v0/namespace/{namespace}/graph/{graph_name}` - Create/update graph template @@ -178,59 +162,109 @@ The frontend integrates with the State Manager API endpoints: - `POST /v0/namespace/{namespace}/states/{state_id}/executed` - Execute state - `GET /v0/namespace/{namespace}/state/{state_id}/secrets` - Get secrets -## Architecture - -### Components - -- **WorkflowVisualizer**: Displays the workflow steps and their status -- **NodeSchemaViewer**: Shows node schemas and parameters -- **StateManager**: Manages state lifecycle and execution -- **GraphTemplateBuilder**: Builds and edits graph templates - -### Services +## 🏗️ Architecture -- **apiService**: Handles all API communication with the state manager +### Technology Stack -### Types - -- Complete TypeScript definitions matching the state manager API models -- Workflow state management types -- Component prop interfaces - -## Development +- **Frontend Framework**: Next.js 15 with React 19 +- **Styling**: Tailwind CSS 4 +- **UI Components**: Custom components with Lucide React icons +- **Graph Visualization**: ReactFlow for graph building +- **Charts**: Recharts for data visualization +- **Type Safety**: TypeScript throughout ### Project Structure ``` -src/ -├── app/ -│ └── page.tsx # Main dashboard -├── components/ -│ ├── WorkflowVisualizer.tsx -│ ├── NodeSchemaViewer.tsx -│ ├── StateManager.tsx -│ └── GraphTemplateBuilder.tsx -├── services/ -│ └── api.ts # API service -└── types/ - └── state-manager.ts # TypeScript definitions +dashboard/ +├── src/ +│ ├── app/ +│ │ └── page.tsx # Main dashboard application +│ ├── components/ +│ │ ├── GraphTemplateBuilder.tsx # Graph template creation +│ │ ├── NamespaceOverview.tsx # Overview dashboard +│ │ ├── StatesByRunId.tsx # State execution tracking +│ │ ├── NodeDetailModal.tsx # Node details modal +│ │ ├── GraphTemplateDetailModal.tsx # Graph template details +│ │ └── GraphVisualization.tsx # Graph visualization +│ ├── services/ +│ │ └── api.ts # API service layer +│ └── types/ +│ └── state-manager.ts # TypeScript definitions +├── public/ # Static assets +├── Dockerfile # Docker configuration +├── docker-compose.yml # Docker Compose setup +└── env.example # Environment variables template ``` +### Key Components + +- **NamespaceOverview**: Main dashboard with statistics and quick actions +- **GraphTemplateBuilder**: Visual graph template creation interface +- **StatesByRunId**: State execution tracking and management +- **NodeDetailModal**: Detailed node information display +- **GraphTemplateDetailModal**: Comprehensive graph template view +- **GraphVisualization**: Interactive graph visualization + +## 🛠️ Development + ### Available Scripts -- `npm run dev` - Start development server +- `npm run dev` - Start development server with Turbopack - `npm run build` - Build for production - `npm run start` - Start production server - `npm run lint` - Run ESLint -## Contributing +### Development Features -1. Fork the repository -2. Create a feature branch -3. Make your changes -4. Add tests if applicable -5. Submit a pull request +- **Hot Reload**: Fast development with Next.js hot reloading +- **TypeScript**: Full type safety throughout the application +- **ESLint**: Code quality and consistency +- **Turbopack**: Fast bundling for development -## License +### State Status Types + +The application tracks various state statuses: + +- **CREATED**: State has been created and is waiting to be processed +- **QUEUED**: State is queued and waiting for execution +- **EXECUTED**: State has been executed successfully +- **NEXT_CREATED**: Next state has been created based on this execution +- **RETRY_CREATED**: Retry state has been created due to failure +- **TIMEDOUT**: State execution timed out +- **ERRORED**: State execution failed with an error +- **CANCELLED**: State execution was cancelled +- **SUCCESS**: State completed successfully + +## 🤝 Contributing + +1. **Fork the repository** +2. **Create a feature branch**: `git checkout -b feature/amazing-feature` +3. **Make your changes** and add tests if applicable +4. **Commit your changes**: `git commit -m 'Add amazing feature'` +5. **Push to the branch**: `git push origin feature/amazing-feature` +6. **Submit a pull request** + +### Development Guidelines + +- Follow TypeScript best practices +- Use Tailwind CSS for styling +- Write clean, readable code +- Add appropriate error handling +- Test your changes thoroughly + +## 📄 License This project is part of the Exosphere State Manager ecosystem. + +## 🆘 Support + +For support and questions: + +- Check the [Exosphere State Manager documentation](https://docs.exosphere.com) +- Open an issue in the repository +- Contact the development team + +--- + +**Built with ❤️ for the Exosphere ecosystem**