From de3acb06378334cc61714bf4d95fc7602ecf9714 Mon Sep 17 00:00:00 2001 From: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:14:26 -0700 Subject: [PATCH] [Feature] Traces/Services UI update (#2078) * traces and services UI update Signed-off-by: Adam Tackett * small ui adjustments to match mocks, update snapshots Signed-off-by: Adam Tackett * remove all custom styling Signed-off-by: Adam Tackett * remove comment Signed-off-by: Adam Tackett * allign add filter and mode picker using flush-left Signed-off-by: Adam Tackett * update snapshots Signed-off-by: Adam Tackett * update snapshots from osd Signed-off-by: Adam Tackett --------- Signed-off-by: Adam Tackett Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Co-authored-by: Adam Tackett --- .../__snapshots__/flyout.test.tsx.snap | 2 + .../__snapshots__/log_config.test.tsx.snap | 2 + .../service_config.test.tsx.snap | 8 + .../__snapshots__/trace_config.test.tsx.snap | 2 + .../live_tail_button.test.tsx.snap | 3 + .../__snapshots__/search.test.tsx.snap | 4 + .../custom_panel_view.test.tsx.snap | 12 + .../__snapshots__/empty_panel.test.tsx.snap | 2 + .../visualization_flyout.test.tsx.snap | 4 + .../visualization_flyout_so.test.tsx.snap | 4 + .../associated_objects_tab.test.tsx.snap | 9 + ...installed_integrations_table.test.tsx.snap | 2 + ...data_connections_description.test.tsx.snap | 1 + .../__snapshots__/no_access.test.tsx.snap | 1 + .../patterns_header.test.tsx.snap | 2 + .../patterns_table.test.tsx.snap | 3 + .../__snapshots__/config_panel.test.tsx.snap | 12 + .../saved_query_table.test.tsx.snap | 3 + .../added_integration.test.tsx.snap | 1 + .../added_integration_flyout.test.tsx.snap | 3 + .../added_integration_table.test.tsx.snap | 3 + ...ilable_integration_card_view.test.tsx.snap | 2 + ...lable_integration_table_view.test.tsx.snap | 4 + .../integration_header.test.tsx.snap | 1 + .../setup_integration.test.tsx.snap | 2 + .../metrics_export.test.tsx.snap | 1 + .../__snapshots__/top_menu.test.tsx.snap | 3 + .../__snapshots__/search_bar.test.tsx.snap | 453 +- .../filter_edit_popover.test.tsx.snap | 2 + .../__snapshots__/filters.test.tsx.snap | 112 +- .../components/common/filters/filters.tsx | 201 +- .../components/common/plots/service_map.tsx | 2 +- .../components/common/search_bar.tsx | 57 +- .../__snapshots__/dashboard.test.tsx.snap | 5 + .../dashboard_table.test.tsx.snap | 3 + .../__snapshots__/mode_picker.test.tsx.snap | 2 + .../top_error_rates_table.test.tsx.snap | 3 + .../top_latency_table.test.tsx.snap | 3 + .../__snapshots__/services.test.tsx.snap | 8649 +++++++++-------- .../services_table.test.tsx.snap | 12 + .../components/services/services.tsx | 2 - .../components/services/services_content.tsx | 123 +- .../span_detail_flyout.test.tsx.snap | 1 + .../span_detail_panel.test.tsx.snap | 2 + .../__snapshots__/traces.test.tsx.snap | 6675 ++++++------- .../__snapshots__/traces_table.test.tsx.snap | 7 + .../components/traces/trace_view.tsx | 15 +- .../components/traces/traces.tsx | 2 - .../components/traces/traces_content.tsx | 114 +- .../components/traces/traces_table.tsx | 162 +- 50 files changed, 8436 insertions(+), 8267 deletions(-) diff --git a/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap index 1b21c244de..8e70f522e1 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap @@ -874,6 +874,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = ` >
+ } value="test" > + } >
+ + + } + closePopover={[Function]} + data-test-subj="global-filter-button" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + + + +
+
+ +
@@ -510,7 +614,7 @@ exports[`Search bar components renders search bar 1`] = ` className="euiFlexItem euiFlexItem--flexGrowZero" style={ Object { - "maxWidth": "40vw", + "maxWidth": "30vw", } } > @@ -559,8 +663,8 @@ exports[`Search bar components renders search bar 1`] = ` }, ] } - compressed={false} - dateFormat="" + compressed={true} + dateFormat="MMM D, YYYY @ HH:mm:ss.SSS" end="now" isAutoRefreshOnly={false} isDisabled={false} @@ -586,7 +690,7 @@ exports[`Search bar components renders search bar 1`] = ` >
@@ -903,304 +1008,60 @@ exports[`Search bar components renders search bar 1`] = `
- - - - - + + + + + +
- -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > -
-
- - - - - -
-
- - -
- - -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > -
-
- - - -
-
- - -
- -
- - `; diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap index 1e988ea2fe..76e2ee091e 100644 --- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap +++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap @@ -637,6 +637,7 @@ exports[`Filter popover component renders filter popover 1`] = ` >
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > -
-
- - - - - -
-
- - -
- @@ -131,6 +26,7 @@ exports[`Filter component renders filters 1`] = ` anchorPosition="downLeft" button={ @@ -144,28 +40,28 @@ exports[`Filter component renders filters 1`] = ` isOpen={false} ownFocus={true} panelPaddingSize="m" - withTitle={true} >
- - -
-
- - - - -
- -
+
+ - -
-
- - - - + Data Prepper + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Data Prepper + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - + +
+ +
-
- - + + +
+ +
- } - iconType={false} - isCustom={true} - startDateControl={
} + -
- -
- - + + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + > +
+
+ + + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+ +
+ +
-
- -
- -
- - -
- - -
- - - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > -
-
- - - - - -
-
- - -
- - -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > -
-
- - - -
-
- - + + + + + + + + +
+ +
+ + +
+
- -
- - - - -
- - - -
- -
+ -
- - -
- - Services - - - (0) - -
- - -
- - -
-
- -
+ + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" > - - - - -
- - +
+
+ + +
+ +
+ + + +
+ + + +
+ +
+
- - - + + (0) + +
+ + +
+ + +
+ +
+ +
+ + + + + + + +
+ + +
+ + + +
+ +
+
-
- -
- - -
- - -
- - - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - - + + +
+ +
- -
+ -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + } + title={ +

+ No matches +

+ } + > +
+ +

