feat: 查询页目标数据库改为下拉选择
- 选实例后自动加载该实例的数据库列表 (SHOW DATABASES) - 手动输入框改为 select 下拉,选库更方便 - Redis/MongoDB 实例不显示数据库下拉
This commit is contained in:
1 parent
e6ab5bf496
commit
aa2e26c827
1 file changed
+25
-3
@@ -291,6 +291,8 @@ function NewQueryPanel({
|
|||||||
const [sql, setSql] = useState('');
|
const [sql, setSql] = useState('');
|
||||||
const [instanceId, setInstanceId] = useState('');
|
const [instanceId, setInstanceId] = useState('');
|
||||||
const [database, setDatabase] = useState('');
|
const [database, setDatabase] = useState('');
|
||||||
|
const [databases, setDatabases] = useState<string[]>([]);
|
||||||
|
const [loadingDbs, setLoadingDbs] = useState(false);
|
||||||
const [instances, setInstances] = useState<Array<{ id: number; name: string; host: string; port: number; db_type: string }>>([]);
|
const [instances, setInstances] = useState<Array<{ id: number; name: string; host: string; port: number; db_type: string }>>([]);
|
||||||
const [executing, setExecuting] = useState(false);
|
const [executing, setExecuting] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
@@ -312,6 +314,22 @@ function NewQueryPanel({
|
|||||||
}).catch(() => { setInstances([]); });
|
}).catch(() => { setInstances([]); });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// 选实例后加载数据库列表
|
||||||
|
useEffect(() => {
|
||||||
|
if (!instanceId) { setDatabases([]); setDatabase(''); return; }
|
||||||
|
const inst = instances.find(i => String(i.id) === instanceId);
|
||||||
|
const type = inst?.db_type || '';
|
||||||
|
if (type === 'mysql' || type === 'postgres' || type === 'postgresql') {
|
||||||
|
setLoadingDbs(true);
|
||||||
|
instanceDetailApi.listDatabases(Number(instanceId))
|
||||||
|
.then(data => setDatabases(Array.isArray(data) ? data : []))
|
||||||
|
.catch(() => setDatabases([]))
|
||||||
|
.finally(() => setLoadingDbs(false));
|
||||||
|
} else {
|
||||||
|
setDatabases([]);
|
||||||
|
}
|
||||||
|
}, [instanceId, instances]);
|
||||||
|
|
||||||
const selectedInstance = useMemo(() => {
|
const selectedInstance = useMemo(() => {
|
||||||
return instances.find(inst => String(inst.id) === instanceId);
|
return instances.find(inst => String(inst.id) === instanceId);
|
||||||
}, [instances, instanceId]);
|
}, [instances, instanceId]);
|
||||||
@@ -558,12 +576,16 @@ function NewQueryPanel({
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-2">目标数据库</label>
|
<label className="block text-sm font-medium mb-2">目标数据库</label>
|
||||||
<input
|
<select
|
||||||
value={database}
|
value={database}
|
||||||
onChange={e => setDatabase(e.target.value)}
|
onChange={e => 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 transition-colors"
|
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 transition-colors"
|
||||||
placeholder="可选,默认数据库"
|
>
|
||||||
/>
|
<option value="">{loadingDbs ? '加载中...' : databases.length > 0 ? '请选择数据库(可选)' : '选择实例后可选'}</option>
|
||||||
|
{databases.map(db => (
|
||||||
|
<option key={db} value={db}>{db}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user