sixsmith/coop-cloud-front
0
0
Fork 0
forked from BornDeleuze/coop-cloud-front
Code Pull Requests Activity

Compare commits

base: sixsmith:zip-back-front
Branches Tags
sixsmith:main sixsmith:zip-back-front sixsmith:dev sixsmith:rewrite-auth BornDeleuze:dev BornDeleuze:main BornDeleuze:rewrite-auth
..
compare: BornDeleuze:dev
Branches Tags
BornDeleuze:dev BornDeleuze:main BornDeleuze:rewrite-auth sixsmith:main sixsmith:zip-back-front sixsmith:dev sixsmith:rewrite-auth

1 Commits
zip-back-f ... dev

Author SHA1 Message Date
Matt Beaudoin
89da98e35c logs hooked up 2026-03-05 08:16:11 -08:00
35 changed files with 1547 additions and 983 deletions
Expand all files Collapse all files

14
Netlify.toml Normal file
View File

@ -0,0 +1,14 @@
[build]
command = "npm run build"
publish = "dist"
# Environment variables for build
[build.environment]
VITE_MOCK_AUTH = "true"
VITE_API_URL = "http://localhost:3000/api"
# Redirect all requests to index.html for client-side routing
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

24
src/App.tsx
View File

@ -1,12 +1,12 @@
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import { LoginForm } from "./routes/Login/LoginForm";
import { Authenticated } from "./components/Authenticated";
import { Dashboard } from "./routes/Authenticated/Dashboard/Dashboard";
import { Apps } from "./routes/Authenticated/Apps/Apps";
import { AppDetail } from "./routes/Authenticated/Apps/App";
import { Servers } from "./routes/Authenticated/Servers/Servers";
import { Server } from "./routes/Authenticated/Servers/Server";
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import { LoginForm } from './routes/Login/LoginForm';
import { Authenticated } from './components/Authenticated';
import { Dashboard } from './routes/Authenticated/Dashboard/Dashboard';
import { Apps } from './routes/Authenticated/Apps/Apps';
import { AppDetail } from './routes/Authenticated/Apps/App';
import { Servers } from './routes/Authenticated/Servers/Servers';
import { Server } from './routes/Authenticated/Servers/Server';
function App() {
return (
@ -15,7 +15,7 @@ function App() {
<Routes>
{/* Public routes */}
<Route path="/login" element={<LoginForm />} />
{/* Protected routes */}
<Route element={<Authenticated />}>
<Route path="/" element={<Navigate to="/dashboard" replace />} />
@ -25,7 +25,7 @@ function App() {
<Route path="/servers" element={<Servers />} />
<Route path="/servers/:serverName" element={<Server />} />
</Route>
{/* 404 catch-all */}
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
@ -34,4 +34,4 @@ function App() {
);
}
export default App;
export default App;

0
public/coopcloud_logo_grey.svg → src/assets/coopcloud_logo_grey.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

16
src/assets/scss/_fonts.scss
View File

@ -1,30 +1,30 @@
@font-face {
font-family: "Lora";
src: url("https://coopcloud.tech/font/Lora-Italic.woff2") format("woff2");
font-family: 'Lora';
src: url('https://coopcloud.tech/font/Lora-Italic.woff2') format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("https://coopcloud.tech/font/manrope.light.woff2") format("woff2");
font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("https://coopcloud.tech/font/manrope.medium.woff2") format("woff2");
font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("https://coopcloud.tech/font/manrope.bold.woff2") format("woff2");
font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;

8
src/assets/scss/_global.scss
View File

@ -1,5 +1,5 @@
@use "./variables" as *;
@use "./mixins" as *;
@use './variables' as *;
@use './mixins' as *;
body {
margin: 0;
@ -75,9 +75,7 @@ body {
align-items: center;
gap: $spacing-lg;
padding: $spacing-xl;
transition:
transform $transition-base,
box-shadow $transition-base;
transition: transform $transition-base, box-shadow $transition-base;
&:hover {
transform: translateY(-2px);

30
src/assets/scss/_mixins.scss
View File

@ -1,4 +1,4 @@
@use "variables" as *;
@use 'variables' as *;
// Flexbox center
@mixin flex-center {
@ -9,22 +9,14 @@
// Responsive breakpoints
@mixin respond-to($breakpoint) {
@if $breakpoint == "sm" {
@media (min-width: $breakpoint-sm) {
@content;
}
} @else if $breakpoint == "md" {
@media (min-width: $breakpoint-md) {
@content;
}
} @else if $breakpoint == "lg" {
@media (min-width: $breakpoint-lg) {
@content;
}
} @else if $breakpoint == "xl" {
@media (min-width: $breakpoint-xl) {
@content;
}
@if $breakpoint == 'sm' {
@media (min-width: $breakpoint-sm) { @content; }
} @else if $breakpoint == 'md' {
@media (min-width: $breakpoint-md) { @content; }
} @else if $breakpoint == 'lg' {
@media (min-width: $breakpoint-lg) { @content; }
} @else if $breakpoint == 'xl' {
@media (min-width: $breakpoint-xl) { @content; }
}
}
@ -44,7 +36,7 @@
font-weight: $font-weight-semibold;
cursor: pointer;
transition: all $transition-base;
&:disabled {
opacity: 0.6;
cursor: not-allowed;
@ -71,4 +63,4 @@
font-weight: $font-weight-semibold;
background-color: rgba($color, 0.1);
// color: darken($color, 20%);
}
}

27
src/assets/scss/_variables.scss
View File

@ -1,6 +1,6 @@
// Colors
$primary: #efefef;
$primary-dark: #6a9cff;
$primary: #EFEFEF;
$primary-dark: #6A9CFF;
$primary-light: #ff4f88;
$secondary: #363636;
@ -10,7 +10,8 @@ $error: #ef4444;
$info: #3b82f6;
$text-primary: #363636;
$text-secondary: #4a4a4a;
$text-secondary: #4a4a4a
;
$text-muted: #999;
$bg-primary: #ffffff;
@ -30,21 +31,11 @@ $spacing-3xl: 4rem;
// Typography
$font-family-body:
"Manrope",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
$font-family-heading: "Lora", serif;
$font-family-heading: 'Lora', serif;
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
@ -81,4 +72,4 @@ $transition-slow: 0.3s ease;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-xl: 1280px;

8
src/assets/scss/main.scss
View File

@ -1,7 +1,7 @@
// 1. Configuration & helpers (no CSS output)
@use "variables";
@use "mixins";
@use "fonts";
@use 'variables';
@use 'mixins';
@use 'fonts';
// 2. Global base styles
@use "global";
@use 'global';

24
src/components/Authenticated.tsx
View File

@ -1,26 +1,24 @@
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
export const Authenticated: React.FC = () => {
const { isAuthenticated, loading } = useAuth();
console.log("🛡️ ProtectedRoute:", { isAuthenticated, loading });
console.log('ProtectedRoute:', { isAuthenticated, loading });
if (loading) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh'
}}>
<p>Loading...</p>
</div>
);
}
return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};
};

63
src/components/Header/Header.tsx
View File

@ -1,7 +1,9 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../hooks/useAuth";
import "./_Header.scss";
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import './_Header.scss';
import logo from '../../assets/coopcloud_logo_grey.svg';
interface HeaderProps {
children: React.ReactNode;
@ -13,33 +15,32 @@ export const Header: React.FC<HeaderProps> = ({ children }) => {
const handleLogout = async () => {
await logout();
navigate("/login");
navigate('/login');
};
return (
<header className="layout-header">
<div className="header-content">
<h1 onClick={() => navigate("/dashboard")} className="logo">
<img className="logo" src="/public/coopcloud_logo_grey.svg" />
</h1>
<nav className="nav">
<button onClick={() => navigate("/dashboard")} className="nav-link">
Dashboard
</button>
<button onClick={() => navigate("/apps")} className="nav-link">
Apps
</button>
<button onClick={() => navigate("/servers")} className="nav-link">
Servers
</button>
</nav>
return(
<header className="layout-header">
<div className="header-content">
<h1 onClick={() => navigate('/dashboard')} className="logo">
<img className="logo" src={logo}/>
</h1>
<nav className="nav">
<button onClick={() => navigate('/dashboard')} className="nav-link">
Dashboard
</button>
<button onClick={() => navigate('/apps')} className="nav-link">
Apps
</button>
<button onClick={() => navigate('/servers')} className="nav-link">
Servers
</button>
</nav>
<div className="user-menu">
<span className="username">{user?.username}</span>
<button onClick={handleLogout} className="logout-button">
Logout
</button>
</div>
<div className="user-menu">
<span className="username">{user?.username}</span>
<button onClick={handleLogout} className="logout-button">
Logout
</button>
</div>
</header>
);
};
</div>
</header>
)}

10
src/components/Header/_Header.scss
View File

@ -1,5 +1,5 @@
@use "../../assets/scss/variables" as *;
@use "../../assets/scss/mixins" as *;
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
.layout-header {
background-color: $primary-light;
@ -63,7 +63,7 @@
// Active indicator
&.active::after {
content: "";
content: '';
position: absolute;
bottom: 0;
left: 50%;
@ -92,7 +92,7 @@
.username {
font-weight: $font-weight-medium;
font-size: $font-size-base;
@media (max-width: 480px) {
font-size: $font-size-sm;
}
@ -124,4 +124,4 @@
}
}
}
}
}

86
src/components/Terminal/Terminal.tsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useEffect, useRef, useState } from 'react';
import type { LogEntry } from '../../services/mockApi'; // Import from mockApi (or api for real)
import './_Terminal.scss';
interface TerminalProps {
logs: LogEntry[];
isActive: boolean;
onClose?: () => void;
}
export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
const terminalRef = useRef<HTMLDivElement>(null);
const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
// Stream logs in with delays for realistic effect
useEffect(() => {
if (!isActive || logs.length === 0) {
setDisplayedLogs([]);
return;
}
setDisplayedLogs([]);
let currentIndex = 0;
const streamLogs = () => {
if (currentIndex < logs.length) {
setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
currentIndex++;
// Variable delay based on log type
const delay = logs[currentIndex - 1]?.type === 'command' ? 200 :
logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
setTimeout(streamLogs, delay);
}
};
streamLogs();
}, [logs, isActive]);
// Auto-scroll to bottom
useEffect(() => {
if (terminalRef.current) {
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
}
}, [displayedLogs]);
if (!isActive && displayedLogs.length === 0) {
return null;
}
const formatTime = (date: Date) => {
return date.toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
};
return (
<div className="terminal-container">
<div className="terminal-header">
<div className="terminal-controls">
<span className="terminal-control close" onClick={onClose}></span>
<span className="terminal-control minimize"></span>
<span className="terminal-control maximize"></span>
</div>
<div className="terminal-title">abra CLI</div>
<div className="terminal-spacer"></div>
</div>
<div className="terminal-content" ref={terminalRef}>
{displayedLogs.filter(log => log && log.type).map((log, index) => (
<div key={index} className={`terminal-line terminal-${log.type}`}>
<span className="terminal-timestamp">[{formatTime(log.timestamp)}]</span>
<span className="terminal-text">{log.text}</span>
</div>
))}
{isActive && displayedLogs.length > 0 && (
<div className="terminal-cursor">▊</div>
)}
</div>
</div>
);
};

