Machine View Sorting / Grouping

python/ray/dashboard/client/src/api.ts

@@ -117,18 +117,10 @@ export type NodeInfoResponse = {
     };
     load_avg: [[number, number, number], [number, number, number]];
     net: [number, number]; // Sent and received network traffic in bytes / second
+    log_count?: { [pid: string]: number };
+    error_count?: { [pid: string]: number };
     workers: Array<NodeInfoResponseWorker>;
   }>;
-  log_counts: {
-    [ip: string]: {
-      [pid: string]: number;
-    };
-  };
-  error_counts: {
-    [ip: string]: {
-      [pid: string]: number;
-    };
-  };
 };
 
 export const getNodeInfo = () => get<NodeInfoResponse>("/api/node_info", {});

python/ray/dashboard/client/src/common/SortableTableHead.tsx

@@ -27,49 +27,65 @@ const useSortableTableHeadStyles = makeStyles((theme: Theme) =>
 );
 
 export type HeaderInfo<T> = {
-  id: keyof T;
+  sortable: boolean;
+  id: T;
   label: string;
   numeric: boolean;
 };
 
 type SortableTableHeadProps<T> = {
-  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof T) => void;
+  onRequestSort: (event: React.MouseEvent<unknown>, id: T) => void;
   order: Order;
-  orderBy: string | null;
+  orderBy: T | null;
   headerInfo: HeaderInfo<T>[];
+  firstColumnEmpty: boolean;
 };
 
 const SortableTableHead = <T,>(props: SortableTableHeadProps<T>) => {
-  const { order, orderBy, onRequestSort, headerInfo } = props;
+  const { order, orderBy, onRequestSort, headerInfo, firstColumnEmpty } = props;
   const classes = useSortableTableHeadStyles();
-  const createSortHandler = (property: keyof T) => (
-    event: React.MouseEvent<unknown>,
-  ) => {
-    onRequestSort(event, property);
+  const createSortHandler = (id: T) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, id);
   };
   return (
     <TableHead>
       <TableRow>
-        {headerInfo.map((headerInfo) => (
-          <StyledTableCell
-            key={headerInfo.label}
-            align={headerInfo.numeric ? "right" : "left"}
-            sortDirection={orderBy === headerInfo.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headerInfo.id}
-              direction={orderBy === headerInfo.id ? order : "asc"}
-              onClick={createSortHandler(headerInfo.id)}
-            >
-              {headerInfo.label}
-              {orderBy === headerInfo.id ? (
-                <span className={classes.visuallyHidden}>
-                  {order === "desc" ? "sorted descending" : "sorted ascending"}
-                </span>
-              ) : null}
-            </TableSortLabel>
-          </StyledTableCell>
-        ))}
+        {firstColumnEmpty && <StyledTableCell />}
+        {headerInfo.map((headerInfo) => {
+          if (headerInfo.sortable) {
+            return (
+              <StyledTableCell
+                key={headerInfo.label}
+                align={headerInfo.numeric ? "right" : "left"}
+                sortDirection={orderBy === headerInfo.id ? order : false}
+              >
+                <TableSortLabel
+                  active={orderBy === headerInfo.id}
+                  direction={orderBy === headerInfo.id ? order : "asc"}
+                  onClick={createSortHandler(headerInfo.id)}
+                >
+                  {headerInfo.label}
+                  {orderBy === headerInfo.id ? (
+                    <span className={classes.visuallyHidden}>
+                      {order === "desc"
+                        ? "sorted descending"
+                        : "sorted ascending"}
+                    </span>
+                  ) : null}
+                </TableSortLabel>
+              </StyledTableCell>
+            );
+          } else {
+            return (
+              <StyledTableCell
+                key={headerInfo.label}
+                align={headerInfo.numeric ? "right" : "left"}
+              >
+                {headerInfo.label}
+              </StyledTableCell>
+            );
+          }
+        })}
       </TableRow>
     </TableHead>
   );

python/ray/dashboard/client/src/common/tableUtils.ts

@@ -8,7 +8,25 @@ export const descendingComparator = <T>(a: T, b: T, orderBy: keyof T) => {
   return 0;
 };
 
+const descendingComparatorFnAccessor = <T>(
+  a: T,
+  b: T,
+  orderByFn: Accessor<T>,
+) => {
+  const aVal = orderByFn(a);
+  const bVal = orderByFn(b);
+  if (bVal < aVal) {
+    return -1;
+  }
+  if (bVal > aVal) {
+    return 1;
+  }
+  return 0;
+};
+
 export type Order = "asc" | "desc";
+export type Comparator<T> = (a: T, b: T) => number;
+export type Accessor<T> = (a: T) => number | string;
 
 export const getComparator = <Key extends keyof any>(
   order: Order,
@@ -22,10 +40,16 @@ export const getComparator = <Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 };
 
