Fix job/node name and ID columns for webui

Job name and ID were often showing duplicate information depending on the job type. The new 'job' column will just show the shortened ID in the case of a batch job, and the name for non-batch jobs. The Node name column has been removed, as nodes are currently unnamed. Solves issue #138
bacalhau-project · Dec 13, 2023 · f2ff6c1 · f2ff6c1
1 parent 405795d
commit f2ff6c1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 35 deletions.
diff --git a/webui/src/context/TableSettingsContext.tsx b/webui/src/context/TableSettingsContext.tsx
@@ -12,7 +12,6 @@ export interface TableSettings {
   showStatus?: boolean;
   // Nodes Table
   showNodeId?: boolean;
-  showNodeName?: boolean;
   showNodeType?: boolean;
   showEnv?: boolean;
   showInputs?: boolean;
@@ -37,7 +36,6 @@ const defaultState: TableSettings = {
   showStatus: true,
   // Nodes Table
   showNodeId: true,
-  showNodeName: true,
   showNodeType: true,
   showEnv: true,
   showInputs: true,

diff --git a/webui/src/pages/JobsDashboard/JobsTable/JobsTable.tsx b/webui/src/pages/JobsDashboard/JobsTable/JobsTable.tsx
@@ -66,8 +66,7 @@ const JobsTable: React.FC<TableProps> = ({ data }) => {
       <table>
         <thead>
           <tr>
-            {settings.showJobId && <th className={styles.jobID}>Job ID</th>}
-            {settings.showJobName && <th>Name</th>}
+            {settings.showJobId && <th className={styles.jobID}>Job</th>}
             {settings.showCreated && (
               <th className={styles.dateCreated}>Created</th>
             )}
@@ -80,35 +79,8 @@ const JobsTable: React.FC<TableProps> = ({ data }) => {
         <tbody>
           {parsedData.map((jobData, index) => (
             <tr key={index}>
-              <td className={styles.name}>{jobData.name}</td>
-              <td className={styles.dateCreated}>
-                <Moment fromNow withTitle>
-                  {jobData.createdAt}
-                </Moment>
-              </td>
-              <td className={styles.program}>
-                <ProgramSummary data={jobData.tasks} />
-              </td>
-              <td className={styles.jobType}>{jobData.jobType}</td>
-              <td className={styles.label}>
-                {jobData.label.map((label) => (
-                  <Label text={label} color={"lavender"} />
-                ))}
-              </td>
-              <td className={styles.status}>
-                <Label
-                  text={jobData.status}
-                  color={labelColorMap[jobData.status.toLowerCase()]}
-                />
-              </td>
-              <td className={styles.action}>
-                <ActionButton text="View" to="/JobDetail" id={jobData.longId} />
-              </td>
               {settings.showJobId && (
-                <td className={styles.id}>{jobData.id}</td>
-              )}
-              {settings.showJobName && (
-                <td className={styles.name}>{jobData.name}</td>
+                <td className={styles.id}>{jobData.name}</td>
               )}
               {settings.showCreated && (
                 <td className={styles.dateCreated}>
@@ -126,7 +98,11 @@ const JobsTable: React.FC<TableProps> = ({ data }) => {
                 <td className={styles.jobType}>{jobData.jobType}</td>
               )}
               {settings.showLabel && (
-                <td className={styles.label}>{jobData.label}</td>
+                <td className={styles.label}>
+                  {jobData.label.map((label) => (
+                    <Label text={label} color={"grey"} />
+                  ))}
+                </td>
               )}
               {settings.showStatus && (
                 <td className={styles.status}>

diff --git a/webui/src/pages/NodesDashboard/NodesTable/NodesTable.tsx b/webui/src/pages/NodesDashboard/NodesTable/NodesTable.tsx
@@ -34,8 +34,7 @@ const NodesTable: React.FC<TableProps> = ({ data }) => {
       <table>
         <thead>
           <tr>
-            {settings.showNodeId && <th>Node ID</th>}
-            {settings.showNodeName && <th>Name</th>}
+            {settings.showNodeId && <th>Node</th>}
             {settings.showNodeType && <th>Type</th>}
             {settings.showEnv && <th>Environment</th>}
             {settings.showInputs && <th>Inputs From</th>}