204
src/components/Terminal/_Terminal.scss Normal file
View File

@ -0,0 +1,204 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
.terminal-container {
background: #1e1e1e;
border-radius: $radius-md;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
margin-bottom: $spacing-xl;
animation: terminal-appear 0.3s ease-out;
}
@keyframes terminal-appear {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.terminal-header {
display: flex;
align-items: center;
padding: $spacing-sm $spacing-md;
background: #323232;
border-bottom: 1px solid #404040;
user-select: none;
.terminal-controls {
display: flex;
gap: $spacing-xs;
min-width: 60px;
}
.terminal-control {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
}
&.close {
background: #ff5f56;
}
&.minimize {
background: #ffbd2e;
}
&.maximize {
background: #27c93f;
}
}
.terminal-title {
flex: 1;
text-align: center;
color: #a0a0a0;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
}
.terminal-spacer {
min-width: 60px;
}
}
.terminal-content {
padding: $spacing-md;
background: #1e1e1e;
color: #d4d4d4;
font-size: 13px;
line-height: 1.6;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
/* Custom scrollbar */
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #2d2d2d;
}
&::-webkit-scrollbar-thumb {
background: #4a4a4a;
border-radius: 4px;
&:hover {
background: #5a5a5a;
}
}
}
.terminal-line {
display: flex;
margin-bottom: 2px;
animation: terminal-line-appear 0.2s ease-out;
white-space: pre-wrap;
word-break: break-word;
@keyframes terminal-line-appear {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.terminal-timestamp {
color: #6a6a6a;
margin-right: $spacing-sm;
flex-shrink: 0;
font-size: 11px;
}
.terminal-text {
flex: 1;
}
/* Line type styles */
&.terminal-info {
.terminal-text {
color: #4fc3f7;
}
}
&.terminal-success {
.terminal-text {
color: #81c784;
font-weight: $font-weight-medium;
}
}
&.terminal-error {
.terminal-text {
color: #e57373;
font-weight: $font-weight-medium;
}
}
&.terminal-warning {
.terminal-text {
color: #ffb74d;
}
}
&.terminal-command {
.terminal-text {
color: #ba68c8;
font-weight: $font-weight-semibold;
}
}
&.terminal-output {
.terminal-text {
color: #d4d4d4;
opacity: 0.9;
}
}
}
.terminal-cursor {
display: inline-block;
color: #81c784;
margin-left: 4px;
animation: terminal-cursor-blink 1s step-end infinite;
}
@keyframes terminal-cursor-blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
.terminal-content {
font-size: 12px;
padding: $spacing-sm;
}
.terminal-line {
.terminal-timestamp {
display: none;
}
}
}

52
src/context/AuthContext.tsx
View File

@ -1,12 +1,6 @@
import React, {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { apiService } from "../services/api";
import type { LoginCredentials, User } from "../types";
import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
import { apiService } from '../services/api';
import type { LoginCredentials, User } from '../types';
interface AuthContextType {
user: User | null;
@ -16,9 +10,7 @@ interface AuthContextType {
isAuthenticated: boolean;
}
export const AuthContext = createContext<AuthContextType | undefined>(
undefined,
);
export const AuthContext = createContext<AuthContextType | undefined>(undefined);
interface AuthProviderProps {
children: ReactNode;
@ -28,39 +20,39 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const isMockAuthMode = import.meta.env.VITE_MOCK_AUTH === "true";
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const checkAuth = async () => {
console.log("🔍 checkAuth running, isMockAuthMode:", isMockAuthMode);
console.log('checkAuth running, isMockMode:', isMockMode);
try {
if (isMockAuthMode) {
console.log("✅ Mock mode - setting mock user");
if (isMockMode) {
console.log('Mock mode - setting mock user');
setUser({
id: "mock-user-1",
username: "developer",
email: "dev@coopcloud.tech",
id: 'mock-user-1',
username: 'developer',
email: 'dev@coopcloud.tech',
});
setLoading(false);
console.log("✅ Mock user set, loading set to false");
console.log('Mock user set, loading set to false');
return;
}
const token = localStorage.getItem("auth_token");
const token = localStorage.getItem('auth_token');
if (token) {
const currentUser = await apiService.getCurrentUser();
setUser(currentUser);
}
} catch (error) {
console.error("Auth check failed:", error);
localStorage.removeItem("auth_token");
console.error('Auth check failed:', error);
localStorage.removeItem('auth_token');
} finally {
setLoading(false);
}
};
checkAuth();
}, [isMockAuthMode]);
}, [isMockMode]);
const login = async (credentials: LoginCredentials) => {
try {
@ -83,19 +75,15 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
logout,
isAuthenticated: !!user,
};
console.log("📊 AuthContext state:", {
user,
loading,
isAuthenticated: !!user,
});
console.log('AuthContext state:', { user, loading, isAuthenticated: !!user });
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export function useAuth() {
export function useAuth() {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error("useAuth must be used within an AuthProvider");
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}
}

12
src/hooks/useAuth.ts
View File

@ -1,12 +1,12 @@
import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";
import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';
export const useAuth = () => {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error("useAuth must be used within an AuthProvider");
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
};

29
src/index.scss
View File

@ -1,24 +1,14 @@
@use "./assets/scss/variables" as *;
@use "./assets/scss/mixins" as *;
@use "./assets/scss/global" as *;
@use './assets/scss/variables' as *;
@use './assets/scss/mixins' as *;
@use './assets/scss/global' as *;
// Global root styles
:root {
line-height: 1.5;
font-weight: 400;
font-family:
"Manrope",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
color-scheme: light dark;
color: $text-primary;
@ -54,12 +44,7 @@ a {
}
// Global heading styles
h1,
h2,
h3,
h4,
h5,
h6 {
h1, h2, h3, h4, h5, h6 {
color: $text-primary;
margin: 0;
}

12
src/main.tsx
View File

@ -1,10 +1,10 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.scss";
import App from "./App.tsx";
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.scss'
import App from './App.tsx'
createRoot(document.getElementById("root")!).render(
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
);
)

350
src/routes/Authenticated/Apps/App.scss
View File

@ -1,136 +1,100 @@
@use "../../../assets/scss/variables" as *;
@use "../../../assets/scss/mixins" as *;
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
@use '../../../assets/scss/global' as *;
.app-detail-page {
min-height: 100vh;
background: #f5f5f5;
@extend .page-wrapper;
}
.app-detail-content {
max-width: 1400px;
margin: 0 auto;
padding: 24px;
.loading,
.error {
text-align: center;
padding: 60px 20px;
font-size: 16px;
color: #666;
}
.error {
color: #dc3545;
}
}
// Breadcrumb navigation
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 14px;
.breadcrumb-link {
background: none;
border: none;
color: #0066cc;
cursor: pointer;
padding: 0;
font-size: 14px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.breadcrumb-separator {
color: #999;
}
.breadcrumb-current {
color: #333;
font-weight: 500;
}
@extend .page-content;
}
// App header section
.app-header {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@include card;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
gap: $spacing-xl;
margin-bottom: $spacing-xl;
.app-title-section {
flex: 1;
min-width: 300px;
h1 {
margin: 0 0 12px 0;
font-size: 28px;
color: #1a1a1a;
margin: 0 0 $spacing-md 0;
font-size: $font-size-3xl;
color: $text-primary;
font-weight: $font-weight-bold;
}
.app-meta {
display: flex;
gap: 8px;
gap: $spacing-sm;
flex-wrap: wrap;
}
}
.app-actions {
display: flex;
gap: 12px;
gap: $spacing-md;
flex-wrap: wrap;
}
}
// Action buttons
.action-btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
padding: $spacing-sm $spacing-lg;
border: 2px solid $border-color;
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all 0.2s;
transition: all $transition-base;
background: white;
color: $text-primary;
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: $shadow-md;
}
&.primary {
background: #0066cc;
background: $primary;
color: white;
border-color: $primary;
&:hover:not(:disabled) {
background: #0052a3;
background: $primary-light;
border-color: $primary-light;
}
}
&.secondary {
background: #f0f0f0;
color: #333;
background: $bg-secondary;
color: $text-primary;
border-color: $border-color;
&:hover:not(:disabled) {
background: #e0e0e0;
background: darken($bg-secondary, 5%);
}
}
&.danger {
background: #dc3545;
background: $error;
color: white;
border-color: $error;
&:hover:not(:disabled) {
background: #c82333;
background: darken($error, 10%);
}
}
}
@ -140,56 +104,11 @@
@extend .secondary;
}
// Badges
.recipe-badge {
display: inline-block;
padding: 4px 12px;
background: #e7f3ff;
color: #0066cc;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
&.status-deployed,
&.status-running {
background: #d4edda;
color: #155724;
}
&.status-stopped {
background: #f8d7da;
color: #721c24;
}
&.status-unknown {
background: #e2e3e5;
color: #383d41;
}
}
.chaos-badge {
display: inline-block;
padding: 4px 12px;
background: #fff3cd;
color: #856404;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
// Content grid layout
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
gap: $spacing-xl;
@media (max-width: 1024px) {
grid-template-columns: 1fr;
@ -198,21 +117,18 @@
// Info cards
.info-card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 24px;
@include card;
margin-bottom: $spacing-xl;
&:last-child {
margin-bottom: 0;
}
h2 {
margin: 0 0 20px 0;
font-size: 18px;
color: #1a1a1a;
font-weight: 600;
margin: 0 0 $spacing-lg 0;
font-size: $font-size-xl;
color: $text-primary;
font-weight: $font-weight-bold;
}
}
@ -220,44 +136,46 @@
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
gap: $spacing-lg;
}
.info-item {
display: flex;
flex-direction: column;
gap: 6px;
gap: $spacing-xs;
label {
font-size: 12px;
color: #666;
font-weight: 500;
font-size: $font-size-xs;
color: $text-secondary;
font-weight: $font-weight-medium;
text-transform: uppercase;
letter-spacing: 0.5px;
}
span {
font-size: 14px;
color: #1a1a1a;
font-size: $font-size-base;
color: $text-primary;
}
.no-value {
color: #999;
color: $text-muted;
font-style: italic;
}
.chaos-active {
color: #856404;
font-weight: 500;
color: darken($info, 10%);
font-weight: $font-weight-medium;
}
}
.domain-link {
color: $primary-dark;
color: $primary;
text-decoration: none;
font-size: 14px;
font-size: $font-size-base;
transition: color $transition-base;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}
@ -265,13 +183,15 @@
.server-link {
background: none;
border: none;
color: #0066cc;
color: $primary;
cursor: pointer;
padding: 0;
font-size: 14px;
font-size: $font-size-base;
text-align: left;
transition: color $transition-base;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}
@ -280,26 +200,27 @@
.version-info {
display: flex;
flex-direction: column;
gap: 20px;
gap: $spacing-lg;
.version-current {
label {
display: block;
font-size: 12px;
color: #666;
font-weight: 500;
font-size: $font-size-xs;
color: $text-secondary;
font-weight: $font-weight-medium;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
margin-bottom: $spacing-sm;
}
code {
display: inline-block;
background: #f5f5f5;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
color: #1a1a1a;
background: $bg-secondary;
padding: $spacing-sm $spacing-md;
border-radius: $radius-sm;
font-size: $font-size-sm;
color: $text-primary;
font-family: monospace;
}
}
@ -307,59 +228,66 @@
label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
font-weight: 500;
gap: $spacing-sm;
font-size: $font-size-xs;
color: $text-secondary;
font-weight: $font-weight-medium;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
margin-bottom: $spacing-md;
.upgrade-count {
background: #ffc107;
color: #856404;
background: $warning;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
border-radius: $radius-full;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
}
}
.upgrade-list {
display: flex;
flex-direction: column;
gap: 8px;
gap: $spacing-sm;
}
.upgrade-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #e9ecef;
gap: $spacing-md;
padding: $spacing-md;
background: $bg-secondary;
border-radius: $radius-md;
border: 2px solid transparent;
transition: border-color $transition-base;
&:hover {
border-color: $warning;
}
code {
flex: 1;
font-size: 13px;
color: #1a1a1a;
font-size: $font-size-sm;
color: $text-primary;
font-family: monospace;
}
.upgrade-btn {
padding: 6px 16px;
background: #ffc107;
color: #856404;
padding: $spacing-xs $spacing-md;
background: $warning;
color: white;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
border-radius: $radius-sm;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all 0.2s;
transition: all $transition-base;
&:hover:not(:disabled) {
background: #e0a800;
background: darken($warning, 10%);
transform: translateY(-1px);
}
&:disabled {
@ -371,13 +299,13 @@
}
.version-latest {
padding: 12px;
background: #d4edda;
color: #155724;
border-radius: 6px;
padding: $spacing-md;
background: rgba($success, 0.1);
color: darken($success, 10%);
border-radius: $radius-md;
text-align: center;
font-size: 14px;
font-weight: 500;
font-size: $font-size-base;
font-weight: $font-weight-medium;
}
}
@ -385,26 +313,27 @@
.action-list {
display: flex;
flex-direction: column;
gap: 8px;
gap: $spacing-sm;
.action-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
gap: $spacing-md;
padding: $spacing-md;
background: $bg-secondary;
border: 2px solid transparent;
border-radius: $radius-md;
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
color: #1a1a1a;
transition: all $transition-base;
font-size: $font-size-sm;
color: $text-primary;
text-align: left;
width: 100%;
&:hover:not(:disabled) {
background: #e9ecef;
border-color: #dee2e6;
background: white;
border-color: $primary;
transform: translateX(2px);
}
&:disabled {
@ -413,20 +342,15 @@
}
&.danger {
color: #dc3545;
&:hover:not(:disabled) {
background: #f8d7da;
border-color: #f5c6cb;
border-color: $error;
background: rgba($error, 0.05);
}
}
.action-icon {
font-size: 18px;
}
.action-text {
flex: 1;
font-weight: $font-weight-medium;
}
}
}
@ -435,14 +359,14 @@
.health-status {
display: flex;
flex-direction: column;
gap: 16px;
gap: $spacing-md;
.health-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid #e9ecef;
padding-bottom: $spacing-md;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
@ -450,14 +374,14 @@
}
.health-label {
font-size: 14px;
color: #666;
font-size: $font-size-sm;
color: $text-secondary;
}
.health-value {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: $text-primary;
}
}
}

