correctly sort status column in containers table (#1294)

internal/site/src/components/containers-table/containers-table-columns.tsx

@@ -19,6 +19,20 @@ import { t } from "@lingui/core/macro"
 import { $allSystemsById } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 
+// Unit names and their corresponding number of seconds for converting docker status strings
+const unitSeconds = [["s", 1], ["mi", 60], ["h", 3600], ["d", 86400], ["w", 604800], ["mo", 2592000]] as const
+// Convert docker status string to number of seconds ("Up X minutes", "Up X hours", etc.)
+function getStatusValue(status: string): number {
+	const [_, num, unit] = status.split(" ")
+	const numValue = Number(num)
+	for (const [unitName, value] of unitSeconds) {
+		if (unit.startsWith(unitName)) {
+			return numValue * value
+		}
+	}
+	return 0
+}
+
 export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 	{
 		id: "name",
@@ -115,6 +129,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		id: "status",
 		accessorFn: (record) => record.status,
 		invertSorting: true,
+		sortingFn: (a, b) => getStatusValue(a.original.status) - getStatusValue(b.original.status),
 		header: ({ column }) => <HeaderButton column={column} name={t`Status`} Icon={HourglassIcon} />,
 		cell: ({ getValue }) => {
 			return <span className="ms-1.5 w-25 block truncate">{getValue() as string}</span>

internal/site/src/components/containers-table/containers-table.tsx

@@ -28,8 +28,9 @@ import { Button } from "@/components/ui/button"
 import { $allSystemsById } from "@/lib/stores"
 import { MaximizeIcon, RefreshCwIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
-import { Link } from "../router"
+import { $router, Link } from "../router"
 import { listenKeys } from "nanostores"
+import { getPagePath } from "@nanostores/router"
 
 const syntaxTheme = "github-dark-dimmed"
 
@@ -327,7 +328,7 @@ function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpe
 					<SheetHeader>
 						<SheetTitle>{container.name}</SheetTitle>
 						<SheetDescription className="flex items-center gap-2">
-							<Link className="hover:underline" href={`/system/${container.system}`}>{$allSystemsById.get()[container.system]?.name ?? ""}</Link>
+							<Link className="hover:underline" href={getPagePath($router, "system", { id: container.system })}>{$allSystemsById.get()[container.system]?.name ?? ""}</Link>
 							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
 							{container.status}
 							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />