diff --git a/dashboards-observability/public/components/explorer/home.tsx b/dashboards-observability/public/components/explorer/home.tsx index 65bfd859e0..2d6fcaf0d5 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 0000000000..67ccae88f4 --- /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 ( +
+ + +
+ ); +} + +