Adds EUI to Render Functions (elastic#751)

* Added EuiFieldText and EuiButton to advanced_filter

Added EuiSelect to dropdown_filter

Added EUI to time_picker_mini

cleaned up styles for time picker

Changed inputs and buttons to compressed size

fixed style in datetime_quick_list

Changed select to plain select

Changed to plain button for time_picker_mini

Added arrow icon to dropdown_filter

Changed to plain input and button for advanced filter

Cleaned up dropdown_filter

Cleaned up datetime_calender

Cleaned up advanced_filter style

Fixed datetime_calendar styles

Removed bootstrap from datable. Applied basic style for datatable

Fixed icon in datatable

Removed paginate_controls

Fixed pagination logic

changed initial height of time_filter element

Replaced & with prefixes in advanced_filter, dropdown_filter, and time_filter SCSS files

Added maxWidth to datasource preview

* Fixed overflow issues in datasource preview

* Reverted time_filter default height to 50

public/components/datasource/datasource_preview/datasource_preview.js

@@ -6,27 +6,26 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSpacer,
   EuiPanel,
+  EuiText,
 } from '@elastic/eui';
 import { Datatable } from '../../datatable';
 
 export const DatasourcePreview = ({ show, done, datatable }) =>
   show ? (
     <EuiOverlayMask>
-      <EuiModal onClose={done} style={{ maxWidth: '1000px' }}>
+      <EuiModal onClose={done}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>Datasource Preview</EuiModalHeaderTitle>
         </EuiModalHeader>
-        <EuiModalBody>
-          <p>
-            Shown below are the first 10 rows of your datasource. Click <strong>Save</strong> in the
-            sidebar to use this data.
-          </p>
-
-          <EuiSpacer />
-
-          <EuiPanel>
+        <EuiModalBody className="canvasDatasourcePreview">
+          <EuiText size="s" color="subdued">
+            <p>
+              Shown below are the first 10 rows of your datasource. Click <strong>Save</strong> in
+              the sidebar to use this data.
+            </p>
+          </EuiText>
+          <EuiPanel className="canvasDatasourcePreview__panel">
             <Datatable datatable={datatable} showHeader />
           </EuiPanel>
         </EuiModalBody>

public/components/datasource/datasource_preview/datasource_preview.scss

@@ -0,0 +1,9 @@
+.canvasDatasourcePreview {
+  max-width: 80vw;
+  max-height: 60vh;
+  height: 100%;
+
+  .canvasDatasourcePreview__panel {
+    height: calc(100% - #{$euiSize} * 3);
+  }
+}

public/components/datatable/datatable.js

@@ -1,26 +1,31 @@
 import React from 'react';
-import { Table } from 'react-bootstrap';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiIcon, EuiPagination } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Paginate } from '../paginate';
-import { PaginateControls } from '../paginate_controls';
 
 const getIcon = type => {
   if (type === null) return;
 
+  let icon;
   switch (type) {
     case 'string':
-      return <strong>a</strong>;
+      icon = 'string';
+      break;
     case 'number':
-      return <strong>#</strong>;
+      icon = 'number';
+      break;
     case 'date':
-      return <i className="fa fa-calendar" />;
+      icon = 'calendar';
+      break;
     case 'boolean':
-      return <strong>t</strong>;
+      icon = 'invert';
+      break;
     default:
-      return <strong>?</strong>;
+      icon = 'questionInCircle';
   }
+
+  return <EuiIcon type={icon} color="subdued" />;
 };
 
 const getColumnName = col => (typeof col === 'string' ? col : col.name);
