chore(webapp): apply oxfmt formatting to queue-metrics files (fix code-quality check)

Author: samejr

apps/webapp/app/components/primitives/charts/Chart.tsx

@@ -179,8 +179,7 @@ const ChartTooltipContent = React.forwardRef<
               // Prefer the series' configured colour over item.color: a threshold/gradient line's
               // recharts colour is a `url(#…)` gradient ref, which is invalid as a CSS background and
               // renders no swatch. The config colour is the intended solid series colour.
-              const indicatorColor =
-                color || itemConfig?.color || item.payload.fill || item.color;
+              const indicatorColor = color || itemConfig?.color || item.payload.fill || item.color;
 
               return (
                 <div

apps/webapp/app/components/queues/QueueControls.tsx

@@ -248,8 +248,8 @@ export function QueueOverrideConcurrencyButton({
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom" className="max-w-[230px] text-xs">
-              Give this queue its own concurrency limit instead of the environment default. Set it as
-              a number or a percentage of the environment limit.
+              Give this queue its own concurrency limit instead of the environment default. Set it
+              as a number or a percentage of the environment limit.
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>

apps/webapp/app/components/queues/QueueMetricCards.tsx

@@ -278,10 +278,7 @@ export function QueueMetricChartCard({
                     key={s.key}
                     className="flex items-center gap-1 text-xs font-normal text-text-dimmed"
                   >
-                    <span
-                      className="size-2.5 rounded-[2px]"
-                      style={{ backgroundColor: s.color }}
-                    />
+                    <span className="size-2.5 rounded-[2px]" style={{ backgroundColor: s.color }} />
                     {s.label}
                   </span>
                 ))}
@@ -290,10 +287,7 @@ export function QueueMetricChartCard({
                     key={e.label}
                     className="flex items-center gap-1 text-xs font-normal text-text-dimmed"
                   >
-                    <span
-                      className="size-2.5 rounded-[2px]"
-                      style={{ backgroundColor: e.color }}
-                    />
+                    <span className="size-2.5 rounded-[2px]" style={{ backgroundColor: e.color }} />
                     {e.label}
                   </span>
                 ))}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -661,15 +661,9 @@ function QueuesWithMetricsView() {
               <TableHeader>
                 <TableRow>
                   <TableHeaderCell>Name</TableHeaderCell>
-                  <TableHeaderCell alignment="right">
-                    Queued
-                  </TableHeaderCell>
-                  <TableHeaderCell alignment="right">
-                    Running
-                  </TableHeaderCell>
-                  <TableHeaderCell alignment="right">
-                    Limit
-                  </TableHeaderCell>
+                  <TableHeaderCell alignment="right">Queued</TableHeaderCell>
+                  <TableHeaderCell alignment="right">Running</TableHeaderCell>
+                  <TableHeaderCell alignment="right">Limit</TableHeaderCell>
                   <TableHeaderCell
                     alignment="right"
                     tooltipContentClassName="max-w-max"
@@ -685,17 +679,15 @@ function QueuesWithMetricsView() {
                           code.
                         </p>
                         <p>
-                          <span className="text-text-bright">Override</span>: a limit you set here or
-                          via the API.
+                          <span className="text-text-bright">Override</span>: a limit you set here
+                          or via the API.
                         </p>
                       </div>
                     }
                   >
                     Limited by
                   </TableHeaderCell>
-                  <TableHeaderCell alignment="right">
-                    Health
-                  </TableHeaderCell>
+                  <TableHeaderCell alignment="right">Health</TableHeaderCell>
                   <TableHeaderCell
                     alignment="right"
                     disableTooltipHoverableContent
@@ -844,10 +836,7 @@ function QueuesWithMetricsView() {
                           to={queueDetailPath}
                           alignment="right"
                           actionClassName="pl-16"
-                          className={cn(
-                            "w-[1%]",
-                            queue.paused ? "opacity-50" : undefined
-                          )}
+                          className={cn("w-[1%]", queue.paused ? "opacity-50" : undefined)}
                           // Keep the whole row navigable: the override explainer is a tooltip
                           // button, so it renders beside the link (trailing) rather than nested
                           // inside the <a>, and the label itself stays the link.
@@ -870,13 +859,11 @@ function QueuesWithMetricsView() {
                             ) : undefined
                           }
                         >
-                          {queue.concurrency?.overriddenAt ? (
-                            "Override"
-                          ) : queue.concurrencyLimit ? (
-                            "User"
-                          ) : (
-                            "Environment"
-                          )}
+                          {queue.concurrency?.overriddenAt
+                            ? "Override"
+                            : queue.concurrencyLimit
+                              ? "User"
+                              : "Environment"}
                         </TableCell>
                         <TableCell
                           to={queueDetailPath}
@@ -1258,8 +1245,8 @@ const QUEUE_HEADER_TILES: QueueHeaderTile[] = [
     label: "Env saturation",
     description: (
       <>
-        How much of the environment's concurrency these queues are using. Turns{" "}
-        <WarningSwatch /> above 100%, when they're into burst capacity.
+        How much of the environment's concurrency these queues are using. Turns <WarningSwatch />{" "}
+        above 100%, when they're into burst capacity.
       </>
     ),
     color: "var(--color-queues)",
@@ -1303,8 +1290,8 @@ const QUEUE_HEADER_TILES: QueueHeaderTile[] = [
     label: "Scheduling delay p95",
     description: (
       <>
-        How long runs wait before they start (95% start faster than this). Turns{" "}
-        <WarningSwatch /> above 1 minute.
+        How long runs wait before they start (95% start faster than this). Turns <WarningSwatch />{" "}
+        above 1 minute.
       </>
     ),
     totalTooltip: "The worst p95 in the selected window.",
@@ -1476,7 +1463,10 @@ function QueueEnvMetricChart({
                 />
               ) : (
                 <span
-                  className={cn("text-xs font-normal tabular-nums text-text-dimmed", totalClassName)}
+                  className={cn(
+                    "text-xs font-normal tabular-nums text-text-dimmed",
+                    totalClassName
+                  )}
                 >
                   {peak}
                 </span>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

@@ -276,7 +276,11 @@ export default function Page() {
           </div>
           <div className="flex items-center gap-1.5">
             {view === "keys" && hasKeys ? (
-              <SearchInput placeholder="Search keys…" paramName="query" resetParams={["key", "page"]} />
+              <SearchInput
+                placeholder="Search keys…"
+                paramName="query"
+                resetParams={["key", "page"]}
+              />
             ) : null}
             <TimeFilter
               defaultPeriod={QUEUE_METRICS_DEFAULT_PERIOD}
@@ -383,8 +387,8 @@ function OverviewCharts({
           info={
             <>
               How many runs are executing at once (<ColorSwatch color={COLORS.running} />) versus
-              the queue's limit (<ColorSwatch color={COLORS.limit} />). Turns{" "}
-              <ColorSwatch color="var(--color-warning)" /> color when it reaches the limit.
+              the queue's limit (<ColorSwatch color={COLORS.limit} />
+              ). Turns <ColorSwatch color="var(--color-warning)" /> color when it reaches the limit.
             </>
           }
           showLegend
@@ -426,8 +430,8 @@ function OverviewCharts({
           title="Throughput"
           info={
             <>
-              Runs arriving (<ColorSwatch color={COLORS.limit} /> Enqueued) versus starting
-              (<ColorSwatch color={COLORS.running} /> Started). Turns{" "}
+              Runs arriving (<ColorSwatch color={COLORS.limit} /> Enqueued) versus starting (
+              <ColorSwatch color={COLORS.running} /> Started). Turns{" "}
               <ColorSwatch color="var(--color-warning)" /> color when Started falls behind.
             </>
           }
@@ -1166,7 +1170,10 @@ function ConcurrencyBlock({
             </span>
             {limit !== null && limit > 0 && (
               <span
-                className={cn("text-xs tabular-nums", atLimit ? "text-warning" : "text-text-dimmed")}
+                className={cn(
+                  "text-xs tabular-nums",
+                  atLimit ? "text-warning" : "text-text-dimmed"
+                )}
               >
                 {/* Separator so the limit and the percentage don't read as one number
                     (e.g. "/ 25" + "44%" mashing into "2544%"). */}

apps/webapp/app/routes/resources.queues.concurrency-keys.ts

@@ -2,10 +2,7 @@ import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
-import {
-  findEnvironmentById,
-  hasAccessToEnvironment,
-} from "~/models/runtimeEnvironment.server";
+import { findEnvironmentById, hasAccessToEnvironment } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
 import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { engine } from "~/v3/runEngine.server";
@@ -72,7 +69,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   const submission = Body.safeParse(await request.json());
   if (!submission.success) {
-    return json<ConcurrencyKeysResponse>({ success: false, error: "Invalid input" }, { status: 400 });
+    return json<ConcurrencyKeysResponse>(
+      { success: false, error: "Invalid input" },
+      { status: 400 }
+    );
   }
   const { organizationId, projectId, environmentId, queueName, period, from, to, search, page } =
     submission.data;
@@ -120,7 +120,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   const endTime = formatClickhouseDateTime(new Date(ceilToMinute(range.to.getTime())));
 
   try {
-    const clickhouse = await clickhouseFactory.getClickhouseForOrganization(organizationId, "query");
+    const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
+      organizationId,
+      "query"
+    );
 
     const [rankingError, rankingRows] = await clickhouse.queueMetrics.concurrencyKeyRanking({
       organizationId,