Home table (opensearch-project#169)

* Create history_table.tsx * Update history_table.tsx * Update home.tsx * Update history_table.tsx * Update history_table.tsx * Update home.tsx * Update home.tsx * Delete home.tsx * merge (#3) * Bump prismjs from 1.24.1 to 1.25.0 (opensearch-project#137) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.24.1 to 1.25.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.24.1...v1.25.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump immer from 9.0.5 to 9.0.6 (opensearch-project#136) Bumps [immer](https://github.com/immerjs/immer) from 9.0.5 to 9.0.6. - [Release notes](https://github.com/immerjs/immer/releases) - [Commits](immerjs/immer@v9.0.5...v9.0.6) --- updated-dependencies: - dependency-name: immer dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Redirect legacy notebooks URL to current observability one (opensearch-project#141) * Move observability frontend to a sub directory (opensearch-project#142) * Add minimal plugin for backend observability (opensearch-project#143) * Add models for objects and requests (opensearch-project#144) * Add CRUD actions and index operations for observability objects (opensearch-project#145) * Update data modal and enable CI (opensearch-project#148) * Panels' visualization design change (opensearch-project#149) * modified common files * modified UI components * modified panel adaptor and router * moved loading to post http call * fixed prettier quotes * Feature timestamp (opensearch-project#152) * timestamp related changes Signed-off-by: Eric Wei <menwe@amazon.com> * cleanup Signed-off-by: Eric Wei <menwe@amazon.com> * removed loggings and change to console error Signed-off-by: Eric Wei <menwe@amazon.com> * remove unused sidebar component Signed-off-by: Eric Wei <menwe@amazon.com> * adding cancel button for edit & panel actions (opensearch-project#153) * Feature toasts errors handling (opensearch-project#155) * timestamp related changes Signed-off-by: Eric Wei <menwe@amazon.com> * cleanup Signed-off-by: Eric Wei <menwe@amazon.com> * removed loggings and change to console error Signed-off-by: Eric Wei <menwe@amazon.com> * remove unused sidebar component Signed-off-by: Eric Wei <menwe@amazon.com> * added toasts Signed-off-by: Eric Wei <menwe@amazon.com> * resolved build failure Signed-off-by: Eric Wei <menwe@amazon.com> * couple of error handling changes Signed-off-by: Eric Wei <menwe@amazon.com> * added types Signed-off-by: Eric Wei <menwe@amazon.com> * Autocomplete only displays current command (opensearch-project#157) * Only show current command in suggestion Signed-off by: Eugene Lee <eugenesk@amazon.com> * Remove console logs Signed-off by: Eugene Lee <eugenesk@amazon.com> * Only display suggestion Signed-off by: Eugene Lee <eugenesk@amazon.com> * Removed commas Signed-off by: Eugene Lee <eugenesk@amazon.com> * Remove import Signed-off by: Eugene Lee <eugenesk@amazon.com> * changed to support query without 'search' prefix (opensearch-project#158) Signed-off-by: Eric Wei <menwe@amazon.com> * Remove app analytics (opensearch-project#154) * removing app analytics from sidenav * removed unused headers * added trace analytics as default page * Use JS API to redirect legacy notebooks URL (opensearch-project#162) * Panels bug fix#1 (opensearch-project#159) * fixed UI bugs #1 * folder name typo fix * changes for adopting new sql artifact (opensearch-project#165) * changes for adopting new sql artifact Signed-off-by: Eric Wei <menwe@amazon.com> * minor changes Signed-off-by: Eric Wei <menwe@amazon.com> * Improve reindex handling for .opensearch-notebooks (opensearch-project#163) * inherited datepicker format from settings (opensearch-project#164) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Joshua <joshuali925@gmail.com> Co-authored-by: Shenoy Pratik <pshenoy36@gmail.com> Co-authored-by: Eric Wei <80358241+mengweieric@users.noreply.github.com> Co-authored-by: eugenesk24 <92330893+eugenesk24@users.noreply.github.com> * Create history_table.tsx * Update home.tsx * Update home.tsx * Delete history_table.tsx * Update history_table.tsx * Update history_table.tsx * Update home.tsx * Update history_table.tsx * Update history_table.tsx Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Joshua <joshuali925@gmail.com> Co-authored-by: Shenoy Pratik <pshenoy36@gmail.com> Co-authored-by: Eric Wei <80358241+mengweieric@users.noreply.github.com> Co-authored-by: eugenesk24 <92330893+eugenesk24@users.noreply.github.com>
kavithacm · Nov 2, 2021 · cd516e5 · cd516e5
1 parent 0bdaa5a
commit cd516e5
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 12 deletions.
diff --git a/dashboards-observability/public/components/explorer/home.tsx b/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>
   );
-};
+};
diff --git a/dashboards-observability/public/components/explorer/home_table/history_table.tsx b/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>
+  );
+}
+
+