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

Compare commits

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

3 Commits
dev ... main

Author SHA1 Message Date
sixsmith
046cac6cdc adjust cors 2026-03-13 23:22:45 -04:00
sixsmith
9fd5f9941d auth: separate data and authentication mocking 2026-03-13 14:37:57 -04:00
sixsmith
24ed2b37e1 run prettier 2026-03-13 14:31:42 -04:00
36 changed files with 993 additions and 1552 deletions
Expand all files Collapse all files

14
Netlify.toml
View File

@ -1,14 +0,0 @@
[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

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

24
src/App.tsx
View File

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
// Colors // Colors
$primary: #EFEFEF; $primary: #efefef;
$primary-dark: #6A9CFF; $primary-dark: #6a9cff;
$primary-light: #ff4f88; $primary-light: #ff4f88;
$secondary: #363636; $secondary: #363636;
@ -10,8 +10,7 @@ $error: #ef4444;
$info: #3b82f6; $info: #3b82f6;
$text-primary: #363636; $text-primary: #363636;
$text-secondary: #4a4a4a $text-secondary: #4a4a4a;
;
$text-muted: #999; $text-muted: #999;
$bg-primary: #ffffff; $bg-primary: #ffffff;
@ -31,11 +30,21 @@ $spacing-3xl: 4rem;
// Typography // Typography
$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', $font-family-body:
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', "Manrope",
'Helvetica Neue', sans-serif; -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-xs: 0.75rem;
$font-size-sm: 0.875rem; $font-size-sm: 0.875rem;
@ -72,4 +81,4 @@ $transition-slow: 0.3s ease;
$breakpoint-sm: 640px; $breakpoint-sm: 640px;
$breakpoint-md: 768px; $breakpoint-md: 768px;
$breakpoint-lg: 1024px; $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) // 1. Configuration & helpers (no CSS output)
@use 'variables'; @use "variables";
@use 'mixins'; @use "mixins";
@use 'fonts'; @use "fonts";
// 2. Global base styles // 2. Global base styles
@use 'global'; @use "global";

24
src/components/Authenticated.tsx
View File

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

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

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

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

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

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

@ -1,86 +0,0 @@
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
View File

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

12
src/hooks/useAuth.ts
View File

