feat: add priority to tiles table

Author: amliu-jumptrading

src/api/entities.ts

@@ -225,6 +225,14 @@ export const liveTilePrimaryMetricSchema = z.object({
   tile_primary_metric: tilePrimaryMetricSchema,
 });
 
+export const prioritySchema = z.enum([
+  "floating",
+  "startup",
+  "normal",
+  "critical",
+]);
+export const PriorityEnum = prioritySchema.enum;
+
 export const tileMetricsSchema = z.object({
   timers: z.array(z.array(z.number()).nullable()),
   sched_timers: z.array(z.array(z.number()).nullable()),
@@ -236,6 +244,7 @@ export const tileMetricsSchema = z.object({
   last_cpu: z.array(z.number().nullable()),
   minflt: z.array(z.number().nullable()),
   majflt: z.array(z.number().nullable()),
+  priority: z.array(prioritySchema).optional(),
 });
 
 export const tileTimerSchema = z.object({

src/api/types.ts

@@ -67,6 +67,7 @@ import type {
   peerUpdateInfoSchema,
   liveProgramCacheSchema,
   slotCaughtUpSchema,
+  prioritySchema,
 } from "./entities";
 
 export type Client = z.infer<typeof clientSchema>;
@@ -121,6 +122,7 @@ export type LiveTilePrimaryMetric = z.infer<typeof liveTilePrimaryMetricSchema>;
 export type TilePrimaryMetric = z.infer<typeof tilePrimaryMetricSchema>;
 
 export type TileMetrics = z.infer<typeof tileMetricsSchema>;
+export type Priority = z.infer<typeof prioritySchema>;
 
 export type TxnWaterfallIn = z.infer<typeof txnWaterfallInSchema>;
 export type TxnWaterfallOut = z.infer<typeof txnWaterfallOutSchema>;

src/features/Overview/LiveTileMetrics/consts.ts

@@ -45,7 +45,7 @@ export const metricGroups: {
         uniqueName: "Name",
         description:
           "The name and index of each tile. A tile represents a sandboxed process or individual thread that communicates with other tiles using message passing queues.",
-        headerColWidth: 70,
+        headerColWidth: 85,
       },
     ],
   },
@@ -60,9 +60,16 @@ export const metricGroups: {
         headerColAlign: "right",
       },
       {
-        uniqueName: "Heartbeat",
+        uniqueName: "Hbt",
         description:
           "Liveness indicator based on a periodic heartbeat timestamp written by tiles to a chunk of shared memory.",
+        headerColWidth: 50,
+        headerColAlign: "right",
+      },
+      {
+        uniqueName: "Priority",
+        description:
+          "The tile's scheduling priority. Floating tiles run on the Linux scheduler; others are pinned to a core. Startup tiles go away shortly after boot. Critical tiles never share a hyperthread pair.",
         headerColWidth: 70,
         headerColAlign: "right",
       },
@@ -89,12 +96,12 @@ export const metricGroups: {
         uniqueName: "Utilization",
         description:
           "Visualized the percentage of the tile's CPU time spent doing useful work. Time spent in a context switch is not included.",
-        headerColWidth: 150,
+        headerColWidth: 140,
       },
       {
         uniqueName: "History (1m)",
         description: "A historical, low-pass-filtered view of CPU utilization.",
-        headerColWidth: 150,
+        headerColWidth: 140,
       },
     ],
   },

src/features/Overview/LiveTileMetrics/index.tsx

@@ -12,7 +12,7 @@ import styles from "./liveTileMetrics.module.css";
 import { Bars } from "../../StartupProgress/Firedancer/Bars";
 import TileSparkLine from "../SlotPerformance/TileSparkLine";
 import { headerGap } from "../../Gossip/consts";
-import type { Tile, TileMetrics } from "../../../api/types";
+import type { Priority, Tile, TileMetrics } from "../../../api/types";
 import clsx from "clsx";
 import {
   useHarmonicIntervalFn,
@@ -32,6 +32,7 @@ import { isEqual } from "lodash";
 import type { CellProps } from "@radix-ui/themes/components/table";
 import TableDescriptionDialog from "./TableDescriptionDialog";
 import { pinnedGroups, pinnedTableWidth, unpinnedGroups } from "./consts";
+import { PriorityEnum } from "../../../api/entities";
 
 const chartHeight = 18;
 
@@ -107,7 +108,12 @@ function LiveMetricsTable({ isPinned }: LiveMetricsTableProps) {
                 [styles.rightBorder]: isPinned || i !== groups.length - 1,
               })}
             >
-              {group.name}
+              {group.name || (
+                <PriorityCountCell
+                  priority={liveTileMetrics.priority}
+                  alive={liveTileMetrics.alive}
+                />
+              )}
             </Table.ColumnHeaderCell>
           ))}
         </Table.Row>
