Skip to content

DEVOPS-PANEL-INTEGRATION.md

Latest commit

 

History

History
412 lines (317 loc) · 8.78 KB

DEVOPS-PANEL-INTEGRATION.md

File metadata and controls

412 lines (317 loc) · 8.78 KB

DevOps Panel Integration Guide

This document explains how the new DevOps Control Panel integrates with the existing DevOps repository.

What Was Created

A complete Next.js 15 DevOps control panel in k:/git/DevOps/devops-panel/ with:

  • Authentication system with session management
  • Dashboard with status monitoring
  • API integrations for GitHub Actions and Vercel deployments
  • VLN styling matching vln.gg design system
  • Production-ready deployment configuration

Directory Structure

k:/git/DevOps/
├── devops-panel/              # NEW - Control Panel
│   ├── app/                   # Next.js pages and API routes
│   ├── components/            # React components
│   ├── lib/                   # Utilities and auth
│   ├── package.json           # Dependencies
│   ├── README.md              # Full documentation
│   ├── DEPLOYMENT.md          # Deployment guide
│   ├── QUICKSTART.md          # Quick start guide
│   └── PROJECT_SUMMARY.md     # Technical overview
├── scripts/                   # EXISTING - Bash scripts
├── .github/workflows/         # EXISTING - GitHub Actions
├── api/                       # EXISTING - Python API
├── public/                    # EXISTING - Static files
└── ...                        # Other existing files

Integration Points

1. DevOps Scripts Integration

The panel can execute your existing bash scripts from k:/git/DevOps/scripts/:

In .env:

DEVOPS_SCRIPTS_PATH=k:/git/DevOps/scripts

Scripts available:

  • milestone-status.sh - Milestone tracking
  • check-milestone-progress.sh - Progress checking
  • update-changelog.sh - Changelog updates
  • All other automation scripts

2. GitHub Actions Integration

The panel monitors workflows from .github/workflows/:

In .env:

GITHUB_TOKEN=your_github_token
GITHUB_REPO=Fused-Gaming/DevOps

3. Vercel Deployments

Monitors all Vercel deployments including:

  • Main DevOps site
  • VLN.gg
  • Attorney Finder Bot
  • Any other Vercel projects

In .env:

VERCEL_TOKEN=your_vercel_token

Deployment Options

Option 1: Subdomain (Recommended)

Deploy panel to dev.vln.gg as a separate Vercel project:

cd k:/git/DevOps/devops-panel
vercel --prod
vercel domains add dev.vln.gg

Benefits:

  • Clean separation
  • Independent scaling
  • Easier updates
  • Own deployment pipeline

Option 2: Subdirectory

Deploy as part of main DevOps site at yoursite.com/panel:

  1. Update next.config.ts:
const nextConfig = {
  basePath: '/panel',
  assetPrefix: '/panel',
};
  1. Update root vercel.json:
{
  "routes": [
    {
      "src": "/panel/(.*)",
      "dest": "/devops-panel/$1"
    }
  ]
}

Option 3: Local Development Only

Run only on your local machine:

cd k:/git/DevOps/devops-panel
pnpm dev

Access at http://localhost:3000

Environment Variables

Development (.env file)

DEVOPS_USERNAME=admin
DEVOPS_PASSWORD=yourpassword
SESSION_SECRET=generate_random_32_chars
GITHUB_TOKEN=ghp_yourtoken
VERCEL_TOKEN=your_vercel_token
DEVOPS_SCRIPTS_PATH=k:/git/DevOps/scripts

Production (Vercel Secrets)

vercel env add DEVOPS_USERNAME
vercel env add DEVOPS_PASSWORD_HASH
vercel env add SESSION_SECRET
vercel env add GITHUB_TOKEN
vercel env add VERCEL_TOKEN

Git Integration

Add to Existing Repo

cd k:/git/DevOps
git add devops-panel/
git add DEVOPS-PANEL-INTEGRATION.md
git commit -m "feat: add DevOps control panel

- Next.js 15 dashboard with VLN styling
- Authentication system
- GitHub Actions monitoring
- Vercel deployment tracking
- Milestone progress visualization
- Quick action buttons
- Production-ready for dev.vln.gg"
git push

