Home table update (#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 (#3)

* Bump prismjs from 1.24.1 to 1.25.0 (#137)

Bumps [prismjs](https:/PrismJS/prism) from 1.24.1 to 1.25.0.
- [Release notes](https:/PrismJS/prism/releases)
- [Changelog](https:/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 (#136)

Bumps [immer](https:/immerjs/immer) from 9.0.5 to 9.0.6.
- [Release notes](https:/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 (#141)

* Move observability frontend to a sub directory (#142)

* Add minimal plugin for backend observability (#143)

* Add models for objects and requests (#144)

* Add CRUD actions and index operations for observability objects (#145)

* Update data modal and enable CI (#148)

* Panels' visualization design change (#149)

* modified common files

* modified UI components

* modified panel adaptor and router

* moved loading to post http call

* fixed prettier quotes

* Feature timestamp (#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 (#153)

* Feature toasts errors handling (#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 (#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 (#158)

Signed-off-by: Eric Wei <[email protected]>

* Remove app analytics (#154)

* removing app analytics from sidenav

* removed unused headers

* added trace analytics as default page

* Use JS API to redirect legacy notebooks URL (#162)

* Panels bug fix#1 (#159)

* fixed UI bugs #1

* folder name typo fix

* changes for adopting new sql artifact (#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 (#163)

* inherited datepicker format from settings (#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]>

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 = [

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}

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>
  );
 }
-
-