Feature/field search and sorting

common/constants/explorer.ts

@@ -12,6 +12,7 @@
 export const RAW_QUERY = 'rawQuery';
 export const SELECTED_FIELDS = 'selectedFields';
 export const UNSELECTED_FIELDS = 'unselectedFields';
+export const AVAILABLE_FIELDS = 'availableFields';
 export const TAB_ID_TXT_PFX = 'query-panel-';
 export const TAB_TITLE = 'New query';
 export const TAB_CHART_TITLE = 'Visualizations';

public/components/explorer/data_grid.scss

@@ -18,11 +18,6 @@
   flex: 1 1 100%;
   flex-direction: column; /* 1 */
 
-  th {
-    text-align: left;
-    font-weight: bold;
-  }
-
   .spinner {
     position: absolute;
     top: 40%;
@@ -143,6 +138,11 @@
       font-weight: $euiFontWeightBold;
     }
   }
+
+  th {
+    text-align: left;
+    font-weight: bold;
+  }
 }
 
 table {

public/components/explorer/data_grid.tsx

@@ -12,12 +12,13 @@
 import './data_grid.scss';
 
 import React, { useMemo } from 'react';
-import _ from 'lodash';
+import { uniqueId } from 'lodash';
 import { DocViewRow } from './docTable/index';
+import { IExplorerFields } from '../../../common/types/explorer';
 
 interface DataGridProps {
-  rows: Array<any>,
-  explorerFields: Array<any>
+  rows: Array<any>;
+  explorerFields: IExplorerFields;
 }
 
 export function DataGrid(props: DataGridProps) {
@@ -28,37 +29,47 @@ export function DataGrid(props: DataGridProps) {
 
   const getTrs = (
     docs: Array<any> = [],
-    explorerFields: Array<any>
+    explorerFields: IExplorerFields
   ) => {
     return docs.map((doc) => {
       return (
         <DocViewRow
-          key={ _.uniqueId('doc_view') } 
+          key={ uniqueId('doc_view') } 
           doc={ doc }
           selectedCols={ explorerFields?.selectedFields }
         />
       );
     });
   };
 
-  const getHeaders = (fields: Array<any>) => {
+  const defaultCols = [
+    '',
+    'Time',
+    '_source'
+  ];
+
+  const getHeaders = (fields: IExplorerFields) => {
     let tableHeadContent = null;
     if (!fields.selectedFields || fields.selectedFields.length === 0) {
       tableHeadContent = (
           <>
-            <th></th>
-            <th>Time</th>
-            <th>_source</th>
+            { defaultCols.map((colName: string) => {
+              return (
+                <th key={ uniqueId('datagrid-header-') }>
+                  { colName }
+                </th>
+              );
+            }) }
           </>
       );
     } else {
       tableHeadContent = fields.selectedFields.map(selField => {
         return (
-          <th>{ selField.name }</th>
+          <th key={ uniqueId('datagrid-header-')}>{ selField.name }</th>
         );
       });
-      tableHeadContent.unshift(<th>Time</th>);
-      tableHeadContent.unshift(<th></th>);
+      tableHeadContent.unshift(<th key={ uniqueId('datagrid-header-')}>Time</th>);
+      tableHeadContent.unshift(<th key={ uniqueId('datagrid-header-')}></th>);
     }
 
     return (

public/components/explorer/docTable/docViewRow.tsx

@@ -10,12 +10,27 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import _ from 'lodash';
+import { 
+  toPairs,
+  uniqueId,
+  has,
+  forEach
+} from 'lodash';
 import { EuiIcon } from '@elastic/eui';
 import { DocViewer } from './docViewer';
 import { DocDetailTitle } from './detailTable/docDetailTitle';
+import { IField } from '../../../../common/types/explorer';
 
-export const DocViewRow = (props: any) => {
+export interface IDocType { 
+  [key: string] : string; 
+}
+
+interface IDocViewRowProps {
+  doc: IDocType;
+  selectedCols: Array<IField>;
+}
+
+export const DocViewRow = (props: IDocViewRowProps) => {
 
   const {
     doc,
@@ -31,14 +46,14 @@ export const DocViewRow = (props: any) => {
     } = conf;
     return (
       <td
-        key={_.uniqueId('grid-td-')}
+        key={ uniqueId('datagrid-cell-') }
         className={ clsName }
       >
         { content }
       </td>);
   };
 
-  const getDlTmpl = (conf) => {
+  const getDlTmpl = (conf: { doc: IDocType }) => {
     const {
       doc
     } = conf;
@@ -47,10 +62,10 @@ export const DocViewRow = (props: any) => {
       <div className="truncate-by-height">
         <span>
           <dl className="source truncate-by-height">
-            { _.toPairs(doc).map((entry) => {
+            { toPairs(doc).map((entry: Array<string>) => {
               return (
                 <span
-                  key={ _.uniqueId('grid-desc') }
+                  key={ uniqueId('grid-desc') }
                 >
                   <dt>{ entry[0] }:</dt>
                   <dd>
@@ -67,7 +82,7 @@ export const DocViewRow = (props: any) => {
     );
   };
 
-  const getDiscoverSourceLikeDOM = (doc) => {
+  const getDiscoverSourceLikeDOM = (doc: IDocType) => {
     return getDlTmpl({ doc, });
   };
 
@@ -80,7 +95,7 @@ export const DocViewRow = (props: any) => {
     return (
       <td
         className="osdDocTableCell__toggleDetails"
-        key={_.uniqueId('grid-td-')}
+        key={ uniqueId('grid-td-') }
       >
         <button
           className="euiButtonIcon euiButtonIcon--text"
@@ -92,13 +107,16 @@ export const DocViewRow = (props: any) => {
     );
   };
 
-  const getTds = (doc, selectedCols) => {
+  const getTds = (
+    doc: IDocType, 
+    selectedCols: Array<IField>
+  ) => {
     const cols = [];
     const fieldClsName = 'osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord';
     const timestampClsName = 'eui-textNoWrap';
     // No field is selected
     if (!selectedCols || selectedCols.length === 0) {
-      if (_.has(doc, 'timestamp')) {
+      if (has(doc, 'timestamp')) {
         cols.push(
           getTdTmpl({ 
             clsName: timestampClsName,
@@ -117,12 +135,12 @@ export const DocViewRow = (props: any) => {
 
       // Has at least one field selected
       const filteredDoc = {};
-      _.forEach(selectedCols, selCol => {
-        if (_.has(doc, selCol.name)) {
+      forEach(selectedCols, selCol => {
+        if (has(doc, selCol.name)) {
           filteredDoc[selCol.name] = doc[selCol.name];
         }
       })
-      _.forEach(filteredDoc, (val, key) => {
+      forEach(filteredDoc, (val, key) => {
         cols.push(
           getTdTmpl({ 
             clsName: fieldClsName,
@@ -131,13 +149,13 @@ export const DocViewRow = (props: any) => {
         );
       });
 
-      if (_.has(doc, 'timestamp')) {
+      if (has(doc, 'timestamp')) {
         cols.unshift(
-              getTdTmpl({ 
-                clsName: timestampClsName,
-                content: doc['timestamp']
-              })
-            );
+          getTdTmpl({ 
+            clsName: timestampClsName,
+            content: doc['timestamp']
+          })
+        );
       }
     }
 
@@ -167,8 +185,8 @@ export const DocViewRow = (props: any) => {
       </tr>
       { detailsOpen ? <tr className="osdDocTableDetails__row">
         <td 
-          key={_.uniqueId('grid-td-detail-')}
-          colSpan={3}
+          key={ uniqueId('grid-td-detail-') }
+          colSpan={ selectedCols.length ?  selectedCols.length + 2 : 3 }
         >
           <DocDetailTitle />
           <DocViewer

public/components/explorer/docTable/docViewer.tsx

@@ -17,20 +17,25 @@ import {
 } from '@elastic/eui';
 import { DocViewTable } from './detailTable/docDetailTable';
 import { JsonCodeBlock } from './json_code_block/json_code_block';
+import { IDocType } from './docViewRow';
 
 const TABS = ['Table', 'JSON'];
 
-export function DocViewer(props: any) {
+interface IDocViewerProps {
+  hit: IDocType
+}
 
-  const [curSelectedTab, setCurSelectedTab] = useState<EuiTabbedContentTab>(null);
+export function DocViewer(props: IDocViewerProps) {
+
+  const [curSelectedTab, setCurSelectedTab] = useState<EuiTabbedContentTab | null>(null);
 
   // can be passed in later
-  const getTabList = (props = null) => {
+  const getTabList = () => {
     return [
       {
         id: _.uniqueId('doc_viewer_tab_'),
         name: 'Table',
-        component: (tabProps) => <DocViewTable
+        component: (tabProps: any) => <DocViewTable
                                     filter={ () => {} }
                                     onAddColumn={ () => {} }
                                     onRemoveColumn={ () => {} }
@@ -41,15 +46,14 @@ export function DocViewer(props: any) {
       {
         id: _.uniqueId('doc_viewer_tab_'),
         name: 'JSON',
-        component: (tabProps) => <JsonCodeBlock { ...tabProps }/>,
+        component: (tabProps: any) => <JsonCodeBlock { ...tabProps }/>,
         otherProps: {}
       }
     ];
   };
 
   const tabs = useMemo(() => {
     return getTabList().map((tab) => {
-      const tid = new Date().valueOf()
       const Component = tab.component;
       return {
         id: tab.id,

public/components/explorer/docTable/json_code_block/json_code_block.tsx

@@ -12,9 +12,9 @@
 import React from 'react';
 import { EuiCodeBlock } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-// import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+import { IDocType } from '../docViewRow';
 
-export function JsonCodeBlock({ hit }: any) {
+export function JsonCodeBlock({ hit }: { hit: IDocType }) {
   const label = i18n.translate('discover.docViews.json.codeEditorAriaLabel', {
     defaultMessage: 'Read only JSON view of an elasticsearch document',
   });