+ {/* invisible button workaround to prevent auto focus on context menu panel switch */}
+
+
+
+
+ {
+ setSelectedFieldOptions(e);
+ setSelectedOperatorOptions([]);
+ setFilterValue('');
+ }}
+ singleSelection={{ asPlainText: true }}
+ />
+
+
+
+
+ {
+ setSelectedOperatorOptions(e);
+ setFilterValue('');
+ }}
+ singleSelection={{ asPlainText: true }}
+ />
+
+
+
+ {selectedOperatorOptions.length > 0 &&
+ getValueComponent(
+ selectedFieldOptions[0].label,
+ selectedOperatorOptions[0].label,
+ filterValue,
+ setFilterValue
+ )}
+
+
+
+ Cancel
+
+
+
+ {
+ props.closePopover();
+ props.setFilter(
+ {
+ field: selectedFieldOptions[0].label,
+ operator: selectedOperatorOptions[0].label,
+ value: selectedOperatorOptions[0].label.includes('exist')
+ ? 'exists'
+ : filterValue,
+ inverted: selectedOperatorOptions[0].label.includes('not'),
+ disabled: props.filter ? props.filter.disabled : false,
+ },
+ props.index
+ );
+ }}
+ >
+ Save
+
+
+
+
+ );
+}
diff --git a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
new file mode 100644
index 000000000..e9397315d
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
@@ -0,0 +1,241 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import {
+ EuiComboBox,
+ EuiFieldText,
+ EuiFormControlLayoutDelimited,
+ EuiFormRow,
+ EuiSpacer,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React from 'react';
+
+const getFields = (page: 'dashboard' | 'traces' | 'services') =>
+ ({
+ dashboard: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+ traces: ['traceId', 'traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+ services: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+ }[page]);
+// filters will take effect and can be manually added
+export const getFilterFields = (page: 'dashboard' | 'traces' | 'services') => getFields(page);
+// filters will take effect
+export const getValidFilterFields = (page: 'dashboard' | 'traces' | 'services') => {
+ const fields = getFields(page);
+ if (page !== 'services') return [...fields, 'Latency percentile within trace group'];
+ return fields;
+};
+
+const getType = (field: string): string => {
+ const typeMapping = {
+ attributes: {
+ host: {
+ port: 'long',
+ },
+ http: {
+ response_content_length: 'long',
+ status_code: 'long',
+ },
+ net: {
+ port: 'long',
+ },
+ },
+ attributes_host: {
+ port: 'long',
+ },
+ attributes_http: {
+ response_content_length: 'long',
+ status_code: 'long',
+ },
+ attributes_net: {
+ port: 'long',
+ },
+ durationInNanos: 'long',
+ latency: 'long',
+ endTime: 'date_nanos',
+ startTime: 'date_nanos',
+ };
+ const type = _.get(typeMapping, field, 'keyword');
+ return typeof type === 'string' ? type : null;
+};
+
+export const getInvertedOperator = (operator: string, inverted: boolean) => {
+ if (operator.includes('between')) return inverted ? 'is not between' : 'is between';
+ else if (operator.includes('exist')) return inverted ? 'does not exist' : 'exists';
+ else if (operator === 'is' || operator === 'is not') return inverted ? 'is not' : 'is';
+};
+
+export const getOperatorOptions = (field: string) => {
+ const type = getType(field);
+ const operatorMapping = {
+ long: [
+ {
+ label: 'is between',
+ },
+ {
+ label: 'is not between',
+ },
+ ],
+ date_nanos: [
+ {
+ label: 'is between',
+ },
+ {
+ label: 'is not between',
+ },
+ ],
+ keyword: [],
+ default_first: [
+ {
+ label: 'is',
+ },
+ {
+ label: 'is not',
+ },
+ ],
+ default_last: [
+ {
+ label: 'exists',
+ },
+ {
+ label: 'does not exist',
+ },
+ ],
+ };
+ const operators = [
+ ...operatorMapping.default_first,
+ ...operatorMapping[type],
+ ...operatorMapping.default_last,
+ ];
+ return operators;
+};
+
+export const getValueComponent = (
+ field: string,
+ operator: string,
+ value: any,
+ setValue: (v: any) => void
+) => {
+ const textField = (
+ <>
+
+
+ ),
+ },
+ ];
+
+ const GlobalFilterButton = () => {
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+ return (
+ ${service}
${message}
`, + ...styleOptions, + }; + }); + const edges: Array<{ from: number; to: number; color: string }> = []; + Object.keys(map).map((service) => { + map[service].targetServices.map((target) => { + edges.push({ + from: map[service].id, + to: map[target].id, + color: + relatedServices!.indexOf(service) >= 0 && relatedServices!.indexOf(target) >= 0 + ? 'rgba(0, 0, 0, 1)' + : 'rgba(0, 0, 0, 0.3)', + }); + }); + }); + return { graph: { nodes, edges } }; +} + +// returns flattened targetResource as an array for all traceGroups +export function getServiceMapTargetResources(map: ServiceObject, serviceName: string) { + return ([] as string[]).concat.apply( + [], + [...map[serviceName].traceGroups.map((traceGroup) => [...traceGroup.targetResource])] + ); +} + +export function calculateTicks(min: number, max: number, numTicks = 5): number[] { + if (min >= max) return calculateTicks(0, Math.max(1, max), numTicks); + min = Math.floor(min); + max = Math.ceil(max); + + const range = max - min; + const minInterval = range / numTicks; + const magnitude = Math.pow(10, Math.floor(Math.log10(minInterval))); + const residue = Math.ceil(minInterval / magnitude); + + let tick = magnitude; + if (residue > 5) tick *= 10; + else if (residue > 2) tick *= 5; + else if (residue > 1) tick *= 2; + + let curr = Math.max(0, Math.floor((min - 1) / tick) * tick); + const ticks = [curr]; + while (curr < max) { + curr += tick; + ticks.push(curr); + } + + return ticks; +} + +// calculates the minimum fixed_interval for date_histogram from time filter +export const minFixedInterval = (startTime: string, endTime: string) => { + if (startTime?.length === 0 || endTime?.length === 0 || startTime === endTime) return '1d'; + const momentStart = dateMath.parse(startTime)!; + const momentEnd = dateMath.parse(endTime)!; + const diffSeconds = momentEnd.unix() - momentStart.unix(); + + if (diffSeconds <= 1) return '1ms'; // less than 1 second + if (diffSeconds <= 60 * 2) return '1s'; // less than 2 minutes + if (diffSeconds <= 3600 * 2) return '1m'; // less than 2 hours + if (diffSeconds <= 86400 * 2) return '1h'; // less than 2 days + if (diffSeconds <= 86400 * 62) return '1d'; // less than 2 months + if (diffSeconds <= 86400 * 366) return '30d'; // less than 1 year + return '365d'; +}; + +export const fixedIntervalToMilli = (fixedInterval: string) => { + return { + '1ms': 1, + '1s': 1000, + '1m': 60000, + '1h': 3600000, + '1d': 86400000, + '30d': 86400000 * 30, + '365d': 86400000 * 365, + }[fixedInterval]; +}; + +export const fixedIntervalToTickFormat = (fixedInterval: string) => { + if (fixedInterval === '1d') return '%b %e, %Y'; + if (fixedInterval === '30d') return '%b %Y'; + if (fixedInterval === '365d') return '%Y'; + return ''; +}; + +export const getPercentileFilter = ( + percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>, + conditionString: string // >= 95th, < 95th +): FilterType => { + const DSL: any = { + query: { + bool: { + must: [], + filter: [], + should: [], + must_not: [], + minimum_should_match: 1, + }, + }, + }; + percentileMaps.forEach((map) => { + DSL.query.bool.should.push({ + bool: { + must: [ + { + term: { + traceGroup: { + value: map.traceGroupName, + }, + }, + }, + { + range: { + 'traceGroupFields.durationInNanos': map.durationFilter, + }, + }, + ], + }, + }); + }); + return { + field: 'Latency percentile within trace group', + operator: '', + value: conditionString, + inverted: false, + disabled: false, + custom: DSL, + }; +}; + +export const filtersToDsl = ( + filters: FilterType[], + query: string, + startTime: string, + endTime: string +) => { + const DSL: any = { + query: { + bool: { + must: [], + filter: [], + should: [], + must_not: [], + }, + }, + custom: { + timeFilter: [], + serviceNames: [], + serviceNamesExclude: [], + traceGroup: [], + traceGroupExclude: [], + percentiles: { + query: { + bool: { + should: [], + }, + }, + }, + }, + }; + const timeFilter = { + range: { + startTime: { + gte: startTime, + lte: endTime, + }, + }, + }; + DSL.query.bool.must.push(timeFilter); + DSL.custom.timeFilter.push(timeFilter); + if (query.length > 0) { + DSL.query.bool.must.push({ + query_string: { + query, + }, + }); + } + + filters + .filter((filter) => !filter.disabled && !filter.locked) + .forEach((filter) => { + if (filter.custom?.query) { + // add percentile filter + DSL.query.bool.should.push(...filter.custom.query.bool.should); + DSL.custom.percentiles.query.bool.should.push(...filter.custom.query.bool.should); + DSL.query.bool.minimum_should_match = filter.custom.query.bool.minimum_should_match; + DSL.custom.percentiles.query.bool.minimum_should_match = + filter.custom.query.bool.minimum_should_match; + return; + } + + let filterQuery = {}; + let field = filter.field; + if (field === 'latency') field = 'traceGroupFields.durationInNanos'; + else if (field === 'error') field = 'traceGroupFields.statusCode'; + let value; + + switch (filter.operator) { + case 'exists': + case 'does not exist': + filterQuery = { + exists: { + field, + }, + }; + break; + + case 'is': + case 'is not': + value = filter.value; + // latency and error are not actual fields, need to convert first + if (field === 'traceGroupFields.durationInNanos') { + value = milliToNanoSec(value); + } else if (field === 'traceGroupFields.statusCode') { + value = value[0].label === 'true' ? '2' : '0'; + } + + filterQuery = { + term: { + [field]: value, + }, + }; + break; + + case 'is between': + case 'is not between': + const range: { gte?: string; lte?: string } = {}; + if (!filter.value.from.includes('\u221E')) range.gte = filter.value.from; + if (!filter.value.to.includes('\u221E')) range.lte = filter.value.to; + if (field === 'traceGroupFields.durationInNanos') { + if (range.lte) range.lte = milliToNanoSec(parseInt(range.lte || '')).toString(); + if (range.gte) range.gte = milliToNanoSec(parseInt(range.gte || '')).toString(); + } + filterQuery = { + range: { + [field]: range, + }, + }; + break; + + default: + break; + } + DSL.query.bool[filter.inverted ? 'must_not' : 'must'].push(filterQuery); + }); + + return DSL; +}; diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap new file mode 100644 index 000000000..7d7595e66 --- /dev/null +++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap @@ -0,0 +1,169 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Box plot component renders box plot 1`] = ` ++ Latency <95 percentile +
++ 20ms - 50ms +
++ Latency >=95 percentile +
++ 50ms - 80ms +
+
+ -
+
+`;
+
+exports[`Latency trend plot component renders latency plot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ No match
+
+ Error rate: %{y}
Average latency: %{y}
Error rate: %{y}
Latency <95 percentile
+{`${Math.round(plotParams.left)}ms - ${Math.round(plotParams.mid)}ms`}
+Latency >=95 percentile
+{`${Math.round(plotParams.mid)}ms - ${Math.round(plotParams.right)}ms`}
+-
;
+}
+
+export function LatencyPlt(props: { data: Plotly.Data[] }) {
+ const layout = useMemo(
+ () =>
+ ({
+ xaxis: {
+ showgrid: false,
+ type: 'date',
+ tickmode: 'auto',
+ color: '#899195',
+ },
+ yaxis: {
+ title: {
+ text: 'Hourly latency (ms)',
+ font: {
+ size: 12,
+ },
+ },
+ gridcolor: '#d9d9d9',
+ color: '#899195',
+ },
+ annotations: [
+ {
+ x: props.data[0].x[props.data[0].x.length - 1],
+ y: 0,
+ showarrow: true,
+ arrowhead: 0,
+ xref: 'x',
+ yref: 'y',
+ text: `Now: ${_.round(props.data[0].y[props.data[0].y.length - 1] as number, 2)}ms`,
+ ax: 0,
+ ay: -140,
+ borderpad: 10,
+ arrowwidth: 0.7,
+ },
+ ],
+ margin: {
+ l: 50,
+ r: 30,
+ b: 50,
+ t: 30,
+ pad: 0,
+ },
+ height: 200,
+ width: 400,
+ } as Partial
+
+ )}
+
+ {Object.keys(props.ticks).length > 0 && (
+ <>
+
+
+ 
+
+
+
+ No match
+
+
+
+
+ )}
+
+ );
+}
diff --git a/public/components/trace_analytics/components/common/plots/throughput_plt.tsx b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
new file mode 100644
index 000000000..6ddd29a40
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
@@ -0,0 +1,119 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import { EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import moment from 'moment';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+import {
+ fixedIntervalToMilli,
+ fixedIntervalToTickFormat,
+ NoMatchMessage,
+ PanelTitle,
+} from '../helper_functions';
+
+export function ThroughputPlt(props: {
+ items: { items: Plotly.Data[]; fixedInterval: string };
+ setStartTime: (startTime: string) => void;
+ setEndTime: (endTime: string) => void;
+}) {
+ const layout = useMemo(
+ () =>
+ ({
+ height: 217,
+ margin: {
+ l: 50,
+ r: 5,
+ b: 50,
+ t: 30,
+ pad: 4,
+ },
+ annotations: props.items.items.length > 0 && [
+ {
+ x: props.items.items[0].x[props.items.items[0].x.length - 1],
+ y: 0,
+ showarrow: true,
+ arrowhead: 0,
+ xref: 'x',
+ yref: 'y',
+ text: `Now: ${props.items.items[0].y[props.items.items[0].y.length - 1]?.toLocaleString(
+ undefined
+ )}`,
+ ax: 0,
+ ay: -160,
+ borderpad: 10,
+ arrowwidth: 0.7,
+ },
+ ],
+ xaxis: {
+ fixedrange: true,
+ showgrid: false,
+ visible: true,
+ type: 'date',
+ tickformat: fixedIntervalToTickFormat(props.items.fixedInterval),
+ color: '#899195',
+ },
+ yaxis: {
+ title: {
+ text: 'Throughput (n)',
+ font: {
+ size: 12,
+ },
+ },
+ fixedrange: true,
+ gridcolor: '#d9d9d9',
+ showgrid: true,
+ visible: true,
+ color: '#899195',
+ },
+ } as Partial+ Dashboard +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Latency by trace group
+
+
+ (0)
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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={
+
+
+
+
+
+
+
+
+ Trace error rate over time
+
+
+ +
+ 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={
+
+
+
+
+
+
+
+
+ Traces over time
+
+
+ +
+ No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ + Dashboard +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ + Trace Analytics not set up +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Trace Analytics not set up +
+
+
+
+
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+
+
+
+
+
+
+
+
+
+
+ Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "center",
+ "field": "dashboard_latency_variance",
+ "name":
+
+ Range of latencies for traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+ Latency variance (ms)
+
+
+
+ 0Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â 100Â Â Â Â Â Â Â Â Â Â Â Â 200Â Â Â Â Â Â Â Â Â Â Â Â 300Â Â Â Â Â Â Â Â Â Â Â Â 400
+
+ ,
+ "render": [Function],
+ "sortable": [Function],
+ "width": "300px",
+ },
+ Object {
+ "align": "right",
+ "dataType": "number",
+ "field": "dashboard_average_latency",
+ "name":
+ Average latency of traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "24_hour_latency_trend",
+ "name":
+ 24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": false,
+ },
+ Object {
+ "align": "right",
+ "field": "dashboard_error_rate",
+ "name":
+ Error rate based on count of trace errors within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "dashboard_traces",
+ "name":
+ Count of traces with unique trace identifiers in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ ]
+ }
+ items={
+ Array [
+ Object {
+ "24_hour_latency_trend": null,
+ "dashboard_average_latency": 187.27,
+ "dashboard_error_rate": 14.285714285714285,
+ "dashboard_latency_variance": Array [
+ 26.43,
+ 325.4,
+ 325.4,
+ ],
+ "dashboard_trace_group_name": "client_create_order",
+ "dashboard_traces": 7,
+ },
+ ]
+ }
+ onTableChange={[Function]}
+ pagination={
+ Object {
+ "initialPageSize": 10,
+ "pageSizeOptions": Array [
+ 5,
+ 10,
+ 15,
+ ],
+ }
+ }
+ responsive={true}
+ sorting={
+ Object {
+ "sort": Object {
+ "direction": "desc",
+ "field": "dashboard_latency_variance",
+ },
+ }
+ }
+ tableLayout="auto"
+ >
+
+ Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "center",
+ "field": "dashboard_latency_variance",
+ "name":
+
+ Range of latencies for traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+ Latency variance (ms)
+
+
+
+ 0Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â 100Â Â Â Â Â Â Â Â Â Â Â Â 200Â Â Â Â Â Â Â Â Â Â Â Â 300Â Â Â Â Â Â Â Â Â Â Â Â 400
+
+ ,
+ "render": [Function],
+ "sortable": [Function],
+ "width": "300px",
+ },
+ Object {
+ "align": "right",
+ "dataType": "number",
+ "field": "dashboard_average_latency",
+ "name":
+ Average latency of traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "24_hour_latency_trend",
+ "name":
+ 24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": false,
+ },
+ Object {
+ "align": "right",
+ "field": "dashboard_error_rate",
+ "name":
+ Error rate based on count of trace errors within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "dashboard_traces",
+ "name":
+ Count of traces with unique trace identifiers in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ ]
+ }
+ items={
+ Array [
+ Object {
+ "24_hour_latency_trend": null,
+ "dashboard_average_latency": 187.27,
+ "dashboard_error_rate": 14.285714285714285,
+ "dashboard_latency_variance": Array [
+ 26.43,
+ 325.4,
+ 325.4,
+ ],
+ "dashboard_trace_group_name": "client_create_order",
+ "dashboard_traces": 7,
+ },
+ ]
+ }
+ noItemsMessage="No items found"
+ onChange={[Function]}
+ pagination={
+ Object {
+ "hidePerPageOptions": undefined,
+ "pageIndex": 0,
+ "pageSize": 10,
+ "pageSizeOptions": Array [
+ 5,
+ 10,
+ 15,
+ ],
+ "totalItemCount": 1,
+ }
+ }
+ responsive={true}
+ sorting={
+ Object {
+ "allowNeutralSort": true,
+ "sort": Object {
+ "direction": "desc",
+ "field":
+
+ Range of latencies for traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+ Latency variance (ms)
+
+
+
+ 0Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â 100Â Â Â Â Â Â Â Â Â Â Â Â 200Â Â Â Â Â Â Â Â Â Â Â Â 300Â Â Â Â Â Â Â Â Â Â Â Â 400
+
+ ,
+ },
+ }
+ }
+ tableLayout="auto"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Latency by trace group
+
+
+ (1)
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ Trace group name
+
+
+
+ Â
+
+
+ Average latency (ms)
+
+
+
+ Â
+
+
+ 24-hour latency trend
+
+
+
+ Â
+
+
+ Error rate
+
+
+
+ Â
+
+
+ Traces
+
+
+
+ Â
+
+
+ Trace group name
+
+
+
+ Â
+
+
+ Average latency (ms)
+
+
+
+ Â
+
+
+ 24-hour latency trend
+
+
+
+ Â
+
+
+ Error rate
+
+
+
+ Â
+
+
+ Traces
+
+
+
+ Â
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": false,
+ "isSorted": true,
+ "key": "_data_s_dashboard_latency_variance_1",
+ "name":
+
+ Range of latencies for traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+ Latency variance (ms)
+
+
+
+ 0Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â 100Â Â Â Â Â Â Â Â Â Â Â Â 200Â Â Â Â Â Â Â Â Â Â Â Â 300Â Â Â Â Â Â Â Â Â Â Â Â 400
+
+ ,
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": undefined,
+ "isSorted": false,
+ "key": "_data_s_dashboard_average_latency_2",
+ "name":
+ Average latency of traces within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": undefined,
+ "isSorted": false,
+ "key": "_data_s_dashboard_error_rate_4",
+ "name":
+ Error rate based on count of trace errors within a trace group in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": undefined,
+ "isSorted": false,
+ "key": "_data_s_dashboard_traces_5",
+ "name":
+ Count of traces with unique trace identifiers in the selected time range.
+
+ }
+ delay="regular"
+ position="top"
+ >
+
+
+ ,
+ "onSort": [Function],
+ },
+ ]
+ }
+ >
+
+
+
+ Trace group name
+
+
+
+ Â
+
+
+ Average latency (ms)
+
+
+
+ Â
+
+
+ Error rate
+
+
+
+ Â
+
+
+ Traces
+
+
+
+ Â
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | + + | ++ + | ++ + | +
+
+
+
+ 24-hour latency trend
+
+
+
+ Â
+
+
+ |
+ + + | ++ + | +
|---|---|---|---|---|---|
|
+
+
+
+ Trace group name
+
+
+
+ Â
+
+
+
+
+ |
+
+
+
+
+
+
+ 0Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â 100Â Â Â Â Â Â Â Â Â Â Â Â 200Â Â Â Â Â Â Â Â Â Â Â Â 300Â Â Â Â Â Â Â Â Â Â Â Â 400
+
+
+
+ + Latency <95 percentile + ++ 26ms - 325ms + ++ Latency >=95 percentile + ++ 325ms - 325ms + + |
+
+
+
+
+ Average latency (ms)
+
+
+
+ Â
+
+
+
+ 187.27
+
+ |
+
+
+
+
+ 24-hour latency trend
+
+
+
+ Â
+
+
+
+ -
+
+ |
+
+
+
+
+ Error rate
+
+
+
+ Â
+
+
+
+
+
+ 14.29%
+
+ |
+
+
+
+
+ Traces
+
+
+
+ Â
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Latency by trace group
+
+
+ (0)
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Average latency: %{y}
Dashboard
+
+ Trace group name{' '}
+
+ {_.truncate(item, { length: 48 })}
}
+ Average
*/}
+
+ Average latency (ms){' '}
+
+ 24-hour
*/}
+
+ 24-hour latency trend{' '}
+
+
+ Error rate{' '}
+
+
+ Traces{' '}
+
+ + order +
+
+
+ + Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Learn more
+
+ }
+ body={
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Services
+
+
+ (0)
+
+
+ +
+ Trace Analytics not set up +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Trace Analytics not set up +
+
+
+
+
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+ + Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Services
+
+
+ (0)
+
+
+ +
+ 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={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Services
+
+
+ (0)
+
+
+ +
+ No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Services
+
+
+ (1)
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | + + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|---|---|
|
+
+ Name
+
+
+
+ |
+
+
+ Average latency (ms)
+
+
+ 49.54
+
+ |
+
+
+ Error rate
+
+
+
+
+ 3.77%
+
+ |
+
+
+ Throughput
+
+
+
+ |
+
+
+ No. of connected services
+
+
+ 2
+
+ |
+
+
+ Connected services
+
+
+
+
+ order, inventory
+
+ |
+
+
+ Traces
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {serviceName}
+{spanDetailTable}
+ Services
+{_.truncate(item, { length: 24 })}
}
+
+
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
new file mode 100644
index 000000000..2e530b68d
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
@@ -0,0 +1,429 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service breakdown panel component renders empty service breakdown panel 1`] = `
+-
+
-
+ +++ Span ID ++
+
-
+ ++++ ++ + test-span-id + ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Time spent by service
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Time spent by service
+
+
+ +
+
+
+
+
+
+
+
+
+
+ %{value:.2f}%%{value:.2f}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ inventory
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 100
+ %
+
+
+
+`;
+
+exports[`
+
+
+
+
+
+
+
+
+
+
+
+ + Span detail +
+
+
+
+
+
+
+
+
+
+ Overview
+
+
+
+
+
+
+ -
+
-
+ +++ Span ID ++
+
-
+ ++++ ++ ++++ ++ + + +++ 67c279e1100d75c3 ++
+
+
+
+ -
+
-
+ +++ Parent span ID ++
+
-
+ + + - + ++
+
+
+
+ -
+
-
+ +++ Service ++
+
-
+ ++++ ++ + frontend-client + ++
+
+
+
+ -
+
-
+ +++ Operation ++
+
-
+ ++++ ++ + client_pay_order + ++
+
+
+
+ -
+
-
+ +++ Duration ++
+
-
+ ++++ ++ + 225 ms + ++
+
+
+
+ -
+
-
+ +++ Start time ++
+
-
+ ++++ ++ + 03/25/2021 17:23:45 + ++
+
+
+
+ -
+
-
+ +++ End time ++
+
-
+ ++++ ++ + 03/25/2021 17:23:45 + ++
+
+
+
+
+ -
+
-
+ +++ Errors ++
+
-
+ ++++ ++ + No + ++
+
+
+
+ Span attributes
+
+
+ (12)
+
+
+
+
+
+
+ -
+
-
+ +++ droppedAttributesCount ++
+
-
+ ++++ ++ + 0 + ++
+
+
+
+ -
+
-
+ +++ droppedEventsCount ++
+
-
+ ++++ ++ + 0 + ++
+
+
+
+ -
+
-
+ +++ droppedLinksCount ++
+
-
+ ++++ ++ + 0 + ++
+
+
+
+ -
+
-
+ +++ instrumentationLibrary.name ++
+
-
+ ++++ ++ + __main__ + ++
+
+
+
+ -
+
-
+ +++ kind ++
+
-
+ ++++ ++ + SPAN_KIND_INTERNAL + ++
+
+
+
+ -
+
-
+ +++ resource.attributes.host@hostname ++
+
-
+ ++++ ++ + ip-172-31-10-8.us-west-2.compute.internal + ++
+
+
+
+ -
+
-
+ +++ resource.attributes.service@name ++
+
-
+ ++++ ++ + frontend-client + ++
+
+
+
+ -
+
-
+ +++ resource.attributes.telemetry@sdk@language ++
+
-
+ ++++ ++ + python + ++
+
+
+
+ -
+
-
+ +++ resource.attributes.telemetry@sdk@name ++
+
-
+ ++++ ++ + opentelemetry + ++
+
+
+
+ -
+
-
+ +++ resource.attributes.telemetry@sdk@version ++
+
-
+ ++++ ++ + 0.14b0 + ++
+
+
+
+ -
+
-
+ +++ links ++
+
-
+ + + - + ++
+
+
+
+ -
+
-
+ +++ traceState ++
+
-
+ + + - + ++
+
+
+
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ sideCar={
+ Object {
+ "assignMedium": [Function],
+ "assignSyncMedium": [Function],
+ "options": Object {
+ "async": true,
+ "ssr": false,
+ },
+ "read": [Function],
+ "useMedium": [Function],
+ }
+ }
+ >
+
+
+
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ sideCar={
+ Object {
+ "assignMedium": [Function],
+ "assignSyncMedium": [Function],
+ "options": Object {
+ "async": true,
+ "ssr": false,
+ },
+ "read": [Function],
+ "useMedium": [Function],
+ }
+ }
+ >
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ >
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ />
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ sideCar={
+ Object {
+ "assignMedium": [Function],
+ "assignSyncMedium": [Function],
+ "options": Object {
+ "async": true,
+ "ssr": false,
+ },
+ "read": [Function],
+ "useMedium": [Function],
+ }
+ }
+ >
+
+
+
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ sideCar={
+ Object {
+ "assignMedium": [Function],
+ "assignSyncMedium": [Function],
+ "options": Object {
+ "async": true,
+ "ssr": false,
+ },
+ "read": [Function],
+ "useMedium": [Function],
+ }
+ }
+ >
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ >
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+ }
+ onActivation={[Function]}
+ onDeactivation={[Function]}
+ persistentFocus={false}
+ returnFocus={[Function]}
+ shards={Array []}
+ />
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Span detail +
+
+
+
+
+
+ -
+
+ HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2", + ], + }, + ], + "ganttMaxX": 19.91, + "table": Array [ + Object { + "end_time": "2020-11-10T17:55:45.239564396Z", + "error": "Error", + "latency": 19.91, + "service_name": "inventory", + "span_id": "32c641131b569afa", + "start_time": "2020-11-10T17:55:45.219652629Z", + "vs_benchmark": 0, + }, + ], + } + } +> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spans
+
+
+ (0)
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`
+
+
+
+
+
+
+ + No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ + test +
++ Traces +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Learn more
+
+ }
+ body={
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces
+
+
+ (0)
+
+
+ +
+ Trace Analytics not set up +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Trace Analytics not set up +
+
+
+
+
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+ + Traces +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add filter
+
+ }
+ closePopover={[Function]}
+ display="inlineBlock"
+ hasArrow={true}
+ isOpen={false}
+ ownFocus={false}
+ panelPaddingSize="m"
+ withTitle={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces
+
+
+ (0)
+
+
+ +
+ No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+
+
+
+
+
+
+
+
+
+
+
+ Learn more
+
+ }
+ body={
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces
+
+
+ (0)
+
+
+ +
+ Trace Analytics not set up +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Trace Analytics not set up +
+
+
+
+
+
+ The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+ }
+ title={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces
+
+
+ (0)
+
+
+ +
+ No matches +
+ } + > +
+
+
+
+
+
+
+
+
+
+
+
+
+ + No matches +
+
+
+
+
+
+ No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traces
+
+
+ (1)
+
+
+ +
+ Percentile in trace group
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "error_count",
+ "name": "Errors",
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "left",
+ "field": "last_updated",
+ "name": "Last updated",
+ "render": [Function],
+ "sortable": true,
+ },
+ ]
+ }
+ items={
+ Array [
+ Object {
+ "actions": "#",
+ "error_count": "Yes",
+ "last_updated": "11/10/2020 09:55:45",
+ "latency": 19.91,
+ "percentile_in_trace_group": 30,
+ "trace_group": "HTTP GET",
+ "trace_id": "00079a615e31e61766fcb20b557051c1",
+ },
+ ]
+ }
+ onTableChange={[Function]}
+ pagination={
+ Object {
+ "initialPageSize": 10,
+ "pageSizeOptions": Array [
+ 5,
+ 10,
+ 15,
+ ],
+ }
+ }
+ responsive={true}
+ sorting={
+ Object {
+ "sort": Object {
+ "direction": "asc",
+ "field": "trace_id",
+ },
+ }
+ }
+ tableLayout="auto"
+ >
+
+ Percentile in trace group
+
+ ,
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "right",
+ "field": "error_count",
+ "name": "Errors",
+ "render": [Function],
+ "sortable": true,
+ },
+ Object {
+ "align": "left",
+ "field": "last_updated",
+ "name": "Last updated",
+ "render": [Function],
+ "sortable": true,
+ },
+ ]
+ }
+ items={
+ Array [
+ Object {
+ "actions": "#",
+ "error_count": "Yes",
+ "last_updated": "11/10/2020 09:55:45",
+ "latency": 19.91,
+ "percentile_in_trace_group": 30,
+ "trace_group": "HTTP GET",
+ "trace_id": "00079a615e31e61766fcb20b557051c1",
+ },
+ ]
+ }
+ noItemsMessage="No items found"
+ onChange={[Function]}
+ pagination={
+ Object {
+ "hidePerPageOptions": undefined,
+ "pageIndex": 0,
+ "pageSize": 10,
+ "pageSizeOptions": Array [
+ 5,
+ 10,
+ 15,
+ ],
+ "totalItemCount": 1,
+ }
+ }
+ responsive={true}
+ sorting={
+ Object {
+ "allowNeutralSort": true,
+ "sort": Object {
+ "direction": "asc",
+ "field": "Trace ID",
+ },
+ }
+ }
+ tableLayout="auto"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Percentile in trace group
+
+ ,
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": undefined,
+ "isSorted": false,
+ "key": "_data_s_error_count_4",
+ "name": "Errors",
+ "onSort": [Function],
+ },
+ Object {
+ "isSortAscending": undefined,
+ "isSorted": false,
+ "key": "_data_s_last_updated_5",
+ "name": "Last updated",
+ "onSort": [Function],
+ },
+ ]
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | + + | ++ + | ++ + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|---|
|
+
+ Trace ID
+
+
+
+ |
+
+
+ Trace group
+
+
+
+
+ HTTP GET
+
+ |
+
+
+ Latency (ms)
+
+
+
+ 19.91
+
+
+ |
+
+
+
+
+ Percentile in trace group
+
+
+
+
+ 30th
+
+ |
+
+
+ Errors
+
+
+ No
+
+ |
+
+
+ Last updated
+
+
+ 11/10/2020 09:55:45
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ %{value:.2f}%
HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2'], + marker: { color: 'rgba(0, 0, 0, 0)' }, + width: 0.4, + type: 'bar', + orientation: 'h', + hoverinfo: 'none', + showlegend: false, + }, + { + x: [19.91], + y: ['inventory
HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2'], + text: ['Error'], + textfont: { color: ['#c14125'] }, + textposition: 'outside', + marker: { color: '#7492e7' }, + width: 0.4, + type: 'bar', + orientation: 'h', + hovertemplate: '%{x}
setHover(true)} onMouseLeave={() => setHover(false)}>
+
+ {props.title}
+
+ ),
+ description: descriptionComponent,
+ },
+ ]}
+ type="column"
+ align="center"
+ compressed
+ />
+
+ {props.data[0].labels[i]}
+ Span detail
+
+ {toggleIdSelected === 'timeline' ? (
+
+ {traceId}
+Traces
+{_.truncate(item, { length: 24 })}
+ )}
+ {_.truncate(item, { length: 36 })}
+ )}
+ Percentile in trace group
+ {/* trace group
*/}
+
+ ),
+ align: 'right',
+ sortable: true,
+ render: (item) =>
+ item === 0 || item ? Dashboard
)}
+ render={(routerProps) => renderPageWithSidebar(Traces
)}
+ render={(routerProps) => renderPageWithSidebar({`Trace ${props.match.params.id}`}
}
+ render={(routerProps) => (
+ Services
)}
+ render={(routerProps) => renderPageWithSidebar({`Service ${props.match.params.id}`}
}
+ render={(routerProps) => (
+ Average latency: %{y}
Throughput: %{y:,}
Error rate: %{y}
%{value:.2f}%
${name} ` + uuid(); + maxEndTime = Math.max(maxEndTime, startTime + duration); + + data.table.push({ + service_name: serviceName, + span_id: hit._source.spanId, + latency: duration, + vs_benchmark: 0, + error, + start_time: hit._source.startTime, + end_time: hit._source.endTime, + }); + data.gantt.push( + { + x: [startTime], + y: [uniqueLabel], + marker: { + color: 'rgba(0, 0, 0, 0)', + }, + width: 0.4, + type: 'bar', + orientation: 'h', + hoverinfo: 'none', + showlegend: false, + spanId: hit._source.spanId, + }, + { + x: [duration], + y: [uniqueLabel], + text: [error], + textfont: { color: ['#c14125'] }, + textposition: 'outside', + marker: { + color: colorMap[serviceName], + }, + width: 0.4, + type: 'bar', + orientation: 'h', + hovertemplate: '%{x}