- Vite + TypeScript + D3.js setup - Infrastructure graph view (servers, services, connections) - Tables graph view with categories (core, directus, storage, etc.) - PostgREST API integration - Deploy script for Caddy static serving Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
102 lines
2.0 KiB
TypeScript
102 lines
2.0 KiB
TypeScript
// Tipos de nodos en el grafo
|
|
export type NodeType = 'server' | 'service' | 'database' | 'storage' | 'user' | 'endpoint';
|
|
|
|
// Estado de salud
|
|
export type HealthStatus = 'healthy' | 'running' | 'warning' | 'error' | 'suspended';
|
|
|
|
// Servidor
|
|
export interface Server {
|
|
id: string;
|
|
name: string;
|
|
ip: string;
|
|
description: string;
|
|
status: HealthStatus;
|
|
suspended?: boolean;
|
|
}
|
|
|
|
// Servicio
|
|
export interface Service {
|
|
id: string;
|
|
name: string;
|
|
serverId: string;
|
|
type: NodeType;
|
|
status: HealthStatus;
|
|
uptime?: string;
|
|
port?: number;
|
|
url?: string;
|
|
}
|
|
|
|
// Conexión entre nodos
|
|
export interface Connection {
|
|
source: string;
|
|
target: string;
|
|
type: 'ssh' | 'api' | 'sync' | 'depends' | 'http';
|
|
label?: string;
|
|
}
|
|
|
|
// Nodo del grafo
|
|
export interface GraphNode {
|
|
id: string;
|
|
label: string;
|
|
type: NodeType;
|
|
status: HealthStatus;
|
|
parent?: string;
|
|
metadata?: Record<string, string>;
|
|
x?: number;
|
|
y?: number;
|
|
fx?: number | null;
|
|
fy?: number | null;
|
|
}
|
|
|
|
// Edge del grafo
|
|
export interface GraphEdge {
|
|
source: string | GraphNode;
|
|
target: string | GraphNode;
|
|
type: Connection['type'];
|
|
label?: string;
|
|
}
|
|
|
|
// Estado de la aplicación
|
|
export interface AppState {
|
|
servers: Server[];
|
|
services: Service[];
|
|
connections: Connection[];
|
|
selectedNode: string | null;
|
|
showServices: boolean;
|
|
showConnections: boolean;
|
|
filterStatus: HealthStatus | 'all';
|
|
graphSettings: {
|
|
nodeSize: number;
|
|
linkDist: number;
|
|
showLabels: boolean;
|
|
};
|
|
loading: boolean;
|
|
error: string | null;
|
|
}
|
|
|
|
// Configuración de colores
|
|
export const NODE_COLORS: Record<NodeType, string> = {
|
|
server: '#7c8aff',
|
|
service: '#4CAF50',
|
|
database: '#FF9800',
|
|
storage: '#00BCD4',
|
|
user: '#E91E63',
|
|
endpoint: '#9C27B0'
|
|
};
|
|
|
|
export const STATUS_COLORS: Record<HealthStatus, string> = {
|
|
healthy: '#4CAF50',
|
|
running: '#8BC34A',
|
|
warning: '#FFC107',
|
|
error: '#F44336',
|
|
suspended: '#9E9E9E'
|
|
};
|
|
|
|
export const CONNECTION_COLORS: Record<Connection['type'], string> = {
|
|
ssh: '#2196F3',
|
|
api: '#9C27B0',
|
|
sync: '#00BCD4',
|
|
depends: '#607D8B',
|
|
http: '#FF5722'
|
|
};
|