refactor: convert guru-rmm to git submodule (gururmm Gitea repo)
Removes the stale copy of gururmm source from claudetools tracking and replaces it with a submodule pointing to the live gururmm Gitea repo. Fixes context drift between session logs and actual codebase state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
24
projects/msp-tools/guru-rmm/dashboard/.gitignore
vendored
24
projects/msp-tools/guru-rmm/dashboard/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,33 +0,0 @@
|
||||
# Build stage
|
||||
FROM node:22-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package.json package-lock.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source
|
||||
COPY . .
|
||||
|
||||
# Build with production API URL (can be overridden at runtime)
|
||||
ARG VITE_API_URL
|
||||
ENV VITE_API_URL=${VITE_API_URL}
|
||||
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copy custom nginx config
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copy built assets
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
|
||||
# Expose port
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>GuruRMM Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_proxied expired no-cache no-store private auth;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
|
||||
# SPA routing - serve index.html for all routes
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Cache static assets
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Don't cache index.html
|
||||
location = /index.html {
|
||||
expires -1;
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate";
|
||||
}
|
||||
}
|
||||
4700
projects/msp-tools/guru-rmm/dashboard/package-lock.json
generated
4700
projects/msp-tools/guru-rmm/dashboard/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "dashboard",
|
||||
"private": true,
|
||||
"version": "0.2.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.90.12",
|
||||
"axios": "^1.13.2",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.561.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.10.1",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"autoprefixer": "^10.4.22",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,161 +0,0 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { AuthProvider, useAuth } from "./hooks/useAuth";
|
||||
import { Layout } from "./components/Layout";
|
||||
import { Login } from "./pages/Login";
|
||||
import { Register } from "./pages/Register";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { Clients } from "./pages/Clients";
|
||||
import { Sites } from "./pages/Sites";
|
||||
import { Agents } from "./pages/Agents";
|
||||
import { AgentDetail } from "./pages/AgentDetail";
|
||||
import { History, HistoryDetail } from "./pages/History";
|
||||
import { Settings } from "./pages/Settings";
|
||||
import "./index.css";
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 1000 * 60,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
return <Layout>{children}</Layout>;
|
||||
}
|
||||
|
||||
function PublicRoute({ children }: { children: React.ReactNode }) {
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (user) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/login"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<Login />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/register"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<Register />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Dashboard />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/clients"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Clients />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/sites"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Sites />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/agents"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Agents />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/agents/:id"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<AgentDetail />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/history"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<History />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/history/:id"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<HistoryDetail />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Settings />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,250 +0,0 @@
|
||||
import axios, { AxiosError } from "axios";
|
||||
|
||||
// Default to production URL, override with VITE_API_URL for local dev
|
||||
const API_URL = import.meta.env.VITE_API_URL || "https://rmm-api.azcomputerguru.com";
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL: API_URL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
// Token management - use sessionStorage (cleared on tab close) instead of localStorage
|
||||
// This provides better security against XSS attacks as tokens are not persisted
|
||||
const TOKEN_KEY = "gururmm_auth_token";
|
||||
|
||||
export const getToken = (): string | null => {
|
||||
return sessionStorage.getItem(TOKEN_KEY);
|
||||
};
|
||||
|
||||
export const setToken = (token: string): void => {
|
||||
sessionStorage.setItem(TOKEN_KEY, token);
|
||||
};
|
||||
|
||||
export const clearToken = (): void => {
|
||||
sessionStorage.removeItem(TOKEN_KEY);
|
||||
};
|
||||
|
||||
// Request interceptor - add auth header
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = getToken();
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Response interceptor - handle 401 unauthorized
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error: AxiosError) => {
|
||||
if (error.response?.status === 401) {
|
||||
clearToken();
|
||||
// Use a more graceful redirect that preserves SPA state
|
||||
if (window.location.pathname !== "/login") {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// API types
|
||||
export interface Agent {
|
||||
id: string;
|
||||
hostname: string;
|
||||
os_type: string;
|
||||
os_version: string | null;
|
||||
agent_version: string | null;
|
||||
status: "online" | "offline" | "error";
|
||||
last_seen: string | null;
|
||||
created_at: string;
|
||||
device_id: string | null;
|
||||
site_id: string | null;
|
||||
site_name: string | null;
|
||||
client_id: string | null;
|
||||
client_name: string | null;
|
||||
}
|
||||
|
||||
export interface Metrics {
|
||||
id: number;
|
||||
agent_id: string;
|
||||
timestamp: string;
|
||||
cpu_percent: number;
|
||||
memory_percent: number;
|
||||
memory_used_bytes: number;
|
||||
disk_percent: number;
|
||||
disk_used_bytes: number;
|
||||
network_rx_bytes: number;
|
||||
network_tx_bytes: number;
|
||||
// Extended metrics
|
||||
uptime_seconds?: number;
|
||||
boot_time?: number;
|
||||
logged_in_user?: string;
|
||||
user_idle_seconds?: number;
|
||||
public_ip?: string;
|
||||
memory_total_bytes?: number;
|
||||
disk_total_bytes?: number;
|
||||
}
|
||||
|
||||
export interface NetworkInterface {
|
||||
name: string;
|
||||
mac_address?: string;
|
||||
ipv4_addresses: string[];
|
||||
ipv6_addresses: string[];
|
||||
}
|
||||
|
||||
export interface AgentState {
|
||||
agent_id: string;
|
||||
network_interfaces?: NetworkInterface[];
|
||||
network_state_hash?: string;
|
||||
uptime_seconds?: number;
|
||||
boot_time?: number;
|
||||
logged_in_user?: string;
|
||||
user_idle_seconds?: number;
|
||||
public_ip?: string;
|
||||
network_updated_at?: string;
|
||||
metrics_updated_at?: string;
|
||||
}
|
||||
|
||||
export interface Command {
|
||||
id: string;
|
||||
agent_id: string;
|
||||
command_type: string;
|
||||
command_text: string;
|
||||
status: "pending" | "running" | "completed" | "failed" | "cancelled";
|
||||
exit_code: number | null;
|
||||
stdout: string | null;
|
||||
stderr: string | null;
|
||||
created_at: string;
|
||||
completed_at: string | null;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
role: string;
|
||||
}
|
||||
|
||||
export interface Client {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string | null;
|
||||
notes: string | null;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
site_count: number;
|
||||
}
|
||||
|
||||
export interface Site {
|
||||
id: string;
|
||||
client_id: string;
|
||||
client_name: string | null;
|
||||
name: string;
|
||||
site_code: string;
|
||||
address: string | null;
|
||||
notes: string | null;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
agent_count: number;
|
||||
}
|
||||
|
||||
export interface CreateSiteResponse {
|
||||
site: Site;
|
||||
api_key: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface LoginRequest {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
token: string;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export interface RegisterRequest {
|
||||
email: string;
|
||||
password: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
// API functions
|
||||
export const authApi = {
|
||||
login: async (data: LoginRequest): Promise<LoginResponse> => {
|
||||
const response = await api.post<LoginResponse>("/api/auth/login", data);
|
||||
if (response.data.token) {
|
||||
setToken(response.data.token);
|
||||
}
|
||||
return response.data;
|
||||
},
|
||||
|
||||
register: async (data: RegisterRequest): Promise<LoginResponse> => {
|
||||
const response = await api.post<LoginResponse>("/api/auth/register", data);
|
||||
if (response.data.token) {
|
||||
setToken(response.data.token);
|
||||
}
|
||||
return response.data;
|
||||
},
|
||||
|
||||
me: () => api.get<User>("/api/auth/me"),
|
||||
|
||||
logout: (): void => {
|
||||
clearToken();
|
||||
},
|
||||
|
||||
isAuthenticated: (): boolean => {
|
||||
return !!getToken();
|
||||
},
|
||||
};
|
||||
|
||||
export const agentsApi = {
|
||||
list: () => api.get<Agent[]>("/api/agents"),
|
||||
listUnassigned: () => api.get<Agent[]>("/api/agents/unassigned"),
|
||||
get: (id: string) => api.get<Agent>(`/api/agents/${id}`),
|
||||
delete: (id: string) => api.delete(`/api/agents/${id}`),
|
||||
move: (id: string, siteId: string | null) =>
|
||||
api.post<Agent>(`/api/agents/${id}/move`, { site_id: siteId }),
|
||||
getMetrics: (id: string, hours?: number) =>
|
||||
api.get<Metrics[]>(`/api/agents/${id}/metrics`, { params: { hours } }),
|
||||
getState: (id: string) => api.get<AgentState>(`/api/agents/${id}/state`),
|
||||
};
|
||||
|
||||
export const commandsApi = {
|
||||
send: (agentId: string, command: { command_type: string; command: string }) =>
|
||||
api.post<Command>(`/api/agents/${agentId}/command`, command),
|
||||
list: () => api.get<Command[]>("/api/commands"),
|
||||
get: (id: string) => api.get<Command>(`/api/commands/${id}`),
|
||||
cancelCommand: (id: string) =>
|
||||
api.post<{ status: string; message: string }>(`/api/commands/${id}/cancel`),
|
||||
deleteCommand: (id: string) => api.delete(`/api/commands/${id}`),
|
||||
clearCommandHistory: () =>
|
||||
api.delete<{ deleted: number; message: string }>("/api/commands"),
|
||||
};
|
||||
|
||||
export const clientsApi = {
|
||||
list: () => api.get<Client[]>("/api/clients"),
|
||||
get: (id: string) => api.get<Client>(`/api/clients/${id}`),
|
||||
create: (data: { name: string; code?: string; notes?: string }) =>
|
||||
api.post<Client>("/api/clients", data),
|
||||
update: (id: string, data: { name?: string; code?: string; notes?: string; is_active?: boolean }) =>
|
||||
api.put<Client>(`/api/clients/${id}`, data),
|
||||
delete: (id: string) => api.delete(`/api/clients/${id}`),
|
||||
};
|
||||
|
||||
export const sitesApi = {
|
||||
list: () => api.get<Site[]>("/api/sites"),
|
||||
get: (id: string) => api.get<Site>(`/api/sites/${id}`),
|
||||
listByClient: (clientId: string) => api.get<Site[]>(`/api/clients/${clientId}/sites`),
|
||||
create: (data: { client_id: string; name: string; address?: string; notes?: string }) =>
|
||||
api.post<CreateSiteResponse>("/api/sites", data),
|
||||
update: (id: string, data: { name?: string; address?: string; notes?: string; is_active?: boolean }) =>
|
||||
api.put<Site>(`/api/sites/${id}`, data),
|
||||
delete: (id: string) => api.delete(`/api/sites/${id}`),
|
||||
regenerateApiKey: (id: string) =>
|
||||
api.post<{ api_key: string; message: string }>(`/api/sites/${id}/regenerate-key`),
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,78 +0,0 @@
|
||||
import { ButtonHTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
/**
|
||||
* Mission Control Button Component
|
||||
* Monospace text with smooth transitions and glow effects
|
||||
*/
|
||||
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "default" | "secondary" | "destructive" | "ghost" | "outline" | "link";
|
||||
size?: "default" | "sm" | "lg" | "icon";
|
||||
}
|
||||
|
||||
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant = "default", size = "default", ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
// Base styles
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg",
|
||||
"font-mono font-bold text-sm",
|
||||
// Smooth transitions
|
||||
"transition-all duration-300 ease-out",
|
||||
// Focus ring with glow
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900",
|
||||
// Hover scale
|
||||
"hover:scale-[1.02]",
|
||||
// Active scale
|
||||
"active:scale-[0.98]",
|
||||
// Disabled state
|
||||
"disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
|
||||
|
||||
// Variant styles
|
||||
{
|
||||
// Default (Primary): Cyan gradient with glow on hover
|
||||
"bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:shadow-xl":
|
||||
variant === "default",
|
||||
|
||||
// Secondary: Dark glass with cyan text
|
||||
"bg-slate-800/80 backdrop-blur-sm border border-slate-700/50 text-cyan-400 hover:border-cyan-500/50 hover:shadow-lg hover:shadow-cyan-500/20":
|
||||
variant === "secondary",
|
||||
|
||||
// Destructive: Rose gradient with glow
|
||||
"bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-lg shadow-rose-500/25 hover:shadow-rose-500/40 hover:shadow-xl":
|
||||
variant === "destructive",
|
||||
|
||||
// Ghost: Transparent with cyan hover
|
||||
"bg-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-400":
|
||||
variant === "ghost",
|
||||
|
||||
// Outline: Cyan border, transparent bg, fill on hover
|
||||
"border-2 border-cyan-500/50 bg-transparent text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-500/20":
|
||||
variant === "outline",
|
||||
|
||||
// Link: Underline style
|
||||
"text-cyan-400 underline-offset-4 hover:underline hover:text-cyan-300 hover:scale-100":
|
||||
variant === "link",
|
||||
},
|
||||
|
||||
// Size styles
|
||||
{
|
||||
"h-10 px-5 py-2": size === "default",
|
||||
"h-8 rounded-md px-3 text-xs": size === "sm",
|
||||
"h-12 rounded-lg px-8 text-base": size === "lg",
|
||||
"h-10 w-10 p-0": size === "icon",
|
||||
},
|
||||
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button };
|
||||
@@ -1,141 +0,0 @@
|
||||
import { HTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
/**
|
||||
* Mission Control Card Component
|
||||
* Glassmorphism design with optional glow variants
|
||||
*/
|
||||
|
||||
export type CardVariant = "default" | "glow-cyan" | "glow-green" | "glow-amber" | "glow-rose";
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: CardVariant;
|
||||
}
|
||||
|
||||
const cardVariants: Record<CardVariant, string> = {
|
||||
default: "border-slate-700/50",
|
||||
"glow-cyan": "border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.15)]",
|
||||
"glow-green": "border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]",
|
||||
"glow-amber": "border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.15)]",
|
||||
"glow-rose": "border-rose-500/50 shadow-[0_0_15px_rgba(244,63,94,0.15)]",
|
||||
};
|
||||
|
||||
const cardHoverVariants: Record<CardVariant, string> = {
|
||||
default: "hover:border-slate-600/70 hover:shadow-lg hover:shadow-slate-900/50",
|
||||
"glow-cyan": "hover:border-cyan-400/70 hover:shadow-[0_0_25px_rgba(6,182,212,0.25)]",
|
||||
"glow-green": "hover:border-emerald-400/70 hover:shadow-[0_0_25px_rgba(16,185,129,0.25)]",
|
||||
"glow-amber": "hover:border-amber-400/70 hover:shadow-[0_0_25px_rgba(245,158,11,0.25)]",
|
||||
"glow-rose": "hover:border-rose-400/70 hover:shadow-[0_0_25px_rgba(244,63,94,0.25)]",
|
||||
};
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ className, variant = "default", ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Base glassmorphism
|
||||
"rounded-xl bg-slate-900/60 backdrop-blur-xl",
|
||||
// Border
|
||||
"border",
|
||||
cardVariants[variant],
|
||||
// Inner shadow for depth
|
||||
"shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)]",
|
||||
// Text color
|
||||
"text-slate-100",
|
||||
// Transition for hover effects
|
||||
"transition-all duration-300 ease-out",
|
||||
// Hover: subtle lift
|
||||
"hover:-translate-y-0.5",
|
||||
cardHoverVariants[variant],
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 p-6",
|
||||
// Bottom border separator
|
||||
"border-b border-slate-700/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
||||
gradient?: boolean;
|
||||
gradientFrom?: string;
|
||||
gradientTo?: string;
|
||||
}
|
||||
|
||||
const CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(
|
||||
({ className, gradient = false, gradientFrom = "cyan-400", gradientTo = "blue-500", ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Monospace/bold styling
|
||||
"font-mono font-bold leading-none tracking-tight text-lg",
|
||||
// Gradient text option
|
||||
gradient && [
|
||||
"bg-clip-text text-transparent",
|
||||
`bg-gradient-to-r from-${gradientFrom} to-${gradientTo}`,
|
||||
],
|
||||
// Default text color when not gradient
|
||||
!gradient && "text-slate-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-sm text-slate-400",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center p-6 pt-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
|
||||
@@ -1,109 +0,0 @@
|
||||
import { InputHTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
/**
|
||||
* Mission Control Input Component
|
||||
* Dark background with cyan focus glow
|
||||
*/
|
||||
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, error = false, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
// Base styles
|
||||
"flex h-10 w-full rounded-lg px-4 py-2",
|
||||
"font-mono text-sm",
|
||||
// Dark background
|
||||
"bg-slate-900/50 backdrop-blur-sm",
|
||||
// Border
|
||||
"border border-slate-700",
|
||||
// Text colors
|
||||
"text-slate-100",
|
||||
// Placeholder
|
||||
"placeholder:text-slate-500",
|
||||
// Transitions
|
||||
"transition-all duration-200 ease-out",
|
||||
// File input styles
|
||||
"file:border-0 file:bg-slate-800 file:text-slate-300 file:text-sm file:font-medium file:mr-4 file:py-1 file:px-3 file:rounded-md",
|
||||
// Focus state: cyan border + outer glow + subtle background lighten
|
||||
"focus-visible:outline-none",
|
||||
"focus-visible:border-cyan-500",
|
||||
"focus-visible:ring-4 focus-visible:ring-cyan-500/30",
|
||||
"focus-visible:bg-slate-900/70",
|
||||
// Disabled state
|
||||
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
|
||||
// Error state: rose border + rose glow
|
||||
error && [
|
||||
"border-rose-500",
|
||||
"ring-4 ring-rose-500/30",
|
||||
"focus-visible:border-rose-500",
|
||||
"focus-visible:ring-rose-500/30",
|
||||
],
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
/**
|
||||
* Textarea variant with same Mission Control styling
|
||||
*/
|
||||
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, error = false, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
// Base styles
|
||||
"flex min-h-[120px] w-full rounded-lg px-4 py-3",
|
||||
"font-mono text-sm",
|
||||
// Dark background
|
||||
"bg-slate-900/50 backdrop-blur-sm",
|
||||
// Border
|
||||
"border border-slate-700",
|
||||
// Text colors
|
||||
"text-slate-100",
|
||||
// Placeholder
|
||||
"placeholder:text-slate-500",
|
||||
// Transitions
|
||||
"transition-all duration-200 ease-out",
|
||||
// Resize handle
|
||||
"resize-y",
|
||||
// Focus state
|
||||
"focus-visible:outline-none",
|
||||
"focus-visible:border-cyan-500",
|
||||
"focus-visible:ring-4 focus-visible:ring-cyan-500/30",
|
||||
"focus-visible:bg-slate-900/70",
|
||||
// Disabled state
|
||||
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
|
||||
// Error state
|
||||
error && [
|
||||
"border-rose-500",
|
||||
"ring-4 ring-rose-500/30",
|
||||
"focus-visible:border-rose-500",
|
||||
"focus-visible:ring-rose-500/30",
|
||||
],
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Textarea.displayName = "Textarea";
|
||||
|
||||
export { Input, Textarea };
|
||||
@@ -1,291 +0,0 @@
|
||||
import { ReactNode, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { commandsApi, Command } from "../api/client";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Server,
|
||||
Settings,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Building2,
|
||||
MapPin,
|
||||
History,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { Button } from "./Button";
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ path: "/", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ path: "/clients", label: "Clients", icon: Building2 },
|
||||
{ path: "/sites", label: "Sites", icon: MapPin },
|
||||
{ path: "/agents", label: "Agents", icon: Server },
|
||||
{ path: "/settings", label: "Settings", icon: Settings },
|
||||
];
|
||||
|
||||
const APP_VERSION = "0.2.0";
|
||||
const SERVER_VERSION = "0.1.0";
|
||||
|
||||
function CommandStatusIcon({ status }: { status: Command["status"] }) {
|
||||
const config = {
|
||||
pending: { icon: Clock, color: "text-amber-500" },
|
||||
running: { icon: Loader2, color: "text-cyan-500 animate-spin" },
|
||||
completed: { icon: CheckCircle, color: "text-emerald-500" },
|
||||
failed: { icon: XCircle, color: "text-rose-500" },
|
||||
};
|
||||
const { icon: Icon, color } = config[status];
|
||||
return <Icon className={`h-3 w-3 ${color}`} />;
|
||||
}
|
||||
|
||||
export function Layout({ children }: LayoutProps) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const { data: commands = [] } = useQuery({
|
||||
queryKey: ["commands"],
|
||||
queryFn: () => commandsApi.list().then((res) => res.data),
|
||||
refetchInterval: 15000,
|
||||
});
|
||||
|
||||
const recentCommands = commands.slice(0, 4);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
{/* Subtle grid pattern background */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "50px 50px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Mobile header */}
|
||||
<div className="lg:hidden fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-slate-900/80 backdrop-blur-xl border-b border-cyan-500/20">
|
||||
<span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||||
GURUR<span className="text-cyan-400">MM</span>
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10 transition-all duration-300"
|
||||
>
|
||||
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu overlay with blur */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 lg:hidden transition-all duration-300 ${
|
||||
sidebarOpen
|
||||
? "opacity-100 pointer-events-auto"
|
||||
: "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex relative">
|
||||
{/* Sidebar - Mission Control Aesthetic */}
|
||||
<aside
|
||||
className={`fixed inset-y-0 left-0 z-50 w-60 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
|
||||
sidebarOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
{/* Glassmorphism sidebar container */}
|
||||
<div className="flex flex-col h-full bg-slate-900/60 backdrop-blur-xl border-r border-cyan-500/20 shadow-[inset_0_0_30px_rgba(6,182,212,0.05)]">
|
||||
{/* Cyan left border glow */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-gradient-to-b from-transparent via-cyan-500/50 to-transparent" />
|
||||
|
||||
{/* Logo section */}
|
||||
<div className="p-4 hidden lg:block">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Logo icon with glow */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-cyan-500/30 blur-lg rounded-lg" />
|
||||
<div className="relative h-8 w-8 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
||||
<LayoutDashboard className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Logo text with gradient */}
|
||||
<div>
|
||||
<h1 className="text-lg font-bold tracking-wider">
|
||||
<span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
|
||||
GURU
|
||||
</span>
|
||||
<span className="text-slate-300">RMM</span>
|
||||
</h1>
|
||||
<p className="text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
||||
Mission Control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-2 space-y-0.5 mt-4 lg:mt-2 pt-16 lg:pt-0">
|
||||
{navItems.map((item) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className={`group relative flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
|
||||
isActive
|
||||
? "text-cyan-400"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
{/* Active/Hover background glow */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-lg transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-cyan-500/10 shadow-[inset_0_0_20px_rgba(6,182,212,0.1)]"
|
||||
: "bg-transparent group-hover:bg-cyan-500/5"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Active left border indicator */}
|
||||
<div
|
||||
className={`absolute left-0 top-2 bottom-2 w-[3px] rounded-full transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.8)]"
|
||||
: "bg-transparent"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Icon with conditional glow */}
|
||||
<div className="relative z-10">
|
||||
<item.icon
|
||||
className={`h-4 w-4 transition-all duration-300 ${
|
||||
isActive
|
||||
? "text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
|
||||
: "text-slate-500 group-hover:text-slate-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
|
||||
{/* Active indicator dot */}
|
||||
{isActive && (
|
||||
<div className="absolute right-4 h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_6px_rgba(6,182,212,0.8)]" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User profile section */}
|
||||
<div className="p-3 border-t border-cyan-500/10">
|
||||
<div className="flex items-center gap-2 mb-3 p-2 rounded-lg bg-slate-800/30">
|
||||
{/* Avatar with cyan ring glow */}
|
||||
<div className="relative">
|
||||
{/* Glow ring */}
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full opacity-50 blur-sm" />
|
||||
{/* Avatar */}
|
||||
<div className="relative h-8 w-8 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
|
||||
{user?.name?.[0] || user?.email?.[0] || "U"}
|
||||
</div>
|
||||
{/* Online indicator */}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-emerald-500 ring-2 ring-slate-900 shadow-[0_0_8px_rgba(16,185,129,0.6)]" />
|
||||
</div>
|
||||
|
||||
{/* User info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-200 truncate">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
<p className="text-xs text-cyan-500/70 uppercase tracking-wider truncate">
|
||||
{user?.role || "Operator"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sign out button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="h-4 w-4 transition-all duration-300 group-hover:text-red-400 group-hover:drop-shadow-[0_0_6px_rgba(239,68,68,0.6)]" />
|
||||
Sign Out
|
||||
</Button>
|
||||
|
||||
{/* History log */}
|
||||
<div className="mt-2 pt-2 border-t border-slate-800/50">
|
||||
<Link
|
||||
to="/history"
|
||||
className="flex items-center gap-1.5 px-1 py-1 text-[10px] font-mono text-slate-500 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
<History className="h-3 w-3" />
|
||||
<span>History</span>
|
||||
</Link>
|
||||
|
||||
<div className="mt-1 space-y-0.5">
|
||||
{recentCommands.length === 0 ? (
|
||||
<p className="text-[10px] text-slate-600 px-1">No recent activity</p>
|
||||
) : (
|
||||
recentCommands.map((cmd: Command) => (
|
||||
<Link
|
||||
key={cmd.id}
|
||||
to={`/history/${cmd.id}`}
|
||||
className="flex items-center gap-1.5 px-1 py-0.5 rounded text-[10px] hover:bg-slate-800/50 transition-colors"
|
||||
title={cmd.command_text}
|
||||
>
|
||||
<CommandStatusIcon status={cmd.status} />
|
||||
<span className="text-slate-500 hover:text-slate-400 truncate flex-1 font-mono">
|
||||
{cmd.command_text.length > 18
|
||||
? cmd.command_text.slice(0, 18) + "..."
|
||||
: cmd.command_text}
|
||||
</span>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version info */}
|
||||
<div className="mt-2 pt-2 border-t border-slate-800/50 text-[10px] font-mono text-slate-600 flex justify-between px-1">
|
||||
<span>UI v{APP_VERSION}</span>
|
||||
<span>API v{SERVER_VERSION}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main content area */}
|
||||
<main className="flex-1 min-h-screen pt-16 lg:pt-0">
|
||||
<div className="p-4 lg:p-6 transition-all duration-300">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
|
||||
import { User, authApi, getToken, clearToken } from "../api/client";
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string, name?: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Check authentication status on mount
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
const token = getToken();
|
||||
if (token) {
|
||||
try {
|
||||
const res = await authApi.me();
|
||||
setUser(res.data);
|
||||
} catch {
|
||||
// Token is invalid or expired, clear it
|
||||
clearToken();
|
||||
setUser(null);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
const response = await authApi.login({ email, password });
|
||||
// Token is automatically stored by authApi.login
|
||||
setUser(response.user);
|
||||
};
|
||||
|
||||
const register = async (email: string, password: string, name?: string) => {
|
||||
const response = await authApi.register({ email, password, name });
|
||||
// Token is automatically stored by authApi.register
|
||||
setUser(response.user);
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
authApi.logout();
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
const isAuthenticated = authApi.isAuthenticated();
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, isAuthenticated, isLoading, login, register, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +0,0 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -1,449 +0,0 @@
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useParams, Link } from "react-router-dom";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Send,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Network,
|
||||
MemoryStick,
|
||||
Clock,
|
||||
User,
|
||||
Globe,
|
||||
Wifi,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
import { agentsApi, commandsApi, Metrics, AgentState } from "../api/client";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
|
||||
import { Button } from "../components/Button";
|
||||
import { Input } from "../components/Input";
|
||||
|
||||
function MetricCard({
|
||||
title,
|
||||
value,
|
||||
icon: Icon,
|
||||
unit,
|
||||
subValue,
|
||||
}: {
|
||||
title: string;
|
||||
value: number | string | null;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
unit: string;
|
||||
subValue?: string;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[hsl(var(--muted-foreground))]">{title}</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{value !== null ? `${typeof value === "number" ? value.toFixed(1) : value}${unit}` : "-"}
|
||||
</p>
|
||||
{subValue && (
|
||||
<p className="text-xs text-[hsl(var(--muted-foreground))]">{subValue}</p>
|
||||
)}
|
||||
</div>
|
||||
<Icon className="h-8 w-8 text-[hsl(var(--muted-foreground))]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function formatUptime(seconds: number): string {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}d ${hours}h ${minutes}m`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}h ${minutes}m`;
|
||||
} else {
|
||||
return `${minutes}m`;
|
||||
}
|
||||
}
|
||||
|
||||
function formatIdleTime(seconds: number): string {
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
||||
return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||
return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
function MetricsChart({ metrics }: { metrics: Metrics[] }) {
|
||||
// Reverse to show oldest first, take last 60 points
|
||||
const chartData = [...metrics]
|
||||
.reverse()
|
||||
.slice(-60)
|
||||
.map((m) => ({
|
||||
time: new Date(m.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||||
cpu: m.cpu_percent,
|
||||
memory: m.memory_percent,
|
||||
}));
|
||||
|
||||
if (chartData.length === 0) {
|
||||
return (
|
||||
<div className="h-64 flex items-center justify-center text-[hsl(var(--muted-foreground))]">
|
||||
No metrics data available
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fontSize: 12 }}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 100]}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fontSize: 12 }}
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
labelStyle={{ color: "hsl(var(--foreground))" }}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="cpu"
|
||||
name="CPU %"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="memory"
|
||||
name="Memory %"
|
||||
stroke="#10b981"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function NetworkInterfacesCard({ state }: { state: AgentState | null }) {
|
||||
if (!state?.network_interfaces || state.network_interfaces.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Wifi className="h-5 w-5" />
|
||||
Network Interfaces
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{state.network_interfaces.map((iface, idx) => (
|
||||
<div key={idx} className="border-b border-[hsl(var(--border))] pb-3 last:border-0 last:pb-0">
|
||||
<div className="font-medium">{iface.name}</div>
|
||||
{iface.mac_address && (
|
||||
<div className="text-xs text-[hsl(var(--muted-foreground))] font-mono">
|
||||
MAC: {iface.mac_address}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-1 space-y-1">
|
||||
{iface.ipv4_addresses.map((ip, i) => (
|
||||
<div key={i} className="text-sm font-mono text-[hsl(var(--primary))]">
|
||||
{ip}
|
||||
</div>
|
||||
))}
|
||||
{iface.ipv6_addresses.slice(0, 2).map((ip, i) => (
|
||||
<div key={i} className="text-xs font-mono text-[hsl(var(--muted-foreground))]">
|
||||
{ip}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function AgentDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [command, setCommand] = useState("");
|
||||
const [commandType, setCommandType] = useState("shell");
|
||||
|
||||
const { data: agent, isLoading: agentLoading } = useQuery({
|
||||
queryKey: ["agent", id],
|
||||
queryFn: () => agentsApi.get(id!).then((res) => res.data),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
// Get more metrics for the chart (last 2 hours = 120 data points at 1min intervals)
|
||||
const { data: metrics = [] } = useQuery({
|
||||
queryKey: ["agent-metrics", id],
|
||||
queryFn: () => agentsApi.getMetrics(id!, 2).then((res) => res.data),
|
||||
enabled: !!id,
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const { data: agentState } = useQuery({
|
||||
queryKey: ["agent-state", id],
|
||||
queryFn: () => agentsApi.getState(id!).then((res) => res.data).catch(() => null),
|
||||
enabled: !!id,
|
||||
refetchInterval: 60000,
|
||||
});
|
||||
|
||||
const latestMetrics = metrics[0] as Metrics | undefined;
|
||||
|
||||
const sendCommandMutation = useMutation({
|
||||
mutationFn: (cmd: { command_type: string; command: string }) =>
|
||||
commandsApi.send(id!, cmd),
|
||||
onSuccess: () => {
|
||||
setCommand("");
|
||||
},
|
||||
});
|
||||
|
||||
const handleSendCommand = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!command.trim()) return;
|
||||
sendCommandMutation.mutate({ command_type: commandType, command });
|
||||
};
|
||||
|
||||
if (agentLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Loading agent...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!agent) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Link to="/agents" className="flex items-center gap-2 text-[hsl(var(--primary))]">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to agents
|
||||
</Link>
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Agent not found.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Use agent state for extended info, fallback to latest metrics
|
||||
const uptime = agentState?.uptime_seconds ?? latestMetrics?.uptime_seconds;
|
||||
const publicIp = agentState?.public_ip ?? latestMetrics?.public_ip;
|
||||
const loggedInUser = agentState?.logged_in_user ?? latestMetrics?.logged_in_user;
|
||||
const idleTime = agentState?.user_idle_seconds ?? latestMetrics?.user_idle_seconds;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/agents" className="text-[hsl(var(--primary))]">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{agent.hostname}</h1>
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
{agent.os_type} {agent.os_version && `(${agent.os_version})`}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={`ml-auto px-3 py-1 rounded-full text-sm font-medium ${
|
||||
agent.status === "online"
|
||||
? "bg-green-100 text-green-800"
|
||||
: agent.status === "error"
|
||||
? "bg-red-100 text-red-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{agent.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Primary Metrics */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<MetricCard
|
||||
title="CPU Usage"
|
||||
value={latestMetrics?.cpu_percent ?? null}
|
||||
icon={Cpu}
|
||||
unit="%"
|
||||
/>
|
||||
<MetricCard
|
||||
title="Memory Usage"
|
||||
value={latestMetrics?.memory_percent ?? null}
|
||||
icon={MemoryStick}
|
||||
unit="%"
|
||||
subValue={latestMetrics?.memory_used_bytes ? formatBytes(latestMetrics.memory_used_bytes) : undefined}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Disk Usage"
|
||||
value={latestMetrics?.disk_percent ?? null}
|
||||
icon={HardDrive}
|
||||
unit="%"
|
||||
subValue={latestMetrics?.disk_used_bytes ? formatBytes(latestMetrics.disk_used_bytes) : undefined}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Network RX"
|
||||
value={
|
||||
latestMetrics?.network_rx_bytes
|
||||
? (latestMetrics.network_rx_bytes / 1024 / 1024).toFixed(1)
|
||||
: null
|
||||
}
|
||||
icon={Network}
|
||||
unit=" MB"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Extended Info */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<MetricCard
|
||||
title="Uptime"
|
||||
value={uptime ? formatUptime(uptime) : null}
|
||||
icon={Clock}
|
||||
unit=""
|
||||
/>
|
||||
<MetricCard
|
||||
title="Public IP"
|
||||
value={publicIp ?? null}
|
||||
icon={Globe}
|
||||
unit=""
|
||||
/>
|
||||
<MetricCard
|
||||
title="Logged In User"
|
||||
value={loggedInUser ?? null}
|
||||
icon={User}
|
||||
unit=""
|
||||
/>
|
||||
<MetricCard
|
||||
title="User Idle"
|
||||
value={idleTime !== undefined && idleTime !== null ? formatIdleTime(idleTime) : null}
|
||||
icon={Activity}
|
||||
unit=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Usage Chart */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>CPU & Memory Usage (Last 2 Hours)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<MetricsChart metrics={metrics} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Network Interfaces and Remote Command side by side */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<NetworkInterfacesCard state={agentState ?? null} />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Remote Command</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSendCommand} className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<select
|
||||
value={commandType}
|
||||
onChange={(e) => setCommandType(e.target.value)}
|
||||
className="flex h-9 rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
<option value="shell">Shell</option>
|
||||
<option value="powershell">PowerShell</option>
|
||||
</select>
|
||||
<Input
|
||||
placeholder="Enter command..."
|
||||
value={command}
|
||||
onChange={(e) => setCommand(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button type="submit" disabled={sendCommandMutation.isPending || !command.trim()}>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
{sendCommandMutation.isSuccess && (
|
||||
<p className="text-sm text-green-600">Command sent successfully!</p>
|
||||
)}
|
||||
{sendCommandMutation.isError && (
|
||||
<p className="text-sm text-[hsl(var(--destructive))]">
|
||||
Failed to send command. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Agent Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Agent Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Agent ID</dt>
|
||||
<dd className="font-mono text-xs break-all">{agent.id}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Agent Version</dt>
|
||||
<dd>{agent.agent_version || "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Registered</dt>
|
||||
<dd>{new Date(agent.created_at).toLocaleString()}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Last Seen</dt>
|
||||
<dd>{agent.last_seen ? new Date(agent.last_seen).toLocaleString() : "Never"}</dd>
|
||||
</div>
|
||||
{agent.site_name && (
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Site</dt>
|
||||
<dd>{agent.site_name}</dd>
|
||||
</div>
|
||||
)}
|
||||
{agent.client_name && (
|
||||
<div>
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Client</dt>
|
||||
<dd>{agent.client_name}</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,437 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import { Trash2, Terminal, RefreshCw, MoveRight, X } from "lucide-react";
|
||||
import { agentsApi, sitesApi, Agent, Site } from "../api/client";
|
||||
import { Card, CardContent } from "../components/Card";
|
||||
import { Button } from "../components/Button";
|
||||
import { Input } from "../components/Input";
|
||||
|
||||
function AgentStatusBadge({ status }: { status: Agent["status"] }) {
|
||||
const statusConfig = {
|
||||
online: {
|
||||
dotClass: "bg-[var(--accent-green)] shadow-[0_0_8px_var(--accent-green)]",
|
||||
badgeClass: "bg-[var(--accent-green-muted)] text-[var(--accent-green-light)] border border-[rgba(16,185,129,0.3)]",
|
||||
animate: true,
|
||||
},
|
||||
offline: {
|
||||
dotClass: "bg-[var(--text-muted)]",
|
||||
badgeClass: "bg-[rgba(100,116,139,0.2)] text-[var(--text-muted)] border border-[rgba(100,116,139,0.3)]",
|
||||
animate: false,
|
||||
},
|
||||
error: {
|
||||
dotClass: "bg-[var(--accent-rose)] shadow-[0_0_8px_var(--accent-rose)]",
|
||||
badgeClass: "bg-[var(--accent-rose-muted)] text-[var(--accent-rose-light)] border border-[rgba(244,63,94,0.3)]",
|
||||
animate: true,
|
||||
},
|
||||
};
|
||||
|
||||
const config = statusConfig[status];
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full font-mono text-xs font-semibold uppercase tracking-wider ${config.badgeClass}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${config.dotClass} ${config.animate ? "animate-pulse" : ""}`} />
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MoveAgentModal({
|
||||
agent,
|
||||
sites,
|
||||
onClose,
|
||||
onMove,
|
||||
isLoading,
|
||||
}: {
|
||||
agent: Agent;
|
||||
sites: Site[];
|
||||
onClose: () => void;
|
||||
onMove: (siteId: string | null) => void;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const [selectedSiteId, setSelectedSiteId] = useState<string>(agent.site_id || "");
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-6 w-full max-w-md shadow-xl">
|
||||
<h2 className="text-xl font-mono font-bold text-[var(--text-primary)] mb-2">Move Agent</h2>
|
||||
<p className="text-[var(--text-secondary)] mb-6">
|
||||
Move <strong className="text-[var(--accent-cyan)]">{agent.hostname}</strong> to a different site
|
||||
</p>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2">
|
||||
Select Site
|
||||
</label>
|
||||
<select
|
||||
value={selectedSiteId}
|
||||
onChange={(e) => setSelectedSiteId(e.target.value)}
|
||||
className="w-full px-3 py-2.5 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
|
||||
>
|
||||
<option value="">-- Unassigned --</option>
|
||||
{sites.map((site) => (
|
||||
<option key={site.id} value={site.id}>
|
||||
{site.client_name} → {site.name} ({site.site_code})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-secondary)]">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => onMove(selectedSiteId || null)}
|
||||
disabled={isLoading || selectedSiteId === (agent.site_id || "")}
|
||||
className="btn-mission-control"
|
||||
>
|
||||
{isLoading ? "Moving..." : "Move Agent"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Agents() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
||||
const [movingAgent, setMovingAgent] = useState<Agent | null>(null);
|
||||
const [filterClient, setFilterClient] = useState<string>("");
|
||||
const [filterSite, setFilterSite] = useState<string>("");
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const statusFilter = searchParams.get("status") || "";
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: agents = [], isLoading, refetch } = useQuery({
|
||||
queryKey: ["agents"],
|
||||
queryFn: () => agentsApi.list().then((res) => res.data),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const { data: sites = [] } = useQuery({
|
||||
queryKey: ["sites"],
|
||||
queryFn: () => sitesApi.list().then((res) => res.data),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => agentsApi.delete(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["agents"] });
|
||||
setDeleteConfirm(null);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to delete agent:", error);
|
||||
alert(`Failed to delete agent: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const moveMutation = useMutation({
|
||||
mutationFn: ({ agentId, siteId }: { agentId: string; siteId: string | null }) =>
|
||||
agentsApi.move(agentId, siteId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["agents"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["sites"] });
|
||||
setMovingAgent(null);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to move agent:", error);
|
||||
alert(`Failed to move agent: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
// Get unique clients from agents
|
||||
const clients = [...new Set(agents.filter((a: Agent) => a.client_name).map((a: Agent) => a.client_name))];
|
||||
|
||||
// Filter agents
|
||||
const filteredAgents = agents.filter((agent: Agent) => {
|
||||
const matchesSearch =
|
||||
agent.hostname.toLowerCase().includes(search.toLowerCase()) ||
|
||||
agent.os_type.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(agent.client_name && agent.client_name.toLowerCase().includes(search.toLowerCase())) ||
|
||||
(agent.site_name && agent.site_name.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
// Handle special __unassigned__ filter value
|
||||
let matchesClient: boolean;
|
||||
if (filterClient === "__unassigned__") {
|
||||
// Show only agents without a site/client assignment
|
||||
matchesClient = !agent.site_id;
|
||||
} else if (filterClient) {
|
||||
matchesClient = agent.client_name === filterClient;
|
||||
} else {
|
||||
matchesClient = true;
|
||||
}
|
||||
|
||||
const matchesSite = !filterSite || agent.site_id === filterSite;
|
||||
const matchesStatus = !statusFilter || agent.status === statusFilter;
|
||||
|
||||
return matchesSearch && matchesClient && matchesSite && matchesStatus;
|
||||
});
|
||||
|
||||
const clearStatusFilter = () => {
|
||||
searchParams.delete("status");
|
||||
setSearchParams(searchParams);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-3xl font-mono font-bold text-[var(--text-primary)]">Agents</h1>
|
||||
{statusFilter && (
|
||||
<button
|
||||
onClick={clearStatusFilter}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-semibold bg-[var(--accent-cyan-muted)] text-[var(--accent-cyan)] border border-[var(--border-accent)] hover:bg-[var(--accent-cyan)] hover:text-[var(--bg-primary)] transition-all"
|
||||
>
|
||||
Status: {statusFilter}
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[var(--text-secondary)] mt-1">
|
||||
Manage your monitored endpoints
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
className="border-[var(--border-accent)] text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] hover:shadow-[var(--glow-cyan)] transition-all"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-4">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<Input
|
||||
placeholder="Search agents..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="max-w-sm bg-[var(--bg-secondary)] border-[var(--border-primary)] text-[var(--text-primary)] font-mono placeholder:text-[var(--text-muted)] focus:border-[var(--accent-cyan)] focus:ring-[var(--accent-cyan-muted)]"
|
||||
/>
|
||||
<select
|
||||
value={filterClient}
|
||||
onChange={(e) => {
|
||||
setFilterClient(e.target.value);
|
||||
setFilterSite("");
|
||||
}}
|
||||
className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
|
||||
>
|
||||
<option value="">All Clients</option>
|
||||
<option value="__unassigned__">Unassigned Only</option>
|
||||
{clients.map((client) => (
|
||||
<option key={client} value={client || ""}>
|
||||
{client}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{filterClient && filterClient !== "__unassigned__" && (
|
||||
<select
|
||||
value={filterSite}
|
||||
onChange={(e) => setFilterSite(e.target.value)}
|
||||
className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
|
||||
>
|
||||
<option value="">All Sites</option>
|
||||
{sites
|
||||
.filter((s: Site) => s.client_name === filterClient)
|
||||
.map((site: Site) => (
|
||||
<option key={site.id} value={site.id}>
|
||||
{site.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
searchParams.set("status", e.target.value);
|
||||
} else {
|
||||
searchParams.delete("status");
|
||||
}
|
||||
setSearchParams(searchParams);
|
||||
}}
|
||||
className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
<option value="online">Online</option>
|
||||
<option value="offline">Offline</option>
|
||||
<option value="error">Error</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Flat Table View */}
|
||||
{filteredAgents.length > 0 && (
|
||||
<Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full data-grid">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--border-primary)]">
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Hostname</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Client</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Site</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">OS</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Status</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Last Seen</th>
|
||||
<th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Version</th>
|
||||
<th className="text-right py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredAgents.map((agent: Agent) => (
|
||||
<tr
|
||||
key={agent.id}
|
||||
className="border-b border-[var(--border-secondary)] hover:bg-[rgba(6,182,212,0.05)] transition-colors"
|
||||
>
|
||||
<td className="py-2 px-4">
|
||||
<Link
|
||||
to={`/agents/${agent.id}`}
|
||||
className="font-mono font-medium text-[var(--accent-cyan)] hover:text-[var(--accent-cyan-light)] hover:underline transition-colors"
|
||||
>
|
||||
{agent.hostname}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
|
||||
{agent.client_name || <span className="text-[var(--text-muted)]">-</span>}
|
||||
</td>
|
||||
<td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
|
||||
{agent.site_name || <span className="text-[var(--text-muted)]">-</span>}
|
||||
</td>
|
||||
<td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
|
||||
{agent.os_type}
|
||||
{agent.os_version && (
|
||||
<span className="text-[var(--text-muted)]">
|
||||
{" "}({agent.os_version})
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-4">
|
||||
<AgentStatusBadge status={agent.status} />
|
||||
</td>
|
||||
<td className="py-2 px-4 font-mono text-sm text-[var(--text-muted)]">
|
||||
{agent.last_seen
|
||||
? new Date(agent.last_seen).toLocaleString()
|
||||
: "Never"}
|
||||
</td>
|
||||
<td className="py-2 px-4 font-mono text-sm text-[var(--text-muted)]">
|
||||
{agent.agent_version || "-"}
|
||||
</td>
|
||||
<td className="py-2 px-4">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Move to different site"
|
||||
onClick={() => setMovingAgent(agent)}
|
||||
className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] transition-all"
|
||||
>
|
||||
<MoveRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Link to={`/agents/${agent.id}`}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Open terminal"
|
||||
className="text-[var(--text-muted)] hover:text-[var(--accent-green)] hover:bg-[var(--accent-green-muted)] transition-all"
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
{deleteConfirm === agent.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => deleteMutation.mutate(agent.id)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="bg-[var(--accent-rose)] hover:bg-[var(--accent-rose-light)] hover:shadow-[var(--glow-rose)]"
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setDeleteConfirm(null)}
|
||||
className="text-[var(--text-muted)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Delete agent"
|
||||
onClick={() => setDeleteConfirm(agent.id)}
|
||||
className="text-[var(--text-muted)] hover:text-[var(--accent-rose)] hover:bg-[var(--accent-rose-muted)] transition-all"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-8 text-center">
|
||||
<div className="inline-flex items-center gap-3 text-[var(--text-secondary)]">
|
||||
<RefreshCw className="h-5 w-5 animate-spin text-[var(--accent-cyan)]" />
|
||||
<span className="font-mono">Loading agents...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && filteredAgents.length === 0 && (
|
||||
<Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl">
|
||||
<CardContent className="py-12 text-center">
|
||||
<p className="text-[var(--text-muted)] font-mono">
|
||||
{search || filterClient || statusFilter
|
||||
? "No agents match your filters."
|
||||
: "No agents registered yet."}
|
||||
</p>
|
||||
{(search || filterClient || statusFilter) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
setFilterClient("");
|
||||
setFilterSite("");
|
||||
clearStatusFilter();
|
||||
}}
|
||||
className="mt-4 text-[var(--accent-cyan)] hover:text-[var(--accent-cyan-light)] font-mono text-sm underline transition-colors"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{movingAgent && (
|
||||
<MoveAgentModal
|
||||
agent={movingAgent}
|
||||
sites={sites}
|
||||
onClose={() => setMovingAgent(null)}
|
||||
onMove={(siteId) =>
|
||||
moveMutation.mutate({ agentId: movingAgent.id, siteId })
|
||||
}
|
||||
isLoading={moveMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,316 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Plus, Trash2, Edit2, Building2, RefreshCw } from "lucide-react";
|
||||
import { clientsApi, Client } from "../api/client";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
|
||||
import { Button } from "../components/Button";
|
||||
import { Input } from "../components/Input";
|
||||
|
||||
interface ClientFormData {
|
||||
name: string;
|
||||
code: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
function ClientModal({
|
||||
client,
|
||||
onClose,
|
||||
onSave,
|
||||
isLoading,
|
||||
}: {
|
||||
client?: Client;
|
||||
onClose: () => void;
|
||||
onSave: (data: ClientFormData) => void;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const [formData, setFormData] = useState<ClientFormData>({
|
||||
name: client?.name || "",
|
||||
code: client?.code || "",
|
||||
notes: client?.notes || "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
{client ? "Edit Client" : "New Client"}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Name *</label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Company Name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Code</label>
|
||||
<Input
|
||||
value={formData.code}
|
||||
onChange={(e) => setFormData({ ...formData, code: e.target.value.toUpperCase() })}
|
||||
placeholder="ACME (optional short code)"
|
||||
maxLength={20}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Notes</label>
|
||||
<textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
placeholder="Optional notes..."
|
||||
className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !formData.name.trim()}>
|
||||
{isLoading ? "Saving..." : client ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Clients() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingClient, setEditingClient] = useState<Client | undefined>();
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: clients = [], isLoading, refetch } = useQuery({
|
||||
queryKey: ["clients"],
|
||||
queryFn: () => clientsApi.list().then((res) => res.data),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: ClientFormData) => clientsApi.create(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
setShowModal(false);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to create client:", error);
|
||||
alert(`Failed to create client: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: ClientFormData }) =>
|
||||
clientsApi.update(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
setShowModal(false);
|
||||
setEditingClient(undefined);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to update client:", error);
|
||||
alert(`Failed to update client: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => clientsApi.delete(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
setDeleteConfirm(null);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to delete client:", error);
|
||||
alert(`Failed to delete client: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSave = (data: ClientFormData) => {
|
||||
if (editingClient) {
|
||||
updateMutation.mutate({ id: editingClient.id, data });
|
||||
} else {
|
||||
createMutation.mutate(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (client: Client) => {
|
||||
setEditingClient(client);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingClient(undefined);
|
||||
};
|
||||
|
||||
const filteredClients = clients.filter(
|
||||
(client: Client) =>
|
||||
client.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(client.code && client.code.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Clients</h1>
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
Manage your client organizations
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => setShowModal(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Client
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Input
|
||||
placeholder="Search clients..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Clients</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Loading clients...</p>
|
||||
) : filteredClients.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Building2 className="h-12 w-12 mx-auto text-[hsl(var(--muted-foreground))] mb-4" />
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
{search ? "No clients match your search." : "No clients yet. Add your first client to get started."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-[hsl(var(--border))]">
|
||||
<th className="text-left py-3 px-4 font-medium">Name</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Code</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Sites</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Status</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Created</th>
|
||||
<th className="text-right py-3 px-4 font-medium">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredClients.map((client: Client) => (
|
||||
<tr
|
||||
key={client.id}
|
||||
className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
|
||||
>
|
||||
<td className="py-3 px-4">
|
||||
<div className="font-medium">{client.name}</div>
|
||||
{client.notes && (
|
||||
<div className="text-sm text-[hsl(var(--muted-foreground))] truncate max-w-xs">
|
||||
{client.notes}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{client.code ? (
|
||||
<span className="px-2 py-1 bg-[hsl(var(--muted))] rounded text-sm font-mono">
|
||||
{client.code}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[hsl(var(--muted-foreground))]">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-sm">{client.site_count} sites</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
client.is_active
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{client.is_active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-[hsl(var(--muted-foreground))]">
|
||||
{new Date(client.created_at).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Edit client"
|
||||
onClick={() => handleEdit(client)}
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
{deleteConfirm === client.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => deleteMutation.mutate(client.id)}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setDeleteConfirm(null)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Delete client"
|
||||
onClick={() => setDeleteConfirm(client.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{showModal && (
|
||||
<ClientModal
|
||||
client={editingClient}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
isLoading={createMutation.isPending || updateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,469 +0,0 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Activity,
|
||||
Server,
|
||||
AlertTriangle,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Terminal,
|
||||
RefreshCw,
|
||||
Shield,
|
||||
Zap,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { agentsApi, Agent } from "../api/client";
|
||||
|
||||
/**
|
||||
* Formats a date to a relative time string (e.g., "2 minutes ago", "1 hour ago")
|
||||
*/
|
||||
function formatRelativeTime(dateString: string | null): string {
|
||||
if (!dateString) return "Never seen";
|
||||
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) {
|
||||
return "Just now";
|
||||
} else if (diffInSeconds < 3600) {
|
||||
const minutes = Math.floor(diffInSeconds / 60);
|
||||
return `${minutes}m ago`;
|
||||
} else if (diffInSeconds < 86400) {
|
||||
const hours = Math.floor(diffInSeconds / 3600);
|
||||
return `${hours}h ago`;
|
||||
} else {
|
||||
const days = Math.floor(diffInSeconds / 86400);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading skeleton for stat cards with shimmer animation
|
||||
*/
|
||||
function StatCardSkeleton({ delay }: { delay: number }) {
|
||||
return (
|
||||
<div
|
||||
className="glass-card relative overflow-hidden opacity-0"
|
||||
style={{
|
||||
animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-3">
|
||||
<div className="skeleton skeleton-text w-24 h-4" />
|
||||
<div className="skeleton skeleton-text w-16 h-10" />
|
||||
<div className="skeleton skeleton-text w-32 h-3" />
|
||||
</div>
|
||||
<div className="skeleton w-12 h-12 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stat card component with Mission Control styling - navigates to filtered agents page on click
|
||||
*/
|
||||
function StatCard({
|
||||
title,
|
||||
value,
|
||||
icon: Icon,
|
||||
description,
|
||||
accentColor,
|
||||
delay,
|
||||
linkTo,
|
||||
}: {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
description?: string;
|
||||
accentColor: "cyan" | "green" | "amber" | "rose";
|
||||
delay: number;
|
||||
linkTo: string;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const colorClasses = {
|
||||
cyan: {
|
||||
icon: "text-cyan",
|
||||
glow: "glow-cyan",
|
||||
bg: "bg-[var(--accent-cyan-muted)]",
|
||||
value: "text-cyan",
|
||||
},
|
||||
green: {
|
||||
icon: "text-green",
|
||||
glow: "glow-green",
|
||||
bg: "bg-[var(--accent-green-muted)]",
|
||||
value: "text-green",
|
||||
},
|
||||
amber: {
|
||||
icon: "text-amber",
|
||||
glow: "glow-amber",
|
||||
bg: "bg-[var(--accent-amber-muted)]",
|
||||
value: "text-amber",
|
||||
},
|
||||
rose: {
|
||||
icon: "text-rose",
|
||||
glow: "glow-rose",
|
||||
bg: "bg-[var(--accent-rose-muted)]",
|
||||
value: "text-rose",
|
||||
},
|
||||
};
|
||||
|
||||
const colors = colorClasses[accentColor];
|
||||
|
||||
const handleClick = () => {
|
||||
navigate(linkTo);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-pointer transition-transform duration-200 hover:scale-[1.02]"
|
||||
style={{
|
||||
animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
|
||||
borderLeftColor: `var(--accent-${accentColor})`,
|
||||
}}
|
||||
onClick={handleClick}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Subtle gradient overlay on hover */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(circle at top right, var(--accent-${accentColor}-muted), transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-muted font-mono text-xs uppercase tracking-widest-custom">
|
||||
{title}
|
||||
</p>
|
||||
<p className={`font-mono text-3xl font-bold ${colors.value} mt-1`}>
|
||||
{value}
|
||||
</p>
|
||||
{description && (
|
||||
<p className="text-muted text-xs mt-0.5">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Icon - smaller padding */}
|
||||
<div
|
||||
className={`p-2 rounded-lg ${colors.bg} ${colors.glow} transition-all duration-300 group-hover:scale-110`}
|
||||
>
|
||||
<Icon className={`h-5 w-5 ${colors.icon}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Simplified view all - no border */}
|
||||
<div className="mt-3 flex items-center justify-between opacity-60 group-hover:opacity-100 transition-opacity">
|
||||
<span className="text-muted text-xs font-mono">View all</span>
|
||||
<ArrowRight
|
||||
className={`h-3 w-3 ${colors.icon} group-hover:translate-x-1 transition-transform`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Status indicator dot with pulse animation
|
||||
*/
|
||||
function StatusDot({ status }: { status: string }) {
|
||||
const statusClasses = {
|
||||
online: "status-dot online",
|
||||
offline: "status-dot offline",
|
||||
error: "status-dot error",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={statusClasses[status as keyof typeof statusClasses] || "status-dot offline"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Activity list item with hover effects - clickable with Link
|
||||
*/
|
||||
function ActivityItem({ agent }: { agent: Agent }) {
|
||||
return (
|
||||
<Link
|
||||
to={`/agents/${agent.id}`}
|
||||
className="flex items-center justify-between p-2 rounded-lg transition-all duration-200 hover:bg-[rgba(6,182,212,0.08)] group cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusDot status={agent.status} />
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium text-primary group-hover:text-cyan transition-colors">
|
||||
{agent.hostname}
|
||||
</p>
|
||||
<p className="text-xs text-muted uppercase tracking-wide">
|
||||
{agent.os_type}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono text-xs text-muted tabular-nums">
|
||||
{formatRelativeTime(agent.last_seen)}
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4 text-muted opacity-0 group-hover:opacity-100 group-hover:text-cyan transition-all duration-200 transform group-hover:translate-x-1" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Quick action button with glow effect
|
||||
*/
|
||||
function QuickActionButton({
|
||||
icon: Icon,
|
||||
label,
|
||||
description,
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
label: string;
|
||||
description: string;
|
||||
onClick?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="flex items-center gap-4 p-4 w-full text-left rounded-lg border border-[var(--border-primary)] bg-[var(--bg-tertiary)] hover:border-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] transition-all duration-200 group"
|
||||
>
|
||||
<div className="p-2 rounded-lg bg-[var(--bg-secondary)] group-hover:glow-cyan transition-all duration-200">
|
||||
<Icon className="h-5 w-5 text-cyan" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium text-primary">{label}</p>
|
||||
<p className="text-xs text-muted">{description}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading skeleton for activity list
|
||||
*/
|
||||
function ActivityListSkeleton() {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4 p-3">
|
||||
<div className="skeleton w-2 h-2 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="skeleton skeleton-text w-32 h-4" />
|
||||
<div className="skeleton skeleton-text w-20 h-3" />
|
||||
</div>
|
||||
<div className="skeleton skeleton-text w-16 h-3" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Main Dashboard component with Mission Control aesthetic
|
||||
*
|
||||
* Stat cards navigate to the Agents page with status filters.
|
||||
* This approach scales better for large agent counts (1000+) since
|
||||
* the Agents page handles pagination, search, and sorting.
|
||||
*/
|
||||
export function Dashboard() {
|
||||
const { data: agents = [], isLoading } = useQuery({
|
||||
queryKey: ["agents"],
|
||||
queryFn: () => agentsApi.list().then((res) => res.data),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const onlineAgents = agents.filter((a: Agent) => a.status === "online");
|
||||
const offlineAgents = agents.filter((a: Agent) => a.status === "offline");
|
||||
const errorAgents = agents.filter((a: Agent) => a.status === "error");
|
||||
|
||||
// Determine system status
|
||||
const hasErrors = errorAgents.length > 0;
|
||||
const allOffline = agents.length > 0 && onlineAgents.length === 0;
|
||||
const systemStatus = hasErrors
|
||||
? "ATTENTION REQUIRED"
|
||||
: allOffline
|
||||
? "ALL SYSTEMS OFFLINE"
|
||||
: "SYSTEMS OPERATIONAL";
|
||||
const statusClass = hasErrors
|
||||
? "status-error"
|
||||
: allOffline
|
||||
? "status-warning"
|
||||
: "status-online";
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Page Header */}
|
||||
<header className="space-y-1 animate-fade-in">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-gradient font-mono text-3xl font-bold tracking-tight">
|
||||
DASHBOARD
|
||||
</h1>
|
||||
<p className="text-muted text-sm uppercase tracking-widest-custom mt-1">
|
||||
Mission Control Overview
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* System Status Indicator */}
|
||||
<div className={`status-indicator ${statusClass}`}>
|
||||
<span className="status-dot" />
|
||||
<span className="font-mono text-xs uppercase tracking-wide">
|
||||
{systemStatus}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Stat Cards Grid */}
|
||||
<section className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<StatCardSkeleton delay={0.1} />
|
||||
<StatCardSkeleton delay={0.2} />
|
||||
<StatCardSkeleton delay={0.3} />
|
||||
<StatCardSkeleton delay={0.4} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<StatCard
|
||||
title="Total Agents"
|
||||
value={agents.length}
|
||||
icon={Server}
|
||||
description="Registered endpoints"
|
||||
accentColor="cyan"
|
||||
delay={0.1}
|
||||
linkTo="/agents"
|
||||
/>
|
||||
<StatCard
|
||||
title="Online"
|
||||
value={onlineAgents.length}
|
||||
icon={Wifi}
|
||||
description="Currently connected"
|
||||
accentColor="green"
|
||||
delay={0.2}
|
||||
linkTo="/agents?status=online"
|
||||
/>
|
||||
<StatCard
|
||||
title="Offline"
|
||||
value={offlineAgents.length}
|
||||
icon={WifiOff}
|
||||
description="Not responding"
|
||||
accentColor="amber"
|
||||
delay={0.3}
|
||||
linkTo="/agents?status=offline"
|
||||
/>
|
||||
<StatCard
|
||||
title="Errors"
|
||||
value={errorAgents.length}
|
||||
icon={AlertTriangle}
|
||||
description="Requires attention"
|
||||
accentColor="rose"
|
||||
delay={0.4}
|
||||
linkTo="/agents?status=error"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Bottom Grid: Activity + Quick Actions */}
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{/* Recent Activity Card */}
|
||||
<div
|
||||
className="glass-card opacity-0"
|
||||
style={{
|
||||
animation: "fadeInUp 0.4s ease-out 0.5s forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3 pb-3 border-b border-[var(--border-secondary)]">
|
||||
<h2 className="card-title flex items-center gap-2">
|
||||
<Activity className="h-4 w-4 text-cyan" />
|
||||
Recent Activity
|
||||
</h2>
|
||||
{!isLoading && agents.length > 0 && (
|
||||
<span className="font-mono text-xs text-muted">
|
||||
{agents.length} agent{agents.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<ActivityListSkeleton />
|
||||
) : agents.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Server className="h-12 w-12 text-muted mx-auto mb-4 opacity-50" />
|
||||
<p className="text-secondary font-medium mb-2">
|
||||
No agents registered
|
||||
</p>
|
||||
<p className="text-muted text-sm">
|
||||
Deploy an agent to start monitoring endpoints.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-0.5 -mx-2">
|
||||
{agents.slice(0, 5).map((agent: Agent) => (
|
||||
<ActivityItem key={agent.id} agent={agent} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions Card */}
|
||||
<div
|
||||
className="glass-card opacity-0"
|
||||
style={{
|
||||
animation: "fadeInUp 0.4s ease-out 0.6s forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-3 pb-3 border-b border-[var(--border-secondary)]">
|
||||
<Zap className="h-4 w-4 text-cyan" />
|
||||
<h2 className="card-title">Quick Actions</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<QuickActionButton
|
||||
icon={Terminal}
|
||||
label="Deploy Agent"
|
||||
description="Install agent on a new endpoint"
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon={RefreshCw}
|
||||
label="Refresh All"
|
||||
description="Force update all agent statuses"
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon={Shield}
|
||||
label="Security Scan"
|
||||
description="Run security audit on all endpoints"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Terminal-style hint */}
|
||||
<div className="mt-4 p-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-cyan">$</span>
|
||||
<span className="font-mono text-xs text-muted">
|
||||
guru-rmm --help
|
||||
</span>
|
||||
<span className="inline-block w-2 h-4 bg-cyan animate-pulse ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,445 +0,0 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
Terminal,
|
||||
Trash2,
|
||||
Ban,
|
||||
StopCircle,
|
||||
} from "lucide-react";
|
||||
import { commandsApi, Command } from "../api/client";
|
||||
import { Card, CardContent } from "../components/Card";
|
||||
import { Button } from "../components/Button";
|
||||
|
||||
function StatusBadge({ status }: { status: Command["status"] }) {
|
||||
const config = {
|
||||
pending: {
|
||||
icon: Clock,
|
||||
label: "Pending",
|
||||
className: "bg-amber-500/10 text-amber-400 border-amber-500/30",
|
||||
},
|
||||
running: {
|
||||
icon: Loader2,
|
||||
label: "Running",
|
||||
className: "bg-cyan-500/10 text-cyan-400 border-cyan-500/30",
|
||||
spin: true,
|
||||
},
|
||||
completed: {
|
||||
icon: CheckCircle,
|
||||
label: "Completed",
|
||||
className: "bg-emerald-500/10 text-emerald-400 border-emerald-500/30",
|
||||
},
|
||||
failed: {
|
||||
icon: XCircle,
|
||||
label: "Failed",
|
||||
className: "bg-rose-500/10 text-rose-400 border-rose-500/30",
|
||||
},
|
||||
cancelled: {
|
||||
icon: Ban,
|
||||
label: "Cancelled",
|
||||
className: "bg-amber-500/10 text-amber-500 border-amber-500/30",
|
||||
},
|
||||
};
|
||||
|
||||
const { icon: Icon, label, className, spin } = config[status] as {
|
||||
icon: typeof Clock;
|
||||
label: string;
|
||||
className: string;
|
||||
spin?: boolean;
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-mono font-medium border ${className}`}>
|
||||
<Icon className={`h-3 w-3 ${spin ? "animate-spin" : ""}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return "Just now";
|
||||
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
|
||||
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
|
||||
return `${Math.floor(diffInSeconds / 86400)}d ago`;
|
||||
}
|
||||
|
||||
export function History() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: commands = [], isLoading, refetch } = useQuery({
|
||||
queryKey: ["commands"],
|
||||
queryFn: () => commandsApi.list().then((res) => res.data),
|
||||
refetchInterval: 10000,
|
||||
});
|
||||
|
||||
const cancelMutation = useMutation({
|
||||
mutationFn: (id: string) => commandsApi.cancelCommand(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["commands"] });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
alert(`Failed to cancel command: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => commandsApi.deleteCommand(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["commands"] });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
alert(`Failed to delete command: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const clearHistoryMutation = useMutation({
|
||||
mutationFn: () => commandsApi.clearCommandHistory(),
|
||||
onSuccess: (res) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["commands"] });
|
||||
const data = res.data;
|
||||
if (data.deleted === 0) {
|
||||
alert("No finished commands to clear.");
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
alert(`Failed to clear history: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const handleClearHistory = () => {
|
||||
const finishedCount = commands.filter(
|
||||
(cmd) => cmd.status === "completed" || cmd.status === "failed" || cmd.status === "cancelled"
|
||||
).length;
|
||||
|
||||
if (finishedCount === 0) {
|
||||
alert("No finished commands to clear.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.confirm(`Clear ${finishedCount} finished command(s) from history?`)) {
|
||||
clearHistoryMutation.mutate();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-mono font-bold text-[var(--text-primary)]">History</h1>
|
||||
<p className="text-[var(--text-muted)] text-sm">Command execution log</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleClearHistory}
|
||||
disabled={clearHistoryMutation.isPending}
|
||||
>
|
||||
{clearHistoryMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Clear History
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
className="border-[var(--border-accent)] text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)]"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History List */}
|
||||
<Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-[var(--accent-cyan)] mx-auto mb-2" />
|
||||
<p className="text-[var(--text-muted)] font-mono text-sm">Loading history...</p>
|
||||
</div>
|
||||
) : commands.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<Terminal className="h-8 w-8 text-[var(--text-muted)] mx-auto mb-2 opacity-50" />
|
||||
<p className="text-[var(--text-muted)] font-mono text-sm">No commands executed yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-[var(--border-secondary)]">
|
||||
{commands.map((cmd: Command) => (
|
||||
<div
|
||||
key={cmd.id}
|
||||
className="flex items-center justify-between p-3 hover:bg-[rgba(6,182,212,0.05)] transition-colors group"
|
||||
>
|
||||
<Link
|
||||
to={`/history/${cmd.id}`}
|
||||
className="flex items-center gap-3 min-w-0 flex-1"
|
||||
>
|
||||
<StatusBadge status={cmd.status} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-mono text-sm text-[var(--text-primary)] truncate group-hover:text-[var(--accent-cyan)] transition-colors">
|
||||
{cmd.command_text}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-muted)] mt-0.5">
|
||||
{cmd.command_type} | Agent: {cmd.agent_id.slice(0, 8)}...
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 pl-4 shrink-0">
|
||||
<div className="text-right">
|
||||
<p className="font-mono text-xs text-[var(--text-muted)]">
|
||||
{formatRelativeTime(cmd.created_at)}
|
||||
</p>
|
||||
{cmd.exit_code !== null && (
|
||||
<p className={`text-xs font-mono ${cmd.exit_code === 0 ? "text-emerald-500" : "text-rose-500"}`}>
|
||||
exit: {cmd.exit_code}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{(cmd.status === "pending" || cmd.status === "running") && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
cancelMutation.mutate(cmd.id);
|
||||
}}
|
||||
disabled={cancelMutation.isPending}
|
||||
className="p-1.5 rounded-md text-amber-400 hover:bg-amber-500/10 hover:text-amber-300 transition-colors"
|
||||
title="Cancel command"
|
||||
>
|
||||
<StopCircle className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
deleteMutation.mutate(cmd.id);
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="p-1.5 rounded-md text-rose-400 hover:bg-rose-500/10 hover:text-rose-300 transition-colors"
|
||||
title="Delete command"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HistoryDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: commands = [], isLoading } = useQuery({
|
||||
queryKey: ["commands"],
|
||||
queryFn: () => commandsApi.list().then((res) => res.data),
|
||||
});
|
||||
|
||||
const command = commands.find((cmd: Command) => cmd.id === id);
|
||||
|
||||
const cancelMutation = useMutation({
|
||||
mutationFn: (cmdId: string) => commandsApi.cancelCommand(cmdId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["commands"] });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
alert(`Failed to cancel command: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (cmdId: string) => commandsApi.deleteCommand(cmdId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["commands"] });
|
||||
navigate("/history");
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
alert(`Failed to delete command: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[50vh]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[var(--accent-cyan)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!command) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate("/history")}
|
||||
className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)]"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to History
|
||||
</Button>
|
||||
<Card className="glass-card">
|
||||
<CardContent className="p-8 text-center">
|
||||
<p className="text-[var(--text-muted)]">Command not found</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => navigate("/history")}
|
||||
className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)]"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-xl font-mono font-bold text-[var(--text-primary)]">Command Detail</h1>
|
||||
<StatusBadge status={command.status} />
|
||||
</div>
|
||||
<p className="text-[var(--text-muted)] text-sm mt-0.5">
|
||||
{formatDate(command.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(command.status === "pending" || command.status === "running") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => cancelMutation.mutate(command.id)}
|
||||
disabled={cancelMutation.isPending}
|
||||
className="border-amber-500/30 text-amber-400 hover:bg-amber-500/10"
|
||||
>
|
||||
<StopCircle className="h-4 w-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (window.confirm("Delete this command?")) {
|
||||
deleteMutation.mutate(command.id);
|
||||
}
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Command Info */}
|
||||
<Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl">
|
||||
<CardContent className="p-4 space-y-4">
|
||||
{/* Command */}
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Command
|
||||
</label>
|
||||
<div className="mt-1 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)] font-mono text-sm text-[var(--accent-cyan)]">
|
||||
{command.command_text}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta info */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Type
|
||||
</label>
|
||||
<p className="mt-1 font-mono text-sm text-[var(--text-secondary)]">{command.command_type}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Agent
|
||||
</label>
|
||||
<Link
|
||||
to={`/agents/${command.agent_id}`}
|
||||
className="mt-1 block font-mono text-sm text-[var(--accent-cyan)] hover:underline"
|
||||
>
|
||||
{command.agent_id.slice(0, 12)}...
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Exit Code
|
||||
</label>
|
||||
<p className={`mt-1 font-mono text-sm ${command.exit_code === 0 ? "text-emerald-400" : command.exit_code !== null ? "text-rose-400" : "text-[var(--text-muted)]"}`}>
|
||||
{command.exit_code !== null ? command.exit_code : "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Executed
|
||||
</label>
|
||||
<p className="mt-1 font-mono text-sm text-[var(--text-secondary)]">
|
||||
{formatRelativeTime(command.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output */}
|
||||
{command.stdout && (
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
|
||||
Output
|
||||
</label>
|
||||
<pre className="mt-1 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)] font-mono text-xs text-[var(--text-secondary)] overflow-x-auto max-h-64 overflow-y-auto">
|
||||
{command.stdout}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{command.stderr && (
|
||||
<div>
|
||||
<label className="text-xs font-mono font-semibold text-rose-400 uppercase tracking-wider">
|
||||
Error Output
|
||||
</label>
|
||||
<pre className="mt-1 p-3 rounded-lg bg-rose-500/5 border border-rose-500/20 font-mono text-xs text-rose-300 overflow-x-auto max-h-64 overflow-y-auto">
|
||||
{command.stderr}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
import { useState, FormEvent } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { AxiosError } from "axios";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
|
||||
interface ApiErrorResponse {
|
||||
error?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Floating geometric shape component for background decoration
|
||||
*/
|
||||
function FloatingShape({
|
||||
className,
|
||||
delay = 0,
|
||||
size = 40
|
||||
}: {
|
||||
className?: string;
|
||||
delay?: number;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`absolute opacity-20 ${className}`}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
animationDelay: `${delay}s`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full border border-cyan-500/30 rotate-45 animate-float"
|
||||
style={{ animationDelay: `${delay}s` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Login() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate("/");
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
const errorData = err.response?.data as ApiErrorResponse | undefined;
|
||||
setError(errorData?.error || errorData?.message || err.message || "Login failed. Please try again.");
|
||||
} else if (err instanceof Error) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError("An unexpected error occurred");
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[hsl(var(--bg-primary))]">
|
||||
{/* Gradient background overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--bg-primary))] via-[hsl(var(--bg-secondary))] to-[hsl(222_47%_8%)]" />
|
||||
|
||||
{/* Animated grid pattern */}
|
||||
<div className="absolute inset-0 bg-grid-pattern opacity-30 animate-grid" />
|
||||
|
||||
{/* Radial gradient spotlight */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_hsl(var(--accent-cyan)/0.08)_0%,_transparent_70%)]" />
|
||||
|
||||
{/* Floating geometric shapes */}
|
||||
<FloatingShape className="top-[10%] left-[10%]" delay={0} size={60} />
|
||||
<FloatingShape className="top-[20%] right-[15%]" delay={1.5} size={40} />
|
||||
<FloatingShape className="bottom-[30%] left-[8%]" delay={3} size={50} />
|
||||
<FloatingShape className="bottom-[15%] right-[12%]" delay={2} size={35} />
|
||||
<FloatingShape className="top-[50%] left-[5%]" delay={4} size={25} />
|
||||
<FloatingShape className="top-[40%] right-[8%]" delay={2.5} size={45} />
|
||||
|
||||
{/* Login Card */}
|
||||
<div className="relative z-10 w-full max-w-md mx-4 animate-fade-in-up">
|
||||
<div className="glass rounded-2xl p-8 shadow-2xl">
|
||||
{/* Logo and Branding */}
|
||||
<div className="text-center mb-8">
|
||||
{/* Logo Icon */}
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 border border-cyan-500/30 mb-4 glow-cyan">
|
||||
<svg
|
||||
className="w-8 h-8 text-cyan-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Title with gradient */}
|
||||
<h1 className="text-3xl font-bold font-mono-display gradient-text-cyan-teal tracking-tight">
|
||||
GuruRMM
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="mt-2 text-sm text-[hsl(var(--text-muted))] uppercase tracking-widest-custom font-mono-display">
|
||||
Mission Control
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="p-4 rounded-lg bg-rose-950/50 border border-rose-500/30 animate-pulse-subtle">
|
||||
<p className="text-sm text-rose-300 flex items-center gap-2">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-xs font-medium text-[hsl(var(--text-secondary))] uppercase tracking-wider"
|
||||
>
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="operator@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoComplete="email"
|
||||
className="w-full px-4 py-3 rounded-lg input-mission-control text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-xs font-medium text-[hsl(var(--text-secondary))] uppercase tracking-wider"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
className="w-full px-4 py-3 rounded-lg input-mission-control text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={`w-full py-3 px-4 rounded-lg btn-mission-control text-sm uppercase tracking-wider ${isLoading ? 'loading' : ''}`}
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Authenticating...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
Access System
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[hsl(var(--glass-border))]" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-3 bg-[hsl(var(--glass-bg))] text-[hsl(var(--text-muted))]">
|
||||
OR
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Register Link */}
|
||||
<p className="text-center text-sm text-[hsl(var(--text-secondary))]">
|
||||
New operator?{" "}
|
||||
<Link
|
||||
to="/register"
|
||||
className="text-cyan-400 hover:text-cyan-300 transition-colors font-medium hover:underline underline-offset-4"
|
||||
>
|
||||
Request Access
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Footer tagline */}
|
||||
<p className="text-center mt-6 text-xs text-[hsl(var(--text-muted))] font-mono-display">
|
||||
Secure Remote Management Infrastructure
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { useState, FormEvent } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { AxiosError } from "axios";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
|
||||
import { Input } from "../components/Input";
|
||||
import { Button } from "../components/Button";
|
||||
|
||||
interface ApiErrorResponse {
|
||||
error?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function Register() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { register } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setError("Password must be at least 8 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await register(email, password, name || undefined);
|
||||
navigate("/");
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
const errorData = err.response?.data as ApiErrorResponse | undefined;
|
||||
setError(errorData?.error || errorData?.message || err.message || "Registration failed. Please try again.");
|
||||
} else if (err instanceof Error) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError("An unexpected error occurred");
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[hsl(var(--background))] px-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Create Account</CardTitle>
|
||||
<CardDescription>Set up your GuruRMM account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 text-sm text-[hsl(var(--destructive))] bg-[hsl(var(--destructive))]/10 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">
|
||||
Name (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="password" className="text-sm font-medium">
|
||||
Password
|
||||
</label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="confirmPassword" className="text-sm font-medium">
|
||||
Confirm Password
|
||||
</label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? "Creating account..." : "Create account"}
|
||||
</Button>
|
||||
</form>
|
||||
<div className="mt-4 text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" className="text-[hsl(var(--primary))] hover:underline">
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
|
||||
|
||||
export function Settings() {
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Settings</h1>
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
Manage your account and preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile</CardTitle>
|
||||
<CardDescription>Your account information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="space-y-4">
|
||||
<div>
|
||||
<dt className="text-sm text-[hsl(var(--muted-foreground))]">Email</dt>
|
||||
<dd className="font-medium">{user?.email}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm text-[hsl(var(--muted-foreground))]">Name</dt>
|
||||
<dd className="font-medium">{user?.name || "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm text-[hsl(var(--muted-foreground))]">Role</dt>
|
||||
<dd className="font-medium capitalize">{user?.role}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Agent Deployment</CardTitle>
|
||||
<CardDescription>Deploy agents to your endpoints</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 text-sm">
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
To deploy an agent to a new endpoint, download and run the agent installer
|
||||
with your server URL.
|
||||
</p>
|
||||
<div className="bg-[hsl(var(--muted))] p-4 rounded-md">
|
||||
<p className="font-medium mb-2">Windows (PowerShell as Admin):</p>
|
||||
<pre className="text-xs overflow-x-auto whitespace-pre-wrap">
|
||||
{`# Install as a service
|
||||
.\\gururmm-agent.exe install --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY
|
||||
|
||||
# Or run standalone for testing
|
||||
.\\gururmm-agent.exe --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY`}
|
||||
</pre>
|
||||
</div>
|
||||
<div className="bg-[hsl(var(--muted))] p-4 rounded-md">
|
||||
<p className="font-medium mb-2">Linux (as root):</p>
|
||||
<pre className="text-xs overflow-x-auto whitespace-pre-wrap">
|
||||
{`# Install as a systemd service
|
||||
sudo ./gururmm-agent install --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY
|
||||
|
||||
# Or run standalone for testing
|
||||
./gururmm-agent --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>About</CardTitle>
|
||||
<CardDescription>System information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">Dashboard Version</dt>
|
||||
<dd>1.0.0</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-[hsl(var(--muted-foreground))]">API Endpoint</dt>
|
||||
<dd className="font-mono text-xs">
|
||||
{import.meta.env.VITE_API_URL || "http://localhost:3001"}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,470 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Plus, Trash2, Edit2, MapPin, RefreshCw, Key, Copy, Check } from "lucide-react";
|
||||
import { sitesApi, clientsApi, Site, Client, CreateSiteResponse } from "../api/client";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
|
||||
import { Button } from "../components/Button";
|
||||
import { Input } from "../components/Input";
|
||||
|
||||
interface SiteFormData {
|
||||
client_id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
function ApiKeyModal({
|
||||
apiKey,
|
||||
siteCode,
|
||||
onClose,
|
||||
}: {
|
||||
apiKey: string;
|
||||
siteCode: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(apiKey);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-lg">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<Key className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">Site Created!</h2>
|
||||
<p className="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
Site Code: <span className="font-mono font-bold">{siteCode}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-yellow-800 font-medium mb-2">
|
||||
Save this API key now - it will not be shown again!
|
||||
</p>
|
||||
<p className="text-xs text-yellow-700">
|
||||
Configure agents with this API key to auto-register under this site.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium mb-2">API Key</label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={apiKey}
|
||||
readOnly
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<Button variant="outline" onClick={handleCopy}>
|
||||
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={onClose}>Done</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SiteModal({
|
||||
site,
|
||||
clients,
|
||||
onClose,
|
||||
onSave,
|
||||
isLoading,
|
||||
}: {
|
||||
site?: Site;
|
||||
clients: Client[];
|
||||
onClose: () => void;
|
||||
onSave: (data: SiteFormData) => void;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const [formData, setFormData] = useState<SiteFormData>({
|
||||
client_id: site?.client_id || (clients[0]?.id || ""),
|
||||
name: site?.name || "",
|
||||
address: site?.address || "",
|
||||
notes: site?.notes || "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
{site ? "Edit Site" : "New Site"}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Client *</label>
|
||||
<select
|
||||
value={formData.client_id}
|
||||
onChange={(e) => setFormData({ ...formData, client_id: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
|
||||
required
|
||||
disabled={!!site}
|
||||
>
|
||||
<option value="">Select a client...</option>
|
||||
{clients.map((client) => (
|
||||
<option key={client.id} value={client.id}>
|
||||
{client.name} {client.code && `(${client.code})`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Site Name *</label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Main Office, Branch 1, etc."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Address</label>
|
||||
<Input
|
||||
value={formData.address}
|
||||
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||
placeholder="123 Main St, City, State"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Notes</label>
|
||||
<textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
placeholder="Optional notes..."
|
||||
className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !formData.name.trim() || !formData.client_id}>
|
||||
{isLoading ? "Saving..." : site ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sites() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingSite, setEditingSite] = useState<Site | undefined>();
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
||||
const [newSiteApiKey, setNewSiteApiKey] = useState<{ apiKey: string; siteCode: string } | null>(null);
|
||||
const [regeneratingKey, setRegeneratingKey] = useState<string | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: sites = [], isLoading, refetch } = useQuery({
|
||||
queryKey: ["sites"],
|
||||
queryFn: () => sitesApi.list().then((res) => res.data),
|
||||
});
|
||||
|
||||
const { data: clients = [] } = useQuery({
|
||||
queryKey: ["clients"],
|
||||
queryFn: () => clientsApi.list().then((res) => res.data),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: SiteFormData) => sitesApi.create(data),
|
||||
onSuccess: (response) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["sites"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
setShowModal(false);
|
||||
// Show API key modal
|
||||
const data = response.data as CreateSiteResponse;
|
||||
setNewSiteApiKey({ apiKey: data.api_key, siteCode: data.site.site_code });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to create site:", error);
|
||||
alert(`Failed to create site: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: Partial<SiteFormData> }) =>
|
||||
sitesApi.update(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["sites"] });
|
||||
setShowModal(false);
|
||||
setEditingSite(undefined);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to update site:", error);
|
||||
alert(`Failed to update site: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => sitesApi.delete(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["sites"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
setDeleteConfirm(null);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to delete site:", error);
|
||||
alert(`Failed to delete site: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const regenerateKeyMutation = useMutation({
|
||||
mutationFn: (id: string) => sitesApi.regenerateApiKey(id),
|
||||
onSuccess: (response, id) => {
|
||||
const site = sites.find((s: Site) => s.id === id);
|
||||
setNewSiteApiKey({
|
||||
apiKey: response.data.api_key,
|
||||
siteCode: site?.site_code || "Unknown",
|
||||
});
|
||||
setRegeneratingKey(null);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Failed to regenerate API key:", error);
|
||||
alert(`Failed to regenerate API key: ${error.message}`);
|
||||
setRegeneratingKey(null);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSave = (data: SiteFormData) => {
|
||||
if (editingSite) {
|
||||
updateMutation.mutate({ id: editingSite.id, data });
|
||||
} else {
|
||||
createMutation.mutate(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (site: Site) => {
|
||||
setEditingSite(site);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingSite(undefined);
|
||||
};
|
||||
|
||||
const filteredSites = sites.filter(
|
||||
(site: Site) =>
|
||||
site.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
site.site_code.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(site.client_name && site.client_name.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Sites</h1>
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
Manage client locations and their agent registrations
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => setShowModal(true)} disabled={clients.length === 0}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Site
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{clients.length === 0 && (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<p className="text-sm text-yellow-800">
|
||||
You need to create a client before you can add sites.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Input
|
||||
placeholder="Search sites..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Sites</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<p className="text-[hsl(var(--muted-foreground))]">Loading sites...</p>
|
||||
) : filteredSites.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<MapPin className="h-12 w-12 mx-auto text-[hsl(var(--muted-foreground))] mb-4" />
|
||||
<p className="text-[hsl(var(--muted-foreground))]">
|
||||
{search ? "No sites match your search." : "No sites yet. Add your first site to get started."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-[hsl(var(--border))]">
|
||||
<th className="text-left py-3 px-4 font-medium">Site</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Client</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Site Code</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Agents</th>
|
||||
<th className="text-left py-3 px-4 font-medium">Status</th>
|
||||
<th className="text-right py-3 px-4 font-medium">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredSites.map((site: Site) => (
|
||||
<tr
|
||||
key={site.id}
|
||||
className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
|
||||
>
|
||||
<td className="py-3 px-4">
|
||||
<div className="font-medium">{site.name}</div>
|
||||
{site.address && (
|
||||
<div className="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
{site.address}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm">
|
||||
{site.client_name || "-"}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="px-2 py-1 bg-[hsl(var(--muted))] rounded text-sm font-mono">
|
||||
{site.site_code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-sm">{site.agent_count} agents</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
site.is_active
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{site.is_active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{regeneratingKey === site.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => regenerateKeyMutation.mutate(site.id)}
|
||||
disabled={regenerateKeyMutation.isPending}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setRegeneratingKey(null)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Regenerate API Key"
|
||||
onClick={() => setRegeneratingKey(site.id)}
|
||||
>
|
||||
<Key className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Edit site"
|
||||
onClick={() => handleEdit(site)}
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
{deleteConfirm === site.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => deleteMutation.mutate(site.id)}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setDeleteConfirm(null)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Delete site"
|
||||
onClick={() => setDeleteConfirm(site.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{showModal && (
|
||||
<SiteModal
|
||||
site={editingSite}
|
||||
clients={clients}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
isLoading={createMutation.isPending || updateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{newSiteApiKey && (
|
||||
<ApiKeyModal
|
||||
apiKey={newSiteApiKey.apiKey}
|
||||
siteCode={newSiteApiKey.siteCode}
|
||||
onClose={() => setNewSiteApiKey(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": false,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
})
|
||||
Reference in New Issue
Block a user