mirror of
https://github.com/henrygd/beszel.git
synced 2025-12-17 10:46:16 +01:00
hide container table if no containers
This commit is contained in:
@@ -51,11 +51,12 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
|
||||
}
|
||||
|
||||
const fetchData = (lastXMs: number) => {
|
||||
const updated = Date.now() - lastXMs
|
||||
let filter: string
|
||||
if (systemId) {
|
||||
filter = pb.filter("system={:system}", { system: systemId })
|
||||
filter = pb.filter("system={:system} && updated > {:updated}", { system: systemId, updated })
|
||||
} else {
|
||||
filter = pb.filter("updated > {:updated}", { updated: Date.now() - lastXMs })
|
||||
filter = pb.filter("updated > {:updated}", { updated })
|
||||
}
|
||||
pb.collection<ContainerRecord>("containers")
|
||||
.getList(0, 2000, {
|
||||
@@ -133,6 +134,8 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
|
||||
const rows = table.getRowModel().rows
|
||||
const visibleColumns = table.getVisibleLeafColumns()
|
||||
|
||||
if (!rows.length) return null
|
||||
|
||||
return (
|
||||
<Card className="p-6 @container w-full">
|
||||
<CardHeader className="p-0 mb-4">
|
||||
@@ -370,7 +373,7 @@ function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpe
|
||||
<MaximizeIcon className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={cn("grow h-[calc(50dvh-2rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !infoDisplay && "animate-pulse")}>
|
||||
<div className={cn("grow h-[calc(50dvh-4rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !infoDisplay && "animate-pulse")}>
|
||||
<div dangerouslySetInnerHTML={{ __html: infoDisplay }} />
|
||||
</div>
|
||||
|
||||
@@ -461,8 +464,8 @@ function LogsFullscreenDialog({ open, onOpenChange, logsDisplay, containerName,
|
||||
}}
|
||||
className="absolute top-3 right-11 opacity-60 hover:opacity-100 p-1"
|
||||
disabled={isRefreshing}
|
||||
title={t`Refresh logs`}
|
||||
aria-label={t`Refresh logs`}
|
||||
title={t`Refresh`}
|
||||
aria-label={t`Refresh`}
|
||||
>
|
||||
<RefreshCwIcon
|
||||
className={`size-4 transition-transform duration-300 ${isRefreshing ? 'animate-spin' : ''}`}
|
||||
|
||||
@@ -172,7 +172,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
|
||||
const [containerData, setContainerData] = useState([] as ChartData["containerData"])
|
||||
const netCardRef = useRef<HTMLDivElement>(null)
|
||||
const persistChartTime = useRef(false)
|
||||
const [bottomSpacing, setBottomSpacing] = useState(0)
|
||||
const [chartLoading, setChartLoading] = useState(true)
|
||||
const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
|
||||
const userSettings = $userSettings.get()
|
||||
@@ -397,20 +396,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
|
||||
}[]
|
||||
}, [system, t])
|
||||
|
||||
/** Space for tooltip if more than 12 containers */
|
||||
useEffect(() => {
|
||||
if (!netCardRef.current || !containerData.length) {
|
||||
setBottomSpacing(0)
|
||||
return
|
||||
}
|
||||
const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
|
||||
const wrapperEl = chartWrapRef.current as HTMLDivElement
|
||||
const wrapperRect = wrapperEl.getBoundingClientRect()
|
||||
const chartRect = netCardRef.current.getBoundingClientRect()
|
||||
const distanceToBottom = wrapperRect.bottom - chartRect.bottom
|
||||
setBottomSpacing(tooltipHeight - distanceToBottom)
|
||||
}, [containerData])
|
||||
|
||||
// keyboard navigation between systems
|
||||
useEffect(() => {
|
||||
if (!systems.length) {
|
||||
@@ -993,9 +978,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
|
||||
<LazyContainersTable systemId={id} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* add space for tooltip if more than 12 containers */}
|
||||
{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user