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>