Merge pull request opensearch-project#4 from paulstn/erics-look-and-feel

changed data grid sort page query logic, added sidebar drag drop, added viz config panel changes

common/constants/shared.ts

@@ -240,6 +240,7 @@ export const WAITING_TIME_ON_USER_ACTIONS = 300;
 export const VISUALIZATION_ERROR = {
   NO_DATA: 'No data found.',
   INVALID_DATA: 'Invalid visualization data',
+  NO_SERIES: 'Add a field to start',
 };
 
 export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';

public/components/event_analytics/explorer/events_views/data_grid.tsx

@@ -57,11 +57,11 @@ export function DataGrid(props: DataGridProps) {
     startTime,
     endTime,
   } = props;
-  const { getEvents } = useFetchEvents({
+  const { fetchEvents } = useFetchEvents({
     pplService,
     requestParams,
   });
-  const storedSelectedColumns =
+  const selectedColumns =
     explorerFields.selectedFields.length > 0
       ? explorerFields.selectedFields
       : DEFAULT_EMPTY_EXPLORER_FIELDS;
@@ -70,44 +70,63 @@ export function DataGrid(props: DataGridProps) {
   const sortingFields: MutableRefObject<EuiDataGridSorting['columns']> = useRef([]);
   const pageFields = useRef([0, 100]);
 
+  const [data, setData] = useState(rows);
+
   // setSort and setPage are used to change the query and send a direct request to get data
   const setSort = (sort: EuiDataGridSorting['columns']) => {
     sortingFields.current = sort;
-    redoQuery(startTime, endTime, rawQuery, timeStampField, sortingFields, pageFields, getEvents);
+
+    redoQuery(
+      startTime,
+      endTime,
+      rawQuery,
+      timeStampField,
+      sortingFields,
+      pageFields,
+      fetchEvents,
+      setData
+    );
   };
 
   const setPage = (page: number[]) => {
     pageFields.current = page;
-    redoQuery(startTime, endTime, rawQuery, timeStampField, sortingFields, pageFields, getEvents);
+    const res = redoQuery(
+      startTime,
+      endTime,
+      rawQuery,
+      timeStampField,
+      sortingFields,
+      pageFields,
+      fetchEvents,
+      setData
+    );
+    console.log(res);
   };
 
   // creates the header for each column listing what that column is
   const dataGridColumns = useMemo(() => {
-    if (storedSelectedColumns.length > 0) {
-      const columns: EuiDataGridColumn[] = [];
-      storedSelectedColumns.map(({ name, type }) => {
-        if (name === 'timestamp') {
-          columns.push(DEFAULT_TIMESTAMP_COLUMN);
-        } else if (name === '_source') {
-          columns.push(DEFAULT_SOURCE_COLUMN);
-        } else {
-          columns.push({
-            id: name,
-            display: name,
-            isSortable: true, // TODO: add functionality here based on type
-          });
-        }
-      });
-      return columns;
-    }
-    return [];
-  }, [storedSelectedColumns]);
+    const columns: EuiDataGridColumn[] = [];
+    selectedColumns.map(({ name, type }) => {
+      if (name === 'timestamp') {
+        columns.push(DEFAULT_TIMESTAMP_COLUMN);
+      } else if (name === '_source') {
+        columns.push(DEFAULT_SOURCE_COLUMN);
+      } else {
+        columns.push({
+          id: name,
+          display: name,
+          isSortable: true, // TODO: add functionality here based on type
+        });
+      }
+    });
+    return columns;
+  }, [explorerFields]);
 
   // used for which columns are visible and their order
   const dataGridColumnVisibility = useMemo(() => {
-    if (storedSelectedColumns.length > 0) {
+    if (selectedColumns.length > 0) {
       const columns: string[] = [];
-      storedSelectedColumns.map(({ name }) => {
+      selectedColumns.map(({ name }) => {
         columns.push(name);
       });
       return {
@@ -119,7 +138,7 @@ export function DataGrid(props: DataGridProps) {
     }
     // default shown fields
     throw new Error('explorer data grid stored columns empty');
-  }, [storedSelectedColumns]);
+  }, [explorerFields]);
 
   // sets the very first column, which is the button used for the flyout of each row
   const dataGridLeadingColumns = useMemo(() => {
@@ -159,31 +178,31 @@ export function DataGrid(props: DataGridProps) {
   const dataGridCellRender = useCallback(
     ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
       const trueIndex = rowIndex % pageFields.current[1];
-      if (trueIndex < rows.length) {
+      if (trueIndex < data.length) {
         if (columnId === '_source') {
           return (
             <EuiDescriptionList type="inline" compressed>
-              {Object.keys(rows[trueIndex]).map((key) => (
+              {Object.keys(data[trueIndex]).map((key) => (
                 <Fragment key={key}>
                   <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
                     {key}
                   </EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    {rows[trueIndex][key]}
+                    {data[trueIndex][key]}
                   </EuiDescriptionListDescription>
                 </Fragment>
               ))}
             </EuiDescriptionList>
           );
         }
         if (columnId === 'timestamp') {
-          return `${moment(rows[trueIndex][columnId]).format(DATE_DISPLAY_FORMAT)}`;
+          return `${moment(data[trueIndex][columnId]).format(DATE_DISPLAY_FORMAT)}`;
         }
-        return `${rows[trueIndex][columnId]}`;
+        return `${data[trueIndex][columnId]}`;
       }
       return null;
     },
-    [rows, pageFields, explorerFields]
+    [data, rows, pageFields, explorerFields]
   );
 
   // ** Pagination config
@@ -212,10 +231,10 @@ export function DataGrid(props: DataGridProps) {
     () => ({
       defaultHeight: {
         // if source is listed as a column, add extra space
-        lineCount: storedSelectedColumns.some((obj) => obj.name === '_source') ? 3 : 1,
+        lineCount: selectedColumns.some((obj) => obj.name === '_source') ? 3 : 1,
       },
     }),
-    [storedSelectedColumns]
+    [explorerFields]
   );
 
   // TODO: memoize the expensive table below

public/components/event_analytics/explorer/explorer.scss

@@ -15,7 +15,7 @@
 }
 
 .mainContentTabs .euiResizableContainer {
-  height: calc(100vh - 298px);
+  height: calc(100vh - 194px);
 }
 
 .explorer-loading-spinner {

public/components/event_analytics/explorer/explorer.tsx

@@ -569,7 +569,7 @@ export const Explorer = ({
                       explorerFields={explorerFields}
                       timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
                       rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
-                      totalHits={explorerData?.datarows?.length || 0}
+                      totalHits={_.sum(countDistribution.data['count()'])}
                       requestParams={requestParams}
                       startTime={appLogEvents ? startTime : dateRange[0]}
                       endTime={appLogEvents ? endTime : dateRange[1]}

public/components/event_analytics/explorer/sidebar/sidebar.tsx

@@ -14,7 +14,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { isEmpty } from 'lodash';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { batch, useDispatch } from 'react-redux';
 import { AVAILABLE_FIELDS, SELECTED_FIELDS } from '../../../../../common/constants/explorer';
 import { ExplorerFields, IExplorerFields, IField } from '../../../../../common/types/explorer';
@@ -54,6 +54,18 @@ export const Sidebar = (props: ISidebarProps) => {
   const [showFields, setShowFields] = useState<boolean>(false);
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  // method to return the type of a field from its name
+  const getFieldTypes = (newFieldName: string) => {
+    let fieldType: string = '';
+    explorerFields.availableFields.map((field) => {
+      if (field.name === newFieldName) fieldType = field.type;
+    });
+    explorerFields.selectedFields.map((field) => {
+      if (field.name === newFieldName) fieldType = field.type;
+    });
+    return fieldType;
+  };
+
   /**
    * Toggle fields between selected and unselected sets
    * @param fieldState all fields in store
@@ -117,8 +129,24 @@ export const Sidebar = (props: ISidebarProps) => {
     [explorerFields, tabId]
   );
 
-  const onDragEnd = ({}) => {
-    console.log('source, destination');
+  const onDragEnd = ({
+    destination,
+    source,
+    draggableId,
+  }: {
+    destination: any;
+    source: any;
+    draggableId: string;
+  }) => {
+    // check if the destination and source are the same area
+    if (destination.droppableId !== source.droppableId) {
+      // if dropped into the selected fields: add, if dropped into available: remove
+      if (destination.droppableId === 'SELECTED FIELDS') {
+        handleAddField({ name: draggableId, type: getFieldTypes(draggableId) });
+      } else if (destination.droppableId === 'AVAILABLE FIELDS') {
+        handleRemoveField({ name: draggableId, type: getFieldTypes(draggableId) });
+      }
+    }
   };
 
   return (

public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss

@@ -158,6 +158,7 @@ $vis-editor-sidebar-min-width: 350px;
 
 #vis__mainContent .vis__leftPanel {
   overflow-y: unset; // unset default setting
+  margin-right: 8px;
 }
 
 .panelItem_button {
@@ -168,6 +169,15 @@ $vis-editor-sidebar-min-width: 350px;
   align-items: center;
 }
 
+.panelItem_box {
+  color: #5A6875;
+  display: grid;
+  grid-gap: 4px;
+  padding: 8px 8px 8px 8px;
+  background-color: #D6D9DD;
+  border-radius: 4px;
+}
+
 .field_text {
   text-overflow: ellipsis;
   overflow: hidden;