feat(streaming): add real-time streaming (MongoDB change streams & S3 bucket watchers) with WebSocket subscriptions and activity stream UI
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@git.zone/tsview',
|
||||
version: '1.4.0',
|
||||
version: '1.5.0',
|
||||
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
|
||||
}
|
||||
|
||||
@@ -14,3 +14,6 @@ export * from './tsview-mongo-documents.js';
|
||||
export * from './tsview-mongo-document.js';
|
||||
export * from './tsview-mongo-indexes.js';
|
||||
export * from './tsview-mongo-db-overview.js';
|
||||
|
||||
// Activity stream component
|
||||
export * from './tsview-activity-stream.js';
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { apiService } from '../services/index.js';
|
||||
import { apiService, changeStreamService } from '../services/index.js';
|
||||
import { themeStyles } from '../styles/index.js';
|
||||
|
||||
const { html, css, cssManager, customElement, state, DeesElement } = plugins;
|
||||
const { DeesContextmenu } = plugins.deesCatalog;
|
||||
|
||||
type TViewMode = 's3' | 'mongo' | 'settings';
|
||||
type TViewMode = 's3' | 'mongo' | 'activity' | 'settings';
|
||||
|
||||
@customElement('tsview-app')
|
||||
export class TsviewApp extends DeesElement {
|
||||
@@ -422,6 +422,17 @@ export class TsviewApp extends DeesElement {
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadData();
|
||||
// Initialize WebSocket connection for real-time updates
|
||||
this.initializeChangeStream();
|
||||
}
|
||||
|
||||
private async initializeChangeStream() {
|
||||
try {
|
||||
await changeStreamService.connect();
|
||||
console.log('[TsviewApp] ChangeStream connected');
|
||||
} catch (error) {
|
||||
console.warn('[TsviewApp] Failed to connect to ChangeStream:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private async loadData() {
|
||||
@@ -729,6 +740,12 @@ export class TsviewApp extends DeesElement {
|
||||
>
|
||||
MongoDB
|
||||
</button>
|
||||
<button
|
||||
class="nav-tab ${this.viewMode === 'activity' ? 'active' : ''}"
|
||||
@click=${() => this.setViewMode('activity')}
|
||||
>
|
||||
Activity
|
||||
</button>
|
||||
<button
|
||||
class="nav-tab ${this.viewMode === 'settings' ? 'active' : ''}"
|
||||
@click=${() => this.setViewMode('settings')}
|
||||
@@ -940,6 +957,19 @@ export class TsviewApp extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.viewMode === 'activity') {
|
||||
return html`
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">Activity Stream</div>
|
||||
<div class="sidebar-list">
|
||||
<div class="sidebar-item" style="color: #888; font-size: 12px; cursor: default;">
|
||||
Real-time changes from MongoDB and S3 appear here automatically.
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">Settings</div>
|
||||
@@ -1048,6 +1078,17 @@ export class TsviewApp extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.viewMode === 'activity') {
|
||||
return html`
|
||||
<div class="content-area" style="padding: 0;">
|
||||
<tsview-activity-stream
|
||||
@navigate-to-mongo=${this.handleNavigateToMongo}
|
||||
@navigate-to-s3=${this.handleNavigateToS3}
|
||||
></tsview-activity-stream>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="content-area">
|
||||
<h2>Settings</h2>
|
||||
@@ -1055,4 +1096,21 @@ export class TsviewApp extends DeesElement {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleNavigateToMongo(e: CustomEvent) {
|
||||
const { database, collection, documentId } = e.detail;
|
||||
this.viewMode = 'mongo';
|
||||
this.selectedDatabase = database;
|
||||
this.selectedCollection = collection;
|
||||
// If documentId is provided, we could potentially scroll to or highlight that document
|
||||
// For now, just navigate to the collection
|
||||
}
|
||||
|
||||
private handleNavigateToS3(e: CustomEvent) {
|
||||
const { bucket, key } = e.detail;
|
||||
this.viewMode = 's3';
|
||||
this.selectedBucket = bucket;
|
||||
// The S3 browser will need to be updated to navigate to the specific key
|
||||
// For now, just navigate to the bucket
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { apiService, type ICollectionStats } from '../services/index.js';
|
||||
import { apiService, changeStreamService, type ICollectionStats, type IMongoChangeEvent } from '../services/index.js';
|
||||
import { formatSize, formatCount } from '../utilities/index.js';
|
||||
import { themeStyles } from '../styles/index.js';
|
||||
|
||||
@@ -30,6 +30,14 @@ export class TsviewMongoBrowser extends DeesElement {
|
||||
@state()
|
||||
private accessor isResizingEditor: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor recentChangeCount: number = 0;
|
||||
|
||||
@state()
|
||||
private accessor isStreamConnected: boolean = false;
|
||||
|
||||
private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
themeStyles,
|
||||
@@ -148,18 +156,114 @@ export class TsviewMongoBrowser extends DeesElement {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.change-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.change-indicator.pulse {
|
||||
animation: pulse-green 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0% { background: rgba(34, 197, 94, 0.4); }
|
||||
100% { background: rgba(34, 197, 94, 0.2); }
|
||||
}
|
||||
|
||||
.stream-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.stream-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.stream-dot.connected {
|
||||
background: #22c55e;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadStats();
|
||||
this.subscribeToChanges();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.unsubscribeFromChanges();
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has('databaseName') || changedProperties.has('collectionName')) {
|
||||
this.loadStats();
|
||||
this.selectedDocumentId = '';
|
||||
this.recentChangeCount = 0;
|
||||
// Re-subscribe to the new collection
|
||||
this.unsubscribeFromChanges();
|
||||
this.subscribeToChanges();
|
||||
}
|
||||
}
|
||||
|
||||
private async subscribeToChanges() {
|
||||
if (!this.databaseName || !this.collectionName) return;
|
||||
|
||||
try {
|
||||
// Subscribe to collection changes
|
||||
const success = await changeStreamService.subscribeToCollection(this.databaseName, this.collectionName);
|
||||
this.isStreamConnected = success;
|
||||
|
||||
if (success) {
|
||||
// Listen for changes
|
||||
this.changeSubscription = changeStreamService
|
||||
.getCollectionChanges(this.databaseName, this.collectionName)
|
||||
.subscribe((event) => {
|
||||
this.handleChange(event);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('[MongoBrowser] Failed to subscribe to changes:', error);
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
}
|
||||
|
||||
private unsubscribeFromChanges() {
|
||||
if (this.changeSubscription) {
|
||||
this.changeSubscription.unsubscribe();
|
||||
this.changeSubscription = null;
|
||||
}
|
||||
if (this.databaseName && this.collectionName) {
|
||||
changeStreamService.unsubscribeFromCollection(this.databaseName, this.collectionName);
|
||||
}
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
|
||||
private handleChange(event: IMongoChangeEvent) {
|
||||
console.log('[MongoBrowser] Received change:', event);
|
||||
this.recentChangeCount++;
|
||||
|
||||
// Refresh stats to reflect changes
|
||||
this.loadStats();
|
||||
|
||||
// Notify the documents component to refresh
|
||||
const documentsEl = this.shadowRoot?.querySelector('tsview-mongo-documents') as any;
|
||||
if (documentsEl?.refresh) {
|
||||
documentsEl.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,6 +323,17 @@ export class TsviewMongoBrowser extends DeesElement {
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
<div class="stream-status">
|
||||
<span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
|
||||
${this.isStreamConnected ? 'Live' : 'Offline'}
|
||||
</div>
|
||||
${this.recentChangeCount > 0
|
||||
? html`
|
||||
<div class="change-indicator pulse">
|
||||
${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
|
||||
@@ -259,6 +259,13 @@ export class TsviewMongoDocuments extends DeesElement {
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Public method to refresh documents (called by parent on change events)
|
||||
*/
|
||||
public async refresh() {
|
||||
await this.loadDocuments();
|
||||
}
|
||||
|
||||
private handleFilterInput(e: Event) {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { apiService } from '../services/index.js';
|
||||
import { apiService, changeStreamService, type IS3ChangeEvent } from '../services/index.js';
|
||||
import { themeStyles } from '../styles/index.js';
|
||||
|
||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
||||
@@ -29,6 +29,14 @@ export class TsviewS3Browser extends DeesElement {
|
||||
@state()
|
||||
private accessor isResizingPreview: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor recentChangeCount: number = 0;
|
||||
|
||||
@state()
|
||||
private accessor isStreamConnected: boolean = false;
|
||||
|
||||
private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
themeStyles,
|
||||
@@ -154,9 +162,61 @@ export class TsviewS3Browser extends DeesElement {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stream-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-left: auto;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.stream-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.stream-dot.connected {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.change-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #f59e0b;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.change-indicator.pulse {
|
||||
animation: pulse-orange 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-orange {
|
||||
0% { background: rgba(245, 158, 11, 0.4); }
|
||||
100% { background: rgba(245, 158, 11, 0.2); }
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.subscribeToChanges();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.unsubscribeFromChanges();
|
||||
}
|
||||
|
||||
private setViewType(type: TViewType) {
|
||||
this.viewType = type;
|
||||
}
|
||||
@@ -185,9 +245,54 @@ export class TsviewS3Browser extends DeesElement {
|
||||
// Clear selection when bucket changes
|
||||
this.selectedKey = '';
|
||||
this.currentPrefix = '';
|
||||
this.recentChangeCount = 0;
|
||||
// Re-subscribe to the new bucket
|
||||
this.unsubscribeFromChanges();
|
||||
this.subscribeToChanges();
|
||||
}
|
||||
}
|
||||
|
||||
private async subscribeToChanges() {
|
||||
if (!this.bucketName) return;
|
||||
|
||||
try {
|
||||
// Subscribe to bucket changes (with optional prefix)
|
||||
const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
|
||||
this.isStreamConnected = success;
|
||||
|
||||
if (success) {
|
||||
// Listen for changes
|
||||
this.changeSubscription = changeStreamService
|
||||
.getBucketChanges(this.bucketName, this.currentPrefix || undefined)
|
||||
.subscribe((event) => {
|
||||
this.handleChange(event);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('[S3Browser] Failed to subscribe to changes:', error);
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
}
|
||||
|
||||
private unsubscribeFromChanges() {
|
||||
if (this.changeSubscription) {
|
||||
this.changeSubscription.unsubscribe();
|
||||
this.changeSubscription = null;
|
||||
}
|
||||
if (this.bucketName) {
|
||||
changeStreamService.unsubscribeFromBucket(this.bucketName, this.currentPrefix || undefined);
|
||||
}
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
|
||||
private handleChange(event: IS3ChangeEvent) {
|
||||
console.log('[S3Browser] Received change:', event);
|
||||
this.recentChangeCount++;
|
||||
|
||||
// Trigger refresh of child components
|
||||
this.refreshKey++;
|
||||
}
|
||||
|
||||
private startPreviewResize = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
this.isResizingPreview = true;
|
||||
@@ -239,6 +344,17 @@ export class TsviewS3Browser extends DeesElement {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div class="stream-status">
|
||||
<span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
|
||||
${this.isStreamConnected ? 'Live' : 'Offline'}
|
||||
</div>
|
||||
${this.recentChangeCount > 0
|
||||
? html`
|
||||
<div class="change-indicator pulse">
|
||||
${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
|
||||
|
||||
@@ -256,10 +256,15 @@ export class TsviewS3Preview extends DeesElement {
|
||||
|
||||
try {
|
||||
const result = await apiService.getObject(this.bucketName, this.objectKey);
|
||||
this.content = result.content;
|
||||
this.contentType = result.contentType;
|
||||
this.size = result.size;
|
||||
this.lastModified = result.lastModified;
|
||||
if (!result) {
|
||||
this.error = 'Object not found';
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.content = result.content || '';
|
||||
this.contentType = result.contentType || '';
|
||||
this.size = result.size || 0;
|
||||
this.lastModified = result.lastModified || '';
|
||||
|
||||
// For text files, decode and store original content
|
||||
if (this.isText()) {
|
||||
|
||||
@@ -18,4 +18,9 @@ export const DeesElement = deesElement.DeesElement;
|
||||
|
||||
// @api.global scope
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
export { typedrequest };
|
||||
import * as typedsocket from '@api.global/typedsocket';
|
||||
export { typedrequest, typedsocket };
|
||||
|
||||
// @push.rocks scope
|
||||
import * as smartrx from '@push.rocks/smartrx';
|
||||
export { smartrx };
|
||||
|
||||
521
ts_web/services/changestream.service.ts
Normal file
521
ts_web/services/changestream.service.ts
Normal file
@@ -0,0 +1,521 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
/**
|
||||
* MongoDB change event
|
||||
*/
|
||||
export interface IMongoChangeEvent {
|
||||
type: 'insert' | 'update' | 'delete' | 'replace' | 'drop' | 'invalidate';
|
||||
database: string;
|
||||
collection: string;
|
||||
documentId?: string;
|
||||
document?: Record<string, unknown>;
|
||||
updateDescription?: {
|
||||
updatedFields?: Record<string, unknown>;
|
||||
removedFields?: string[];
|
||||
};
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* S3 change event
|
||||
*/
|
||||
export interface IS3ChangeEvent {
|
||||
type: 'add' | 'modify' | 'delete';
|
||||
key: string;
|
||||
size?: number;
|
||||
etag?: string;
|
||||
lastModified?: Date;
|
||||
bucket: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Combined activity event
|
||||
*/
|
||||
export interface IActivityEvent {
|
||||
id: string;
|
||||
source: 'mongodb' | 's3';
|
||||
event: IMongoChangeEvent | IS3ChangeEvent;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscription info tracked by the service
|
||||
*/
|
||||
interface ISubscription {
|
||||
type: 'mongo' | 's3' | 'activity';
|
||||
key: string; // "db/collection" or "bucket/prefix" or "activity"
|
||||
subscriptionId: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* ChangeStreamService manages real-time change subscriptions from the browser.
|
||||
*
|
||||
* Features:
|
||||
* - WebSocket connection via TypedSocket
|
||||
* - Automatic reconnection with subscription restoration
|
||||
* - RxJS Subjects for reactive UI updates
|
||||
* - Subscription lifecycle management
|
||||
*/
|
||||
export class ChangeStreamService {
|
||||
private typedSocket: plugins.typedsocket.TypedSocket | null = null;
|
||||
private isConnected = false;
|
||||
private isConnecting = false;
|
||||
private subscriptions: Map<string, ISubscription> = new Map();
|
||||
|
||||
// RxJS Subjects for UI components
|
||||
public readonly mongoChanges$ = new plugins.smartrx.rxjs.Subject<IMongoChangeEvent>();
|
||||
public readonly s3Changes$ = new plugins.smartrx.rxjs.Subject<IS3ChangeEvent>();
|
||||
public readonly activityEvents$ = new plugins.smartrx.rxjs.Subject<IActivityEvent>();
|
||||
public readonly connectionStatus$ = new plugins.smartrx.rxjs.ReplaySubject<'connected' | 'disconnected' | 'connecting'>(1);
|
||||
|
||||
constructor() {
|
||||
// Emit initial disconnected status
|
||||
this.connectionStatus$.next('disconnected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to the WebSocket server
|
||||
*/
|
||||
public async connect(): Promise<void> {
|
||||
if (this.isConnected || this.isConnecting) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isConnecting = true;
|
||||
this.connectionStatus$.next('connecting');
|
||||
|
||||
try {
|
||||
// Create client router to handle server-initiated pushes
|
||||
const clientRouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
// Register handlers for server push events
|
||||
this.registerPushHandlers(clientRouter);
|
||||
|
||||
// Connect to WebSocket server using current origin
|
||||
this.typedSocket = await plugins.typedsocket.TypedSocket.createClient(
|
||||
clientRouter,
|
||||
plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl()
|
||||
);
|
||||
|
||||
this.isConnected = true;
|
||||
this.isConnecting = false;
|
||||
this.connectionStatus$.next('connected');
|
||||
|
||||
console.log('[ChangeStream] WebSocket connected');
|
||||
|
||||
// Handle reconnection events via statusSubject
|
||||
this.typedSocket.statusSubject.subscribe((status) => {
|
||||
if (status === 'disconnected') {
|
||||
this.handleDisconnect();
|
||||
} else if (status === 'connected') {
|
||||
this.handleReconnect();
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
this.isConnecting = false;
|
||||
this.connectionStatus$.next('disconnected');
|
||||
console.error('[ChangeStream] Failed to connect:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect from the WebSocket server
|
||||
*/
|
||||
public async disconnect(): Promise<void> {
|
||||
if (!this.typedSocket) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.typedSocket.stop();
|
||||
} catch (error) {
|
||||
console.error('[ChangeStream] Error during disconnect:', error);
|
||||
}
|
||||
|
||||
this.typedSocket = null;
|
||||
this.isConnected = false;
|
||||
this.subscriptions.clear();
|
||||
this.connectionStatus$.next('disconnected');
|
||||
|
||||
console.log('[ChangeStream] WebSocket disconnected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Register handlers for server push events
|
||||
*/
|
||||
private registerPushHandlers(router: plugins.typedrequest.TypedRouter): void {
|
||||
// Handle MongoDB change push
|
||||
router.addTypedHandler(
|
||||
new plugins.typedrequest.TypedHandler<any>(
|
||||
'pushMongoChange',
|
||||
async (data: { event: IMongoChangeEvent }) => {
|
||||
this.mongoChanges$.next(data.event);
|
||||
return { received: true };
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// Handle S3 change push
|
||||
router.addTypedHandler(
|
||||
new plugins.typedrequest.TypedHandler<any>(
|
||||
'pushS3Change',
|
||||
async (data: { event: IS3ChangeEvent }) => {
|
||||
this.s3Changes$.next(data.event);
|
||||
return { received: true };
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// Handle activity event push
|
||||
router.addTypedHandler(
|
||||
new plugins.typedrequest.TypedHandler<any>(
|
||||
'pushActivityEvent',
|
||||
async (data: { event: IActivityEvent }) => {
|
||||
this.activityEvents$.next(data.event);
|
||||
return { received: true };
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle WebSocket disconnection
|
||||
*/
|
||||
private handleDisconnect(): void {
|
||||
this.isConnected = false;
|
||||
this.connectionStatus$.next('disconnected');
|
||||
console.log('[ChangeStream] WebSocket disconnected, waiting for reconnect...');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle WebSocket reconnection - restore all subscriptions
|
||||
*/
|
||||
private async handleReconnect(): Promise<void> {
|
||||
this.isConnected = true;
|
||||
this.connectionStatus$.next('connected');
|
||||
console.log('[ChangeStream] WebSocket reconnected, restoring subscriptions...');
|
||||
|
||||
// Restore all subscriptions
|
||||
const subscriptionsToRestore = Array.from(this.subscriptions.values());
|
||||
this.subscriptions.clear();
|
||||
|
||||
for (const sub of subscriptionsToRestore) {
|
||||
try {
|
||||
if (sub.type === 'mongo') {
|
||||
const [database, collection] = sub.key.split('/');
|
||||
await this.subscribeToCollection(database, collection);
|
||||
} else if (sub.type === 's3') {
|
||||
const parts = sub.key.split('/');
|
||||
const bucket = parts[0];
|
||||
const prefix = parts.slice(1).join('/') || undefined;
|
||||
await this.subscribeToBucket(bucket, prefix);
|
||||
} else if (sub.type === 'activity') {
|
||||
await this.subscribeToActivity();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[ChangeStream] Failed to restore subscription ${sub.key}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
// MongoDB Subscriptions
|
||||
// ===========================================
|
||||
|
||||
/**
|
||||
* Subscribe to changes in a MongoDB collection
|
||||
*/
|
||||
public async subscribeToCollection(database: string, collection: string): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
console.warn('[ChangeStream] Not connected, cannot subscribe');
|
||||
return false;
|
||||
}
|
||||
|
||||
const key = `${database}/${collection}`;
|
||||
|
||||
// Check if already subscribed
|
||||
if (this.subscriptions.has(`mongo:${key}`)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('subscribeMongo');
|
||||
const response = await request.fire({ database, collection });
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.set(`mongo:${key}`, {
|
||||
type: 'mongo',
|
||||
key,
|
||||
subscriptionId: response.subscriptionId,
|
||||
});
|
||||
console.log(`[ChangeStream] Subscribed to MongoDB ${key}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error(`[ChangeStream] Failed to subscribe to MongoDB ${key}:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from changes in a MongoDB collection
|
||||
*/
|
||||
public async unsubscribeFromCollection(database: string, collection: string): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const key = `${database}/${collection}`;
|
||||
const subKey = `mongo:${key}`;
|
||||
|
||||
if (!this.subscriptions.has(subKey)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('unsubscribeMongo');
|
||||
const response = await request.fire({ database, collection });
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.delete(subKey);
|
||||
console.log(`[ChangeStream] Unsubscribed from MongoDB ${key}`);
|
||||
}
|
||||
|
||||
return response.success;
|
||||
} catch (error) {
|
||||
console.error(`[ChangeStream] Failed to unsubscribe from MongoDB ${key}:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if subscribed to a MongoDB collection
|
||||
*/
|
||||
public isSubscribedToCollection(database: string, collection: string): boolean {
|
||||
return this.subscriptions.has(`mongo:${database}/${collection}`);
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
// S3 Subscriptions
|
||||
// ===========================================
|
||||
|
||||
/**
|
||||
* Subscribe to changes in an S3 bucket/prefix
|
||||
*/
|
||||
public async subscribeToBucket(bucket: string, prefix?: string): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
console.warn('[ChangeStream] Not connected, cannot subscribe');
|
||||
return false;
|
||||
}
|
||||
|
||||
const key = prefix ? `${bucket}/${prefix}` : bucket;
|
||||
|
||||
// Check if already subscribed
|
||||
if (this.subscriptions.has(`s3:${key}`)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('subscribeS3');
|
||||
const response = await request.fire({ bucket, prefix });
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.set(`s3:${key}`, {
|
||||
type: 's3',
|
||||
key,
|
||||
subscriptionId: response.subscriptionId,
|
||||
});
|
||||
console.log(`[ChangeStream] Subscribed to S3 ${key}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error(`[ChangeStream] Failed to subscribe to S3 ${key}:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from changes in an S3 bucket/prefix
|
||||
*/
|
||||
public async unsubscribeFromBucket(bucket: string, prefix?: string): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const key = prefix ? `${bucket}/${prefix}` : bucket;
|
||||
const subKey = `s3:${key}`;
|
||||
|
||||
if (!this.subscriptions.has(subKey)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('unsubscribeS3');
|
||||
const response = await request.fire({ bucket, prefix });
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.delete(subKey);
|
||||
console.log(`[ChangeStream] Unsubscribed from S3 ${key}`);
|
||||
}
|
||||
|
||||
return response.success;
|
||||
} catch (error) {
|
||||
console.error(`[ChangeStream] Failed to unsubscribe from S3 ${key}:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if subscribed to an S3 bucket/prefix
|
||||
*/
|
||||
public isSubscribedToBucket(bucket: string, prefix?: string): boolean {
|
||||
const key = prefix ? `${bucket}/${prefix}` : bucket;
|
||||
return this.subscriptions.has(`s3:${key}`);
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
// Activity Stream Subscriptions
|
||||
// ===========================================
|
||||
|
||||
/**
|
||||
* Subscribe to the activity stream
|
||||
*/
|
||||
public async subscribeToActivity(): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
console.warn('[ChangeStream] Not connected, cannot subscribe');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if already subscribed
|
||||
if (this.subscriptions.has('activity:activity')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('subscribeActivity');
|
||||
const response = await request.fire({});
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.set('activity:activity', {
|
||||
type: 'activity',
|
||||
key: 'activity',
|
||||
subscriptionId: response.subscriptionId,
|
||||
});
|
||||
console.log('[ChangeStream] Subscribed to activity stream');
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('[ChangeStream] Failed to subscribe to activity stream:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from the activity stream
|
||||
*/
|
||||
public async unsubscribeFromActivity(): Promise<boolean> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.subscriptions.has('activity:activity')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('unsubscribeActivity');
|
||||
const response = await request.fire({});
|
||||
|
||||
if (response.success) {
|
||||
this.subscriptions.delete('activity:activity');
|
||||
console.log('[ChangeStream] Unsubscribed from activity stream');
|
||||
}
|
||||
|
||||
return response.success;
|
||||
} catch (error) {
|
||||
console.error('[ChangeStream] Failed to unsubscribe from activity stream:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get recent activity events
|
||||
*/
|
||||
public async getRecentActivity(limit: number = 100): Promise<IActivityEvent[]> {
|
||||
if (!this.typedSocket || !this.isConnected) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const request = this.typedSocket.createTypedRequest<any>('getRecentActivity');
|
||||
const response = await request.fire({ limit });
|
||||
return response.events || [];
|
||||
} catch (error) {
|
||||
console.error('[ChangeStream] Failed to get recent activity:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if subscribed to activity stream
|
||||
*/
|
||||
public isSubscribedToActivity(): boolean {
|
||||
return this.subscriptions.has('activity:activity');
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
// Observables for UI Components
|
||||
// ===========================================
|
||||
|
||||
/**
|
||||
* Get MongoDB changes as an Observable
|
||||
*/
|
||||
public getMongoChanges(): plugins.smartrx.rxjs.Observable<IMongoChangeEvent> {
|
||||
return this.mongoChanges$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get S3 changes as an Observable
|
||||
*/
|
||||
public getS3Changes(): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
|
||||
return this.s3Changes$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get activity events as an Observable
|
||||
*/
|
||||
public getActivityStream(): plugins.smartrx.rxjs.Observable<IActivityEvent> {
|
||||
return this.activityEvents$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get filtered MongoDB changes for a specific collection
|
||||
*/
|
||||
public getCollectionChanges(database: string, collection: string): plugins.smartrx.rxjs.Observable<IMongoChangeEvent> {
|
||||
return this.mongoChanges$.pipe(
|
||||
plugins.smartrx.rxjs.ops.filter(
|
||||
(event) => event.database === database && event.collection === collection
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get filtered S3 changes for a specific bucket/prefix
|
||||
*/
|
||||
public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
|
||||
return this.s3Changes$.pipe(
|
||||
plugins.smartrx.rxjs.ops.filter((event) => {
|
||||
if (event.bucket !== bucket) return false;
|
||||
if (prefix && !event.key.startsWith(prefix)) return false;
|
||||
return true;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
export * from './api.service.js';
|
||||
export * from './changestream.service.js';
|
||||
|
||||
import { ApiService } from './api.service.js';
|
||||
import { ChangeStreamService } from './changestream.service.js';
|
||||
|
||||
export const apiService = new ApiService();
|
||||
export const changeStreamService = new ChangeStreamService();
|
||||
|
||||
Reference in New Issue
Block a user