jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 02:36:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

hide container table if no containers

Browse Source
This commit is contained in:
henrygd
2025-10-18 18:52:59 -04:00
parent 77dba42f17
commit f56093d0f0
2 changed files with 8 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
internal/site/src/components/containers-table/containers-table.tsx
View File

@@ -51,11 +51,12 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
} }
const fetchData = (lastXMs: number) => { const fetchData = (lastXMs: number) => {
const updated = Date.now() - lastXMs
let filter: string let filter: string
if (systemId) { if (systemId) {
filter = pb.filter("system={:system}", { system: systemId }) filter = pb.filter("system={:system} && updated > {:updated}", { system: systemId, updated })
} else { } else {
filter = pb.filter("updated > {:updated}", { updated: Date.now() - lastXMs }) filter = pb.filter("updated > {:updated}", { updated })
} }
pb.collection<ContainerRecord>("containers") pb.collection<ContainerRecord>("containers")
.getList(0, 2000, { .getList(0, 2000, {
@@ -133,6 +134,8 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
const rows = table.getRowModel().rows const rows = table.getRowModel().rows
const visibleColumns = table.getVisibleLeafColumns() const visibleColumns = table.getVisibleLeafColumns()
if (!rows.length) return null
return ( return (
<Card className="p-6 @container w-full"> <Card className="p-6 @container w-full">
<CardHeader className="p-0 mb-4"> <CardHeader className="p-0 mb-4">
@@ -370,7 +373,7 @@ function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpe
<MaximizeIcon className="size-4" /> <MaximizeIcon className="size-4" />
</Button> </Button>
</div> </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 dangerouslySetInnerHTML={{ __html: infoDisplay }} />
</div> </div>
@@ -461,8 +464,8 @@ function LogsFullscreenDialog({ open, onOpenChange, logsDisplay, containerName,
}} }}
className="absolute top-3 right-11 opacity-60 hover:opacity-100 p-1" className="absolute top-3 right-11 opacity-60 hover:opacity-100 p-1"
disabled={isRefreshing} disabled={isRefreshing}
title={t`Refresh logs`} title={t`Refresh`}
aria-label={t`Refresh logs`} aria-label={t`Refresh`}
> >
<RefreshCwIcon <RefreshCwIcon
className={`size-4 transition-transform duration-300 ${isRefreshing ? 'animate-spin' : ''}`} className={`size-4 transition-transform duration-300 ${isRefreshing ? 'animate-spin' : ''}`}

18
internal/site/src/components/routes/system.tsx
View File

@@ -172,7 +172,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
const [containerData, setContainerData] = useState([] as ChartData["containerData"]) const [containerData, setContainerData] = useState([] as ChartData["containerData"])
const netCardRef = useRef<HTMLDivElement>(null) const netCardRef = useRef<HTMLDivElement>(null)
const persistChartTime = useRef(false) const persistChartTime = useRef(false)
const [bottomSpacing, setBottomSpacing] = useState(0)
const [chartLoading, setChartLoading] = useState(true) const [chartLoading, setChartLoading] = useState(true)
const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
const userSettings = $userSettings.get() const userSettings = $userSettings.get()
@@ -397,20 +396,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
}[] }[]
}, [system, t]) }, [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 // keyboard navigation between systems
useEffect(() => { useEffect(() => {
if (!systems.length) { if (!systems.length) {
@@ -993,9 +978,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
<LazyContainersTable systemId={id} /> <LazyContainersTable systemId={id} />
)} )}
</div> </div>
{/* add space for tooltip if more than 12 containers */}
{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
</> </>
) )
}) })