@@ -34,55 +39,38 @@ const getFormattedValue = (val, type) => {
 
 export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
   <Paginate rows={datatable.rows} perPage={perPage || 10}>
-    {({
-      rows,
-      nextPage,
-      prevPage,
-      setPage,
-      prevPageEnabled,
-      nextPageEnabled,
-      pageNumber,
-      totalPages,
-    }) => (
+    {({ rows, setPage, pageNumber, totalPages }) => (
       <div className="canvasDataTable">
-        <div style={{ flexGrow: 1 }}>
-          <Table condensed>
+        <div className="canvasDataTable__tableWrapper">
+          <table className="canvasDataTable__table">
             {!showHeader ? null : (
-              <thead>
-                <tr>
+              <thead className="canvasDataTable__thead">
+                <tr className="canvasDataTable__tr">
                   {datatable.columns.map(col => (
-                    <th key={`header-${getColumnName(col)}`}>
-                      {getColumnName(col)}{' '}
-                      <EuiTextColor color="subdued">{getIcon(getColumnType(col))}</EuiTextColor>
+                    <th key={`header-${getColumnName(col)}`} className="canvasDataTable__th">
+                      {getColumnName(col)}&nbsp;{getIcon(getColumnType(col))}
                     </th>
                   ))}
                 </tr>
               </thead>
             )}
-            <tbody>
+            <tbody className="canvasDataTable__tbody">
               {rows.map((row, i) => (
-                <tr key={i}>
+                <tr key={i} className="canvasDataTable__tr">
                   {datatable.columns.map(col => (
-                    <td key={`row-${i}-${getColumnName(col)}`}>
+                    <td key={`row-${i}-${getColumnName(col)}`} className="canvasDataTable__td">
                       {getFormattedValue(row[getColumnName(col)], getColumnType(col))}
                     </td>
                   ))}
                 </tr>
               ))}
             </tbody>
-          </Table>
+          </table>
         </div>
-
         {paginate && (
-          <PaginateControls
-            prevPage={prevPage}
-            prevPageEnabled={prevPageEnabled}
-            setPage={setPage}
-            pageNumber={pageNumber}
-            totalPages={totalPages}
-            nextPage={nextPage}
-            nextPageEnabled={nextPageEnabled}
-          />
+          <div className="canvasDataTable__footer">
+            <EuiPagination pageCount={totalPages} activePage={pageNumber} onPageClick={setPage} />
+          </div>
         )}
       </div>
     )}

public/components/datatable/datatable.scss

@@ -1,31 +1,46 @@
 .canvasDataTable {
+  width: 100%;
   height: 100%;
-  overflow: auto;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
-  td, th {
-    border-top: 0px !important;
-    border-bottom: 0px !important;
-  }
+  .canvasDataTable__tableWrapper {
+    @include euiScrollBar;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
 
-  th {
-    white-space: nowrap;
+    // removes white square in the scrollbar corner
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
   }
 
-  // This is a bootstrap overwrite
-  .controls--perpage {
-    padding: $euiSizeXS $euiSize;
-    text-align: right;
+  .canvasDataTable__footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
 
-    label {
-      color: $euiColorDarkestShade;
-      font-weight: bold;
+  .canvasDataTable__tbody {
+    .canvasDataTable__tr:hover {
+      background-color: transparentize($euiColorLightShade, 0.5);
     }
+  }
 
-    select {
-      width: 60px;
-      margin-left: $euiSizeS;
-    }
+  .canvasDataTable__table {
+    min-width: 100%;
+  }
+
+  .canvasDataTable__th,
+  .canvasDataTable__td {
+    text-align: left;
+    padding: $euiSizeS;
+  }
+
+  .canvasDataTable__th {
+    white-space: nowrap;
+    font-weight: bold;
   }
 }

public/components/paginate/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { compose, withState, withProps, withHandlers } from 'recompose';
+import { compose, withState, withProps, withHandlers, lifecycle } from 'recompose';
 import { Paginate as Component } from './paginate';
 
 export const Paginate = compose(
@@ -9,16 +9,16 @@ export const Paginate = compose(
   })),
   withState('currentPage', 'setPage', ({ startPage, totalPages }) => {
     const maxPage = totalPages - 1;
-    if (startPage && startPage > maxPage) return maxPage;
-    if (startPage) return startPage;
+    if (startPage) return Math.min(startPage, maxPage);
     return 0;
   }),
   withProps(({ rows, totalPages, currentPage, perPage }) => {
+    const maxPage = totalPages - 1;
     const start = currentPage * perPage;
     const end = currentPage === 0 ? perPage : perPage * (currentPage + 1);
     return {
-      pageNumber: currentPage + 1,
-      nextPageEnabled: currentPage < totalPages - 1,
+      pageNumber: currentPage,
+      nextPageEnabled: currentPage < maxPage,
       prevPageEnabled: currentPage > 0,
       partialRows: rows.slice(start, end),
     };
@@ -28,6 +28,13 @@ export const Paginate = compose(
       nextPageEnabled && setPage(currentPage + 1),
     prevPage: ({ currentPage, prevPageEnabled, setPage }) => () =>
       prevPageEnabled && setPage(currentPage - 1),
+  }),
+  lifecycle({
+    componentDidUpdate(prevProps) {
+      if (prevProps.perPage !== this.props.perPage) {
+        this.props.setPage(0);
+      }
+    },
   })
 )(Component);
 

public/components/paginate/paginate.js

@@ -8,7 +8,7 @@ export const Paginate = props => {
     totalPages: props.totalPages,
     nextPageEnabled: props.nextPageEnabled,
     prevPageEnabled: props.prevPageEnabled,
-    setPage: num => props.setPage(num - 1),
+    setPage: num => props.setPage(num),
     nextPage: props.nextPage,
     prevPage: props.prevPage,
   });

public/render_functions/advanced_filter/advanced_filter.js

@@ -7,6 +7,7 @@ export const advancedFilter = () => ({
   displayName: 'Advanced Filter',
   help: 'Render a Canvas filter expression',
   reuseDomNode: true,
+  height: 50,
   render(domNode, config, handlers) {
     ReactDOM.render(
       <AdvancedFilter commit={handlers.setFilter} filter={handlers.getFilter()} />,