add nodes/:name page

Other minor additions: 1. In nodes table, add links in 'name' column 2. Add 'hideFooter' prop in DataGrid component Signed-off-by: Vallari <[email protected]>
ceph · Aug 14, 2023 · ba485ea · ba485ea
1 parent 40237d9
commit ba485ea
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import Run from "./pages/Run";
 import Job from "./pages/Job";
 import Queue from "./pages/Queue";
 import Nodes from "./pages/Nodes";
+import Node from "./pages/Node";
 
 import "./App.css";
 
@@ -37,6 +38,7 @@ function App(props: AppProps) {
         <Routes>
           <Route path="/" element={<Runs />} />
           <Route path="/nodes" element={<Nodes />} />
+          <Route path="/nodes/:name" element={<Node />} />
           <Route path="/runs" element={<Runs />} />
           <Route path="/runs/:name" element={<Run />} />
           <Route path="/runs/:name/jobs/:job_id" element={<Job />} />

diff --git a/src/components/DataGrid/index.jsx b/src/components/DataGrid/index.jsx
@@ -169,6 +169,7 @@ export default function DataGrid(props) {
             filterModel={props.filterModel}
             onFilterModelChange={props.onFilterModelChange}
             columns={props.columns}
+            hideFooter={props.hideFooter}
           />
         </div>
       </div>

diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx
@@ -18,7 +18,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { formatDate, formatDuration } from "../../lib/utils";
 import DataGrid from "../../components/DataGrid";
 import IconLink from "../../components/IconLink";
-import type { Run } from "../../lib/paddles.d";
+import type { Run, NodeJobs } from "../../lib/paddles.d";
 
 import sentryIcon from "./assets/sentry.svg";
 
@@ -138,7 +138,7 @@ const columns: GridColDef[] = [
 ];
 
 interface JobListProps {
-  query: UseQueryResult<Run>;
+  query: UseQueryResult<Run> | UseQueryResult<NodeJobs>;
   params: DecodedValueMap<QueryParamConfigMap>;
   setter: SetQuery<QueryParamConfigMap>;
 }
@@ -164,7 +164,7 @@ export default function JobList({ query, params, setter }: JobListProps) {
     <DataGrid
       columns={columns}
       rows={query.data?.jobs || []}
-      rowCount={query.data?.jobs.length || 999}
+      rowCount={query.data?.jobs?.length || 999}
       loading={query.isLoading || query.isFetching}
       initialState={{
         sorting: {

diff --git a/src/components/NodeList/index.tsx b/src/components/NodeList/index.tsx
@@ -9,17 +9,22 @@ import type {
   GridRowClassNameParams,
   GridValueFormatterParams,
   GridColDef,
+  GridRenderCellParams,
 } from "@mui/x-data-grid";
+import Link from '@mui/material/Link';
 
 import { useNodes } from "../../lib/paddles";
 import { formatDate } from "../../lib/utils";
 import DataGrid from "../DataGrid";
 
 
-const columns: GridColDef[] = [
+export const columns: GridColDef[] = [
   {
     field: "name",
     width: 125,
+    renderCell: (params: GridRenderCellParams) => {
+      return <Link href={`/nodes/${params.value}`} color="inherit">{params.value}</Link>;
+    },
   },
   {
     field: "machine_type",
@@ -72,6 +77,15 @@ interface NodeListProps {
   setter: SetQuery<QueryParamConfigMap>;
 }
 
+export function nodeRowClass(params: GridRowClassNameParams) {
+  const isUp = params.row.up;
+  const isLocked = params.row.locked;
+  if (!isUp) {
+      return 'node-down';
+  }
+  return isLocked ? 'node-locked' : 'node-available';
+}
+
 export default function NodeList({ params, setter }:NodeListProps) {
   const debouncedParams = useDebounce(params, 500);
   const query = useNodes(debouncedParams);
@@ -100,17 +114,11 @@ export default function NodeList({ params, setter }:NodeListProps) {
           ],
         },
       }}
+      hideFooter={true}
       filterMode="client"
       filterModel={filterModel}
       onFilterModelChange={onFilterModelChange}
-      getRowClassName={(params: GridRowClassNameParams) => {
-        const isUp = params.row.up;
-        const isLocked = params.row.locked;
-        if (!isUp) {
-            return 'node-down';
-        }
-        return isLocked ? 'node-locked' : 'node-available'
-      }}
+      getRowClassName={nodeRowClass}
     />
   );
 }
diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts
@@ -42,3 +42,7 @@ export type Node = {
   locked_by: string | null;
   machine_type: string;
 };
+
+export type NodeJobs = {
+  jobs?: Job[];
+}
diff --git a/src/lib/paddles.ts b/src/lib/paddles.ts
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { UseQueryResult } from "@tanstack/react-query";
 
-import type { GetURLParams, Run, Job, Node } from "./paddles.d";
+import type { GetURLParams, Run, Job, Node, NodeJobs } from "./paddles.d";
 
 const PADDLES_SERVER =
   import.meta.env.VITE_PADDLES_SERVER || "https://paddles.front.sepia.ceph.com";
@@ -94,6 +94,28 @@ function useMachineTypes() {
   return useQuery(["machine_types", { url }]);
 }
 
+function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<NodeJobs> {
+  // 'page' and 'count' are mandatory query params for this paddles endpoint
+  params = { "page": params?.page || 0, "pageSize": params?.pageSize || 25 } 
+  const url = getURL(`/nodes/${name}/jobs`, params);
+  const query = useQuery(["nodes", { url }], {
+    select: (data: Job[]) => {
+      data.forEach((item) => {
+        item.id = item.job_id;
+      });
+      const resp: NodeJobs = { 'jobs': data }
+      return resp;
+    },
+  });
+  return query;
+}
+
+function useNode(name: string): UseQueryResult<Node> {
+  const url = getURL(`/nodes/${name}/`);
+  const query = useQuery<Node, Error>(["node", { url }]);
+  return query;
+}
+
 function useNodes(params: GetURLParams): UseQueryResult<Node[]> {
   const params_ = JSON.parse(JSON.stringify(params || {}));
 
@@ -131,5 +153,7 @@ export {
   useJob,
   useSuites,
   useStatuses,
+  useNode,
+  useNodeJobs,
   useNodes,
 };
diff --git a/src/pages/Node/index.tsx b/src/pages/Node/index.tsx
@@ -0,0 +1,51 @@
+import { useParams } from "react-router-dom";
+import { useQueryParams, NumberParam } from "use-query-params";
+import Typography from "@mui/material/Typography";
+import { Helmet } from "react-helmet";
+
+import DataGrid from "../../components/DataGrid";
+import JobList from "../../components/JobList";
+import { nodeRowClass, columns as nodeColumns} from "../../components/NodeList";
+import type { RunParams } from "../../lib/paddles.d";
+
+import { useNode, useNodeJobs } from "../../lib/paddles";
+
+export default function Node() {
+  const [params, setParams] = useQueryParams({
+    page: NumberParam,
+    pageSize: NumberParam,
+  });
+  const { name } = useParams<RunParams>();
+  const detailsQuery = useNode(name === undefined ? "" : name);
+  const jobsQuery = useNodeJobs(name === undefined ? "" : name, params);
+
+  if (detailsQuery === null) return <Typography>404</Typography>;
+  if (detailsQuery.isError) return null;
+
+  if (jobsQuery === null) return <Typography>404</Typography>;
+  if (jobsQuery.isError) return null;
+
+  return (
+    <div>
+      <Helmet>
+        <title>Node - Pulpito</title>
+      </Helmet>
+      <Typography variant="h6" style={{ marginBottom: "20px" }}>
+        Node: {name}
+      </Typography>
+
+      <div style={{ height: "auto", display: "flex" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto", gap: 30 }}>
+      <DataGrid
+        columns={nodeColumns}
+        rows={[{ id: name, ...detailsQuery.data}] || []}
+        loading={detailsQuery.isLoading || detailsQuery.isFetching}
+        hideFooter={true}
+        getRowClassName={nodeRowClass}
+      />
+      <JobList query={jobsQuery} params={params} setter={setParams} />
+      </div>
+      </div>
+    </div>
+  );
+}