feat(streaming): add real-time streaming (MongoDB change streams & S3 bucket watchers) with WebSocket subscriptions and activity stream UI
This commit is contained in:
561
ts_web/elements/tsview-activity-stream.ts
Normal file
561
ts_web/elements/tsview-activity-stream.ts
Normal file
@@ -0,0 +1,561 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { changeStreamService, type IActivityEvent, type IMongoChangeEvent, type IS3ChangeEvent } from '../services/index.js';
|
||||
import { themeStyles } from '../styles/index.js';
|
||||
|
||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
||||
|
||||
type TFilterMode = 'all' | 'mongodb' | 's3';
|
||||
|
||||
@customElement('tsview-activity-stream')
|
||||
export class TsviewActivityStream extends DeesElement {
|
||||
@state()
|
||||
private accessor events: IActivityEvent[] = [];
|
||||
|
||||
@state()
|
||||
private accessor filterMode: TFilterMode = 'all';
|
||||
|
||||
@state()
|
||||
private accessor isConnected: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor isLoading: boolean = true;
|
||||
|
||||
@state()
|
||||
private accessor autoScroll: boolean = true;
|
||||
|
||||
private subscription: plugins.smartrx.rxjs.Subscription | null = null;
|
||||
private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
themeStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.activity-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
.status-dot.disconnected {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.status-dot.connecting {
|
||||
background: #f59e0b;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #888;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.filter-tab:hover {
|
||||
border-color: #666;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #666;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.auto-scroll-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auto-scroll-toggle input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-icon.mongodb {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.event-icon.s3 {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.event-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.event-details {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.event-type {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.event-type.insert, .event-type.add {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.event-type.update, .event-type.modify {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.event-type.delete {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.event-type.replace {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
color: #c084fc;
|
||||
}
|
||||
|
||||
.event-type.drop, .event-type.invalidate {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.event-path {
|
||||
color: #aaa;
|
||||
word-break: break-all;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.initializeStreaming();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.cleanup();
|
||||
}
|
||||
|
||||
private async initializeStreaming() {
|
||||
this.isLoading = true;
|
||||
|
||||
try {
|
||||
// Connect to WebSocket if not connected
|
||||
await changeStreamService.connect();
|
||||
|
||||
// Subscribe to connection status
|
||||
this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
|
||||
this.isConnected = status === 'connected';
|
||||
});
|
||||
|
||||
// Subscribe to activity stream
|
||||
await changeStreamService.subscribeToActivity();
|
||||
|
||||
// Load recent events
|
||||
const recentEvents = await changeStreamService.getRecentActivity(100);
|
||||
this.events = recentEvents;
|
||||
|
||||
// Subscribe to new events
|
||||
this.subscription = changeStreamService.getActivityStream().subscribe((event) => {
|
||||
this.events = [...this.events, event].slice(-500); // Keep last 500 events
|
||||
|
||||
// Auto-scroll if enabled
|
||||
if (this.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
|
||||
this.isConnected = true;
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize activity stream:', error);
|
||||
this.isConnected = false;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
private cleanup() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
this.subscription = null;
|
||||
}
|
||||
if (this.connectionSubscription) {
|
||||
this.connectionSubscription.unsubscribe();
|
||||
this.connectionSubscription = null;
|
||||
}
|
||||
changeStreamService.unsubscribeFromActivity();
|
||||
}
|
||||
|
||||
private scrollToBottom() {
|
||||
requestAnimationFrame(() => {
|
||||
const list = this.shadowRoot?.querySelector('.events-list');
|
||||
if (list) {
|
||||
list.scrollTop = list.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private setFilterMode(mode: TFilterMode) {
|
||||
this.filterMode = mode;
|
||||
}
|
||||
|
||||
private toggleAutoScroll() {
|
||||
this.autoScroll = !this.autoScroll;
|
||||
}
|
||||
|
||||
private get filteredEvents(): IActivityEvent[] {
|
||||
if (this.filterMode === 'all') {
|
||||
return this.events;
|
||||
}
|
||||
return this.events.filter((e) => e.source === this.filterMode);
|
||||
}
|
||||
|
||||
private formatTime(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
private formatRelativeTime(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) {
|
||||
return 'just now';
|
||||
} else if (diff < 3600000) {
|
||||
const mins = Math.floor(diff / 60000);
|
||||
return `${mins}m ago`;
|
||||
} else if (diff < 86400000) {
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
return `${hours}h ago`;
|
||||
} else {
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
}
|
||||
|
||||
private getEventTitle(event: IActivityEvent): string {
|
||||
if (event.source === 'mongodb') {
|
||||
const mongoEvent = event.event as IMongoChangeEvent;
|
||||
return `${mongoEvent.database}.${mongoEvent.collection}`;
|
||||
} else {
|
||||
const s3Event = event.event as IS3ChangeEvent;
|
||||
return s3Event.bucket;
|
||||
}
|
||||
}
|
||||
|
||||
private getEventDetails(event: IActivityEvent): string {
|
||||
if (event.source === 'mongodb') {
|
||||
const mongoEvent = event.event as IMongoChangeEvent;
|
||||
if (mongoEvent.documentId) {
|
||||
return `Document: ${mongoEvent.documentId}`;
|
||||
}
|
||||
return '';
|
||||
} else {
|
||||
const s3Event = event.event as IS3ChangeEvent;
|
||||
return s3Event.key;
|
||||
}
|
||||
}
|
||||
|
||||
private getEventType(event: IActivityEvent): string {
|
||||
return event.event.type;
|
||||
}
|
||||
|
||||
private handleEventClick(event: IActivityEvent) {
|
||||
// Dispatch navigation event
|
||||
if (event.source === 'mongodb') {
|
||||
const mongoEvent = event.event as IMongoChangeEvent;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('navigate-to-mongo', {
|
||||
detail: {
|
||||
database: mongoEvent.database,
|
||||
collection: mongoEvent.collection,
|
||||
documentId: mongoEvent.documentId,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
const s3Event = event.event as IS3ChangeEvent;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('navigate-to-s3', {
|
||||
detail: {
|
||||
bucket: s3Event.bucket,
|
||||
key: s3Event.key,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private renderMongoIcon() {
|
||||
return html`
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
||||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
|
||||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderS3Icon() {
|
||||
return html`
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
private getConnectionStatusText(): string {
|
||||
if (this.isConnected) {
|
||||
return 'Live';
|
||||
}
|
||||
return 'Disconnected';
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="activity-container">
|
||||
<div class="header">
|
||||
<div class="header-title">
|
||||
Activity Stream
|
||||
<div class="connection-status">
|
||||
<span class="status-dot ${this.isConnected ? 'connected' : 'disconnected'}"></span>
|
||||
${this.getConnectionStatusText()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<div class="filter-tabs">
|
||||
<button
|
||||
class="filter-tab ${this.filterMode === 'all' ? 'active' : ''}"
|
||||
@click=${() => this.setFilterMode('all')}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
class="filter-tab ${this.filterMode === 'mongodb' ? 'active' : ''}"
|
||||
@click=${() => this.setFilterMode('mongodb')}
|
||||
>
|
||||
MongoDB
|
||||
</button>
|
||||
<button
|
||||
class="filter-tab ${this.filterMode === 's3' ? 'active' : ''}"
|
||||
@click=${() => this.setFilterMode('s3')}
|
||||
>
|
||||
S3
|
||||
</button>
|
||||
</div>
|
||||
<label class="auto-scroll-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
.checked=${this.autoScroll}
|
||||
@change=${this.toggleAutoScroll}
|
||||
/>
|
||||
Auto-scroll
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="events-list">
|
||||
${this.isLoading
|
||||
? html`<div class="loading-state">Connecting to activity stream...</div>`
|
||||
: this.filteredEvents.length === 0
|
||||
? html`
|
||||
<div class="empty-state">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
||||
</svg>
|
||||
<p>No activity yet. Changes will appear here in real-time.</p>
|
||||
</div>
|
||||
`
|
||||
: this.filteredEvents.map(
|
||||
(event) => html`
|
||||
<div class="event-item" @click=${() => this.handleEventClick(event)}>
|
||||
<div class="event-icon ${event.source}">
|
||||
${event.source === 'mongodb' ? this.renderMongoIcon() : this.renderS3Icon()}
|
||||
</div>
|
||||
<div class="event-content">
|
||||
<div class="event-header">
|
||||
<div class="event-title">
|
||||
<span class="event-type ${this.getEventType(event)}">${this.getEventType(event)}</span>
|
||||
${this.getEventTitle(event)}
|
||||
</div>
|
||||
<div class="event-time" title=${this.formatTime(event.timestamp)}>
|
||||
${this.formatRelativeTime(event.timestamp)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-details">
|
||||
<span class="event-path">${this.getEventDetails(event)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user