fix(storage): rename S3 configuration and change stream interfaces to storage-oriented types

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@git.zone/tsview',
-  version: '1.12.0',
+  version: '1.12.1',
   description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }

ts_web/adapters/s3-data-provider.ts

@@ -1,10 +1,10 @@
-import type { IS3DataProvider } from '@design.estate/dees-catalog';
+import type { IStorageDataProvider } from '@design.estate/dees-catalog';
 import { apiService } from '../services/index.js';
 
 /**
- * Adapter that implements IS3DataProvider by delegating to tsview's ApiService
+ * Adapter that implements IStorageDataProvider by delegating to tsview's ApiService
  */
-export class TsviewS3DataProvider implements IS3DataProvider {
+export class TsviewS3DataProvider implements IStorageDataProvider {
   async listObjects(bucket: string, prefix?: string, delimiter?: string) {
     return apiService.listObjects(bucket, prefix, delimiter);
   }

ts_web/elements/tsview-activity-stream.ts

@@ -1,10 +1,11 @@
 import * as plugins from '../plugins.js';
-import { changeStreamService, type IActivityEvent, type IMongoChangeEvent, type IS3ChangeEvent } from '../services/index.js';
+import { changeStreamService, type IActivityEvent, type IMongoChangeEvent } from '../services/index.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
 
-type TFilterMode = 'all' | 'mongodb' | 's3';
+type TFilterMode = 'all' | 'mongodb' | 'storage';
 
 @customElement('tsview-activity-stream')
 export class TsviewActivityStream extends DeesElement {
@@ -426,8 +427,8 @@ export class TsviewActivityStream extends DeesElement {
       const mongoEvent = event.event as IMongoChangeEvent;
       return `${mongoEvent.database}.${mongoEvent.collection}`;
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.bucket;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.bucket;
     }
   }
 
@@ -439,8 +440,8 @@ export class TsviewActivityStream extends DeesElement {
       }
       return '';
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.key;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.key;
     }
   }
 
@@ -464,12 +465,12 @@ export class TsviewActivityStream extends DeesElement {
         })
       );
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
+      const storageEvent = event.event as IStorageChangeEvent;
       this.dispatchEvent(
         new CustomEvent('navigate-to-s3', {
           detail: {
-            bucket: s3Event.bucket,
-            key: s3Event.key,
+            bucket: storageEvent.bucket,
+            key: storageEvent.key,
           },
           bubbles: true,
           composed: true,
@@ -529,8 +530,8 @@ export class TsviewActivityStream extends DeesElement {
                 MongoDB
               </button>
               <button
-                class="filter-tab ${this.filterMode === 's3' ? 'active' : ''}"
-                @click=${() => this.setFilterMode('s3')}
+                class="filter-tab ${this.filterMode === 'storage' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('storage')}
               >
                 S3
               </button>

ts_web/elements/tsview-app.ts

@@ -2,7 +2,7 @@ import * as plugins from '../plugins.js';
 import { apiService, changeStreamService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
 import { s3DataProvider } from '../adapters/s3-data-provider.js';
-import type { IS3ChangeEvent } from '@design.estate/dees-catalog';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
 
 const { html, css, cssManager, customElement, state, DeesElement } = plugins;
 const { DeesContextmenu } = plugins.deesCatalog;
@@ -1041,16 +1041,16 @@ export class TsviewApp extends DeesElement {
 
       return html`
         <div class="content-area">
-          <dees-s3-browser
+          <dees-storage-browser
             .dataProvider=${s3DataProvider}
             .bucketName=${this.selectedBucket}
-            .onChangeEvent=${(callback: (event: IS3ChangeEvent) => void) => {
+            .onChangeEvent=${(callback: (event: IStorageChangeEvent) => void) => {
               const sub = changeStreamService
                 .getBucketChanges(this.selectedBucket)
                 .subscribe(callback);
               return () => sub.unsubscribe();
             }}
-          ></dees-s3-browser>
+          ></dees-storage-browser>
         </div>
       `;
     }

ts_web/services/api.service.ts

@@ -1,13 +1,6 @@
 import * as plugins from '../plugins.js';
-
-// Import interfaces from shared types
-// Note: In bundled form these are inlined
-export interface IS3Object {
-  key: string;
-  size?: number;
-  lastModified?: string;
-  isPrefix?: boolean;
-}
+import type { IStorageObject } from '@design.estate/dees-catalog';
+export type { IStorageObject };
 
 export interface IMongoDatabase {
   name: string;
@@ -100,7 +93,7 @@ export class ApiService {
     bucketName: string,
     prefix?: string,
     delimiter?: string
-  ): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
+  ): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
     return this.request('listObjects', { bucketName, prefix, delimiter });
   }
 

ts_web/services/changestream.service.ts

@@ -1,4 +1,6 @@
 import * as plugins from '../plugins.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
+export type { IStorageChangeEvent };
 
 /**
  * MongoDB change event
@@ -16,25 +18,13 @@ export interface IMongoChangeEvent {
   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;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
   timestamp: string;
 }
 
@@ -42,7 +32,7 @@ export interface IActivityEvent {
  * Subscription info tracked by the service
  */
 interface ISubscription {
-  type: 'mongo' | 's3' | 'activity';
+  type: 'mongo' | 'storage' | 'activity';
   key: string; // "db/collection" or "bucket/prefix" or "activity"
   subscriptionId: string;
 }
@@ -69,7 +59,7 @@ export class ChangeStreamService {
 
   // 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 storageChanges$ = new plugins.smartrx.rxjs.Subject<IStorageChangeEvent>();
   public readonly activityEvents$ = new plugins.smartrx.rxjs.Subject<IActivityEvent>();
   public readonly connectionStatus$ = new plugins.smartrx.rxjs.ReplaySubject<'connected' | 'disconnected' | 'connecting'>(1);
 
@@ -193,8 +183,8 @@ export class ChangeStreamService {
     router.addTypedHandler(
       new plugins.typedrequest.TypedHandler<any>(
         'pushS3Change',
-        async (data: { event: IS3ChangeEvent }) => {
-          this.s3Changes$.next(data.event);
+        async (data: { event: IStorageChangeEvent }) => {
+          this.storageChanges$.next(data.event);
           return { received: true };
         }
       )
@@ -540,8 +530,8 @@ export class ChangeStreamService {
   /**
    * Get S3 changes as an Observable
    */
-  public getS3Changes(): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.asObservable();
+  public getStorageChanges(): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.asObservable();
   }
 
   /**
@@ -565,8 +555,8 @@ export class ChangeStreamService {
   /**
    * Get filtered S3 changes for a specific bucket/prefix
    */
-  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.pipe(
+  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.pipe(
       plugins.smartrx.rxjs.ops.filter((event) => {
         if (event.bucket !== bucket) return false;
         if (prefix && !event.key.startsWith(prefix)) return false;