253
src/routes/Authenticated/Apps/App.tsx
View File

@ -1,52 +1,55 @@
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { Header } from "../../../components/Header/Header";
import { apiService } from "../../../services/api";
import type { AbraApp } from "../../../types";
import "./App.scss";
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '../../../components/Header/Header';
import { Terminal } from '../../../components/Terminal/Terminal';
import { apiService } from '../../../services/api';
import type { AbraApp } from '../../../types';
import type { LogEntry } from '../../../services/mockApi';
import './App.scss';
export const AppDetail: React.FC = () => {
const { server, appName } = useParams<{ server: string; appName: string }>();
const navigate = useNavigate();
const [app, setApp] = useState<AbraApp | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [isEditing, setIsEditing] = useState(false);
const [error, setError] = useState('');
const [actionLoading, setActionLoading] = useState<string | null>(null);
// Terminal state
const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
const [terminalActive, setTerminalActive] = useState(false);
const isMockMode = !import.meta.env.VITE_API_URL;
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const fetchApp = async () => {
try {
if (isMockMode) {
const { mockApiService } = await import("../../../services/mockApi");
const { mockApiService } = await import('../../../services/mockApi');
const appsData = await mockApiService.getAppsGrouped();
// Find the specific app
const serverApps = appsData[server || ""];
const foundApp = serverApps?.apps.find((a) => a.appName === appName);
const serverApps = appsData[server || ''];
const foundApp = serverApps?.apps.find(a => a.appName === appName);
if (foundApp) {
setApp(foundApp);
} else {
setError("App not found");
setError('App not found');
}
} else {
// Real API call would be here
const appsData = await apiService.getAppsGrouped();
const serverApps = appsData[server || ""];
const foundApp = serverApps?.apps.find((a) => a.appName === appName);
const serverApps = appsData[server || ''];
const foundApp = serverApps?.apps.find(a => a.appName === appName);
if (foundApp) {
setApp(foundApp);
} else {
setError("App not found");
setError('App not found');
}
}
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load app");
setError(err instanceof Error ? err.message : 'Failed to load app');
} finally {
setLoading(false);
}
@ -55,30 +58,61 @@ export const AppDetail: React.FC = () => {
fetchApp();
}, [server, appName, isMockMode]);
const handleAction = async (action: string) => {
const handleAction = async (action: string, version?: string) => {
if (!app) return;
setActionLoading(action);
setTerminalActive(true);
setTerminalLogs([]);
try {
switch (action) {
case "start":
await apiService.startApp(app.appName);
break;
case "stop":
await apiService.stopApp(app.appName);
break;
case "deploy":
await apiService.deployApp(app.appName);
break;
case "upgrade":
// Upgrade logic would go here
console.log("Upgrade app");
break;
if (isMockMode) {
const { mockApiService } = await import('../../../services/mockApi');
const onLog = (log: LogEntry) => {
setTerminalLogs(prev => [...prev, log]);
};
switch (action) {
case 'start':
await mockApiService.startApp(app.appName, onLog);
break;
case 'stop':
await mockApiService.stopApp(app.appName, onLog);
break;
case 'deploy':
await mockApiService.deployApp(app.appName, onLog);
break;
case 'upgrade':
if (version) {
await mockApiService.upgradeApp(app.appName, version, onLog);
}
break;
case 'remove':
await mockApiService.removeApp(app.appName, onLog);
break;
}
} else {
// Real API calls
switch (action) {
case 'start':
await apiService.startApp(app.appName);
break;
case 'stop':
await apiService.stopApp(app.appName);
break;
case 'deploy':
await apiService.deployApp(app.appName);
break;
}
}
// Refresh app data after action
// In real implementation, you'd refetch the app
} catch (err) {
console.error("Action failed:", err);
console.error('Action failed:', err);
setTerminalLogs(prev => [...prev, {
type: 'error',
text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
timestamp: new Date()
}]);
} finally {
setActionLoading(null);
}
@ -100,8 +134,8 @@ export const AppDetail: React.FC = () => {
<div className="app-detail-page">
<Header />
<main className="app-detail-content">
<div className="error">{error || "App not found"}</div>
<button onClick={() => navigate("/apps")} className="back-button">
<div className="error">{error || 'App not found'}</div>
<button onClick={() => navigate('/apps')} className="back-button">
Back to Apps
</button>
</main>
@ -109,15 +143,14 @@ export const AppDetail: React.FC = () => {
);
}
const upgradeVersions =
app.upgrade !== "latest" ? app.upgrade.split("\n") : [];
const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
return (
<div className="app-detail-page">
<Header />
<main className="app-detail-content">
<div className="breadcrumb">
<button onClick={() => navigate("/apps")} className="breadcrumb-link">
<button onClick={() => navigate('/apps')} className="breadcrumb-link">
Apps
</button>
<span className="breadcrumb-separator">/</span>
@ -129,47 +162,44 @@ export const AppDetail: React.FC = () => {
<h1>{app.appName}</h1>
<div className="app-meta">
<span className="recipe-badge">{app.recipe}</span>
<span className={`status-badge status-${app.status}`}>
{app.status}
</span>
{app.chaos === "true" && (
<span className="chaos-badge" title="Chaos mode enabled">
Chaos
</span>
<span className={`status-badge status-${app.status}`}>{app.status}</span>
{app.chaos === 'true' && (
<span className="chaos-badge" title="Chaos mode enabled">🔬 Chaos</span>
)}
</div>
</div>
<div className="app-actions">
<button
className="action-btn secondary"
onClick={() => setIsEditing(!isEditing)}
>
{isEditing ? "Cancel" : "Edit"}
</button>
<button
<button
className="action-btn danger"
onClick={() => handleAction("stop")}
disabled={actionLoading === "stop"}
onClick={() => handleAction('stop')}
disabled={!!actionLoading}
>
{actionLoading === "stop" ? "Stopping..." : "Stop"}
{actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
</button>
<button
<button
className="action-btn primary"
onClick={() => handleAction("deploy")}
disabled={actionLoading === "deploy"}
onClick={() => handleAction('deploy')}
disabled={!!actionLoading}
>
{actionLoading === "deploy" ? "Deploying..." : "Deploy"}
{actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
</button>
</div>
</div>
{/* Terminal Component */}
<Terminal
logs={terminalLogs}
isActive={terminalActive}
onClose={() => setTerminalActive(false)}
/>
<div className="content-grid">
{/* Left Column - Main Info */}
<div className="main-column">
<section className="info-card">
<h2>Application Details</h2>
<div className="info-grid">
<div className="info-item">
<label>App Name</label>
@ -179,12 +209,7 @@ export const AppDetail: React.FC = () => {
<div className="info-item">
<label>Domain</label>
{app.domain ? (
<a
href={`https://${app.domain}`}
target="_blank"
rel="noopener noreferrer"
className="domain-link"
>
<a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
{app.domain} ↗
</a>
) : (
@ -194,7 +219,7 @@ export const AppDetail: React.FC = () => {
<div className="info-item">
<label>Server</label>
<button
<button
onClick={() => navigate(`/servers/${app.server}`)}
className="server-link"
>
@ -216,8 +241,8 @@ export const AppDetail: React.FC = () => {
<div className="info-item">
<label>Chaos Mode</label>
<span className={app.chaos === "true" ? "chaos-active" : ""}>
{app.chaos === "true" ? "🔬 Enabled" : "Disabled"}
<span className={app.chaos === 'true' ? 'chaos-active' : ''}>
{app.chaos === 'true' ? '🔬 Enabled' : 'Disabled'}
</span>
</div>
</div>
@ -225,14 +250,14 @@ export const AppDetail: React.FC = () => {
<section className="info-card">
<h2>Version Information</h2>
<div className="version-info">
<div className="version-current">
<label>Current Version</label>
<code>{app.version}</code>
</div>
{app.chaosVersion !== "unknown" && (
{app.chaosVersion !== 'unknown' && (
<div className="version-current">
<label>Chaos Version</label>
<code>{app.chaosVersion}</code>
@ -243,22 +268,18 @@ export const AppDetail: React.FC = () => {
<div className="version-upgrades">
<label>
Available Upgrades
<span className="upgrade-count">
{upgradeVersions.length}
</span>
<span className="upgrade-count">{upgradeVersions.length}</span>
</label>
<div className="upgrade-list">
{upgradeVersions.map((version, idx) => (
<div key={idx} className="upgrade-item">
<code>{version}</code>
<button
<button
className="upgrade-btn"
onClick={() => handleAction("upgrade")}
disabled={actionLoading === "upgrade"}
onClick={() => handleAction('upgrade', version)}
disabled={!!actionLoading}
>
{actionLoading === "upgrade"
? "Upgrading..."
: "Upgrade"}
{actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
</button>
</div>
))}
@ -266,49 +287,55 @@ export const AppDetail: React.FC = () => {
</div>
)}
{app.upgrade === "latest" && (
<div className="version-latest">Running latest version</div>
{app.upgrade === 'latest' && (
<div className="version-latest">
✓ Running latest version
</div>
)}
</div>
</section>
</div>
{/* Right Column - Actions & Logs */}
{/* Right Column - Actions & Stats */}
<div className="sidebar-column">
<section className="info-card">
<h2>Quick Actions</h2>
<div className="action-list">
<button
<button
className="action-list-item"
onClick={() => handleAction("start")}
disabled={actionLoading === "start"}
onClick={() => handleAction('start')}
disabled={!!actionLoading}
>
<span className="action-text">Start Application</span>
<span className="action-text">▶️ Start Application</span>
</button>
<button
<button
className="action-list-item"
onClick={() => handleAction("stop")}
disabled={actionLoading === "stop"}
onClick={() => handleAction('stop')}
disabled={!!actionLoading}
>
<span className="action-text">Stop Application</span>
<span className="action-text">⏹️ Stop Application</span>
</button>
<button className="action-list-item">
<span className="action-text">Restart Application</span>
<button
className="action-list-item"
onClick={() => handleAction('deploy')}
disabled={!!actionLoading}
>
<span className="action-text">🚀 Deploy Application</span>
</button>
<button className="action-list-item">
<span className="action-text">View Logs</span>
</button>
<button className="action-list-item">
<span className="action-text">Edit Configuration</span>
</button>
<button className="action-list-item danger">
<span className="action-text">Delete Application</span>
<button
className="action-list-item danger"
onClick={() => {
if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
handleAction('remove');
}
}}
disabled={!!actionLoading}
>
<span className="action-text">🗑️ Remove Application</span>
</button>
</div>
</section>

6
src/routes/Authenticated/Apps/Apps.scss
View File

@ -1,6 +1,6 @@
@use "../../../assets/scss/variables" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/global" as *;
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
@use '../../../assets/scss/global' as *;
// Extend global page wrapper
.apps-page {

125
src/routes/Authenticated/Apps/Apps.tsx
View File

@ -1,31 +1,27 @@
import React, { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Header } from "../../../components/Header/Header";
import { apiService } from "../../../services/api";
import type {
AbraApp,
AppWithServer,
ServerAppsResponse,
} from "../../../types";
import "./Apps.scss";
import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Header } from '../../../components/Header/Header';
import { apiService } from '../../../services/api';
import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../../types';
import './Apps.scss';
export const Apps: React.FC = () => {
const navigate = useNavigate();
const [appsData, setAppsData] = useState<ServerAppsResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [searchTerm, setSearchTerm] = useState("");
const [filterServer, setFilterServer] = useState<string>("all");
const [filterStatus, setFilterStatus] = useState<string>("all");
const [error, setError] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [filterServer, setFilterServer] = useState<string>('all');
const [filterStatus, setFilterStatus] = useState<string>('all');
const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
const isMockMode = !import.meta.env.VITE_API_URL;
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const fetchData = async () => {
try {
if (isMockMode) {
const { mockApiService } = await import("../../../services/mockApi");
const { mockApiService } = await import('../../../services/mockApi');
const data = await mockApiService.getAppsGrouped();
setAppsData(data);
} else {
@ -33,7 +29,7 @@ export const Apps: React.FC = () => {
setAppsData(data);
}
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load apps");
setError(err instanceof Error ? err.message : 'Failed to load apps');
} finally {
setLoading(false);
}
@ -45,15 +41,15 @@ export const Apps: React.FC = () => {
// Flatten and enrich apps data
const allApps: AppWithServer[] = useMemo(() => {
if (!appsData) return [];
return Object.entries(appsData).flatMap(([serverName, serverData]) =>
serverData.apps.map((app) => ({
serverData.apps.map(app => ({
...app,
serverStats: {
appCount: serverData.appCount,
upgradeCount: serverData.upgradeCount,
},
})),
}))
);
}, [appsData]);
@ -65,19 +61,17 @@ export const Apps: React.FC = () => {
// Filter apps
const filteredApps = useMemo(() => {
return allApps.filter((app) => {
const matchesSearch =
return allApps.filter(app => {
const matchesSearch =
app.appName.toLowerCase().includes(searchTerm.toLowerCase()) ||
app.recipe.toLowerCase().includes(searchTerm.toLowerCase()) ||
(app.domain || "").toLowerCase().includes(searchTerm.toLowerCase());
const matchesServer =
filterServer === "all" || app.server === filterServer;
const matchesChaos =
filterStatus === "all" ||
(filterStatus === "chaos" && app.chaos === "true") ||
(filterStatus === "stable" && app.chaos === "false");
const matchesUpgrade = !showUpgradesOnly || app.upgrade !== "latest";
(app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
const matchesServer = filterServer === 'all' || app.server === filterServer;
const matchesChaos = filterStatus === 'all' ||
(filterStatus === 'chaos' && app.chaos === 'true') ||
(filterStatus === 'stable' && app.chaos === 'false');
const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
});
@ -85,10 +79,8 @@ export const Apps: React.FC = () => {
const stats = useMemo(() => {
const total = allApps.length;
const needsUpgrade = allApps.filter(
(app) => app.upgrade !== "latest",
).length;
const chaosApps = allApps.filter((app) => app.chaos === "true").length;
const needsUpgrade = allApps.filter(app => app.upgrade !== 'latest').length;
const chaosApps = allApps.filter(app => app.chaos === 'true').length;
const totalServers = servers.length;
return { total, needsUpgrade, chaosApps, totalServers };
@ -122,9 +114,7 @@ export const Apps: React.FC = () => {
<main className="apps-content">
<div className="page-header">
<h1>Applications</h1>
<p className="subtitle">
{stats.total} apps across {stats.totalServers} servers
</p>
<p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
</div>
{/* Stats Overview */}
@ -165,22 +155,14 @@ export const Apps: React.FC = () => {
className="search-input"
/>
<select
value={filterServer}
onChange={(e) => setFilterServer(e.target.value)}
>
<select value={filterServer} onChange={(e) => setFilterServer(e.target.value)}>
<option value="all">All Servers</option>
{servers.map((server) => (
<option key={server} value={server}>
{server}
</option>
{servers.map(server => (
<option key={server} value={server}>{server}</option>
))}
</select>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
>
<select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
<option value="all">All Status</option>
<option value="stable">Stable</option>
<option value="chaos">Chaos Mode</option>
@ -219,12 +201,10 @@ export const Apps: React.FC = () => {
</tr>
) : (
filteredApps.map((app) => (
<tr
<tr
key={`${app.server}/${app.appName}`}
onClick={() =>
navigate(`/apps/${app.server}/${app.appName}`)
}
style={{ cursor: "pointer" }}
onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
style={{ cursor: 'pointer' }}
>
<td className="app-name-cell">
<span className="app-name">{app.appName}</span>
@ -234,10 +214,10 @@ export const Apps: React.FC = () => {
</td>
<td>
{app.domain ? (
<a
href={`https://${app.domain}`}
target="_blank"
rel="noopener noreferrer"
<a
href={`https://${app.domain}`}
target="_blank"
rel="noopener noreferrer"
className="domain-link"
onClick={(e) => e.stopPropagation()}
>
@ -253,17 +233,12 @@ export const Apps: React.FC = () => {
<td>
<div className="version-cell">
<span className="version">{app.version}</span>
{app.chaos === "true" && (
<span
className="chaos-badge"
title="Chaos mode enabled"
></span>
{app.chaos === 'true' && (
<span className="chaos-badge" title="Chaos mode enabled"></span>
)}
{app.upgrade !== "latest" && (
<span
className="upgrade-available"
title="Upgrade available"
></span>
{app.upgrade !== 'latest' && (
<span className="upgrade-available" title="Upgrade available">
</span>
)}
</div>
</td>
@ -274,8 +249,8 @@ export const Apps: React.FC = () => {
</td>
<td>
<div className="actions">
<button
className="action-btn"
<button
className="action-btn"
title="View details"
onClick={(e) => {
e.stopPropagation();
@ -284,9 +259,9 @@ export const Apps: React.FC = () => {
>
details
</button>
{app.upgrade !== "latest" && (
<button
className="action-btn upgrade"
{app.upgrade !== 'latest' && (
<button
className="action-btn upgrade"
title="Upgrade"
onClick={(e) => {
e.stopPropagation();
@ -311,4 +286,4 @@ export const Apps: React.FC = () => {
</main>
</div>
);
};
};

64
src/routes/Authenticated/Dashboard/Dashboard.tsx
View File

@ -1,34 +1,32 @@
import React, { useEffect, useState } from "react";
import { Header } from "../../../components/Header/Header";
import { useNavigate } from "react-router-dom";
import { apiService } from "../../../services/api";
import type { AbraApp, AbraServer } from "../../../types";
import "./_Dashboard.scss";
import React, { useEffect, useState } from 'react';
import { Header } from '../../../components/Header/Header';
import { useNavigate } from 'react-router-dom';
import { apiService } from '../../../services/api';
import type { AbraApp, AbraServer } from '../../../types';
import './_Dashboard.scss';
export const Dashboard: React.FC = () => {
const [apps, setApps] = useState<AbraApp[]>([]);
const [servers, setServers] = useState<AbraServer[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [error, setError] = useState('');
const navigate = useNavigate();
const isMockMode = !import.meta.env.VITE_API_URL;
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const fetchData = async () => {
try {
if (isMockMode) {
// Use mock API in development
const { mockApiService } = await import("../../../services/mockApi");
const { mockApiService } = await import('../../../services/mockApi');
const [appsData, serversData] = await Promise.all([
mockApiService.getAppsGrouped(),
mockApiService.getServers(),
]);
// Flatten the grouped apps data
const flatApps = Object.values(appsData).flatMap(
(serverData) => serverData.apps,
);
const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
setApps(flatApps);
setServers(serversData);
} else {
@ -37,16 +35,14 @@ export const Dashboard: React.FC = () => {
apiService.getAppsGrouped(),
apiService.getServers(),
]);
// Flatten the grouped apps data
const flatApps = Object.values(appsData).flatMap(
(serverData) => serverData.apps,
);
const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
setApps(flatApps);
setServers(serversData);
}
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load data");
setError(err instanceof Error ? err.message : 'Failed to load data');
} finally {
setLoading(false);
}
@ -56,8 +52,8 @@ export const Dashboard: React.FC = () => {
}, [isMockMode]);
// Calculate stats
const deployedAppsCount = apps.filter((a) => a.status === "deployed").length;
const serversWithAppsCount = new Set(apps.map((a) => a.server)).size;
const deployedAppsCount = apps.filter(a => a.status === 'deployed').length;
const serversWithAppsCount = new Set(apps.map(a => a.server)).size;
if (loading) {
return (
@ -88,27 +84,25 @@ export const Dashboard: React.FC = () => {
<div className="page-header">
<h1>Dashboard</h1>
</div>
<div className="stats-grid">
<button
onClick={() => navigate("/apps")}
className="nav-link bland-button"
>
<button onClick={() => navigate('/apps')} className="nav-link bland-button">
<div className="stat-card">
<h3>Apps</h3>
<p className="stat-number">{apps.length}</p>
<p className="stat-label">{deployedAppsCount} deployed</p>
<p className="stat-label">
{deployedAppsCount} deployed
</p>
</div>
</button>
<button
onClick={() => navigate("/servers")}
className="nav-link bland-button"
>
<button onClick={() => navigate('/servers')} className="nav-link bland-button">
<div className="stat-card">
<h3>Servers</h3>
<p className="stat-number">{servers.length}</p>
<p className="stat-label">{serversWithAppsCount} connected</p>
<p className="stat-label">
{serversWithAppsCount} connected
</p>
</div>
</button>
</div>
@ -117,14 +111,14 @@ export const Dashboard: React.FC = () => {
<h3>Recent Applications</h3>
<div className="apps-list">
{apps.slice(0, 5).map((app, index) => (
<div
key={`${app.server}-${app.appName}-${index}`}
className="app-item"
<div
key={`${app.server}-${app.appName}-${index}`}
className="app-item"
onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
>
<div className="app-info">
<h4>{app.appName}</h4>
<p className="app-domain">{app.domain || "No domain"}</p>
<p className="app-domain">{app.domain || 'No domain'}</p>
<p className="app-server">{app.server}</p>
</div>
<span className={`status-badge status-${app.status}`}>

10
src/routes/Authenticated/Dashboard/_Dashboard.scss
View File

@ -1,6 +1,6 @@
@use "../../../assets/scss/variables" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/global" as *;
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
@use '../../../assets/scss/global' as *;
// Extend global page wrapper
.dashboard-page {
@ -33,9 +33,7 @@
display: flex;
justify-content: space-between;
align-items: center;
transition:
transform $transition-base,
box-shadow $transition-base;
transition: transform $transition-base, box-shadow $transition-base;
cursor: pointer;
&:hover {

119
src/routes/Authenticated/Servers/Server.scss
View File

@ -1,68 +1,13 @@
@use "../../../assets/scss/variables" as *;
@use "../../../assets/scss/mixins" as *;
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
@use '../../../assets/scss/global' as *;
.server-detail-page {
min-height: 100vh;
background-color: $bg-secondary;
@extend .page-wrapper;
}
.server-detail-content {
max-width: 1600px;
margin: 0 auto;
padding: $spacing-2xl $spacing-xl;
@media (max-width: 768px) {
padding: $spacing-xl $spacing-md;
}
.loading,
.error {
text-align: center;
padding: $spacing-3xl;
font-size: $font-size-lg;
}
.loading {
color: $text-secondary;
}
.error {
color: $error;
}
}
// Breadcrumb navigation
.breadcrumb {
display: flex;
align-items: center;
gap: $spacing-sm;
margin-bottom: $spacing-xl;
font-size: $font-size-sm;
.breadcrumb-link {
background: none;
border: none;
color: $primary;
cursor: pointer;
padding: 0;
font-size: $font-size-sm;
text-decoration: none;
transition: color $transition-base;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}
.breadcrumb-separator {
color: $text-muted;
}
.breadcrumb-current {
color: $text-primary;
font-weight: $font-weight-semibold;
}
@extend .page-content;
}
// Server header section
@ -100,7 +45,7 @@
}
}
// Action buttons
// Action buttons (shared with App view, could be moved to global)
.action-btn {
padding: $spacing-sm $spacing-lg;
border: 2px solid $border-color;
@ -159,7 +104,7 @@
@extend .secondary;
}
// Badges
// Badges - host badge is specific to server view
.host-badge {
display: inline-flex;
align-items: center;
@ -185,50 +130,6 @@
font-weight: $font-weight-medium;
}
.recipe-badge {
display: inline-block;
padding: $spacing-xs $spacing-sm;
background: rgba($primary, 0.1);
color: $primary-light;
border-radius: $radius-sm;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
}
.status-badge {
display: inline-block;
padding: $spacing-xs $spacing-sm;
border-radius: $radius-sm;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
&.status-deployed,
&.status-running {
background: rgba($success, 0.1);
color: darken($success, 10%);
}
&.status-stopped {
background: rgba($error, 0.1);
color: darken($error, 10%);
}
&.status-unknown {
background: $bg-secondary;
color: $text-muted;
}
}
.chaos-badge {
display: inline-block;
padding: $spacing-xs $spacing-sm;
background: rgba($info, 0.1);
color: darken($info, 10%);
border-radius: $radius-sm;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
}
// Content grid layout
.content-grid {
display: grid;
@ -405,18 +306,12 @@
}
&.danger {
color: $error;
&:hover:not(:disabled) {
border-color: $error;
background: rgba($error, 0.05);
}
}
.action-icon {
font-size: $font-size-lg;
}
.action-text {
flex: 1;
font-weight: $font-weight-medium;

217
src/routes/Authenticated/Servers/Server.tsx
View File

@ -1,9 +1,11 @@
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { Header } from "../../../components/Header/Header";
import { apiService } from "../../../services/api";
import type { AbraServer, ServerAppsResponse } from "../../../types";
import "./Server.scss";
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '../../../components/Header/Header';
import { Terminal } from '../../../components/Terminal/Terminal';
import { apiService } from '../../../services/api';
import type { AbraServer, ServerAppsResponse } from '../../../types';
import type { LogEntry } from '../../../services/mockApi';
import './Server.scss';
interface ServerWithApps extends AbraServer {
apps: any[];
@ -17,26 +19,29 @@ interface ServerWithApps extends AbraServer {
export const Server: React.FC = () => {
const { serverName } = useParams<{ serverName: string }>();
const navigate = useNavigate();
const [server, setServer] = useState<ServerWithApps | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [error, setError] = useState('');
const [actionLoading, setActionLoading] = useState<string | null>(null);
// Terminal state
const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
const [terminalActive, setTerminalActive] = useState(false);
const isMockMode = !import.meta.env.VITE_API_URL;
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const fetchServer = async () => {
try {
if (isMockMode) {
const { mockApiService } = await import("../../../services/mockApi");
const { mockApiService } = await import('../../../services/mockApi');
const appsData = await mockApiService.getAppsGrouped();
const serversData = await mockApiService.getServers();
// Find the server
const foundServer = serversData.find((s) => s.name === serverName);
const serverApps = appsData[serverName || ""];
const foundServer = serversData.find(s => s.name === serverName);
const serverApps = appsData[serverName || ''];
if (foundServer && serverApps) {
setServer({
...foundServer,
@ -48,16 +53,15 @@ export const Server: React.FC = () => {
latestCount: serverApps.latestCount,
});
} else {
setError("Server not found");
setError('Server not found');
}
} else {
// Real API call
const appsData = await apiService.getAppsGrouped();
const serversData = await apiService.getServers();
const foundServer = serversData.find((s) => s.name === serverName);
const serverApps = appsData[serverName || ""];
const foundServer = serversData.find(s => s.name === serverName);
const serverApps = appsData[serverName || ''];
if (foundServer && serverApps) {
setServer({
...foundServer,
@ -69,11 +73,11 @@ export const Server: React.FC = () => {
latestCount: serverApps.latestCount,
});
} else {
setError("Server not found");
setError('Server not found');
}
}
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load server");
setError(err instanceof Error ? err.message : 'Failed to load server');
} finally {
setLoading(false);
}
@ -84,13 +88,41 @@ export const Server: React.FC = () => {
const handleAction = async (action: string) => {
if (!server) return;
setActionLoading(action);
setTerminalActive(true);
setTerminalLogs([]);
try {
console.log(`Action: ${action} on server ${server.name}`);
// Add actual server actions here
if (isMockMode) {
const { mockApiService } = await import('../../../services/mockApi');
const onLog = (log: LogEntry) => {
setTerminalLogs(prev => [...prev, log]);
};
switch (action) {
case 'refresh':
await mockApiService.refreshServer(server.name, onLog);
break;
case 'deploy-all':
await mockApiService.deployAllApps(server.name, server.appCount, onLog);
break;
case 'upgrade-all':
await mockApiService.upgradeAllApps(server.name, server.upgradeCount, onLog);
break;
}
} else {
// Real API calls
console.log(`Action: ${action} on server ${server.name}`);
}
} catch (err) {
console.error("Action failed:", err);
console.error('Action failed:', err);
setTerminalLogs(prev => [...prev, {
type: 'error',
text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
timestamp: new Date()
}]);
} finally {
setActionLoading(null);
}
@ -112,8 +144,8 @@ export const Server: React.FC = () => {
<div className="server-detail-page">
<Header />
<main className="server-detail-content">
<div className="error">{error || "Server not found"}</div>
<button onClick={() => navigate("/servers")} className="back-button">
<div className="error">{error || 'Server not found'}</div>
<button onClick={() => navigate('/servers')} className="back-button">
Back to Servers
</button>
</main>
@ -121,20 +153,15 @@ export const Server: React.FC = () => {
);
}
const chaosApps = server.apps.filter((app) => app.chaos === "true");
const runningApps = server.apps.filter(
(app) => app.status === "deployed" || app.status === "running",
);
const chaosApps = server.apps.filter(app => app.chaos === 'true');
const runningApps = server.apps.filter(app => app.status === 'deployed' || app.status === 'running');
return (
<div className="server-detail-page">
<Header />
<main className="server-detail-content">
<div className="breadcrumb">
<button
onClick={() => navigate("/servers")}
className="breadcrumb-link"
>
<button onClick={() => navigate('/servers')} className="breadcrumb-link">
Servers
</button>
<span className="breadcrumb-separator">/</span>
@ -148,37 +175,43 @@ export const Server: React.FC = () => {
<span className="host-badge">{server.host}</span>
{server.upgradeCount > 0 && (
<span className="upgrade-badge">
{server.upgradeCount} upgrade
{server.upgradeCount !== 1 ? "s" : ""}
⬆️ {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
</span>
)}
</div>
</div>
<div className="server-actions">
<button
<button
className="action-btn secondary"
onClick={() => handleAction("refresh")}
disabled={actionLoading === "refresh"}
onClick={() => handleAction('refresh')}
disabled={!!actionLoading}
>
{actionLoading === "refresh" ? "Refreshing..." : "Refresh"}
{actionLoading === 'refresh' ? 'Refreshing...' : '🔄 Refresh'}
</button>
<button
<button
className="action-btn primary"
onClick={() => handleAction("deploy-all")}
disabled={actionLoading === "deploy-all"}
onClick={() => handleAction('deploy-all')}
disabled={!!actionLoading}
>
{actionLoading === "deploy-all" ? "Deploying..." : "Deploy All"}
{actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
</button>
</div>
</div>
{/* Terminal Component */}
<Terminal
logs={terminalLogs}
isActive={terminalActive}
onClose={() => setTerminalActive(false)}
/>
<div className="content-grid">
{/* Left Column - Main Info */}
<div className="main-column">
<section className="info-card">
<h2>Server Details</h2>
<div className="info-grid">
<div className="info-item">
<label>Server Name</label>
@ -202,24 +235,14 @@ export const Server: React.FC = () => {
<div className="info-item">
<label>Upgrades Available</label>
<span
className={
server.upgradeCount > 0
? "stat-value warning"
: "stat-value"
}
>
<span className={server.upgradeCount > 0 ? 'stat-value warning' : 'stat-value'}>
{server.upgradeCount}
</span>
</div>
<div className="info-item">
<label>Chaos Mode Apps</label>
<span
className={
chaosApps.length > 0 ? "stat-value chaos" : "stat-value"
}
>
<span className={chaosApps.length > 0 ? 'stat-value chaos' : 'stat-value'}>
{chaosApps.length}
</span>
</div>
@ -238,20 +261,16 @@ export const Server: React.FC = () => {
<section className="info-card">
<h2>Applications on this Server</h2>
{server.apps.length === 0 ? (
<div className="no-apps">
No applications deployed on this server
</div>
<div className="no-apps">No applications deployed on this server</div>
) : (
<div className="apps-list">
{server.apps.map((app, idx) => (
<div
<div
key={`${app.appName}-${idx}`}
className="app-item"
onClick={() =>
navigate(`/apps/${server.name}/${app.appName}`)
}
onClick={() => navigate(`/apps/${server.name}/${app.appName}`)}
>
<div className="app-item-header">
<span className="app-item-name">{app.appName}</span>
@ -260,24 +279,18 @@ export const Server: React.FC = () => {
<span className={`status-badge status-${app.status}`}>
{app.status}
</span>
{app.chaos === "true" && (
<span
className="chaos-badge"
title="Chaos mode"
></span>
{app.chaos === 'true' && (
<span className="chaos-badge">🔬</span>
)}
{app.upgrade !== "latest" && (
<span
className="upgrade-badge"
title="Upgrade available"
></span>
{app.upgrade !== 'latest' && (
<span className="upgrade-badge">⬆️</span>
)}
</div>
</div>
<div className="app-item-details">
<span className="app-item-version">v{app.version}</span>
{app.domain && (
<a
<a
href={`https://${app.domain}`}
target="_blank"
rel="noopener noreferrer"
@ -299,48 +312,30 @@ export const Server: React.FC = () => {
<div className="sidebar-column">
<section className="info-card">
<h2>Quick Actions</h2>
<div className="action-list">
<button
<button
className="action-list-item"
onClick={() => handleAction("refresh")}
disabled={actionLoading === "refresh"}
onClick={() => handleAction('refresh')}
disabled={!!actionLoading}
>
<span className="action-text">Refresh Server Info</span>
<span className="action-text">🔄 Refresh Server Info</span>
</button>
<button
<button
className="action-list-item"
onClick={() => handleAction("deploy-all")}
disabled={actionLoading === "deploy-all"}
onClick={() => handleAction('deploy-all')}
disabled={!!actionLoading}
>
<span className="action-text">Deploy All Apps</span>
<span className="action-text">🚀 Deploy All Apps</span>
</button>
<button
<button
className="action-list-item"
onClick={() => handleAction("upgrade-all")}
disabled={
actionLoading === "upgrade-all" || server.upgradeCount === 0
}
onClick={() => handleAction('upgrade-all')}
disabled={!!actionLoading || server.upgradeCount === 0}
>
<span className="action-text">Upgrade All Apps</span>
</button>
<button className="action-list-item">
<span className="action-text">View Metrics</span>
</button>
<button className="action-list-item">
<span className="action-text">View Logs</span>
</button>
<button className="action-list-item">
<span className="action-text">Server Settings</span>
</button>
<button className="action-list-item danger">
<span className="action-text">Remove Server</span>
<span className="action-text">⬆️ Upgrade All Apps</span>
</button>
</div>
</section>
@ -350,7 +345,7 @@ export const Server: React.FC = () => {
<div className="health-status">
<div className="health-item">
<span className="health-label">Status</span>
<span className="health-value status-online">Online</span>
<span className="health-value status-online">🟢 Online</span>
</div>
<div className="health-item">
<span className="health-label">CPU Usage</span>

12
src/routes/Authenticated/Servers/Servers.scss
View File

@ -1,6 +1,6 @@
@use "../../../assets/scss/variables" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/global" as *;
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
@use '../../../assets/scss/global' as *;
// Extend global page wrapper
.servers-page {
@ -28,9 +28,7 @@
@include card;
display: flex;
flex-direction: column;
transition:
transform $transition-base,
box-shadow $transition-base;
transition: transform $transition-base, box-shadow $transition-base;
position: relative;
overflow: hidden;
@ -65,7 +63,7 @@
.server-status {
.status-indicator {
font-size: $font-size-xl;
&.connected {
color: $success;
}

97
src/routes/Authenticated/Servers/Servers.tsx
View File

@ -1,9 +1,9 @@
import React, { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Header } from "../../../components/Header/Header";
import { apiService } from "../../../services/api";
import type { AbraServer, ServerAppsResponse } from "../../../types";
import "./Servers.scss";
import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Header } from '../../../components/Header/Header';
import { apiService } from '../../../services/api';
import type { AbraServer, ServerAppsResponse } from '../../../types';
import './Servers.scss';
interface ServerWithStats extends AbraServer {
appCount: number;
@ -17,29 +17,27 @@ export const Servers: React.FC = () => {
const navigate = useNavigate();
const [servers, setServers] = useState<ServerWithStats[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [searchTerm, setSearchTerm] = useState("");
const [sortBy, setSortBy] = useState<"name" | "apps" | "upgrades">("name");
const [error, setError] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
const isMockMode = !import.meta.env.VITE_API_URL;
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
useEffect(() => {
const fetchData = async () => {
try {
if (isMockMode) {
const { mockApiService } = await import("../../../services/mockApi");
const { mockApiService } = await import('../../../services/mockApi');
const [serversData, appsData] = await Promise.all([
mockApiService.getServers(),
mockApiService.getAppsGrouped(),
]);
// Enrich servers with stats from apps data
const enrichedServers = serversData.map((server) => {
const enrichedServers = serversData.map(server => {
const serverStats = appsData[server.name];
const chaosCount =
serverStats?.apps.filter((app) => app.chaos === "true").length ||
0;
const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
return {
...server,
appCount: serverStats?.appCount || 0,
@ -49,21 +47,19 @@ export const Servers: React.FC = () => {
chaosCount,
};
});
setServers(enrichedServers);
} else {
const [serversData, appsData] = await Promise.all([
apiService.getServers(),
apiService.getAppsGrouped(),
]);
// Enrich servers with stats from apps data
const enrichedServers = serversData.map((server) => {
const enrichedServers = serversData.map(server => {
const serverStats = appsData[server.name];
const chaosCount =
serverStats?.apps.filter((app) => app.chaos === "true").length ||
0;
const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
return {
...server,
appCount: serverStats?.appCount || 0,
@ -73,11 +69,11 @@ export const Servers: React.FC = () => {
chaosCount,
};
});
setServers(enrichedServers);
}
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load servers");
setError(err instanceof Error ? err.message : 'Failed to load servers');
} finally {
setLoading(false);
}
@ -98,20 +94,19 @@ export const Servers: React.FC = () => {
// Filter and sort servers
const filteredServers = useMemo(() => {
const filtered = servers.filter(
(server) =>
server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
server.host.toLowerCase().includes(searchTerm.toLowerCase()),
const filtered = servers.filter(server =>
server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
server.host.toLowerCase().includes(searchTerm.toLowerCase())
);
// Sort
filtered.sort((a, b) => {
switch (sortBy) {
case "apps":
case 'apps':
return b.appCount - a.appCount;
case "upgrades":
case 'upgrades':
return b.upgradeCount - a.upgradeCount;
case "name":
case 'name':
default:
return a.name.localeCompare(b.name);
}
@ -148,10 +143,7 @@ export const Servers: React.FC = () => {
<main className="servers-content">
<div className="page-header">
<h1>Servers</h1>
<p className="subtitle">
Managing {stats.totalServers} servers with {stats.totalApps}{" "}
applications
</p>
<p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
</div>
{/* Stats Overview */}
@ -196,10 +188,7 @@ export const Servers: React.FC = () => {
className="search-input"
/>
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
>
<select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
<option value="name">Sort by Name</option>
<option value="apps">Sort by App Count</option>
<option value="upgrades">Sort by Upgrades</option>
@ -209,16 +198,14 @@ export const Servers: React.FC = () => {
{/* Server Cards */}
<div className="servers-grid">
{filteredServers.length === 0 ? (
<div className="no-results">
No servers found matching your search
</div>
<div className="no-results">No servers found matching your search</div>
) : (
filteredServers.map((server) => (
<div
key={server.name}
<div
key={server.name}
className="server-card"
onClick={() => navigate(`/servers/${server.name}`)}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
>
<div className="server-header">
<div className="server-title">
@ -226,12 +213,7 @@ export const Servers: React.FC = () => {
<span className="server-host">{server.host}</span>
</div>
<div className="server-status">
<span
className="status-indicator connected"
title="Connected"
>
●
</span>
<span className="status-indicator connected" title="Connected">●</span>
</div>
</div>
@ -267,7 +249,7 @@ export const Servers: React.FC = () => {
</div>
<div className="server-actions">
<button
<button
className="action-btn primary"
onClick={(e) => {
e.stopPropagation();
@ -276,7 +258,7 @@ export const Servers: React.FC = () => {
>
View Apps
</button>
<button
<button
className="action-btn"
onClick={(e) => {
e.stopPropagation();
@ -291,8 +273,7 @@ export const Servers: React.FC = () => {
<div className="server-alert">
<span className="alert-icon">⚠️</span>
<span className="alert-text">
{server.upgradeCount} app
{server.upgradeCount > 1 ? "s" : ""} can be upgraded
{server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
</span>
</div>
)}
@ -307,4 +288,4 @@ export const Servers: React.FC = () => {
</main>
</div>
);
};
};

6
src/routes/Login/LoginForm.scss
View File

@ -1,5 +1,5 @@
@use "../../assets/scss/variables" as *;
@use "../../assets/scss/mixins" as *;
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
.login-container {
@include flex-center;
@ -91,4 +91,4 @@
&:active:not(:disabled) {
transform: translateY(0);
}
}
}

30
src/routes/Login/LoginForm.tsx
View File

@ -1,27 +1,27 @@
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../hooks/useAuth";
import "./LoginForm.scss";
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import './LoginForm.scss';
export const LoginForm: React.FC = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setError('');
setLoading(true);
try {
await login({ username, password });
navigate("/dashboard");
navigate('/dashboard');
} catch (err) {
setError(err instanceof Error ? err.message : "Login failed");
setError(err instanceof Error ? err.message : 'Login failed');
} finally {
setLoading(false);
}
@ -32,10 +32,10 @@ export const LoginForm: React.FC = () => {
<div className="login-card">
<h1>Coop Cloud</h1>
<p className="login-subtitle">Sign in to manage your applications</p>
<form onSubmit={handleSubmit}>
{error && <div className="error-message">{error}</div>}
<div className="form-group">
<label htmlFor="username">Username</label>
<input
@ -63,10 +63,10 @@ export const LoginForm: React.FC = () => {
</div>
<button type="submit" disabled={loading} className="login-button">
{loading ? "Signing in..." : "Sign in"}
{loading ? 'Signing in...' : 'Sign in'}
</button>
</form>
</div>
</div>
);
};
};

146
src/services/api.ts
View File

@ -1,33 +1,41 @@
import type {
AbraApp,
AbraServer,
AuthResponse,
LoginCredentials,
User,
} from "../types";
import type { AbraServer, ServerAppsResponse, AuthResponse, LoginCredentials, User } from '../types';
const API_BASE_URL =
import.meta.env.VITE_API_URL || "http://localhost:3000/api";
// Log entry type - shared between mock and real API
export type LogEntry = {
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
text: string;
timestamp: Date;
};
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
// Helper to process log JSON from API response
const processLogResponse = (logData: any[]): LogEntry[] => {
return logData.map(log => ({
type: log.type,
text: log.text,
timestamp: new Date(log.timestamp || Date.now()),
}));
};
class ApiService {
private token: string | null = null;
constructor() {
// Load token from localStorage on initialization
this.token = localStorage.getItem("auth_token");
this.token = localStorage.getItem('auth_token');
}
private async request<T>(
endpoint: string,
options: RequestInit = {},
options: RequestInit = {}
): Promise<T> {
const headers: HeadersInit = {
"Content-Type": "application/json",
'Content-Type': 'application/json',
...options.headers,
};
if (this.token) {
headers["Authorization"] = `Bearer ${this.token}`;
headers['Authorization'] = `Bearer ${this.token}`;
}
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
@ -36,9 +44,7 @@ class ApiService {
});
if (!response.ok) {
const error = await response
.json()
.catch(() => ({ message: "An error occurred" }));
const error = await response.json().catch(() => ({ message: 'An error occurred' }));
throw new Error(error.message || `HTTP ${response.status}`);
}
@ -47,50 +53,124 @@ class ApiService {
// Auth methods
async login(credentials: LoginCredentials): Promise<AuthResponse> {
const response = await this.request<AuthResponse>("/auth/login", {
method: "POST",
const response = await this.request<AuthResponse>('/auth/login', {
method: 'POST',
body: JSON.stringify(credentials),
});
this.token = response.token;
localStorage.setItem("auth_token", response.token);
localStorage.setItem('auth_token', response.token);
return response;
}
async logout(): Promise<void> {
this.token = null;
localStorage.removeItem("auth_token");
localStorage.removeItem('auth_token');
}
async getCurrentUser(): Promise<User> {
return this.request<User>("/auth/me");
return this.request<User>('/auth/me');
}
// Abra CLI wrapper methods
async getAppsGrouped(): Promise<ServerAppsResponse> {
return this.request<ServerAppsResponse>("/abra/apps");
return this.request<ServerAppsResponse>('/abra/apps');
}
async getServers(): Promise<AbraServer[]> {
return this.request<AbraServer[]>("/abra/servers");
return this.request<AbraServer[]>('/abra/servers');
}
async deployApp(appName: string): Promise<void> {
return this.request(`/abra/apps/${appName}/deploy`, {
method: "POST",
// App actions with log streaming
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/deploy`, {
method: 'POST',
});
// Process logs and stream to callback
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async stopApp(appName: string): Promise<void> {
return this.request(`/abra/apps/${appName}/stop`, {
method: "POST",
async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/stop`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async startApp(appName: string): Promise<void> {
return this.request(`/abra/apps/${appName}/start`, {
method: "POST",
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/start`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/upgrade`, {
method: 'POST',
body: JSON.stringify({ version }),
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/remove`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
// Server actions with log streaming
async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/refresh`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/deploy-all`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/upgrade-all`, {
method: 'POST',
});
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
}
}

2
src/services/mock-apps.json
View File

@ -590,4 +590,4 @@
"latestCount": 3,
"upgradeCount": 6
}
}
}

326
src/services/mock-logs.json Normal file
View File

@ -0,0 +1,326 @@
{
"deploy": {
"logs": [
{
"type": "info",
"text": "📦 Deploying {appName}..."
},
{
"type": "command",
"text": "$ abra app deploy {appName}"
},
{
"type": "info",
"text": "Checking server connection..."
},
{
"type": "success",
"text": "✓ Connected to server"
},
{
"type": "info",
"text": "Pulling latest images..."
},
{
"type": "output",
"text": "latest: Pulling from library/traefik"
},
{
"type": "output",
"text": "a1b2c3d4: Pull complete"
},
{
"type": "output",
"text": "e5f6g7h8: Pull complete"
},
{
"type": "success",
"text": "✓ Images pulled successfully"
},
{
"type": "info",
"text": "Creating containers..."
},
{
"type": "output",
"text": "Creating {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Creating {appName}_db_1 ... done"
},
{
"type": "info",
"text": "Starting services..."
},
{
"type": "output",
"text": "Starting {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Starting {appName}_db_1 ... done"
},
{
"type": "success",
"text": "✓ {appName} deployed successfully!"
}
]
},
"stop": {
"logs": [
{
"type": "info",
"text": "🛑 Stopping {appName}..."
},
{
"type": "command",
"text": "$ abra app stop {appName}"
},
{
"type": "output",
"text": "Stopping {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Stopping {appName}_db_1 ... done"
},
{
"type": "success",
"text": "✓ {appName} stopped"
}
]
},
"start": {
"logs": [
{
"type": "info",
"text": "▶️ Starting {appName}..."
},
{
"type": "command",
"text": "$ abra app start {appName}"
},
{
"type": "output",
"text": "Starting {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Starting {appName}_db_1 ... done"
},
{
"type": "success",
"text": "✓ {appName} started"
}
]
},
"upgrade": {
"logs": [
{
"type": "info",
"text": "⬆️ Upgrading {appName} to {version}..."
},
{
"type": "command",
"text": "$ abra app upgrade {appName}"
},
{
"type": "info",
"text": "Pulling new version..."
},
{
"type": "output",
"text": "{version}: Pulling from library/app"
},
{
"type": "output",
"text": "x9y8z7w6: Pull complete"
},
{
"type": "success",
"text": "✓ New version pulled"
},
{
"type": "info",
"text": "Stopping old containers..."
},
{
"type": "output",
"text": "Stopping {appName}_app_1 ... done"
},
{
"type": "info",
"text": "Starting new containers..."
},
{
"type": "output",
"text": "Starting {appName}_app_1 ... done"
},
{
"type": "success",
"text": "✓ {appName} upgraded to {version}"
}
]
},
"remove": {
"logs": [
{
"type": "warning",
"text": "⚠️ Removing {appName}..."
},
{
"type": "command",
"text": "$ abra app remove {appName}"
},
{
"type": "output",
"text": "Stopping {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Stopping {appName}_db_1 ... done"
},
{
"type": "output",
"text": "Removing {appName}_app_1 ... done"
},
{
"type": "output",
"text": "Removing {appName}_db_1 ... done"
},
{
"type": "output",
"text": "Removing network {appName}_default"
},
{
"type": "success",
"text": "✓ {appName} removed"
}
]
},
"serverRefresh": {
"logs": [
{
"type": "info",
"text": "🔄 Refreshing server {serverName}..."
},
{
"type": "command",
"text": "$ abra server ls"
},
{
"type": "info",
"text": "Fetching server status..."
},
{
"type": "output",
"text": "Checking connection..."
},
{
"type": "success",
"text": "✓ Connected"
},
{
"type": "output",
"text": "Fetching app list..."
},
{
"type": "success",
"text": "✓ Found apps on {serverName}"
},
{
"type": "success",
"text": "✓ Server refreshed"
}
]
},
"deployAll": {
"logs": [
{
"type": "info",
"text": "📦 Deploying all apps on {serverName}..."
},
{
"type": "command",
"text": "$ abra app deploy --all --server {serverName}"
},
{
"type": "info",
"text": "Found {appCount} apps to deploy"
},
{
"type": "output",
"text": "Deploying apps in parallel..."
},
{
"type": "info",
"text": "[1/{appCount}] Deploying app_1..."
},
{
"type": "success",
"text": "✓ app_1 deployed"
},
{
"type": "info",
"text": "[2/{appCount}] Deploying app_2..."
},
{
"type": "success",
"text": "✓ app_2 deployed"
},
{
"type": "info",
"text": "[3/{appCount}] Deploying app_3..."
},
{
"type": "success",
"text": "✓ app_3 deployed"
},
{
"type": "success",
"text": "✓ All apps deployed on {serverName}"
}
]
},
"upgradeAll": {
"logs": [
{
"type": "info",
"text": "⬆️ Upgrading all apps on {serverName}..."
},
{
"type": "command",
"text": "$ abra app upgrade --all --server {serverName}"
},
{
"type": "info",
"text": "Found {upgradeCount} apps with available upgrades"
},
{
"type": "output",
"text": "Upgrading apps sequentially..."
},
{
"type": "info",
"text": "[1/{upgradeCount}] Upgrading app_1..."
},
{
"type": "success",
"text": "✓ app_1 upgraded"
},
{
"type": "info",
"text": "[2/{upgradeCount}] Upgrading app_2..."
},
{
"type": "success",
"text": "✓ app_2 upgraded"
},
{
"type": "success",
"text": "✓ All apps upgraded on {serverName}"
}
]
}
}

2
src/services/mock-servers.json
View File

@ -27,4 +27,4 @@
"host": "orgsite.org",
"name": "orgsite.org"
}
]
]

142
src/services/mockApi.ts
View File

@ -1,9 +1,66 @@
import type { AbraServer, ServerAppsResponse } from "../types";
import appsData from "./mock-apps.json";
import serversData from "./mock-servers.json";
import type { AbraServer, ServerAppsResponse } from '../types';
import appsData from './mock-apps.json';
import serversData from './mock-servers.json';
import logsData from './mock-logs.json';
// Log entry type
export type LogEntry = {
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
text: string;
timestamp: Date;
};
// Type for the imported JSON structure
type LogTemplate = {
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
text: string;
};
type LogsDataStructure = {
[key: string]: {
logs: LogTemplate[];
};
};
// Simulate API delay
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
// Helper to replace template variables like {appName}, {version}
const replaceVars = (text: string, vars: Record<string, string | number>): string => {
let result = text;
Object.entries(vars).forEach(([key, value]) => {
result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
});
return result;
};
// Helper to process log templates into LogEntry objects
const processLogs = (
action: string,
vars: Record<string, string | number>
): LogEntry[] => {
console.log('Processing logs for action:', action);
console.log('Loaded logsData:', logsData);
const typedLogsData = logsData as LogsDataStructure;
const actionData = typedLogsData[action];
if (!actionData || !actionData.logs) {
console.error(`No logs found for action: ${action}`);
return [];
}
console.log('Found logs:', actionData.logs);
const templates = actionData.logs;
return templates
.filter(template => template && template.type && template.text) // Filter out any undefined/malformed entries
.map(template => ({
type: template.type,
text: replaceVars(template.text, vars),
timestamp: new Date(),
}));
};
export const mockApiService = {
async getAppsGrouped(): Promise<ServerAppsResponse> {
@ -16,18 +73,75 @@ export const mockApiService = {
return serversData as AbraServer[];
},
async deployApp(appName: string): Promise<void> {
await delay(1000);
console.log(`Mock: Deploying app ${appName}`);
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('deploy', { appName });
for (const log of logs) {
await delay(200);
onLog?.(log);
}
},
async stopApp(appName: string): Promise<void> {
await delay(500);
console.log(`Mock: Stopping app ${appName}`);
async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('stop', { appName });
for (const log of logs) {
await delay(150);
onLog?.(log);
}
},
async startApp(appName: string): Promise<void> {
await delay(500);
console.log(`Mock: Starting app ${appName}`);
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('start', { appName });
for (const log of logs) {
await delay(150);
onLog?.(log);
}
},
};
async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('upgrade', { appName, version });
for (const log of logs) {
await delay(200);
onLog?.(log);
}
},
async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('remove', { appName });
for (const log of logs) {
await delay(180);
onLog?.(log);
}
},
async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('serverRefresh', { serverName });
for (const log of logs) {
await delay(200);
onLog?.(log);
}
},
async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('deployAll', { serverName, appCount });
for (const log of logs) {
await delay(250);
onLog?.(log);
}
},
async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
const logs = processLogs('upgradeAll', { serverName, upgradeCount });
for (const log of logs) {
await delay(250);
onLog?.(log);
}
},
};

4
src/types/index.ts
View File

@ -24,7 +24,7 @@ export interface AbraApp {
recipe: string;
appName: string;
domain: string;
status: "deployed" | "stopped" | "unknown";
status: 'deployed' | 'stopped' | 'unknown';
chaos: string;
chaosVersion: string;
version: string;
@ -52,4 +52,4 @@ export interface AppWithServer extends AbraApp {
appCount: number;
upgradeCount: number;
};
}
}