forked from BornDeleuze/coop-cloud-front
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 89da98e35c |
14
Netlify.toml
Normal file
14
Netlify.toml
Normal file
@ -0,0 +1,14 @@
|
||||
[build]
|
||||
command = "npm run build"
|
||||
publish = "dist"
|
||||
|
||||
# Environment variables for build
|
||||
[build.environment]
|
||||
VITE_MOCK_AUTH = "true"
|
||||
VITE_API_URL = "http://localhost:3000/api"
|
||||
|
||||
# Redirect all requests to index.html for client-side routing
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
status = 200
|
||||
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
@ -5,7 +5,7 @@ import { useAuth } from '../context/AuthContext';
|
||||
export const Authenticated: React.FC = () => {
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
|
||||
console.log('🛡️ ProtectedRoute:', { isAuthenticated, loading });
|
||||
console.log('ProtectedRoute:', { isAuthenticated, loading });
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
||||
@ -2,6 +2,8 @@ import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
import './_Header.scss';
|
||||
import logo from '../../assets/coopcloud_logo_grey.svg';
|
||||
|
||||
|
||||
interface HeaderProps {
|
||||
children: React.ReactNode;
|
||||
@ -19,7 +21,7 @@ return(
|
||||
<header className="layout-header">
|
||||
<div className="header-content">
|
||||
<h1 onClick={() => navigate('/dashboard')} className="logo">
|
||||
<img className="logo" src="/public/coopcloud_logo_grey.svg"/>
|
||||
<img className="logo" src={logo}/>
|
||||
</h1>
|
||||
<nav className="nav">
|
||||
<button onClick={() => navigate('/dashboard')} className="nav-link">
|
||||
|
||||
86
src/components/Terminal/Terminal.tsx
Normal file
86
src/components/Terminal/Terminal.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import type { LogEntry } from '../../services/mockApi'; // Import from mockApi (or api for real)
|
||||
import './_Terminal.scss';
|
||||
|
||||
interface TerminalProps {
|
||||
logs: LogEntry[];
|
||||
isActive: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
|
||||
|
||||
// Stream logs in with delays for realistic effect
|
||||
useEffect(() => {
|
||||
if (!isActive || logs.length === 0) {
|
||||
setDisplayedLogs([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setDisplayedLogs([]);
|
||||
let currentIndex = 0;
|
||||
|
||||
const streamLogs = () => {
|
||||
if (currentIndex < logs.length) {
|
||||
setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
|
||||
currentIndex++;
|
||||
|
||||
// Variable delay based on log type
|
||||
const delay = logs[currentIndex - 1]?.type === 'command' ? 200 :
|
||||
logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
|
||||
|
||||
setTimeout(streamLogs, delay);
|
||||
}
|
||||
};
|
||||
|
||||
streamLogs();
|
||||
}, [logs, isActive]);
|
||||
|
||||
// Auto-scroll to bottom
|
||||
useEffect(() => {
|
||||
if (terminalRef.current) {
|
||||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||||
}
|
||||
}, [displayedLogs]);
|
||||
|
||||
if (!isActive && displayedLogs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="terminal-container">
|
||||
<div className="terminal-header">
|
||||
<div className="terminal-controls">
|
||||
<span className="terminal-control close" onClick={onClose}></span>
|
||||
<span className="terminal-control minimize"></span>
|
||||
<span className="terminal-control maximize"></span>
|
||||
</div>
|
||||
<div className="terminal-title">abra CLI</div>
|
||||
<div className="terminal-spacer"></div>
|
||||
</div>
|
||||
|
||||
<div className="terminal-content" ref={terminalRef}>
|
||||
{displayedLogs.filter(log => log && log.type).map((log, index) => (
|
||||
<div key={index} className={`terminal-line terminal-${log.type}`}>
|
||||
<span className="terminal-timestamp">[{formatTime(log.timestamp)}]</span>
|
||||
<span className="terminal-text">{log.text}</span>
|
||||
</div>
|
||||
))}
|
||||
{isActive && displayedLogs.length > 0 && (
|
||||
<div className="terminal-cursor">▊</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
204
src/components/Terminal/_Terminal.scss
Normal file
204
src/components/Terminal/_Terminal.scss
Normal file
@ -0,0 +1,204 @@
|
||||
@use '../../assets/scss/variables' as *;
|
||||
@use '../../assets/scss/mixins' as *;
|
||||
|
||||
.terminal-container {
|
||||
background: #1e1e1e;
|
||||
border-radius: $radius-md;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
||||
margin-bottom: $spacing-xl;
|
||||
animation: terminal-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes terminal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background: #323232;
|
||||
border-bottom: 1px solid #404040;
|
||||
user-select: none;
|
||||
|
||||
.terminal-controls {
|
||||
display: flex;
|
||||
gap: $spacing-xs;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.terminal-control {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.close {
|
||||
background: #ff5f56;
|
||||
}
|
||||
|
||||
&.minimize {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
|
||||
&.maximize {
|
||||
background: #27c93f;
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #a0a0a0;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.terminal-spacer {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
padding: $spacing-md;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Custom scrollbar */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #4a4a4a;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #5a5a5a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
animation: terminal-line-appear 0.2s ease-out;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
||||
@keyframes terminal-line-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-timestamp {
|
||||
color: #6a6a6a;
|
||||
margin-right: $spacing-sm;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.terminal-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Line type styles */
|
||||
&.terminal-info {
|
||||
.terminal-text {
|
||||
color: #4fc3f7;
|
||||
}
|
||||
}
|
||||
|
||||
&.terminal-success {
|
||||
.terminal-text {
|
||||
color: #81c784;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&.terminal-error {
|
||||
.terminal-text {
|
||||
color: #e57373;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&.terminal-warning {
|
||||
.terminal-text {
|
||||
color: #ffb74d;
|
||||
}
|
||||
}
|
||||
|
||||
&.terminal-command {
|
||||
.terminal-text {
|
||||
color: #ba68c8;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
&.terminal-output {
|
||||
.terminal-text {
|
||||
color: #d4d4d4;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-cursor {
|
||||
display: inline-block;
|
||||
color: #81c784;
|
||||
margin-left: 4px;
|
||||
animation: terminal-cursor-blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes terminal-cursor-blink {
|
||||
0%, 50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.terminal-content {
|
||||
font-size: 12px;
|
||||
padding: $spacing-sm;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
.terminal-timestamp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,17 +24,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
console.log('🔍 checkAuth running, isMockMode:', isMockMode);
|
||||
console.log('checkAuth running, isMockMode:', isMockMode);
|
||||
try {
|
||||
if (isMockMode) {
|
||||
console.log('✅ Mock mode - setting mock user');
|
||||
console.log('Mock mode - setting mock user');
|
||||
setUser({
|
||||
id: 'mock-user-1',
|
||||
username: 'developer',
|
||||
email: 'dev@coopcloud.tech',
|
||||
});
|
||||
setLoading(false);
|
||||
console.log('✅ Mock user set, loading set to false');
|
||||
console.log('Mock user set, loading set to false');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
logout,
|
||||
isAuthenticated: !!user,
|
||||
};
|
||||
console.log('📊 AuthContext state:', { user, loading, isAuthenticated: !!user });
|
||||
console.log('AuthContext state:', { user, loading, isAuthenticated: !!user });
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
};
|
||||
|
||||
@ -1,136 +1,100 @@
|
||||
@use '../../../assets/scss/variables' as *;
|
||||
@use '../../../assets/scss/mixins' as *;
|
||||
@use '../../../assets/scss/global' as *;
|
||||
|
||||
.app-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
@extend .page-wrapper;
|
||||
}
|
||||
|
||||
.app-detail-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #dc3545;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb navigation
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
|
||||
.breadcrumb-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
@extend .page-content;
|
||||
}
|
||||
|
||||
// App header section
|
||||
.app-header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
@include card;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.app-title-section {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 28px;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 $spacing-md 0;
|
||||
font-size: $font-size-3xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: $spacing-sm;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
.action-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all $transition-base;
|
||||
background: white;
|
||||
color: $text-primary;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: #0066cc;
|
||||
background: $primary;
|
||||
color: white;
|
||||
border-color: $primary;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #0052a3;
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
background: $bg-secondary;
|
||||
color: $text-primary;
|
||||
border-color: $border-color;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e0e0e0;
|
||||
background: darken($bg-secondary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #dc3545;
|
||||
background: $error;
|
||||
color: white;
|
||||
border-color: $error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
background: darken($error, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -140,56 +104,11 @@
|
||||
@extend .secondary;
|
||||
}
|
||||
|
||||
// Badges
|
||||
.recipe-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #e7f3ff;
|
||||
color: #0066cc;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-deployed,
|
||||
&.status-running {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.status-stopped {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
&.status-unknown {
|
||||
background: #e2e3e5;
|
||||
color: #383d41;
|
||||
}
|
||||
}
|
||||
|
||||
.chaos-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Content grid layout
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
gap: $spacing-xl;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
@ -198,21 +117,18 @@
|
||||
|
||||
// Info cards
|
||||
.info-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24px;
|
||||
@include card;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $spacing-lg 0;
|
||||
font-size: $font-size-xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,44 +136,46 @@
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: $spacing-xs;
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.no-value {
|
||||
color: #999;
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.chaos-active {
|
||||
color: #856404;
|
||||
font-weight: 500;
|
||||
color: darken($info, 10%);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-link {
|
||||
color: $primary-dark;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-base;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -265,13 +183,15 @@
|
||||
.server-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0066cc;
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-base;
|
||||
text-align: left;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -280,26 +200,27 @@
|
||||
.version-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: $spacing-lg;
|
||||
|
||||
.version-current {
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background: #f5f5f5;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
background: $bg-secondary;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@ -307,59 +228,66 @@
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
gap: $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
.upgrade-count {
|
||||
background: #ffc107;
|
||||
color: #856404;
|
||||
background: $warning;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: $radius-full;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.upgrade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md;
|
||||
background: $bg-secondary;
|
||||
border-radius: $radius-md;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color $transition-base;
|
||||
|
||||
&:hover {
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
code {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.upgrade-btn {
|
||||
padding: 6px 16px;
|
||||
background: #ffc107;
|
||||
color: #856404;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background: $warning;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all $transition-base;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e0a800;
|
||||
background: darken($warning, 10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -371,13 +299,13 @@
|
||||
}
|
||||
|
||||
.version-latest {
|
||||
padding: 12px;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border-radius: 6px;
|
||||
padding: $spacing-md;
|
||||
background: rgba($success, 0.1);
|
||||
color: darken($success, 10%);
|
||||
border-radius: $radius-md;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@ -385,26 +313,27 @@
|
||||
.action-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: $spacing-sm;
|
||||
|
||||
.action-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md;
|
||||
background: $bg-secondary;
|
||||
border: 2px solid transparent;
|
||||
border-radius: $radius-md;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
transition: all $transition-base;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
background: white;
|
||||
border-color: $primary;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -413,20 +342,15 @@
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #dc3545;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
border-color: $error;
|
||||
background: rgba($error, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
flex: 1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -435,14 +359,14 @@
|
||||
.health-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: $spacing-md;
|
||||
|
||||
.health-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@ -450,14 +374,14 @@
|
||||
}
|
||||
|
||||
.health-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.health-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Header } from '../../../components/Header/Header';
|
||||
import { Terminal } from '../../../components/Terminal/Terminal';
|
||||
import { apiService } from '../../../services/api';
|
||||
import type { AbraApp } from '../../../types';
|
||||
import type { LogEntry } from '../../../services/mockApi';
|
||||
import './App.scss';
|
||||
|
||||
export const AppDetail: React.FC = () => {
|
||||
@ -12,8 +14,11 @@ export const AppDetail: React.FC = () => {
|
||||
const [app, setApp] = useState<AbraApp | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
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';
|
||||
|
||||
@ -24,7 +29,6 @@ export const AppDetail: React.FC = () => {
|
||||
const { mockApiService } = await import('../../../services/mockApi');
|
||||
const appsData = await mockApiService.getAppsGrouped();
|
||||
|
||||
// Find the specific app
|
||||
const serverApps = appsData[server || ''];
|
||||
const foundApp = serverApps?.apps.find(a => a.appName === appName);
|
||||
|
||||
@ -34,7 +38,6 @@ export const AppDetail: React.FC = () => {
|
||||
setError('App not found');
|
||||
}
|
||||
} else {
|
||||
// Real API call would be here
|
||||
const appsData = await apiService.getAppsGrouped();
|
||||
const serverApps = appsData[server || ''];
|
||||
const foundApp = serverApps?.apps.find(a => a.appName === appName);
|
||||
@ -55,30 +58,61 @@ export const AppDetail: React.FC = () => {
|
||||
fetchApp();
|
||||
}, [server, appName, isMockMode]);
|
||||
|
||||
const handleAction = async (action: string) => {
|
||||
const handleAction = async (action: string, version?: string) => {
|
||||
if (!app) return;
|
||||
|
||||
setActionLoading(action);
|
||||
setTerminalActive(true);
|
||||
setTerminalLogs([]);
|
||||
|
||||
try {
|
||||
switch (action) {
|
||||
case 'start':
|
||||
await apiService.startApp(app.appName);
|
||||
break;
|
||||
case 'stop':
|
||||
await apiService.stopApp(app.appName);
|
||||
break;
|
||||
case 'deploy':
|
||||
await apiService.deployApp(app.appName);
|
||||
break;
|
||||
case 'upgrade':
|
||||
// Upgrade logic would go here
|
||||
console.log('Upgrade app');
|
||||
break;
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import('../../../services/mockApi');
|
||||
|
||||
const onLog = (log: LogEntry) => {
|
||||
setTerminalLogs(prev => [...prev, log]);
|
||||
};
|
||||
|
||||
switch (action) {
|
||||
case 'start':
|
||||
await mockApiService.startApp(app.appName, onLog);
|
||||
break;
|
||||
case 'stop':
|
||||
await mockApiService.stopApp(app.appName, onLog);
|
||||
break;
|
||||
case 'deploy':
|
||||
await mockApiService.deployApp(app.appName, onLog);
|
||||
break;
|
||||
case 'upgrade':
|
||||
if (version) {
|
||||
await mockApiService.upgradeApp(app.appName, version, onLog);
|
||||
}
|
||||
break;
|
||||
case 'remove':
|
||||
await mockApiService.removeApp(app.appName, onLog);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// Real API calls
|
||||
switch (action) {
|
||||
case 'start':
|
||||
await apiService.startApp(app.appName);
|
||||
break;
|
||||
case 'stop':
|
||||
await apiService.stopApp(app.appName);
|
||||
break;
|
||||
case 'deploy':
|
||||
await apiService.deployApp(app.appName);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Refresh app data after action
|
||||
// In real implementation, you'd refetch the app
|
||||
} catch (err) {
|
||||
console.error('Action failed:', err);
|
||||
setTerminalLogs(prev => [...prev, {
|
||||
type: 'error',
|
||||
text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
|
||||
timestamp: new Date()
|
||||
}]);
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
@ -130,35 +164,36 @@ export const AppDetail: React.FC = () => {
|
||||
<span className="recipe-badge">{app.recipe}</span>
|
||||
<span className={`status-badge status-${app.status}`}>{app.status}</span>
|
||||
{app.chaos === 'true' && (
|
||||
<span className="chaos-badge" title="Chaos mode enabled">Chaos</span>
|
||||
<span className="chaos-badge" title="Chaos mode enabled">🔬 Chaos</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="app-actions">
|
||||
<button
|
||||
className="action-btn secondary"
|
||||
onClick={() => setIsEditing(!isEditing)}
|
||||
>
|
||||
{isEditing ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn danger"
|
||||
onClick={() => handleAction('stop')}
|
||||
disabled={actionLoading === 'stop'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
{actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn primary"
|
||||
onClick={() => handleAction('deploy')}
|
||||
disabled={actionLoading === 'deploy'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
{actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terminal Component */}
|
||||
<Terminal
|
||||
logs={terminalLogs}
|
||||
isActive={terminalActive}
|
||||
onClose={() => setTerminalActive(false)}
|
||||
/>
|
||||
|
||||
<div className="content-grid">
|
||||
{/* Left Column - Main Info */}
|
||||
<div className="main-column">
|
||||
@ -241,8 +276,8 @@ export const AppDetail: React.FC = () => {
|
||||
<code>{version}</code>
|
||||
<button
|
||||
className="upgrade-btn"
|
||||
onClick={() => handleAction('upgrade')}
|
||||
disabled={actionLoading === 'upgrade'}
|
||||
onClick={() => handleAction('upgrade', version)}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
{actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
|
||||
</button>
|
||||
@ -254,14 +289,14 @@ export const AppDetail: React.FC = () => {
|
||||
|
||||
{app.upgrade === 'latest' && (
|
||||
<div className="version-latest">
|
||||
Running latest version
|
||||
✓ Running latest version
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Actions & Logs */}
|
||||
{/* Right Column - Actions & Stats */}
|
||||
<div className="sidebar-column">
|
||||
<section className="info-card">
|
||||
<h2>Quick Actions</h2>
|
||||
@ -270,33 +305,37 @@ export const AppDetail: React.FC = () => {
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('start')}
|
||||
disabled={actionLoading === 'start'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">Start Application</span>
|
||||
<span className="action-text">▶️ Start Application</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('stop')}
|
||||
disabled={actionLoading === 'stop'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">Stop Application</span>
|
||||
<span className="action-text">⏹️ Stop Application</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">Restart Application</span>
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('deploy')}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">🚀 Deploy Application</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">View Logs</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">Edit Configuration</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item danger">
|
||||
<span className="action-text">Delete Application</span>
|
||||
<button
|
||||
className="action-list-item danger"
|
||||
onClick={() => {
|
||||
if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
|
||||
handleAction('remove');
|
||||
}
|
||||
}}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">🗑️ Remove Application</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -323,4 +362,4 @@ export const AppDetail: React.FC = () => {
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,68 +1,13 @@
|
||||
@use '../../../assets/scss/variables' as *;
|
||||
@use '../../../assets/scss/mixins' as *;
|
||||
@use '../../../assets/scss/global' as *;
|
||||
|
||||
.server-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: $bg-secondary;
|
||||
@extend .page-wrapper;
|
||||
}
|
||||
|
||||
.server-detail-content {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: $spacing-2xl $spacing-xl;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: $spacing-xl $spacing-md;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: $spacing-3xl;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb navigation
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
margin-bottom: $spacing-xl;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
.breadcrumb-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: $font-size-sm;
|
||||
text-decoration: none;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
@extend .page-content;
|
||||
}
|
||||
|
||||
// Server header section
|
||||
@ -100,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
// Action buttons (shared with App view, could be moved to global)
|
||||
.action-btn {
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border: 2px solid $border-color;
|
||||
@ -159,7 +104,7 @@
|
||||
@extend .secondary;
|
||||
}
|
||||
|
||||
// Badges
|
||||
// Badges - host badge is specific to server view
|
||||
.host-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -185,50 +130,6 @@
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.recipe-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
background: rgba($primary, 0.1);
|
||||
color: $primary-light;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&.status-deployed,
|
||||
&.status-running {
|
||||
background: rgba($success, 0.1);
|
||||
color: darken($success, 10%);
|
||||
}
|
||||
|
||||
&.status-stopped {
|
||||
background: rgba($error, 0.1);
|
||||
color: darken($error, 10%);
|
||||
}
|
||||
|
||||
&.status-unknown {
|
||||
background: $bg-secondary;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.chaos-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
background: rgba($info, 0.1);
|
||||
color: darken($info, 10%);
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
// Content grid layout
|
||||
.content-grid {
|
||||
display: grid;
|
||||
@ -405,18 +306,12 @@
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: $error;
|
||||
background: rgba($error, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
flex: 1;
|
||||
font-weight: $font-weight-medium;
|
||||
@ -461,4 +356,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Header } from '../../../components/Header/Header';
|
||||
import { Terminal } from '../../../components/Terminal/Terminal';
|
||||
import { apiService } from '../../../services/api';
|
||||
import type { AbraServer, ServerAppsResponse } from '../../../types';
|
||||
import type { LogEntry } from '../../../services/mockApi';
|
||||
import './Server.scss';
|
||||
|
||||
interface ServerWithApps extends AbraServer {
|
||||
@ -22,6 +24,10 @@ export const Server: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
|
||||
// Terminal state
|
||||
const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
|
||||
const [terminalActive, setTerminalActive] = useState(false);
|
||||
|
||||
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
|
||||
|
||||
@ -33,7 +39,6 @@ export const Server: React.FC = () => {
|
||||
const appsData = await mockApiService.getAppsGrouped();
|
||||
const serversData = await mockApiService.getServers();
|
||||
|
||||
// Find the server
|
||||
const foundServer = serversData.find(s => s.name === serverName);
|
||||
const serverApps = appsData[serverName || ''];
|
||||
|
||||
@ -51,7 +56,6 @@ export const Server: React.FC = () => {
|
||||
setError('Server not found');
|
||||
}
|
||||
} else {
|
||||
// Real API call
|
||||
const appsData = await apiService.getAppsGrouped();
|
||||
const serversData = await apiService.getServers();
|
||||
|
||||
@ -86,11 +90,39 @@ export const Server: React.FC = () => {
|
||||
if (!server) return;
|
||||
|
||||
setActionLoading(action);
|
||||
setTerminalActive(true);
|
||||
setTerminalLogs([]);
|
||||
|
||||
try {
|
||||
console.log(`Action: ${action} on server ${server.name}`);
|
||||
// Add actual server actions here
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import('../../../services/mockApi');
|
||||
|
||||
const onLog = (log: LogEntry) => {
|
||||
setTerminalLogs(prev => [...prev, log]);
|
||||
};
|
||||
|
||||
switch (action) {
|
||||
case 'refresh':
|
||||
await mockApiService.refreshServer(server.name, onLog);
|
||||
break;
|
||||
case 'deploy-all':
|
||||
await mockApiService.deployAllApps(server.name, server.appCount, onLog);
|
||||
break;
|
||||
case 'upgrade-all':
|
||||
await mockApiService.upgradeAllApps(server.name, server.upgradeCount, onLog);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// Real API calls
|
||||
console.log(`Action: ${action} on server ${server.name}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Action failed:', err);
|
||||
setTerminalLogs(prev => [...prev, {
|
||||
type: 'error',
|
||||
text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
|
||||
timestamp: new Date()
|
||||
}]);
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
@ -143,7 +175,7 @@ export const Server: React.FC = () => {
|
||||
<span className="host-badge">{server.host}</span>
|
||||
{server.upgradeCount > 0 && (
|
||||
<span className="upgrade-badge">
|
||||
{server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
|
||||
⬆️ {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@ -153,20 +185,27 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-btn secondary"
|
||||
onClick={() => handleAction('refresh')}
|
||||
disabled={actionLoading === 'refresh'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
{actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
|
||||
{actionLoading === 'refresh' ? 'Refreshing...' : '🔄 Refresh'}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn primary"
|
||||
onClick={() => handleAction('deploy-all')}
|
||||
disabled={actionLoading === 'deploy-all'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
{actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
|
||||
{actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terminal Component */}
|
||||
<Terminal
|
||||
logs={terminalLogs}
|
||||
isActive={terminalActive}
|
||||
onClose={() => setTerminalActive(false)}
|
||||
/>
|
||||
|
||||
<div className="content-grid">
|
||||
{/* Left Column - Main Info */}
|
||||
<div className="main-column">
|
||||
@ -241,10 +280,10 @@ export const Server: React.FC = () => {
|
||||
{app.status}
|
||||
</span>
|
||||
{app.chaos === 'true' && (
|
||||
<span className="chaos-badge" title="Chaos mode"></span>
|
||||
<span className="chaos-badge">🔬</span>
|
||||
)}
|
||||
{app.upgrade !== 'latest' && (
|
||||
<span className="upgrade-badge" title="Upgrade available"></span>
|
||||
<span className="upgrade-badge">⬆️</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -278,41 +317,25 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('refresh')}
|
||||
disabled={actionLoading === 'refresh'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">Refresh Server Info</span>
|
||||
<span className="action-text">🔄 Refresh Server Info</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('deploy-all')}
|
||||
disabled={actionLoading === 'deploy-all'}
|
||||
disabled={!!actionLoading}
|
||||
>
|
||||
<span className="action-text">Deploy All Apps</span>
|
||||
<span className="action-text">🚀 Deploy All Apps</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction('upgrade-all')}
|
||||
disabled={actionLoading === 'upgrade-all' || server.upgradeCount === 0}
|
||||
disabled={!!actionLoading || server.upgradeCount === 0}
|
||||
>
|
||||
<span className="action-text">Upgrade All Apps</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">View Metrics</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">View Logs</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item">
|
||||
<span className="action-text">Server Settings</span>
|
||||
</button>
|
||||
|
||||
<button className="action-list-item danger">
|
||||
<span className="action-text">Remove Server</span>
|
||||
<span className="action-text">⬆️ Upgrade All Apps</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -322,7 +345,7 @@ export const Server: React.FC = () => {
|
||||
<div className="health-status">
|
||||
<div className="health-item">
|
||||
<span className="health-label">Status</span>
|
||||
<span className="health-value status-online">Online</span>
|
||||
<span className="health-value status-online">🟢 Online</span>
|
||||
</div>
|
||||
<div className="health-item">
|
||||
<span className="health-label">CPU Usage</span>
|
||||
@ -347,4 +370,4 @@ export const Server: React.FC = () => {
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
import type { AbraApp, AbraServer, AuthResponse, LoginCredentials, User } from '../types';
|
||||
import type { AbraServer, ServerAppsResponse, AuthResponse, LoginCredentials, User } from '../types';
|
||||
|
||||
// Log entry type - shared between mock and real API
|
||||
export type LogEntry = {
|
||||
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
|
||||
text: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
|
||||
|
||||
// Helper to process log JSON from API response
|
||||
const processLogResponse = (logData: any[]): LogEntry[] => {
|
||||
return logData.map(log => ({
|
||||
type: log.type,
|
||||
text: log.text,
|
||||
timestamp: new Date(log.timestamp || Date.now()),
|
||||
}));
|
||||
};
|
||||
|
||||
class ApiService {
|
||||
private token: string | null = null;
|
||||
|
||||
constructor() {
|
||||
// Load token from localStorage on initialization
|
||||
this.token = localStorage.getItem('auth_token');
|
||||
}
|
||||
|
||||
@ -66,23 +81,97 @@ class ApiService {
|
||||
return this.request<AbraServer[]>('/abra/servers');
|
||||
}
|
||||
|
||||
async deployApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/deploy`, {
|
||||
// App actions with log streaming
|
||||
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/deploy`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
// Process logs and stream to callback
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async stopApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/stop`, {
|
||||
async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/stop`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async startApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/start`, {
|
||||
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/start`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/upgrade`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ version }),
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/remove`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
// Server actions with log streaming
|
||||
async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/refresh`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/deploy-all`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
|
||||
async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/upgrade-all`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach(log => onLog(log));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const apiService = new ApiService();
|
||||
export const apiService = new ApiService();
|
||||
|
||||
326
src/services/mock-logs.json
Normal file
326
src/services/mock-logs.json
Normal file
@ -0,0 +1,326 @@
|
||||
{
|
||||
"deploy": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "📦 Deploying {appName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app deploy {appName}"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Checking server connection..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ Connected to server"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Pulling latest images..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "latest: Pulling from library/traefik"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "a1b2c3d4: Pull complete"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "e5f6g7h8: Pull complete"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ Images pulled successfully"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Creating containers..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Creating {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Creating {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Starting services..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Starting {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Starting {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ {appName} deployed successfully!"
|
||||
}
|
||||
]
|
||||
},
|
||||
"stop": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "🛑 Stopping {appName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app stop {appName}"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Stopping {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Stopping {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ {appName} stopped"
|
||||
}
|
||||
]
|
||||
},
|
||||
"start": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "▶️ Starting {appName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app start {appName}"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Starting {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Starting {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ {appName} started"
|
||||
}
|
||||
]
|
||||
},
|
||||
"upgrade": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "⬆️ Upgrading {appName} to {version}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app upgrade {appName}"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Pulling new version..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "{version}: Pulling from library/app"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "x9y8z7w6: Pull complete"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ New version pulled"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Stopping old containers..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Stopping {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Starting new containers..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Starting {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ {appName} upgraded to {version}"
|
||||
}
|
||||
]
|
||||
},
|
||||
"remove": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "warning",
|
||||
"text": "⚠️ Removing {appName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app remove {appName}"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Stopping {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Stopping {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Removing {appName}_app_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Removing {appName}_db_1 ... done"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Removing network {appName}_default"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ {appName} removed"
|
||||
}
|
||||
]
|
||||
},
|
||||
"serverRefresh": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "🔄 Refreshing server {serverName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra server ls"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Fetching server status..."
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Checking connection..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ Connected"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Fetching app list..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ Found apps on {serverName}"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ Server refreshed"
|
||||
}
|
||||
]
|
||||
},
|
||||
"deployAll": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "📦 Deploying all apps on {serverName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app deploy --all --server {serverName}"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Found {appCount} apps to deploy"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Deploying apps in parallel..."
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "[1/{appCount}] Deploying app_1..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ app_1 deployed"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "[2/{appCount}] Deploying app_2..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ app_2 deployed"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "[3/{appCount}] Deploying app_3..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ app_3 deployed"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ All apps deployed on {serverName}"
|
||||
}
|
||||
]
|
||||
},
|
||||
"upgradeAll": {
|
||||
"logs": [
|
||||
{
|
||||
"type": "info",
|
||||
"text": "⬆️ Upgrading all apps on {serverName}..."
|
||||
},
|
||||
{
|
||||
"type": "command",
|
||||
"text": "$ abra app upgrade --all --server {serverName}"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "Found {upgradeCount} apps with available upgrades"
|
||||
},
|
||||
{
|
||||
"type": "output",
|
||||
"text": "Upgrading apps sequentially..."
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "[1/{upgradeCount}] Upgrading app_1..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ app_1 upgraded"
|
||||
},
|
||||
{
|
||||
"type": "info",
|
||||
"text": "[2/{upgradeCount}] Upgrading app_2..."
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ app_2 upgraded"
|
||||
},
|
||||
{
|
||||
"type": "success",
|
||||
"text": "✓ All apps upgraded on {serverName}"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,67 @@
|
||||
import type { AbraServer, ServerAppsResponse } from '../types';
|
||||
import appsData from './mock-apps.json';
|
||||
import serversData from './mock-servers.json';
|
||||
import logsData from './mock-logs.json';
|
||||
|
||||
// Log entry type
|
||||
export type LogEntry = {
|
||||
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
|
||||
text: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
// Type for the imported JSON structure
|
||||
type LogTemplate = {
|
||||
type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
|
||||
text: string;
|
||||
};
|
||||
|
||||
type LogsDataStructure = {
|
||||
[key: string]: {
|
||||
logs: LogTemplate[];
|
||||
};
|
||||
};
|
||||
|
||||
// Simulate API delay
|
||||
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// Helper to replace template variables like {appName}, {version}
|
||||
const replaceVars = (text: string, vars: Record<string, string | number>): string => {
|
||||
let result = text;
|
||||
Object.entries(vars).forEach(([key, value]) => {
|
||||
result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
// Helper to process log templates into LogEntry objects
|
||||
const processLogs = (
|
||||
action: string,
|
||||
vars: Record<string, string | number>
|
||||
): LogEntry[] => {
|
||||
console.log('Processing logs for action:', action);
|
||||
console.log('Loaded logsData:', logsData);
|
||||
|
||||
const typedLogsData = logsData as LogsDataStructure;
|
||||
const actionData = typedLogsData[action];
|
||||
|
||||
if (!actionData || !actionData.logs) {
|
||||
console.error(`No logs found for action: ${action}`);
|
||||
return [];
|
||||
}
|
||||
|
||||
console.log('Found logs:', actionData.logs);
|
||||
|
||||
const templates = actionData.logs;
|
||||
return templates
|
||||
.filter(template => template && template.type && template.text) // Filter out any undefined/malformed entries
|
||||
.map(template => ({
|
||||
type: template.type,
|
||||
text: replaceVars(template.text, vars),
|
||||
timestamp: new Date(),
|
||||
}));
|
||||
};
|
||||
|
||||
export const mockApiService = {
|
||||
async getAppsGrouped(): Promise<ServerAppsResponse> {
|
||||
await delay(500);
|
||||
@ -16,18 +73,75 @@ export const mockApiService = {
|
||||
return serversData as AbraServer[];
|
||||
},
|
||||
|
||||
async deployApp(appName: string): Promise<void> {
|
||||
await delay(1000);
|
||||
console.log(`Mock: Deploying app ${appName}`);
|
||||
async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('deploy', { appName });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(200);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async stopApp(appName: string): Promise<void> {
|
||||
await delay(500);
|
||||
console.log(`Mock: Stopping app ${appName}`);
|
||||
async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('stop', { appName });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(150);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async startApp(appName: string): Promise<void> {
|
||||
await delay(500);
|
||||
console.log(`Mock: Starting app ${appName}`);
|
||||
async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('start', { appName });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(150);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('upgrade', { appName, version });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(200);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('remove', { appName });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(180);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('serverRefresh', { serverName });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(200);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('deployAll', { serverName, appCount });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(250);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
|
||||
async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
|
||||
const logs = processLogs('upgradeAll', { serverName, upgradeCount });
|
||||
|
||||
for (const log of logs) {
|
||||
await delay(250);
|
||||
onLog?.(log);
|
||||
}
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user