import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { Box, Tooltip, useTheme } from '@mui/material'
import { Schedule, Delete, Add } from '@mui/icons-material'
import { useI18nStore } from '../../stores/i18n.store'
import { useRedisStateStore, getPaginatedKeys } from '../../stores/redis-state.store'
import { useSettingsStore } from '../../stores/settings.store'
import { useCommonStore, onTreeEvent, emitTreeEvent } from '../../stores/common.store'
import { useMainCommandStore, onCommandEvent } from '../../stores/main-command.store'
import { request } from '../../stores/socket.service'
import { navigateTo } from '../../stores/navigation.store'
import { keysToTreeControl } from '../../stores/tree-builder'
import KeyNewOrSetDialog from '../../dialogs/KeyNewOrSetDialog'
import humanizeDuration from 'humanize-duration'
const ROW_HEIGHT = 28
const INDENT_PX = 20
export interface FlatTreeNode {
label: string
key: string
level: number
expandable: boolean
type: 'folder' | 'element'
childCount: number
keysInfo?: { type: string; length: number; ttl?: number }
_sourceNode?: any
}
// Type icon map
const typeIcons: Record<string, string> = {
hash: 'fas fa-hashtag',
list: 'fas fa-list-ol',
set: 'fas fa-list',
string: 'fas fa-ellipsis-h',
zset: 'fas fa-chart-line',
stream: 'fas fa-stream',
json: 'fas fa-code',
timeseries: 'fas fa-chart-area',
}
export default function DatabaseTree({ resizeSignal }: { resizeSignal?: any }) {
const strings = useI18nStore(s => s.strings)
const keysRaw = useRedisStateStore(s => s.keysRaw)
const keysInfo = useRedisStateStore(s => s.keysInfo)
const page = useRedisStateStore(s => s.page)
const search = useRedisStateStore(s => s.search)
const connection = useRedisStateStore(s => s.connection)
const redisTreeDivider = useSettingsStore(s => s.redisTreeDivider)
const muiTheme = useTheme()
const { confirm, toast, generalHandleError } = useCommonStore()
const { refresh } = useMainCommandStore()
const isReadonly = connection?.readonly === true
const divider = redisTreeDivider || ':'
const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())
const [keyNewDialogOpen, setKeyNewDialogOpen] = useState(false)
const [keyNewDialogData, setKeyNewDialogData] = useState<any>(null)
const [hierarchicalNodes, setHierarchicalNodes] = useState<any[]>([])
const [, setTick] = useState(0) // for TTL repaints
const parentRef = useRef<HTMLDivElement>(null)
// Build tree when keys, divider, or page change
useEffect(() => {
const paginatedKeys = getPaginatedKeys()
keysToTreeControl({
keys: paginatedKeys,
divider,
keysInfo: keysInfo ?? {},
}).then(({ nodes }) => {
setHierarchicalNodes(nodes)
})
}, [keysRaw, keysInfo, divider, page, search])
// Flatten visible nodes
const dataSource = useMemo(() => {
const result: FlatTreeNode[] = []
const flatten = (nodes: any[], level: number) => {
for (const node of nodes) {
result.push({
label: node.label,
key: node.key,
level,
expandable: node.type === 'folder',
type: node.type,
childCount: node.childCount ?? 0,
keysInfo: node.keysInfo,
_sourceNode: node,
})
if (node.type === 'folder' && expandedKeys.has(node.key) && node.children?.length > 0) {
flatten(node.children, level + 1)
}
}
}
flatten(hierarchicalNodes, 0)
return result
}, [hierarchicalNodes, expandedKeys])
// Virtual scrolling
const virtualizer = useVirtualizer({
count: dataSource.length,
getScrollElement: () => parentRef.current,
estimateSize: () => ROW_HEIGHT,
overscan: 10,
})
// Re-measure when container resizes (console expand/collapse)
useEffect(() => {
virtualizer.measure()
}, [resizeSignal])
// Toggle expand/collapse
const toggleExpand = useCallback((key: string) => {
setExpandedKeys(prev => {
const next = new Set(prev)
if (next.has(key)) next.delete(key)
else next.add(key)
return next
})
}, [])
// Select a key node
const selectNode = useCallback((node: FlatTreeNode) => {
navigateTo('database.key', { key: node.key })
}, [])
// Listen for key-new events from add buttons
useEffect(() => {
return onCommandEvent('key-new', (data: any) => {
setKeyNewDialogData({ type: 'add', node: data?.node })
setKeyNewDialogOpen(true)
})
}, [])
const handleKeyNewClose = useCallback(async (result?: any) => {
setKeyNewDialogOpen(false)
setKeyNewDialogData(null)
if (result?.key) {
await useMainCommandStore.getState().refresh({ withoutParent: false, force: true })
navigateTo('database.key', { key: result.key })
}
}, [])
// Tree command event subscriptions
useEffect(() => {
const unsubs = [
onTreeEvent('expand-all', () => {
const allKeys = new Set<string>()
const collect = (nodes: any[]) => {
for (const node of nodes) {
if (node.type === 'folder') {
allKeys.add(node.key)
collect(node.children ?? [])
}
}
}
collect(hierarchicalNodes)
setExpandedKeys(allKeys)
}),
onTreeEvent('collapse-all', () => {
setExpandedKeys(new Set())
}),
...[1, 2, 3, 4, 5].map(level =>
onTreeEvent(`expand-level-${level}`, () => {
const keys = new Set<string>()
const collect = (nodes: any[], depth: number) => {
for (const node of nodes) {
if (node.type === 'folder') {
if (depth < level) keys.add(node.key)
collect(node.children ?? [], depth + 1)
}
}
}
collect(hierarchicalNodes, 0)
setExpandedKeys(keys)
})
),
]
return () => unsubs.forEach(fn => fn())
}, [hierarchicalNodes])
// TTL adaptive repaint
useEffect(() => {
let timer: any
const tick = () => {
let minTtl = Infinity
let hasExpired = false
const fetchedAt = useRedisStateStore.getState().keysInfoFetchedAt ?? Date.now()
const now = Date.now()
for (const node of dataSource) {
if (node.type === 'folder') continue
const serverTtl = node.keysInfo?.ttl
if (!serverTtl || serverTtl <= 0) continue
const elapsed = Math.floor((now - fetchedAt) / 1000)
const remaining = serverTtl - elapsed
if (remaining <= 0) hasExpired = true
else if (remaining < minTtl) minTtl = remaining
}
if (hasExpired) {
refresh()
timer = setTimeout(tick, 3000)
return
}
setTick(t => t + 1)
let interval: number
if (minTtl <= 30) interval = 1000
else if (minTtl <= 300) interval = 5000
else interval = 30000
timer = setTimeout(tick, interval)
}
timer = setTimeout(tick, 1000)
return () => clearTimeout(timer)
}, [dataSource])
// --- TTL helpers ---
const getRemainingTtl = useCallback((node: FlatTreeNode): number => {
const ttl = node.keysInfo?.ttl
if (!ttl || ttl <= 0) return -1
const fetchedAt = useRedisStateStore.getState().keysInfoFetchedAt ?? Date.now()
const elapsed = Math.floor((Date.now() - fetchedAt) / 1000)
const remaining = ttl - elapsed
return remaining > 0 ? remaining : -1
}, [])
const formatTtl = useCallback((node: FlatTreeNode): string => {
const remaining = getRemainingTtl(node)
if (remaining <= 0) return ''
const hdOpts = useSettingsStore.getState().getHumanizeDurationOptions()
return humanizeDuration(remaining * 1000, {
...hdOpts,
largest: 2,
round: true,
delimiter: ' ',
})
}, [getRemainingTtl])
const getTtlColor = useCallback((node: FlatTreeNode): string => {
const remaining = getRemainingTtl(node)
if (remaining <= 0) return ''
if (remaining < 300) return '#f44336' // red
if (remaining < 3600) return '#ff9800' // yellow/orange
return '#4caf50' // green
}, [getRemainingTtl])
const isTtlPulsing = useCallback((node: FlatTreeNode): boolean => {
return getRemainingTtl(node) > 0 && getRemainingTtl(node) < 30
}, [getRemainingTtl])
// --- Node actions ---
const deleteKey = useCallback(async (e: React.MouseEvent, key: string) => {
e.preventDefault()
e.stopPropagation()
try {
await confirm({ message: strings?.confirm?.deleteKey })
await request({ action: 'delete', payload: { key } })
navigateTo('database.statistics')
toast(typeof strings?.status?.deletedKey === 'function' ? strings.status.deletedKey({ key }) : '')
await refresh()
} catch (err) {
generalHandleError(err)
}
}, [strings, confirm, toast, refresh, generalHandleError])
const deleteTree = useCallback(async (e: React.MouseEvent, node: FlatTreeNode) => {
e.stopPropagation()
try {
const msg = typeof strings?.confirm?.deleteAllKeys === 'function'
? strings.confirm.deleteAllKeys({ key: node.key }) : ''
await confirm({ message: msg })
await request({
action: 'key-del-tree',
payload: { key: node.key, redisTreeDivider: divider },
})
const toastMsg = typeof strings?.status?.treeDeleted === 'function'
? strings.status.treeDeleted({ key: node.key }) : ''
toast(toastMsg)
await refresh()
} catch (err) {
generalHandleError(err)
}
}, [strings, divider, confirm, toast, refresh, generalHandleError])
const addKey = useCallback((e: React.MouseEvent, node: FlatTreeNode) => {
e.stopPropagation()
useMainCommandStore.getState().addKey({ event: e.nativeEvent, node: node._sourceNode ?? { key: node.key } })
}, [])
// --- Tooltip helpers ---
const nodeTooltip = useCallback((node: FlatTreeNode): string => {
if (node.type !== 'folder' && node.keysInfo) {
const typeName = strings?.redisTypes?.[node.keysInfo.type] ?? node.keysInfo.type
return typeName + ' - ' + node.key
}
return node.key
}, [strings])
const dialogEl = <KeyNewOrSetDialog open={keyNewDialogOpen} data={keyNewDialogData} onClose={handleKeyNewClose} />
if (dataSource.length === 0) {
return (
<Box sx={{ p: 1, opacity: 0.5, fontSize: 13 }}>
{strings?.label?.noKeys}
{dialogEl}
</Box>
)
}
return (
<Box ref={parentRef} sx={{ height: '100%', width: '100%', overflow: 'auto' }}>
<Box sx={{ height: virtualizer.getTotalSize(), width: '100%', position: 'relative' }}>
{virtualizer.getVirtualItems().map(virtualRow => {
const node = dataSource[virtualRow.index]
const remaining = getRemainingTtl(node)
const ttlColor = getTtlColor(node)
const pulsing = isTtlPulsing(node)
return (
<Box
key={`${node.type}-${node.key}`}
data-p3xr-tree-key={node.type === 'folder' ? '' : node.key}
sx={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: ROW_HEIGHT,
transform: `translateY(${virtualRow.start}px)`,
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
cursor: 'default',
pl: `${node.level * INDENT_PX + 4}px`,
'&:hover .tree-actions': { visibility: 'visible' },
}}
>
{/* Folder icon (no spacer for elements — matches Angular) */}
{node.expandable && (
<Box
component="span"
onClick={(e: React.MouseEvent) => { e.stopPropagation(); toggleExpand(node.key) }}
sx={{
display: 'inline-block',
fontFamily: "'Font Awesome 5 Free'",
fontWeight: 900,
fontSize: 24,
lineHeight: '28px',
width: 28,
textAlign: 'center',
mr: '4px',
cursor: 'pointer',
color: muiTheme.p3xr.treeBranchColor,
'&::before': {
content: expandedKeys.has(node.key) ? '"\\f07c"' : '"\\f07b"',
},
}}
/>
)}
{/* Node label area */}
<Tooltip title={nodeTooltip(node)} placement="right" enterDelay={500}
slotProps={{ popper: { sx: { ml: '36px !important' } } }}>
<Box
component="label"
className="p3xr-database-tree-node"
onClick={() => node.expandable ? toggleExpand(node.key) : selectNode(node)}
sx={{
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
height: ROW_HEIGHT,
whiteSpace: 'nowrap',
}}
>
{/* Type icon — same box size as folder icon for alignment */}
{node.type !== 'folder' && node.keysInfo && typeIcons[node.keysInfo.type] && (
<i
className={typeIcons[node.keysInfo.type]}
aria-hidden="true"
style={{ display: 'inline-block', width: 28, textAlign: 'center', marginRight: 4, fontSize: 14 }}
/>
)}
<span className="p3xr-database-tree-node-label">{node.label}</span>
{/* Folder child count */}
{node.type === 'folder' && (
<span style={{ opacity: 0.5, marginLeft: 4 }}>
{divider}* <span>({node.childCount})</span>
</span>
)}
{/* Element length (non-string/json) */}
{node.type !== 'folder' && node.keysInfo?.type !== 'string' && node.keysInfo?.type !== 'json' && node.keysInfo && (
<span style={{ opacity: 0.5, marginLeft: 4 }}>({node.keysInfo.length})</span>
)}
</Box>
</Tooltip>
{/* TTL badge */}
{node.type !== 'folder' && remaining > 0 && (
<Tooltip title={`TTL: ${formatTtl(node)}`} placement="right" enterDelay={300}
slotProps={{ popper: { sx: { ml: '36px !important' } } }}>
<Box component="span" sx={{
display: 'inline-flex',
alignItems: 'center',
ml: '4px',
animation: pulsing ? 'p3xr-ttl-pulse 1s infinite' : 'none',
'@keyframes p3xr-ttl-pulse': {
'0%, 100%': { opacity: 0.7 },
'50%': { opacity: 1 },
},
}}>
<Schedule sx={{ fontSize: 16, color: ttlColor }} />
</Box>
</Tooltip>
)}
{/* Action buttons (hover) — height matches row for continuous hover */}
{!isReadonly && (
<Box component="span" className="tree-actions" sx={{
display: 'inline-flex',
alignItems: 'center',
visibility: 'hidden',
height: ROW_HEIGHT,
position: 'relative',
top: -1,
}}>
{node.type === 'folder' ? (
<Tooltip title={typeof strings?.confirm?.deleteAllKeys === 'function' ? strings.confirm.deleteAllKeys({ key: node.key }) : ''} placement="right" enterDelay={300}
slotProps={{ popper: { sx: { ml: '36px !important' } } }}>
<Delete
onClick={(e) => deleteTree(e, node)}
sx={{ fontSize: '18px !important', width: 18, height: 18, cursor: 'pointer', color: 'error.main' }}
/>
</Tooltip>
) : (
<Tooltip title={strings?.intention?.delete} placement="right" enterDelay={300}
slotProps={{ popper: { sx: { ml: '36px !important' } } }}>
<Delete
onClick={(e) => deleteKey(e, node.key)}
sx={{ fontSize: '18px !important', width: 18, height: 18, cursor: 'pointer', color: 'error.main' }}
/>
</Tooltip>
)}
<Tooltip title={strings?.intention?.addKey} placement="right" enterDelay={300}
slotProps={{ popper: { sx: { ml: '36px !important' } } }}>
<Add
onClick={(e) => addKey(e, node)}
sx={{ fontSize: '18px !important', width: 18, height: 18, cursor: 'pointer', color: muiTheme.p3xr.commonWarnColor }}
/>
</Tooltip>
</Box>
)}
</Box>
)
})}
</Box>
{dialogEl}
</Box>
)
}