+ No matches +

+ + + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - - -
- + + +
+ + +
+ +
- -
- - - -
- - - -
- - -
- - Service map - -
- - - -
- - -
- - - -
- +
- - - - - - + + + +
+ + -
- - -
- - -
- -
- -
- Focus on -
- -
- - -
- + + + + + Errors + + + + + + + + + + + +
+ + + +
+ + - -
- - - - +
+ Focus on +
+ +
+ + +
+ -
- - - +
+ +
+
+ +
-
- - -
- -
- - -
- -
- - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - +
+ + +
+ +
-
- -
+ -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + } + title={ +

+ No matches +

+ } + > +
+ +

+ No matches +

+ + + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - - + + +
+ + +
- +
- +
-
- - -
- - + +
+ `; @@ -2479,141 +2518,7 @@ exports[`Services component renders jaeger services page 1`] = ` setStartTime={[MockFunction]} startTime="now-5m" traceColumnAction={[Function]} -> - - - Jaeger - - } - className="eui-textTruncate" - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" - > -
-
- - - - - -
-
- - +> - - -
- -
+
+ - -
-
- - - - + Jaeger + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Jaeger + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - - -
-
- - -
- } - iconType={false} - isCustom={true} - startDateControl={
} - > -
- -
- - -
-
- -
- -
- - -
- - -
- - - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > -
-
- - - - - -
-
- - -
- - -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > -
-
- -
+ +
+
+ + +
+ + - - - - + Add filter - - - - - -
-
- - +
+ +
+ + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + > +
+
+ + + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+ +
+ + +
+ + +
+ + + +
+ +
+ + +
+
- -
- - - - -
- - - -
- -
+ -
- - -
- - Services - - - (0) - -
- - -
- - -
-
- -
+ + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" > - - - - -
- +
+
+ +
- +
- -
- - -
- - -
- - + +
- - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } + -
- +
-

