Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Monitor Tab: Cannot see the whole numbers in the legend #873

Merged
merged 19 commits into from
Mar 1, 2022
Merged

Monitor Tab: Cannot see the whole numbers in the legend #873

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
2d9249a
Add left margin
Jan 26, 2022
018279f
Add left margin
Jan 26, 2022
4b0952f
Merge branch 'fix-legend-numbers' of https://github.com/nofar9792/jae…
Jan 26, 2022
d217082
Temp
Feb 8, 2022
b190999
Use timeConversion
Feb 15, 2022
2ae8fd3
Merge branch 'main' of https://github.com/jaegertracing/jaeger-ui int…
Feb 15, 2022
df82afd
Refactor timeConvention and use max vaule for timeunit in the title
Feb 17, 2022
37365de
Semicolon
Feb 17, 2022
2057d8f
Merge branch 'main' of https://github.com/jaegertracing/jaeger-ui int…
Feb 20, 2022
69c6777
Remove timeunit from y axis
Feb 20, 2022
caaa913
Merge
Feb 23, 2022
812145d
Non existent timeunit
Feb 24, 2022
86df0d8
Same short term
Feb 27, 2022
8fc6c44
Brackets
Feb 27, 2022
dd134d8
Merge branch 'main' into fix-legend-numbers
Feb 28, 2022
6b34e47
Some tests
Feb 28, 2022
654ad97
Merge branch 'fix-legend-numbers' of https://github.com/nofar9792/jae…
Feb 28, 2022
81f26e0
Merge
Feb 28, 2022
17e560b
Merge branch 'main' into fix-legend-numbers
Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
View file
Open in desktop
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 Down Expand Up @@ -187,6 +190,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
marginClassName="error-rate-margins"
metricsData={
Object {
"max": 1,
"metricPoints": Array [
Object {
"x": 1631274747520,
Expand Down Expand Up @@ -222,6 +226,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
marginClassName="request-margins"
metricsData={
Object {
"max": 0.05,
"metricPoints": Array [
Object {
"x": 1631271823806,
Expand Down
5 changes: 5 additions & 0 deletions ...ges/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ exports[`<ServiceGraph> Base graph should be displayed 1`] = `
margin={
Object {
"bottom": 25,
"left": 40,
}
}
onMouseLeave={[Function]}
Expand Down Expand Up @@ -190,6 +191,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
margin={
Object {
"bottom": 25,
"left": 40,
}
}
onMouseLeave={[Function]}
Expand Down Expand Up @@ -304,6 +306,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
margin={
Object {
"bottom": 25,
"left": 40,
}
}
onMouseLeave={[Function]}
Expand Down Expand Up @@ -422,6 +425,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
margin={
Object {
"bottom": 25,
"left": 40,
}
}
onMouseLeave={[Function]}
Expand Down Expand Up @@ -557,6 +561,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
margin={
Object {
"bottom": 25,
"left": 40,
}
}
onMouseLeave={[Function]}
Expand Down
104 changes: 60 additions & 44 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,52 +150,68 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
const noDataComponent = this.generatePlaceholder('No Data');
const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');

const Plot = (
<XYPlot
margin={{ bottom: 25 }}
onMouseLeave={() => this.setState({ crosshairValues: [] })}
width={width}
height={this.height - 74}
yDomain={yDomain}
>
{showHorizontalLines ? <HorizontalGridLines /> : null}
<XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
<YAxis />
{this.renderLines()}
<Crosshair values={this.state.crosshairValues}>
<div style={{ width: 140 }}>
{this.state.crosshairValues[0] &&
`${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
this.state.crosshairValues[0].x
).toLocaleTimeString()}`}
{this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
showLegend ? (
<div key={d.label}>
P{d.label * 100}: {d.y}
</div>
) : (
<div key={d.label}>{d.y}</div>
)
)}
</div>
</Crosshair>
{showLegend ? (
<DiscreteColorLegend
className="legend-label"
orientation="horizontal"
items={this.getData()
.map((d: ServiceMetricsObject, idx: number) => ({
color: this.colors[idx],
title: `${d.quantile * 100}th`,
}))
.reverse()}
/>
) : null}
</XYPlot>
);
const Plot = () => {
let maxValue = 0;

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

const pixelPerNumber = 6;
const minNumberNumbersToDisplay = 3;
const additionalPixelWidth =
(Math.round(maxValue).toString(10).length - minNumberNumbersToDisplay) * pixelPerNumber;
nofar9792 marked this conversation as resolved.
Show resolved Hide resolved

return (
<XYPlot
margin={{ bottom: 25, left: 40 + (additionalPixelWidth < 0 ? 0 : additionalPixelWidth) }}
onMouseLeave={() => this.setState({ crosshairValues: [] })}
width={width}
height={this.height - 74}
yDomain={yDomain}
>
{showHorizontalLines ? <HorizontalGridLines /> : null}
<XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
<YAxis />
{this.renderLines()}
<Crosshair values={this.state.crosshairValues}>
<div style={{ width: 140 }}>
{this.state.crosshairValues[0] &&
`${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
this.state.crosshairValues[0].x
).toLocaleTimeString()}`}
{this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
showLegend ? (
<div key={d.label}>
P{d.label * 100}: {d.y}
</div>
) : (
<div key={d.label}>{d.y}</div>
)
)}
</div>
</Crosshair>
{showLegend ? (
<DiscreteColorLegend
className="legend-label"
orientation="horizontal"
items={this.getData()
.map((d: ServiceMetricsObject, idx: number) => ({
color: this.colors[idx],
title: `${d.quantile * 100}th`,
}))
.reverse()}
/>
) : null}
</XYPlot>
);
};

if (!loading) {
GraphComponent = metricsData === null ? noDataComponent : Plot;
GraphComponent = metricsData === null ? noDataComponent : Plot();
}

if (error) {
Expand Down
10 changes: 10 additions & 0 deletions packages/jaeger-ui/src/reducers/metrics.mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -729,6 +729,7 @@ const originInitialState = {

const serviceMetrics = {
service_call_rate: {
max: 0.05,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -743,6 +744,7 @@ const serviceMetrics = {
serviceName: 'cartservice',
},
service_error_rate: {
max: 1,
metricPoints: [
{
x: 1631274747520,
Expand All @@ -758,6 +760,7 @@ const serviceMetrics = {
},
service_latencies: [
{
max: 189.86,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -772,6 +775,7 @@ const serviceMetrics = {
serviceName: 'cartservice',
},
{
max: 189.86,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -786,6 +790,7 @@ const serviceMetrics = {
serviceName: 'cartservice',
},
{
max: 189.86,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -803,6 +808,7 @@ const serviceMetrics = {
};
const serviceMetricsWithNulls = {
service_call_rate: {
max: 0.05,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -817,6 +823,7 @@ const serviceMetricsWithNulls = {
serviceName: 'cartservice',
},
service_error_rate: {
max: 1,
metricPoints: [
{
x: 1631274747520,
Expand All @@ -832,6 +839,7 @@ const serviceMetricsWithNulls = {
},
service_latencies: [
{
max: 0,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -846,6 +854,7 @@ const serviceMetricsWithNulls = {
serviceName: 'cartservice',
},
{
max: 189.86,
metricPoints: [
{
x: 1631271823806,
Expand All @@ -860,6 +869,7 @@ const serviceMetricsWithNulls = {
serviceName: 'cartservice',
},
{
max: 189.86,
metricPoints: [
{
x: 1631271823806,
Expand Down
5 changes: 4 additions & 1 deletion packages/jaeger-ui/src/reducers/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,24 +82,27 @@ function fetchServiceMetricsDone(
if (promiseResult.status === 'fulfilled') {
const metrics = promiseResult.value;
if (metrics.metrics[0]) {
let max = 0;
const metric: ServiceMetricsObject = {
serviceName: metrics.metrics[0].labels[0].value,
quantile: metrics.quantile,
max: 0,
metricPoints: metrics.metrics[0].metricPoints.map((p: MetricPointObject) => {
let y;
try {
y = parseFloat(p.gaugeValue.doubleValue.toFixed(2));
max = y > max ? y : max;
} catch (e) {
y = null;
}

return {
x: new Date(p.timestamp).getTime(),
y,
};
}),
};

metric.max = max;
if (metrics.name === 'service_latencies') {
if (serviceMetrics[metrics.name] === null) {
serviceMetrics[metrics.name] = [];
Expand Down
1 change: 1 addition & 0 deletions packages/jaeger-ui/src/types/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export type ServiceOpsMetrics = {
export type ServiceMetricsObject = {
serviceName: string;
quantile: number;
max: number;
metricPoints: Points[];
};

Expand Down