diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap index f59885d0f..c3b15e282 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap @@ -563,7 +563,9 @@ Object { > + > + Select metric for service map display +
@@ -646,37 +648,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -1812,7 +1843,9 @@ Object { > + > + Select metric for service map display +
@@ -1895,37 +1928,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -3000,7 +3062,9 @@ Object { > + > + Select metric for service map display +
@@ -3083,37 +3147,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -4163,7 +4256,9 @@ Object { > + > + Select metric for service map display +
@@ -4246,37 +4341,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -5419,7 +5543,9 @@ Object { > + > + Select metric for service map display +
@@ -5502,37 +5628,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -6582,7 +6737,9 @@ Object { > + > + Select metric for service map display +
@@ -6665,37 +6822,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -7765,7 +7951,9 @@ Object { > + > + Select metric for service map display +
@@ -7848,49 +8036,78 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- -
+ +
+ + + +
+
+
@@ -8889,7 +9106,9 @@ Object { > + > + Select metric for service map display +
@@ -8972,37 +9191,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -10075,7 +10323,9 @@ Object { > + > + Select metric for service map display +
@@ -10158,37 +10408,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -11204,7 +11483,9 @@ Object { > + > + Select metric for service map display +
@@ -11287,37 +11568,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -12424,7 +12734,9 @@ Object { > + > + Select metric for service map display +
@@ -12507,37 +12819,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -13587,7 +13928,9 @@ Object { > + > + Select metric for service map display +
@@ -13670,37 +14013,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -14775,7 +15147,9 @@ Object { > + > + Select metric for service map display +
@@ -14858,37 +15232,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -15938,7 +16341,9 @@ Object { > + > + Select metric for service map display +
@@ -16021,37 +16426,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -17164,7 +17598,9 @@ Object { > + > + Select metric for service map display +
@@ -17247,37 +17683,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
@@ -18413,7 +18878,9 @@ Object { > + > + Select metric for service map display +
@@ -18496,37 +18963,66 @@ Object { class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium" />
-
-
- + Focus on + +
+ +
+ + + +
+
+
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap index e3a9c049f..f8ad6ce5f 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap @@ -705,6 +705,7 @@ exports[`Service Config component renders empty service config 1`] = ` buttonSize="s" color="text" idSelected="latency" + legend="Select metric for service map display" onChange={[Function]} options={ Array [ @@ -730,7 +731,9 @@ exports[`Service Config component renders empty service config 1`] = ` + > + Select metric for service map display +
- +
- + } + aria-controls="service-select-dropdown" + compressed={true} + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} + isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" + /> + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="service-select-dropdown" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} > -
- - -
- - - - + } + aria-controls="service-select-dropdown" compressed={true} - icon="search" + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" > -
+ } + compressed={true} + fullWidth={false} + icon="search" + isLoading={false} + prepend="Focus on" > - - + + +
+ + + + +
+ + + + + +
+ +
+ - - - -
- + + + + + + + +
+ +
- - + +
@@ -1934,6 +2051,7 @@ exports[`Service Config component renders with one service selected 1`] = ` buttonSize="s" color="text" idSelected="latency" + legend="Select metric for service map display" onChange={[Function]} options={ Array [ @@ -1959,7 +2077,9 @@ exports[`Service Config component renders with one service selected 1`] = ` + > + Select metric for service map display +
- +
- + } + aria-controls="service-select-dropdown" + compressed={true} + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} + isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" + /> + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="service-select-dropdown" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} > -
- - -
- - - - + } + aria-controls="service-select-dropdown" compressed={true} - icon="search" + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" > -
+ } + compressed={true} + fullWidth={false} + icon="search" + isLoading={false} + prepend="Focus on" > - - + + +
+ + + + +
+ + + + + +
+ +
+ - - - -
- + + + + + + + +
+ +
- - + +
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx index 92b60ae7c..7361fadff 100644 --- a/public/components/trace_analytics/components/common/helper_functions.tsx +++ b/public/components/trace_analytics/components/common/helper_functions.tsx @@ -184,8 +184,12 @@ export function getServiceMapGraph( const percent = (value - ticks[0]) / (ticks[ticks.length - 1] - ticks[0]); const color = getServiceMapScaleColor(percent, idSelected); styleOptions = { - borderWidth: 0, - color: relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`, + borderWidth: 3, + color: { + border: '#4A4A4A', + background: + relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`, + }, font: { color: relatedServices!.indexOf(service) >= 0 @@ -195,10 +199,10 @@ export function getServiceMapGraph( }; } else { styleOptions = { - borderWidth: 1.0, + borderWidth: 3, chosen: false, color: { - border: '#DADADC', + border: '#4A4A4A', background: '#FFFFFF', }, }; diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap index 9af2c5d1e..390230fd8 100644 --- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap +++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap @@ -13,6 +13,7 @@ exports[`Service map component renders service map 1`] = ` buttonSize="s" color="text" idSelected="latency" + legend="Select metric for service map display" onChange={[Function]} options={ Array [ @@ -34,25 +35,70 @@ exports[`Service map component renders service map 1`] = ` - + - + + } + aria-controls="service-select-dropdown" + compressed={true} + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} + isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" + /> + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="service-select-dropdown" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} + > + + + + @@ -67,7 +113,28 @@ exports[`Service map component renders service map 1`] = ` "position": "relative", } } - /> + > +
+ +
+
) => void; filterByCurrService?: boolean; includeMetricsCallback?: () => void; + mode?: string; + hideSearchBar?: boolean; }) { + const [graphKey, setGraphKey] = useState(0); // adding key to allow for re-renders const [invalid, setInvalid] = useState(false); const [network, setNetwork] = useState(null); const [ticks, setTicks] = useState([]); const [items, setItems] = useState({}); const [query, setQuery] = useState(''); + const [selectableOptions, setSelectableOptions] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [filterChange, setIsFilterChange] = useState(false); + const [focusedService, setFocusedService] = useState(null); + const [clearFilterRequest, setClearFilterRequest] = useState(false); + const toggleButtons = [ { id: 'latency', @@ -97,6 +113,7 @@ export function ServiceMap({ const [selectedNodeDetails, setSelectedNodeDetails] = useState(null); const [selectableValue, setSelectableValue] = useState>>([]); + const [isPopoverOpen, setPopoverOpen] = useState(false); const onChangeSelectable = (value: React.SetStateAction>>) => { // if the change is changing for the first time then callback servicemap with metrics @@ -124,14 +141,81 @@ export function ServiceMap({ }, ]; + const clearFilter = () => { + setFocusedService(null); + setClearFilterRequest(true); + }; + + useEffect(() => { + if (clearFilterRequest && focusedService === null) { + setClearFilterRequest(false); + + setQuery(''); + currService = ''; + + if (addFilter) { + addFilter({ + field: 'serviceName', + operator: 'is', + value: '', + inverted: false, + disabled: true, // Disable the filter to effectively clear it + }); + } + + // Reset the graph to show the full view + setItems( + getServiceMapGraph( + serviceMap, + idSelected, + ticks, + undefined, + serviceMap[currService!]?.relatedServices, + false // Do not filter by the current service to show the entire graph + ) + ); + + setInvalid(false); + } + }, [focusedService, clearFilterRequest]); + + useEffect(() => { + if (items?.graph?.nodes) { + const visibleNodes = items.graph.nodes.map((node) => node.label); + const options = Object.keys(serviceMap) + .filter((key) => visibleNodes.includes(serviceMap[key].serviceName)) + .map((key) => ({ + label: serviceMap[key].serviceName, + value: serviceMap[key].serviceName, + })); + setSelectableOptions(options); + } else { + setSelectableOptions([]); // Ensure options are empty if items.graph.nodes doesn't exist + } + }, [items.graph, serviceMap]); + const options = { layout: { - // hierarchical: true, + randomSeed: 10, + improvedLayout: false, + clusterThreshold: 150, hierarchical: { + enabled: false, + }, + }, + physics: { + enabled: true, + stabilization: { enabled: true, - direction: 'UD', // UD, DU, LR, RL - sortMethod: 'directed', // hubsize, directed - shakeTowards: 'leaves', // roots, leaves + iterations: 1000, // Increase iterations for better layout stability + updateInterval: 25, + }, + solver: 'forceAtlas2Based', + forceAtlas2Based: { + gravitationalConstant: -100, // Adjust this for node repulsion + centralGravity: 0.005, + springLength: 200, // Increase to make nodes further apart + springConstant: 0.08, }, }, edges: { @@ -140,7 +224,7 @@ export function ServiceMap({ enabled: true, }, }, - physics: false, + physics: true, }, nodes: { shape: 'dot', @@ -154,6 +238,8 @@ export function ServiceMap({ hover: true, tooltipDelay: 30, selectable: true, + zoomView: true, + zoomSpeed: 0.5, }, manipulation: { enabled: false, @@ -163,21 +249,61 @@ export function ServiceMap({ autoResize: true, }; - const addServiceFilter = (selectedServiceName: string) => { - if (!addFilter) return; - addFilter({ - field: 'serviceName', - operator: 'is', - value: selectedServiceName, - inverted: false, - disabled: false, + const setZoomLimits = (networkInstance) => { + let lastZoomLevel = 1.0; + const initialPosition = networkInstance.getViewPosition(); + + networkInstance.on('zoom', (params) => { + const zoomLevel = params.scale; + + if (zoomLevel < 0.05 && zoomLevel < lastZoomLevel) { + networkInstance.moveTo({ scale: 0.05, position: initialPosition }); + } else if (zoomLevel > 1.75) { + networkInstance.moveTo({ scale: 1.75 }); + } + + lastZoomLevel = zoomLevel; }); - if (!['appCreate', 'detailFlyout'].includes(page)) { - window.scrollTo({ left: 0, top: 0, behavior: 'smooth' }); + }; + + const addServiceFilter = (selectedServiceName) => { + if (selectedServiceName === focusedService) return; + + if (!addFilter) return; + + if (selectedServiceName) { + setFocusedService(selectedServiceName); + addFilter({ + field: 'serviceName', + operator: 'is', + value: selectedServiceName, + inverted: false, + disabled: false, + }); + } else { + // Clear the filter by adding a disabled filter or an empty filter object + setFocusedService(null); + addFilter({ + field: 'serviceName', + operator: 'is', + value: '', + inverted: false, + disabled: true, + }); } }; const events = { + stabilizationProgress: () => { + setIsLoading(true); + }, + // Disable physics after rendering the tree + stabilizationIterationsDone: () => { + if (network) { + network.setOptions({ physics: { enabled: false } }); + } + setIsLoading(false); + }, select: (event) => { const { nodes } = event; if (!addFilter || !nodes) return; @@ -185,29 +311,47 @@ export function ServiceMap({ if (selectedNode) { const details = { label: selectedNode.label, - average_latency: selectedNode.average_latency, - error_rate: selectedNode.error_rate, - throughput: selectedNode.throughput, + average_latency: selectedNode.average_latency || '-', + error_rate: selectedNode.error_rate || '-', + throughput: selectedNode.throughput || '-', }; - // On traces page with custom sources - // When user clicks on empty graph, load metrics - if (selectableValue.length === 0) { - onChangeSelectable('latency'); + if (serviceMap[selectedNode.label]) { + setSelectedNodeDetails(details); + } else { + console.warn('Selected node details are missing in the new data source.'); + setSelectedNodeDetails(null); } - // Update the state to display node details - setSelectedNodeDetails(details); } }, hoverNode: (_event) => {}, }; - const onFocus = (service: string, networkInstance?: any) => { + const onFocus = (service: string) => { if (service.length === 0) { - setInvalid(false); + clearFilter(); } else if (serviceMap[service]) { - if (!networkInstance) networkInstance = network; - networkInstance.focus(serviceMap[service].id, { animation: true }); + // Focus on the specified service and add a filter + setFocusedService(service); + if (addFilter) { + addFilter({ + field: 'serviceName', + operator: 'is', + value: service, + inverted: false, + disabled: false, + }); + } + + const filteredGraph = getServiceMapGraph( + serviceMap, + idSelected, + ticks, + service, + serviceMap[service]?.relatedServices, + true // Enable filtering by the current service to show only connected nodes + ); + setItems(filteredGraph); setInvalid(false); } else { setInvalid(true); @@ -215,22 +359,44 @@ export function ServiceMap({ }; useEffect(() => { - if (selectedNodeDetails) { - const selectedNode = items?.graph.nodes.find( + setSelectedNodeDetails(null); + setQuery(''); + setItems({}); + setFocusedService(null); + + if (filterChange) { + setIsFilterChange(false); + } + }, [mode, filterChange, currService]); + + useEffect(() => { + if (selectedNodeDetails && items?.graph?.nodes) { + const selectedNode = items.graph.nodes.find( (node) => node.label === selectedNodeDetails.label ); - const details = { - label: selectedNode.label, - average_latency: selectedNode.average_latency, - error_rate: selectedNode.error_rate, - throughput: selectedNode.throughput, - }; - setSelectedNodeDetails(details); + + if (selectedNode) { + const details = { + label: selectedNode.label, + average_latency: selectedNode.average_latency || '-', + error_rate: selectedNode.error_rate || '-', + throughput: selectedNode.throughput || '-', + }; + setSelectedNodeDetails(details); + } } }, [items]); useEffect(() => { - if (Object.keys(serviceMap).length === 0) return; + if (currService === focusedService) { + return; + } + + if (!serviceMap || Object.keys(serviceMap).length === 0) { + setItems({}); + return; + } + const values = Object.keys(serviceMap) .filter((service) => serviceMap[service][idSelected]) .map((service) => serviceMap[service][idSelected]!); @@ -267,33 +433,97 @@ export function ServiceMap({ onChange={(id) => setIdSelected(id as 'latency' | 'error_rate' | 'throughput')} buttonSize="s" color="text" + legend="Select metric for service map display" /> )} - - - setQuery(e.target.value)} - onSearch={(service) => onFocus(service)} - isInvalid={query.length > 0 && invalid} - /> - - {page === 'traces' && ( - - onChangeSelectable(value)} - /> + {!hideSearchBar && ( + + + setPopoverOpen(!isPopoverOpen)} + onChange={(e) => { + const newValue = e.target.value; + setQuery(newValue); + if (newValue === '') { + setGraphKey((prevKey) => prevKey + 1); + setQuery(''); + onFocus(''); + } + }} + isInvalid={query.length > 0 && invalid} + append={ + { + setGraphKey((prevKey) => prevKey + 1); + setQuery(''); + onFocus(''); + }} + /> + } + aria-controls="service-select-dropdown" + /> + } + isOpen={isPopoverOpen} + closePopover={() => setPopoverOpen(false)} + panelPaddingSize="none" + anchorPosition="downLeft" + repositionOnScroll + id="service-select-dropdown" + ownFocus={false} + > + setQuery(e.target.value), + isClearable: true, + autoFocus: true, + }} + options={selectableOptions.filter((option) => + option.label.toLowerCase().includes(query.toLowerCase()) + )} + singleSelection={true} + onChange={(newOptions) => { + const selectedOption = newOptions.find((option) => option.checked === 'on'); + if (selectedOption) { + if (selectedOption.label === focusedService) { + setPopoverOpen(false); + return; + } + setQuery(selectedOption.label); + onFocus(selectedOption.label); + setPopoverOpen(false); + } + }} + listProps={{ bordered: true, style: { width: '300px' } }} + > + {(list) =>
{list}
} + + - )} - + {page === 'traces' && ( + + onChangeSelectable(value)} + /> + + )} + + )} {Object.keys(serviceMap).length > 0 ? ( @@ -302,15 +532,35 @@ export function ServiceMap({
{items?.graph && ( { setNetwork(networkInstance); + setZoomLimits(networkInstance); if (currService) onFocus(currService, networkInstance); }} /> )} + {isLoading && ( +
+ +
+ )} {selectedNodeDetails && (
>; - addServiceFilter: (selectedServiceName: string) => void; + addServiceFilter: (selectedServiceName: string | null) => void; setCurrentSelectedService?: (value: React.SetStateAction) => void; } diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap index eee380aed..9bc8845a9 100644 --- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap +++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap @@ -232,7 +232,9 @@ exports[`Service view component renders service view 1`] = ` + > + Select metric for service map display +
- +
- + } + aria-controls="service-select-dropdown" + compressed={true} + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} + isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" + /> + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="service-select-dropdown" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} > -
- - -
- - - - + } + aria-controls="service-select-dropdown" compressed={true} - icon="search" + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" > -
+ } + compressed={true} + fullWidth={false} + icon="search" + isLoading={false} + prepend="Focus on" > - - -
- + + + + + + + +
+ +
- - + +
@@ -5680,6 +5798,7 @@ exports[`Services component renders services page 1`] = ` addFilter={[Function]} currService="" idSelected="latency" + mode="data_prepper" page="services" serviceMap={Object {}} setIdSelected={[Function]} @@ -5716,6 +5835,7 @@ exports[`Services component renders services page 1`] = ` buttonSize="s" color="text" idSelected="latency" + legend="Select metric for service map display" onChange={[Function]} options={ Array [ @@ -5741,7 +5861,9 @@ exports[`Services component renders services page 1`] = ` + > + Select metric for service map display +
- +
- + } + aria-controls="service-select-dropdown" + compressed={true} + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} + isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" + /> + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="service-select-dropdown" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} > -
- - -
- - - - + } + aria-controls="service-select-dropdown" compressed={true} - icon="search" + fullWidth={false} + incremental={false} + isClearable={true} + isInvalid={false} isLoading={false} + onChange={[Function]} + onClick={[Function]} + placeholder="Service name" + prepend="Focus on" + value="" > -
+ } + compressed={true} + fullWidth={false} + icon="search" + isLoading={false} + prepend="Focus on" > - - -
- + + + + + + + +
+ +
- - + +
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx index 8a2d9273b..215f51621 100644 --- a/public/components/trace_analytics/components/services/service_view.tsx +++ b/public/components/trace_analytics/components/services/service_view.tsx @@ -532,6 +532,8 @@ export function ServiceView(props: ServiceViewProps) { currService={props.serviceName} page="serviceView" filterByCurrService={true} + mode={mode} + hideSearchBar={page === 'serviceFlyout'} /> ) : ( diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx index d1bf6edf0..20bfddfb6 100644 --- a/public/components/trace_analytics/components/services/services_content.tsx +++ b/public/components/trace_analytics/components/services/services_content.tsx @@ -242,6 +242,7 @@ export function ServicesContent(props: ServicesProps) { currService={filteredService} page={page} setCurrentSelectedService={setCurrentSelectedService} + mode={mode} /> ) : (
diff --git a/test/constants.ts b/test/constants.ts index 7140688aa..fe399e08b 100644 --- a/test/constants.ts +++ b/test/constants.ts @@ -209,8 +209,11 @@ export const TEST_SERVICE_MAP_GRAPH = { label: 'order', size: 15, title: 'order\n\n Average duration: 90.1ms \n Error rate: 4.17% \n Request rate: 48', - borderWidth: 0, - color: 'rgba(158, 134, 192, 1)', + borderWidth: 3, + color: { + background: 'rgba(158, 134, 192, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -224,8 +227,11 @@ export const TEST_SERVICE_MAP_GRAPH = { size: 15, title: 'analytics-service\n\n Average duration: 12.99ms \n Error rate: 0% \n Request rate: 37', - borderWidth: 0, - color: 'rgba(210, 202, 224, 1)', + borderWidth: 3, + color: { + background: 'rgba(210, 202, 224, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -238,8 +244,11 @@ export const TEST_SERVICE_MAP_GRAPH = { label: 'database', size: 15, title: 'database\n\n Average duration: 49.54ms \n Error rate: 3.77% \n Request rate: 53', - borderWidth: 0, - color: 'rgba(187, 171, 212, 1)', + borderWidth: 3, + color: { + background: 'rgba(187, 171, 212, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -253,8 +262,11 @@ export const TEST_SERVICE_MAP_GRAPH = { size: 15, title: 'frontend-client\n\n Average duration: 207.71ms \n Error rate: 7.41% \n Request rate: 27', - borderWidth: 0, - color: 'rgba(78, 42, 122, 1)', + borderWidth: 3, + color: { + background: 'rgba(78, 42, 122, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -267,8 +279,11 @@ export const TEST_SERVICE_MAP_GRAPH = { label: 'inventory', size: 15, title: 'inventory\n\n Average duration: 183.52ms \n Error rate: 3.23% \n Request rate: 31', - borderWidth: 0, - color: 'rgba(95, 61, 138, 1)', + borderWidth: 3, + color: { + background: 'rgba(95, 61, 138, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -282,8 +297,11 @@ export const TEST_SERVICE_MAP_GRAPH = { size: 15, title: 'authentication\n\n Average duration: 139.09ms \n Error rate: 8.33% \n Request rate: 12', - borderWidth: 0, - color: 'rgba(125, 95, 166, 1)', + borderWidth: 3, + color: { + background: 'rgba(125, 95, 166, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -296,8 +314,11 @@ export const TEST_SERVICE_MAP_GRAPH = { label: 'payment', size: 15, title: 'payment\n\n Average duration: 134.36ms \n Error rate: 9.09% \n Request rate: 11', - borderWidth: 0, - color: 'rgba(129, 99, 169, 1)', + borderWidth: 3, + color: { + background: 'rgba(129, 99, 169, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -311,8 +332,11 @@ export const TEST_SERVICE_MAP_GRAPH = { size: 15, title: 'recommendation\n\n Average duration: 176.97ms \n Error rate: 6.25% \n Request rate: 16', - borderWidth: 0, - color: 'rgba(100, 66, 143, 1)', + borderWidth: 3, + color: { + background: 'rgba(100, 66, 143, 1)', + border: '#4A4A4A', + }, font: { color: 'rgba(72, 122, 180, 1)', }, @@ -390,6 +414,7 @@ export const TEST_SERVICE_MAP_GRAPH = { ], }, }; + export const TEST_SERVICE_MAP = { order: { serviceName: 'order',