@@ -182,8 +188,13 @@ function TableRow({ tile, liveTileMetrics, idx, isPinned }: TableRowProps) {
   if (!timers) return;
 
   if (isPinned) {
+    const isFloating =
+      (liveTileMetrics.priority?.[idx] ??
+        prevLiveTileMetricsIdx?.priority?.[idx]) === PriorityEnum.floating;
     return (
-      <Table.Row className={styles.dataRow}>
+      <Table.Row
+        className={clsx(styles.dataRow, { [styles.floating]: isFloating })}
+      >
         <Table.Cell className={styles.rightBorder}>
           {tile.kind}:{tile.kind_id}
         </Table.Cell>
@@ -202,6 +213,13 @@ function TableRow({ tile, liveTileMetrics, idx, isPinned }: TableRowProps) {
   );
 }
 
+const priorityLabels: Record<Priority, string> = {
+  floating: "Floating",
+  startup: "Startup",
+  normal: "Pinned",
+  critical: "Critical",
+};
+
 interface DataRowProps {
   alive: number | null | undefined;
   timers: number[];
@@ -239,6 +257,8 @@ function DataRow({
     liveTileMetrics.minflt[idx] ?? prevLiveTileMetricsIdx?.minflt[idx];
   const majflt =
     liveTileMetrics.majflt[idx] ?? prevLiveTileMetricsIdx?.majflt[idx];
+  const priority =
+    liveTileMetrics.priority?.[idx] ?? prevLiveTileMetricsIdx?.priority?.[idx];
 
   const prevNivcsw = usePrevious(nivcsw);
   const prevNvcsw = usePrevious(nvcsw);
@@ -254,14 +274,26 @@ function DataRow({
   const workPct = timers[3] + timers[4] + timers[7];
 
   return (
-    <Table.Row className={styles.dataRow}>
+    <Table.Row
+      className={clsx(styles.dataRow, {
+        [styles.floating]: priority === PriorityEnum.floating,
+      })}
+    >
       <Table.Cell align="right">{cpu}</Table.Cell>
       <Table.Cell
         className={clsx({ [styles.green]: alive, [styles.red]: !alive })}
         align="right"
       >
         {alive ? "Live" : "Dead"}
       </Table.Cell>
+      <Table.Cell
+        align="right"
+        className={clsx({
+          [styles.critical]: priority === PriorityEnum.critical,
+        })}
+      >
+        {priority ? priorityLabels[priority] : "-"}
+      </Table.Cell>
       <Table.Cell
         align="right"
         className={clsx({ [styles.red]: inBackpressure })}
@@ -434,3 +466,51 @@ const MUtilization = memo(function Utilization({ idx }: UtilizationProps) {
     </>
   );
 });
+
+interface PriorityCountCellProps {
+  priority: TileMetrics["priority"];
+  alive: TileMetrics["alive"];
+}
+function PriorityCountCell({ priority, alive }: PriorityCountCellProps) {
+  const counts = useMemo(() => {
+    if (!priority) return null;
+    let critical = 0;
+    let pinned = 0;
+    let floating = 0;
+    for (let i = 0; i < priority.length; i++) {
+      // A shutdown tile is not displayed in the table, so exclude it from the count
+      const isShutdown = alive[i] === 2;
+      if (isShutdown) continue;
+
+      switch (priority[i]) {
+        case PriorityEnum.critical:
+          critical++;
+          break;
+        case PriorityEnum.normal:
+        case PriorityEnum.startup:
+          pinned++;
+          break;
+        case PriorityEnum.floating:
+          floating++;
+          break;
+      }
+    }
+    return { critical, pinned, floating };
+  }, [alive, priority]);
+
+  if (!counts) return;
+
+  return (
+    <Flex className={styles.priorityCount} gap="5px" justify="between">
+      <Text>
+        {counts.critical} <Text className={styles.critical}>C</Text>
+      </Text>
+      <Text>
+        {counts.pinned} <Text className={styles.pinned}>P</Text>
+      </Text>
+      <Text>
+        {counts.floating} <Text className={styles.floating}>F</Text>
+      </Text>
+    </Flex>
+  );
+}

src/features/Overview/LiveTileMetrics/liveTileMetrics.module.css

@@ -17,6 +17,10 @@
     table-layout: fixed;
 
     .data-row {
+      &.floating {
+        filter: brightness(0.55);
+      }
+
       .green {
         color: var(--green-9);
       }
@@ -68,6 +72,10 @@
             color: var(--high-increment-text-color);
           }
         }
+
+        &.critical {
+          color: var(--gold-10);
+        }
       }
     }
 
@@ -92,5 +100,17 @@
     th {
       box-shadow: none;
     }
+
+    .priority-count {
+      .critical {
+        color: var(--gold-10);
+      }
+      .pinned {
+        color: var(--table-body-color);
+      }
+      .floating {
+        color: var(--gray-7);
+      }
+    }
   }
 }