Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 sixsmith
|
046cac6cdc | ||
|
sixsmith
|
9fd5f9941d | ||
|
sixsmith
|
24ed2b37e1 |
@@ -1,3 +1,2 @@
|
||||
VITE_API_URL=http://localhost:3000/api
|
||||
VITE_WS_URL=ws://localhost:3000
|
||||
VITE_MOCK_AUTH=true
|
||||
@@ -0,0 +1,5 @@
|
||||
# API base URL for the backend that wraps the abra CLI
|
||||
VITE_API_URL=http://localhost:3000/api
|
||||
|
||||
# Set to 'true' to bypass authentication for development
|
||||
VITE_MOCK_AUTH=true
|
||||
@@ -8,11 +8,9 @@ pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
pnpm-lock.yaml
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
design-system.html
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
|
||||
@@ -1,53 +1,7 @@
|
||||
# Coop Cloud Front
|
||||
# Coop Cloud Front
|
||||
|
||||
Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for
|
||||
managing VPSs, containers and application deployments.
|
||||
This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users set up and manage VPSs and docker images through a web UI.
|
||||
|
||||
This repository contains a Vite + React + TypeScript app styled
|
||||
with SCSS.
|
||||
## Still a work in progess!
|
||||
|
||||
## Quick start
|
||||
|
||||
- Install dependencies (pnpm is recommended):
|
||||
|
||||
```
|
||||
pnpm install
|
||||
pnpm dev
|
||||
|
||||
```
|
||||
|
||||
The app uses Vite; start the dev server with `pnpm dev`.
|
||||
|
||||
## Environment
|
||||
|
||||
- The app reads runtime flags from Vite env variables. The default build uses mocked api data.
|
||||
-To deploy on a real API without mocking, run:
|
||||
pnpm start:prod
|
||||
|
||||
Modify `.env` file at the project root if you need to override values for
|
||||
development (see Vite docs for env var conventions).
|
||||
|
||||
## Scripts
|
||||
|
||||
- `pnpm dev` — start dev server
|
||||
- `pnpm build` — run TypeScript and build production assets
|
||||
- `pnpm preview` — preview production build locally
|
||||
- `pnpm lint` — run ESLint
|
||||
- `pnpm lint:scss` — run Stylelint
|
||||
- `pnpm format` — format with Prettier
|
||||
|
||||
## Notes about local development
|
||||
|
||||
- The repo contains mock JSON and a `mockApi` service to develop UI without
|
||||
a backend. Toggle mock mode with `VITE_MOCK_AUTH=true`.
|
||||
- Routes are client-side using `react-router-dom`.
|
||||
|
||||
## Next steps / suggested work items
|
||||
|
||||
- Add form validation and better UX for `RecipeForm`.
|
||||
- Improve accessibility.
|
||||
- Add unit tests.
|
||||
- Improve responsive layouts and card grid behaviour on narrow screens.
|
||||
- Add deployment docs and production environment variables.
|
||||
|
||||
---
|
||||
## This is built with react, typescript, scss, and vite
|
||||
@@ -5,10 +5,6 @@
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>coopcloud-frontend</title>
|
||||
<link rel="preload" href="/fonts/manrope.light.woff2" as="font" type="font/woff2">
|
||||
<link rel="preload" href="/fonts/manrope.medium.woff2" as="font" type="font/woff2">
|
||||
<link rel="preload" href="/fonts/manrope.bold.woff2" as="font" type="font/woff2">
|
||||
<link rel="preload" href="/fonts/Lora-Italic.woff2" as="font" type="font/woff2">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"start:prod": "VITE_MOCK_AUTH=false pnpm start",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
|
||||
Generated
+3042
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+26
-17
@@ -1,26 +1,35 @@
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
import { Dashboard } from "./routes/Dashboard/Dashboard";
|
||||
import { Apps } from "./routes/Apps/Apps";
|
||||
import { AppDetail } from "./routes/Apps/App";
|
||||
import { Servers } from "./routes/Servers/Servers";
|
||||
import { Server } from "./routes/Servers/Server";
|
||||
import { Recipes } from "./routes/Recipes/Recipes";
|
||||
import { AuthProvider } from "./context/AuthContext";
|
||||
import { LoginForm } from "./routes/Login/LoginForm";
|
||||
import { Authenticated } from "./components/Authenticated";
|
||||
import { Dashboard } from "./routes/Authenticated/Dashboard/Dashboard";
|
||||
import { Apps } from "./routes/Authenticated/Apps/Apps";
|
||||
import { AppDetail } from "./routes/Authenticated/Apps/App";
|
||||
import { Servers } from "./routes/Authenticated/Servers/Servers";
|
||||
import { Server } from "./routes/Authenticated/Servers/Server";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/apps" element={<Apps />} />
|
||||
<Route path="/apps/:server/:appName" element={<AppDetail />} />
|
||||
<Route path="/servers" element={<Servers />} />
|
||||
<Route path="/servers/:serverName" element={<Server />} />
|
||||
<Route path="/recipes" element={<Recipes />} />
|
||||
<AuthProvider>
|
||||
<Routes>
|
||||
{/* Public routes */}
|
||||
<Route path="/login" element={<LoginForm />} />
|
||||
|
||||
{/* 404 catch-all */}
|
||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
{/* Protected routes */}
|
||||
<Route element={<Authenticated />}>
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/apps" element={<Apps />} />
|
||||
<Route path="/apps/:server/:appName" element={<AppDetail />} />
|
||||
<Route path="/servers" element={<Servers />} />
|
||||
<Route path="/servers/:serverName" element={<Server />} />
|
||||
</Route>
|
||||
|
||||
{/* 404 catch-all */}
|
||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: "Lora";
|
||||
src: url("/fonts/Lora-Italic.woff2") format("woff2");
|
||||
src: url("https://coopcloud.tech/font/Lora-Italic.woff2") format("woff2");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("/fonts/manrope.light.woff2") format("woff2");
|
||||
src: url("https://coopcloud.tech/font/manrope.light.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("/fonts/manrope.medium.woff2") format("woff2");
|
||||
src: url("https://coopcloud.tech/font/manrope.medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("/fonts/manrope.bold.woff2") format("woff2");
|
||||
src: url("https://coopcloud.tech/font/manrope.bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
@use "./variables" as *;
|
||||
@use "./mixins" as *;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: $font-family-body;
|
||||
color: $text-primary;
|
||||
background: linear-gradient(180deg, $bg-secondary 0%, #f7f7f7 100%);
|
||||
}
|
||||
|
||||
#root {
|
||||
@@ -20,13 +13,6 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// global page layout styles
|
||||
.page-wrapper {
|
||||
min-height: 100vh;
|
||||
@@ -45,11 +31,8 @@ textarea {
|
||||
|
||||
.page-header {
|
||||
margin-bottom: $spacing-2xl;
|
||||
padding-bottom: $spacing-lg;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
h1 {
|
||||
font-family: $font-family-heading;
|
||||
font-size: $font-size-3xl;
|
||||
margin: 0 0 $spacing-sm;
|
||||
color: $text-primary;
|
||||
@@ -104,7 +87,6 @@ textarea {
|
||||
// Modifier classes for colored borders
|
||||
&.upgrade {
|
||||
border-left: 4px solid $primary-light;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
&.chaos {
|
||||
@@ -147,7 +129,6 @@ textarea {
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $spacing-xl;
|
||||
border-radius: $radius-xl;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
@@ -158,10 +139,10 @@ textarea {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border: 1px solid $border-color;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-base;
|
||||
transition: border-color $transition-base, box-shadow $transition-base;
|
||||
transition: border-color $transition-base;
|
||||
color: $text-primary;
|
||||
|
||||
&::placeholder {
|
||||
@@ -170,25 +151,23 @@ textarea {
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-dark;
|
||||
box-shadow: 0 0 0 3px $accent-blue-soft;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border: 1px solid $border-color;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-base;
|
||||
background-color: $bg-primary;
|
||||
color: $text-primary;
|
||||
cursor: pointer;
|
||||
transition: border-color $transition-base, box-shadow $transition-base;
|
||||
transition: border-color $transition-base;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-dark;
|
||||
box-shadow: 0 0 0 3px $accent-blue-soft;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,24 +199,20 @@ textarea {
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: capitalize;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.status-deployed {
|
||||
background-color: rgba($success, 0.1);
|
||||
color: $success;
|
||||
border-color: rgba($success, 0.2);
|
||||
}
|
||||
|
||||
&.status-stopped {
|
||||
background-color: rgba($text-muted, 0.1);
|
||||
color: $text-muted;
|
||||
border-color: rgba($text-muted, 0.2);
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
background-color: rgba($error, 0.1);
|
||||
color: $error;
|
||||
border-color: rgba($error, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -249,31 +224,16 @@ textarea {
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.recipe-badge {
|
||||
background-color: $accent-blue-soft;
|
||||
color: $primary-dark;
|
||||
border-color: rgba($primary-dark, 0.12);
|
||||
background-color: rgba($info, 0.1);
|
||||
color: $info;
|
||||
}
|
||||
|
||||
.server-badge {
|
||||
background-color: $brand-pink-soft;
|
||||
color: $primary;
|
||||
border-color: rgba($primary, 0.12);
|
||||
}
|
||||
|
||||
// Ensure stat-chip shows primary-dark outline on hover and when active
|
||||
.stat-chip {
|
||||
&:hover:not(:disabled),
|
||||
&.active {
|
||||
border-color: $primary-dark;
|
||||
box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
|
||||
}
|
||||
}
|
||||
.filter-chip {
|
||||
cursor: default;
|
||||
background-color: rgba($text-secondary, 0.1);
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
// Results count
|
||||
|
||||
@@ -31,116 +31,23 @@
|
||||
// Card style
|
||||
@mixin card {
|
||||
background: $bg-primary;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-md;
|
||||
padding: $spacing-xl;
|
||||
}
|
||||
|
||||
// Ensure cards occupy consistent vertical space and can stretch horizontally
|
||||
@mixin card-dimensions($min-width: 320px, $min-height: 180px) {
|
||||
min-width: $min-width;
|
||||
min-height: $min-height;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/// Standard vertical stack for card-style list rows (dashboard recent apps, server detail apps, etc.)
|
||||
@mixin card-list-vertical($gap: $spacing-md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap;
|
||||
}
|
||||
|
||||
/// Hover lift used by dashboard list cards, server grid cards, and similar surfaces
|
||||
@mixin card-hover-lift($translate-y: -2px, $hover-shadow: $shadow-lg) {
|
||||
transition:
|
||||
transform $transition-base,
|
||||
box-shadow $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translateY($translate-y);
|
||||
box-shadow: $hover-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
/// Card shell with horizontal scroll (e.g. data tables)
|
||||
@mixin scrollable-card {
|
||||
@include card;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/// Header block inside a card: title area with a bottom rule (server cards, etc.)
|
||||
@mixin card-header-rule {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: $spacing-lg;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 2px solid $bg-secondary;
|
||||
}
|
||||
|
||||
/// Primary title + muted monospace/meta line (server cards, resource headers)
|
||||
@mixin card-title-stack(
|
||||
$title-size: $font-size-xl,
|
||||
$title-weight: $font-weight-bold,
|
||||
$meta-size: $font-size-sm
|
||||
) {
|
||||
h3 {
|
||||
margin: 0 0 $spacing-xs;
|
||||
font-size: $title-size;
|
||||
color: $text-primary;
|
||||
font-weight: $title-weight;
|
||||
}
|
||||
|
||||
.server-host {
|
||||
font-size: $meta-size;
|
||||
color: $text-muted;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
/// Label + value row inside a card body (server stats, etc.)
|
||||
@mixin card-stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $spacing-sm 0;
|
||||
border-bottom: 1px solid $bg-secondary;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/// Full-width edge bleed for highlighted rows inside padded cards (matches card horizontal padding)
|
||||
@mixin card-row-highlight-bleed($clear-bottom-border: true) {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
margin: $spacing-sm (-$spacing-xl);
|
||||
padding-left: calc($spacing-xl + $spacing-md);
|
||||
padding-right: calc($spacing-xl + $spacing-md);
|
||||
|
||||
@if $clear-bottom-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Button base
|
||||
@mixin button-base {
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border: 1px solid transparent;
|
||||
border: none;
|
||||
border-radius: $radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,69 +72,3 @@
|
||||
background-color: rgba($color, 0.1);
|
||||
// color: darken($color, 20%);
|
||||
}
|
||||
|
||||
// Compact chip used for stat chips and small interactive chips
|
||||
@mixin chip(
|
||||
$bg: white,
|
||||
$border-color: $border-color,
|
||||
$radius: $radius-md,
|
||||
$padding: $spacing-md $spacing-lg,
|
||||
$gap: $spacing-md,
|
||||
$hover-translate: -2px,
|
||||
$hover-shadow: $shadow-sm,
|
||||
$font-size: $font-size-base
|
||||
) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $gap;
|
||||
padding: $padding;
|
||||
background: $bg;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
font-size: $font-size;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: $primary;
|
||||
transform: translateY($hover-translate);
|
||||
box-shadow: $hover-shadow;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Reusable action button styles; accepts border width and radius
|
||||
@mixin action-btn(
|
||||
$border-width: 1px,
|
||||
$radius: $radius-sm,
|
||||
$padding: $spacing-xs $spacing-md,
|
||||
$font-size: $font-size-sm
|
||||
) {
|
||||
background: $bg-primary;
|
||||
border: $border-width solid $border-color;
|
||||
padding: $padding;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
font-size: $font-size;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all $transition-base;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&:hover {
|
||||
background-color: $accent-blue-soft;
|
||||
color: $text-primary;
|
||||
transform: translateY(-1px);
|
||||
border-color: $primary-dark;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
// Colors
|
||||
$brand-pink: #ff4f88;
|
||||
$accent-blue: #6a9cff;
|
||||
$brand-pink-soft: rgba(255, 79, 136, 0.12);
|
||||
$accent-blue-soft: rgba(106, 156, 255, 0.12);
|
||||
|
||||
$primary: $brand-pink;
|
||||
$primary-dark: $accent-blue;
|
||||
$primary-light: $brand-pink-soft;
|
||||
$primary: #efefef;
|
||||
$primary-dark: #6a9cff;
|
||||
$primary-light: #ff4f88;
|
||||
$secondary: #363636;
|
||||
|
||||
$success: #10b981;
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import { Navigate, Outlet } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export const Authenticated: React.FC = () => {
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
|
||||
console.log("🛡️ ProtectedRoute:", { isAuthenticated, loading });
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
|
||||
};
|
||||
@@ -1,31 +1,44 @@
|
||||
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;
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({ children }) => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
navigate("/login");
|
||||
};
|
||||
return (
|
||||
<header className="layout-header">
|
||||
<div className="header-content">
|
||||
<h1 onClick={() => navigate("/dashboard")} className="logo">
|
||||
<img className="logo" src={logo} />
|
||||
<img className="logo" src="/public/coopcloud_logo_grey.svg" />
|
||||
</h1>
|
||||
<nav className="nav">
|
||||
<button onClick={() => navigate("/dashboard")} className="nav-link">
|
||||
Dashboard
|
||||
</button>
|
||||
<button onClick={() => navigate("/apps")} className="nav-link">
|
||||
Apps
|
||||
</button>
|
||||
<button onClick={() => navigate("/servers")} className="nav-link">
|
||||
Servers
|
||||
</button>
|
||||
<button onClick={() => navigate("/recipes")} className="nav-link">
|
||||
Recipes
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="user-menu">
|
||||
<span className="username">{user?.username}</span>
|
||||
<button onClick={handleLogout} className="logout-button">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
|
||||
.layout-header {
|
||||
background-color: $brand-pink;
|
||||
background-color: $primary-light;
|
||||
color: $text-primary;
|
||||
padding: $spacing-lg 0;
|
||||
box-shadow: $shadow-lg;
|
||||
@@ -27,14 +27,12 @@
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: $spacing-sm;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
@@ -80,4 +78,50 @@
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-lg;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
color: $text-primary;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border-radius: $radius-md;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,98 +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>
|
||||
);
|
||||
};
|
||||
@@ -1,208 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import React, {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { apiService } from "../services/api";
|
||||
import type { LoginCredentials, User } from "../types";
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
login: (credentials: LoginCredentials) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
isAuthenticated: boolean;
|
||||
}
|
||||
|
||||
export const AuthContext = createContext<AuthContextType | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const isMockAuthMode = import.meta.env.VITE_MOCK_AUTH === "true";
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
console.log("🔍 checkAuth running, isMockAuthMode:", isMockAuthMode);
|
||||
try {
|
||||
if (isMockAuthMode) {
|
||||
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");
|
||||
return;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem("auth_token");
|
||||
if (token) {
|
||||
const currentUser = await apiService.getCurrentUser();
|
||||
setUser(currentUser);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Auth check failed:", error);
|
||||
localStorage.removeItem("auth_token");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, [isMockAuthMode]);
|
||||
|
||||
const login = async (credentials: LoginCredentials) => {
|
||||
try {
|
||||
const response = await apiService.login(credentials);
|
||||
setUser(response.user);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
await apiService.logout();
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
const value: AuthContextType = {
|
||||
user,
|
||||
loading,
|
||||
login,
|
||||
logout,
|
||||
isAuthenticated: !!user,
|
||||
};
|
||||
console.log("📊 AuthContext state:", {
|
||||
user,
|
||||
loading,
|
||||
isAuthenticated: !!user,
|
||||
});
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
};
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useContext } from "react";
|
||||
import { AuthContext } from "../context/AuthContext";
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
@@ -1,366 +0,0 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
@use "sass:color";
|
||||
|
||||
.app-detail-page {
|
||||
@extend .page-wrapper;
|
||||
}
|
||||
|
||||
.app-detail-content {
|
||||
@extend .page-content;
|
||||
}
|
||||
|
||||
// App header section
|
||||
.app-header {
|
||||
@include card;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.app-title-section {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $spacing-md 0;
|
||||
font-size: $font-size-3xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
gap: $spacing-sm;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
.action-btn {
|
||||
@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
|
||||
|
||||
&.primary {
|
||||
background: $primary;
|
||||
color: $text-primary;
|
||||
border-color: $primary;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: $bg-secondary;
|
||||
color: $text-primary;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: $error;
|
||||
color: white;
|
||||
border-color: $error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust($error, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@extend .action-btn;
|
||||
@extend .secondary;
|
||||
}
|
||||
|
||||
// Content grid layout
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: $spacing-xl;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Info cards
|
||||
.info-card {
|
||||
@include card;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 $spacing-lg 0;
|
||||
font-size: $font-size-xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Info grid
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xs;
|
||||
|
||||
label {
|
||||
font-size: $font-size-xs;
|
||||
color: $text-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.no-value {
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.chaos-active {
|
||||
background: color.adjust($info, $lightness: -10%);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-link {
|
||||
color: $primary-dark;
|
||||
text-decoration: none;
|
||||
font-size: $font-size-base;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.server-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $primary-dark;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: $font-size-base;
|
||||
text-align: left;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Version information
|
||||
.version-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
|
||||
.version-current {
|
||||
label {
|
||||
display: block;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background: $bg-secondary;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.version-upgrades {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: $spacing-md;
|
||||
|
||||
.upgrade-count {
|
||||
background: $warning;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: $radius-full;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.upgrade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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: $font-size-sm;
|
||||
color: $text-primary;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.upgrade-btn {
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background: $warning;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust($warning, $lightness: -10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-latest {
|
||||
padding: $spacing-md;
|
||||
background: rgba($success, 0.1);
|
||||
background: color.adjust($success, $lightness: -10%);
|
||||
border-radius: $radius-md;
|
||||
text-align: center;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick actions list
|
||||
.action-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
|
||||
.action-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md;
|
||||
background: $bg-secondary;
|
||||
border: 2px solid transparent;
|
||||
border-radius: $radius-md;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: white;
|
||||
border-color: $primary;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
&:hover:not(:disabled) {
|
||||
border-color: $error;
|
||||
background: rgba($error, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.action-text {
|
||||
flex: 1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Health status
|
||||
.health-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
|
||||
.health-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.health-label {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.health-value {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,463 @@
|
||||
@use "../../../assets/scss/variables" as *;
|
||||
@use "../../../assets/scss/mixins" as *;
|
||||
.app-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
.app-title-section {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 28px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
.action-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #0052a3;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@extend .action-btn;
|
||||
@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;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// Info grid
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.no-value {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.chaos-active {
|
||||
color: #856404;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-link {
|
||||
color: $primary-dark;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.server-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Version information
|
||||
.version-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.version-current {
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background: #f5f5f5;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.version-upgrades {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.upgrade-count {
|
||||
background: #ffc107;
|
||||
color: #856404;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.upgrade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
|
||||
code {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.upgrade-btn {
|
||||
padding: 6px 16px;
|
||||
background: #ffc107;
|
||||
color: #856404;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e0a800;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-latest {
|
||||
padding: 12px;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick actions list
|
||||
.action-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.action-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #dc3545;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Health status
|
||||
.health-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.health-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.health-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.health-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } 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 { useParams, useNavigate } from "react-router-dom";
|
||||
import { Header } from "../../../components/Header/Header";
|
||||
import { apiService } from "../../../services/api";
|
||||
import type { AbraApp } from "../../../types";
|
||||
import "./App.scss";
|
||||
|
||||
export const AppDetail: React.FC = () => {
|
||||
@@ -14,21 +12,19 @@ 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";
|
||||
const isMockMode = !import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchApp = async () => {
|
||||
try {
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
const { mockApiService } = await import("../../../services/mockApi");
|
||||
const appsData = await mockApiService.getAppsGrouped();
|
||||
|
||||
// Find the specific app
|
||||
const serverApps = appsData[server || ""];
|
||||
const foundApp = serverApps?.apps.find((a) => a.appName === appName);
|
||||
|
||||
@@ -38,6 +34,7 @@ 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);
|
||||
@@ -58,58 +55,30 @@ export const AppDetail: React.FC = () => {
|
||||
fetchApp();
|
||||
}, [server, appName, isMockMode]);
|
||||
|
||||
const handleAction = async (action: string, version?: string) => {
|
||||
const handleAction = async (action: string) => {
|
||||
if (!app) return;
|
||||
|
||||
setActionLoading(action);
|
||||
setTerminalActive(true);
|
||||
setTerminalLogs([]);
|
||||
|
||||
try {
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
|
||||
const onLog = (log: LogEntry) => {
|
||||
setTerminalLogs((prev) => [...prev, log]);
|
||||
};
|
||||
|
||||
switch (action) {
|
||||
case "deploy":
|
||||
await mockApiService.deployApp(app.appName, onLog);
|
||||
break;
|
||||
case "stop":
|
||||
await mockApiService.stopApp(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 "stop":
|
||||
await apiService.stopApp(app.appName);
|
||||
break;
|
||||
case "deploy":
|
||||
await apiService.deployApp(app.appName);
|
||||
break;
|
||||
}
|
||||
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;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
@@ -165,7 +134,6 @@ export const AppDetail: React.FC = () => {
|
||||
</span>
|
||||
{app.chaos === "true" && (
|
||||
<span className="chaos-badge" title="Chaos mode enabled">
|
||||
{" "}
|
||||
Chaos
|
||||
</span>
|
||||
)}
|
||||
@@ -173,30 +141,29 @@ export const AppDetail: React.FC = () => {
|
||||
</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}
|
||||
disabled={actionLoading === "stop"}
|
||||
>
|
||||
{actionLoading === "stop" ? "Stopping..." : "Stop"}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn primary"
|
||||
onClick={() => handleAction("deploy")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "deploy"}
|
||||
>
|
||||
{actionLoading === "deploy" ? "Deploying..." : "Deploy"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terminal Component */}
|
||||
<Terminal
|
||||
logs={terminalLogs}
|
||||
isActive={terminalActive}
|
||||
onClose={() => setTerminalActive(false)}
|
||||
/>
|
||||
|
||||
<div className="content-grid">
|
||||
{/* Left Column - Main Info */}
|
||||
<div className="main-column">
|
||||
@@ -216,7 +183,7 @@ export const AppDetail: React.FC = () => {
|
||||
href={`https://${app.domain}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
className="domain-link"
|
||||
>
|
||||
{app.domain} ↗
|
||||
</a>
|
||||
@@ -226,14 +193,13 @@ export const AppDetail: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="info-item">
|
||||
<label htmlFor="server-link">Server</label>
|
||||
<Link
|
||||
id="server-link"
|
||||
to={`/servers/${app.server}`}
|
||||
className="link"
|
||||
<label>Server</label>
|
||||
<button
|
||||
onClick={() => navigate(`/servers/${app.server}`)}
|
||||
className="server-link"
|
||||
>
|
||||
{app.server} ↗
|
||||
</Link>
|
||||
{app.server} →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="info-item">
|
||||
@@ -251,7 +217,7 @@ export const AppDetail: React.FC = () => {
|
||||
<div className="info-item">
|
||||
<label>Chaos Mode</label>
|
||||
<span className={app.chaos === "true" ? "chaos-active" : ""}>
|
||||
{app.chaos === "true" ? "☠️ Enabled" : "Disabled"}
|
||||
{app.chaos === "true" ? "🔬 Enabled" : "Disabled"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -287,8 +253,8 @@ export const AppDetail: React.FC = () => {
|
||||
<code>{version}</code>
|
||||
<button
|
||||
className="upgrade-btn"
|
||||
onClick={() => handleAction("upgrade", version)}
|
||||
disabled={!!actionLoading}
|
||||
onClick={() => handleAction("upgrade")}
|
||||
disabled={actionLoading === "upgrade"}
|
||||
>
|
||||
{actionLoading === "upgrade"
|
||||
? "Upgrading..."
|
||||
@@ -301,13 +267,13 @@ export const AppDetail: React.FC = () => {
|
||||
)}
|
||||
|
||||
{app.upgrade === "latest" && (
|
||||
<div className="version-latest">✓ Running latest version</div>
|
||||
<div className="version-latest">Running latest version</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Actions & Stats */}
|
||||
{/* Right Column - Actions & Logs */}
|
||||
<div className="sidebar-column">
|
||||
<section className="info-card">
|
||||
<h2>Quick Actions</h2>
|
||||
@@ -315,32 +281,34 @@ export const AppDetail: React.FC = () => {
|
||||
<div className="action-list">
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction("deploy")}
|
||||
disabled={!!actionLoading}
|
||||
onClick={() => handleAction("start")}
|
||||
disabled={actionLoading === "start"}
|
||||
>
|
||||
<span className="action-text">Deploy Application</span>
|
||||
<span className="action-text">Start Application</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction("stop")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "stop"}
|
||||
>
|
||||
<span className="action-text">Stop Application</span>
|
||||
</button>
|
||||
|
||||
<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 className="action-list-item">
|
||||
<span className="action-text">Restart 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>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,6 +1,6 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
@use "../../../assets/scss/variables" as *;
|
||||
@use "../../../assets/scss/mixins" as *;
|
||||
@use "../../../assets/scss/global" as *;
|
||||
|
||||
// Extend global page wrapper
|
||||
.apps-page {
|
||||
@@ -11,44 +11,10 @@
|
||||
@extend .page-content;
|
||||
}
|
||||
|
||||
// Compact stats row
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
margin-bottom: $spacing-xl;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-chip {
|
||||
@include chip();
|
||||
|
||||
&.active {
|
||||
border-color: $primary-dark;
|
||||
background: $bg-primary;
|
||||
box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: $text-secondary;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: $text-primary;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-bold;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset-filters-btn removed — outline on stat-chip indicates active filters */
|
||||
|
||||
// Apps table specific styles
|
||||
.apps-table-container {
|
||||
@include scrollable-card;
|
||||
@include card;
|
||||
overflow-x: auto;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
@@ -105,15 +71,16 @@
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-primary;
|
||||
}
|
||||
.domain-link {
|
||||
color: $primary-dark;
|
||||
text-decoration: none;
|
||||
transition: color $transition-base;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.domain-link {
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
transition: color $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -145,27 +112,23 @@
|
||||
gap: $spacing-sm;
|
||||
|
||||
.action-btn {
|
||||
@include action-btn(
|
||||
1px,
|
||||
$radius-sm,
|
||||
$spacing-xs $spacing-md,
|
||||
$font-size-sm
|
||||
);
|
||||
background: none;
|
||||
border: 1px solid $border-color;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
border-radius: $radius-sm;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
transition: all $transition-base;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
border-color: $primary;
|
||||
background-color: $bg-tertiary;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&.upgrade {
|
||||
border-color: $warning;
|
||||
color: $warning;
|
||||
|
||||
&:hover {
|
||||
background-color: $warning;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
// TODOS:
|
||||
// make the two filters non-exlusive
|
||||
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Header } from "../../components/Header/Header";
|
||||
import { apiService } from "../../services/api";
|
||||
import type { AbraApp, AppWithServer, ServerAppsResponse } from "../../types";
|
||||
import { Header } from "../../../components/Header/Header";
|
||||
import { apiService } from "../../../services/api";
|
||||
import type {
|
||||
AbraApp,
|
||||
AppWithServer,
|
||||
ServerAppsResponse,
|
||||
} from "../../../types";
|
||||
import "./Apps.scss";
|
||||
|
||||
export const Apps: React.FC = () => {
|
||||
@@ -15,16 +16,16 @@ export const Apps: React.FC = () => {
|
||||
const [error, setError] = useState("");
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filterServer, setFilterServer] = useState<string>("all");
|
||||
const [filterStatus, setFilterStatus] = useState<string>("all");
|
||||
const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
|
||||
const [showChaosOnly, setShowChaosOnly] = useState(false);
|
||||
|
||||
const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
|
||||
const isMockMode = !import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
const { mockApiService } = await import("../../../services/mockApi");
|
||||
const data = await mockApiService.getAppsGrouped();
|
||||
setAppsData(data);
|
||||
} else {
|
||||
@@ -62,7 +63,7 @@ export const Apps: React.FC = () => {
|
||||
return Object.keys(appsData);
|
||||
}, [appsData]);
|
||||
|
||||
// Filter apps (additive filters: upgrades AND chaos can be applied together)
|
||||
// Filter apps
|
||||
const filteredApps = useMemo(() => {
|
||||
return allApps.filter((app) => {
|
||||
const matchesSearch =
|
||||
@@ -72,12 +73,15 @@ export const Apps: React.FC = () => {
|
||||
|
||||
const matchesServer =
|
||||
filterServer === "all" || app.server === filterServer;
|
||||
const matchesChaos = !showChaosOnly || app.chaos === "true";
|
||||
const matchesChaos =
|
||||
filterStatus === "all" ||
|
||||
(filterStatus === "chaos" && app.chaos === "true") ||
|
||||
(filterStatus === "stable" && app.chaos === "false");
|
||||
const matchesUpgrade = !showUpgradesOnly || app.upgrade !== "latest";
|
||||
|
||||
return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
|
||||
});
|
||||
}, [allApps, searchTerm, filterServer, showUpgradesOnly, showChaosOnly]);
|
||||
}, [allApps, searchTerm, filterServer, filterStatus, showUpgradesOnly]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const total = allApps.length;
|
||||
@@ -90,9 +94,6 @@ export const Apps: React.FC = () => {
|
||||
return { total, needsUpgrade, chaosApps, totalServers };
|
||||
}, [allApps, servers]);
|
||||
|
||||
const toggleUpgrades = () => setShowUpgradesOnly((prev) => !prev);
|
||||
const toggleChaos = () => setShowChaosOnly((prev) => !prev);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="apps-page">
|
||||
@@ -126,36 +127,32 @@ export const Apps: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Compact Stats Overview */}
|
||||
<div className="stats-row">
|
||||
<button
|
||||
className="stat-chip"
|
||||
onClick={() => navigate("/servers")}
|
||||
title="View servers"
|
||||
>
|
||||
<span className="stat-label">Servers</span>
|
||||
<span className="stat-value">{stats.totalServers}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`stat-chip filter-chip ${showUpgradesOnly ? "active" : ""}`}
|
||||
onClick={toggleUpgrades}
|
||||
title="Click to toggle apps with upgrades available"
|
||||
disabled={stats.needsUpgrade === 0}
|
||||
>
|
||||
<span className="stat-label">Upgrades</span>
|
||||
<span className="stat-value">{stats.needsUpgrade}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`stat-chip filter-chip ${showChaosOnly ? "active" : ""}`}
|
||||
onClick={toggleChaos}
|
||||
title="Click to toggle chaos mode apps"
|
||||
disabled={stats.chaosApps === 0}
|
||||
>
|
||||
<span className="stat-label">Chaos</span>
|
||||
<span className="stat-value">{stats.chaosApps}</span>
|
||||
</button>
|
||||
{/* Stats Overview */}
|
||||
<div className="stats-grid">
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.total}</p>
|
||||
<p className="stat-label">Total Apps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card upgrade">
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.needsUpgrade}</p>
|
||||
<p className="stat-label">Upgrades Available</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card chaos">
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.chaosApps}</p>
|
||||
<p className="stat-label">Chaos Mode</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.totalServers}</p>
|
||||
<p className="stat-label">Servers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
@@ -179,6 +176,24 @@ export const Apps: React.FC = () => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value)}
|
||||
>
|
||||
<option value="all">All Status</option>
|
||||
<option value="stable">Stable</option>
|
||||
<option value="chaos">Chaos Mode</option>
|
||||
</select>
|
||||
|
||||
<label className="checkbox-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showUpgradesOnly}
|
||||
onChange={(e) => setShowUpgradesOnly(e.target.checked)}
|
||||
/>
|
||||
<span>Show only apps with upgrades</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Apps Table */}
|
||||
@@ -192,7 +207,7 @@ export const Apps: React.FC = () => {
|
||||
<th>Server</th>
|
||||
<th>Version</th>
|
||||
<th>Status</th>
|
||||
{/* <th>Actions</th> */}
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -257,10 +272,10 @@ export const Apps: React.FC = () => {
|
||||
{app.status}
|
||||
</span>
|
||||
</td>
|
||||
{/* <td>
|
||||
<td>
|
||||
<div className="actions">
|
||||
<button
|
||||
className="action-btn"
|
||||
<button
|
||||
className="action-btn"
|
||||
title="View details"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -269,9 +284,9 @@ export const Apps: React.FC = () => {
|
||||
>
|
||||
details
|
||||
</button>
|
||||
{app.upgrade !== 'latest' && (
|
||||
<button
|
||||
className="action-btn upgrade"
|
||||
{app.upgrade !== "latest" && (
|
||||
<button
|
||||
className="action-btn upgrade"
|
||||
title="Upgrade"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -282,7 +297,7 @@ export const Apps: React.FC = () => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td> */}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
+7
-5
@@ -1,8 +1,8 @@
|
||||
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 { apiService } from "../../services/api";
|
||||
import type { AbraApp, AbraServer } from "../../types";
|
||||
import { apiService } from "../../../services/api";
|
||||
import type { AbraApp, AbraServer } from "../../../types";
|
||||
import "./_Dashboard.scss";
|
||||
|
||||
export const Dashboard: React.FC = () => {
|
||||
@@ -12,14 +12,14 @@ export const Dashboard: React.FC = () => {
|
||||
const [error, setError] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
|
||||
const isMockMode = !import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (isMockMode) {
|
||||
// Use mock API in development
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
const { mockApiService } = await import("../../../services/mockApi");
|
||||
const [appsData, serversData] = await Promise.all([
|
||||
mockApiService.getAppsGrouped(),
|
||||
mockApiService.getServers(),
|
||||
@@ -96,6 +96,7 @@ export const Dashboard: React.FC = () => {
|
||||
>
|
||||
<div className="stat-card">
|
||||
<h3>Apps</h3>
|
||||
<p className="stat-number">{apps.length}</p>
|
||||
<p className="stat-label">{deployedAppsCount} deployed</p>
|
||||
</div>
|
||||
</button>
|
||||
@@ -106,6 +107,7 @@ export const Dashboard: React.FC = () => {
|
||||
>
|
||||
<div className="stat-card">
|
||||
<h3>Servers</h3>
|
||||
<p className="stat-number">{servers.length}</p>
|
||||
<p className="stat-label">{serversWithAppsCount} connected</p>
|
||||
</div>
|
||||
</button>
|
||||
+15
-5
@@ -1,6 +1,6 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
@use "../../../assets/scss/variables" as *;
|
||||
@use "../../../assets/scss/mixins" as *;
|
||||
@use "../../../assets/scss/global" as *;
|
||||
|
||||
// Extend global page wrapper
|
||||
.dashboard-page {
|
||||
@@ -23,21 +23,31 @@
|
||||
}
|
||||
|
||||
.apps-list {
|
||||
@include card-list-vertical;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
@include card;
|
||||
@include card-hover-lift(-2px, $shadow-lg);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition:
|
||||
transform $transition-base,
|
||||
box-shadow $transition-base;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 $spacing-xs;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-semibold;
|
||||
@@ -1,14 +1,68 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
@use "sass:color";
|
||||
@use "../../../assets/scss/variables" as *;
|
||||
@use "../../../assets/scss/mixins" as *;
|
||||
|
||||
.server-detail-page {
|
||||
@extend .page-wrapper;
|
||||
min-height: 100vh;
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
.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
|
||||
@@ -46,9 +100,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons (shared with App view, could be moved to global)
|
||||
// Action buttons
|
||||
.action-btn {
|
||||
@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
|
||||
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 $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: $primary;
|
||||
@@ -67,7 +139,7 @@
|
||||
border-color: $border-color;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust($bg-secondary, $lightness: -10%);
|
||||
background: darken($bg-secondary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +149,7 @@
|
||||
border-color: $error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust($error, $lightness: -10%);
|
||||
background: darken($error, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -87,7 +159,7 @@
|
||||
@extend .secondary;
|
||||
}
|
||||
|
||||
// Badges - host badge is specific to server view
|
||||
// Badges
|
||||
.host-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -107,12 +179,56 @@
|
||||
gap: $spacing-xs;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background: rgba($warning, 0.1);
|
||||
background: color.adjust($error, $lightness: -20%);
|
||||
color: darken($warning, 20%);
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-sm;
|
||||
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;
|
||||
@@ -172,11 +288,11 @@
|
||||
color: $text-primary;
|
||||
|
||||
&.warning {
|
||||
background: color.adjust($warning, $lightness: -10%);
|
||||
color: darken($warning, 10%);
|
||||
}
|
||||
|
||||
&.chaos {
|
||||
background: color.adjust($info, $lightness: -10%);
|
||||
color: darken($info, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -195,7 +311,9 @@
|
||||
}
|
||||
|
||||
.apps-list {
|
||||
@include card-list-vertical;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
@@ -287,12 +405,18 @@
|
||||
}
|
||||
|
||||
&.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;
|
||||
@@ -1,10 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } 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 { useParams, useNavigate } from "react-router-dom";
|
||||
import { Header } from "../../../components/Header/Header";
|
||||
import { apiService } from "../../../services/api";
|
||||
import type { AbraServer, ServerAppsResponse } from "../../../types";
|
||||
import "./Server.scss";
|
||||
|
||||
interface ServerWithApps extends AbraServer {
|
||||
@@ -25,20 +23,17 @@ export const Server: React.FC = () => {
|
||||
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";
|
||||
const isMockMode = !import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchServer = async () => {
|
||||
try {
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
const { mockApiService } = await import("../../../services/mockApi");
|
||||
const appsData = await mockApiService.getAppsGrouped();
|
||||
const serversData = await mockApiService.getServers();
|
||||
|
||||
// Find the server
|
||||
const foundServer = serversData.find((s) => s.name === serverName);
|
||||
const serverApps = appsData[serverName || ""];
|
||||
|
||||
@@ -56,6 +51,7 @@ export const Server: React.FC = () => {
|
||||
setError("Server not found");
|
||||
}
|
||||
} else {
|
||||
// Real API call
|
||||
const appsData = await apiService.getAppsGrouped();
|
||||
const serversData = await apiService.getServers();
|
||||
|
||||
@@ -90,50 +86,11 @@ export const Server: React.FC = () => {
|
||||
if (!server) return;
|
||||
|
||||
setActionLoading(action);
|
||||
setTerminalActive(true);
|
||||
setTerminalLogs([]);
|
||||
|
||||
try {
|
||||
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}`);
|
||||
}
|
||||
console.log(`Action: ${action} on server ${server.name}`);
|
||||
// Add actual server actions here
|
||||
} 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);
|
||||
}
|
||||
@@ -202,27 +159,20 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-btn secondary"
|
||||
onClick={() => handleAction("refresh")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "refresh"}
|
||||
>
|
||||
{actionLoading === "refresh" ? "Refreshing..." : "Refresh"}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn"
|
||||
className="action-btn primary"
|
||||
onClick={() => handleAction("deploy-all")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "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">
|
||||
@@ -311,10 +261,16 @@ export const Server: React.FC = () => {
|
||||
{app.status}
|
||||
</span>
|
||||
{app.chaos === "true" && (
|
||||
<span className="chaos-badge">☠️</span>
|
||||
<span
|
||||
className="chaos-badge"
|
||||
title="Chaos mode"
|
||||
></span>
|
||||
)}
|
||||
{app.upgrade !== "latest" && (
|
||||
<span className="upgrade-badge">⬆️</span>
|
||||
<span
|
||||
className="upgrade-badge"
|
||||
title="Upgrade available"
|
||||
></span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -348,7 +304,7 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction("refresh")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "refresh"}
|
||||
>
|
||||
<span className="action-text">Refresh Server Info</span>
|
||||
</button>
|
||||
@@ -356,7 +312,7 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction("deploy-all")}
|
||||
disabled={!!actionLoading}
|
||||
disabled={actionLoading === "deploy-all"}
|
||||
>
|
||||
<span className="action-text">Deploy All Apps</span>
|
||||
</button>
|
||||
@@ -364,10 +320,28 @@ export const Server: React.FC = () => {
|
||||
<button
|
||||
className="action-list-item"
|
||||
onClick={() => handleAction("upgrade-all")}
|
||||
disabled={!!actionLoading || server.upgradeCount === 0}
|
||||
disabled={
|
||||
actionLoading === "upgrade-all" || 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>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -376,7 +350,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>
|
||||
@@ -1,6 +1,6 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
@use "../../../assets/scss/variables" as *;
|
||||
@use "../../../assets/scss/mixins" as *;
|
||||
@use "../../../assets/scss/global" as *;
|
||||
|
||||
// Extend global page wrapper
|
||||
.servers-page {
|
||||
@@ -14,12 +14,10 @@
|
||||
// Servers grid
|
||||
.servers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
align-items: stretch;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -28,18 +26,40 @@
|
||||
// Server card
|
||||
.server-card {
|
||||
@include card;
|
||||
@include card-hover-lift(-4px, $shadow-xl);
|
||||
@include card-dimensions(320px, 180px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition:
|
||||
transform $transition-base,
|
||||
box-shadow $transition-base;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
|
||||
.server-header {
|
||||
@include card-header-rule;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: $spacing-lg;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 2px solid $bg-secondary;
|
||||
|
||||
.server-title {
|
||||
@include card-title-stack;
|
||||
h3 {
|
||||
margin: 0 0 $spacing-xs;
|
||||
font-size: $font-size-xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.server-host {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-muted;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.server-status {
|
||||
@@ -62,12 +82,24 @@
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.stat-row {
|
||||
@include card-stat-row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $spacing-sm 0;
|
||||
border-bottom: 1px solid $bg-secondary;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Highlighted rows
|
||||
&.highlight {
|
||||
@include card-row-highlight-bleed;
|
||||
background-color: rgba($warning, 0.05);
|
||||
padding: $spacing-sm $spacing-md;
|
||||
margin: $spacing-sm (-$spacing-xl);
|
||||
padding-left: calc($spacing-xl + $spacing-md);
|
||||
padding-right: calc($spacing-xl + $spacing-md);
|
||||
border-bottom: none;
|
||||
|
||||
.stat-label {
|
||||
font-weight: $font-weight-semibold;
|
||||
@@ -79,8 +111,11 @@
|
||||
}
|
||||
|
||||
&.chaos-row {
|
||||
@include card-row-highlight-bleed(false);
|
||||
background-color: rgba($info, 0.05);
|
||||
padding: $spacing-sm $spacing-md;
|
||||
margin: $spacing-sm (-$spacing-xl);
|
||||
padding-left: calc($spacing-xl + $spacing-md);
|
||||
padding-right: calc($spacing-xl + $spacing-md);
|
||||
|
||||
.stat-label {
|
||||
font-weight: $font-weight-semibold;
|
||||
@@ -119,17 +154,26 @@
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
@include action-btn(
|
||||
2px,
|
||||
$radius-md,
|
||||
$spacing-sm $spacing-md,
|
||||
$font-size-sm
|
||||
);
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border: 2px solid $border-color;
|
||||
background: none;
|
||||
color: $text-primary;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $transition-base;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($primary, 0.1);
|
||||
border-color: $primary;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
// background-color: $primary;
|
||||
// color: white;
|
||||
// border-color: $primary;
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
border-color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-light;
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Header } from "../../components/Header/Header";
|
||||
import { apiService } from "../../services/api";
|
||||
import type { AbraServer, ServerAppsResponse } from "../../types";
|
||||
import { Header } from "../../../components/Header/Header";
|
||||
import { apiService } from "../../../services/api";
|
||||
import type { AbraServer, ServerAppsResponse } from "../../../types";
|
||||
import "./Servers.scss";
|
||||
|
||||
interface ServerWithStats extends AbraServer {
|
||||
@@ -20,48 +20,63 @@ export const Servers: React.FC = () => {
|
||||
const [error, setError] = useState("");
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [sortBy, setSortBy] = useState<"name" | "apps" | "upgrades">("name");
|
||||
const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
|
||||
const [showChaosOnly, setShowChaosOnly] = useState(false);
|
||||
|
||||
const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
|
||||
const isMockMode = !import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
let serversData, appsData;
|
||||
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
[serversData, appsData] = await Promise.all([
|
||||
const { mockApiService } = await import("../../../services/mockApi");
|
||||
const [serversData, appsData] = await Promise.all([
|
||||
mockApiService.getServers(),
|
||||
mockApiService.getAppsGrouped(),
|
||||
]);
|
||||
|
||||
// Enrich servers with stats from apps data
|
||||
const enrichedServers = serversData.map((server) => {
|
||||
const serverStats = appsData[server.name];
|
||||
const chaosCount =
|
||||
serverStats?.apps.filter((app) => app.chaos === "true").length ||
|
||||
0;
|
||||
|
||||
return {
|
||||
...server,
|
||||
appCount: serverStats?.appCount || 0,
|
||||
versionCount: serverStats?.versionCount || 0,
|
||||
latestCount: serverStats?.latestCount || 0,
|
||||
upgradeCount: serverStats?.upgradeCount || 0,
|
||||
chaosCount,
|
||||
};
|
||||
});
|
||||
|
||||
setServers(enrichedServers);
|
||||
} else {
|
||||
[serversData, appsData] = await Promise.all([
|
||||
const [serversData, appsData] = await Promise.all([
|
||||
apiService.getServers(),
|
||||
apiService.getAppsGrouped(),
|
||||
]);
|
||||
|
||||
// Enrich servers with stats from apps data
|
||||
const enrichedServers = serversData.map((server) => {
|
||||
const serverStats = appsData[server.name];
|
||||
const chaosCount =
|
||||
serverStats?.apps.filter((app) => app.chaos === "true").length ||
|
||||
0;
|
||||
|
||||
return {
|
||||
...server,
|
||||
appCount: serverStats?.appCount || 0,
|
||||
versionCount: serverStats?.versionCount || 0,
|
||||
latestCount: serverStats?.latestCount || 0,
|
||||
upgradeCount: serverStats?.upgradeCount || 0,
|
||||
chaosCount,
|
||||
};
|
||||
});
|
||||
|
||||
setServers(enrichedServers);
|
||||
}
|
||||
|
||||
// Enrich servers with stats from apps data
|
||||
const enrichedServers = serversData.map((server) => {
|
||||
const serverStats = appsData[server.name];
|
||||
const chaosCount =
|
||||
serverStats?.apps.filter((app) => app.chaos === "true").length || 0;
|
||||
|
||||
return {
|
||||
...server,
|
||||
appCount: serverStats?.appCount || 0,
|
||||
versionCount: serverStats?.versionCount || 0,
|
||||
latestCount: serverStats?.latestCount || 0,
|
||||
upgradeCount: serverStats?.upgradeCount || 0,
|
||||
chaosCount,
|
||||
};
|
||||
});
|
||||
|
||||
setServers(enrichedServers);
|
||||
} catch (err) {
|
||||
console.error("Error loading servers:", err);
|
||||
setError(err instanceof Error ? err.message : "Failed to load servers");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -81,21 +96,21 @@ export const Servers: React.FC = () => {
|
||||
return { totalServers, totalApps, totalUpgrades, totalChaos };
|
||||
}, [servers]);
|
||||
|
||||
// Filter and sort servers (additive filters allowed)
|
||||
// Filter and sort servers
|
||||
const filteredServers = useMemo(() => {
|
||||
const filtered = servers.filter((server) => {
|
||||
const matchesSearch =
|
||||
const filtered = servers.filter(
|
||||
(server) =>
|
||||
server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
server.host.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
|
||||
const matchesChaos = !showChaosOnly || server.chaosCount > 0;
|
||||
return matchesSearch && matchesUpgrades && matchesChaos;
|
||||
});
|
||||
server.host.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
// Sort
|
||||
filtered.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case "apps":
|
||||
return b.appCount - a.appCount;
|
||||
case "upgrades":
|
||||
return b.upgradeCount - a.upgradeCount;
|
||||
case "name":
|
||||
default:
|
||||
return a.name.localeCompare(b.name);
|
||||
@@ -103,7 +118,7 @@ export const Servers: React.FC = () => {
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [servers, searchTerm, sortBy, showUpgradesOnly]);
|
||||
}, [servers, searchTerm, sortBy]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -139,36 +154,36 @@ export const Servers: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Compact Stats Row */}
|
||||
<div className="stats-row">
|
||||
<button
|
||||
className="stat-chip"
|
||||
onClick={() => navigate("/apps")}
|
||||
title="View all apps"
|
||||
>
|
||||
<span className="stat-label">Apps</span>
|
||||
<span className="stat-value">{stats.totalApps}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`stat-chip filter-chip ${showUpgradesOnly ? "active" : ""}`}
|
||||
onClick={() => setShowUpgradesOnly((prev) => !prev)}
|
||||
title="Click to filter by servers with upgrades"
|
||||
disabled={stats.totalUpgrades === 0}
|
||||
>
|
||||
<span className="stat-label">Upgrades</span>
|
||||
<span className="stat-value">{stats.totalUpgrades}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`stat-chip filter-chip ${showChaosOnly ? "active" : ""}`}
|
||||
onClick={() => setShowChaosOnly((prev) => !prev)}
|
||||
title="Click to filter servers with chaos apps"
|
||||
disabled={stats.totalChaos === 0}
|
||||
>
|
||||
<span className="stat-label">Chaos</span>
|
||||
<span className="stat-value">{stats.totalChaos}</span>
|
||||
</button>
|
||||
{/* Stats Overview */}
|
||||
<div className="stats-grid">
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon"></div>
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.totalServers}</p>
|
||||
<p className="stat-label">Total Servers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon"></div>
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.totalApps}</p>
|
||||
<p className="stat-label">Total Apps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card upgrade">
|
||||
<div className="stat-icon"></div>
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.totalUpgrades}</p>
|
||||
<p className="stat-label">Apps Need Upgrade</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card chaos">
|
||||
<div className="stat-icon"></div>
|
||||
<div className="stat-info">
|
||||
<p className="stat-number">{stats.totalChaos}</p>
|
||||
<p className="stat-label">Chaos Apps</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
@@ -180,6 +195,15 @@ export const Servers: React.FC = () => {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
>
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="apps">Sort by App Count</option>
|
||||
<option value="upgrades">Sort by Upgrades</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Server Cards */}
|
||||
@@ -226,20 +250,46 @@ export const Servers: React.FC = () => {
|
||||
</div>
|
||||
{server.upgradeCount > 0 && (
|
||||
<div className="stat-row highlight">
|
||||
<span className="stat-label">Need Upgrade</span>
|
||||
<span className="stat-label">
|
||||
<span className="upgrade-icon">⬆️</span> Need Upgrade
|
||||
</span>
|
||||
<span className="stat-value">{server.upgradeCount}</span>
|
||||
</div>
|
||||
)}
|
||||
{server.chaosCount > 0 && (
|
||||
<div className="stat-row chaos-row">
|
||||
<span className="stat-label">Chaos Mode</span>
|
||||
<span className="stat-label">
|
||||
<span className="chaos-icon">☠️</span> Chaos Mode
|
||||
</span>
|
||||
<span className="stat-value">{server.chaosCount}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="server-actions">
|
||||
<button
|
||||
className="action-btn primary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/servers/${server.name}`);
|
||||
}}
|
||||
>
|
||||
View Apps
|
||||
</button>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/servers/${server.name}`);
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{server.upgradeCount > 0 && (
|
||||
<div className="server-alert">
|
||||
<span className="alert-icon">⚠️</span>
|
||||
<span className="alert-text">
|
||||
{server.upgradeCount} app
|
||||
{server.upgradeCount > 1 ? "s" : ""} can be upgraded
|
||||
@@ -0,0 +1,94 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
|
||||
.login-container {
|
||||
@include flex-center;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
// @include gradient-primary;
|
||||
background-color: $primary-light;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
@include card;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $spacing-sm;
|
||||
font-size: $font-size-3xl;
|
||||
color: $text-primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
text-align: center;
|
||||
color: $text-secondary;
|
||||
margin: 0 0 $spacing-2xl;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: $spacing-sm;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: $spacing-md;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-base;
|
||||
transition: border-color $transition-base;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $bg-secondary;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
// background-color: rgba($error, 0.1);
|
||||
// color: darken($error, 10%);
|
||||
padding: $spacing-md;
|
||||
border-radius: $radius-md;
|
||||
margin-bottom: $spacing-md;
|
||||
font-size: $font-size-sm;
|
||||
// border-left: 4px solid $error;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
@include button-base;
|
||||
@include gradient-primary;
|
||||
width: 100%;
|
||||
color: white;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba($primary, 0.4);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../../hooks/useAuth";
|
||||
import "./LoginForm.scss";
|
||||
|
||||
export const LoginForm: React.FC = () => {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await login({ username, password });
|
||||
navigate("/dashboard");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Login failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-card">
|
||||
<h1>Coop Cloud</h1>
|
||||
<p className="login-subtitle">Sign in to manage your applications</p>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
autoComplete="username"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading} className="login-button">
|
||||
{loading ? "Signing in..." : "Sign in"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
|
||||
.recipe-form {
|
||||
@include card;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
padding: $spacing-lg;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: $font-size-xl;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xs;
|
||||
|
||||
&.field-inline {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $text-secondary;
|
||||
font-size: $font-size-sm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xs;
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input:not([type]),
|
||||
select {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
font-size: $font-size-base;
|
||||
background: $bg-primary;
|
||||
color: $text-primary;
|
||||
transition:
|
||||
border-color $transition-base,
|
||||
box-shadow $transition-base;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: $primary;
|
||||
box-shadow: 0 0 0 4px rgba($primary, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: $spacing-sm;
|
||||
justify-content: flex-end;
|
||||
|
||||
.action-btn {
|
||||
@include action-btn(
|
||||
2px,
|
||||
$radius-md,
|
||||
$spacing-sm $spacing-lg,
|
||||
$font-size-sm
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
margin: 0;
|
||||
color: $text-secondary;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
background: rgba($error, 0.08);
|
||||
color: $error;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiService } from "../../services/api";
|
||||
import type { AbraServer } from "../../types";
|
||||
import "./RecipeForm.scss";
|
||||
|
||||
function RecipeForm({ recipe, onClose }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [servers, setServers] = useState<AbraServer[]>([]);
|
||||
const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
|
||||
const [chaos, setChaos] = useState(false);
|
||||
const [secrets, setSecrets] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [serversData] = await Promise.all([apiService.getServers()]);
|
||||
|
||||
setServers(serversData);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load servers");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
});
|
||||
const [formData, setFormData] = useState({
|
||||
domain: "",
|
||||
chaos: false,
|
||||
secrets: true,
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log("Submitting:", formData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="recipe-form" onSubmit={handleSubmit}>
|
||||
<h2>{recipe.name}</h2>
|
||||
<p className="form-subtitle">Configure and deploy this recipe.</p>
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<p className="loading">Loading servers...</p>
|
||||
) : (
|
||||
<div className="field">
|
||||
<label>
|
||||
Choose a server to deploy to:
|
||||
<select
|
||||
className="select-input"
|
||||
value={selectedServer}
|
||||
onChange={(e) => setSelectedServer(e.target.value)}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{servers.map((server) => (
|
||||
<option key={server.name} value={server.name}>
|
||||
{server.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="field">
|
||||
<label>
|
||||
Domain:
|
||||
<input
|
||||
name="domain"
|
||||
placeholder="example.com"
|
||||
value={formData.domain}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="field field-inline">
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="chaos"
|
||||
checked={formData.chaos}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, chaos: e.target.checked })
|
||||
}
|
||||
/>
|
||||
Chaos Mode
|
||||
</label>
|
||||
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="secrets"
|
||||
checked={formData.secrets}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, secrets: e.target.checked })
|
||||
}
|
||||
/>
|
||||
Autogenerate Secrets
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button className="action-btn primary" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
<button className="action-btn" type="button" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecipeForm;
|
||||
@@ -1,165 +0,0 @@
|
||||
@use "../../assets/scss/variables" as *;
|
||||
@use "../../assets/scss/mixins" as *;
|
||||
@use "../../assets/scss/global" as *;
|
||||
|
||||
// Extend global page wrapper
|
||||
.recipes-page {
|
||||
@extend .page-wrapper;
|
||||
}
|
||||
|
||||
.recipes-content {
|
||||
@extend .page-content;
|
||||
}
|
||||
|
||||
// Recipes grid
|
||||
.recipes-grid {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Recipe card
|
||||
.recipe-card {
|
||||
@include card;
|
||||
@include card-dimensions(320px, 180px);
|
||||
row-gap: 1em;
|
||||
grid-template-rows: 1fr 2fr auto 0.9fr;
|
||||
transition:
|
||||
transform $transition-base,
|
||||
box-shadow $transition-base;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 30em;
|
||||
|
||||
.recipe-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: $spacing-lg;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 2px solid $bg-secondary;
|
||||
|
||||
.recipe-title {
|
||||
h3 {
|
||||
margin: 0 0 $spacing-xs;
|
||||
font-size: $font-size-xl;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.recipe-host {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-muted;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: clamp(20px, 3vw, 32px);
|
||||
height: clamp(20px, 3vw, 32px);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.card-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: $spacing-sm;
|
||||
height: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag-category {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: $radius-sm;
|
||||
color: $primary-dark;
|
||||
font-weight: $font-weight-bold;
|
||||
background-color: $accent-blue-soft;
|
||||
}
|
||||
.tag-feature {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: $radius-sm;
|
||||
color: $primary;
|
||||
font-weight: $font-weight-bold;
|
||||
background-color: $brand-pink-soft;
|
||||
}
|
||||
.recipe-stats {
|
||||
flex-grow: 1;
|
||||
flex: 1;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.stat-row {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.recipe-actions {
|
||||
display: flex;
|
||||
gap: $spacing-sm;
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
@include action-btn(
|
||||
2px,
|
||||
$radius-md,
|
||||
$spacing-sm $spacing-md,
|
||||
$font-size-sm
|
||||
);
|
||||
|
||||
&.primary {
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
border-color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-light;
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recipe-alert {
|
||||
background-color: rgba($warning, 0.1);
|
||||
border-left: 4px solid $warning;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
margin: 0 (-$spacing-xl) (-$spacing-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
|
||||
.alert-icon {
|
||||
font-size: $font-size-lg;
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-primary;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
width: min(90%, 500px);
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Header } from "../../components/Header/Header";
|
||||
import { apiService } from "../../services/api";
|
||||
import type { AbraApp, AbraRecipe, AppWithServer } from "../../types";
|
||||
import RecipeForm from "./RecipeForm.tsx";
|
||||
import "./Recipes.scss";
|
||||
|
||||
export const Recipes: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [recipesData, setRecipesData] = useState<AbraRecipe[] | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filterServer, setFilterServer] = useState<string>("all");
|
||||
const [filterStatus, setFilterStatus] = useState<string>("all");
|
||||
const [selectedRecipe, setSelectedRecipe] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (isMockMode) {
|
||||
const { mockApiService } = await import("../../services/mockApi");
|
||||
const data = await mockApiService.getRecipes();
|
||||
console.log(data);
|
||||
setRecipesData(data);
|
||||
} else {
|
||||
const data = await apiService.getRecipes();
|
||||
setRecipesData(data);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load apps");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [isMockMode]);
|
||||
|
||||
// Flatten and enrich apps data
|
||||
const allRecipes: AbraRecipe[] = useMemo(() => {
|
||||
if (!recipesData) return [];
|
||||
|
||||
return recipesData;
|
||||
}, [recipesData]);
|
||||
|
||||
// Filter recipes
|
||||
const filteredRecipes = useMemo(() => {
|
||||
return allRecipes.filter((recipe) => {
|
||||
const matchesSearch = recipe.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
|
||||
return matchesSearch;
|
||||
});
|
||||
}, [allRecipes, searchTerm, filterServer, filterStatus]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const total = allRecipes.length;
|
||||
|
||||
return { total };
|
||||
}, [allRecipes]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="apps-page">
|
||||
<Header />
|
||||
<main className="recipes-content">
|
||||
<div className="loading">Loading applications...</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="recipes-page">
|
||||
<Header />
|
||||
<main className="recipes-content">
|
||||
<div className="error">Error: {error}</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="recipes-page">
|
||||
<Header />
|
||||
<main className="recipes-content">
|
||||
<div className="page-header">
|
||||
<h1>Recipes</h1>
|
||||
<p className="subtitle">{stats.total} recipes</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="filters">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search recipes by name or description..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Server Cards */}
|
||||
<div className="recipes-grid">
|
||||
{filteredRecipes.length === 0 ? (
|
||||
<div className="no-results">
|
||||
No recipes found matching your search
|
||||
</div>
|
||||
) : (
|
||||
filteredRecipes.map((recipe) => (
|
||||
<div key={recipe.name} className="recipe-card">
|
||||
<div className="recipe-header">
|
||||
<div className="recipe-title">
|
||||
<h3>{recipe.name}</h3>
|
||||
</div>
|
||||
<div>
|
||||
{recipe.icon.length > 0 ? (
|
||||
<img src={`${recipe.icon}`} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="recipe-stats">
|
||||
<div className="stat-row">
|
||||
<span className="stat-value">{recipe.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="recipe-actions">
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
console.log("clicked");
|
||||
setSelectedRecipe(recipe);
|
||||
console.log("selectedRecipe:", selectedRecipe);
|
||||
}}
|
||||
>
|
||||
Add Recipe
|
||||
</button>
|
||||
</div>
|
||||
<div className="card-tags">
|
||||
{recipe.features.backups.toLowerCase().includes("yes") ? (
|
||||
<span className="tag-feature"> Backups </span>
|
||||
) : null}
|
||||
{recipe.features.healthcheck.toLowerCase().includes("yes") ? (
|
||||
<span className="tag-feature"> Healthcheck </span>
|
||||
) : null}
|
||||
{recipe.category.length > 0 ? (
|
||||
<span className="tag-category"> {recipe.category} </span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{selectedRecipe && (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={() => setSelectedRecipe(null)}
|
||||
>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
{}
|
||||
<RecipeForm
|
||||
recipe={selectedRecipe}
|
||||
onClose={() => setSelectedRecipe(null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="results-count">
|
||||
Showing {filteredRecipes.length} of {allRecipes.length} apps
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+54
-144
@@ -1,25 +1,22 @@
|
||||
import type { AbraRecipe, AbraServer, ServerAppsResponse } from "../types";
|
||||
|
||||
// Log entry type
|
||||
export type LogEntry = {
|
||||
type: "info" | "success" | "error" | "warning" | "command" | "output";
|
||||
text: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
import type {
|
||||
AbraApp,
|
||||
AbraServer,
|
||||
AuthResponse,
|
||||
LoginCredentials,
|
||||
User,
|
||||
} from "../types";
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
private async request<T>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {},
|
||||
@@ -29,6 +26,10 @@ class ApiService {
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
if (this.token) {
|
||||
headers["Authorization"] = `Bearer ${this.token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers,
|
||||
@@ -44,143 +45,52 @@ class ApiService {
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// Get all apps grouped by server
|
||||
// Auth methods
|
||||
async login(credentials: LoginCredentials): Promise<AuthResponse> {
|
||||
const response = await this.request<AuthResponse>("/auth/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(credentials),
|
||||
});
|
||||
|
||||
this.token = response.token;
|
||||
localStorage.setItem("auth_token", response.token);
|
||||
return response;
|
||||
}
|
||||
|
||||
async logout(): Promise<void> {
|
||||
this.token = null;
|
||||
localStorage.removeItem("auth_token");
|
||||
}
|
||||
|
||||
async getCurrentUser(): Promise<User> {
|
||||
return this.request<User>("/auth/me");
|
||||
}
|
||||
|
||||
// Abra CLI wrapper methods
|
||||
async getAppsGrouped(): Promise<ServerAppsResponse> {
|
||||
return this.request<ServerAppsResponse>("/apps");
|
||||
return this.request<ServerAppsResponse>("/abra/apps");
|
||||
}
|
||||
|
||||
// Get all servers
|
||||
async getServers(): Promise<AbraServer[]> {
|
||||
return this.request<AbraServer[]>("/servers");
|
||||
return this.request<AbraServer[]>("/abra/servers");
|
||||
}
|
||||
|
||||
// App actions with log streaming (websocket future)
|
||||
async deployApp(
|
||||
appName: string,
|
||||
onLog?: (log: LogEntry) => void,
|
||||
): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(
|
||||
`/apps/${appName}/deploy`,
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
);
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach((log) => onLog(log));
|
||||
}
|
||||
async deployApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/deploy`, {
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
|
||||
async undeployApp(
|
||||
appName: string,
|
||||
onLog?: (log: LogEntry) => void,
|
||||
): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(
|
||||
`/apps/${appName}/undeploy`,
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
);
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach((log) => onLog(log));
|
||||
}
|
||||
async stopApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/stop`, {
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
|
||||
async upgradeApp(
|
||||
appName: string,
|
||||
version: string,
|
||||
onLog?: (log: LogEntry) => void,
|
||||
): Promise<void> {
|
||||
const response = await this.request<{ logs: any[] }>(
|
||||
`/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[] }>(
|
||||
`/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[] }>(
|
||||
`/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[] }>(
|
||||
`/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[] }>(
|
||||
`/servers/${serverName}/upgrade-all`,
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
);
|
||||
|
||||
if (onLog && response.logs) {
|
||||
const logs = processLogResponse(response.logs);
|
||||
logs.forEach((log) => onLog(log));
|
||||
}
|
||||
}
|
||||
// recipe catalog imports
|
||||
async getRecipes(): Promise<AbraRecipe[]> {
|
||||
return this.request<AbraRecipe[]>("/abra/catalogue");
|
||||
async startApp(appName: string): Promise<void> {
|
||||
return this.request(`/abra/apps/${appName}/start`, {
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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}"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+10
-148
@@ -1,71 +1,10 @@
|
||||
import type { AbraRecipe, AbraServer, ServerAppsResponse } from "../types";
|
||||
import type { AbraServer, ServerAppsResponse } from "../types";
|
||||
import appsData from "./mock-apps.json";
|
||||
import serversData from "./mock-servers.json";
|
||||
import logsData from "./mock-logs.json";
|
||||
import catalogue from "./mock-catalogue.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);
|
||||
@@ -77,95 +16,18 @@ export const mockApiService = {
|
||||
return serversData as AbraServer[];
|
||||
},
|
||||
|
||||
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 deployApp(appName: string): Promise<void> {
|
||||
await delay(1000);
|
||||
console.log(`Mock: Deploying 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 stopApp(appName: string): Promise<void> {
|
||||
await delay(500);
|
||||
console.log(`Mock: Stopping app ${appName}`);
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
// recipe catalog imports
|
||||
async getRecipes(): Promise<AbraRecipe[]> {
|
||||
await delay(300);
|
||||
return catalogue as AbraRecipe[];
|
||||
async startApp(appName: string): Promise<void> {
|
||||
await delay(500);
|
||||
console.log(`Mock: Starting app ${appName}`);
|
||||
},
|
||||
};
|
||||
|
||||
+16
-32
@@ -1,3 +1,19 @@
|
||||
export interface User {
|
||||
id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
user: User;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface LoginCredentials {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
message: string;
|
||||
status: number;
|
||||
@@ -37,35 +53,3 @@ export interface AppWithServer extends AbraApp {
|
||||
upgradeCount: number;
|
||||
};
|
||||
}
|
||||
export interface Image {
|
||||
image: string;
|
||||
rating: string;
|
||||
source: string;
|
||||
url: string;
|
||||
}
|
||||
type RecipeVersions = Record<string, Record<string, ServiceMeta>>[];
|
||||
export interface ServiceMeta {
|
||||
image: string;
|
||||
tag: string;
|
||||
}
|
||||
export interface Features {
|
||||
backups: string;
|
||||
email: string;
|
||||
healthcheck: string;
|
||||
image: Image;
|
||||
status: number;
|
||||
tests: string;
|
||||
sso: string;
|
||||
}
|
||||
export interface AbraRecipe {
|
||||
category: string;
|
||||
default_branch: string;
|
||||
description: string;
|
||||
features: Features;
|
||||
icon: string;
|
||||
name: string;
|
||||
repository: string;
|
||||
ssh_url: string;
|
||||
versions: RecipeVersions;
|
||||
website: string;
|
||||
}
|
||||
|
||||
+8
-3
@@ -1,6 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
server: {
|
||||
cors: {
|
||||
origin: "http://localhost:3000",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user