TheHiveButton: lists of observables are now collapsible

Collapsed automatically when there are more than 3 observables.

thehive_button/package.json

@@ -12,9 +12,7 @@
     "build": "plugin-helpers build"
   },
   "dependencies": {
-    "request": "^2.88.0",
-    "@elastic/eui": "10.4.2",
-    "react": "^16.8.0"
+    "request": "^2.88.0"
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",

thehive_button/public/vis_controller.js

@@ -24,6 +24,7 @@ import {
   EuiSuperSelect,
   EuiBasicTable,
   EuiCheckbox,
+  EuiAccordion,
   makeId,
 } from '@elastic/eui';
 
@@ -406,7 +407,7 @@ class ModalContent extends Component {
                 />
               </EuiFormRow>
               
-              {this.props.fields.length > 0 && <EuiTitle size="s"><h3>Add observables from current query ...</h3></EuiTitle>}
+              {this.props.fields.length > 0 && <><EuiTitle size="s"><h3>Add observables from current query ...</h3></EuiTitle><EuiSpacer size="m" /></>}
               {this.props.fields.map((field,ix) => (
                 <ObservablesTable
                   key={field.name + ":" + this.props.resetCnt}
@@ -508,28 +509,33 @@ class ObservablesTable extends Component {
     
     return (
       <>
-        <EuiTitle size="xs"><h4>{this.props.fieldName}</h4></EuiTitle>
-        <EuiBasicTable
-          ref={this.tableRef}
-          columns={this.columns}
-          items={this.table_data}
-          itemId={(item3) => item3.id}
-          selection={ {onSelectionChange: (selectedItems) => this.props.onObsSelectionChange(this.props.fieldName, selectedItems) } }
-          noItemsMessage="No observables found"
-          rowProps={{
-            // Hack to allow selection by clicking anywhere in the table row
-            // (except input elements)
-            onClick: (e) => {
-              if (e.target.tagName != "INPUT") {
-                // simulate click on the first checkbox in the row to (de)select the row
-                e.currentTarget.querySelector("input").click();
-                e.currentTarget.blur(); // without this the focus remains on the row after click (results in different color)
-              }
-            },
-            tabIndex: "-1", // prevents focus on row by keyboard navigation
-          }}
-        />
-        <EuiSpacer size="l" />
+        <EuiAccordion
+          id="accordion-{this.props.fieldName}"
+          buttonContent={<EuiTitle size="xs"><h4>{this.props.fieldName} ({n_obs})</h4></EuiTitle>}
+          initialIsOpen={n_obs <= 3}
+        >
+          <EuiBasicTable
+            ref={this.tableRef}
+            columns={this.columns}
+            items={this.table_data}
+            itemId={(item3) => item3.id}
+            selection={ {onSelectionChange: (selectedItems) => this.props.onObsSelectionChange(this.props.fieldName, selectedItems) } }
+            noItemsMessage="No observables found"
+            rowProps={{
+              // A hack to allow selection by clicking anywhere in the table row
+              // (except input elements)
+              onClick: (e) => {
+                if (e.target.tagName != "INPUT") {
+                  // simulate click on the first checkbox in the row to (de)select the row
+                  e.currentTarget.querySelector("input").click();
+                  e.currentTarget.blur(); // without this the focus remains on the row after click (results in different color)
+                }
+              },
+              tabIndex: "-1", // prevents focus on row by keyboard navigation
+            }}
+          />
+        </EuiAccordion>
+        <EuiSpacer size="m" />
       </>
     )
   }