From cd516e5108156362a382ddca575fe228d7cf0223 Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Mon, 1 Nov 2021 18:12:35 -0700 Subject: [PATCH] Home table (#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 (#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](https://github.com/PrismJS/prism/compare/v1.24.1...v1.25.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: indirect ... Signed-off-by: dependabot[bot] 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://github.com/immerjs/immer) from 9.0.5 to 9.0.6. - [Release notes](https://github.com/immerjs/immer/releases) - [Commits](https://github.com/immerjs/immer/compare/v9.0.5...v9.0.6) --- updated-dependencies: - dependency-name: immer dependency-type: indirect ... Signed-off-by: dependabot[bot] 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 * cleanup Signed-off-by: Eric Wei * removed loggings and change to console error Signed-off-by: Eric Wei * remove unused sidebar component Signed-off-by: Eric Wei * adding cancel button for edit & panel actions (#153) * Feature toasts errors handling (#155) * timestamp related changes Signed-off-by: Eric Wei * cleanup Signed-off-by: Eric Wei * removed loggings and change to console error Signed-off-by: Eric Wei * remove unused sidebar component Signed-off-by: Eric Wei * added toasts Signed-off-by: Eric Wei * resolved build failure Signed-off-by: Eric Wei * couple of error handling changes Signed-off-by: Eric Wei * added types Signed-off-by: Eric Wei * Autocomplete only displays current command (#157) * Only show current command in suggestion Signed-off by: Eugene Lee * Remove console logs Signed-off by: Eugene Lee * Only display suggestion Signed-off by: Eugene Lee * Removed commas Signed-off by: Eugene Lee * Remove import Signed-off by: Eugene Lee * changed to support query without 'search' prefix (#158) Signed-off-by: Eric Wei * 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 * minor changes Signed-off-by: Eric Wei * 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 Co-authored-by: Shenoy Pratik 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 Co-authored-by: Shenoy Pratik Co-authored-by: Eric Wei <80358241+mengweieric@users.noreply.github.com> Co-authored-by: eugenesk24 <92330893+eugenesk24@users.noreply.github.com> --- .../public/components/explorer/home.tsx | 76 ++++++++++--- .../explorer/home_table/history_table.tsx | 101 ++++++++++++++++++ 2 files changed, 165 insertions(+), 12 deletions(-) create mode 100644 dashboards-observability/public/components/explorer/home_table/history_table.tsx diff --git a/dashboards-observability/public/components/explorer/home.tsx b/dashboards-observability/public/components/explorer/home.tsx index 65bfd859e..2d6fcaf0d 100644 --- 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,8 +68,7 @@ export const Home = (props: IHomeProps) => { const res = await savedObjects.fetchSavedObjects({ objectType: ['savedQuery', 'savedVisualization'], sortOrder: 'desc', - fromIndex: 0, - maxItems: 10 + fromIndex: 0 }); setSavedHistories(res['observabilityObjectList'] || []); }; @@ -74,7 +76,7 @@ export const Home = (props: IHomeProps) => { 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) => 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 (
@@ -128,7 +176,7 @@ export const Home = (props: IHomeProps) => { - { wrapText={ true } > -

{ "Histories" }

+

{ "Saved Queries and Visualizations" }

 + + { savedQuerySearch(searchQuery, selectedDateRange, selectedTimeStamp, selectedFields) } } + /> ); -}; \ No newline at end of file +}; diff --git a/dashboards-observability/public/components/explorer/home_table/history_table.tsx b/dashboards-observability/public/components/explorer/home_table/history_table.tsx new file mode 100644 index 000000000..67ccae88f --- /dev/null +++ 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 + {options.savedQuerySearch(item.query, [item.date_start, item.date_end], item.timestamp, item.fields)}}> + {item.name} + }, + }, + { + 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 ( +
+ + +
+ ); +} + +