+ {/* 数据源健康概览 */}
+
+
+
+
+ {/* 按类型统计 */}
+
+
+
+ {/* 查询统计 */}
+
+
+
+
+ {/* 统计指标 */}
+
+
+
+
{/* 待处理工单 */}
+
+
+ {onlineInstances}/{dbInstances.length} 在线
+
+
+ {(['mysql', 'postgresql', 'redis', 'mongodb'] as const).map(type => {
+ const typeInstances = dbInstances.filter(i => i.dbType === type);
+ const typeOnline = typeInstances.filter(i => i.status === 'online').length;
+ const iconMap: Record = { mysql: '/db-logos/mysql.svg', postgresql: '/db-logos/postgres.svg', redis: '/db-logos/redis.svg', mongodb: '/db-logos/mongo.svg' };
+ const labelMap: Record = { mysql: 'MySQL', postgresql: 'PostgreSQL', redis: 'Redis', mongodb: 'MongoDB' };
+ return (
+
+ {/* 最近告警实例 */}
+ {dbInstances.filter(i => i.status === 'warning' || i.status === 'offline').length > 0 && (
+
+ 
+
+ );
+ })}
+ {typeInstances.length}
+ {labelMap[type]}
+
+ 0 ? 'text-green-400' : typeOnline > 0 ? 'text-yellow-400' : 'text-[var(--dg-text-muted)]'}>
+ {typeOnline}/{typeInstances.length}
+
+
+
+
+ )}
+ 需要关注
+ {dbInstances.filter(i => i.status === 'warning' || i.status === 'offline').slice(0, 3).map(inst => (
+
+
+ {inst.name}
+ {inst.host}:{inst.port}
+
+ {inst.status === 'offline' ? '离线' : '告警'}
+
+
+ ))}
+
+
+
+
+
+ {['今日', '本周', '本月'].map((p, i) => (
+
+ ))}
+
+
+
+ {/* 查询类型分布 */}
+
+
+
+
+ 1,284
+ ↑ 12% vs 昨日
+
+
+
+
+ 23ms
+ ↓ 8% vs 昨日
+
+
+
+
+ 7
+ ↑ 3 vs 昨日
+
+
+ 查询类型分布
+ {[
+ { label: 'MySQL', count: 682, total: 1284, color: 'bg-[#00758f]' },
+ { label: 'PostgreSQL', count: 312, total: 1284, color: 'bg-[#336791]' },
+ { label: 'Redis', count: 198, total: 1284, color: 'bg-[#dc382d]' },
+ { label: 'MongoDB', count: 92, total: 1284, color: 'bg-[#47a248]' },
+ ].map(item => (
+
+ {item.label}
+
+ ))}
+
+
+
+ {item.count}
+
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/InstancePage.tsx b/frontend/src/pages/InstancePage.tsx
index 7cf9f04..273be5c 100644
--- a/frontend/src/pages/InstancePage.tsx
+++ b/frontend/src/pages/InstancePage.tsx
@@ -317,44 +317,21 @@ function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete
);
}
-/* ---------- Database Brand SVG Icons ---------- */
+/* ---------- Database Brand Logo Icons (from logo.wine) ---------- */
function MySQLIcon({ className }: { className?: string }) {
- return (
-
- );
+ return
-
-
-
-
-
- 数据权限
-配置用户对数据库、表、字段的访问权限，支持行级权限控制
-
- {[
- { label: '权限规则数', value: dataPermissions.length, icon: Shield, color: 'text-blue-400', bg: 'bg-blue-400/10' },
- { label: '受控用户', value: new Set(dataPermissions.map(p => p.user)).size, icon: Database, color: 'text-purple-400', bg: 'bg-purple-400/10' },
- { label: '受控实例', value: new Set(dataPermissions.map(p => p.instance)).size, icon: Table, color: 'text-green-400', bg: 'bg-green-400/10' },
- { label: '行级过滤规则', value: dataPermissions.filter(p => p.rowFilter).length, icon: Filter, color: 'text-orange-400', bg: 'bg-orange-400/10' },
- ].map((s, i) => (
-
-
-
-
- ))}
-
-
- {s.value}
{s.label}
-
-
-
-
-
-
-
- | 用户 | -实例 | -数据库 | -表 | -字段权限 | -行级过滤 | -操作权限 | -操作 | -
|---|---|---|---|---|---|---|---|
| {p.user} | -{p.instance} | -{p.database} | -{p.table} | -
- {p.columns === '*' ? (
- 全部字段
- ) : (
-
- {p.columns.split(',').map(c => (
- {c}
- ))}
-
- )}
- |
- - {p.rowFilter ? ( - {p.rowFilter} - ) : ( - - - )} - | -
-
- {p.operations.map(op => (
- {op}
- ))}
-
- |
-
-
-
-
-
- |
-
;
}
function PostgreSQLIcon({ className }: { className?: string }) {
- return (
-
- );
+ return 
;
}
function RedisIcon({ className }: { className?: string }) {
- return (
-
- );
+ return 
;
}
function MongoDBIcon({ className }: { className?: string }) {
- return (
-
- );
+ return 
;
}
/* ---------- CreateInstanceForm ---------- */
@@ -377,6 +354,7 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: { defaultType:
const [password, setPassword] = useState('');
const [showPwd, setShowPwd] = useState(false);
const [database, setDatabase] = useState('');
+ const [redisDb, setRedisDb] = useState('0');
const [env, setEnv] = useState('development');
const [customEnv, setCustomEnv] = useState('');
const [accessMode, setAccessMode] = useState<'readwrite' | 'read' | 'write'>('readwrite');
@@ -474,7 +452,7 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: { defaultType:
))}
@@ -561,7 +539,7 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: { defaultType:
) : (
-
+ setRedisDb(e.target.value)} className={inputCls} placeholder="默认 0" />
)}
@@ -664,4 +642,4 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: { defaultType:
);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MongoDBDetailPage.tsx b/frontend/src/pages/MongoDBDetailPage.tsx
new file mode 100644
index 0000000..54ea5db
--- /dev/null
+++ b/frontend/src/pages/MongoDBDetailPage.tsx
@@ -0,0 +1,386 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowLeft, Database, Table2, Terminal, BarChart3, RefreshCw, Search, ChevronRight, FileJson } from 'lucide-react';
+import { mongoApi } from '@/api/mongo';
+
+type TabKey = 'collections' | 'documents' | 'cli' | 'stats';
+
+export default function MongoDBDetailPage() {
+ var params = useParams<{ id: string }>();
+ var navigate = useNavigate();
+ var instanceId = Number(params.id);
+
+ var [activeTab, setActiveTab] = useState
+
+ );
+}
diff --git a/frontend/src/pages/QueriesPage.tsx b/frontend/src/pages/QueriesPage.tsx
index 4edd844..2708a95 100644
--- a/frontend/src/pages/QueriesPage.tsx
+++ b/frontend/src/pages/QueriesPage.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import {
- Plus, Clock, X,
- AlertTriangle, CheckCircle, Play, Loader2,
+ Plus, X, AlertTriangle, CheckCircle, Play, Loader2,
+ ChevronDown, Clock, FileText, Sparkles,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useActionPermission } from '@/hooks/useAuth';
@@ -9,6 +9,9 @@ import PageHeader from '@/components/PageHeader';
import EmptyState from '@/components/EmptyState';
import { queryApi } from '@/api/query';
import { instanceApi } from '@/api/instance';
+import SqlEditor from '@/components/SqlEditor';
+import { queryTemplates, getTemplateSQL, getTemplatesForType } from '@/lib/queryTemplates';
+import type { DBType } from '@/lib/queryTemplates';
interface QueryResult {
columns: string[];
@@ -22,32 +25,46 @@ interface QueryHistoryItem {
sql: string;
instance_id: number;
database: string;
+ db_type: string;
status: string;
execution_time_ms: number;
result_preview: string;
created_at: string;
}
+const dbTypeLabel: Record
+
+
+
+ MongoDB 实例 #{instanceId}
+ 数据库管理 + +
+ {tabs.map(function (tab) {
+ var Icon = tab.icon;
+ var isActive = activeTab === tab.key;
+ return (
+
+ );
+ })}
+
+
+
+ 数据库:
+
+ {selectedDb && (
+
+ {collections.length} 个集合
+
+ )}
+
+
+
+ {activeTab === 'collections' && (
+
+
+ {databases.length === 0 && !loading && (
+
+ )}
+
+ {activeTab === 'documents' && (
+
+
+ )}
+ {collections.length > 0 && (
+ 暂无数据库，请确认连接状态
+
+
+
+
+
+ )}
+ {collections.length === 0 && selectedDb && !loading && (
+ | 集合名称 | +类型 | +操作 | +
|---|---|---|
|
+
+
+ |
+ + + {colType} + + | ++ + | +
+
+ )}
+ 该数据库中暂无集合
+
+ {!selectedCollection ? (
+
+ )}
+
+ {activeTab === 'cli' && (
+
+
+ ) : (
+ 请从集合管理中选择一个集合
+
+
+ )}
+
+ 筛选:
+
+
+
+
+
+ 集合: {selectedCollection}
+ {docCount > 0 && | 返回 {docCount} 条文档}
+
+
+ {error && (
+ {error}
+ )}
+
+ {documents.length > 0 ? (
+
+
+
+
+
+ ) : (
+ !loading && !error && (
+ | {key} | ; + })} +
|---|
| {display} | ; + })} +
+ 点击"查询"按钮加载文档
+
+ )
+ )}
+
+ {documents.length >= pageSize && (
+
+
+ 第 {docPage + 1} 页
+
+
+ )}
+
+
+ )}
+
+ {activeTab === 'stats' && (
+
+ 输入 JSON 格式的查询命令（需含 collection、operation 字段）
+
+
+
+
+ {cmdOutput.map(function (line, idx) {
+ return
+ {line};
+ })}
+ {cmdOutput.length === 0 && 等待输入查询命令...}
+
+
+
+
+
+ {!selectedCollection ? (
+
+ )}
+
+
+ ) : collectionStats ? (
+ 请从集合管理中选择一个集合查看统计
+
+
+ ) : !loading ? (
+
+
+ 集合: {selectedCollection}
+
+ {[
+ { label: '命名空间', value: collectionStats.ns || '-' },
+ { label: '文档数量', value: (collectionStats.count || 0).toLocaleString() },
+ { label: '数据大小', value: formatSize(collectionStats.size || 0) },
+ { label: '平均文档大小', value: formatSize(collectionStats.avgObjSize || 0) },
+ { label: '索引大小', value: formatSize(collectionStats.totalIndexSize || 0) },
+ { label: '索引数量', value: collectionStats.nindexes || 0 },
+ { label: '存储大小', value: formatSize(collectionStats.storageSize || 0) },
+ { label: '是否固定集合', value: collectionStats.capped ? '是' : '否' },
+ ].map(function (item) {
+ return (
+
+
+ {item.label}
+ {item.value}
+
+ );
+ })}
+
+ 无法获取统计信息
+
+ ) : null}
+ | SQL 语句 | +类型 | +语句 | 执行时长 | 状态 | 时间 | @@ -66,8 +84,13 @@ export default function QueriesPage() {
|---|---|---|---|---|---|
|
+ {q.db_type && dbTypeIcon[q.db_type] && (
+ |
- {q.sql.substring(0, 100)}
+ {q.sql.substring(0, 120)}
|
1000 ? 'text-red-400 font-medium' : ''}>{q.execution_time_ms}ms
@@ -90,7 +113,7 @@ export default function QueriesPage() {
);
}
-/* ---------- NewQueryPanel ---------- */
+/* ---------- NewQueryPanel with templates + CodeMirror ---------- */
function NewQueryPanel({ onCancel, onExecuted }: { onCancel: () => void; onExecuted: (item: QueryHistoryItem) => void }) {
const [sql, setSql] = useState('');
const [instanceId, setInstanceId] = useState('');
@@ -99,6 +122,7 @@ function NewQueryPanel({ onCancel, onExecuted }: { onCancel: () => void; onExecu
const [executing, setExecuting] = useState(false);
const [error, setError] = useState('');
const [result, setResult] = useState
-
+ {/* Instance + Database selector */}
新建查询- +
+
+
新建查询+ {selectedInstance && ( + +
-
- setDatabase(e.target.value)} className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" placeholder="可选，默认数据库" />
+ setDatabase(e.target.value)}
+ className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
+ placeholder="可选，默认数据库"
+ />
-
+
+
+
+
+
+ {/* Templates dropdown */}
+ {showTemplates && (
+
+
+ )}
+
+ {/* CodeMirror Editor */}
+ {templates.map(tpl => (
+
+ ))}
+
+
- |