diff --git a/src/components/search-panel/SearchPanel.tsx b/src/components/search-panel/SearchPanel.tsx index 4d0c54251..8961336ef 100644 --- a/src/components/search-panel/SearchPanel.tsx +++ b/src/components/search-panel/SearchPanel.tsx @@ -50,7 +50,7 @@ const SearchPanel = () => { {searchStore.currentSearch && ( void; onResultGroupClick: (timestamp: number, resultType: ActionType) => void; @@ -35,7 +37,7 @@ interface SearchPanelResultsProps { showToggler: boolean; next: () => void; prev: () => void; - resultGroups: [string, SearchResult[]][]; + flattenedResult: FlattenedResult[]; timestamp: number; disabledRemove: boolean; showLoadMoreButton: boolean; @@ -44,7 +46,7 @@ interface SearchPanelResultsProps { const SearchPanelResults = (props: SearchPanelResultsProps) => { const { - resultGroups, + flattenedResult, timestamp, onResultItemClick, onResultGroupClick, @@ -59,20 +61,26 @@ const SearchPanelResults = (props: SearchPanelResultsProps) => { } = props; function computeKey(index: number) { - const [, results] = resultGroups[index]; + const results = flattenedResult[index]; + if (isSeparator(results)) return results[0]; const item = results[0]; return isEventNode(item) ? item.eventId : item.messageId; } - const renderResult = (index: number, [_, results]: [string, SearchResult[]]) => { + const isSeparator = (object: any): object is Separator => { + return !Number.isNaN(+object[0]); + }; + + const renderResult = (index: number, results: FlattenedResult) => { + if (isSeparator(results)) { + return ( + + + + ); + } return ( - - {index > 0 && ( - - )} + {
{ + if (index > 0) + result.push([ + getTimestampAsNumber(this.sortedResultGroups[index - 1][1].slice(-1)[0]), + getTimestampAsNumber(value[0]), + ]); + result.push(value); + }); + return result; + } + @action getEventFilters = async () => { this.isEventsFilterLoading = true; diff --git a/src/styles/action.scss b/src/styles/action.scss index 02ea839a4..ca62bea15 100644 --- a/src/styles/action.scss +++ b/src/styles/action.scss @@ -431,6 +431,7 @@ &__load-button { @include clickable; + height: 40px; display: block; border-radius: 4px;