fix(storage): rename S3 configuration and change stream interfaces to storage-oriented types
This commit is contained in:
52
readme.md
52
readme.md
@@ -1,6 +1,6 @@
|
||||
# @git.zone/tsview
|
||||
|
||||
A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores. 🚀
|
||||
A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores.
|
||||
|
||||
## Issue Reporting and Security
|
||||
|
||||
@@ -16,31 +16,34 @@ pnpm add -g @git.zone/tsview
|
||||
pnpm add @git.zone/tsview
|
||||
```
|
||||
|
||||
## Features ✨
|
||||
## Features
|
||||
|
||||
### 🗄️ S3 Storage Browser
|
||||
### S3 Storage Browser
|
||||
|
||||
Powered by the `dees-storage-browser` component from `@design.estate/dees-catalog`:
|
||||
|
||||
- **Column View Navigation** — Mac Finder-style interface with resizable columns
|
||||
- **List View** — Traditional key-based view with hierarchical navigation
|
||||
- **Real-time Preview** — View images, JSON, text files, code, and more directly in the browser
|
||||
- **Bucket Management** — Create, delete, and switch between buckets
|
||||
- **File Operations** — Upload, download, delete objects
|
||||
- **File Operations** — Upload, download, delete, move, and copy objects
|
||||
- **In-place Text Editing** — Edit text files directly in the browser with change tracking
|
||||
- **Smart Content Type Detection** — Automatic recognition for 20+ file types
|
||||
- **Breadcrumb Navigation** — Clickable path traversal
|
||||
|
||||
### 🍃 MongoDB Browser
|
||||
### MongoDB Browser
|
||||
|
||||
- **Database Explorer** — Hierarchical navigation through databases and collections
|
||||
- **Database Overview** — Collection counts, data sizes, index stats at a glance
|
||||
- **Document Viewer** — Paginated table view with JSON filter support
|
||||
- **Document Editor** — Full CRUD with syntax-highlighted code editor and change tracking
|
||||
- **Index Management** — View, create, and drop indexes
|
||||
- **Aggregation Pipeline** — Run aggregation queries directly
|
||||
- **Collection Stats** — Document counts, sizes, storage metrics
|
||||
- **Server Status** — Connection info, version, uptime
|
||||
- **Show/Hide System Databases** — Toggle visibility of `admin`, `local`, `config`
|
||||
|
||||
### ⚡ Real-Time Change Streaming
|
||||
### Real-Time Change Streaming
|
||||
|
||||
- **MongoDB Change Streams** — Live updates via native MongoDB change streams
|
||||
- **S3 Change Detection** — Polling-based bucket monitoring with ETag comparison (5s intervals)
|
||||
@@ -49,14 +52,14 @@ pnpm add @git.zone/tsview
|
||||
- **WebSocket Subscriptions** — Per-collection, per-bucket, or global activity feed
|
||||
- **Auto-Reconnect** — Subscriptions automatically restored after connection loss
|
||||
|
||||
### 🎨 Modern Web UI
|
||||
### Modern Web UI
|
||||
|
||||
- 🌙 Dark theme designed for developer comfort
|
||||
- 📱 Responsive layout with resizable panels
|
||||
- ⌨️ Context menus for quick actions
|
||||
- 🔌 Everything bundled — zero external runtime dependencies in the browser
|
||||
- Dark theme designed for developer comfort
|
||||
- Responsive layout with resizable panels
|
||||
- Context menus for quick actions
|
||||
- Everything bundled — zero external runtime dependencies in the browser
|
||||
|
||||
## Quick Start 🚀
|
||||
## Quick Start
|
||||
|
||||
### 1. Configure Your Connection
|
||||
|
||||
@@ -80,7 +83,7 @@ Create a `.nogit/env.json` file in your project root:
|
||||
tsview
|
||||
```
|
||||
|
||||
That's it! 🎉 Your browser will automatically open to the viewer interface.
|
||||
That's it! Your browser will automatically open to the viewer interface.
|
||||
|
||||
## CLI Usage
|
||||
|
||||
@@ -206,15 +209,15 @@ Or use individual variables:
|
||||
|
||||
tsview works with any S3-compatible storage:
|
||||
|
||||
| Provider | Status |
|
||||
| ----------------------- | --------------------------- |
|
||||
| **MinIO** | ✅ Perfect for local dev |
|
||||
| **AWS S3** | ✅ Amazon's object storage |
|
||||
| **DigitalOcean Spaces** | ✅ Simple object storage |
|
||||
| **Backblaze B2** | ✅ S3-compatible API |
|
||||
| **Cloudflare R2** | ✅ Zero egress fees |
|
||||
| **Wasabi** | ✅ Hot cloud storage |
|
||||
| **Self-hosted** | ✅ Any S3-compatible server |
|
||||
| Provider | Status |
|
||||
| ----------------------- | -------------------------- |
|
||||
| **MinIO** | Perfect for local dev |
|
||||
| **AWS S3** | Amazon's object storage |
|
||||
| **DigitalOcean Spaces** | Simple object storage |
|
||||
| **Backblaze B2** | S3-compatible API |
|
||||
| **Cloudflare R2** | Zero egress fees |
|
||||
| **Wasabi** | Hot cloud storage |
|
||||
| **Self-hosted** | Any S3-compatible server |
|
||||
|
||||
## Supported File Types for Preview
|
||||
|
||||
@@ -244,9 +247,10 @@ tsview/
|
||||
├── ts_web/ # Frontend
|
||||
│ ├── elements/ # Web components (LitElement)
|
||||
│ │ ├── tsview-app.ts # App shell + navigation
|
||||
│ │ ├── tsview-s3-*.ts # S3 browser components
|
||||
│ │ ├── tsview-mongo-*.ts # MongoDB browser components
|
||||
│ │ └── tsview-activity-stream.ts # Real-time activity feed
|
||||
│ ├── adapters/ # Data provider adapters
|
||||
│ │ └── s3-data-provider.ts # IStorageDataProvider for dees-storage-browser
|
||||
│ ├── services/ # API + WebSocket clients
|
||||
│ ├── styles/ # Dark theme
|
||||
│ └── utilities/ # Formatting helpers
|
||||
@@ -257,7 +261,7 @@ tsview/
|
||||
|
||||
1. **Backend** — A `TypedServer` serves the bundled web UI and exposes a typed API via `TypedRequest` over HTTP. A `TypedSocket` WebSocket layer handles real-time streaming subscriptions.
|
||||
|
||||
2. **Frontend** — LitElement-based web components communicate with the backend via `TypedRequest`. The `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.
|
||||
2. **Frontend** — LitElement-based web components communicate with the backend via `TypedRequest`. The S3 browser uses `dees-storage-browser` from `@design.estate/dees-catalog` with a custom `IStorageDataProvider` adapter. The `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.
|
||||
|
||||
3. **Streaming** — The `ChangeStreamManager` creates MongoDB Change Streams and S3 BucketWatchers on demand (one per subscribed resource). Changes are pushed to subscribed clients and accumulated in a 1000-event ring buffer for the Activity Stream view.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user