Add default filter (Status) to occupancy page and compact bytes unit (#668)

* Add default filter (STATUS) to occupancy page

* Use compact bytes unit in Occupancy page

Author: fernandol-nvidia

src/ui/src/app/(dashboard)/occupancy/occupancy-page-content.tsx

@@ -27,10 +27,11 @@
 
 import { useMemo, useCallback, useState } from "react";
 import { useQueryState, parseAsStringLiteral } from "nuqs";
+import { TaskGroupStatus } from "@/lib/api/generated";
 import { InlineErrorBoundary } from "@/components/error/inline-error-boundary";
 import { usePage } from "@/components/chrome/page-context";
 import { useResultsCount } from "@/components/filter-bar/hooks/use-results-count";
-import { useUrlChips } from "@/components/filter-bar/hooks/use-url-chips";
+import { useDefaultFilter } from "@/components/filter-bar/hooks/use-default-filter";
 import { OccupancyToolbar } from "@/features/occupancy/components/occupancy-toolbar";
 import { OccupancySummary } from "@/features/occupancy/components/occupancy-summary";
 import { OccupancyDataTable } from "@/features/occupancy/components/occupancy-data-table";
@@ -58,10 +59,13 @@ export function OccupancyPageContent() {
 
   const [groupBy, setGroupBy] = useQueryState(
     "groupBy",
-    parseAsGroupBy.withDefault("user").withOptions({ shallow: true, history: "replace", clearOnDefault: true }),
+    parseAsGroupBy.withDefault("pool").withOptions({ shallow: true, history: "replace", clearOnDefault: true }),
   );
 
-  const { searchChips, setSearchChips } = useUrlChips();
+  const { effectiveChips: searchChips, handleChipsChange: setSearchChips } = useDefaultFilter({
+    field: "status",
+    defaultValue: TaskGroupStatus.RUNNING,
+  });
 
   // ==========================================================================
   // Sort state from table store

src/ui/src/features/occupancy/components/occupancy-column-defs.tsx

@@ -18,7 +18,7 @@
 
 import type { ColumnDef } from "@tanstack/react-table";
 import { ChevronRight } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, formatCompact, formatBytes } from "@/lib/utils";
 import type { OccupancyFlatRow, OccupancyGroupBy } from "@/lib/api/adapter/occupancy";
 
 // =============================================================================
@@ -36,7 +36,18 @@ const PRIORITY_COLOR: Record<"high" | "normal" | "low", string> = {
 // =============================================================================
 
 function ResourceCell({ value }: { value: number }) {
-  return <span className="text-sm text-zinc-700 tabular-nums dark:text-zinc-300">{value}</span>;
+  return <span className="text-sm text-zinc-700 tabular-nums dark:text-zinc-300">{formatCompact(value)}</span>;
+}
+
+function BytesCell({ value }: { value: number }) {
+  if (value === 0) return <span className="text-zinc-300 dark:text-zinc-600">—</span>;
+  const { value: val, unit } = formatBytes(value);
+  return (
+    <span className="text-sm text-zinc-700 tabular-nums dark:text-zinc-300">
+      {val}
+      <span className="ml-0.5 text-xs text-zinc-400">{unit}</span>
+    </span>
+  );
 }
 
 function PriorityBadge({ value, colorClass }: { value: number; colorClass: string }) {
@@ -142,22 +153,22 @@ export function createOccupancyColumns(groupBy: OccupancyGroupBy): ColumnDef<Occ
       cell: ({ row }) => <ResourceCell value={row.original.cpu} />,
     },
 
-    // Memory
+    // Memory (GiB)
     {
       id: "memory",
       accessorFn: (row) => row.memory,
       enableSorting: true,
       header: "Memory",
-      cell: ({ row }) => <ResourceCell value={row.original.memory} />,
+      cell: ({ row }) => <BytesCell value={row.original.memory} />,
     },
 
-    // Storage
+    // Storage (GiB)
     {
       id: "storage",
       accessorFn: (row) => row.storage,
       enableSorting: true,
       header: "Storage",
-      cell: ({ row }) => <ResourceCell value={row.original.storage} />,
+      cell: ({ row }) => <BytesCell value={row.original.storage} />,
     },
 
     // High priority count

src/ui/src/features/occupancy/components/occupancy-summary.tsx

@@ -19,7 +19,7 @@
 import { memo } from "react";
 import { Cpu, HardDrive, MemoryStick, Zap } from "lucide-react";
 import { Skeleton } from "@/components/shadcn/skeleton";
-import { formatCompact } from "@/lib/utils";
+import { formatCompact, formatBytes } from "@/lib/utils";
 import type { OccupancyTotals } from "@/lib/api/adapter/occupancy";
 
 // =============================================================================
@@ -36,13 +36,27 @@ interface KpiCardProps {
   value: number;
   Icon: React.ElementType;
   colorClass: string;
+  isBytes?: boolean;
 }
 
 // =============================================================================
 // Card
 // =============================================================================
 
-const KpiCard = memo(function KpiCard({ label, value, Icon, colorClass }: KpiCardProps) {
+const KpiCard = memo(function KpiCard({ label, value, Icon, colorClass, isBytes = false }: KpiCardProps) {
+  let display: React.ReactNode;
+  if (isBytes) {
+    const { value: val, unit } = formatBytes(value);
+    display = (
+      <>
+        {val}
+        <span className="ml-1 text-base font-medium text-zinc-400">{unit}</span>
+      </>
+    );
+  } else {
+    display = formatCompact(value);
+  }
+
   return (
     <div className="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950">
       <div className="flex items-center gap-1.5">
@@ -52,7 +66,7 @@ const KpiCard = memo(function KpiCard({ label, value, Icon, colorClass }: KpiCar
         <span className="text-xs font-medium tracking-wider text-zinc-500 uppercase dark:text-zinc-400">{label}</span>
       </div>
       <div className="mt-2 tabular-nums">
-        <span className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">{formatCompact(value)}</span>
+        <span className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">{display}</span>
       </div>
     </div>
   );
@@ -95,12 +109,14 @@ export const OccupancySummary = memo(function OccupancySummary({ totals, isLoadi
         value={totals.memory}
         Icon={MemoryStick}
         colorClass="text-purple-500"
+        isBytes
       />
       <KpiCard
         label="Storage"
         value={totals.storage}
         Icon={HardDrive}
         colorClass="text-zinc-500"
+        isBytes
       />
     </div>
   );

src/ui/src/features/occupancy/components/occupancy-toolbar.tsx

@@ -51,8 +51,8 @@ export interface OccupancyToolbarProps {
 // =============================================================================
 
 const GROUP_BY_OPTIONS: { value: OccupancyGroupBy; label: string }[] = [
-  { value: "user", label: "By User" },
   { value: "pool", label: "By Pool" },
+  { value: "user", label: "By User" },
 ];
 
 function GroupByToggle({ value, onChange }: { value: OccupancyGroupBy; onChange: (v: OccupancyGroupBy) => void }) {

src/ui/src/features/occupancy/hooks/use-occupancy-data.ts

@@ -30,10 +30,17 @@
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { WorkflowPriority } from "@/lib/api/generated";
+import { TaskGroupStatus } from "@/lib/api/generated";
 import type { OccupancyGroup, OccupancyGroupBy, OccupancySortBy, OccupancyTotals } from "@/lib/api/adapter/occupancy";
 import { fetchOccupancySummary, aggregateGroups, sortGroupsLocal } from "@/lib/api/adapter/occupancy-shim";
 import type { SearchChip } from "@/stores/types";
 
+const VALID_TASK_GROUP_STATUSES: ReadonlySet<string> = new Set(Object.values(TaskGroupStatus));
+
+function isTaskGroupStatus(value: string): value is TaskGroupStatus {
+  return VALID_TASK_GROUP_STATUSES.has(value);
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -69,12 +76,14 @@ export function useOccupancyData({
     const users: string[] = [];
     const pools: string[] = [];
     const priorities: WorkflowPriority[] = [];
+    const statuses: TaskGroupStatus[] = [];
     for (const chip of searchChips) {
       if (chip.field === "user") users.push(chip.value);
       else if (chip.field === "pool") pools.push(chip.value);
       else if (chip.field === "priority") priorities.push(chip.value as WorkflowPriority);
+      else if (chip.field === "status" && isTaskGroupStatus(chip.value)) statuses.push(chip.value);
     }
-    return { users, pools, priorities };
+    return { users, pools, priorities, statuses };
     // Intentionally excludes groupBy/sortBy/order — switching group view or
     // resorting never triggers a network re-fetch. The shim returns raw rows;
     // aggregation + sort happen below.

src/ui/src/features/occupancy/lib/occupancy-search-fields.ts

@@ -15,7 +15,7 @@
 //SPDX-License-Identifier: Apache-2.0
 
 import type { SearchField } from "@/components/filter-bar/lib/types";
-import { WorkflowPriority } from "@/lib/api/generated";
+import { WorkflowPriority, TaskGroupStatus } from "@/lib/api/generated";
 import type { OccupancyGroup } from "@/lib/api/adapter/occupancy";
 
 /**
@@ -64,4 +64,24 @@ export const OCCUPANCY_SEARCH_FIELDS: SearchField<OccupancyGroup>[] = [
     requiresValidValue: true,
     match: () => true, // Filtering handled server-side
   },
+  {
+    id: "status",
+    label: "Status",
+    hint: "RUNNING, WAITING, ...",
+    prefix: "status:",
+    freeFormHint: "Type a status, press Enter",
+    getValues: () => [
+      TaskGroupStatus.RUNNING,
+      TaskGroupStatus.WAITING,
+      TaskGroupStatus.SCHEDULING,
+      TaskGroupStatus.INITIALIZING,
+      TaskGroupStatus.SUBMITTING,
+      TaskGroupStatus.PROCESSING,
+      TaskGroupStatus.COMPLETED,
+      TaskGroupStatus.FAILED,
+    ],
+    exhaustive: true,
+    requiresValidValue: true,
+    match: () => true, // Filtering handled server-side
+  },
 ];

src/ui/src/features/pools/styles/pools.css

@@ -70,7 +70,14 @@
    ============================================================================= */
 
 .pools-row {
-  @apply transition-colors duration-75 ease-out;
+  /* Combine color transitions (hover) with the transform transition (row reposition on expand).
+     Can't use @apply transition-colors here — it overwrites transition-property and kills the
+     transform animation defined on .data-table-row. */
+  transition:
+    color 75ms ease-out,
+    background-color 75ms ease-out,
+    border-color 75ms ease-out,
+    transform var(--duration-normal) var(--ease-out);
 }
 
 .pools-row:not(.pools-row--selected):hover {

src/ui/src/lib/api/adapter/occupancy-shim.ts

@@ -37,7 +37,12 @@
  * =============================================================================
  */
 
-import { listTaskApiTaskGet, type ListTaskSummaryResponse, WorkflowPriority } from "@/lib/api/generated";
+import {
+  listTaskApiTaskGet,
+  type ListTaskSummaryResponse,
+  WorkflowPriority,
+  TaskGroupStatus,
+} from "@/lib/api/generated";
 import type { OccupancyGroup, OccupancyChild, OccupancyGroupBy, OccupancySortBy } from "@/lib/api/adapter/occupancy";
 
 // =============================================================================
@@ -55,6 +60,7 @@ export interface OccupancyQueryParams {
   users?: string[];
   pools?: string[];
   priorities?: WorkflowPriority[];
+  statuses?: TaskGroupStatus[];
 }
 
 export interface OccupancySummaryResult {
@@ -146,6 +152,7 @@ export async function fetchOccupancySummary(params: OccupancyQueryParams): Promi
     ...(params.users && params.users.length > 0 ? { users: params.users } : {}),
     ...(params.pools && params.pools.length > 0 ? { pools: params.pools } : {}),
     ...(params.priorities && params.priorities.length > 0 ? { priority: params.priorities } : {}),
+    ...(params.statuses && params.statuses.length > 0 ? { statuses: params.statuses } : {}),
   });
 
   // customFetch throws on 4xx/5xx — we only reach here on 200