feat(eco-view-containers): add eco-view-containers demo and export; update remove button to destructive; bump devDependencies
This commit is contained in:
149
ts_web/views/eco-view-containers/eco-view-containers.demo.ts
Normal file
149
ts_web/views/eco-view-containers/eco-view-containers.demo.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
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>
|
||||
`;
|
||||
@@ -555,8 +555,7 @@ export class EcoViewContainers extends DeesElement {
|
||||
</dees-button>
|
||||
`}
|
||||
<dees-button
|
||||
.type=${'secondary'}
|
||||
.status=${'error'}
|
||||
.type=${'destructive'}
|
||||
@click=${() => this.emitContainerAction('remove', container.id)}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:trash2'} .iconSize=${14}></dees-icon>
|
||||
|
||||
1
ts_web/views/eco-view-containers/index.ts
Normal file
1
ts_web/views/eco-view-containers/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './eco-view-containers.js';
|
||||
@@ -6,3 +6,4 @@ export * from './eco-view-home/index.js';
|
||||
export * from './eco-view-login/index.js';
|
||||
export * from './eco-view-scan/index.js';
|
||||
export * from './eco-view-browser/index.js';
|
||||
export * from './eco-view-containers/index.js';
|
||||
|
||||
Reference in New Issue
Block a user