-export const stableSort = <T>(
-  array: T[],
-  comparator: (a: T, b: T) => number,
-) => {
+export const getFnComparator = <T>(order: Order, orderByFn: Accessor<T>) => (
+  a: T,
+  b: T,
+): number => {
+  return order === "desc"
+    ? descendingComparatorFnAccessor(a, b, orderByFn)
+    : -descendingComparatorFnAccessor(a, b, orderByFn);
+};
+
+export const stableSort = <T>(array: T[], comparator: Comparator<T>) => {
   const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
   stabilizedThis.sort((a, b) => {
     const order = comparator(a[0], b[0]);

python/ray/dashboard/client/src/common/util.ts

@@ -18,3 +18,9 @@ export const getWeightedAverage = (
 };
 
 export const sum = (vals: number[]) => vals.reduce((acc, val) => acc + val, 0);
+
+export const filterObj = (obj: Object, filterFn: any) =>
+  Object.fromEntries(Object.entries(obj).filter(filterFn));
+
+export const mapObj = (obj: Object, filterFn: any) =>
+  Object.fromEntries(Object.entries(obj).map(filterFn));

python/ray/dashboard/client/src/pages/dashboard/logical-view/LogicalView.tsx

@@ -8,6 +8,7 @@ import {
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { ActorState, RayletActorInfo, RayletInfoResponse } from "../../../api";
+import { filterObj } from "../../../common/util";
 import { StoreState } from "../../../store";
 import Actors from "./Actors";
 
@@ -46,9 +47,6 @@ const mapStateToProps = (state: StoreState) => ({
   rayletInfo: state.dashboard.rayletInfo,
 });
 
-const filterObj = (obj: Object, filterFn: any) =>
-  Object.fromEntries(Object.entries(obj).filter(filterFn));
-
 type LogicalViewProps = {
   rayletInfo: RayletInfoResponse | null;
 } & ReturnType<typeof mapStateToProps>;

python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx

@@ -22,6 +22,7 @@ import SortableTableHead, {
 } from "../../../common/SortableTableHead";
 import { getComparator, Order, stableSort } from "../../../common/tableUtils";
 import { StoreState } from "../../../store";
+import { dashboardActions } from "../state";
 import MemoryRowGroup from "./MemoryRowGroup";
 import { MemoryTableRow } from "./MemoryTableRow";
 
@@ -50,7 +51,7 @@ const makeGroupedEntries = (
 const makeUngroupedEntries = (
   memoryTableGroups: MemoryTableGroups,
   order: Order,
-  orderBy: keyof MemoryTableEntry | null,
+  orderBy: memoryColumnId | null,
 ) => {
   const allEntries = Object.values(memoryTableGroups).reduce(
     (allEntries: Array<MemoryTableEntry>, memoryTableGroup) => {
@@ -71,14 +72,33 @@ const makeUngroupedEntries = (
   ));
 };
 
-const memoryHeaderInfo: HeaderInfo<MemoryTableEntry>[] = [
-  { id: "node_ip_address", label: "IP Address", numeric: true },
-  { id: "pid", label: "pid", numeric: true },
-  { id: "type", label: "Type", numeric: false },
-  { id: "object_ref", label: "Object Ref", numeric: false },
-  { id: "object_size", label: "Object Size (B)", numeric: true },
-  { id: "reference_type", label: "Reference Type", numeric: false },
-  { id: "call_site", label: "Call Site", numeric: false },
+type memoryColumnId =
+  | "node_ip_address"
+  | "pid"
+  | "type"
+  | "object_ref"
+  | "object_size"
+  | "reference_type"
+  | "call_site";
+
+const memoryHeaderInfo: HeaderInfo<memoryColumnId>[] = [
+  { id: "node_ip_address", label: "IP Address", numeric: true, sortable: true },
+  { id: "pid", label: "pid", numeric: true, sortable: true },
+  { id: "type", label: "Type", numeric: false, sortable: true },
+  { id: "object_ref", label: "Object Ref", numeric: false, sortable: true },
+  {
+    id: "object_size",
+    label: "Object Size (B)",
+    numeric: true,
+    sortable: true,
+  },
+  {
+    id: "reference_type",
+    label: "Reference Type",
+    numeric: false,
+    sortable: true,
+  },
+  { id: "call_site", label: "Call Site", numeric: false, sortable: true },
 ];
 
 const useMemoryInfoStyles = makeStyles((theme: Theme) =>
@@ -103,9 +123,11 @@ const MemoryInfo: React.FC<{}> = () => {
   const { memoryTable, shouldObtainMemoryTable } = useSelector(
     memoryInfoSelector,
   );
-  const { setShouldObtainMemoryTable } = useDispatch();
+  const dispatch = useDispatch();
   const toggleMemoryCollection = async () => {
-    setShouldObtainMemoryTable(!shouldObtainMemoryTable);
+    dispatch(
+      dashboardActions.setShouldObtainMemoryTable(!shouldObtainMemoryTable),
+    );
     if (shouldObtainMemoryTable) {
       await stopMemoryTableCollection();
     }
@@ -120,9 +142,7 @@ const MemoryInfo: React.FC<{}> = () => {
   const [isGrouped, setIsGrouped] = useState(true);
   const [order, setOrder] = React.useState<Order>("asc");
   const toggleOrder = () => setOrder(order === "asc" ? "desc" : "asc");
-  const [orderBy, setOrderBy] = React.useState<keyof MemoryTableEntry | null>(
-    null,
-  );
+  const [orderBy, setOrderBy] = React.useState<memoryColumnId | null>(null);
   return (
     <React.Fragment>
       {memoryTable !== null ? (
@@ -143,9 +163,9 @@ const MemoryInfo: React.FC<{}> = () => {
           />
           <Table className={classes.table}>
             <SortableTableHead
-              orderBy={orderBy || ""}
+              orderBy={orderBy}
               order={order}
-              onRequestSort={(event, property) => {
+              onRequestSort={(_, property) => {
                 if (property === orderBy) {
                   toggleOrder();
                 } else {
@@ -154,6 +174,7 @@ const MemoryInfo: React.FC<{}> = () => {
                 }
               }}
               headerInfo={memoryHeaderInfo}
+              firstColumnEmpty={false}
             />
             <TableBody>
               {isGrouped