Webui settings

webui/src/components/ActionButton/ActionButton.module.scss

@@ -18,7 +18,16 @@
     cursor: pointer;
     display: flex;
     column-gap: 1ch;
-    align-items: center
+    align-items: center;
+
+    &:hover {
+        background-color: rgba($light-blue, .7);
+    }
+}
+
+.viewIcon {
+    width: 18px;
+    height: 18px;
 }
 
 .actionButton:active {

webui/src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface CheckboxProps {
-  checked: boolean;
+  checked: boolean | undefined;
   onChange: () => void;
   label?: string;
 }

webui/src/context/TableSettingsContext.tsx

@@ -1,41 +1,55 @@
-// src/context/TableSettingsContext.tsx
 import React, { useState, useContext, useEffect, ReactNode } from "react";
 
+// Combined table settings interface
 export interface TableSettings {
-  showNodeId: boolean;
-  showName: boolean;
-  showType: boolean;
-  showEnv: boolean;
-  showInputs: boolean;
-  showOutputs: boolean;
-  showVersion: boolean;
-  showAction: boolean;
+  // Jobs Table
+  showJobId?: boolean;
+  showJobName?: boolean;
+  showCreated?: boolean;
+  showProgram?: boolean;
+  showJobType?: boolean;
+  showLabel?: boolean;
+  showStatus?: boolean;
+  // Nodes Table
+  showNodeId?: boolean;
+  showNodeName?: boolean;
+  showNodeType?: boolean;
+  showEnv?: boolean;
+  showInputs?: boolean;
+  showOutputs?: boolean;
+  showVersion?: boolean;
+  showAction?: boolean;
 }
 
 interface TableSettingsContextType {
   settings: TableSettings;
-  // eslint-disable-next-line no-unused-vars
-  toggleSetting: (_key: keyof TableSettings) => void;
+  toggleSetting: (key: keyof TableSettings) => void;
 }
 
 const defaultState: TableSettings = {
+  // Jobs Table
+  showJobId: true,
+  showJobName: true,
+  showCreated: true,
+  showProgram: true,
+  showJobType: true,
+  showLabel: true,
+  showStatus: true,
+  // Nodes Table
   showNodeId: true,
-  showName: true,
-  showType: true,
+  showNodeName: true,
+  showNodeType: true,
   showEnv: true,
   showInputs: true,
   showOutputs: true,
   showVersion: true,
   showAction: true,
 };
 
-const defaultContextValue: TableSettingsContextType = {
+const TableSettingsContext = React.createContext<TableSettingsContextType>({
   settings: defaultState,
   toggleSetting: () => {},
-};
-
-const TableSettingsContext =
-  React.createContext<TableSettingsContextType>(defaultContextValue);
+});
 
 export const TableSettingsProvider: React.FC<{ children: ReactNode }> = ({
   children,

webui/src/pages/JobDetail/JobDetail.tsx

@@ -50,7 +50,6 @@ const JobDetail: React.FC = () => {
   }
 
   const manyExecutions = jobExData.length > 1;
-
   const executionsData = {
     headers: [
       "Execution ID",

webui/src/pages/JobsDashboard/JobsTable/JobsTable.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import Moment from "react-moment";
 import styles from "./JobsTable.module.scss";
 import ProgramSummary from "./ProgramSummary/ProgramSummary";
@@ -10,6 +10,7 @@ import {
   getShortenedJobID,
 } from "../../../helpers/helperFunctions";
 import { Job, ParsedJobData } from "../../../helpers/jobInterfaces";
+import TableSettingsContext from "../../../context/TableSettingsContext";
 
 interface TableProps {
   data: Job[];
@@ -62,50 +63,69 @@ function createLabelArray(label: { [key: string]: string }): string[] {
 }
 
 const JobsTable: React.FC<TableProps> = ({ data }) => {
+  const { settings } = useContext(TableSettingsContext);
   const parsedData = parseData(data);
+
   return (
     <div className={styles.tableContainer}>
       <table>
         <thead>
           <tr>
-            <th className={styles.jobID}>Job ID</th>
-            <th>Name</th>
-            <th className={styles.dateCreated}>Created</th>
-            <th>Program</th>
-            <th>Job Type</th>
-            <th>Label</th>
-            <th>Status</th>
-            <th>Action</th>
+            {settings.showJobId && <th className={styles.jobID}>Job ID</th>}
+            {settings.showJobName && <th>Name</th>}
+            {settings.showCreated && (
+              <th className={styles.dateCreated}>Created</th>
+            )}
+            {settings.showProgram && <th>Program</th>}
+            {settings.showJobType && <th>Job Type</th>}
+            {settings.showLabel && <th>Label</th>}
+            {settings.showStatus && <th>Status</th>}
           </tr>
         </thead>
         <tbody>
           {parsedData.map((jobData, index) => (
             <tr key={index}>
-              <td className={styles.id}>{jobData.id}</td>
-              <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>
+              )}
+              {settings.showCreated && (
+                <td className={styles.dateCreated}>
+                  <Moment fromNow withTitle>
+                    {jobData.createdAt}
+                  </Moment>
+                </td>
+              )}
+              {settings.showProgram && (
+                <td className={styles.program}>
+                  <ProgramSummary data={jobData.tasks} />
+                </td>
+              )}
+              {settings.showJobType && (
+                <td className={styles.jobType}>{jobData.jobType}</td>
+              )}
+              {settings.showLabel && (
+                <td className={styles.label}>{jobData.label}</td>
+              )}
+              {settings.showStatus && (
+                <td className={styles.status}>
+                  <Label
+                    text={jobData.status}
+                    color={labelColorMap[jobData.status.toLowerCase()]}
+                  />
+                </td>
+              )}
+              {settings.showAction && (
+                <td className={styles.action}>
+                  <ActionButton
+                    text="View"
+                    to="/JobDetail"
+                    id={jobData.longId}
+                  />
+                </td>
+              )}
             </tr>
           ))}
         </tbody>

webui/src/pages/NodesDashboard/NodesTable/NodesTable.tsx

@@ -36,8 +36,8 @@ const NodesTable: React.FC<TableProps> = ({ data }) => {
         <thead>
           <tr>
             {settings.showNodeId && <th>Node ID</th>}
-            {settings.showName && <th>Name</th>}
-            {settings.showType && <th>Type</th>}
+            {settings.showNodeName && <th>Name</th>}
+            {settings.showNodeType && <th>Type</th>}
             {settings.showEnv && <th>Environment</th>}
             {settings.showInputs && <th>Inputs From</th>}
             {settings.showOutputs && <th>Outputs</th>}
@@ -51,10 +51,10 @@ const NodesTable: React.FC<TableProps> = ({ data }) => {
               {settings.showNodeId && (
                 <td className={styles.id}>{nodeData.id}</td>
               )}
-              {settings.showName && (
+              {settings.showNodeName && (
                 <td className={styles.name}>{nodeData.name}</td>
               )}
-              {settings.showType && (
+              {settings.showNodeType && (
                 <td className={styles.type}>{nodeData.type}</td>
               )}
               {settings.showEnv && (

webui/src/pages/Settings/Settings.module.scss

@@ -0,0 +1,28 @@
+@import '../../styles/variables';
+
+.checkboxGroup {
+display: flex;
+align-items: center;
+margin-bottom: 10px;
+
+label {
+    margin-left: 10px;
+    font-size: 16px;
+    color: #333;
+}
+}
+
+.saveButton {
+    padding: 5px 15px;
+    background-color: rgba($light-blue, .5);
+    color: $text-color-dark;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+
+    &:hover {
+        background-color: rgba($light-blue, .7);
+    }
+}
+

webui/src/pages/Settings/Settings.tsx

@@ -3,8 +3,10 @@ import {
   useTableSettings,
   TableSettings,
 } from "../../context/TableSettingsContext";
+import styles from "./Settings.module.scss";
 import Layout from "../../layout/Layout";
 import Checkbox from "../../components/Checkbox/Checkbox";
+import Container from "../../components/Container/Container";
 
 const Settings = () => {
   const { settings, toggleSetting } = useTableSettings();
@@ -24,53 +26,61 @@ const Settings = () => {
         localStorage.setItem("tableSettings", JSON.stringify(tempSettings));
       }
     });
+    window.alert("Settings updated");
   };
 
+  const jobsOptions: { label: string; key: keyof TableSettings }[] = [
+    { label: "Job ID", key: "showJobId" },
+    { label: "Name", key: "showJobName" },
+    { label: "Created", key: "showCreated" },
+    { label: "Program", key: "showProgram" },
+    { label: "Job Type", key: "showJobType" },
+    { label: "Label", key: "showLabel" },
+    { label: "Status", key: "showStatus" },
+  ];
+
+  const nodesOptions: { label: string; key: keyof TableSettings }[] = [
+    { label: "Node ID", key: "showNodeId" },
+    { label: "Name", key: "showNodeName" },
+    { label: "Type", key: "showNodeType" },
+    { label: "Environment", key: "showEnv" },
+    { label: "Inputs In", key: "showInputs" },
+    { label: "Outputs", key: "showOutputs" },
+    { label: "Version", key: "showVersion" },
+  ];
+
   return (
     <Layout pageTitle="Settings">
+      {/* Jobs Dashboard Settings */}
+      <Container title={"Jobs Dashboard Settings"}>
+        {jobsOptions.map(({ label, key }) => (
+          <div className={styles.checkboxGroup}>
+            <Checkbox
+              label={label}
+              checked={tempSettings[key]}
+              onChange={() => handleToggle(key)}
+            />
+          </div>
+        ))}
+        <button onClick={handleSave} className={styles.saveButton}>
+          Save
+        </button>
+      </Container>
       {/* Node Dashboard Settings */}
-      <h3>Nodes Dashboard Settings:</h3>
-      <Checkbox
-        label="Node ID"
-        checked={tempSettings.showNodeId}
-        onChange={() => handleToggle("showNodeId")}
-      />
-      <Checkbox
-        label="Name"
-        checked={tempSettings.showName}
-        onChange={() => handleToggle("showName")}
-      />
-      <Checkbox
-        label="Type"
-        checked={tempSettings.showType}
-        onChange={() => handleToggle("showType")}
-      />
-      <Checkbox
-        label="Environment"
-        checked={tempSettings.showEnv}
-        onChange={() => handleToggle("showEnv")}
-      />
-      <Checkbox
-        label="Inputs In"
-        checked={tempSettings.showInputs}
-        onChange={() => handleToggle("showInputs")}
-      />
-      <Checkbox
-        label="Outputs"
-        checked={tempSettings.showOutputs}
-        onChange={() => handleToggle("showOutputs")}
-      />
-      <Checkbox
-        label="Version"
-        checked={tempSettings.showVersion}
-        onChange={() => handleToggle("showVersion")}
-      />
-      {/* <Checkbox
-        label="Action"
-        checked={tempSettings.showAction}
-        onChange={() => handleToggle("showAction")}
-      /> */}
-      <button onClick={handleSave}>Save</button>
+      <Container title={"Nodes Dashboard Settings"}>
+        {nodesOptions.map(({ label, key }) => (
+          <div className={styles.checkboxGroup}>
+            <Checkbox
+              label={label}
+              checked={tempSettings[key]}
+              onChange={() => handleToggle(key)}
+            />
+          </div>
+        ))}
+        <button onClick={handleSave} className={styles.saveButton}>
+          Save
+        </button>
+      </Container>
     </Layout>
   );
 };