Split table and controls into separate components, implement search f…

…eatures.

x-pack/plugins/beats_management/common/domain_types.ts

@@ -28,7 +28,7 @@ export interface CMBeat {
 }
 
 export interface CMPopulatedBeat extends CMBeat {
-  fullTags: BeatTag[];
+  full_tags: BeatTag[];
 }
 
 export interface BeatTag {

x-pack/plugins/beats_management/public/components/table/__snapshots__/beats_table.test.tsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeatsTable component matches snapshot 1`] = `
+<styled.div>
+  <BulkActionControlBar
+    onBulkAction={[Function]}
+    onSearchQueryChange={[Function]}
+    tagOptions={
+      Array [
+        Object {
+          "value": "Production",
+        },
+      ]
+    }
+    typeOptions={
+      Array [
+        Object {
+          "value": "type",
+        },
+      ]
+    }
+  />
+  <EuiInMemoryTable
+    columns={
+      Array [
+        Object {
+          "field": "id",
+          "name": "Beat name",
+          "render": [Function],
+          "sortable": true,
+        },
+        Object {
+          "field": "type",
+          "name": "Type",
+          "sortable": true,
+        },
+        Object {
+          "field": "full_tags",
+          "name": "Tags",
+          "render": [Function],
+          "sortable": false,
+        },
+        Object {
+          "field": "event_rate",
+          "name": "Event rate",
+          "sortable": true,
+        },
+        Object {
+          "field": "last_updated",
+          "name": "Last config update",
+          "sortable": true,
+        },
+      ]
+    }
+    isSelectable={true}
+    itemId="id"
+    items={
+      Array [
+        Object {
+          "access_token": "access",
+          "full_tags": Array [
+            Object {
+              "configuration_blocks": Array [],
+              "id": "Production",
+            },
+          ],
+          "host_ip": "ip",
+          "host_name": "name",
+          "id": "beatid",
+          "type": "type",
+        },
+      ]
+    }
+    pagination={
+      Object {
+        "pageIndex": 0,
+        "pageSize": 5,
+        "pageSizeOptions": Array [
+          3,
+          5,
+          8,
+        ],
+        "totalItemCount": 1,
+      }
+    }
+    responsive={true}
+    selection={
+      Object {
+        "onSelectionChange": [Function],
+        "selectable": [Function],
+        "selectableMessage": [Function],
+      }
+    }
+    sorting={true}
+  />
+</styled.div>
+`;

x-pack/plugins/beats_management/public/components/beats_table.test.tsx → x-pack/plugins/beats_management/public/components/table/beats_table.test.tsx

@@ -6,15 +6,13 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { CMPopulatedBeat } from '../../common/domain_types';
+import { CMPopulatedBeat } from '../../../common/domain_types';
 import { BeatsTable } from './beats_table';
 
 describe('BeatsTable component', () => {
   let items: CMPopulatedBeat[];
   let beat;
-  let onBulkEdit: any;
-  let onBulkDelete: any;
-  let onBulkAssignTags: any;
+  let onBulkAction: any;
 
   beforeEach(() => {
     beat = {
@@ -23,28 +21,19 @@ describe('BeatsTable component', () => {
       type: 'type',
       host_ip: 'ip',
       host_name: 'name',
-      fullTags: [
+      full_tags: [
         {
           id: 'Production',
           configuration_blocks: [],
         },
       ],
     };
     items = [beat];
-    onBulkEdit = jest.fn();
-    onBulkDelete = jest.fn();
-    onBulkAssignTags = jest.fn();
+    onBulkAction = jest.fn();
   });
 
   it('matches snapshot', () => {
-    const wrapper = shallow(
-      <BeatsTable
-        items={items}
-        onBulkEdit={onBulkEdit}
-        onBulkDelete={onBulkDelete}
-        onBulkAssignTags={onBulkAssignTags}
-      />
-    );
+    const wrapper = shallow(<BeatsTable items={items} onBulkAction={onBulkAction} />);
     expect(wrapper).toMatchSnapshot();
   });
 });