feat: modal implementation for data ingestion table

splunk_add_on_ucc_framework/dashboard.py

@@ -47,7 +47,7 @@
     "data_ingestion_tab": "data_ingestion_tab_definition.json",
     "errors_tab": "errors_tab_definition.json",
     "resources_tab": "resources_tab_definition.json",
-    "spike_side_panel_definition": "spike_side_panel_definition.json",
+    "data_ingestion_modal_definition": "data_ingestion_modal_definition.json",
 }
 
 data_ingestion = (
@@ -236,7 +236,7 @@ def generate_dashboard_content(
 
     if (
         definition_json_name
-        == default_definition_json_filename["spike_side_panel_definition"]
+        == default_definition_json_filename["data_ingestion_modal_definition"]
     ):
         content = utils.get_j2_env().get_template(definition_json_name).render()
 

splunk_add_on_ucc_framework/templates/data_ingestion_modal_definition.json

@@ -0,0 +1,170 @@
+{
+  "visualizations": {
+    "data_ingestion_modal_timerange_label_start_viz": {
+      "type": "splunk.singlevalue",
+      "options": {
+        "majorFontSize": 12,
+        "backgroundColor": "transparent",
+        "majorColor": "#9fa4af"
+      },
+      "dataSources": {
+        "primary": "data_ingestion_modal_data_time_label_start_ds"
+      }
+    },
+    "data_ingestion_modal_timerange_label_end_viz": {
+      "type": "splunk.singlevalue",
+      "options": {
+        "majorFontSize": 12,
+        "backgroundColor": "transparent",
+        "majorColor": "#9fa4af"
+      },
+      "dataSources": {
+        "primary": "data_ingestion_modal_data_time_label_end_ds"
+      }
+    },
+    "data_ingestion_modal_data_volume_viz": {
+      "type": "splunk.line",
+      "options": {
+        "xAxisVisibility": "hide",
+        "seriesColors": ["#A870EF"],
+        "yAxisTitleText": "Volume (bytes)",
+        "xAxisTitleText": "Time"
+      },
+      "title": "Data volume",
+      "dataSources": {
+        "primary": "data_ingestion_modal_data_volume_ds"
+      }
+    },
+    "data_ingestion_modal_events_count_viz": {
+      "type": "splunk.line",
+      "options": {
+        "xAxisVisibility": "hide",
+        "xAxisTitleText": "Time",
+        "seriesColors": ["#A870EF"],
+        "yAxisTitleText": "Number of events"
+      },
+      "title": "Number of events",
+      "dataSources": {
+        "primary": "ds_search_1"
+      }
+    }
+  },
+  "dataSources": {
+    "data_ingestion_modal_data_time_label_start_ds": {
+      "type": "ds.search",
+      "options": {
+        "query": "| makeresults | addinfo | eval StartDate = strftime(info_min_time, \"%e %b %Y %I:%M%p\") | table StartDate",
+        "queryParameters": {
+          "earliest": "$data_ingestion_modal_time.earliest$",
+          "latest": "$data_ingestion_modal_time.latest$"
+        }
+      }
+    },
+    "data_ingestion_modal_data_time_label_end_ds": {
+      "type": "ds.search",
+      "options": {
+        "query": "| makeresults | addinfo | eval EndDate = strftime(info_max_time, \"%e %b %Y %I:%M%p\") | table EndDate",
+        "queryParameters": {
+          "earliest": "$data_ingestion_modal_time.earliest$",
+          "latest": "$data_ingestion_modal_time.latest$"
+        }
+      }
+    },
+    "data_ingestion_modal_data_volume_ds": {
+      "type": "ds.search",
+      "options": {
+        "query": "| inputlookup firewall_example.csv \n| search host=host8 OR host=host18\n| eval host=case(host=\"host8\", \"spend\", host=\"host18\", \"score\", 1=1, host)\n| eval myTime=strftime(timestamp,\"%H:%M\") \n| chart count over myTime by host\n| eval score=score*2\n| eval spend=spend*1500\n| fields myTime spend score\n| rename score as \"Security Score\", spend as \"Security Spend\"",
+        "queryParameters": {
+          "earliest": "$data_ingestion_modal_time.earliest$",
+          "latest": "$data_ingestion_modal_time.latest$"
+        }
+      }
+    },
+    "ds_search_1": {
+      "type": "ds.search",
+      "options": {
+        "query": "| inputlookup firewall_example.csv \n| search host=host8 OR host=host18\n| eval host=case(host=\"host8\", \"spend\", host=\"host18\", \"score\", 1=1, host)\n| eval myTime=strftime(timestamp,\"%H:%M\") \n| chart count over myTime by host\n| eval score=score*2\n| eval spend=spend*1500\n| fields myTime spend score\n| rename score as \"Security Score\", spend as \"Security Spend\"",
+        "queryParameters": {
+          "earliest": "$data_ingestion_modal_time.earliest$",
+          "latest": "$data_ingestion_modal_time.latest$"
+        }
+      },
+      "name": "Security Score vs Spend"
+    }
+  },
+  "defaults": {},
+  "inputs": {
+    "input1": {
+      "type": "input.dropdown",
+      "options": {
+        "items": [
+          {
+            "label": "Source type",
+            "value": "Source type"
+          },
+          {
+            "label": "Source",
+            "value": "Source"
+          },
+          {
+            "label": "Host",
+            "value": "Host"
+          }
+        ],
+        "defaultValue": "Source type",
+        "token": "data_ingestion_view_by"
+      },
+      "title": "Input"
+    },
+    "data_ingestion_modal_input": {
+      "options": {
+        "defaultValue": "-24h,now",
+        "token": "data_ingestion_modal_time"
+      },
+      "title": "Time Window",
+      "type": "input.timerange"
+    }
+  },
+  "layout": {
+    "type": "grid",
+    "globalInputs": ["input1", "data_ingestion_modal_input"],
+    "structure": [
+      {
+        "item": "data_ingestion_modal_timerange_label_start_viz",
+        "position": {
+          "x": 0,
+          "y": 50,
+          "w": 100,
+          "h": 20
+        }
+      },
+      {
+        "item": "data_ingestion_modal_timerange_label_end_viz",
+        "position": {
+          "x": 100,
+          "y": 50,
+          "w": 100,
+          "h": 20
+        }
+      },
+      {
+        "item": "data_ingestion_modal_data_volume_viz",
+        "position": {
+          "x": 0,
+          "y": 80,
+          "w": 300,
+          "h": 400
+        }
+      },
+      {
+        "item": "data_ingestion_modal_events_count_viz",
+        "position": {
+          "x": 0,
+          "y": 500,
+          "w": 300,
+          "h": 400
+        }
+      }
+    ]
+  }
+}

ui/src/components/table/CustomTable.tsx

@@ -254,29 +254,27 @@ const CustomTable: React.FC<CustomTableProps> = ({
         <Table.Body>
             {data &&
                 data.length &&
-                data.map((row) => {
-                    console.log('row,row', row);
-                    return (
-                        <CustomTableRow // nosemgrep: typescript.react.best-practice.react-props-spreading.react-props-spreading
-                            key={row.id}
-                            row={row}
-                            columns={columns}
-                            rowActions={actions}
-                            headerMapping={headerMapping}
-                            {...{
-                                handleEditActionClick,
-                                handleCloneActionClick,
-                                handleDeleteActionClick,
-                            }}
-                            handleToggleActionClick={handleToggleActionClick}
-                            {...(moreInfo
-                                ? {
-                                      expansionRow: getExpansionRow(columns.length, row, moreInfo),
-                                  }
-                                : {})}
-                        />
-                    );
-                })}
+                data.map((row) => (
+                    <CustomTableRow // nosemgrep: typescript.react.best-practice.react-props-spreading.react-props-spreading
+                        key={row.name || row.id}
+                        row={row}
+                        columns={columns}
+                        rowActions={actions}
+                        headerMapping={headerMapping}
+                        readonly={isReadonlyRow(readonlyFieldId, row)}
+                        {...{
+                            handleEditActionClick,
+                            handleCloneActionClick,
+                            handleDeleteActionClick,
+                        }}
+                        handleToggleActionClick={handleToggleActionClick}
+                        {...(moreInfo
+                            ? {
+                                  expansionRow: getExpansionRow(columns.length, row, moreInfo),
+                              }
+                            : {})}
+                    />
+                ))}
         </Table.Body>
     );
 

ui/src/components/table/TableExpansionRow.jsx

@@ -18,8 +18,6 @@ export function getExpansionRow(colSpan, row, moreInfo) {
         ? inputs.table.customRow
         : inputs.services.find((service) => service.name === row.serviceName).table?.customRow;
 
-    console.log('row getExpansionRow', { row, moreInfo });
-
     return (
         <Table.Row key={`${row.id}-expansion`} style={{ wordBreak: 'break-word' }}>
             <TableCellWrapper colSpan={colSpan}>

ui/src/pages/Dashboard/Custom.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { DashboardCore } from '@splunk/dashboard-core';
 import { DashboardContextProvider } from '@splunk/dashboard-context';
 import EnterpriseViewOnlyPreset from '@splunk/dashboard-presets/EnterpriseViewOnlyPreset';
+import { getActionButtons } from './utils';
 
 /**
  * @param {object} props
@@ -18,6 +19,10 @@ export const CustomDashboard = ({
             preset={EnterpriseViewOnlyPreset}
             initialDefinition={dashboardDefinition}
         >
-            <DashboardCore width="100%" height="auto" />
+            <DashboardCore
+                width="100%"
+                height="auto"
+                actionMenus={getActionButtons('data_ingestion')}
+            />
         </DashboardContextProvider>
     ) : null;