@ -1,12 +1,12 @@
import { useContext } from 'react'; import { useContext } from "react";
import { AuthContext } from '../context/AuthContext'; import { AuthContext } from "../context/AuthContext";
export const useAuth = () => { export const useAuth = () => {
const context = useContext(AuthContext); const context = useContext(AuthContext);
if (context === undefined) { 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; return context;
}; };

29
src/index.scss
View File

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

12
src/main.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,13 +1,68 @@
@use '../../../assets/scss/variables' as *; @use "../../../assets/scss/variables" as *;
@use '../../../assets/scss/mixins' as *; @use "../../../assets/scss/mixins" as *;
@use '../../../assets/scss/global' as *;
.server-detail-page { .server-detail-page {
@extend .page-wrapper; min-height: 100vh;
background-color: $bg-secondary;
} }
.server-detail-content { .server-detail-content {
@extend .page-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;
}
} }
// Server header section // Server header section
@ -45,7 +100,7 @@
} }
} }
// Action buttons (shared with App view, could be moved to global) // Action buttons
.action-btn { .action-btn {
padding: $spacing-sm $spacing-lg; padding: $spacing-sm $spacing-lg;
border: 2px solid $border-color; border: 2px solid $border-color;
@ -104,7 +159,7 @@
@extend .secondary; @extend .secondary;
} }
// Badges - host badge is specific to server view // Badges
.host-badge { .host-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -130,6 +185,50 @@
font-weight: $font-weight-medium; 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 layout
.content-grid { .content-grid {
display: grid; display: grid;
@ -306,12 +405,18 @@
} }
&.danger { &.danger {
color: $error;
&:hover:not(:disabled) { &:hover:not(:disabled) {
border-color: $error; border-color: $error;
background: rgba($error, 0.05); background: rgba($error, 0.05);
} }
} }
.action-icon {
font-size: $font-size-lg;
}
.action-text { .action-text {
flex: 1; flex: 1;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;

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

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

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

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

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

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

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

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

146
src/services/api.ts
View File

@ -1,41 +1,33 @@
import type { AbraServer, ServerAppsResponse, AuthResponse, LoginCredentials, User } from '../types'; import type {
AbraApp,
AbraServer,
AuthResponse,
LoginCredentials,
User,
} from "../types";
// Log entry type - shared between mock and real API const API_BASE_URL =
export type LogEntry = { import.meta.env.VITE_API_URL || "http://localhost:3000/api";
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 { class ApiService {
private token: string | null = null; private token: string | null = null;
constructor() { constructor() {
this.token = localStorage.getItem('auth_token'); // Load token from localStorage on initialization
this.token = localStorage.getItem("auth_token");
} }
private async request<T>( private async request<T>(
endpoint: string, endpoint: string,
options: RequestInit = {} options: RequestInit = {},
): Promise<T> { ): Promise<T> {
const headers: HeadersInit = { const headers: HeadersInit = {
'Content-Type': 'application/json', "Content-Type": "application/json",
...options.headers, ...options.headers,
}; };
if (this.token) { if (this.token) {
headers['Authorization'] = `Bearer ${this.token}`; headers["Authorization"] = `Bearer ${this.token}`;
} }
const response = await fetch(`${API_BASE_URL}${endpoint}`, { const response = await fetch(`${API_BASE_URL}${endpoint}`, {
@ -44,7 +36,9 @@ class ApiService {
}); });
if (!response.ok) { 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}`); throw new Error(error.message || `HTTP ${response.status}`);
} }
@ -53,124 +47,50 @@ class ApiService {
// Auth methods // Auth methods
async login(credentials: LoginCredentials): Promise<AuthResponse> { async login(credentials: LoginCredentials): Promise<AuthResponse> {
const response = await this.request<AuthResponse>('/auth/login', { const response = await this.request<AuthResponse>("/auth/login", {
method: 'POST', method: "POST",
body: JSON.stringify(credentials), body: JSON.stringify(credentials),
}); });
this.token = response.token; this.token = response.token;
localStorage.setItem('auth_token', response.token); localStorage.setItem("auth_token", response.token);
return response; return response;
} }
async logout(): Promise<void> { async logout(): Promise<void> {
this.token = null; this.token = null;
localStorage.removeItem('auth_token'); localStorage.removeItem("auth_token");
} }
async getCurrentUser(): Promise<User> { async getCurrentUser(): Promise<User> {
return this.request<User>('/auth/me'); return this.request<User>("/auth/me");
} }
// Abra CLI wrapper methods // Abra CLI wrapper methods
async getAppsGrouped(): Promise<ServerAppsResponse> { async getAppsGrouped(): Promise<ServerAppsResponse> {
return this.request<ServerAppsResponse>('/abra/apps'); return this.request<ServerAppsResponse>("/abra/apps");
} }
async getServers(): Promise<AbraServer[]> { async getServers(): Promise<AbraServer[]> {
return this.request<AbraServer[]>('/abra/servers'); return this.request<AbraServer[]>("/abra/servers");
} }
// App actions with log streaming async deployApp(appName: string): Promise<void> {
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> { return this.request(`/abra/apps/${appName}/deploy`, {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/deploy`, { method: "POST",
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, onLog?: (log: LogEntry) => void): Promise<void> { async stopApp(appName: string): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/stop`, { return this.request(`/abra/apps/${appName}/stop`, {
method: 'POST', method: "POST",
}); });
if (onLog && response.logs) {
const logs = processLogResponse(response.logs);
logs.forEach(log => onLog(log));
}
} }
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> { async startApp(appName: string): Promise<void> {
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/start`, { return this.request(`/abra/apps/${appName}/start`, {
method: 'POST', 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, "latestCount": 3,
"upgradeCount": 6 "upgradeCount": 6
} }
} }

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

@ -1,326 +0,0 @@
{
"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", "host": "orgsite.org",
"name": "orgsite.org" "name": "orgsite.org"
} }
] ]

142
src/services/mockApi.ts
View File

@ -1,66 +1,9 @@
import type { AbraServer, ServerAppsResponse } from '../types'; import type { AbraServer, ServerAppsResponse } from "../types";
import appsData from './mock-apps.json'; import appsData from "./mock-apps.json";
import serversData from './mock-servers.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 // 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 = { export const mockApiService = {
async getAppsGrouped(): Promise<ServerAppsResponse> { async getAppsGrouped(): Promise<ServerAppsResponse> {
@ -73,75 +16,18 @@ export const mockApiService = {
return serversData as AbraServer[]; return serversData as AbraServer[];
}, },
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> { async deployApp(appName: string): Promise<void> {
const logs = processLogs('deploy', { appName }); await delay(1000);
console.log(`Mock: Deploying app ${appName}`);
for (const log of logs) {
await delay(200);
onLog?.(log);
}
}, },
async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> { async stopApp(appName: string): Promise<void> {
const logs = processLogs('stop', { appName }); await delay(500);
console.log(`Mock: Stopping app ${appName}`);
for (const log of logs) {
await delay(150);
onLog?.(log);
}
}, },
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> { async startApp(appName: string): Promise<void> {
const logs = processLogs('start', { appName }); await delay(500);
console.log(`Mock: Starting app ${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; recipe: string;
appName: string; appName: string;
domain: string; domain: string;
status: 'deployed' | 'stopped' | 'unknown'; status: "deployed" | "stopped" | "unknown";
chaos: string; chaos: string;
chaosVersion: string; chaosVersion: string;
version: string; version: string;
@ -52,4 +52,4 @@ export interface AppWithServer extends AbraApp {
appCount: number; appCount: number;
upgradeCount: number; upgradeCount: number;
}; };
} }

11
vite.config.ts
View File

@ -1,6 +1,11 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) server: {
cors: {
origin: "http://localhost:3000",
},
},
});