pre release refactoring + update changelog

internal/site/src/components/alerts/alert-button.tsx

@@ -26,7 +26,7 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 						/>
 					</Button>
 				</SheetTrigger>
-				<SheetContent className="max-h-full overflow-auto w-145 !max-w-full p-4 sm:p-6">
+				<SheetContent className="max-h-full overflow-auto w-150 !max-w-full p-4 sm:p-6">
 					{opened && <AlertDialogContent system={system} />}
 				</SheetContent>
 			</Sheet>

internal/site/src/components/routes/system.tsx

@@ -1003,15 +1003,16 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</div>
 				)}
 
+				{compareSemVer(chartData.agentVersion, parseSemVer("0.15.0")) >= 0 && (
+					<LazySmartTable systemId={system.id} />
+				)}
 
 				{containerData.length > 0 && compareSemVer(chartData.agentVersion, parseSemVer("0.14.0")) >= 0 && (
 					<LazyContainersTable systemId={id} />
 				)}
-
-				<LazySmartTable systemId={system.id} />
 			</div>
 
-			{/* add space for tooltip if more than 12 containers */}
+			{/* add space for tooltip if lots of sensors */}
 			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
 		</>
 	)
@@ -1144,7 +1145,7 @@ const ContainersTable = lazy(() => import("../containers-table/containers-table"
 function LazyContainersTable({ systemId }: { systemId: string }) {
 	const { isIntersecting, ref } = useIntersectionObserver({ rootMargin: "90px" })
 	return (
-		<div ref={ref}>
+		<div ref={ref} className={cn(isIntersecting && "contents")}>
 			{isIntersecting && <ContainersTable systemId={systemId} />}
 		</div>
 	)
@@ -1153,9 +1154,9 @@ function LazyContainersTable({ systemId }: { systemId: string }) {
 const SmartTable = lazy(() => import("./system/smart-table"))
 
 function LazySmartTable({ systemId }: { systemId: string }) {
-	const { isIntersecting, ref } = useIntersectionObserver()
+	const { isIntersecting, ref } = useIntersectionObserver({ rootMargin: "90px" })
 	return (
-		<div ref={ref}>
+		<div ref={ref} className={cn(isIntersecting && "contents")}>
 			{isIntersecting && <SmartTable systemId={systemId} />}
 		</div>
 	)

internal/site/src/components/routes/system/smart-table.tsx

@@ -252,7 +252,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
 ]
 
 export default function DisksTable({ systemId }: { systemId: string }) {
-   const [sorting, setSorting] = React.useState<SortingState>([{ id: "device", desc: false }])
+   // const [sorting, setSorting] = React.useState<SortingState>([{ id: "device", desc: false }])
    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
    const [rowSelection, setRowSelection] = React.useState({})
    const [smartData, setSmartData] = React.useState<Record<string, SmartData> | undefined>(undefined)
@@ -284,19 +284,23 @@ export default function DisksTable({ systemId }: { systemId: string }) {
    const table = useReactTable({
       data: diskData,
       columns: columns,
-      onSortingChange: setSorting,
+      // onSortingChange: setSorting,
       onColumnFiltersChange: setColumnFilters,
       getCoreRowModel: getCoreRowModel(),
       getSortedRowModel: getSortedRowModel(),
       getFilteredRowModel: getFilteredRowModel(),
       onRowSelectionChange: setRowSelection,
       state: {
-         sorting,
+         // sorting,
          columnFilters,
          rowSelection,
       },
    })
 
+   if (!diskData.length && !columnFilters.length) {
+      return null
+   }
+
    return (
       <div>
          <Card className="p-6 @container w-full">

internal/site/src/lib/utils.ts

@@ -367,6 +367,12 @@ export function formatDuration(
 		.join(" ")
 }
 
+/** Parse semver string into major, minor, and patch numbers 
+ * @example
+ * const semVer = "1.2.3"
+ * const { major, minor, patch } = parseSemVer(semVer)
+ * console.log(major, minor, patch) // 1, 2, 3
+*/
 export const parseSemVer = (semVer = ""): SemVer => {
 	// if (semVer.startsWith("v")) {
 	// 	semVer = semVer.slice(1)