582 lines
17 KiB
TypeScript
582 lines
17 KiB
TypeScript
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
|
import type { CSSResult, TemplateResult } from './plugins.js';
|
|
import { sharedStyles, panelStyles, tableStyles, buttonStyles } from './sw-dash-styles.js';
|
|
|
|
export interface ITypedRequestLogEntry {
|
|
correlationId: string;
|
|
method: string;
|
|
direction: 'outgoing' | 'incoming';
|
|
phase: 'request' | 'response';
|
|
timestamp: number;
|
|
durationMs?: number;
|
|
payload: any;
|
|
error?: string;
|
|
}
|
|
|
|
export interface ITypedRequestStats {
|
|
totalRequests: number;
|
|
totalResponses: number;
|
|
methodCounts: Record<string, { requests: number; responses: number; errors: number; avgDurationMs: number }>;
|
|
errorCount: number;
|
|
avgDurationMs: number;
|
|
}
|
|
|
|
type TRequestFilter = 'all' | 'outgoing' | 'incoming';
|
|
type TPhaseFilter = 'all' | 'request' | 'response';
|
|
|
|
/**
|
|
* TypedRequest traffic monitoring panel for sw-dash
|
|
*
|
|
* Receives logs, stats, and methods via properties from parent (sw-dash-app).
|
|
* Filtering is done locally.
|
|
* Load more and clear operations dispatch events to parent.
|
|
*/
|
|
@customElement('sw-dash-requests')
|
|
export class SwDashRequests extends LitElement {
|
|
public static styles: CSSResult[] = [
|
|
sharedStyles,
|
|
panelStyles,
|
|
tableStyles,
|
|
buttonStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.requests-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-4);
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.filter-select {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-1) var(--space-2);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.requests-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.request-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.request-card.has-error {
|
|
border-color: var(--accent-error);
|
|
}
|
|
|
|
.request-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: var(--space-2);
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.request-badges {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.badge.direction-outgoing { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
|
|
.badge.direction-incoming { background: rgba(34, 197, 94, 0.15); color: var(--accent-success); }
|
|
.badge.phase-request { background: rgba(251, 191, 36, 0.15); color: var(--accent-warning); }
|
|
.badge.phase-response { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
|
|
.badge.error { background: rgba(239, 68, 68, 0.15); color: var(--accent-error); }
|
|
|
|
.method-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
}
|
|
|
|
.request-meta {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.request-time {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.request-duration {
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.request-duration.slow {
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.request-duration.very-slow {
|
|
color: var(--accent-error);
|
|
}
|
|
|
|
.request-payload {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
background: var(--bg-tertiary);
|
|
padding: var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.request-error {
|
|
font-size: 12px;
|
|
color: var(--accent-error);
|
|
background: rgba(239, 68, 68, 0.1);
|
|
padding: var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
padding: var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-default);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.stat-value.error {
|
|
color: var(--accent-error);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.method-stats {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.method-stats-title {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.method-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.method-stat-card {
|
|
background: var(--bg-tertiary);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
.method-stat-name {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
margin-bottom: var(--space-1);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.method-stat-details {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--space-6);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.clear-btn {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--accent-error);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border-color: var(--accent-error);
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.toggle-payload {
|
|
font-size: 11px;
|
|
color: var(--accent-primary);
|
|
cursor: pointer;
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.toggle-payload:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.correlation-id {
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
}
|
|
`
|
|
];
|
|
|
|
// Received from parent (sw-dash-app)
|
|
@property({ type: Array }) accessor logs: ITypedRequestLogEntry[] = [];
|
|
@property({ type: Number }) accessor totalCount = 0;
|
|
@property({ type: Object }) accessor stats: ITypedRequestStats | null = null;
|
|
@property({ type: Array }) accessor methods: string[] = [];
|
|
|
|
// Local state for filtering
|
|
@state() accessor directionFilter: TRequestFilter = 'all';
|
|
@state() accessor phaseFilter: TPhaseFilter = 'all';
|
|
@state() accessor methodFilter = '';
|
|
@state() accessor searchText = '';
|
|
@state() accessor expandedPayloads: Set<string> = new Set();
|
|
@state() accessor isLoadingMore = false;
|
|
|
|
private handleDirectionFilterChange(e: Event): void {
|
|
this.directionFilter = (e.target as HTMLSelectElement).value as TRequestFilter;
|
|
// Local filtering - no HTTP request
|
|
}
|
|
|
|
private handlePhaseFilterChange(e: Event): void {
|
|
this.phaseFilter = (e.target as HTMLSelectElement).value as TPhaseFilter;
|
|
// Local filtering - no HTTP request
|
|
}
|
|
|
|
private handleMethodFilterChange(e: Event): void {
|
|
this.methodFilter = (e.target as HTMLSelectElement).value;
|
|
// Local filtering - no HTTP request
|
|
}
|
|
|
|
private handleSearch(e: Event): void {
|
|
this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
|
|
}
|
|
|
|
private handleClear(): void {
|
|
if (!confirm('Are you sure you want to clear the request logs? This cannot be undone.')) {
|
|
return;
|
|
}
|
|
// Dispatch event to parent to clear via DeesComms
|
|
this.dispatchEvent(new CustomEvent('clear-requests', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
private loadMore(): void {
|
|
if (this.isLoadingMore || this.logs.length === 0) return;
|
|
|
|
this.isLoadingMore = true;
|
|
const oldestLog = this.logs[this.logs.length - 1];
|
|
|
|
// Dispatch event to parent to load more via DeesComms
|
|
this.dispatchEvent(new CustomEvent('load-more-requests', {
|
|
detail: {
|
|
before: oldestLog.timestamp,
|
|
method: this.methodFilter || undefined,
|
|
},
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
|
|
// Reset loading state after a short delay (parent will update logs prop)
|
|
setTimeout(() => {
|
|
this.isLoadingMore = false;
|
|
}, 1000);
|
|
}
|
|
|
|
private togglePayload(correlationId: string): void {
|
|
const newSet = new Set(this.expandedPayloads);
|
|
if (newSet.has(correlationId)) {
|
|
newSet.delete(correlationId);
|
|
} else {
|
|
newSet.add(correlationId);
|
|
}
|
|
this.expandedPayloads = newSet;
|
|
}
|
|
|
|
private formatTimestamp(ts: number): string {
|
|
const date = new Date(ts);
|
|
return date.toLocaleTimeString(undefined, {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
fractionalSecondDigits: 3
|
|
});
|
|
}
|
|
|
|
private getDurationClass(durationMs: number | undefined): string {
|
|
if (!durationMs) return '';
|
|
if (durationMs > 5000) return 'very-slow';
|
|
if (durationMs > 1000) return 'slow';
|
|
return '';
|
|
}
|
|
|
|
private formatDuration(durationMs: number | undefined): string {
|
|
if (!durationMs) return '';
|
|
if (durationMs < 1000) return `${durationMs}ms`;
|
|
return `${(durationMs / 1000).toFixed(2)}s`;
|
|
}
|
|
|
|
/**
|
|
* Filter logs locally based on direction, phase, method, and search text
|
|
*/
|
|
private getFilteredLogs(): ITypedRequestLogEntry[] {
|
|
let result = this.logs;
|
|
|
|
// Apply direction filter
|
|
if (this.directionFilter !== 'all') {
|
|
result = result.filter(l => l.direction === this.directionFilter);
|
|
}
|
|
|
|
// Apply phase filter
|
|
if (this.phaseFilter !== 'all') {
|
|
result = result.filter(l => l.phase === this.phaseFilter);
|
|
}
|
|
|
|
// Apply method filter
|
|
if (this.methodFilter) {
|
|
result = result.filter(l => l.method === this.methodFilter);
|
|
}
|
|
|
|
// Apply search
|
|
if (this.searchText) {
|
|
result = result.filter(l =>
|
|
l.method.toLowerCase().includes(this.searchText) ||
|
|
l.correlationId.toLowerCase().includes(this.searchText) ||
|
|
(l.error && l.error.toLowerCase().includes(this.searchText)) ||
|
|
JSON.stringify(l.payload).toLowerCase().includes(this.searchText)
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
const filteredLogs = this.getFilteredLogs();
|
|
|
|
return html`
|
|
<!-- Stats Bar -->
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<span class="stat-value">${this.stats?.totalRequests ?? 0}</span>
|
|
<span class="stat-label">Total Requests</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value">${this.stats?.totalResponses ?? 0}</span>
|
|
<span class="stat-label">Total Responses</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value ${(this.stats?.errorCount ?? 0) > 0 ? 'error' : ''}">${this.stats?.errorCount ?? 0}</span>
|
|
<span class="stat-label">Errors</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value">${this.stats?.avgDurationMs ?? 0}ms</span>
|
|
<span class="stat-label">Avg Duration</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value">${filteredLogs.length}</span>
|
|
<span class="stat-label">Showing</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Method Stats -->
|
|
${this.stats && Object.keys(this.stats.methodCounts).length > 0 ? html`
|
|
<div class="method-stats">
|
|
<div class="method-stats-title">Methods</div>
|
|
<div class="method-stats-grid">
|
|
${Object.entries(this.stats.methodCounts).slice(0, 8).map(([method, data]) => html`
|
|
<div class="method-stat-card">
|
|
<div class="method-stat-name" title="${method}">${method}</div>
|
|
<div class="method-stat-details">
|
|
<span>${data.requests} req</span>
|
|
<span>${data.responses} res</span>
|
|
${data.errors > 0 ? html`<span style="color: var(--accent-error)">${data.errors} err</span>` : ''}
|
|
<span>${data.avgDurationMs}ms avg</span>
|
|
</div>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<!-- Filters -->
|
|
<div class="requests-header">
|
|
<div class="filter-group">
|
|
<span class="filter-label">Direction:</span>
|
|
<select class="filter-select" @change="${this.handleDirectionFilterChange}">
|
|
<option value="all">All</option>
|
|
<option value="outgoing">Outgoing</option>
|
|
<option value="incoming">Incoming</option>
|
|
</select>
|
|
|
|
<span class="filter-label">Phase:</span>
|
|
<select class="filter-select" @change="${this.handlePhaseFilterChange}">
|
|
<option value="all">All</option>
|
|
<option value="request">Request</option>
|
|
<option value="response">Response</option>
|
|
</select>
|
|
|
|
<span class="filter-label">Method:</span>
|
|
<select class="filter-select" @change="${this.handleMethodFilterChange}">
|
|
<option value="">All Methods</option>
|
|
${this.methods.map(m => html`<option value="${m}">${m}</option>`)}
|
|
</select>
|
|
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
placeholder="Search..."
|
|
.value="${this.searchText}"
|
|
@input="${this.handleSearch}"
|
|
style="width: 150px;"
|
|
>
|
|
</div>
|
|
<button class="btn clear-btn" @click="${this.handleClear}">Clear Logs</button>
|
|
</div>
|
|
|
|
<!-- Request List -->
|
|
${this.logs.length === 0 ? html`
|
|
<div class="empty-state">No request logs found. Traffic will appear here as TypedRequests are made.</div>
|
|
` : filteredLogs.length === 0 ? html`
|
|
<div class="empty-state">No logs match filter</div>
|
|
` : html`
|
|
<div class="requests-list">
|
|
${filteredLogs.map(log => html`
|
|
<div class="request-card ${log.error ? 'has-error' : ''}">
|
|
<div class="request-header">
|
|
<div>
|
|
<div class="request-badges">
|
|
<span class="badge direction-${log.direction}">${log.direction}</span>
|
|
<span class="badge phase-${log.phase}">${log.phase}</span>
|
|
${log.error ? html`<span class="badge error">error</span>` : ''}
|
|
</div>
|
|
<div class="method-name">${log.method}</div>
|
|
<div class="correlation-id">${log.correlationId}</div>
|
|
</div>
|
|
<div class="request-meta">
|
|
<span class="request-time">${this.formatTimestamp(log.timestamp)}</span>
|
|
${log.durationMs !== undefined ? html`
|
|
<span class="request-duration ${this.getDurationClass(log.durationMs)}">
|
|
${this.formatDuration(log.durationMs)}
|
|
</span>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
${log.error ? html`
|
|
<div class="request-error">${log.error}</div>
|
|
` : ''}
|
|
|
|
<div class="toggle-payload" @click="${() => this.togglePayload(log.correlationId)}">
|
|
${this.expandedPayloads.has(log.correlationId) ? 'Hide payload' : 'Show payload'}
|
|
</div>
|
|
|
|
${this.expandedPayloads.has(log.correlationId) ? html`
|
|
<div class="request-payload">${JSON.stringify(log.payload, null, 2)}</div>
|
|
` : ''}
|
|
</div>
|
|
`)}
|
|
</div>
|
|
|
|
${this.logs.length < this.totalCount ? html`
|
|
<div class="pagination">
|
|
<button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoadingMore}">
|
|
${this.isLoadingMore ? 'Loading...' : 'Load More'}
|
|
</button>
|
|
<span class="page-info">${this.logs.length} of ${this.totalCount} logs</span>
|
|
</div>
|
|
` : ''}
|
|
`}
|
|
`;
|
|
}
|
|
}
|