From 39bb832823be693dc2244c2242946c72371ffa1d Mon Sep 17 00:00:00 2001 From: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Date: Tue, 29 Oct 2024 10:45:12 -0700 Subject: [PATCH] [Bug fix] Traces/Services bugfixes and UI update (#2229) * Bugfixes and ui update Signed-off-by: Adam Tackett * address comments Signed-off-by: Adam Tackett --------- Signed-off-by: Adam Tackett Co-authored-by: Adam Tackett --- .../__snapshots__/search_bar.test.tsx.snap | 145 ++-- .../__snapshots__/filters.test.tsx.snap | 86 +-- .../components/common/filters/filters.tsx | 86 ++- .../components/common/search_bar.tsx | 10 +- .../__snapshots__/services.test.tsx.snap | 696 ++++++++---------- .../components/services/service_view.tsx | 8 +- .../__snapshots__/traces.test.tsx.snap | 696 ++++++++---------- public/components/trace_analytics/home.tsx | 15 +- 8 files changed, 784 insertions(+), 958 deletions(-) diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap index 05a380fccc..6096fdbbbc 100644 --- a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap +++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap @@ -422,7 +422,10 @@ exports[`Search bar components renders search bar 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ } @@ -435,7 +438,10 @@ exports[`Search bar components renders search bar 1`] = ` isLoading={false} prepend={ } @@ -444,20 +450,26 @@ exports[`Search bar components renders search bar 1`] = ` className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group" > + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -468,67 +480,104 @@ exports[`Search bar components renders search bar 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap index 34565e988d..1876b3e226 100644 --- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap +++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap @@ -6,89 +6,5 @@ exports[`Filter component renders filters 1`] = ` filters={Array []} page="dashboard" setFilters={[MockFunction]} -> - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - +/> `; diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx index cafcf36593..3acf5870b1 100644 --- a/public/components/trace_analytics/components/common/filters/filters.tsx +++ b/public/components/trace_analytics/components/common/filters/filters.tsx @@ -13,7 +13,7 @@ import { EuiIcon, EuiPopover, EuiPopoverTitle, - EuiSmallButtonIcon, + EuiSpacer, EuiTextColor, } from '@elastic/eui'; import React, { useMemo, useState } from 'react'; @@ -126,13 +126,14 @@ export function Filters(props: FiltersOwnProps) { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const button = ( { setIsPopoverOpen(true); }} > - + Add filter + Add filter ); @@ -224,28 +225,63 @@ export function Filters(props: FiltersOwnProps) { const filterComponents = useMemo(() => renderFilters(), [props.filters]); - return ( - - {filterComponents} - - - - - ); + return props.filters.length > 0 ? ( + <> + + + {filterComponents} + + + + + + ) : null; } -export const GlobalFilterButton = ({ filters, setFilters }) => { +export const GlobalFilterButton = ({ + filters, + setFilters, + attributesFilterFields, + mode, + page, +}: { + filters: FilterType[]; + setFilters: (filters: FilterType[]) => void; + attributesFilterFields: string[]; + mode: TraceAnalyticsMode; + page: 'dashboard' | 'traces' | 'services' | 'app'; +}) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const filterFieldOptions = useMemo( + () => + getFilterFields(mode, page, attributesFilterFields).map((field) => ({ + label: field, + })), + [mode, page, attributesFilterFields] + ); + const togglePopover = () => { setIsPopoverOpen(!isPopoverOpen); }; + const handleAddFilter = (newFilter: FilterType) => { + const updatedFilters = [...filters, newFilter]; + setFilters(updatedFilters); + togglePopover(); + }; + const globalPopoverPanels = [ { id: 0, title: 'Change all filters', items: [ + { + name: 'Add filter', + icon: , + onClick: () => setIsPopoverOpen(true), + panel: 1, + }, { name: 'Enable all', icon: , @@ -312,6 +348,21 @@ export const GlobalFilterButton = ({ filters, setFilters }) => { }, ], }, + { + id: 1, + title: 'Add filter', + width: 530, + content: ( +
+ setIsPopoverOpen(false)} + /> +
+ ), + }, ]; return ( @@ -319,14 +370,11 @@ export const GlobalFilterButton = ({ filters, setFilters }) => { isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} button={ - + + + } - anchorPosition="rightUp" + anchorPosition="downLeft" panelPaddingSize="none" data-test-subj="global-filter-button" > diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx index 6af85ed70a..610411a995 100644 --- a/public/components/trace_analytics/components/common/search_bar.tsx +++ b/public/components/trace_analytics/components/common/search_bar.tsx @@ -74,7 +74,15 @@ export const SearchBar = forwardRef((props: SearchBarOwnProps, ref) => { {!props.datepickerOnly && ( } + prepend={ + + } compressed fullWidth isClearable={false} diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap index 3d33b9a4b7..80e7039ebd 100644 --- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap +++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap @@ -686,7 +686,10 @@ exports[`Services component renders empty services page 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -774,67 +786,103 @@ exports[`Services component renders empty services page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -1393,91 +1441,7 @@ exports[`Services component renders empty services page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> @@ -2986,7 +2950,10 @@ exports[`Services component renders jaeger services page 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -3074,68 +3050,105 @@ exports[`Services component renders jaeger services page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -3696,91 +3709,7 @@ exports[`Services component renders jaeger services page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> @@ -4712,7 +4641,10 @@ exports[`Services component renders services page 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -4800,68 +4741,105 @@ exports[`Services component renders services page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -5422,91 +5400,7 @@ exports[`Services component renders services page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx index 70a851bb7e..2dcb3cd613 100644 --- a/public/components/trace_analytics/components/services/service_view.tsx +++ b/public/components/trace_analytics/components/services/service_view.tsx @@ -163,7 +163,7 @@ export function ServiceView(props: ServiceViewProps) { data-test-subj="ActionContextMenu" iconType="arrowDown" iconSide="right" - onClick={() => setActionsMenuPopover(true)} + onClick={() => setActionsMenuPopover(!actionsMenuPopover)} > Actions @@ -254,6 +254,11 @@ export function ServiceView(props: ServiceViewProps) { {serviceHeader} + + + + {renderDatePicker(startTime, setStartTime, endTime, setEndTime)} + - {renderDatePicker(startTime, setStartTime, endTime, setEndTime)} ) : coreRefs?.chrome?.navGroup.getNavGroupEnabled() ? ( + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -793,67 +805,103 @@ exports[`Traces component renders empty traces page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -1412,91 +1460,7 @@ exports[`Traces component renders empty traces page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> @@ -3192,7 +3156,10 @@ exports[`Traces component renders jaeger traces page 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -3280,68 +3256,105 @@ exports[`Traces component renders jaeger traces page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -3902,91 +3915,7 @@ exports[`Traces component renders jaeger traces page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> @@ -5515,7 +5444,10 @@ exports[`Traces component renders traces page 1`] = ` placeholder="Trace ID, trace group name, service name" prepend={ + size="s" + > + + } closePopover={[Function]} data-test-subj="global-filter-button" @@ -5603,68 +5544,105 @@ exports[`Traces component renders traces page 1`] = ` panelPaddingSize="none" >
- - - - - + + + + + + + + + + + + + + + + + +
@@ -6225,91 +6203,7 @@ exports[`Traces component renders traces page 1`] = ` ], } } - > - -
- -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > -
-
- - - -
-
- - -
- -
- - + /> diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx index bb07128ad4..a18e2baa54 100644 --- a/public/components/trace_analytics/home.tsx +++ b/public/components/trace_analytics/home.tsx @@ -37,6 +37,9 @@ import { handleJaegerIndicesExistRequest, } from './requests/request_handler'; import { TraceSideBar } from './trace_side_nav'; +import { observabilityTracesNewNavID } from '../../../common/constants/shared'; + +const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled(); export interface TraceAnalyticsCoreDeps { parentBreadcrumb: ChromeBreadcrumb; @@ -244,8 +247,10 @@ export const Home = (props: HomeProps) => { if (!sessionStorage.getItem('TraceAnalyticsMode')) { if (dataPrepperIndicesExist) { setMode('data_prepper'); + sessionStorage.setItem('TraceAnalyticsMode', 'data_prepper'); } else if (jaegerIndicesExist) { setMode('jaeger'); + sessionStorage.setItem('TraceAnalyticsMode', 'jaeger'); } } }, [jaegerIndicesExist, dataPrepperIndicesExist]); @@ -285,7 +290,15 @@ export const Home = (props: HomeProps) => { ]; const traceColumnAction = () => { - location.assign('#/traces'); + const tracesPath = '#/traces'; + if (newNavigation) { + coreRefs.application?.navigateToApp(observabilityTracesNewNavID, { + path: tracesPath + '?datasourceId=' + dataSourceMDSId[0].id, + }); + } else { + location.assign(tracesPath + '?datasourceId=' + dataSourceMDSId[0].id); + } + setTracesTableMode('traces'); sessionStorage.setItem(TRACE_TABLE_TYPE_KEY, 'traces'); };