- No matches -

- - - + +
+ + +
+ + Services + + + (0) + +
+ + +
+ + +
+ +
+ +
+ + + + + + + +
+ +
+ +
+ +
+ + +
+ + +
+ +
- -
+ -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + } + title={ +

+ No matches +

+ } + > +
+ +

+ No matches +

+ + + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - - -
- + + +
+ + +
+ +
- -
- - - -
- -
+
+
+ +
+ `; @@ -4160,140 +4234,6 @@ exports[`Services component renders services page 1`] = ` startTime="now-5m" traceColumnAction={[Function]} > - - - Data Prepper - - } - className="eui-textTruncate" - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" - > -
-
- - - - - -
-
- - - - -
- -
+
+ - -
-
- - - - + Data Prepper + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Data Prepper + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - + +
+ +
-
- - + + +
+ +
- } - iconType={false} - isCustom={true} - startDateControl={
} + -
- -
- - + + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + > +
+
+ + + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+ +
+ +
-
- -
- -
- - -
- - -
- - - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > -
-
- - + - - - -
-
- - -
- - -
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > -
-
- - - -
-
- - + + + +
+ +
+ + +
+
- -
- - - - -
- - - -
- -
+ -
- - -
- - Services - - - (0) - -
- - -
- - -
-
- -
+ + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" > - - - - -
- - +
+
+ + +
+ +
+ + + +
+ + + +
+ +
+
- - - + + (0) + +
+ + +
+ + +
+ +
+ +
+ + + + + + + +
+ + +
+ + + +
+ +
+
-
- -
- - -
- - -
- - - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - - + + +
+ +
- -
+ -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
- - - -
- - -
- - -
- - - -
- - - -
- - -
- - Service map - -
- - - -
- - -
- - - -
- - -
- - -
- - -
- -
- -
- Focus on -
- -
- - -
- + + + + + Duration + + + + + + + + + + + + + + + + +
+ + + +
+ + - -
- - - - +
+ Focus on +
+ +
+ + +
+ -
- - - +
+ +
+
+ +
-
- - -
- -
- - -
- -
- - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - +
+ + +
+ +
-
- -
+ -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + } + title={ +

+ No matches +

+ } + > +
+ +

+ No matches +

+ + + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - - + + +
+ + +
- +
- +
-
- - -
- - + +
+ `; diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap index a28ef243b1..91c056f4f3 100644 --- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap +++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap @@ -93,6 +93,7 @@ exports[`Services table component renders empty jaeger services table message 1` > - ); diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx index c46d73ade7..5ece45ed77 100644 --- a/public/components/trace_analytics/components/services/services_content.tsx +++ b/public/components/trace_analytics/components/services/services_content.tsx @@ -4,7 +4,7 @@ */ /* eslint-disable react-hooks/exhaustive-deps */ -import { EuiSpacer } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui'; import cloneDeep from 'lodash/cloneDeep'; import React, { useEffect, useRef, useState } from 'react'; import { ServiceTrends } from '../../../../../common/types/trace_analytics'; @@ -14,13 +14,14 @@ import { handleServiceTrendsRequest, } from '../../requests/services_request_handler'; import { getValidFilterFields } from '../common/filters/filter_helpers'; -import { FilterType } from '../common/filters/filters'; +import { FilterType, Filters } from '../common/filters/filters'; import { filtersToDsl, processTimeStamp } from '../common/helper_functions'; import { ServiceMap, ServiceObject } from '../common/plots/service_map'; import { SearchBar } from '../common/search_bar'; import { ServicesProps } from './services'; import { ServicesTable } from './services_table'; import { coreRefs } from '../../../../framework/core_refs'; +import { DataSourcePicker } from '../dashboard/mode_picker'; export function ServicesContent(props: ServicesProps) { const { @@ -174,54 +175,76 @@ export function ServicesContent(props: ServicesProps) { return ( <> - - - - - {mode === 'data_prepper' && dataPrepperIndicesExist ? ( - - ) : ( -
- )} + + + + + + + + + + + + + + + {mode === 'data_prepper' && dataPrepperIndicesExist ? ( + + ) : ( +
+ )} + + ); } diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap index 0e8dae7bae..26cec65970 100644 --- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap +++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap @@ -775,6 +775,7 @@ exports[` spec renders the empty component 1`] = ` > - - - Data Prepper - - } - className="eui-textTruncate" - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" - > -
-
- - - - - -
-
- - - - -
- -
+
+ - -
-
- - - - + Data Prepper + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Data Prepper + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - + +
+ +
+
+ + +
+ + +
+ + +
+ +
+ + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + > +
+
+ + + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+
-
- - + + +
+ +
- } - iconType={false} - isCustom={true} - startDateControl={
} + + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + > +
+
+ -
- -
- - + + +
- -
- -
- - -
- - -
+ +
+ +
+ + + - + + +
- - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > + + Trace Groups + + +
-
- - +
- - - -
-
- - -
- - + +
+
+ +
+
+ +
+ +
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} + className="euiSpacer euiSpacer--s" + /> + + + +
+
-
- - - -
+ + (0) + +
+ + +
+
- - -
- -
- - - - -
- - -
- -
-
- -
-
- -
-
+ + +
+ +
-
-
- -
-
- -
- - -
- - - -
- -
- -
- - + No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + + } + title={ +

+ No matches +

+ } >
- - Traces - - + No matches + + + - (0) - + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - -
- -
- - -
- - -
- - - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - - +
- -
- -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
- -
- - - -
- - -
- - -
- - + +
+ + +
+ +
+ `; @@ -1956,140 +1991,6 @@ exports[`Traces component renders jaeger traces page 1`] = ` startTime="now-5m" traceIdColumnAction={[Function]} > - - - Jaeger - - } - className="eui-textTruncate" - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" - > -
-
- - - - - -
-
- - - - -
- -
+
+ - -
-
- - - - + Jaeger + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Jaeger + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - + +
+ +
-
- - + + +
+ +
- } - iconType={false} - isCustom={true} - startDateControl={
} + -
- + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+ +
+ + +
+ + +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + > +
+
+ + -
- - + + +
- -
- -
- - -
- - -
+ +
+ +
+ + + - + + +
- - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > + + Service and Operations + + +
-
- - +
- - - -
+
+ +
+
+
- - +
+
- - +
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} + className="euiSpacer euiSpacer--s" + /> + + + +
+
-
- - - -
+ + (0) + +
+ + +
+
- - -
- -
- - - - -
- - -
- -
-
- -
-
- -
-
+ + +
+ +
-
-
- -
-
- -
- - -
- - - -
- -
- -
- - + No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + + } + title={ +

+ No matches +

+ } >
- - Traces - - + No matches + + + - (0) - + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - -
- -
- - -
- - -
- - - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - - +
- -
- -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
- -
- - - -
- - -
- - -
- - + +
+ + +
+ +
+ `; @@ -3679,152 +3749,18 @@ exports[`Traces component renders traces page 1`] = ` startTime="now-5m" traceIdColumnAction={[Function]} > - - - Data Prepper - - } - className="eui-textTruncate" - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" - > -
-
- - - - - -
-
- - - - - -
- -
+
+ - -
-
- - - - + Data Prepper + + } + className="eui-textTruncate" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" >
- - - - - + + + + + + + + + + Data Prepper + + + + + + +
- -
+ +
- - -
- - -
- - +
- -
+ - - } +
-
- +
- - - + /> } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="s" + value="" > -
+ } >
- - + + +
+
+ + +
+ + + + +
+ - - - - + +
+ +
+
+ + +
+ + +
+ + +
+ +
+ + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + > +
+
+ + + +
+
+ + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+
-
- - + + +
+ + +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + Add filter + + } + closePopover={[Function]} + data-test-subj="addfilter" + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + > +
- } - iconType={false} - isCustom={true} - startDateControl={
} + -
- -
- - + + +
- -
- -
- - -
- - -
+ +
+ +
+ + + - + + +
- - - - - - -
- -
- - -
- - - -
- -
- - - } - closePopover={[Function]} - data-test-subj="global-filter-button" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - withTitle={true} - > + + Trace Groups + + +
-
- - +
- - - -
+
+ +
+
+
- - +
+
- - +
- - - + Add filter - - } - closePopover={[Function]} - data-test-subj="addfilter" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} + className="euiSpacer euiSpacer--s" + /> + + + +
+
-
- - - -
+ + (0) + +
+ + +
+
- - -
- -
- - - - -
- - -
- -
-
- -
-
- -
-
+ + +
+ +
-
-
- -
-
- -
- - -
- - - -
- -
- -
- - + No data matches the selected filter. Clear the filter and/or increase the time range to see more results. + + } + title={ +

+ No matches +

+ } >
- - Traces - - + No matches + + + - (0) - + + +
+ + +
+ +
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results. +
+ +
+ + +
- - -
- -
- - -
- - -
- - - -
- - - No data matches the selected filter. Clear the filter and/or increase the time range to see more results. - - } - title={ -

- No matches -

- } - > -
- -

