Home table

dashboards-observability/public/components/explorer/home.tsx

@@ -26,22 +26,25 @@ import {
   EuiFlexItem
 } from '@elastic/eui';
 import { Search } from '../common/search/search';
-import { 
+import {
   INDEX,
   RAW_QUERY,
   TAB_ID_TXT_PFX,
   SELECTED_TIMESTAMP,
-  SELECTED_DATE_RANGE
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS
 } from '../../../common/constants/explorer';
 import { useEffect } from 'react';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
 import { addTab } from './slices/query_tab_slice';
-import { init as initFields } from './slices/field_slice';
+import { init as initFields, updateFields } from './slices/field_slice';
 import {
   init as initQuery,
   changeQuery
 } from './slices/query_slice';
 import { init as initQueryResult } from './slices/query_result_slice';
+import { Table } from './home_table/history_table';
+
 
 interface IHomeProps {
   pplService: any;
@@ -50,8 +53,8 @@ interface IHomeProps {
 }
 
 export const Home = (props: IHomeProps) => {
-  const { 
-    pplService, 
+  const {
+    pplService,
     dslService,
     savedObjects,
   } = props;
@@ -65,16 +68,15 @@ export const Home = (props: IHomeProps) => {
     const res = await savedObjects.fetchSavedObjects({
       objectType: ['savedQuery', 'savedVisualization'],
       sortOrder: 'desc',
-      fromIndex: 0,
-      maxItems: 10
+      fromIndex: 0
     });
     setSavedHistories(res['observabilityObjectList'] || []);
   };
 
   const addNewTab = async () => {
     //get a new tabId
     const tabId = uniqueId(TAB_ID_TXT_PFX);
-    
+
     // create a new tab
     await batch(() => {
       dispatch(initQuery({ tabId, }));
@@ -96,7 +98,7 @@ export const Home = (props: IHomeProps) => {
       query: {
         [RAW_QUERY]: searchQuery,
         [SELECTED_DATE_RANGE]: selectedDateRange
-      } 
+      }
     }));
   }
 
@@ -114,6 +116,52 @@ export const Home = (props: IHomeProps) => {
   const handleQueryChange = async (query: string, index: string) => setSearchQuery(query);
 
   const handleTimePickerChange = async (timeRange: Array<string>) => setSelectedDateRange(timeRange);
+
+  const addSavedQueryInput = async (
+    tabId: string,
+    searchQuery: string,
+    selectedDateRange: [],
+    selectedTimeStamp: string
+  ) => {
+    dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [RAW_QUERY]: searchQuery,
+          [SELECTED_DATE_RANGE]: selectedDateRange,
+          [SELECTED_TIMESTAMP]: selectedTimeStamp,
+        },
+      })
+    );
+  };
+
+  const addSavedFields = async (
+    tabId: string,
+    selectedFields: []
+  ) => {
+    dispatch(
+      updateFields({
+        tabId,
+        data: {
+          [SELECTED_FIELDS]: selectedFields,
+        },
+      })
+    );
+  };
+
+  const savedQuerySearch = async (searchQuery: string, selectedDateRange: [], selectedTimeStamp: string, selectedFields: []) => {
+    // create new tab
+    const newTabId = await addNewTab();
+
+    // update this new tab with data
+    await addSavedQueryInput(newTabId, searchQuery, selectedDateRange, selectedTimeStamp);
+    await addSavedFields(newTabId, selectedFields);
+
+    // redirect to explorer
+    history.push('/event_analytics/explorer');
+  };
+
+
   return (
     <div className="dscAppContainer">
       <EuiPage>
@@ -128,7 +176,7 @@ export const Home = (props: IHomeProps) => {
         </EuiPageBody>
       </EuiPage>
       <EuiPageContent>
-        <Search 
+        <Search
           query={ searchQuery }
           handleQueryChange={ handleQueryChange }
           handleQuerySearch={ handleQuerySearch }
@@ -156,13 +204,17 @@ export const Home = (props: IHomeProps) => {
               wrapText={ true }
             >
               <EuiTitle size="s">
-                <h1>{ "Histories" }</h1>
+                <h1>{ "Saved Queries and Visualizations" }</h1>
               </EuiTitle>
               <EuiSpacer size="s" />
+              <Table savedHistory={savedHistories}
+                     savedQuerySearch={( searchQuery: string, selectedDateRange: [], selectedTimeStamp: string,  selectedFields: []) => 
+            { savedQuerySearch(searchQuery, selectedDateRange, selectedTimeStamp, selectedFields) } }
+              />
             </EuiListGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPageContent>
     </div>
   );
-};
+};

dashboards-observability/public/components/explorer/home_table/history_table.tsx

@@ -0,0 +1,101 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+
+import {
+  EuiBasicTable,
+  EuiSpacer,
+  EuiLink,
+} from '@elastic/eui';
+
+
+interface TableData {
+  savedHistory: [];
+  savedQuerySearch: (searchQuery: string, selectedDateRange: [], selectedTimeStamp, selectedFields: []) => void;
+}
+
+export function Table(options: TableData) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const pageIndexRef = useRef();
+  pageIndexRef.current = pageIndex;
+  const pageSizeRef = useRef();
+  pageSizeRef.current = pageSize;
+
+
+  const onTableChange = ({ page = {} }) => {
+    const { index: pageIndex, size: pageSize } = page;
+
+    setPageIndex(pageIndex);
+    setPageSize(pageSize);
+  };
+
+  const columns = [
+    {
+      field: 'data',
+      name: 'Name',
+      render: (item)=>{return <EuiLink onClick={() =>
+      {options.savedQuerySearch(item.query, [item.date_start, item.date_end], item.timestamp, item.fields)}}>
+        {item.name}
+      </EuiLink>},
+    },
+    {
+      field: 'description',
+      name: 'Description',
+    },
+  ];
+
+
+
+  const queries = options.savedHistory.map((h) => {
+    const savedObject = h.hasOwnProperty('savedVisualization')
+      ? h.savedVisualization
+      : h.savedQuery;
+    return {
+      data: {
+        name: savedObject.name,
+        query: savedObject.query,
+        date_start: savedObject.selected_date_range.start,
+        date_end : savedObject.selected_date_range.end,
+        timestamp: savedObject.selected_timestamp?.name || '',
+        fields: savedObject.selected_fields?.tokens || []
+      },
+      name: savedObject.name || '',
+      description: savedObject.description || '',
+
+    };
+  });
+
+
+  const totalItemCount = queries.length;
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount,
+    pageSizeOptions: [5, 10, 20, 50],
+  };
+
+  return (
+    <div>
+      <EuiSpacer size="xl" />
+      <EuiBasicTable
+        items={queries.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)}
+        columns={columns}
+        pagination={pagination}
+        onChange={onTableChange}
+      />
+    </div>
+  );
+}
+
+