165 lines
4.9 KiB
TypeScript
165 lines
4.9 KiB
TypeScript
import { html, cssManager } from '@design.estate/dees-element';
|
|
import * as tsclass from '@tsclass/tsclass';
|
|
|
|
export const demoFunc = () => html` <style>
|
|
.demo {
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
|
display: block;
|
|
content: '';
|
|
padding: 40px;
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
gap: 24px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
margin-bottom: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.demo-note {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
</style>
|
|
<div class="demo">
|
|
<div class="demo-note">
|
|
Right-click on any detail row to copy the value, key, or key:value combination
|
|
</div>
|
|
<div class="demo-grid">
|
|
<div class="demo-section">
|
|
<div class="demo-title">Service Health Status</div>
|
|
<dees-dataview-statusobject
|
|
.statusObject=${{
|
|
id: '1',
|
|
name: 'API Gateway Service',
|
|
combinedStatus: 'ok',
|
|
combinedStatusText: 'All systems operational',
|
|
details: [
|
|
{
|
|
name: 'Response Time',
|
|
value: '45ms (avg)',
|
|
status: 'ok',
|
|
statusText: 'Within normal range',
|
|
},
|
|
{
|
|
name: 'Uptime',
|
|
value: '99.99% (30 days)',
|
|
status: 'ok',
|
|
statusText: 'Excellent uptime',
|
|
},
|
|
{
|
|
name: 'Active Connections',
|
|
value: '1,234 / 10,000',
|
|
status: 'ok',
|
|
statusText: 'Normal load',
|
|
},
|
|
{
|
|
name: 'SSL Certificate',
|
|
value: 'Valid until 2024-12-31',
|
|
status: 'ok',
|
|
statusText: 'Certificate valid',
|
|
},
|
|
],
|
|
} as tsclass.code.IStatusObject}
|
|
>
|
|
</dees-dataview-statusobject>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<div class="demo-title">Database Cluster Status</div>
|
|
<dees-dataview-statusobject
|
|
.statusObject=${{
|
|
id: '2',
|
|
name: 'PostgreSQL Cluster',
|
|
combinedStatus: 'partly_ok',
|
|
combinedStatusText: 'Minor issues detected',
|
|
details: [
|
|
{
|
|
name: 'Primary Node',
|
|
value: 'db-primary-01 (healthy)',
|
|
status: 'ok',
|
|
statusText: 'Operating normally',
|
|
},
|
|
{
|
|
name: 'Replica Lag',
|
|
value: '2.5 seconds',
|
|
status: 'partly_ok',
|
|
statusText: 'Slightly elevated',
|
|
},
|
|
{
|
|
name: 'Disk Usage',
|
|
value: '78% (312GB / 400GB)',
|
|
status: 'partly_ok',
|
|
statusText: 'Approaching threshold',
|
|
},
|
|
{
|
|
name: 'Connection Pool',
|
|
value: '89 / 100 connections',
|
|
status: 'ok',
|
|
statusText: 'Within limits',
|
|
},
|
|
],
|
|
} as tsclass.code.IStatusObject}
|
|
>
|
|
</dees-dataview-statusobject>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<div class="demo-title">Build Pipeline Status</div>
|
|
<dees-dataview-statusobject
|
|
.statusObject=${{
|
|
id: '3',
|
|
name: 'CI/CD Pipeline',
|
|
combinedStatus: 'not_ok',
|
|
combinedStatusText: 'Build failure',
|
|
details: [
|
|
{
|
|
name: 'Last Build',
|
|
value: 'Build #1234 - Failed',
|
|
status: 'not_ok',
|
|
statusText: 'Test failures',
|
|
},
|
|
{
|
|
name: 'Failed Tests',
|
|
value: '3 tests failed: auth.spec.ts, user.spec.ts, api.spec.ts',
|
|
status: 'not_ok',
|
|
statusText: 'Unit test failures',
|
|
},
|
|
{
|
|
name: 'Code Coverage',
|
|
value: '82.5% (target: 85%)',
|
|
status: 'partly_ok',
|
|
statusText: 'Below target',
|
|
},
|
|
{
|
|
name: 'Build Duration',
|
|
value: '12m 34s',
|
|
status: 'ok',
|
|
statusText: 'Normal duration',
|
|
},
|
|
],
|
|
} as tsclass.code.IStatusObject}
|
|
>
|
|
</dees-dataview-statusobject>
|
|
</div>
|
|
</div>
|
|
</div>`;
|