nodes

src/components/FilterMenu/index.jsx → src/components/FilterMenu/index.tsx

@@ -1,19 +1,29 @@
 import TextField from "@mui/material/TextField";
 import Autocomplete from '@mui/material/Autocomplete';
+import type { FilterOptionsState } from "@mui/material/useAutocomplete";
 
 
-export default function FilterMenu({type, value, setter, optionsHook, width}) {
+interface FilterMenuProps {
+  type: string;
+  value: string;
+  params: Record<string, string>;
+  optionsHook: Function;
+}
+
+
+export default function FilterMenu({type, value, params, optionsHook}: FilterMenuProps) {
   const query = optionsHook();
   if (query.isError) console.error(query.error);
   const style = {textTransform: "capitalize"};
   const label = type.replaceAll("_", " ");
-  if ( width ) style.width = width;
-  const onChange = (_, newValue) => {
-    setter({[type]: newValue})
+  const onChange = (_: any, newValue: string | null) => {
+    // setter({[type]: newValue})
+    // const newUrl = getUrl(context.urlPathname, updater(columnFilters), pagination);
+    // navigate(newUrl.pathname + newUrl.search);
   };
-  const filterOptions = (options, { inputValue }) => {
+  const filterOptions = (options: string[], { inputValue }: FilterOptionsState<string>) => {
     if (!inputValue) return options;
-    let result = [];
+    let result: string[] = [];
     result.push(...options.filter((item) => item === inputValue));
     result.push(
       ...options.filter((item) => {
@@ -40,8 +50,6 @@ export default function FilterMenu({type, value, setter, optionsHook, width}) {
       onChange={onChange}
       options={query.data || []}
       renderInput={(params) => <TextField {...params} label={label} />}
-      className={classes.filterMenu}
-      style={style}
       size="small"
     />
   );

src/components/MachineTypeSelector/index.tsx

@@ -0,0 +1,35 @@
+import { usePageContext } from 'vike-react/usePageContext'
+import { navigate } from 'vike/client/router'
+
+const machineTypes = [
+  "smithi",
+  "mira",
+]
+
+export default function MachineTypeSelector() {
+  const context = usePageContext();
+  const selected = context.urlParsed.search.machine_type;
+
+  const getUrl = (machine_type: string) => {
+    const newUrl = new URL(context.urlPathname, window.location.origin);
+    newUrl.searchParams.set("machine_type", machine_type);
+    return newUrl;
+  };
+  const onChange = (value: string) => {
+    const newUrl = getUrl(value);
+    navigate(newUrl.pathname + newUrl.search);
+
+  };
+  return (
+    <>
+      <span>Machine Type</span>
+      <select onChange={e => onChange(e.target.value)}>
+        { machineTypes.includes(selected)? null : <option value={selected}>{selected}</option> }
+        { machineTypes.map(value => {
+          const isSelected = value === selected? {"selected": true} : {}
+          return <option value={value} key={value} {...isSelected}>{value}</option>
+        }) }
+      </select>
+    </>
+  )
+}

src/components/NodeList/index.tsx

@@ -1,13 +1,12 @@
-import type { UseQueryResult } from "@tanstack/react-query";
 import {
   useMaterialReactTable,
   MaterialReactTable,
   type MRT_ColumnDef,
 } from 'material-react-table';
 import Link from '@mui/material/Link';
 
-import type { Node } from "../../lib/paddles.d";
-import { formatDate } from "../../lib/utils";
+import type { Node } from "#src/lib/paddles.d";
+import { formatDate } from "#src/lib/utils";
 import useDefaultTableOptions from "../../lib/table";
 
 
@@ -43,7 +42,7 @@ export const columns: MRT_ColumnDef<Node>[] = [
     header: "locked since",
     filterVariant: 'date',
     sortingFn: "datetime",
-    accessorFn: (row: Node) => formatDate(row.locked_since),
+    accessorFn: (row: Node) => row.locked_since? formatDate(row.locked_since): "",
     size: 55,
     enableColumnFilter: false,
   },
@@ -78,16 +77,11 @@ export const columns: MRT_ColumnDef<Node>[] = [
   },
 ];
 
-interface NodeListProps {
-  query: UseQueryResult<Node[]>;
-}
-
-export default function NodeList({ query }: NodeListProps) {
+export default function NodeList({nodes}: {nodes: Node[]}) {
   const options = useDefaultTableOptions<Node>();
   options.state = {};
   options.state.columnVisibility = {};
-  const data = query.data || [];
-  if ( data.length <= 1 ) {
+  if ( nodes.length <= 1 ) {
     options.enableFilters = false;
     options.enablePagination = false;
     options.enableTableFooter = false;
@@ -97,17 +91,17 @@ export default function NodeList({ query }: NodeListProps) {
       name: false,
     };
   }
-  if ( new Set(data.map(node => node.machine_type)).size === 1 ) {
+  if ( new Set(nodes.map(node => node.machine_type)).size === 1 ) {
     options.state.columnVisibility.machine_type = false;
   }
-  if ( new Set(data.map(node => node.arch)).size === 1 ) {
+  if ( new Set(nodes.map(node => node.arch)).size === 1 ) {
     options.state.columnVisibility.arch = false;
   }
   const table = useMaterialReactTable({
     ...options,
     columns,
-    data: data,
-    rowCount: data.length,
+    data: nodes,
+    rowCount: nodes.length,
     enableFacetedValues: true,
     initialState: {
       ...options.initialState,
@@ -128,7 +122,6 @@ export default function NodeList({ query }: NodeListProps) {
     },
     state: {
       ...options.state,
-      isLoading: query.isLoading || query.isFetching,
     },
     muiTableBodyRowProps: ({row}) => {
       let className = "info";

src/pages/nodes/+Page.tsx

@@ -0,0 +1,33 @@
+import { useData } from 'vike-react/useData'
+import { Config } from 'vike-react/Config'
+
+import Typography from "@mui/material/Typography";
+
+import MachineTypeSelector from "#src/components/MachineTypeSelector";
+import NodeList from "../../components/NodeList";
+
+import type { NodesResponse } from "./+data"
+
+
+export default function Nodes() {
+  const data = useData<NodesResponse>();
+  return (
+    <div>
+      <Config title="Nodes - Pulpito" />
+      <Typography variant="h5" style={{ margin: "20px" }}>
+        Nodes
+      </Typography>
+      <div style={{ height: "auto", display: "flex" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto" }}>
+          <div>
+            <Typography style={{ padding: "10px" }}>
+              Filter&nbsp;by:
+            </Typography>
+          </div>
+          <MachineTypeSelector />
+        </div>
+      </div>
+      <NodeList nodes={data.nodes}/>
+    </div>
+  );
+}

src/pages/nodes/+data.tsx

@@ -0,0 +1,16 @@
+import type { PageContext } from 'vike/types'
+
+import { getURL } from "#src/lib/paddles";
+import type { Node } from "#src/lib/paddles.d";
+
+export type NodesResponse = {
+  nodes: Node[];
+}
+
+export default async function data(pageContext: PageContext): Promise<NodesResponse> {
+  const url = getURL('/nodes/', pageContext.urlParsed.search);
+  const response = await fetch(url);
+  if ( response.ok ) return {nodes: await response.json()};
+  return {nodes: []};
+}
+

src/pages/nodes/@name/+Page.tsx

@@ -0,0 +1,31 @@
+import { useData } from 'vike-react/useData'
+import { usePageContext } from 'vike-react/usePageContext'
+import { Config } from 'vike-react/Config'
+
+import Typography from "@mui/material/Typography";
+
+import JobList from "#src/components/JobList";
+import NodeList from "#src/components/NodeList";
+
+import { type NodeResponse } from "./+data"
+
+export default function Node() {
+  const data = useData<NodeResponse>();
+  const context = usePageContext();
+  const name = context.routeParams.name;
+  return (
+    <div>
+      <Config title={`${name} - Pulpito`} />
+      <Typography variant="h6" style={{ marginBottom: "20px" }}>
+        Node: {name}
+      </Typography>
+
+      <div>
+        <div>
+          <NodeList nodes={data.nodes}/>
+          <JobList sortMode={"time"} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/nodes/@name/+data.tsx

@@ -0,0 +1,25 @@
+import type { PageContext } from 'vike/types'
+import { render } from 'vike/abort'
+
+import { getURL } from "#src/lib/paddles";
+import type { Job, Node } from "#src/lib/paddles.d";
+
+export type NodeResponse = {
+  jobs: Job[];
+  nodes: Node[];
+}
+
+export default async function data(pageContext: PageContext): Promise<NodeResponse> {
+  const nodeUrl = getURL(`/nodes/${pageContext.routeParams.name}`, pageContext.urlParsed.search);
+  const jobsUrl = getURL(`/nodes/${pageContext.routeParams.name}/jobs`, pageContext.urlParsed.search);
+  const [nodeResponse, jobsResponse] = await Promise.all([fetch(nodeUrl), fetch(jobsUrl)]);
+  const result: NodeResponse = {jobs: [], nodes: []};
+  if ( nodeResponse.status === 404 ) throw render(
+    nodeResponse.status,
+    `Node "${pageContext.routeParams.name}" does not exist`
+  );
+  else if ( nodeResponse.ok ) result.nodes = [await nodeResponse.json()];
+  if ( jobsResponse.ok ) result.jobs = await jobsResponse.json();
+  return result;
+}
+