feat: Redis cluster UI - SchemaSidebar 集群db0锁定 + InstanceItem cluster_mode 字段
This commit is contained in:
1 parent
3af65f2350
commit
c18fc9bd70
3 files changed
+13
-2
No files matched your search
@@ -14,6 +14,8 @@ interface Props {
|
|||||||
instanceId: string;
|
instanceId: string;
|
||||||
database: string;
|
database: string;
|
||||||
dbType: string;
|
dbType: string;
|
||||||
|
/** Redis 集群模式为 true */
|
||||||
|
clusterMode?: boolean;
|
||||||
onInsert: (text: string) => void;
|
onInsert: (text: string) => void;
|
||||||
onDatabaseChange?: (db: string) => void;
|
onDatabaseChange?: (db: string) => void;
|
||||||
/** 为 true 时只显示当前选中的库,不允许切换(数据变更场景防误操作) */
|
/** 为 true 时只显示当前选中的库,不允许切换(数据变更场景防误操作) */
|
||||||
@@ -193,7 +195,7 @@ function formatTTL(ttl: number): string {
|
|||||||
/* COMPONENT */
|
/* COMPONENT */
|
||||||
/* ================================================================== */
|
/* ================================================================== */
|
||||||
|
|
||||||
export default function SchemaSidebar({ instanceId, database, dbType, onInsert, onDatabaseChange, singleDb }: Props) {
|
export default function SchemaSidebar({ instanceId, database, dbType, clusterMode, onInsert, onDatabaseChange, singleDb }: Props) {
|
||||||
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
||||||
const isRedis = dbType === 'redis';
|
const isRedis = dbType === 'redis';
|
||||||
|
|
||||||
@@ -617,6 +619,11 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert,
|
|||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{/* DB + Search */}
|
{/* DB + Search */}
|
||||||
<div className="px-2 py-2 border-b border-[var(--dg-border-light)] space-y-1.5">
|
<div className="px-2 py-2 border-b border-[var(--dg-border-light)] space-y-1.5">
|
||||||
|
{clusterMode ? (
|
||||||
|
<div className="px-2 py-1 text-[10px] text-amber-400 bg-amber-500/10 rounded text-center">
|
||||||
|
集群模式 · DB0
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<select
|
<select
|
||||||
value={redisDb}
|
value={redisDb}
|
||||||
onChange={(e) => { setRedisDb(Number(e.target.value)); }}
|
onChange={(e) => { setRedisDb(Number(e.target.value)); }}
|
||||||
@@ -626,6 +633,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert,
|
|||||||
<option key={i} value={i}>DB{i}</option>
|
<option key={i} value={i}>DB{i}</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
)}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--dg-text-muted)]" />
|
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--dg-text-muted)]" />
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ export default function QueriesPage() {
|
|||||||
const [database, setDatabase] = useState('');
|
const [database, setDatabase] = useState('');
|
||||||
const [databases, setDatabases] = useState<string[]>([]);
|
const [databases, setDatabases] = useState<string[]>([]);
|
||||||
const [loadingDbs, setLoadingDbs] = useState(false);
|
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; cluster_mode?: boolean }>>([]);
|
||||||
const [editorSchema, setEditorSchema] = useState<Record<string, Record<string, string[]>>>({});
|
const [editorSchema, setEditorSchema] = useState<Record<string, Record<string, string[]>>>({});
|
||||||
const [executing, setExecuting] = useState(false);
|
const [executing, setExecuting] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
@@ -432,6 +432,7 @@ export default function QueriesPage() {
|
|||||||
{showSidebar && instanceId && (
|
{showSidebar && instanceId && (
|
||||||
<div className="w-[280px] shrink-0">
|
<div className="w-[280px] shrink-0">
|
||||||
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
||||||
|
clusterMode={selectedInstance?.cluster_mode}
|
||||||
onInsert={(text) => {
|
onInsert={(text) => {
|
||||||
const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : '');
|
const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : '');
|
||||||
setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' '));
|
setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' '));
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ interface InstanceItem {
|
|||||||
host: string;
|
host: string;
|
||||||
port: number;
|
port: number;
|
||||||
db_type: string;
|
db_type: string;
|
||||||
|
cluster_mode?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AuditFinding {
|
interface AuditFinding {
|
||||||
@@ -350,6 +351,7 @@ export default function TicketCreatePage() {
|
|||||||
{showBrowser && instanceId && (
|
{showBrowser && instanceId && (
|
||||||
<div className="w-[280px] shrink-0">
|
<div className="w-[280px] shrink-0">
|
||||||
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
||||||
|
clusterMode={selectedInstance?.cluster_mode}
|
||||||
onInsert={handleSchemaInsert} singleDb />
|
onInsert={handleSchemaInsert} singleDb />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user