mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-03 18:14:52 +00:00
Generated by Spark: I can auto default to flask backend with docker environment variable. If its not set used IndexedDB.
This commit is contained in:
GitHub
+146
-156
@@ -1,33 +1,33 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Database, HardDrive, CloudArrowUp, CloudArrowDown, Trash, Info } from '@phosphor-icons/react'
|
||||
import { storage } from '@/lib/storage'
|
||||
import { db } from '@/lib/db'
|
||||
import { toast } from 'sonner'
|
||||
import { StorageSettingsPanel } from './StorageSettingsPanel'
|
||||
|
||||
export function StorageSettings() {
|
||||
const [isMigrating, setIsMigrating] = useState(false)
|
||||
const [isSyncing, setIsSyncing] = useState(false)
|
||||
const [migrationProgress, setMigrationProgress] = useState(0)
|
||||
const [backendType, setBackendType] = useState<'flask' | 'indexeddb' | null>(null)
|
||||
const [flaskUrl, setFlaskUrl] = useState('http://localhost:5001')
|
||||
const [stats, setStats] = useState<{
|
||||
indexedDBCount: number
|
||||
sparkKVCount: number
|
||||
totalKeys: number
|
||||
} | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const type = storage.getBackendType()
|
||||
setBackendType(type)
|
||||
loadStats()
|
||||
}, [])
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const [settingsCount, sparkKeys] = await Promise.all([
|
||||
db.count('settings'),
|
||||
window.spark?.kv.keys() || Promise.resolve([]),
|
||||
])
|
||||
|
||||
const keys = await storage.keys()
|
||||
setStats({
|
||||
indexedDBCount: settingsCount,
|
||||
sparkKVCount: sparkKeys.length,
|
||||
totalKeys: keys.length,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to load stats:', error)
|
||||
@@ -35,21 +35,19 @@ export function StorageSettings() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleMigrate = async () => {
|
||||
const handleMigrateToFlask = async () => {
|
||||
if (!flaskUrl) {
|
||||
toast.error('Please enter a Flask backend URL')
|
||||
return
|
||||
}
|
||||
|
||||
setIsMigrating(true)
|
||||
setMigrationProgress(0)
|
||||
|
||||
try {
|
||||
const result = await storage.migrateFromSparkKV()
|
||||
setMigrationProgress(100)
|
||||
|
||||
toast.success(
|
||||
`Migration complete! ${result.migrated} items migrated${
|
||||
result.failed > 0 ? `, ${result.failed} failed` : ''
|
||||
}`
|
||||
)
|
||||
|
||||
await loadStats()
|
||||
const count = await storage.migrateToFlask(flaskUrl)
|
||||
toast.success(`Migration complete! ${count} items migrated to Flask backend`)
|
||||
|
||||
setTimeout(() => window.location.reload(), 1000)
|
||||
} catch (error) {
|
||||
console.error('Migration failed:', error)
|
||||
toast.error('Migration failed. Check console for details.')
|
||||
@@ -58,45 +56,34 @@ export function StorageSettings() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSync = async () => {
|
||||
setIsSyncing(true)
|
||||
const handleMigrateToIndexedDB = async () => {
|
||||
setIsMigrating(true)
|
||||
|
||||
try {
|
||||
const result = await storage.syncToSparkKV()
|
||||
|
||||
toast.success(
|
||||
`Sync complete! ${result.synced} items synced${
|
||||
result.failed > 0 ? `, ${result.failed} failed` : ''
|
||||
}`
|
||||
)
|
||||
|
||||
await loadStats()
|
||||
const count = await storage.migrateToIndexedDB()
|
||||
toast.success(`Migration complete! ${count} items migrated to IndexedDB`)
|
||||
|
||||
setTimeout(() => window.location.reload(), 1000)
|
||||
} catch (error) {
|
||||
console.error('Sync failed:', error)
|
||||
toast.error('Sync failed. Check console for details.')
|
||||
console.error('Migration failed:', error)
|
||||
toast.error('Migration failed. Check console for details.')
|
||||
} finally {
|
||||
setIsSyncing(false)
|
||||
setIsMigrating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearIndexedDB = async () => {
|
||||
if (!confirm('Are you sure you want to clear all IndexedDB data? This cannot be undone.')) {
|
||||
const handleClearStorage = async () => {
|
||||
if (!confirm('Are you sure you want to clear all storage data? This cannot be undone.')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await db.clear('settings')
|
||||
await db.clear('files')
|
||||
await db.clear('models')
|
||||
await db.clear('components')
|
||||
await db.clear('workflows')
|
||||
await db.clear('projects')
|
||||
|
||||
toast.success('IndexedDB cleared successfully')
|
||||
await storage.clear()
|
||||
toast.success('Storage cleared successfully')
|
||||
await loadStats()
|
||||
} catch (error) {
|
||||
console.error('Failed to clear IndexedDB:', error)
|
||||
toast.error('Failed to clear IndexedDB')
|
||||
console.error('Failed to clear storage:', error)
|
||||
toast.error('Failed to clear storage')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,7 +92,7 @@ export function StorageSettings() {
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">Storage Management</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your local database and sync with cloud storage
|
||||
Manage your application storage backend
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -115,125 +102,127 @@ export function StorageSettings() {
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Info size={20} />
|
||||
Legacy Storage Information
|
||||
Current Storage Backend
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
This application uses IndexedDB as the primary local database, with Spark KV as a
|
||||
fallback/sync option
|
||||
Your data is currently stored in:
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button onClick={loadStats} variant="outline" size="sm">
|
||||
Refresh Stats
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
{backendType === 'flask' ? (
|
||||
<>
|
||||
<Database size={24} />
|
||||
<div>
|
||||
<div className="font-semibold">Flask Backend (SQLite)</div>
|
||||
<div className="text-sm text-muted-foreground">Using persistent database</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HardDrive size={24} />
|
||||
<div>
|
||||
<div className="font-semibold">IndexedDB (Browser)</div>
|
||||
<div className="text-sm text-muted-foreground">Using local browser storage</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={backendType === 'flask' ? 'default' : 'secondary'}>
|
||||
{backendType === 'flask' ? 'Server-Side' : 'Client-Side'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Button onClick={loadStats} variant="outline" size="sm" className="w-full">
|
||||
Refresh Stats
|
||||
</Button>
|
||||
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<HardDrive size={16} />
|
||||
IndexedDB (Primary)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold">{stats.indexedDBCount}</span>
|
||||
<span className="text-sm text-muted-foreground">items</span>
|
||||
</div>
|
||||
<Badge variant="default" className="mt-2">
|
||||
Active
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Database size={16} />
|
||||
Spark KV (Fallback)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold">{stats.sparkKVCount}</span>
|
||||
<span className="text-sm text-muted-foreground">items</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="mt-2">
|
||||
Backup
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold">{stats.totalKeys}</span>
|
||||
<span className="text-sm text-muted-foreground">total keys stored</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CloudArrowDown size={20} />
|
||||
Data Migration
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Migrate existing data from Spark KV to IndexedDB for improved performance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{isMigrating && (
|
||||
<div className="space-y-2">
|
||||
<Progress value={migrationProgress} />
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Migrating data... {migrationProgress}%
|
||||
</p>
|
||||
{backendType === 'indexeddb' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CloudArrowUp size={20} />
|
||||
Migrate to Flask Backend
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Switch to server-side storage using Flask + SQLite for better reliability
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="flask-url">Flask Backend URL</Label>
|
||||
<Input
|
||||
id="flask-url"
|
||||
type="url"
|
||||
placeholder="http://localhost:5001"
|
||||
value={flaskUrl}
|
||||
onChange={(e) => setFlaskUrl(e.target.value)}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleMigrate}
|
||||
disabled={isMigrating}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<CloudArrowDown size={20} className="mr-2" />
|
||||
{isMigrating ? 'Migrating...' : 'Migrate from Spark KV to IndexedDB'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleMigrateToFlask}
|
||||
disabled={isMigrating}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<CloudArrowUp size={20} className="mr-2" />
|
||||
{isMigrating ? 'Migrating...' : 'Migrate to Flask Backend'}
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will copy all data from Spark KV into IndexedDB. Your Spark KV data will remain
|
||||
unchanged.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will copy all data from IndexedDB to the Flask backend. Your browser data will remain
|
||||
unchanged and the app will reload to use the new backend.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CloudArrowUp size={20} />
|
||||
Backup & Sync
|
||||
</CardTitle>
|
||||
<CardDescription>Sync IndexedDB data back to Spark KV as a backup</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button
|
||||
onClick={handleSync}
|
||||
disabled={isSyncing}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<CloudArrowUp size={20} className="mr-2" />
|
||||
{isSyncing ? 'Syncing...' : 'Sync to Spark KV'}
|
||||
</Button>
|
||||
{backendType === 'flask' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CloudArrowDown size={20} />
|
||||
Migrate to IndexedDB
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Switch back to browser-side storage using IndexedDB
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button
|
||||
onClick={handleMigrateToIndexedDB}
|
||||
disabled={isMigrating}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<CloudArrowDown size={20} className="mr-2" />
|
||||
{isMigrating ? 'Migrating...' : 'Migrate to IndexedDB'}
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will update Spark KV with your current IndexedDB data. Useful for creating backups
|
||||
or syncing across devices.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will copy all data from Flask backend to IndexedDB. The server data will remain
|
||||
unchanged and the app will reload to use IndexedDB.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="border-destructive">
|
||||
<CardHeader>
|
||||
@@ -244,12 +233,13 @@ export function StorageSettings() {
|
||||
<CardDescription>Irreversible actions that affect your data</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={handleClearIndexedDB} variant="destructive" className="w-full">
|
||||
<Button onClick={handleClearStorage} variant="destructive" className="w-full">
|
||||
<Trash size={20} className="mr-2" />
|
||||
Clear All IndexedDB Data
|
||||
Clear All Storage Data
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,450 @@
|
||||
const FLASK_BACKEND_URL = import.meta.env.VITE_FLASK_BACKEND_URL ||
|
||||
(typeof window !== 'undefined' && (window as any).FLASK_BACKEND_URL) ||
|
||||
''
|
||||
|
||||
const USE_FLASK_BACKEND = import.meta.env.VITE_USE_FLASK_BACKEND === 'true' ||
|
||||
(typeof window !== 'undefined' && (window as any).USE_FLASK_BACKEND === 'true')
|
||||
|
||||
export interface StorageAdapter {
|
||||
get<T>(key: string): Promise<T | undefined>
|
||||
set<T>(key: string, value: T): Promise<void>
|
||||
delete(key: string): Promise<void>
|
||||
keys(): Promise<string[]>
|
||||
clear(): Promise<void>
|
||||
}
|
||||
|
||||
class FlaskBackendAdapter implements StorageAdapter {
|
||||
private baseUrl: string
|
||||
private isAvailable: boolean | null = null
|
||||
|
||||
constructor(baseUrl: string) {
|
||||
this.baseUrl = baseUrl.replace(/\/$/, '')
|
||||
}
|
||||
|
||||
private async checkAvailability(): Promise<boolean> {
|
||||
if (this.isAvailable !== null) {
|
||||
return this.isAvailable
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/health`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
signal: AbortSignal.timeout(3000),
|
||||
})
|
||||
this.isAvailable = response.ok
|
||||
console.log('[StorageAdapter] Flask backend available:', this.isAvailable)
|
||||
return this.isAvailable
|
||||
} catch (error) {
|
||||
console.warn('[StorageAdapter] Flask backend not available:', error)
|
||||
this.isAvailable = false
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async get<T>(key: string): Promise<T | undefined> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/${encodeURIComponent(key)}`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (response.status === 404) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.value as T
|
||||
} catch (error) {
|
||||
console.error(`[StorageAdapter] Error getting key ${key}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async set<T>(key: string, value: T): Promise<void> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/${encodeURIComponent(key)}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ value }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[StorageAdapter] Error setting key ${key}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/${encodeURIComponent(key)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (response.status === 404) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[StorageAdapter] Error deleting key ${key}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async keys(): Promise<string[]> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/keys`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.keys
|
||||
} catch (error) {
|
||||
console.error('[StorageAdapter] Error getting keys:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async clear(): Promise<void> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/clear`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[StorageAdapter] Error clearing storage:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async export(): Promise<Record<string, any>> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/export`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('[StorageAdapter] Error exporting data:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async import(data: Record<string, any>): Promise<number> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/import`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
return result.imported
|
||||
} catch (error) {
|
||||
console.error('[StorageAdapter] Error importing data:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async getStats(): Promise<{ total_keys: number; total_size_bytes: number; database_path: string }> {
|
||||
if (!(await this.checkAvailability())) {
|
||||
throw new Error('Flask backend not available')
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.baseUrl}/api/storage/stats`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('[StorageAdapter] Error getting stats:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IndexedDBAdapter implements StorageAdapter {
|
||||
private dbName = 'codeforge-db'
|
||||
private storeName = 'storage'
|
||||
private db: IDBDatabase | null = null
|
||||
|
||||
private async getDB(): Promise<IDBDatabase> {
|
||||
if (this.db) {
|
||||
return this.db
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(this.dbName, 1)
|
||||
|
||||
request.onerror = () => reject(request.error)
|
||||
request.onsuccess = () => {
|
||||
this.db = request.result
|
||||
resolve(this.db)
|
||||
}
|
||||
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = (event.target as IDBOpenDBRequest).result
|
||||
if (!db.objectStoreNames.contains(this.storeName)) {
|
||||
db.createObjectStore(this.storeName)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async get<T>(key: string): Promise<T | undefined> {
|
||||
const db = await this.getDB()
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([this.storeName], 'readonly')
|
||||
const store = transaction.objectStore(this.storeName)
|
||||
const request = store.get(key)
|
||||
|
||||
request.onsuccess = () => resolve(request.result as T | undefined)
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
|
||||
async set<T>(key: string, value: T): Promise<void> {
|
||||
const db = await this.getDB()
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([this.storeName], 'readwrite')
|
||||
const store = transaction.objectStore(this.storeName)
|
||||
const request = store.put(value, key)
|
||||
|
||||
request.onsuccess = () => resolve()
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
const db = await this.getDB()
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([this.storeName], 'readwrite')
|
||||
const store = transaction.objectStore(this.storeName)
|
||||
const request = store.delete(key)
|
||||
|
||||
request.onsuccess = () => resolve()
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
|
||||
async keys(): Promise<string[]> {
|
||||
const db = await this.getDB()
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([this.storeName], 'readonly')
|
||||
const store = transaction.objectStore(this.storeName)
|
||||
const request = store.getAllKeys()
|
||||
|
||||
request.onsuccess = () => resolve(request.result.map(k => String(k)))
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
|
||||
async clear(): Promise<void> {
|
||||
const db = await this.getDB()
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([this.storeName], 'readwrite')
|
||||
const store = transaction.objectStore(this.storeName)
|
||||
const request = store.clear()
|
||||
|
||||
request.onsuccess = () => resolve()
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function detectStorageBackend(): Promise<'flask' | 'indexeddb'> {
|
||||
if (USE_FLASK_BACKEND && FLASK_BACKEND_URL) {
|
||||
console.log('[StorageAdapter] USE_FLASK_BACKEND is true, attempting Flask backend')
|
||||
const flaskAdapter = new FlaskBackendAdapter(FLASK_BACKEND_URL)
|
||||
try {
|
||||
await flaskAdapter.get('_health_check')
|
||||
console.log('[StorageAdapter] Flask backend detected and available')
|
||||
return 'flask'
|
||||
} catch (error) {
|
||||
console.warn('[StorageAdapter] Flask backend configured but not available, falling back to IndexedDB:', error)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[StorageAdapter] Using IndexedDB')
|
||||
return 'indexeddb'
|
||||
}
|
||||
|
||||
class AutoStorageAdapter implements StorageAdapter {
|
||||
private adapter: StorageAdapter | null = null
|
||||
private backendType: 'flask' | 'indexeddb' | null = null
|
||||
private initPromise: Promise<void> | null = null
|
||||
|
||||
private async initialize(): Promise<void> {
|
||||
if (this.adapter) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.initPromise) {
|
||||
this.initPromise = (async () => {
|
||||
this.backendType = await detectStorageBackend()
|
||||
|
||||
if (this.backendType === 'flask' && FLASK_BACKEND_URL) {
|
||||
this.adapter = new FlaskBackendAdapter(FLASK_BACKEND_URL)
|
||||
console.log(`[StorageAdapter] Initialized with Flask backend: ${FLASK_BACKEND_URL}`)
|
||||
} else {
|
||||
this.adapter = new IndexedDBAdapter()
|
||||
console.log('[StorageAdapter] Initialized with IndexedDB')
|
||||
}
|
||||
})()
|
||||
}
|
||||
|
||||
await this.initPromise
|
||||
}
|
||||
|
||||
getBackendType(): 'flask' | 'indexeddb' | null {
|
||||
return this.backendType
|
||||
}
|
||||
|
||||
async get<T>(key: string): Promise<T | undefined> {
|
||||
await this.initialize()
|
||||
return this.adapter!.get<T>(key)
|
||||
}
|
||||
|
||||
async set<T>(key: string, value: T): Promise<void> {
|
||||
await this.initialize()
|
||||
return this.adapter!.set(key, value)
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
await this.initialize()
|
||||
return this.adapter!.delete(key)
|
||||
}
|
||||
|
||||
async keys(): Promise<string[]> {
|
||||
await this.initialize()
|
||||
return this.adapter!.keys()
|
||||
}
|
||||
|
||||
async clear(): Promise<void> {
|
||||
await this.initialize()
|
||||
return this.adapter!.clear()
|
||||
}
|
||||
|
||||
async migrateToFlask(flaskUrl: string): Promise<number> {
|
||||
await this.initialize()
|
||||
|
||||
if (this.backendType === 'flask') {
|
||||
throw new Error('Already using Flask backend')
|
||||
}
|
||||
|
||||
const indexedDBAdapter = this.adapter as IndexedDBAdapter
|
||||
const flaskAdapter = new FlaskBackendAdapter(flaskUrl)
|
||||
|
||||
const keys = await indexedDBAdapter.keys()
|
||||
let migrated = 0
|
||||
|
||||
for (const key of keys) {
|
||||
try {
|
||||
const value = await indexedDBAdapter.get(key)
|
||||
if (value !== undefined) {
|
||||
await flaskAdapter.set(key, value)
|
||||
migrated++
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[StorageAdapter] Failed to migrate key ${key}:`, error)
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[StorageAdapter] Migrated ${migrated}/${keys.length} keys to Flask backend`)
|
||||
return migrated
|
||||
}
|
||||
|
||||
async migrateToIndexedDB(): Promise<number> {
|
||||
await this.initialize()
|
||||
|
||||
if (this.backendType === 'indexeddb') {
|
||||
throw new Error('Already using IndexedDB')
|
||||
}
|
||||
|
||||
const flaskAdapter = this.adapter as FlaskBackendAdapter
|
||||
const indexedDBAdapter = new IndexedDBAdapter()
|
||||
|
||||
const data = await flaskAdapter.export()
|
||||
const keys = Object.keys(data)
|
||||
let migrated = 0
|
||||
|
||||
for (const key of keys) {
|
||||
try {
|
||||
await indexedDBAdapter.set(key, data[key])
|
||||
migrated++
|
||||
} catch (error) {
|
||||
console.error(`[StorageAdapter] Failed to migrate key ${key}:`, error)
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[StorageAdapter] Migrated ${migrated}/${keys.length} keys to IndexedDB`)
|
||||
return migrated
|
||||
}
|
||||
}
|
||||
|
||||
export const storageAdapter = new AutoStorageAdapter()
|
||||
|
||||
export { FlaskBackendAdapter, IndexedDBAdapter }
|
||||
+32
-180
@@ -1,210 +1,62 @@
|
||||
import { db } from './db'
|
||||
|
||||
export interface StorageOptions {
|
||||
useIndexedDB?: boolean
|
||||
useSparkKV?: boolean
|
||||
preferIndexedDB?: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: StorageOptions = {
|
||||
useIndexedDB: true,
|
||||
useSparkKV: true,
|
||||
preferIndexedDB: true,
|
||||
}
|
||||
import { storageAdapter } from './storage-adapter'
|
||||
|
||||
class HybridStorage {
|
||||
private options: StorageOptions
|
||||
|
||||
constructor(options: Partial<StorageOptions> = {}) {
|
||||
this.options = { ...defaultOptions, ...options }
|
||||
}
|
||||
|
||||
async get<T>(key: string): Promise<T | undefined> {
|
||||
if (this.options.preferIndexedDB && this.options.useIndexedDB) {
|
||||
try {
|
||||
const value = await db.get('settings', key)
|
||||
if (value !== undefined) {
|
||||
return value.value as T
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('IndexedDB get failed, trying Spark KV:', error)
|
||||
}
|
||||
try {
|
||||
return await storageAdapter.get<T>(key)
|
||||
} catch (error) {
|
||||
console.error(`[Storage] Error getting key ${key}:`, error)
|
||||
return undefined
|
||||
}
|
||||
|
||||
if (this.options.useSparkKV && typeof window !== 'undefined' && window.spark) {
|
||||
try {
|
||||
return await window.spark.kv.get<T>(key)
|
||||
} catch (error) {
|
||||
console.warn('Spark KV get failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.options.preferIndexedDB && this.options.useIndexedDB) {
|
||||
try {
|
||||
const value = await db.get('settings', key)
|
||||
if (value !== undefined) {
|
||||
return value.value as T
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('IndexedDB get failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
async set<T>(key: string, value: T): Promise<void> {
|
||||
const errors: Error[] = []
|
||||
|
||||
if (this.options.useIndexedDB) {
|
||||
try {
|
||||
await db.put('settings', { key, value })
|
||||
} catch (error) {
|
||||
console.warn('IndexedDB set failed:', error)
|
||||
errors.push(error as Error)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.useSparkKV && typeof window !== 'undefined' && window.spark) {
|
||||
try {
|
||||
await window.spark.kv.set(key, value)
|
||||
} catch (error) {
|
||||
console.warn('Spark KV set failed:', error)
|
||||
errors.push(error as Error)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length === 2) {
|
||||
throw new Error('Both storage methods failed')
|
||||
try {
|
||||
await storageAdapter.set(key, value)
|
||||
} catch (error) {
|
||||
console.error(`[Storage] Error setting key ${key}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
const errors: Error[] = []
|
||||
|
||||
if (this.options.useIndexedDB) {
|
||||
try {
|
||||
await db.delete('settings', key)
|
||||
} catch (error) {
|
||||
console.warn('IndexedDB delete failed:', error)
|
||||
errors.push(error as Error)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.useSparkKV && typeof window !== 'undefined' && window.spark) {
|
||||
try {
|
||||
await window.spark.kv.delete(key)
|
||||
} catch (error) {
|
||||
console.warn('Spark KV delete failed:', error)
|
||||
errors.push(error as Error)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length === 2) {
|
||||
throw new Error('Both storage methods failed')
|
||||
try {
|
||||
await storageAdapter.delete(key)
|
||||
} catch (error) {
|
||||
console.error(`[Storage] Error deleting key ${key}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async keys(): Promise<string[]> {
|
||||
const allKeys = new Set<string>()
|
||||
|
||||
if (this.options.useIndexedDB) {
|
||||
try {
|
||||
const settings = await db.getAll('settings')
|
||||
settings.forEach((setting) => allKeys.add(setting.key))
|
||||
} catch (error) {
|
||||
console.warn('IndexedDB keys failed:', error)
|
||||
}
|
||||
try {
|
||||
return await storageAdapter.keys()
|
||||
} catch (error) {
|
||||
console.error('[Storage] Error getting keys:', error)
|
||||
return []
|
||||
}
|
||||
|
||||
if (this.options.useSparkKV && typeof window !== 'undefined' && window.spark) {
|
||||
try {
|
||||
const sparkKeys = await window.spark.kv.keys()
|
||||
sparkKeys.forEach((key) => allKeys.add(key))
|
||||
} catch (error) {
|
||||
console.warn('Spark KV keys failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(allKeys)
|
||||
}
|
||||
|
||||
async migrateFromSparkKV(): Promise<{ migrated: number; failed: number }> {
|
||||
if (!this.options.useIndexedDB) {
|
||||
throw new Error('IndexedDB is not enabled')
|
||||
}
|
||||
|
||||
if (!window.spark) {
|
||||
throw new Error('Spark KV is not available')
|
||||
}
|
||||
|
||||
let migrated = 0
|
||||
let failed = 0
|
||||
|
||||
async clear(): Promise<void> {
|
||||
try {
|
||||
const keys = await window.spark.kv.keys()
|
||||
|
||||
for (const key of keys) {
|
||||
try {
|
||||
const value = await window.spark.kv.get(key)
|
||||
if (value !== undefined) {
|
||||
await db.put('settings', { key, value })
|
||||
migrated++
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to migrate key ${key}:`, error)
|
||||
failed++
|
||||
}
|
||||
}
|
||||
await storageAdapter.clear()
|
||||
} catch (error) {
|
||||
console.error('Migration failed:', error)
|
||||
console.error('[Storage] Error clearing storage:', error)
|
||||
throw error
|
||||
}
|
||||
|
||||
return { migrated, failed }
|
||||
}
|
||||
|
||||
async syncToSparkKV(): Promise<{ synced: number; failed: number }> {
|
||||
if (!this.options.useSparkKV) {
|
||||
throw new Error('Spark KV is not enabled')
|
||||
}
|
||||
getBackendType(): 'flask' | 'indexeddb' | null {
|
||||
return storageAdapter.getBackendType()
|
||||
}
|
||||
|
||||
if (!window.spark) {
|
||||
throw new Error('Spark KV is not available')
|
||||
}
|
||||
async migrateToFlask(flaskUrl: string): Promise<number> {
|
||||
return await storageAdapter.migrateToFlask(flaskUrl)
|
||||
}
|
||||
|
||||
let synced = 0
|
||||
let failed = 0
|
||||
|
||||
try {
|
||||
const settings = await db.getAll('settings')
|
||||
|
||||
for (const setting of settings) {
|
||||
try {
|
||||
await window.spark.kv.set(setting.key, setting.value)
|
||||
synced++
|
||||
} catch (error) {
|
||||
console.error(`Failed to sync key ${setting.key}:`, error)
|
||||
failed++
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Sync failed:', error)
|
||||
throw error
|
||||
}
|
||||
|
||||
return { synced, failed }
|
||||
async migrateToIndexedDB(): Promise<number> {
|
||||
return await storageAdapter.migrateToIndexedDB()
|
||||
}
|
||||
}
|
||||
|
||||
export const storage = new HybridStorage()
|
||||
|
||||
export const indexedDBOnlyStorage = new HybridStorage({
|
||||
useIndexedDB: true,
|
||||
useSparkKV: false,
|
||||
})
|
||||
|
||||
export const sparkKVOnlyStorage = new HybridStorage({
|
||||
useIndexedDB: false,
|
||||
useSparkKV: true,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user