Frontend Dashboard

// Standard API call pattern — used on every page
const fetchData = async () => {
  const token = localStorage.getItem('token');
  
  const response = await fetch(`${API_BASE}/api/alerts?page=${page}`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });

  if (response.status === 401) {
    // Token expired — redirect to login
    localStorage.removeItem('token');
    navigate('/login');
    return;
  }

  const data = await response.json();
  setAlerts(data.alerts);
  setTotalPages(data.total_pages);
};

// Auto-refresh every 10 seconds for live pages
useEffect(() => {
  fetchData();
  const interval = setInterval(fetchData, 10000);
  return () => clearInterval(interval);  // cleanup on unmount
}, [page]);

// Theme toggle — stored in localStorage
const [isDark, setIsDark] = useState(
  localStorage.getItem('theme') === 'dark'
);

const toggleTheme = () => {
  const newTheme = !isDark;
  setIsDark(newTheme);
  localStorage.setItem('theme', newTheme ? 'dark' : 'light');
  // Apply to root element — all CSS variables update instantly
  document.documentElement.setAttribute('data-theme', newTheme ? 'dark' : 'light');
};

/* Light mode (default) */
:root {
  --bg: #f0f4f8;
  --surface: #ffffff;
  --text: #0f172a;
  --border: #e2e8f0;
}

/* Dark mode — overrides same variables */
[data-theme="dark"] {
  --bg: #0b0f1a;
  --surface: #111827;
  --text: #e2e8f0;
  --border: #1e2d45;
}

/* All components use variables — theme switch is instant */
.card {
  background: var(--surface);   /* automatically changes with theme */
  color: var(--text);
  border: 1px solid var(--border);
}

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # Serve static files (JS, CSS, images) directly
    location ~* \.(js|css|png|jpg|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # All other URLs → return index.html so React Router handles them
    location / {
        try_files $uri $uri/ /index.html;
    }
}

# Stage 1: Build React app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2: Serve with nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

# Both frontend pods should show Running on different nodes
kubectl get pods -A -o wide | grep frontend

# Check service and NodePort
kubectl get svc -A | grep frontend

# View frontend logs
kubectl logs -l app=edgeguard-frontend --all-containers