catalog/ts_web/views/eco-view-containers/eco-view-containers.demo.ts

import { html } from '@design.estate/dees-element';
import type { IContainer } from './eco-view-containers.js';
import type { ILogEntry } from '@design.estate/dees-catalog';

const sampleContainers: IContainer[] = [
  {
    id: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6',
    name: 'nginx-proxy',
    image: 'nginx:alpine',
    status: 'running',
    state: 'Up 3 days',
    created: '2025-01-09T14:30:00Z',
    ports: [
      { hostPort: 80, containerPort: 80, protocol: 'tcp' },
      { hostPort: 443, containerPort: 443, protocol: 'tcp' },
    ],
    networks: ['bridge', 'web-network'],
    mounts: [
      { source: '/etc/nginx/conf.d', destination: '/etc/nginx/conf.d', mode: 'ro' },
      { source: '/var/log/nginx', destination: '/var/log/nginx', mode: 'rw' },
    ],
    cpuPercent: 2.5,
    memoryUsage: 52428800, // 50 MB
    memoryLimit: 536870912, // 512 MB
    networkRx: 1073741824, // 1 GB
    networkTx: 536870912, // 512 MB
  },
  {
    id: 'b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1',
    name: 'postgres-db',
    image: 'postgres:15',
    status: 'running',
    state: 'Up 5 days',
    created: '2025-01-07T10:00:00Z',
    ports: [
      { hostPort: 5432, containerPort: 5432, protocol: 'tcp' },
    ],
    networks: ['db-network'],
    mounts: [
      { source: '/var/lib/postgresql/data', destination: '/var/lib/postgresql/data', mode: 'rw' },
    ],
    cpuPercent: 8.3,
    memoryUsage: 268435456, // 256 MB
    memoryLimit: 1073741824, // 1 GB
    networkRx: 2147483648, // 2 GB
    networkTx: 1073741824, // 1 GB
  },
  {
    id: 'c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2',
    name: 'redis-cache',
    image: 'redis:7-alpine',
    status: 'running',
    state: 'Up 2 hours',
    created: '2025-01-12T08:00:00Z',
    ports: [
      { hostPort: 6379, containerPort: 6379, protocol: 'tcp' },
    ],
    networks: ['cache-network', 'web-network'],
    mounts: [],
    cpuPercent: 0.5,
    memoryUsage: 16777216, // 16 MB
    memoryLimit: 134217728, // 128 MB
    networkRx: 52428800, // 50 MB
    networkTx: 26214400, // 25 MB
  },
  {
    id: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
    name: 'node-api',
    image: 'node:20-alpine',
    status: 'running',
    state: 'Up 1 day',
    created: '2025-01-11T12:00:00Z',
    ports: [
      { hostPort: 3000, containerPort: 3000, protocol: 'tcp' },
    ],
    networks: ['web-network', 'db-network'],
    mounts: [
      { source: '/app', destination: '/app', mode: 'rw' },
      { source: '/app/node_modules', destination: '/app/node_modules', mode: 'rw' },
    ],
    cpuPercent: 45.2,
    memoryUsage: 524288000, // 500 MB
    memoryLimit: 1073741824, // 1 GB
    networkRx: 104857600, // 100 MB
    networkTx: 52428800, // 50 MB
  },
  {
    id: 'e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4',
    name: 'mongodb-old',
    image: 'mongo:4.4',
    status: 'stopped',
    state: 'Exited (0) 2 days ago',
    created: '2024-12-20T10:00:00Z',
    ports: [],
    networks: ['db-network'],
    mounts: [
      { source: '/var/lib/mongodb', destination: '/data/db', mode: 'rw' },
    ],
    cpuPercent: 0,
    memoryUsage: 0,
    memoryLimit: 2147483648, // 2 GB
    networkRx: 0,
    networkTx: 0,
  },
];

const sampleLogs: ILogEntry[] = [
  { timestamp: '2025-01-12T10:00:00Z', level: 'info', message: 'Container started successfully', source: 'docker' },
  { timestamp: '2025-01-12T10:00:01Z', level: 'info', message: 'Listening on port 80', source: 'nginx' },
  { timestamp: '2025-01-12T10:00:01Z', level: 'info', message: 'Listening on port 443', source: 'nginx' },
  { timestamp: '2025-01-12T10:00:05Z', level: 'debug', message: 'Worker process started (PID: 1234)', source: 'nginx' },
  { timestamp: '2025-01-12T10:00:10Z', level: 'info', message: 'Configuration loaded from /etc/nginx/nginx.conf', source: 'nginx' },
  { timestamp: '2025-01-12T10:01:00Z', level: 'info', message: 'GET /api/health 200 5ms', source: 'nginx' },
  { timestamp: '2025-01-12T10:01:15Z', level: 'info', message: 'GET /api/users 200 45ms', source: 'nginx' },
  { timestamp: '2025-01-12T10:01:30Z', level: 'warn', message: 'Upstream server temporarily unavailable', source: 'nginx' },
  { timestamp: '2025-01-12T10:01:31Z', level: 'info', message: 'Retrying upstream connection...', source: 'nginx' },
  { timestamp: '2025-01-12T10:01:32Z', level: 'success', message: 'Upstream connection restored', source: 'nginx' },
  { timestamp: '2025-01-12T10:02:00Z', level: 'info', message: 'POST /api/login 200 120ms', source: 'nginx' },
  { timestamp: '2025-01-12T10:02:30Z', level: 'info', message: 'GET /api/products 200 80ms', source: 'nginx' },
  { timestamp: '2025-01-12T10:03:00Z', level: 'error', message: 'Connection refused from 192.168.1.100', source: 'nginx' },
  { timestamp: '2025-01-12T10:03:05Z', level: 'warn', message: 'Rate limit exceeded for IP 192.168.1.100', source: 'nginx' },
  { timestamp: '2025-01-12T10:03:30Z', level: 'info', message: 'GET /api/health 200 3ms', source: 'nginx' },
  { timestamp: '2025-01-12T10:04:00Z', level: 'debug', message: 'Cache hit for /static/main.js', source: 'nginx' },
  { timestamp: '2025-01-12T10:04:30Z', level: 'info', message: 'SSL certificate valid for 89 days', source: 'nginx' },
  { timestamp: '2025-01-12T10:05:00Z', level: 'info', message: 'GET /api/orders 200 150ms', source: 'nginx' },
];

export const demo = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
      min-height: 600px;
      background: hsl(240 10% 4%);
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
  <div class="demo-container">
    <eco-view-containers
      .containers=${sampleContainers}
      .logEntries=${sampleLogs}
      @container-action=${(e: CustomEvent) => {
        console.log('Container action:', e.detail);
        alert(`Action: ${e.detail.action} on container ${e.detail.containerId.substring(0, 12)}`);
      }}
    ></eco-view-containers>
  </div>
`;