- No matches -

- - - +
- -
- -
- No data matches the selected filter. Clear the filter and/or increase the time range to see more results. -
- -
- - - -
- - -
- - -
- - + +
+ + +
+ +
+ `; diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap index 4f8935e887..2dfbd5bbf1 100644 --- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap +++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap @@ -165,6 +165,7 @@ exports[`Traces table component renders empty traces table message 1`] = ` > { return ( <> - - -

{traceId}

- - + {!newNavigation && ( + + +

{traceId}

+ + + )} ); }; diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx index 8e067895f1..d2c8129c79 100644 --- a/public/components/trace_analytics/components/traces/traces.tsx +++ b/public/components/trace_analytics/components/traces/traces.tsx @@ -8,7 +8,6 @@ import { Toast } from '@elastic/eui/src/components/toast/global_toast_list'; import React from 'react'; import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types'; import { TraceAnalyticsComponentDeps } from '../../home'; -import { DataSourcePicker } from '../dashboard/mode_picker'; import { TracesContent } from './traces_content'; export interface TracesProps extends TraceAnalyticsComponentDeps { @@ -22,7 +21,6 @@ export interface TracesProps extends TraceAnalyticsComponentDeps { export function Traces(props: TracesProps) { return ( <> - ); diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx index 35039cbb02..048a82db2b 100644 --- a/public/components/trace_analytics/components/traces/traces_content.tsx +++ b/public/components/trace_analytics/components/traces/traces_content.tsx @@ -4,7 +4,16 @@ */ /* eslint-disable react-hooks/exhaustive-deps */ -import { EuiAccordion, EuiPanel, EuiSpacer, PropertySort } from '@elastic/eui'; +import { + EuiAccordion, + EuiPanel, + EuiSpacer, + PropertySort, + EuiFlexGroup, + EuiFlexItem, + EuiPage, + EuiPageBody, +} from '@elastic/eui'; import React, { useEffect, useState } from 'react'; import { coreRefs } from '../../../../framework/core_refs'; import { handleTracesRequest } from '../../requests/traces_request_handler'; @@ -12,8 +21,10 @@ import { getValidFilterFields } from '../common/filters/filter_helpers'; import { filtersToDsl, processTimeStamp } from '../common/helper_functions'; import { SearchBar } from '../common/search_bar'; import { DashboardContent } from '../dashboard/dashboard_content'; -import { TracesProps } from './traces'; import { TracesTable } from './traces_table'; +import { TracesProps } from './traces'; +import { DataSourcePicker } from '../dashboard/mode_picker'; +import { Filters } from '../common/filters/filters'; export function TracesContent(props: TracesProps) { const { @@ -109,44 +120,67 @@ export function TracesContent(props: TracesProps) { return ( <> - - - - - - {trigger === 'open' && dashboardContent()} - - - - + + + + + + + + + + + + + + + + {trigger === 'open' && dashboardContent()} + + + + + + ); } diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx index e8fd55ca49..c84deabcf2 100644 --- a/public/components/trace_analytics/components/traces/traces_table.tsx +++ b/public/components/trace_analytics/components/traces/traces_table.tsx @@ -51,11 +51,9 @@ export function TracesTable(props: TracesTableProps) { ); }; - const columns = useMemo( - () => { - if (mode === 'data_prepper') { - return( - [ + const columns = useMemo(() => { + if (mode === 'data_prepper') { + return [ { field: 'trace_id', name: 'Trace ID', @@ -65,7 +63,7 @@ export function TracesTable(props: TracesTableProps) { render: (item) => ( - traceIdColumnAction(item)}> + traceIdColumnAction(item)}> {item.length < 24 ? ( item ) : ( @@ -99,11 +97,7 @@ export function TracesTable(props: TracesTableProps) { render: (item) => item ? ( - {item.length < 36 ? ( - item - ) : ( -
{truncate(item, { length: 36 })}
- )} + {item.length < 36 ? item :
{truncate(item, { length: 36 })}
} ) : ( '-' @@ -152,79 +146,76 @@ export function TracesTable(props: TracesTableProps) { sortable: true, render: (item) => (item === 0 || item ? item : '-'), }, - ] as Array>) + ] as Array>; } else { - return ( - [ - { - field: 'trace_id', - name: 'Trace ID', - align: 'left', - sortable: true, - truncateText: true, - render: (item) => ( - - - traceIdColumnAction(item)}> - {item.length < 24 ? ( - item - ) : ( -
{truncate(item, { length: 24 })}
- )} - - - - - {(copy) => ( - - Click to copy - - )} - - - - + return [ + { + field: 'trace_id', + name: 'Trace ID', + align: 'left', + sortable: true, + truncateText: true, + render: (item) => ( + + + traceIdColumnAction(item)}> + {item.length < 24 ? ( + item + ) : ( +
{truncate(item, { length: 24 })}
+ )} + + + + + {(copy) => ( + + Click to copy + + )} + + + + + ), + }, + { + field: 'latency', + name: 'Latency (ms)', + align: 'right', + sortable: true, + truncateText: true, + }, + { + field: 'error_count', + name: 'Errors', + align: 'right', + sortable: true, + render: (item) => + item == null ? ( + '-' + ) : item > 0 ? ( + + Yes + + ) : ( + 'No' ), - }, - { - field: 'latency', - name: 'Latency (ms)', - align: 'right', - sortable: true, - truncateText: true, - }, - { - field: 'error_count', - name: 'Errors', - align: 'right', - sortable: true, - render: (item) => - item == null ? ( - '-' - ) : item > 0 ? ( - - Yes - - ) : ( - 'No' - ), - }, - { - field: 'last_updated', - name: 'Last updated', - align: 'left', - sortable: true, - render: (item) => (item === 0 || item ? item : '-'), - }, - ] as Array>) + }, + { + field: 'last_updated', + name: 'Last updated', + align: 'left', + sortable: true, + render: (item) => (item === 0 || item ? item : '-'), + }, + ] as Array>; } - }, - [items] - ); + }, [items]); const titleBar = useMemo(() => renderTitleBar(items?.length), [items]); @@ -235,7 +226,7 @@ export function TracesTable(props: TracesTableProps) { }, }); - const onTableChange = async ({ currPage, sort }: { currPage: any; sort: any }) => { + const onTableChange = async ({ _currPage, sort }: { currPage: any; sort: any }) => { if (typeof sort?.field !== 'string') return; // maps table column key to DSL aggregation name @@ -270,8 +261,11 @@ export function TracesTable(props: TracesTableProps) { {titleBar} - {!((mode === 'data_prepper' && props.dataPrepperIndicesExist) || (mode === 'jaeger' && props.jaegerIndicesExist)) ? ( - + {!( + (mode === 'data_prepper' && props.dataPrepperIndicesExist) || + (mode === 'jaeger' && props.jaegerIndicesExist) + ) ? ( + ) : items?.length > 0 ? (