.gitignore

Already configured in devops-panel/.gitignore:

  • .env files (secrets)
  • node_modules/
  • .next/ build
  • Vercel files

GitHub Actions Workflow

Add automated deployment:

Create .github/workflows/deploy-panel.yml:

name: Deploy DevOps Panel

on:
  push:
    branches: [main]
    paths:
      - 'devops-panel/**'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        working-directory: ./devops-panel
        run: pnpm install

      - name: Build
        working-directory: ./devops-panel
        run: pnpm build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: ./devops-panel
          vercel-args: '--prod'

Extending the Panel

Add Custom Metrics

Edit app/page.tsx:

<StatusCard
  title="Custom Metric"
  description="Your description"
  icon={YourIcon}
  status="success"
  value="100%"
/>

Add New API Route

Create app/api/your-route/route.ts:

import { NextResponse } from "next/server";
import { getSession } from "@/lib/auth/session";

export async function GET() {
  const session = await getSession();
  if (!session.isLoggedIn) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // Your logic here
  return NextResponse.json({ data: "your data" });
}

Add Dashboard Widget

  1. Create component in components/devops/
  2. Import in app/page.tsx
  3. Add to dashboard grid

Security Considerations

Development

  • Use plain passwords in .env
  • HTTP on localhost is fine
  • Simple authentication

Production

  • Use bcrypt hashed passwords
  • HTTPS enforced by Vercel
  • Strong session secrets
  • Tokens as Vercel secrets
  • Security headers configured

Maintenance

Update Panel

cd k:/git/DevOps/devops-panel
git pull
pnpm install
vercel --prod

Update Dependencies

pnpm update

View Logs

vercel logs --prod --follow

Testing Locally

Full Stack Test

# Terminal 1: Run panel
cd k:/git/DevOps/devops-panel
pnpm dev

# Terminal 2: Run existing API (if needed)
cd k:/git/DevOps
# Your existing setup

Test API Integrations

# Test milestone API
curl http://localhost:3000/api/milestones

# Test deployments API
curl http://localhost:3000/api/deployments

# Test GitHub API
curl http://localhost:3000/api/github?repo=Fused-Gaming/DevOps

Migration Checklist

  • Review all created files
  • Configure .env file
  • Test locally with pnpm dev
  • Verify authentication works
  • Test API integrations
  • Commit to git
  • Deploy to Vercel
  • Configure custom domain
  • Set production environment variables
  • Test production deployment
  • Set up monitoring/alerts
  • Document any customizations

Rollback Plan

If issues occur:

  1. Local development: Just stop pnpm dev
  2. Vercel deployment: vercel rollback
  3. Git: git revert <commit>
  4. Emergency: Delete Vercel project

Support Resources

Documentation

  • README.md - Complete project documentation
  • DEPLOYMENT.md - Deployment guide
  • QUICKSTART.md - Quick start guide
  • PROJECT_SUMMARY.md - Technical overview

External Docs

Troubleshooting

  1. Check Vercel logs: vercel logs --prod
  2. Check browser console for errors
  3. Verify environment variables
  4. Test API routes independently

Future Enhancements

Consider adding:

  • Real-time updates with WebSockets
  • Email notifications for deployments
  • Slack integration
  • Custom alerts and thresholds
  • Historical data tracking
  • User management (multi-user)
  • Role-based access control
  • API rate limiting
  • Advanced analytics
  • Mobile app (React Native)

Costs

Development

  • Free - All local

Production (Vercel)

  • Hobby Plan: Free for personal use
  • Pro Plan: $20/mo (recommended for production)
  • Consider usage limits

Third-party APIs

  • GitHub: Free for personal tokens
  • Vercel API: Included with plan

Performance

Expected metrics:

  • Initial load: < 2s
  • API response: < 500ms
  • Lighthouse score: 90+
  • Bundle size: ~200KB gzipped

Conclusion

The DevOps Control Panel is a complete, production-ready system that integrates seamlessly with your existing DevOps infrastructure. It provides a modern, visual interface for managing deployments, tracking milestones, and monitoring system health.

Deploy to dev.vln.gg and enjoy!

Created: 2024-11-19 Version: 1.0.0 Status: Production Ready