refactor(tableComponent): update column definitions to include checkbox selection logic for first column

feat(API): add support for excluding specific columns in getMessagesTable function

fix(flowLogsModal): pass excludedFields parameter to getMessagesTable function

refactor(GlobalVariablesPage): remove unnecessary checkbox selection properties from column definitions

fix(messagesPage): pass excludedFields parameter to getMessagesTable function

refactor(utils): add support for excluding specific columns in extractColumnsFromRows function

src/frontend/src/components/tableComponent/index.tsx

@@ -46,6 +46,18 @@ const TableComponent = forwardRef<
         </div>
       );
     }
+    const colDef = props.columnDefs.map((col, index) => {
+      if (props.onSelectionChanged && index === 0) {
+        return {
+          ...col,
+          checkboxSelection: true,
+          headerCheckboxSelection: true,
+          headerCheckboxSelectionFilteredOnly: true,
+        };
+      } else {
+        return col;
+      }
+    });
 
     return (
       <div
@@ -60,6 +72,7 @@ const TableComponent = forwardRef<
           defaultColDef={{
             minWidth: 100,
           }}
+          columnDefs={colDef}
           ref={ref}
         />
       </div>

src/frontend/src/controllers/API/index.ts

@@ -1024,6 +1024,7 @@ export async function getTransactionTable(
 export async function getMessagesTable(
   mode: "intersection" | "union",
   id?: string,
+  excludedFields?: string[],
   params = {},
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
@@ -1034,6 +1035,6 @@ export async function getMessagesTable(
     config["params"] = { ...config["params"], ...params };
   }
   const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
-  const columns = extractColumnsFromRows(rows.data, mode);
+  const columns = extractColumnsFromRows(rows.data, mode, excludedFields);
   return { rows: rows.data, columns };
 }

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -53,11 +53,13 @@ export default function FlowLogsModal({
         setRows(rows);
       });
     } else if (activeTab === "Messages") {
-      getMessagesTable("union", currentFlowId).then((data) => {
-        const { columns, rows } = data;
-        setColumns(columns.map((col) => ({ ...col, editable: true })));
-        setRows(rows);
-      });
+      getMessagesTable("union", currentFlowId, ["index", "flow_id"]).then(
+        (data) => {
+          const { columns, rows } = data;
+          setColumns(columns.map((col) => ({ ...col, editable: true })));
+          setRows(rows);
+        },
+      );
     }
 
     if (open && activeTab === "Messages" && !noticed.current) {

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -78,9 +78,6 @@ export default function GlobalVariablesPage() {
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
     {
-      headerCheckboxSelection: true,
-      checkboxSelection: true,
-      showDisabledCheckboxes: true,
       headerName: "Variable Name",
       field: "name",
       flex: 2,

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -49,7 +49,7 @@ export default function MessagesPage() {
 
   useEffect(() => {
     console.log("MessagesPage useEffect");
-    getMessagesTable("union").then((data) => {
+    getMessagesTable("union", undefined, ["index"]).then((data) => {
       const { columns, rows } = data;
       console.log(data);
       setColumns(columns.map((col) => ({ ...col, editable: true })));

src/frontend/src/utils/utils.ts

@@ -354,8 +354,9 @@ export function isTimeStampString(str: string): boolean {
 export function extractColumnsFromRows(
   rows: object[],
   mode: "intersection" | "union",
+  excludeColumns?: Array<string>,
 ): (ColDef<any> | ColGroupDef<any>)[] {
-  const columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
+  let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
   if (rows.length === 0) {
     return [];
   }
@@ -395,5 +396,11 @@ export function extractColumnsFromRows(
     union();
   }
 
+  if (excludeColumns) {
+    for (const key of excludeColumns) {
+      delete columnsKeys[key];
+    }
+  }
+
   return Object.values(columnsKeys);
 }