diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx index f6051dd9af..38b4b630d9 100644 --- a/public/components/common/search/search.tsx +++ b/public/components/common/search/search.tsx @@ -222,12 +222,14 @@ export const Search = (props: any) => { const languagePopOverItems = [ handleQueryLanguageChange(QUERY_LANGUAGE.PPL)} > PPL , handleQueryLanguageChange(QUERY_LANGUAGE.DQL)} > @@ -323,7 +325,12 @@ export const Search = (props: any) => { }; const languagePopOverButton = ( - + {queryLang} ); @@ -357,7 +364,7 @@ export const Search = (props: any) => { panelPaddingSize="none" anchorPosition="downLeft" > - + diff --git a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap index 80af71ac94..cc795c16af 100644 --- a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap +++ b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap @@ -2,6 +2,7 @@ exports[`Saved query table component Renders saved query table 1`] = ` + +
+ +
+ + +
+
+ + + + +
+ + + + + +
+ +
+
+ + +
+ + +
+ + Type + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + > +
+
+ + + + + + + +
+
+ +
+ + +
+ + Actions + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + + + + + +
+
+ +
+ +
+ + +
+ -
- +
- -
- + +
-
- - - -
-
- - -
+
- -
-
- - - -
- - +
+ + +
+ + +
+ +
+ +
+ + + -
- +
+ + + + + - +
+ + +
+ +
+
+ + +
+ + + +
+ + + + + + + + + + + - -
+ - -
- - -
- -
- -
- - -
- - -
- -
- -
- - -
- -
+
- - Type - + + + + + + + + + + + -
-
- + - + Name + + + + + +
+ + + + + - - - - - - - - - - - - - - - - -
- - -
-
- -
+ + + + +
- - - - - - - - - - + + - - + - - - + Mock Flight count by destination save to panel + + + + + + - - + + + - - - - - + + - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - + + + + - - + + + + + + - - - - - -
- -
-
- - - - + - - - - - + + + + + + + - - +
+ - - - - Name - - - - - -
- + Type + +
- - - - Type - - - + Visualization - -
-
- - +
- -
-
- - -
-
-
-
- - - - - - - -
-
- 		-
- Name -
- - 		-
- Type -
-
- - Visualization - -
-
-
- - -
- -
-
- - -
-
-
- - - - - - - -
+ height={16} + role="img" + style={null} + viewBox="0 0 16 16" + width={16} + xmlns="http://www.w3.org/2000/svg" + > + + + +
- 		- -
- Name -
- 		- -
- Type -
-
+
+ - - Visualization - -
-
- -
- +
+ + + + + + + + + + +
+ +
+ + -
- +
- - - -
- -
+ + : + 10 + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" > - +
- - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
+ + + +
- -
- - + +
+ + +
-
- - - -
- -
- - -
- -
- -
+ + + +
+ +
+ + + + + + `; diff --git a/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx b/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx index e761210164..5954c72577 100644 --- a/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx +++ b/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx @@ -16,20 +16,26 @@ describe('Saved query table component', () => { it('Renders saved query table', async () => { const handleHistoryClick = jest.fn(); const handleSelectHistory = jest.fn(); - + const addSampledata = jest.fn(); + const showDeleteConfirmation = jest.fn(); + const selectedHistories = []; + const wrapper = mount( ); - + wrapper.update(); await waitFor(() => { expect(wrapper).toMatchSnapshot(); }); }); -}); \ No newline at end of file +}); diff --git a/public/components/event_analytics/home/home.scss b/public/components/event_analytics/home/home.scss index bc4d8f66d0..dd1ce07ae9 100644 --- a/public/components/event_analytics/home/home.scss +++ b/public/components/event_analytics/home/home.scss @@ -4,9 +4,6 @@ */ .event-home { - float: left; - width: 100%; - max-width: 1130px; #autocomplete-textarea { min-height: 80px; } diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx index da93bdbfa0..ed92dca32f 100644 --- a/public/components/event_analytics/home/home.tsx +++ b/public/components/event_analytics/home/home.tsx @@ -5,8 +5,6 @@ import { EuiSmallButton, - EuiContextMenuItem, - EuiContextMenuPanel, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, @@ -19,12 +17,11 @@ import { EuiPageContentHeaderSection, EuiPageHeader, EuiPageHeaderSection, - EuiPopover, EuiSpacer, EuiText, EuiTitle, } from '@elastic/eui'; -import React, { ReactElement, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { HttpStart } from '../../../../../../src/core/public'; @@ -72,7 +69,6 @@ const EventAnalyticsHome = (props: IHomeProps) => { const history = useHistory(); const [savedHistories, setSavedHistories] = useState([]); const [selectedHistories, setSelectedHistories] = useState([]); - const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false); const [isTableLoading, setIsTableLoading] = useState(false); const [modalLayout, setModalLayout] = useState(); const [isModalVisible, setIsModalVisible] = useState(false); @@ -190,17 +186,6 @@ const EventAnalyticsHome = (props: IHomeProps) => { } }; - const popoverButton = ( - setIsActionsPopoverOpen(!isActionsPopoverOpen)} - data-test-subj="eventHomeAction" - > - Actions - - ); - const deleteHistory = () => { const customPanelString = `${selectedHistories.length > 1 ? 'histories' : 'history'}`; setModalLayout( @@ -214,30 +199,6 @@ const EventAnalyticsHome = (props: IHomeProps) => { showModal(); }; - const popoverItems: ReactElement[] = [ - { - setIsActionsPopoverOpen(false); - deleteHistory(); - }} - data-test-subj="eventHomeAction__delete" - > - Delete - , - { - setIsActionsPopoverOpen(false); - addSampledata(); - }} - data-test-subj="eventHomeAction__addSamples" - > - Add samples - , - ]; - return ( <> @@ -249,7 +210,6 @@ const EventAnalyticsHome = (props: IHomeProps) => { - @@ -271,21 +231,10 @@ const EventAnalyticsHome = (props: IHomeProps) => { - - setIsActionsPopoverOpen(false)} - > - - - { - setIsActionsPopoverOpen(false); history.push(`/explorer`); }} data-test-subj="eventHomeAction__explorer" @@ -306,6 +255,9 @@ const EventAnalyticsHome = (props: IHomeProps) => { isTableLoading={isTableLoading} handleSelectHistory={setSelectedHistories} selectedHistories={selectedHistories} + addSampledata={addSampledata} + deleteHistoryList={deleteHistoryList} + showDeleteConfirmation={deleteHistory} /> ) : ( <> diff --git a/public/components/event_analytics/home/saved_objects_table.tsx b/public/components/event_analytics/home/saved_objects_table.tsx index dc4b01ff02..1e04cb3b2e 100644 --- a/public/components/event_analytics/home/saved_objects_table.tsx +++ b/public/components/event_analytics/home/saved_objects_table.tsx @@ -3,7 +3,22 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Criteria, EuiIcon, EuiInMemoryTable, EuiLink } from '@elastic/eui'; +import { + Criteria, + EuiIcon, + EuiInMemoryTable, + EuiLink, + EuiFieldSearch, + EuiSpacer, + EuiPopover, + EuiFilterSelectItem, + EuiFlexGroup, + EuiFlexItem, + EuiBadge, + EuiSmallButton, + EuiContextMenuPanel, + EuiContextMenuItem, +} from '@elastic/eui'; import React, { useRef, useState } from 'react'; import { FILTER_OPTIONS, LOG_EXPLORER_BASE_PATH } from '../../../../common/constants/explorer'; import { PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared'; @@ -15,15 +30,25 @@ interface SavedQueryTableProps { handleSelectHistory: (selectedHistories: any[]) => void; isTableLoading: boolean; selectedHistories: History[]; + addSampledata: () => void; + showDeleteConfirmation: () => void; } export function SavedQueryTable({ savedHistories, handleSelectHistory, isTableLoading, + selectedHistories, + addSampledata, + showDeleteConfirmation, }: SavedQueryTableProps) { const [pageIndex, setPageIndex] = useState(0); const [pageSize, setPageSize] = useState(10); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedFilters, setSelectedFilters] = useState([]); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false); + const pageIndexRef = useRef(); pageIndexRef.current = pageIndex; const pageSizeRef = useRef(); @@ -37,6 +62,57 @@ export function SavedQueryTable({ } }; + const togglePopover = () => { + setIsPopoverOpen(!isPopoverOpen); + }; + + const closePopover = () => { + setIsPopoverOpen(false); + }; + + const toggleFilter = (filter: string) => { + if (selectedFilters.includes(filter)) { + setSelectedFilters(selectedFilters.filter((f) => f !== filter)); + } else { + setSelectedFilters([...selectedFilters, filter]); + } + }; + + const popoverItems = [ + { + setIsActionsPopoverOpen(false); + showDeleteConfirmation(); + }} + data-test-subj="eventHomeAction__delete" + > + Delete + , + { + setIsActionsPopoverOpen(false); + addSampledata(); + }} + data-test-subj="eventHomeAction__addSamples" + > + Add samples + , + ]; + + const popoverButton = ( + setIsActionsPopoverOpen(!isActionsPopoverOpen)} + data-test-subj="eventHomeAction" + > + Actions + + ); + const columns = [ { field: 'type', @@ -89,76 +165,123 @@ export function SavedQueryTable({ }, ]; - const histories = savedHistories.map((h) => { - const isSavedVisualization = h.hasOwnProperty('savedVisualization'); - const savedObject = isSavedVisualization ? h.savedVisualization : h.savedQuery; - const curType = isSavedVisualization ? 'savedVisualization' : 'savedQuery'; - const displayType = !isSavedVisualization - ? 'Query' - : [PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE].includes(savedObject?.subType) - ? 'Metric' - : 'Visualization'; - const record = { - objectId: h.objectId, - objectType: curType, - 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 || [], - subType: savedObject.subType, - metricType: savedObject?.metricType || 'customMetric', - }; - return { - id: h.objectId, - data: record, - name: savedObject.name, - type: displayType, - }; - }); + const filteredHistories = savedHistories + .filter((h) => { + const isSavedVisualization = h.hasOwnProperty('savedVisualization'); + const savedObject = isSavedVisualization ? h.savedVisualization : h.savedQuery; + const displayType = !isSavedVisualization + ? 'Query' + : [PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE].includes(savedObject?.subType) + ? 'Metric' + : 'Visualization'; + const name = savedObject.name.toLowerCase(); + const query = savedObject.query.toLowerCase(); + const searchLower = searchQuery.toLowerCase(); + const typeMatches = selectedFilters.length === 0 || selectedFilters.includes(displayType); - const search = { - box: { - incremental: true, - }, - filters: [ - { - type: 'field_value_selection', - field: 'type', - name: 'Type', - multiSelect: 'or', - options: FILTER_OPTIONS.map((i) => ({ - value: i, - name: i, - view: i, - })), - }, - ], - }; + return (name.includes(searchLower) || query.includes(searchLower)) && typeMatches; + }) + .map((h) => { + const isSavedVisualization = h.hasOwnProperty('savedVisualization'); + const savedObject = isSavedVisualization ? h.savedVisualization : h.savedQuery; + const curType = isSavedVisualization ? 'savedVisualization' : 'savedQuery'; + const displayType = !isSavedVisualization + ? 'Query' + : [PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE].includes(savedObject?.subType) + ? 'Metric' + : 'Visualization'; + const record = { + objectId: h.objectId, + objectType: curType, + 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 || [], + subType: savedObject.subType, + metricType: savedObject?.metricType || 'customMetric', + }; + return { + id: h.objectId, + data: record, + name: savedObject.name, + type: displayType, + }; + }); const pagination = { pageIndex, pageSize, - totalItemCount: histories.length, + totalItemCount: filteredHistories.length, pageSizeOptions: [5, 10, 20, 50], }; return ( - { - handleSelectHistory(selectedHistories); - }, - }} - /> + <> + + + setSearchQuery(e.target.value)} + isClearable + fullWidth + /> + + + + Type{' '} + {selectedFilters.length > 0 && ( + {selectedFilters.length} + )} + + } + > + + {FILTER_OPTIONS.map((filter) => ( + toggleFilter(filter)} + checked={selectedFilters.includes(filter) ? 'on' : undefined} + > + {filter} + + ))} + + + + + setIsActionsPopoverOpen(false)} + > + + + + + + { + handleSelectHistory(selectedItems); + }, + }} + /> + ); }