Home table update (opensearch-project#174)

* 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 (opensearch-project#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] <[email protected]> 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] <[email protected]> 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 <[email protected]> * cleanup Signed-off-by: Eric Wei <[email protected]> * removed loggings and change to console error Signed-off-by: Eric Wei <[email protected]> * remove unused sidebar component Signed-off-by: Eric Wei <[email protected]> * 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 <[email protected]> * cleanup Signed-off-by: Eric Wei <[email protected]> * removed loggings and change to console error Signed-off-by: Eric Wei <[email protected]> * remove unused sidebar component Signed-off-by: Eric Wei <[email protected]> * added toasts Signed-off-by: Eric Wei <[email protected]> * resolved build failure Signed-off-by: Eric Wei <[email protected]> * couple of error handling changes Signed-off-by: Eric Wei <[email protected]> * added types Signed-off-by: Eric Wei <[email protected]> * Autocomplete only displays current command (opensearch-project#157) * Only show current command in suggestion Signed-off by: Eugene Lee <[email protected]> * Remove console logs Signed-off by: Eugene Lee <[email protected]> * Only display suggestion Signed-off by: Eugene Lee <[email protected]> * Removed commas Signed-off by: Eugene Lee <[email protected]> * Remove import Signed-off by: Eugene Lee <[email protected]> * changed to support query without 'search' prefix (opensearch-project#158) Signed-off-by: Eric Wei <[email protected]> * 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 <[email protected]> * minor changes Signed-off-by: Eric Wei <[email protected]> * 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 <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Co-authored-by: Eric Wei <[email protected]> Co-authored-by: eugenesk24 <[email protected]> * Update history_table.tsx * Update home.tsx * Delete public/components/explorer/home_table directory * Update explorer.ts * Update history_table.tsx * Update history_table.tsx Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Joshua <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Co-authored-by: Eric Wei <[email protected]> Co-authored-by: eugenesk24 <[email protected]>
derek-ho · Nov 3, 2021 · 3d14d34 · 3d14d34
1 parent b7c7848
commit 3d14d34
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 29 deletions.
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -25,6 +25,7 @@ export const TAB_EVENT_TITLE = 'Events';
 export const TAB_EVENT_ID_TXT_PFX = 'main-content-events-';
 export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
 export const HAS_SAVED_TIMESTAMP = 'hasSavedTimestamp';
+export const FILTER_OPTIONS = ['Visualization', 'Query'];
 
 export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const TIME_INTERVAL_OPTIONS = [

diff --git a/dashboards-observability/public/components/explorer/home.tsx b/dashboards-observability/public/components/explorer/home.tsx
@@ -204,7 +204,7 @@ export const Home = (props: IHomeProps) => {
               wrapText={ true }
             >
               <EuiTitle size="s">
-                <h1>{ "Saved Queries and Visualizations" }</h1>
+                <h1>{ "Queries and Visualizations" }</h1>
               </EuiTitle>
               <EuiSpacer size="s" />
               <Table savedHistory={savedHistories}

diff --git a/dashboards-observability/public/components/explorer/home_table/history_table.tsx b/dashboards-observability/public/components/explorer/home_table/history_table.tsx
@@ -9,18 +9,19 @@
  * GitHub history for details.
  */
 
-import React, { useState, useRef, useEffect } from 'react';
-
-import {
-  EuiBasicTable,
-  EuiSpacer,
-  EuiLink,
-} from '@elastic/eui';
+import React, { useState, useRef } from 'react';
 
+import { EuiSpacer, EuiLink, EuiInMemoryTable, EuiIcon, EuiLoadingChart } from '@elastic/eui';
+import { FILTER_OPTIONS } from '../../../../common/constants/explorer';
 
 interface TableData {
   savedHistory: [];
-  savedQuerySearch: (searchQuery: string, selectedDateRange: [], selectedTimeStamp, selectedFields: []) => void;
+  savedQuerySearch: (
+    searchQuery: string,
+    selectedDateRange: [],
+    selectedTimeStamp,
+    selectedFields: []
+  ) => void;
 }
 
 export function Table(options: TableData) {
@@ -31,7 +32,6 @@ export function Table(options: TableData) {
   const pageSizeRef = useRef();
   pageSizeRef.current = pageSize;
 
-
   const onTableChange = ({ page = {} }) => {
     const { index: pageIndex, size: pageSize } = page;
 
@@ -40,44 +40,100 @@ export function Table(options: TableData) {
   };
 
   const columns = [
+    {
+      field: 'type',
+      name: '',
+      width: '3%',
+      render: (item) => {
+        if (item == 'Visualization') {
+          return (
+            <div>
+              <EuiLoadingChart size="m" />
+            </div>
+          );
+        } else {
+          return (
+            <div>
+              <EuiIcon type="discoverApp" size="m" />
+            </div>
+          );
+        }
+      },
+    },
     {
       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>},
+      align: 'left',
+      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',
+      field: 'type',
+      name: 'Type',
+      align: 'right',
     },
   ];
 
-
-
+  let queryType = '';
   const queries = options.savedHistory.map((h) => {
     const savedObject = h.hasOwnProperty('savedVisualization')
       ? h.savedVisualization
       : h.savedQuery;
+    const isSavedVisualization = h.hasOwnProperty('savedVisualization');
+    if (isSavedVisualization) {
+      queryType = 'Visualization';
+    } else {
+      queryType = 'Query';
+    }
     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 || []
+        date_end: savedObject.selected_date_range.end,
+        timestamp: savedObject.selected_timestamp?.name,
+        fields: savedObject.selected_fields?.tokens || [],
       },
-      name: savedObject.name || '',
-      description: savedObject.description || '',
-
+      name: savedObject.name,
+      type: queryType,
     };
   });
 
-
   const totalItemCount = queries.length;
 
+  const search = {
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'type',
+        name: 'Type',
+        multiSelect: false,
+        options: FILTER_OPTIONS.map((i) => ({
+          value: i,
+          name: i,
+          view: i,
+        })),
+      },
+    ],
+  };
+
   const pagination = {
     pageIndex,
     pageSize,
@@ -88,14 +144,13 @@ export function Table(options: TableData) {
   return (
     <div>
       <EuiSpacer size="xl" />
-      <EuiBasicTable
-        items={queries.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)}
+      <EuiInMemoryTable
+        items={queries}
         columns={columns}
         pagination={pagination}
         onChange={onTableChange}
+        search={search}
       />
     </div>
   );
 }
-
-