reorganized web-app
This commit is contained in:
parent
5c87f068d6
commit
b67fe48f72
31 changed files with 1781 additions and 431 deletions
|
|
@ -179,5 +179,82 @@ export function createMonitoringRoutes(container: IServiceContainer) {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Get service status for all microservices
|
||||
*/
|
||||
monitoring.get('/services', async (c) => {
|
||||
try {
|
||||
const services = await monitoringService.getServiceStatus();
|
||||
return c.json({ services });
|
||||
} catch (error) {
|
||||
return c.json({
|
||||
error: 'Failed to retrieve service status',
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Get proxy statistics
|
||||
*/
|
||||
monitoring.get('/proxies', async (c) => {
|
||||
try {
|
||||
const stats = await monitoringService.getProxyStats();
|
||||
return c.json(stats || { enabled: false });
|
||||
} catch (error) {
|
||||
return c.json({
|
||||
error: 'Failed to retrieve proxy statistics',
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Get comprehensive system overview
|
||||
*/
|
||||
monitoring.get('/overview', async (c) => {
|
||||
try {
|
||||
const overview = await monitoringService.getSystemOverview();
|
||||
return c.json(overview);
|
||||
} catch (error) {
|
||||
return c.json({
|
||||
error: 'Failed to retrieve system overview',
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Test direct BullMQ queue access
|
||||
*/
|
||||
monitoring.get('/test/queue/:name', async (c) => {
|
||||
const queueName = c.req.param('name');
|
||||
const { Queue } = await import('bullmq');
|
||||
|
||||
const connection = {
|
||||
host: 'localhost',
|
||||
port: 6379,
|
||||
db: 1,
|
||||
};
|
||||
|
||||
const queue = new Queue(`{${queueName}}`, { connection });
|
||||
|
||||
try {
|
||||
const counts = await queue.getJobCounts();
|
||||
await queue.close();
|
||||
return c.json({
|
||||
queueName,
|
||||
bullmqName: `{${queueName}}`,
|
||||
counts
|
||||
});
|
||||
} catch (error: any) {
|
||||
await queue.close();
|
||||
return c.json({
|
||||
queueName,
|
||||
error: error.message
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
return monitoring;
|
||||
}
|
||||
|
|
@ -11,8 +11,12 @@ import type {
|
|||
DatabaseStats,
|
||||
SystemHealth,
|
||||
ServiceMetrics,
|
||||
MetricSnapshot
|
||||
MetricSnapshot,
|
||||
ServiceStatus,
|
||||
ProxyStats,
|
||||
SystemOverview
|
||||
} from '../types/monitoring.types';
|
||||
import * as os from 'os';
|
||||
|
||||
export class MonitoringService {
|
||||
private readonly logger = getLogger('monitoring-service');
|
||||
|
|
@ -32,36 +36,30 @@ export class MonitoringService {
|
|||
};
|
||||
}
|
||||
|
||||
// Get Redis/Dragonfly info
|
||||
const info = await this.container.cache.info();
|
||||
const dbSize = await this.container.cache.dbsize();
|
||||
// Check if cache is connected using the isReady method
|
||||
const isConnected = this.container.cache.isReady();
|
||||
if (!isConnected) {
|
||||
return {
|
||||
provider: 'dragonfly',
|
||||
connected: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Parse memory stats from info
|
||||
const memoryUsed = this.parseInfoValue(info, 'used_memory');
|
||||
const memoryPeak = this.parseInfoValue(info, 'used_memory_peak');
|
||||
|
||||
// Parse stats
|
||||
const hits = this.parseInfoValue(info, 'keyspace_hits');
|
||||
const misses = this.parseInfoValue(info, 'keyspace_misses');
|
||||
const evictedKeys = this.parseInfoValue(info, 'evicted_keys');
|
||||
const expiredKeys = this.parseInfoValue(info, 'expired_keys');
|
||||
// Get cache stats from the provider
|
||||
const cacheStats = this.container.cache.getStats();
|
||||
|
||||
// Since we can't access Redis info directly, we'll use what's available
|
||||
return {
|
||||
provider: 'dragonfly',
|
||||
connected: true,
|
||||
uptime: this.parseInfoValue(info, 'uptime_in_seconds'),
|
||||
memoryUsage: {
|
||||
used: memoryUsed,
|
||||
peak: memoryPeak,
|
||||
},
|
||||
uptime: cacheStats.uptime,
|
||||
stats: {
|
||||
hits,
|
||||
misses,
|
||||
keys: dbSize,
|
||||
evictedKeys,
|
||||
expiredKeys,
|
||||
hits: cacheStats.hits,
|
||||
misses: cacheStats.misses,
|
||||
keys: 0, // We can't get total keys without direct Redis access
|
||||
evictedKeys: 0,
|
||||
expiredKeys: 0,
|
||||
},
|
||||
info: this.parseRedisInfo(info),
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get cache stats', { error });
|
||||
|
|
@ -80,47 +78,52 @@ export class MonitoringService {
|
|||
|
||||
try {
|
||||
if (!this.container.queue) {
|
||||
this.logger.warn('No queue manager available');
|
||||
return stats;
|
||||
}
|
||||
|
||||
// Get all queue names from the queue manager
|
||||
const queueManager = this.container.queue;
|
||||
const queueNames = ['default', 'proxy', 'qm', 'ib', 'ceo', 'webshare']; // Add your queue names
|
||||
// Get all queue names from the SmartQueueManager
|
||||
const queueManager = this.container.queue as any;
|
||||
this.logger.debug('Queue manager type:', {
|
||||
type: queueManager.constructor.name,
|
||||
hasGetAllQueues: typeof queueManager.getAllQueues === 'function',
|
||||
hasQueues: !!queueManager.queues,
|
||||
hasGetQueue: typeof queueManager.getQueue === 'function'
|
||||
});
|
||||
|
||||
// Always use the known queue names since web-api doesn't create worker queues
|
||||
const queueNames = ['proxy', 'qm', 'ib', 'ceo', 'webshare', 'exchanges', 'symbols'];
|
||||
this.logger.debug('Using known queue names', { count: queueNames.length, names: queueNames });
|
||||
|
||||
// Create BullMQ queues directly with the correct format
|
||||
for (const queueName of queueNames) {
|
||||
try {
|
||||
const queue = queueManager.getQueue(queueName);
|
||||
if (!queue) continue;
|
||||
// Import BullMQ directly to create queue instances
|
||||
const { Queue: BullMQQueue } = await import('bullmq');
|
||||
const connection = {
|
||||
host: 'localhost',
|
||||
port: 6379,
|
||||
db: 1, // Queue DB
|
||||
};
|
||||
|
||||
const [waiting, active, completed, failed, delayed, paused] = await Promise.all([
|
||||
queue.getWaitingCount(),
|
||||
queue.getActiveCount(),
|
||||
queue.getCompletedCount(),
|
||||
queue.getFailedCount(),
|
||||
queue.getDelayedCount(),
|
||||
queue.getPausedCount(),
|
||||
]);
|
||||
// Create BullMQ queue with the correct format
|
||||
const bullQueue = new BullMQQueue(`{${queueName}}`, { connection });
|
||||
|
||||
// Get worker info if available
|
||||
const workers = queueManager.getWorker(queueName);
|
||||
const workerInfo = workers ? {
|
||||
count: 1, // Assuming single worker per queue
|
||||
concurrency: workers.concurrency || 1,
|
||||
} : undefined;
|
||||
// Get stats directly from BullMQ
|
||||
const queueStats = await this.getQueueStatsForBullQueue(bullQueue, queueName);
|
||||
|
||||
stats.push({
|
||||
name: queueName,
|
||||
connected: true,
|
||||
jobs: {
|
||||
waiting,
|
||||
active,
|
||||
completed,
|
||||
failed,
|
||||
delayed,
|
||||
paused,
|
||||
jobs: queueStats,
|
||||
workers: {
|
||||
count: 0,
|
||||
concurrency: 1,
|
||||
},
|
||||
workers: workerInfo,
|
||||
});
|
||||
|
||||
// Close the queue connection after getting stats
|
||||
await bullQueue.close();
|
||||
} catch (error) {
|
||||
this.logger.warn(`Failed to get stats for queue ${queueName}`, { error });
|
||||
stats.push({
|
||||
|
|
@ -144,6 +147,162 @@ export class MonitoringService {
|
|||
return stats;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get stats for a BullMQ queue directly
|
||||
*/
|
||||
private async getQueueStatsForBullQueue(bullQueue: any, queueName: string) {
|
||||
try {
|
||||
// BullMQ provides getJobCounts which returns all counts at once
|
||||
const counts = await bullQueue.getJobCounts();
|
||||
|
||||
return {
|
||||
waiting: counts.waiting || 0,
|
||||
active: counts.active || 0,
|
||||
completed: counts.completed || 0,
|
||||
failed: counts.failed || 0,
|
||||
delayed: counts.delayed || 0,
|
||||
paused: counts.paused || 0,
|
||||
prioritized: counts.prioritized || 0,
|
||||
'waiting-children': counts['waiting-children'] || 0,
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error(`Failed to get stats for BullMQ queue ${queueName}`, { error });
|
||||
// Fallback to individual methods
|
||||
try {
|
||||
const [waiting, active, completed, failed, delayed, paused] = await Promise.all([
|
||||
bullQueue.getWaitingCount(),
|
||||
bullQueue.getActiveCount(),
|
||||
bullQueue.getCompletedCount(),
|
||||
bullQueue.getFailedCount(),
|
||||
bullQueue.getDelayedCount(),
|
||||
bullQueue.getPausedCount ? bullQueue.getPausedCount() : 0
|
||||
]);
|
||||
|
||||
return {
|
||||
waiting,
|
||||
active,
|
||||
completed,
|
||||
failed,
|
||||
delayed,
|
||||
paused,
|
||||
};
|
||||
} catch (fallbackError) {
|
||||
this.logger.error(`Fallback also failed for queue ${queueName}`, { fallbackError });
|
||||
return this.getQueueStatsForQueue(bullQueue, queueName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get stats for a specific queue
|
||||
*/
|
||||
private async getQueueStatsForQueue(queue: any, queueName: string) {
|
||||
// Check if it has the getStats method
|
||||
if (queue.getStats && typeof queue.getStats === 'function') {
|
||||
const stats = await queue.getStats();
|
||||
return {
|
||||
waiting: stats.waiting || 0,
|
||||
active: stats.active || 0,
|
||||
completed: stats.completed || 0,
|
||||
failed: stats.failed || 0,
|
||||
delayed: stats.delayed || 0,
|
||||
paused: stats.paused || 0,
|
||||
};
|
||||
}
|
||||
|
||||
// Try individual count methods
|
||||
const [waiting, active, completed, failed, delayed] = await Promise.all([
|
||||
this.safeGetCount(queue, 'getWaitingCount', 'getWaiting'),
|
||||
this.safeGetCount(queue, 'getActiveCount', 'getActive'),
|
||||
this.safeGetCount(queue, 'getCompletedCount', 'getCompleted'),
|
||||
this.safeGetCount(queue, 'getFailedCount', 'getFailed'),
|
||||
this.safeGetCount(queue, 'getDelayedCount', 'getDelayed'),
|
||||
]);
|
||||
|
||||
const paused = await this.safeGetPausedStatus(queue);
|
||||
|
||||
return {
|
||||
waiting,
|
||||
active,
|
||||
completed,
|
||||
failed,
|
||||
delayed,
|
||||
paused,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Safely get count from queue
|
||||
*/
|
||||
private async safeGetCount(queue: any, ...methodNames: string[]): Promise<number> {
|
||||
for (const methodName of methodNames) {
|
||||
if (queue[methodName] && typeof queue[methodName] === 'function') {
|
||||
try {
|
||||
const result = await queue[methodName]();
|
||||
return Array.isArray(result) ? result.length : (result || 0);
|
||||
} catch (e) {
|
||||
// Continue to next method
|
||||
}
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get paused status
|
||||
*/
|
||||
private async safeGetPausedStatus(queue: any): Promise<number> {
|
||||
try {
|
||||
if (queue.isPaused && typeof queue.isPaused === 'function') {
|
||||
const isPaused = await queue.isPaused();
|
||||
return isPaused ? 1 : 0;
|
||||
}
|
||||
if (queue.getPausedCount && typeof queue.getPausedCount === 'function') {
|
||||
return await queue.getPausedCount();
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get worker info for a queue
|
||||
*/
|
||||
private getWorkerInfo(queue: any, queueManager: any, queueName: string) {
|
||||
try {
|
||||
// Check queue itself for worker info
|
||||
if (queue.workers && Array.isArray(queue.workers)) {
|
||||
return {
|
||||
count: queue.workers.length,
|
||||
concurrency: queue.workers[0]?.concurrency || 1,
|
||||
};
|
||||
}
|
||||
|
||||
// Check queue manager for worker config
|
||||
if (queueManager.config?.defaultQueueOptions) {
|
||||
const options = queueManager.config.defaultQueueOptions;
|
||||
return {
|
||||
count: options.workers || 1,
|
||||
concurrency: options.concurrency || 1,
|
||||
};
|
||||
}
|
||||
|
||||
// Check for getWorkerCount method
|
||||
if (queue.getWorkerCount && typeof queue.getWorkerCount === 'function') {
|
||||
const count = queue.getWorkerCount();
|
||||
return {
|
||||
count,
|
||||
concurrency: 1,
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get database statistics
|
||||
*/
|
||||
|
|
@ -187,7 +346,8 @@ export class MonitoringService {
|
|||
if (this.container.mongodb) {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
const db = this.container.mongodb.db();
|
||||
const mongoClient = this.container.mongodb as any; // This is MongoDBClient
|
||||
const db = mongoClient.getDatabase();
|
||||
await db.admin().ping();
|
||||
const latency = Date.now() - startTime;
|
||||
|
||||
|
|
@ -252,8 +412,10 @@ export class MonitoringService {
|
|||
this.getDatabaseStats(),
|
||||
]);
|
||||
|
||||
const memory = process.memoryUsage();
|
||||
const processMemory = process.memoryUsage();
|
||||
const systemMemory = this.getSystemMemory();
|
||||
const uptime = Date.now() - this.startTime;
|
||||
const cpuInfo = this.getCpuUsage();
|
||||
|
||||
// Determine overall health status
|
||||
const errors: string[] = [];
|
||||
|
|
@ -280,10 +442,15 @@ export class MonitoringService {
|
|||
timestamp: new Date().toISOString(),
|
||||
uptime,
|
||||
memory: {
|
||||
used: memory.heapUsed,
|
||||
total: memory.heapTotal,
|
||||
percentage: (memory.heapUsed / memory.heapTotal) * 100,
|
||||
used: systemMemory.used,
|
||||
total: systemMemory.total,
|
||||
percentage: systemMemory.percentage,
|
||||
heap: {
|
||||
used: processMemory.heapUsed,
|
||||
total: processMemory.heapTotal,
|
||||
},
|
||||
},
|
||||
cpu: cpuInfo,
|
||||
services: {
|
||||
cache: cacheStats,
|
||||
queues: queueStats,
|
||||
|
|
@ -353,4 +520,217 @@ export class MonitoringService {
|
|||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get service status for all microservices
|
||||
*/
|
||||
async getServiceStatus(): Promise<ServiceStatus[]> {
|
||||
const services: ServiceStatus[] = [];
|
||||
|
||||
// Define service endpoints
|
||||
const serviceEndpoints = [
|
||||
{ name: 'data-ingestion', port: 2001, path: '/health' },
|
||||
{ name: 'data-pipeline', port: 2002, path: '/health' },
|
||||
{ name: 'web-api', port: 2003, path: '/health' },
|
||||
];
|
||||
|
||||
for (const service of serviceEndpoints) {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
const response = await fetch(`http://localhost:${service.port}${service.path}`, {
|
||||
signal: AbortSignal.timeout(5000), // 5 second timeout
|
||||
});
|
||||
const latency = Date.now() - startTime;
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
services.push({
|
||||
name: service.name,
|
||||
version: data.version || '1.0.0',
|
||||
status: 'running',
|
||||
port: service.port,
|
||||
uptime: data.uptime || 0,
|
||||
lastCheck: new Date().toISOString(),
|
||||
healthy: true,
|
||||
});
|
||||
} else {
|
||||
services.push({
|
||||
name: service.name,
|
||||
version: 'unknown',
|
||||
status: 'error',
|
||||
port: service.port,
|
||||
uptime: 0,
|
||||
lastCheck: new Date().toISOString(),
|
||||
healthy: false,
|
||||
error: `HTTP ${response.status}`,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
services.push({
|
||||
name: service.name,
|
||||
version: 'unknown',
|
||||
status: 'stopped',
|
||||
port: service.port,
|
||||
uptime: 0,
|
||||
lastCheck: new Date().toISOString(),
|
||||
healthy: false,
|
||||
error: error instanceof Error ? error.message : 'Connection failed',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add current service (web-api)
|
||||
services.push({
|
||||
name: 'web-api',
|
||||
version: '1.0.0',
|
||||
status: 'running',
|
||||
port: process.env.PORT ? parseInt(process.env.PORT) : 2003,
|
||||
uptime: Date.now() - this.startTime,
|
||||
lastCheck: new Date().toISOString(),
|
||||
healthy: true,
|
||||
});
|
||||
|
||||
return services;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get proxy statistics
|
||||
*/
|
||||
async getProxyStats(): Promise<ProxyStats | null> {
|
||||
try {
|
||||
if (!this.container.proxy) {
|
||||
return {
|
||||
enabled: false,
|
||||
totalProxies: 0,
|
||||
workingProxies: 0,
|
||||
failedProxies: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const proxyManager = this.container.proxy as any;
|
||||
|
||||
// Check if proxy manager is ready
|
||||
if (!proxyManager.isReady || !proxyManager.isReady()) {
|
||||
return {
|
||||
enabled: true,
|
||||
totalProxies: 0,
|
||||
workingProxies: 0,
|
||||
failedProxies: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const stats = proxyManager.getStats ? proxyManager.getStats() : null;
|
||||
const lastFetchTime = proxyManager.getLastFetchTime ? proxyManager.getLastFetchTime() : null;
|
||||
|
||||
return {
|
||||
enabled: true,
|
||||
totalProxies: stats?.total || 0,
|
||||
workingProxies: stats?.working || 0,
|
||||
failedProxies: stats?.failed || 0,
|
||||
lastUpdate: stats?.lastUpdate ? new Date(stats.lastUpdate).toISOString() : undefined,
|
||||
lastFetchTime: lastFetchTime ? new Date(lastFetchTime).toISOString() : undefined,
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get proxy stats', { error });
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get comprehensive system overview
|
||||
*/
|
||||
async getSystemOverview(): Promise<SystemOverview> {
|
||||
const [services, health, proxies] = await Promise.all([
|
||||
this.getServiceStatus(),
|
||||
this.getSystemHealth(),
|
||||
this.getProxyStats(),
|
||||
]);
|
||||
|
||||
return {
|
||||
services,
|
||||
health,
|
||||
proxies: proxies || undefined,
|
||||
environment: {
|
||||
nodeVersion: process.version,
|
||||
platform: os.platform(),
|
||||
architecture: os.arch(),
|
||||
hostname: os.hostname(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get detailed CPU usage
|
||||
*/
|
||||
private getCpuUsage() {
|
||||
const cpus = os.cpus();
|
||||
let totalIdle = 0;
|
||||
let totalTick = 0;
|
||||
|
||||
cpus.forEach(cpu => {
|
||||
for (const type in cpu.times) {
|
||||
totalTick += cpu.times[type as keyof typeof cpu.times];
|
||||
}
|
||||
totalIdle += cpu.times.idle;
|
||||
});
|
||||
|
||||
const idle = totalIdle / cpus.length;
|
||||
const total = totalTick / cpus.length;
|
||||
const usage = 100 - ~~(100 * idle / total);
|
||||
|
||||
return {
|
||||
usage,
|
||||
loadAverage: os.loadavg(),
|
||||
cores: cpus.length,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get system memory info
|
||||
*/
|
||||
private getSystemMemory() {
|
||||
const totalMem = os.totalmem();
|
||||
const freeMem = os.freemem();
|
||||
|
||||
// On Linux, freeMem includes buffers/cache, but we want "available" memory
|
||||
// which better represents memory that can be used by applications
|
||||
let availableMem = freeMem;
|
||||
|
||||
// Try to read from /proc/meminfo for more accurate memory stats on Linux
|
||||
if (os.platform() === 'linux') {
|
||||
try {
|
||||
const fs = require('fs');
|
||||
const meminfo = fs.readFileSync('/proc/meminfo', 'utf8');
|
||||
const lines = meminfo.split('\n');
|
||||
|
||||
let memAvailable = 0;
|
||||
let memTotal = 0;
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('MemAvailable:')) {
|
||||
memAvailable = parseInt(line.split(/\s+/)[1], 10) * 1024; // Convert from KB to bytes
|
||||
} else if (line.startsWith('MemTotal:')) {
|
||||
memTotal = parseInt(line.split(/\s+/)[1], 10) * 1024;
|
||||
}
|
||||
}
|
||||
|
||||
if (memAvailable > 0) {
|
||||
availableMem = memAvailable;
|
||||
}
|
||||
} catch (error) {
|
||||
// Fallback to os.freemem() if we can't read /proc/meminfo
|
||||
this.logger.debug('Could not read /proc/meminfo', { error });
|
||||
}
|
||||
}
|
||||
|
||||
const usedMem = totalMem - availableMem;
|
||||
|
||||
return {
|
||||
total: totalMem,
|
||||
used: usedMem,
|
||||
free: freeMem,
|
||||
available: availableMem,
|
||||
percentage: (usedMem / totalMem) * 100,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,8 @@ export interface QueueStats {
|
|||
failed: number;
|
||||
delayed: number;
|
||||
paused: number;
|
||||
prioritized?: number;
|
||||
'waiting-children'?: number;
|
||||
};
|
||||
workers?: {
|
||||
count: number;
|
||||
|
|
@ -91,3 +93,35 @@ export interface ServiceMetrics {
|
|||
errorRate: MetricSnapshot;
|
||||
activeConnections: MetricSnapshot;
|
||||
}
|
||||
|
||||
export interface ServiceStatus {
|
||||
name: string;
|
||||
version: string;
|
||||
status: 'running' | 'stopped' | 'error';
|
||||
port?: number;
|
||||
uptime: number;
|
||||
lastCheck: string;
|
||||
healthy: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface ProxyStats {
|
||||
enabled: boolean;
|
||||
totalProxies: number;
|
||||
workingProxies: number;
|
||||
failedProxies: number;
|
||||
lastUpdate?: string;
|
||||
lastFetchTime?: string;
|
||||
}
|
||||
|
||||
export interface SystemOverview {
|
||||
services: ServiceStatus[];
|
||||
health: SystemHealth;
|
||||
proxies?: ProxyStats;
|
||||
environment: {
|
||||
nodeVersion: string;
|
||||
platform: string;
|
||||
architecture: string;
|
||||
hostname: string;
|
||||
};
|
||||
}
|
||||
|
|
@ -29,8 +29,8 @@ export function Layout() {
|
|||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
<Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
|
||||
|
||||
<main className="py-4 lg:pl-60 w-full h-full overflow-y-auto">
|
||||
<div className="px-4 flex-col h-full">
|
||||
<main className="py-8 lg:pl-60 w-full h-full overflow-y-auto">
|
||||
<div className="px-8 flex-col h-full">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ReactNode } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface CardProps {
|
||||
|
|
@ -11,7 +11,7 @@ export function Card({ children, className, hover = false }: CardProps) {
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'bg-surface-secondary rounded-lg border border-border p-4',
|
||||
'bg-surface-secondary rounded-lg border border-border',
|
||||
hover && 'hover:border-primary-500/50 transition-colors',
|
||||
className
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ReactNode } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Card } from './Card';
|
||||
|
||||
interface StatCardProps {
|
||||
|
|
@ -21,7 +21,7 @@ export function StatCard({
|
|||
borderColor,
|
||||
}: StatCardProps) {
|
||||
return (
|
||||
<Card hover className={`hover:${borderColor}`}>
|
||||
<Card hover className={`p-4 hover:${borderColor}`}>
|
||||
<div className="flex items-center">
|
||||
<div className={`p-1.5 ${iconBgColor} rounded`}>{icon}</div>
|
||||
<div className="ml-3">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export { Card, CardHeader, CardContent } from './Card';
|
||||
export { StatCard } from './StatCard';
|
||||
export { Button } from './Button';
|
||||
export { Card, CardContent, CardHeader } from './Card';
|
||||
export { DataTable } from './DataTable';
|
||||
export { Dialog, DialogContent, DialogHeader, DialogTitle } from './dialog';
|
||||
export { Button } from './button';
|
||||
export { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
|
||||
export { StatCard } from './StatCard';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,49 +3,105 @@
|
|||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useSystemHealth, useCacheStats, useQueueStats, useDatabaseStats } from './hooks';
|
||||
import { SystemHealthCard, CacheStatsCard, QueueStatsTable, DatabaseStatsGrid } from './components';
|
||||
import {
|
||||
CacheStatsCard,
|
||||
DatabaseStatsGrid,
|
||||
ProxyStatsCard,
|
||||
QueueStatsTable,
|
||||
ServiceStatusGrid,
|
||||
SystemHealthCard
|
||||
} from './components';
|
||||
import {
|
||||
useCacheStats,
|
||||
useDatabaseStats,
|
||||
useProxyStats,
|
||||
useQueueStats,
|
||||
useServiceStatus,
|
||||
useSystemHealth,
|
||||
useSystemOverview
|
||||
} from './hooks';
|
||||
|
||||
export function MonitoringPage() {
|
||||
const [refreshInterval, setRefreshInterval] = useState(5000); // 5 seconds default
|
||||
const [useOverview, setUseOverview] = useState(false); // Toggle between individual calls and overview
|
||||
|
||||
const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(refreshInterval);
|
||||
const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(refreshInterval);
|
||||
const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(refreshInterval);
|
||||
const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(refreshInterval);
|
||||
// Individual API calls
|
||||
const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(useOverview ? 0 : refreshInterval);
|
||||
const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(useOverview ? 0 : refreshInterval);
|
||||
const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(useOverview ? 0 : refreshInterval);
|
||||
const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(useOverview ? 0 : refreshInterval);
|
||||
const { data: services, loading: servicesLoading, error: servicesError } = useServiceStatus(useOverview ? 0 : refreshInterval);
|
||||
const { data: proxies, loading: proxiesLoading, error: proxiesError } = useProxyStats(useOverview ? 0 : refreshInterval);
|
||||
|
||||
// Combined overview call
|
||||
const { data: overview, loading: overviewLoading, error: overviewError } = useSystemOverview(useOverview ? refreshInterval : 0);
|
||||
|
||||
const handleRefreshIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setRefreshInterval(Number(e.target.value));
|
||||
};
|
||||
|
||||
if (healthLoading || cacheLoading || queuesLoading || dbLoading) {
|
||||
const handleDataSourceToggle = () => {
|
||||
setUseOverview(!useOverview);
|
||||
};
|
||||
|
||||
// Use overview data if enabled
|
||||
const displayHealth = useOverview && overview ? overview.health : health;
|
||||
const displayServices = useOverview && overview ? overview.services : services;
|
||||
const displayProxies = useOverview && overview ? overview.proxies : proxies;
|
||||
const displayCache = useOverview && overview ? overview.health.services.cache : cache;
|
||||
const displayQueues = useOverview && overview ? overview.health.services.queues : queues;
|
||||
const displayDatabases = useOverview && overview ? overview.health.services.databases : databases;
|
||||
|
||||
const isLoading = useOverview
|
||||
? overviewLoading
|
||||
: (healthLoading || cacheLoading || queuesLoading || dbLoading || servicesLoading || proxiesLoading);
|
||||
|
||||
const errors = useOverview
|
||||
? (overviewError ? [overviewError] : [])
|
||||
: [healthError, cacheError, queuesError, dbError, servicesError, proxiesError].filter(Boolean);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Loading monitoring data...</p>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
|
||||
<p className="mt-4 text-text-secondary">Loading monitoring data...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasErrors = healthError || cacheError || queuesError || dbError;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">System Monitoring</h1>
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
<div className="flex items-center justify-between flex-shrink-0">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-text-primary mb-2">System Monitoring</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="refresh-interval" className="text-sm text-gray-600">
|
||||
<label className="text-sm text-text-secondary">
|
||||
Data source:
|
||||
</label>
|
||||
<button
|
||||
onClick={handleDataSourceToggle}
|
||||
className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||
useOverview
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'bg-surface-tertiary text-text-primary'
|
||||
}`}
|
||||
>
|
||||
{useOverview ? 'Overview API' : 'Individual APIs'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="refresh-interval" className="text-sm text-text-secondary">
|
||||
Refresh interval:
|
||||
</label>
|
||||
<select
|
||||
id="refresh-interval"
|
||||
value={refreshInterval}
|
||||
onChange={handleRefreshIntervalChange}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
className="text-sm bg-surface-secondary border border-border text-text-primary rounded px-2 py-1"
|
||||
>
|
||||
<option value={0}>Manual</option>
|
||||
<option value={5000}>5 seconds</option>
|
||||
|
|
@ -56,46 +112,75 @@ export function MonitoringPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasErrors && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<h3 className="font-semibold text-red-800 mb-2">Errors occurred while fetching data:</h3>
|
||||
<ul className="list-disc list-inside text-sm text-red-700 space-y-1">
|
||||
{healthError && <li>System Health: {healthError}</li>}
|
||||
{cacheError && <li>Cache Stats: {cacheError}</li>}
|
||||
{queuesError && <li>Queue Stats: {queuesError}</li>}
|
||||
{dbError && <li>Database Stats: {dbError}</li>}
|
||||
{errors.length > 0 && (
|
||||
<div className="p-3 bg-danger/10 border border-danger rounded-lg flex-shrink-0">
|
||||
<h3 className="font-semibold text-danger mb-2">Errors occurred while fetching data:</h3>
|
||||
<ul className="list-disc list-inside text-sm text-danger space-y-1">
|
||||
{errors.map((error, index) => (
|
||||
<li key={index}>{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* System Health */}
|
||||
{health && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-1">
|
||||
<SystemHealthCard health={health} />
|
||||
{useOverview && overview && (
|
||||
<div className="p-3 bg-primary-500/10 border border-primary-500 rounded-lg flex-shrink-0">
|
||||
<h3 className="font-semibold text-primary-400 mb-2">System Environment</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-primary-400">Node:</span> <span className="text-text-primary">{overview.environment.nodeVersion}</span>
|
||||
</div>
|
||||
<div className="lg:col-span-2">
|
||||
{cache && <CacheStatsCard stats={cache} />}
|
||||
<div>
|
||||
<span className="text-primary-400">Platform:</span> <span className="text-text-primary">{overview.environment.platform}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-primary-400">Architecture:</span> <span className="text-text-primary">{overview.environment.architecture}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-primary-400">Hostname:</span> <span className="text-text-primary">{overview.environment.hostname}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-h-0 space-y-4">
|
||||
{/* Service Status */}
|
||||
{displayServices && displayServices.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3 text-text-primary">Microservices Status</h2>
|
||||
<ServiceStatusGrid services={displayServices} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* System Health and Cache */}
|
||||
{displayHealth && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div className="lg:col-span-1">
|
||||
<SystemHealthCard health={displayHealth} />
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
{displayCache && <CacheStatsCard stats={displayCache} />}
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
{displayProxies && <ProxyStatsCard stats={displayProxies} />}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Database Stats */}
|
||||
{databases && databases.length > 0 && (
|
||||
{displayDatabases && displayDatabases.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">Database Connections</h2>
|
||||
<DatabaseStatsGrid databases={databases} />
|
||||
<h2 className="text-lg font-semibold mb-3 text-text-primary">Database Connections</h2>
|
||||
<DatabaseStatsGrid databases={displayDatabases} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Queue Stats */}
|
||||
{queues && queues.length > 0 && (
|
||||
{displayQueues && displayQueues.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">Queue Status</h2>
|
||||
<QueueStatsTable queues={queues} />
|
||||
<h2 className="text-lg font-semibold mb-3 text-text-primary">Queue Status</h2>
|
||||
<QueueStatsTable queues={displayQueues} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
39
apps/stock/web-app/src/features/monitoring/README.md
Normal file
39
apps/stock/web-app/src/features/monitoring/README.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# Monitoring Components
|
||||
|
||||
This directory contains monitoring components that have been refactored to use standardized UI components with a consistent dark theme.
|
||||
|
||||
## Standardized Components
|
||||
|
||||
### StatusBadge
|
||||
Used for displaying status indicators with consistent styling:
|
||||
- `ConnectionStatus` - Shows connected/disconnected state
|
||||
- `HealthStatus` - Shows healthy/unhealthy state
|
||||
- `ServiceStatusIndicator` - Shows service status as a colored dot
|
||||
|
||||
### MetricCard
|
||||
Displays metrics with optional progress bars in a consistent card layout.
|
||||
|
||||
### Cards
|
||||
- `ServiceCard` - Displays individual service status
|
||||
- `DatabaseCard` - Displays database connection info
|
||||
- `SystemHealthCard` - Shows system health overview
|
||||
- `CacheStatsCard` - Shows cache statistics
|
||||
- `ProxyStatsCard` - Shows proxy status
|
||||
- `QueueStatsTable` - Displays queue statistics in a table
|
||||
|
||||
## Theme Colors
|
||||
|
||||
All components now use the standardized color palette from the Tailwind config:
|
||||
- Background: `bg-surface-secondary` (dark surfaces)
|
||||
- Borders: `border-border`
|
||||
- Text: `text-text-primary`, `text-text-secondary`, `text-text-muted`
|
||||
- Status colors: `text-success`, `text-danger`, `text-warning`
|
||||
- Primary accent: `text-primary-400`, `bg-primary-500/10`
|
||||
|
||||
## Utilities
|
||||
|
||||
Common formatting functions are available in `utils/formatters.ts`:
|
||||
- `formatUptime()` - Formats milliseconds to human-readable uptime
|
||||
- `formatBytes()` - Formats bytes to KB/MB/GB
|
||||
- `formatNumber()` - Adds thousand separators
|
||||
- `formatPercentage()` - Formats numbers as percentages
|
||||
44
apps/stock/web-app/src/features/monitoring/SPACING.md
Normal file
44
apps/stock/web-app/src/features/monitoring/SPACING.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# Monitoring Components - Spacing Guidelines
|
||||
|
||||
This document outlines the standardized spacing used across monitoring components to maximize screen real estate.
|
||||
|
||||
## Spacing Standards
|
||||
|
||||
### Page Layout
|
||||
- Main container: `flex flex-col h-full space-y-4` (16px vertical gaps)
|
||||
- No outer padding - handled by parent layout
|
||||
- Section spacing: `space-y-4` between major sections
|
||||
|
||||
### Cards
|
||||
- Card padding: `p-4` (16px) for main cards, `p-3` (12px) for compact cards
|
||||
- Card header: `pb-3` (12px bottom padding)
|
||||
- Card content spacing: `space-y-3` (12px gaps)
|
||||
- Grid gaps: `gap-3` (12px) or `gap-4` (16px)
|
||||
|
||||
### Typography
|
||||
- Page title: `text-lg font-bold mb-2`
|
||||
- Section headings: `text-lg font-semibold mb-3`
|
||||
- Card titles: `text-base font-semibold`
|
||||
- Large values: `text-xl` or `text-lg`
|
||||
- Regular text: `text-sm`
|
||||
- Small text/labels: `text-xs`
|
||||
|
||||
### Specific Components
|
||||
|
||||
**ServiceCard**: `p-3` with `space-y-1.5` and `text-xs`
|
||||
**DatabaseCard**: `p-4` with `space-y-2`
|
||||
**SystemHealthCard**: `p-4` with `space-y-3`
|
||||
**CacheStatsCard**: `p-4` with `space-y-3`
|
||||
**ProxyStatsCard**: `p-4` with `space-y-3`
|
||||
**QueueStatsTable**: `p-4` with `text-xs` table
|
||||
|
||||
### Grids
|
||||
- Service grid: `gap-3`
|
||||
- Database grid: `gap-3`
|
||||
- Main layout grid: `gap-4`
|
||||
|
||||
## Benefits
|
||||
- Maximizes usable screen space
|
||||
- Consistent with dashboard/exchanges pages
|
||||
- More data visible without scrolling
|
||||
- Clean, compact appearance
|
||||
|
|
@ -2,78 +2,73 @@
|
|||
* Cache Statistics Card Component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '../../../components/ui/Card';
|
||||
import type { CacheStats } from '../types';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { ConnectionStatus } from './StatusBadge';
|
||||
import { formatBytes, formatNumber, formatPercentage } from '../utils/formatters';
|
||||
|
||||
interface CacheStatsCardProps {
|
||||
stats: CacheStats;
|
||||
}
|
||||
|
||||
export function CacheStatsCard({ stats }: CacheStatsCardProps) {
|
||||
const formatBytes = (bytes: number) => {
|
||||
const mb = bytes / 1024 / 1024;
|
||||
return mb.toFixed(2) + ' MB';
|
||||
};
|
||||
|
||||
const hitRate = stats.stats && (stats.stats.hits + stats.stats.misses) > 0
|
||||
? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100).toFixed(1)
|
||||
: '0';
|
||||
? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">Cache (Dragonfly)</h3>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
stats.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
|
||||
}`}>
|
||||
{stats.connected ? 'Connected' : 'Disconnected'}
|
||||
</span>
|
||||
<Card className="p-4">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-text-primary">Cache (Dragonfly)</h3>
|
||||
<ConnectionStatus connected={stats.connected} size="md" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{stats.connected ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{stats.memoryUsage && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Memory Used</div>
|
||||
<div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.used)}</div>
|
||||
<div className="text-sm text-text-secondary">Memory Used</div>
|
||||
<div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.used)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Peak Memory</div>
|
||||
<div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.peak)}</div>
|
||||
<div className="text-sm text-text-secondary">Peak Memory</div>
|
||||
<div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.peak)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stats.stats && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Hit Rate</div>
|
||||
<div className="text-xl font-semibold">{hitRate}%</div>
|
||||
<div className="text-sm text-text-secondary">Hit Rate</div>
|
||||
<div className="text-lg font-semibold text-text-primary">{formatPercentage(hitRate)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Total Keys</div>
|
||||
<div className="text-xl font-semibold">{stats.stats.keys.toLocaleString()}</div>
|
||||
<div className="text-sm text-text-secondary">Total Keys</div>
|
||||
<div className="text-lg font-semibold text-text-primary">{formatNumber(stats.stats.keys)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-600">Hits:</span> {stats.stats.hits.toLocaleString()}
|
||||
<span className="text-text-secondary">Hits:</span> <span className="text-text-primary">{formatNumber(stats.stats.hits)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-600">Misses:</span> {stats.stats.misses.toLocaleString()}
|
||||
<span className="text-text-secondary">Misses:</span> <span className="text-text-primary">{formatNumber(stats.stats.misses)}</span>
|
||||
</div>
|
||||
{stats.stats.evictedKeys !== undefined && (
|
||||
<div>
|
||||
<span className="text-gray-600">Evicted:</span> {stats.stats.evictedKeys.toLocaleString()}
|
||||
<span className="text-text-secondary">Evicted:</span> <span className="text-text-primary">{formatNumber(stats.stats.evictedKeys)}</span>
|
||||
</div>
|
||||
)}
|
||||
{stats.stats.expiredKeys !== undefined && (
|
||||
<div>
|
||||
<span className="text-gray-600">Expired:</span> {stats.stats.expiredKeys.toLocaleString()}
|
||||
<span className="text-text-secondary">Expired:</span> <span className="text-text-primary">{formatNumber(stats.stats.expiredKeys)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -81,16 +76,17 @@ export function CacheStatsCard({ stats }: CacheStatsCardProps) {
|
|||
)}
|
||||
|
||||
{stats.uptime && (
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="text-sm text-text-secondary">
|
||||
Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<div className="text-center py-8 text-text-secondary">
|
||||
Cache service is not available
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { ConnectionStatus } from './StatusBadge';
|
||||
import { formatPercentage } from '../utils/formatters';
|
||||
import type { DatabaseStats } from '../types';
|
||||
|
||||
interface DatabaseCardProps {
|
||||
database: DatabaseStats;
|
||||
}
|
||||
|
||||
export function DatabaseCard({ database }: DatabaseCardProps) {
|
||||
const getDbIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'postgres':
|
||||
return '🐘';
|
||||
case 'mongodb':
|
||||
return '🍃';
|
||||
case 'questdb':
|
||||
return '⚡';
|
||||
default:
|
||||
return '💾';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-2xl">{getDbIcon(database.type)}</span>
|
||||
<h4 className="font-semibold text-text-primary">{database.name}</h4>
|
||||
</div>
|
||||
<ConnectionStatus connected={database.connected} />
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{database.connected ? (
|
||||
<div className="space-y-2">
|
||||
{database.latency !== undefined && (
|
||||
<div>
|
||||
<div className="text-sm text-text-secondary">Latency</div>
|
||||
<div className="text-base font-semibold text-text-primary">{database.latency}ms</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{database.pool && (
|
||||
<div>
|
||||
<div className="text-sm text-text-secondary mb-1">Connection Pool</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-text-secondary">Active:</span>{' '}
|
||||
<span className="text-text-primary">{database.pool.active}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-text-secondary">Idle:</span>{' '}
|
||||
<span className="text-text-primary">{database.pool.idle}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-text-secondary">Size:</span>{' '}
|
||||
<span className="text-text-primary">{database.pool.size}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-text-secondary">Max:</span>{' '}
|
||||
<span className="text-text-primary">{database.pool.max}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{database.pool.max > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="w-full bg-surface-tertiary rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${(database.pool.size / database.pool.max) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
{formatPercentage((database.pool.size / database.pool.max) * 100, 0)} utilized
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{database.type === 'mongodb' && database.stats && (
|
||||
<div className="text-xs text-text-secondary">
|
||||
<div>Version: <span className="text-text-primary">{database.stats.version}</span></div>
|
||||
{database.stats.connections && (
|
||||
<div>
|
||||
Connections:{' '}
|
||||
<span className="text-text-primary">
|
||||
{database.stats.connections.current}/{database.stats.connections.available}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-4 text-text-secondary">
|
||||
Database is not available
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,102 +2,18 @@
|
|||
* Database Statistics Grid Component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '../../../components/ui/Card';
|
||||
import type { DatabaseStats } from '../types';
|
||||
import { DatabaseCard } from './DatabaseCard';
|
||||
|
||||
interface DatabaseStatsGridProps {
|
||||
databases: DatabaseStats[];
|
||||
}
|
||||
|
||||
export function DatabaseStatsGrid({ databases }: DatabaseStatsGridProps) {
|
||||
const getDbIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'postgres':
|
||||
return '🐘';
|
||||
case 'mongodb':
|
||||
return '🍃';
|
||||
case 'questdb':
|
||||
return '⚡';
|
||||
default:
|
||||
return '💾';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{databases.map((db) => (
|
||||
<Card key={db.type} className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-2xl">{getDbIcon(db.type)}</span>
|
||||
<h4 className="font-semibold">{db.name}</h4>
|
||||
</div>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
db.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
|
||||
}`}>
|
||||
{db.connected ? 'Connected' : 'Disconnected'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{db.connected ? (
|
||||
<div className="space-y-3">
|
||||
{db.latency !== undefined && (
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Latency</div>
|
||||
<div className="text-lg font-semibold">{db.latency}ms</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{db.pool && (
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 mb-1">Connection Pool</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-600">Active:</span> {db.pool.active}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-600">Idle:</span> {db.pool.idle}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-600">Size:</span> {db.pool.size}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-600">Max:</span> {db.pool.max}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{db.pool.max > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${(db.pool.size / db.pool.max) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
{((db.pool.size / db.pool.max) * 100).toFixed(0)}% utilized
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{db.type === 'mongodb' && db.stats && (
|
||||
<div className="text-xs text-gray-600">
|
||||
<div>Version: {db.stats.version}</div>
|
||||
{db.stats.connections && (
|
||||
<div>Connections: {db.stats.connections.current}/{db.stats.connections.available}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-4 text-gray-500">
|
||||
Database is not available
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<DatabaseCard key={db.type} database={db} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subtitle?: string;
|
||||
icon?: React.ReactNode;
|
||||
valueClassName?: string;
|
||||
progress?: {
|
||||
value: number;
|
||||
max: number;
|
||||
label?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function MetricCard({
|
||||
title,
|
||||
value,
|
||||
subtitle,
|
||||
icon,
|
||||
valueClassName,
|
||||
progress
|
||||
}: MetricCardProps) {
|
||||
return (
|
||||
<Card className="p-3">
|
||||
<CardHeader className="p-0 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-text-secondary">{title}</h4>
|
||||
{icon && <div className="text-text-muted">{icon}</div>}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className={cn('text-xl font-semibold text-text-primary', valueClassName)}>
|
||||
{value}
|
||||
</div>
|
||||
{subtitle && (
|
||||
<p className="text-xs text-text-muted mt-1">{subtitle}</p>
|
||||
)}
|
||||
{progress && (
|
||||
<div className="mt-3">
|
||||
<div className="flex justify-between text-xs text-text-secondary mb-1">
|
||||
<span>{progress.label || 'Usage'}</span>
|
||||
<span>{((progress.value / progress.max) * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-tertiary rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${Math.min((progress.value / progress.max) * 100, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* Proxy Stats Card Component
|
||||
*/
|
||||
|
||||
import type { ProxyStats } from '../types';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { formatPercentage } from '../utils/formatters';
|
||||
|
||||
interface ProxyStatsCardProps {
|
||||
stats: ProxyStats;
|
||||
}
|
||||
|
||||
export function ProxyStatsCard({ stats }: ProxyStatsCardProps) {
|
||||
const successRate = stats.totalProxies > 0
|
||||
? (stats.workingProxies / stats.totalProxies) * 100
|
||||
: 0;
|
||||
|
||||
const formatDate = (dateString?: string) => {
|
||||
if (!dateString) return 'Never';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold text-text-primary">Proxy Status</h2>
|
||||
<StatusBadge
|
||||
variant={stats.enabled ? 'success' : 'default'}
|
||||
size="md"
|
||||
>
|
||||
{stats.enabled ? 'Enabled' : 'Disabled'}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{stats.enabled ? (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">Total Proxies</p>
|
||||
<p className="text-xl font-bold text-text-primary">{stats.totalProxies}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">Success Rate</p>
|
||||
<p className="text-xl font-bold text-text-primary">{formatPercentage(successRate)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">Working</p>
|
||||
<p className="text-base font-semibold text-success">{stats.workingProxies}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">Failed</p>
|
||||
<p className="text-base font-semibold text-danger">{stats.failedProxies}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border pt-3 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-text-secondary">Last Update:</span>
|
||||
<span className="font-medium text-text-primary">{formatDate(stats.lastUpdate)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-text-secondary">Last Fetch:</span>
|
||||
<span className="font-medium text-text-primary">{formatDate(stats.lastFetchTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{stats.totalProxies === 0 && (
|
||||
<div className="bg-warning/10 border border-warning rounded p-3 text-sm text-warning">
|
||||
No proxies available. Check WebShare API configuration.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-text-secondary">
|
||||
<p>Proxy service is disabled</p>
|
||||
<p className="text-sm mt-2">Enable it in the configuration to use proxies</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,9 +2,10 @@
|
|||
* Queue Statistics Table Component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '../../../components/ui/Card';
|
||||
import type { QueueStats } from '../types';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { formatNumber } from '../utils/formatters';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface QueueStatsTableProps {
|
||||
queues: QueueStats[];
|
||||
|
|
@ -13,65 +14,91 @@ interface QueueStatsTableProps {
|
|||
export function QueueStatsTable({ queues }: QueueStatsTableProps) {
|
||||
const totalJobs = (queue: QueueStats) => {
|
||||
const { jobs } = queue;
|
||||
return jobs.waiting + jobs.active + jobs.completed + jobs.failed + jobs.delayed + jobs.paused;
|
||||
return jobs.waiting + jobs.active + jobs.completed + jobs.failed + jobs.delayed + jobs.paused +
|
||||
(jobs.prioritized || 0) + (jobs['waiting-children'] || 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Queue Statistics</h3>
|
||||
<Card className="p-4">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<h3 className="text-base font-semibold text-text-primary">Queue Statistics</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{queues.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 px-3">Queue</th>
|
||||
<th className="text-center py-2 px-3">Status</th>
|
||||
<th className="text-right py-2 px-3">Waiting</th>
|
||||
<th className="text-right py-2 px-3">Active</th>
|
||||
<th className="text-right py-2 px-3">Completed</th>
|
||||
<th className="text-right py-2 px-3">Failed</th>
|
||||
<th className="text-right py-2 px-3">Delayed</th>
|
||||
<th className="text-right py-2 px-3">Total</th>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 px-3 text-text-secondary font-medium">Queue</th>
|
||||
<th className="text-center py-2 px-3 text-text-secondary font-medium">Status</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Waiting</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Active</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Completed</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Failed</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Delayed</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Prioritized</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Children</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Workers</th>
|
||||
<th className="text-right py-2 px-3 text-text-secondary font-medium">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{queues.map((queue) => (
|
||||
<tr key={queue.name} className="border-b hover:bg-gray-50">
|
||||
<td className="py-2 px-3 font-medium">{queue.name}</td>
|
||||
<tr key={queue.name} className="border-b border-border hover:bg-surface-tertiary/50 transition-colors">
|
||||
<td className="py-2 px-3 font-medium text-text-primary">{queue.name}</td>
|
||||
<td className="py-2 px-3 text-center">
|
||||
<span className={`inline-block w-2 h-2 rounded-full ${
|
||||
queue.connected ? 'bg-green-500' : 'bg-red-500'
|
||||
}`} />
|
||||
<span className={cn(
|
||||
'inline-block w-2 h-2 rounded-full',
|
||||
queue.connected ? 'bg-success' : 'bg-danger'
|
||||
)} />
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right">{queue.jobs.waiting.toLocaleString()}</td>
|
||||
<td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.waiting)}</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
{queue.jobs.active > 0 ? (
|
||||
<span className="text-blue-600 font-medium">{queue.jobs.active}</span>
|
||||
<span className="text-primary-400 font-medium">{formatNumber(queue.jobs.active)}</span>
|
||||
) : (
|
||||
queue.jobs.active
|
||||
<span className="text-text-primary">{queue.jobs.active}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right">{queue.jobs.completed.toLocaleString()}</td>
|
||||
<td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.completed)}</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
{queue.jobs.failed > 0 ? (
|
||||
<span className="text-red-600 font-medium">{queue.jobs.failed}</span>
|
||||
<span className="text-danger font-medium">{formatNumber(queue.jobs.failed)}</span>
|
||||
) : (
|
||||
queue.jobs.failed
|
||||
<span className="text-text-primary">{queue.jobs.failed}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right">{queue.jobs.delayed.toLocaleString()}</td>
|
||||
<td className="py-2 px-3 text-right font-medium">{totalJobs(queue).toLocaleString()}</td>
|
||||
<td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.delayed)}</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
{queue.jobs.prioritized && queue.jobs.prioritized > 0 ? (
|
||||
<span className="text-primary-300 font-medium">{formatNumber(queue.jobs.prioritized)}</span>
|
||||
) : (
|
||||
<span className="text-text-primary">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
{queue.jobs['waiting-children'] && queue.jobs['waiting-children'] > 0 ? (
|
||||
<span className="text-warning font-medium">{formatNumber(queue.jobs['waiting-children'])}</span>
|
||||
) : (
|
||||
<span className="text-text-primary">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right text-text-primary">
|
||||
{queue.workers ? `${queue.workers.count}/${queue.workers.concurrency}` : '-'}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right font-medium text-text-primary">{formatNumber(totalJobs(queue))}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<div className="text-center py-6 text-text-secondary text-sm">
|
||||
No queue data available
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { ServiceStatusIndicator, HealthStatus } from './StatusBadge';
|
||||
import { formatUptime } from '../utils/formatters';
|
||||
import type { ServiceStatus } from '../types';
|
||||
|
||||
interface ServiceCardProps {
|
||||
service: ServiceStatus;
|
||||
}
|
||||
|
||||
export function ServiceCard({ service }: ServiceCardProps) {
|
||||
return (
|
||||
<Card className="p-3">
|
||||
<CardHeader className="p-0 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-sm capitalize text-text-primary">
|
||||
{service.name.replace(/-/g, ' ')}
|
||||
</h3>
|
||||
<ServiceStatusIndicator status={service.status} />
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 space-y-1.5 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Status:</span>
|
||||
<span className="font-medium capitalize text-text-primary">{service.status}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Port:</span>
|
||||
<span className="font-medium text-text-primary">{service.port || 'N/A'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Version:</span>
|
||||
<span className="font-medium text-text-primary">{service.version}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Uptime:</span>
|
||||
<span className="font-medium text-text-primary">{formatUptime(service.uptime)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary">Health:</span>
|
||||
<HealthStatus healthy={service.healthy} />
|
||||
</div>
|
||||
|
||||
{service.error && (
|
||||
<div className="mt-2 text-xs text-danger bg-danger/10 p-2 rounded">
|
||||
Error: {service.error}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* Service Status Grid Component
|
||||
*/
|
||||
|
||||
import type { ServiceStatus } from '../types';
|
||||
import { ServiceCard } from './ServiceCard';
|
||||
|
||||
interface ServiceStatusGridProps {
|
||||
services: ServiceStatus[];
|
||||
}
|
||||
|
||||
export function ServiceStatusGrid({ services }: ServiceStatusGridProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{services.map((service) => (
|
||||
<ServiceCard key={service.name} service={service} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import { cn } from '@/lib/utils';
|
||||
|
||||
type BadgeVariant = 'success' | 'danger' | 'warning' | 'default';
|
||||
|
||||
interface StatusBadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: BadgeVariant;
|
||||
className?: string;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
const variantStyles: Record<BadgeVariant, string> = {
|
||||
success: 'text-success bg-success/10',
|
||||
danger: 'text-danger bg-danger/10',
|
||||
warning: 'text-warning bg-warning/10',
|
||||
default: 'text-text-secondary bg-text-secondary/10',
|
||||
};
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'px-2 py-0.5 text-xs',
|
||||
md: 'px-3 py-1 text-sm',
|
||||
};
|
||||
|
||||
export function StatusBadge({
|
||||
children,
|
||||
variant = 'default',
|
||||
className,
|
||||
size = 'sm'
|
||||
}: StatusBadgeProps) {
|
||||
return (
|
||||
<span className={cn(
|
||||
'rounded-full font-medium',
|
||||
variantStyles[variant],
|
||||
sizeStyles[size],
|
||||
className
|
||||
)}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface ConnectionStatusProps {
|
||||
connected: boolean;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
export function ConnectionStatus({ connected, size = 'sm' }: ConnectionStatusProps) {
|
||||
return (
|
||||
<StatusBadge variant={connected ? 'success' : 'danger'} size={size}>
|
||||
{connected ? 'Connected' : 'Disconnected'}
|
||||
</StatusBadge>
|
||||
);
|
||||
}
|
||||
|
||||
interface HealthStatusProps {
|
||||
healthy: boolean;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
export function HealthStatus({ healthy, size = 'sm' }: HealthStatusProps) {
|
||||
return (
|
||||
<StatusBadge variant={healthy ? 'success' : 'danger'} size={size}>
|
||||
{healthy ? 'Healthy' : 'Unhealthy'}
|
||||
</StatusBadge>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceStatusIndicatorProps {
|
||||
status: 'running' | 'stopped' | 'error';
|
||||
}
|
||||
|
||||
export function ServiceStatusIndicator({ status }: ServiceStatusIndicatorProps) {
|
||||
const statusColors = {
|
||||
running: 'bg-success',
|
||||
stopped: 'bg-text-muted',
|
||||
error: 'bg-danger',
|
||||
};
|
||||
|
||||
return <div className={cn('w-3 h-3 rounded-full', statusColors[status])} />;
|
||||
}
|
||||
|
|
@ -2,75 +2,88 @@
|
|||
* System Health Card Component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '../../../components/ui/Card';
|
||||
import type { SystemHealth } from '../types';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { formatUptime, formatBytes, formatPercentage } from '../utils/formatters';
|
||||
|
||||
interface SystemHealthCardProps {
|
||||
health: SystemHealth;
|
||||
}
|
||||
|
||||
export function SystemHealthCard({ health }: SystemHealthCardProps) {
|
||||
const statusColor = {
|
||||
healthy: 'text-green-600 bg-green-100',
|
||||
degraded: 'text-yellow-600 bg-yellow-100',
|
||||
unhealthy: 'text-red-600 bg-red-100',
|
||||
const statusVariant = {
|
||||
healthy: 'success' as const,
|
||||
degraded: 'warning' as const,
|
||||
unhealthy: 'danger' as const,
|
||||
}[health.status];
|
||||
|
||||
const formatUptime = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days}d ${hours % 24}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||||
return `${seconds}s`;
|
||||
};
|
||||
|
||||
const formatBytes = (bytes: number) => {
|
||||
const gb = bytes / 1024 / 1024 / 1024;
|
||||
return gb.toFixed(2) + ' GB';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">System Health</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${statusColor}`}>
|
||||
<Card className="p-4">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-text-primary">System Health</h3>
|
||||
<StatusBadge variant={statusVariant} size="md">
|
||||
{health.status.toUpperCase()}
|
||||
</span>
|
||||
</StatusBadge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<CardContent className="p-0 space-y-3">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Uptime</div>
|
||||
<div className="text-2xl font-semibold">{formatUptime(health.uptime)}</div>
|
||||
<div className="text-sm text-text-secondary">Uptime</div>
|
||||
<div className="text-xl font-semibold text-text-primary">{formatUptime(health.uptime)}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Memory Usage</div>
|
||||
<div className="text-sm text-text-secondary">System Memory</div>
|
||||
<div className="mt-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="flex justify-between text-sm text-text-primary">
|
||||
<span>{formatBytes(health.memory.used)} / {formatBytes(health.memory.total)}</span>
|
||||
<span>{health.memory.percentage.toFixed(1)}%</span>
|
||||
<span>{formatPercentage(health.memory.percentage)}</span>
|
||||
</div>
|
||||
<div className="mt-1 w-full bg-gray-200 rounded-full h-2">
|
||||
<div className="mt-1 w-full bg-surface-tertiary rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${health.memory.percentage}%` }}
|
||||
className="bg-primary-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(health.memory.percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{health.memory.available !== undefined && (
|
||||
<div className="mt-2 text-xs text-text-muted">
|
||||
Available: {formatBytes(health.memory.available)} (excludes cache/buffers)
|
||||
</div>
|
||||
)}
|
||||
{health.memory.heap && (
|
||||
<div className="mt-1 text-xs text-text-muted">
|
||||
Node.js Heap: {formatBytes(health.memory.heap.used)} / {formatBytes(health.memory.heap.total)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{health.cpu && (
|
||||
<div>
|
||||
<div className="text-sm text-text-secondary">CPU Usage</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-lg font-semibold text-text-primary">{health.cpu.usage}%</div>
|
||||
{health.cpu.cores && (
|
||||
<span className="text-sm text-text-secondary">{health.cpu.cores} cores</span>
|
||||
)}
|
||||
</div>
|
||||
{health.cpu.loadAverage && (
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
Load: {health.cpu.loadAverage.map(l => l.toFixed(2)).join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{health.errors && health.errors.length > 0 && (
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 mb-2">Issues</div>
|
||||
<div className="text-sm text-text-secondary mb-2">Issues</div>
|
||||
<ul className="space-y-1">
|
||||
{health.errors.map((error, index) => (
|
||||
<li key={index} className="text-sm text-red-600">
|
||||
<li key={index} className="text-sm text-danger">
|
||||
• {error}
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -78,10 +91,10 @@ export function SystemHealthCard({ health }: SystemHealthCardProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500">
|
||||
<div className="text-xs text-text-muted">
|
||||
Last updated: {new Date(health.timestamp).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,3 +6,9 @@ export { SystemHealthCard } from './SystemHealthCard';
|
|||
export { CacheStatsCard } from './CacheStatsCard';
|
||||
export { QueueStatsTable } from './QueueStatsTable';
|
||||
export { DatabaseStatsGrid } from './DatabaseStatsGrid';
|
||||
export { ServiceStatusGrid } from './ServiceStatusGrid';
|
||||
export { ProxyStatsCard } from './ProxyStatsCard';
|
||||
export { StatusBadge, ConnectionStatus, HealthStatus, ServiceStatusIndicator } from './StatusBadge';
|
||||
export { MetricCard } from './MetricCard';
|
||||
export { ServiceCard } from './ServiceCard';
|
||||
export { DatabaseCard } from './DatabaseCard';
|
||||
|
|
@ -4,7 +4,15 @@
|
|||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { monitoringApi } from '../services/monitoringApi';
|
||||
import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
|
||||
import type {
|
||||
SystemHealth,
|
||||
CacheStats,
|
||||
QueueStats,
|
||||
DatabaseStats,
|
||||
ServiceStatus,
|
||||
ProxyStats,
|
||||
SystemOverview
|
||||
} from '../types';
|
||||
|
||||
export function useSystemHealth(refreshInterval: number = 5000) {
|
||||
const [data, setData] = useState<SystemHealth | null>(null);
|
||||
|
|
@ -121,3 +129,90 @@ export function useDatabaseStats(refreshInterval: number = 5000) {
|
|||
|
||||
return { data, loading, error, refetch: fetchData };
|
||||
}
|
||||
|
||||
export function useServiceStatus(refreshInterval: number = 5000) {
|
||||
const [data, setData] = useState<ServiceStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const result = await monitoringApi.getServiceStatus();
|
||||
setData(result.services);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to fetch service status');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
|
||||
if (refreshInterval > 0) {
|
||||
const interval = setInterval(fetchData, refreshInterval);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [fetchData, refreshInterval]);
|
||||
|
||||
return { data, loading, error, refetch: fetchData };
|
||||
}
|
||||
|
||||
export function useProxyStats(refreshInterval: number = 5000) {
|
||||
const [data, setData] = useState<ProxyStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const stats = await monitoringApi.getProxyStats();
|
||||
setData(stats);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to fetch proxy stats');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
|
||||
if (refreshInterval > 0) {
|
||||
const interval = setInterval(fetchData, refreshInterval);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [fetchData, refreshInterval]);
|
||||
|
||||
return { data, loading, error, refetch: fetchData };
|
||||
}
|
||||
|
||||
export function useSystemOverview(refreshInterval: number = 5000) {
|
||||
const [data, setData] = useState<SystemOverview | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const overview = await monitoringApi.getSystemOverview();
|
||||
setData(overview);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to fetch system overview');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
|
||||
if (refreshInterval > 0) {
|
||||
const interval = setInterval(fetchData, refreshInterval);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [fetchData, refreshInterval]);
|
||||
|
||||
return { data, loading, error, refetch: fetchData };
|
||||
}
|
||||
|
|
@ -2,7 +2,15 @@
|
|||
* Monitoring API Service
|
||||
*/
|
||||
|
||||
import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
|
||||
import type {
|
||||
SystemHealth,
|
||||
CacheStats,
|
||||
QueueStats,
|
||||
DatabaseStats,
|
||||
ServiceStatus,
|
||||
ProxyStats,
|
||||
SystemOverview
|
||||
} from '../types';
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2003';
|
||||
const MONITORING_BASE = `${API_BASE_URL}/api/system/monitoring`;
|
||||
|
|
@ -84,4 +92,37 @@ export const monitoringApi = {
|
|||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
/**
|
||||
* Get service status
|
||||
*/
|
||||
async getServiceStatus(): Promise<{ services: ServiceStatus[] }> {
|
||||
const response = await fetch(`${MONITORING_BASE}/services`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch service status: ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
/**
|
||||
* Get proxy statistics
|
||||
*/
|
||||
async getProxyStats(): Promise<ProxyStats> {
|
||||
const response = await fetch(`${MONITORING_BASE}/proxies`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch proxy stats: ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
/**
|
||||
* Get system overview
|
||||
*/
|
||||
async getSystemOverview(): Promise<SystemOverview> {
|
||||
const response = await fetch(`${MONITORING_BASE}/overview`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch system overview: ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
};
|
||||
|
|
@ -31,6 +31,8 @@ export interface QueueStats {
|
|||
failed: number;
|
||||
delayed: number;
|
||||
paused: number;
|
||||
prioritized?: number;
|
||||
'waiting-children'?: number;
|
||||
};
|
||||
workers?: {
|
||||
count: number;
|
||||
|
|
@ -66,10 +68,16 @@ export interface SystemHealth {
|
|||
used: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
available?: number;
|
||||
heap?: {
|
||||
used: number;
|
||||
total: number;
|
||||
};
|
||||
};
|
||||
cpu?: {
|
||||
usage: number;
|
||||
loadAverage?: number[];
|
||||
cores?: number;
|
||||
};
|
||||
services: {
|
||||
cache: CacheStats;
|
||||
|
|
@ -78,3 +86,35 @@ export interface SystemHealth {
|
|||
};
|
||||
errors?: string[];
|
||||
}
|
||||
|
||||
export interface ServiceStatus {
|
||||
name: string;
|
||||
version: string;
|
||||
status: 'running' | 'stopped' | 'error';
|
||||
port?: number;
|
||||
uptime: number;
|
||||
lastCheck: string;
|
||||
healthy: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface ProxyStats {
|
||||
enabled: boolean;
|
||||
totalProxies: number;
|
||||
workingProxies: number;
|
||||
failedProxies: number;
|
||||
lastUpdate?: string;
|
||||
lastFetchTime?: string;
|
||||
}
|
||||
|
||||
export interface SystemOverview {
|
||||
services: ServiceStatus[];
|
||||
health: SystemHealth;
|
||||
proxies?: ProxyStats;
|
||||
environment: {
|
||||
nodeVersion: string;
|
||||
platform: string;
|
||||
architecture: string;
|
||||
hostname: string;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Common formatting utilities for monitoring components
|
||||
*/
|
||||
|
||||
export function formatUptime(ms: number): string {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days}d ${hours % 24}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
export function formatBytes(bytes: number): string {
|
||||
const gb = bytes / 1024 / 1024 / 1024;
|
||||
if (gb >= 1) {
|
||||
return gb.toFixed(2) + ' GB';
|
||||
}
|
||||
|
||||
const mb = bytes / 1024 / 1024;
|
||||
if (mb >= 1) {
|
||||
return mb.toFixed(2) + ' MB';
|
||||
}
|
||||
|
||||
const kb = bytes / 1024;
|
||||
if (kb >= 1) {
|
||||
return kb.toFixed(2) + ' KB';
|
||||
}
|
||||
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
export function formatNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
export function formatPercentage(value: number, decimals: number = 1): string {
|
||||
return `${value.toFixed(decimals)}%`;
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import {
|
|||
CloudArrowDownIcon,
|
||||
ExclamationTriangleIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { usePipeline } from './hooks/usePipeline';
|
||||
import type { PipelineOperation } from './types';
|
||||
|
|
@ -145,11 +144,11 @@ export function PipelinePage() {
|
|||
const getCategoryIcon = (category: string) => {
|
||||
switch (category) {
|
||||
case 'sync':
|
||||
return <CloudArrowDownIcon className="h-5 w-5" />;
|
||||
return <CloudArrowDownIcon className="h-4 w-4" />;
|
||||
case 'maintenance':
|
||||
return <ExclamationTriangleIcon className="h-5 w-5" />;
|
||||
return <ExclamationTriangleIcon className="h-4 w-4" />;
|
||||
default:
|
||||
return <CircleStackIcon className="h-5 w-5" />;
|
||||
return <CircleStackIcon className="h-4 w-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -165,21 +164,21 @@ export function PipelinePage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-text-primary mb-2">Data Pipeline Management</h1>
|
||||
<p className="text-text-secondary">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-lg font-bold text-text-primary mb-2">Data Pipeline Management</h1>
|
||||
<p className="text-text-secondary text-sm">
|
||||
Manage data synchronization and maintenance operations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
{(stats.exchanges || stats.providerMappings) && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 flex-shrink-0">
|
||||
{stats.exchanges && (
|
||||
<div className="bg-surface-secondary p-4 rounded-lg border border-border">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-3">Exchange Statistics</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="bg-surface-secondary p-3 rounded-lg border border-border">
|
||||
<h3 className="text-base font-semibold text-text-primary mb-2">Exchange Statistics</h3>
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Total Exchanges:</span>
|
||||
<span className="text-text-primary font-medium">{stats.exchanges.totalExchanges}</span>
|
||||
|
|
@ -201,9 +200,9 @@ export function PipelinePage() {
|
|||
)}
|
||||
|
||||
{stats.providerMappings && (
|
||||
<div className="bg-surface-secondary p-4 rounded-lg border border-border">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-3">Provider Mapping Statistics</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="bg-surface-secondary p-3 rounded-lg border border-border">
|
||||
<h3 className="text-base font-semibold text-text-primary mb-2">Provider Mapping Statistics</h3>
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-secondary">Coverage:</span>
|
||||
<span className="text-primary-400 font-medium">
|
||||
|
|
@ -224,7 +223,7 @@ export function PipelinePage() {
|
|||
<div className="mt-1 flex flex-wrap gap-2">
|
||||
{Object.entries(stats.providerMappings.mappingsByProvider).map(([provider, count]) => (
|
||||
<span key={provider} className="text-xs bg-surface px-2 py-1 rounded">
|
||||
{provider}: {count}
|
||||
{provider}: {String(count)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -238,27 +237,27 @@ export function PipelinePage() {
|
|||
|
||||
{/* Status Messages */}
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-danger/10 border border-danger/20 rounded-lg">
|
||||
<div className="p-3 bg-danger/10 border border-danger/20 rounded-lg flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 text-danger" />
|
||||
<span className="text-danger">{error}</span>
|
||||
<ExclamationTriangleIcon className="h-4 w-4 text-danger" />
|
||||
<span className="text-danger text-sm">{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lastJobResult && (
|
||||
<div className={`mb-6 p-4 rounded-lg border ${
|
||||
<div className={`p-3 rounded-lg border flex-shrink-0 ${
|
||||
lastJobResult.success
|
||||
? 'bg-success/10 border-success/20'
|
||||
: 'bg-danger/10 border-danger/20'
|
||||
}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
{lastJobResult.success ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-success" />
|
||||
<CheckCircleIcon className="h-4 w-4 text-success" />
|
||||
) : (
|
||||
<ExclamationTriangleIcon className="h-5 w-5 text-danger" />
|
||||
<ExclamationTriangleIcon className="h-4 w-4 text-danger" />
|
||||
)}
|
||||
<span className={lastJobResult.success ? 'text-success' : 'text-danger'}>
|
||||
<span className={`text-sm ${lastJobResult.success ? 'text-success' : 'text-danger'}`}>
|
||||
{lastJobResult.message || lastJobResult.error}
|
||||
</span>
|
||||
{lastJobResult.jobId && (
|
||||
|
|
@ -271,35 +270,35 @@ export function PipelinePage() {
|
|||
)}
|
||||
|
||||
{/* Operations Grid */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex-1 min-h-0 space-y-4 overflow-y-auto">
|
||||
{/* Sync Operations */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
|
||||
<CloudArrowDownIcon className="h-5 w-5 text-primary-400" />
|
||||
<h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
|
||||
<CloudArrowDownIcon className="h-4 w-4 text-primary-400" />
|
||||
Sync Operations
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{operations.filter(op => op.category === 'sync').map(op => (
|
||||
<div
|
||||
key={op.id}
|
||||
className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-primary-500/50 transition-colors"
|
||||
className="bg-surface-secondary p-3 rounded-lg border border-border hover:border-primary-500/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-medium text-text-primary">{op.name}</h3>
|
||||
<h3 className="font-medium text-sm text-text-primary">{op.name}</h3>
|
||||
<div className={getCategoryColor(op.category)}>
|
||||
{getCategoryIcon(op.category)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary mb-3">{op.description}</p>
|
||||
<p className="text-xs text-text-secondary mb-2">{op.description}</p>
|
||||
|
||||
{/* Special inputs for specific operations */}
|
||||
{op.id === 'sync-provider-symbols' && (
|
||||
<div className="mb-3">
|
||||
<div className="mb-2">
|
||||
<label className="block text-xs text-text-muted mb-1">Provider</label>
|
||||
<select
|
||||
value={selectedProvider}
|
||||
onChange={e => setSelectedProvider(e.target.value)}
|
||||
className="w-full px-2 py-1 text-sm bg-surface border border-border rounded focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
|
||||
className="w-full px-2 py-1 text-xs bg-surface border border-border rounded focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
|
||||
>
|
||||
<option value="yahoo">Yahoo</option>
|
||||
<option value="qm">QuestionsAndMethods</option>
|
||||
|
|
@ -309,8 +308,8 @@ export function PipelinePage() {
|
|||
)}
|
||||
|
||||
{op.id === 'sync-all-exchanges' && (
|
||||
<div className="mb-3">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<div className="mb-2">
|
||||
<label className="flex items-center gap-2 text-xs">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={clearFirst}
|
||||
|
|
@ -325,16 +324,16 @@ export function PipelinePage() {
|
|||
<button
|
||||
onClick={() => handleOperation(op)}
|
||||
disabled={loading}
|
||||
className="w-full px-3 py-2 bg-primary-500/20 text-primary-400 rounded text-sm font-medium hover:bg-primary-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||
className="w-full px-2.5 py-1.5 bg-primary-500/20 text-primary-400 rounded text-xs font-medium hover:bg-primary-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<ArrowPathIcon className="h-4 w-4 animate-spin" />
|
||||
<ArrowPathIcon className="h-3 w-3 animate-spin" />
|
||||
Processing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CloudArrowDownIcon className="h-4 w-4" />
|
||||
<CloudArrowDownIcon className="h-3 w-3" />
|
||||
Execute
|
||||
</>
|
||||
)}
|
||||
|
|
@ -346,31 +345,31 @@ export function PipelinePage() {
|
|||
|
||||
{/* Maintenance Operations */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 text-warning" />
|
||||
<h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
|
||||
<ExclamationTriangleIcon className="h-4 w-4 text-warning" />
|
||||
Maintenance Operations
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{operations.filter(op => op.category === 'maintenance').map(op => (
|
||||
<div
|
||||
key={op.id}
|
||||
className="bg-surface-secondary p-4 rounded-lg border border-warning/20 hover:border-warning/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-medium text-text-primary">{op.name}</h3>
|
||||
<h3 className="font-medium text-sm text-text-primary">{op.name}</h3>
|
||||
<div className={getCategoryColor(op.category)}>
|
||||
{getCategoryIcon(op.category)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary mb-3">{op.description}</p>
|
||||
<p className="text-xs text-text-secondary mb-2">{op.description}</p>
|
||||
|
||||
{op.id === 'clear-postgresql' && (
|
||||
<div className="mb-3">
|
||||
<div className="mb-2">
|
||||
<label className="block text-xs text-text-muted mb-1">Data Type</label>
|
||||
<select
|
||||
value={clearDataType}
|
||||
onChange={e => setClearDataType(e.target.value as any)}
|
||||
className="w-full px-2 py-1 text-sm bg-surface border border-border rounded focus:ring-1 focus:ring-warning focus:border-warning"
|
||||
className="w-full px-2 py-1 text-xs bg-surface border border-border rounded focus:ring-1 focus:ring-warning focus:border-warning"
|
||||
>
|
||||
<option value="all">All Data</option>
|
||||
<option value="exchanges">Exchanges Only</option>
|
||||
|
|
@ -382,16 +381,16 @@ export function PipelinePage() {
|
|||
<button
|
||||
onClick={() => handleOperation(op)}
|
||||
disabled={loading}
|
||||
className="w-full px-3 py-2 bg-warning/20 text-warning rounded text-sm font-medium hover:bg-warning/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||
className="w-full px-2.5 py-1.5 bg-warning/20 text-warning rounded text-xs font-medium hover:bg-warning/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<ArrowPathIcon className="h-4 w-4 animate-spin" />
|
||||
<ArrowPathIcon className="h-3 w-3 animate-spin" />
|
||||
Processing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
<ExclamationTriangleIcon className="h-3 w-3" />
|
||||
Execute
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
58
apps/stock/web-app/src/features/pipeline/SPACING.md
Normal file
58
apps/stock/web-app/src/features/pipeline/SPACING.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
# Pipeline Page - Spacing Updates
|
||||
|
||||
This document outlines the spacing standardization applied to the Pipeline page to match the monitoring and dashboard pages.
|
||||
|
||||
## Changes Applied
|
||||
|
||||
### Layout Structure
|
||||
- Main container: `flex flex-col h-full space-y-4`
|
||||
- No outer padding (handled by parent layout)
|
||||
- Flex-shrink-0 for fixed elements
|
||||
- Overflow-y-auto for scrollable content area
|
||||
|
||||
### Typography
|
||||
- Page title: `text-lg` (from `text-2xl`)
|
||||
- Page description: `text-sm`
|
||||
- Section headings: `text-base` (from `text-lg`)
|
||||
- Card titles: `text-sm`
|
||||
- Card descriptions: `text-xs` (from `text-sm`)
|
||||
- All text in cards: `text-xs`
|
||||
|
||||
### Spacing
|
||||
- Grid gaps: `gap-3` (from `gap-4`)
|
||||
- Card padding: `p-3` (from `p-4`)
|
||||
- Margins: `mb-2` or `mb-3` (from `mb-3` or `mb-4`)
|
||||
- Button padding: `px-2.5 py-1.5` (from `px-3 py-2`)
|
||||
|
||||
### Icons
|
||||
- Section icons: `h-4 w-4` (from `h-5 w-5`)
|
||||
- Button icons: `h-3 w-3` (from `h-4 w-4`)
|
||||
|
||||
### Specific Components
|
||||
|
||||
**Stats Cards**:
|
||||
- Padding: `p-3`
|
||||
- Title: `text-base mb-2`
|
||||
- Content: `text-xs` with `space-y-1.5`
|
||||
|
||||
**Operation Cards**:
|
||||
- Padding: `p-3`
|
||||
- Title: `text-sm`
|
||||
- Description: `text-xs mb-2`
|
||||
- Form elements: `text-xs` with `mb-2`
|
||||
|
||||
**Buttons**:
|
||||
- Padding: `px-2.5 py-1.5`
|
||||
- Text: `text-xs`
|
||||
- Icons: `h-3 w-3`
|
||||
|
||||
**Alert Messages**:
|
||||
- Padding: `p-3`
|
||||
- Text: `text-sm`
|
||||
- Icons: `h-4 w-4`
|
||||
|
||||
## Benefits
|
||||
- Consistent with monitoring and dashboard pages
|
||||
- More operations visible without scrolling
|
||||
- Cleaner, more compact appearance
|
||||
- Better space utilization for data-heavy interface
|
||||
|
|
@ -83,6 +83,13 @@ export class Queue {
|
|||
return this.queueName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the underlying BullMQ queue instance (for monitoring/admin purposes)
|
||||
*/
|
||||
getBullQueue(): BullQueue {
|
||||
return this.bullQueue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a single job to the queue
|
||||
*/
|
||||
|
|
@ -384,11 +391,4 @@ export class Queue {
|
|||
return this.workers.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the underlying BullMQ queue (for advanced operations)
|
||||
* @deprecated Use direct methods instead
|
||||
*/
|
||||
getBullQueue(): BullQueue {
|
||||
return this.bullQueue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ export class SmartQueueManager extends QueueManager {
|
|||
return super.getQueue(fullQueueName, options);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Send a job to any queue (local or remote)
|
||||
* This is the main method for cross-service communication
|
||||
|
|
@ -263,6 +264,53 @@ export class SmartQueueManager extends QueueManager {
|
|||
return this.producerQueues.get(route.fullName)!;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all queues (for monitoring purposes)
|
||||
*/
|
||||
getAllQueues(): Record<string, BullQueue> {
|
||||
const allQueues: Record<string, BullQueue> = {};
|
||||
|
||||
// Get all worker queues using public API
|
||||
const workerQueueNames = this.getQueueNames();
|
||||
for (const name of workerQueueNames) {
|
||||
const queue = this.getQueue(name);
|
||||
if (queue && typeof queue.getBullQueue === 'function') {
|
||||
// Extract the underlying BullMQ queue using the public getter
|
||||
// Use the simple handler name without service prefix for display
|
||||
const parts = name.split(':');
|
||||
const simpleName = parts.length > 1 ? parts[1] : name;
|
||||
if (simpleName) {
|
||||
allQueues[simpleName] = queue.getBullQueue();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add producer queues
|
||||
for (const [name, queue] of this.producerQueues) {
|
||||
// Use the simple handler name without service prefix for display
|
||||
const parts = name.split(':');
|
||||
const simpleName = parts.length > 1 ? parts[1] : name;
|
||||
if (simpleName && !allQueues[simpleName]) {
|
||||
allQueues[simpleName] = queue;
|
||||
}
|
||||
}
|
||||
|
||||
// If no queues found, return all registered handlers as BullMQ queues
|
||||
if (Object.keys(allQueues).length === 0) {
|
||||
// Create BullMQ queue instances for known handlers
|
||||
const handlers = ['proxy', 'qm', 'ib', 'ceo', 'webshare', 'exchanges', 'symbols'];
|
||||
for (const handler of handlers) {
|
||||
const connection = this.getConnection(1); // Use default DB
|
||||
allQueues[handler] = new BullQueue(`{${handler}}`, {
|
||||
connection,
|
||||
defaultJobOptions: this.getConfig().defaultQueueOptions?.defaultJobOptions || {},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return allQueues;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get statistics for all queues across all services
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue