Skip to content

Commit

Permalink
Merge 17e560b into 161a661
Browse files Browse the repository at this point in the history
  • Loading branch information
nofar9792 authored Mar 1, 2022
2 parents 161a661 + 17e560b commit c283c1b
Show file tree
Hide file tree
Showing 10 changed files with 270 additions and 36 deletions.
12 changes: 9 additions & 3 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
metricsData={
Array [
Object {
"max": 189.86,
"metricPoints": Array [
Object {
"x": 1631271823806,
Expand All @@ -141,6 +142,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
"serviceName": "cartservice",
},
Object {
"max": 189.86,
"metricPoints": Array [
Object {
"x": 1631271823806,
Expand All @@ -155,6 +157,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
"serviceName": "cartservice",
},
Object {
"max": 189.86,
"metricPoints": Array [
Object {
"x": 1631271823806,
Expand All @@ -170,7 +173,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
},
]
}
name="Latency, ms"
name="Latency (ms)"
showHorizontalLines={true}
showLegend={true}
width={300}
Expand All @@ -180,6 +183,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
1466424490000,
]
}
yAxisTickFormat={[Function]}
/>
</Col>
<Col
Expand All @@ -193,6 +197,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
marginClassName="error-rate-margins"
metricsData={
Object {
"max": 1,
"metricPoints": Array [
Object {
"x": 1631274747520,
Expand All @@ -207,7 +212,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
"serviceName": "cartservice",
}
}
name="Error rate, %"
name="Error rate (%)"
width={300}
xDomain={
Array [
Expand All @@ -234,6 +239,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
marginClassName="request-margins"
metricsData={
Object {
"max": 0.05,
"metricPoints": Array [
Object {
"x": 1631271823806,
Expand All @@ -248,7 +254,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
"serviceName": "cartservice",
}
}
name="Request rate, req/s"
name="Request rate (req/s)"
showHorizontalLines={true}
width={300}
xDomain={
Expand Down
31 changes: 30 additions & 1 deletion packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,17 @@ import {
mapStateToProps,
mapDispatchToProps,
getLoopbackInterval,
yAxisTickFormat,
} from '.';
import LoadingIndicator from '../../common/LoadingIndicator';
import MonitorATMEmptyState from '../EmptyState';
import ServiceGraph from './serviceGraph';
import { originInitialState, serviceMetrics, serviceOpsMetrics } from '../../../reducers/metrics.mock';
import {
originInitialState,
serviceMetrics,
serviceOpsMetrics,
serviceMetricsWithOneServiceLatency,
} from '../../../reducers/metrics.mock';

const state = {
services: {},
Expand Down Expand Up @@ -85,6 +91,21 @@ describe('<MonitorATMServicesView>', () => {
expect(wrapper.find(LoadingIndicator).length).toBe(0);
});

it('render one service latency', () => {
wrapper.setProps({
services: ['s1'],
selectedService: undefined,
metrics: {
...originInitialState,
serviceMetricsWithOneServiceLatency,
serviceOpsMetrics,
loading: false,
isATMActivated: true,
},
});
expect(wrapper.length).toBe(1);
});

it('Render ATM not configured page', () => {
wrapper.setProps({
services: [],
Expand Down Expand Up @@ -319,3 +340,11 @@ describe('getLoopbackInterval()', () => {
expect(getLoopbackInterval(48 * 3600000)).toBe('last 2 days');
});
});

describe('yAxisTickFormat', () => {
it('value is 2 second', () => {
const timeInMs = 1000;
const displayTimeUnit = 'seconds';
expect(yAxisTickFormat(timeInMs, displayTimeUnit)).toBe(1);
});
});
33 changes: 27 additions & 6 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
ServiceOpsMetrics,
} from '../../../types/metrics';
import prefixUrl from '../../../utils/prefix-url';
import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } from '../../../utils/date';

import './index.css';

Expand Down Expand Up @@ -93,14 +94,31 @@ export const getLoopbackInterval = (interval: number) => {
return timeFrameObj.label.toLowerCase();
};

const calcDisplayTimeUnit = (serviceLatencies: ServiceMetricsObject | ServiceMetricsObject[] | null) => {
let maxValue = 0;

if (serviceLatencies && Array.isArray(serviceLatencies)) {
const allMaxMetrics = serviceLatencies.map(x => x.max);
maxValue = Math.max(...allMaxMetrics);
} else if (serviceLatencies) {
maxValue = serviceLatencies.max;
}

return getSuitableTimeUnit(maxValue * 1000);
};

// export for tests
export const yAxisTickFormat = (timeInMS: number, displayTimeUnit: string) =>
convertToTimeUnit(timeInMS * 1000, displayTimeUnit);

const convertServiceErrorRateToPercentages = (serviceErrorRate: null | ServiceMetricsObject) => {
if (!serviceErrorRate) return null;

const wew = serviceErrorRate.metricPoints.map((metricPoint: Points) => {
const convertedMetricsPoints = serviceErrorRate.metricPoints.map((metricPoint: Points) => {
return { ...metricPoint, y: metricPoint.y! * 100 };
});

return { ...serviceErrorRate, metricPoints: wew };
return { ...serviceErrorRate, metricPoints: convertedMetricsPoints };
};

// export for tests
Expand Down Expand Up @@ -201,6 +219,8 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat

render() {
const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
const displayTimeUnit = calcDisplayTimeUnit(serviceLatencies);
const serviceErrorRate = metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null;

if (servicesLoading) {
Expand Down Expand Up @@ -276,12 +296,13 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
metrics.serviceError.service_latencies_95
}
loading={metrics.loading}
name="Latency, ms"
name={`Latency (${convertTimeUnitToShortTerm(displayTimeUnit)})`}
width={this.state.graphWidth}
metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null}
metricsData={serviceLatencies}
showLegend
marginClassName="latency-margins"
showHorizontalLines
yAxisTickFormat={timeInMs => yAxisTickFormat(timeInMs, displayTimeUnit)}
xDomain={this.state.graphXDomain}
/>
</Col>
Expand All @@ -290,7 +311,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
key="errRate"
error={metrics.serviceError.service_error_rate}
loading={metrics.loading}
name="Error rate, %"
name="Error rate (%)"
width={this.state.graphWidth}
metricsData={convertServiceErrorRateToPercentages(serviceErrorRate)}
marginClassName="error-rate-margins"
Expand All @@ -304,7 +325,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
key="requests"
loading={metrics.loading}
error={metrics.serviceError.service_call_rate}
name="Request rate, req/s"
name="Request rate (req/s)"
width={this.state.graphWidth}
metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_call_rate : null}
showHorizontalLines
Expand Down
6 changes: 3 additions & 3 deletions ...rc/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,7 +799,7 @@ exports[`<OperationTableDetails> render greater than 0.1 requests value in the t
<div
className="table-graph-avg"
>
736ms
736.16ms
</div>
</div>
</td>
Expand Down Expand Up @@ -1489,7 +1489,7 @@ exports[`<OperationTableDetails> render number with more than 2 decimal places v
<div
className="table-graph-avg"
>
736ms
736.16ms
</div>
</div>
</td>
Expand Down Expand Up @@ -2179,7 +2179,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
<div
className="table-graph-avg"
>
736ms
736.16ms
</div>
</div>
</td>
Expand Down
5 changes: 3 additions & 2 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
} from 'react-vis';
import LoadingIndicator from '../../common/LoadingIndicator';
import { ServiceMetricsObject, Points } from '../../../types/metrics';

import './serviceGraph.css';
import { ApiError } from '../../../types/api-error';

Expand All @@ -41,6 +40,7 @@ type TProps = {
yDomain?: number[];
color?: string;
marginClassName?: string;
yAxisTickFormat?: (v: number) => number;
xDomain: number[];
};

Expand Down Expand Up @@ -146,6 +146,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
marginClassName,
name,
error,
yAxisTickFormat,
xDomain,
} = this.props;
let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
Expand All @@ -163,7 +164,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
>
{showHorizontalLines ? <HorizontalGridLines /> : null}
<XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
<YAxis />
<YAxis tickFormat={yAxisTickFormat} />
{this.renderLines()}
<Crosshair values={this.state.crosshairValues}>
<div className="crosshair-value">
Expand Down
Loading

0 comments on commit c283c1b

Please sign in to comment.