Skip to content

Commit fe28d18

Browse files
jotakjotak
committed
Follow-up on #239: do not truncate on tooltips..
.. except in side-panel metrics, where less space is available
1 parent a01be99 commit fe28d18

File tree

10 files changed

+55
-24
lines changed

10 files changed

+55
-24
lines changed

‎web/src/api/loki.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export type TopologyMetrics = {
8383
};
8484

8585
export type NamedMetric = TopologyMetrics & {
86-
name: string;
86+
fullName: string;
87+
shortName: string;
8788
isInternal: boolean;
8889
};
8990

‎web/src/components/metrics/__tests__/metrics-content.spec.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ describe('<MetricsContent />', () => {
1010
id: 'chart-test',
1111
title: 'chart-test',
1212
metricType: 'bytes',
13-
metrics: metrics.map(m => ({ ...m, name: 'whatever', isInternal: false })),
13+
metrics: metrics.map(m => ({ ...m, fullName: 'whatever', shortName: 'whatever', isInternal: false })),
1414
showTitle: true,
1515
smallerTexts: false,
16-
limit: 5
16+
limit: 5,
17+
tooltipsTruncate: true
1718
};
1819
it('should render component', async () => {
1920
const wrapper = mount(<MetricsContent {...props} />);

‎web/src/components/metrics/__tests__/stat-donut.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('<StatDonut />', () => {
1212
stat: 'sum',
1313
limit: 5,
1414
metricType: 'bytes',
15-
topKMetrics: metrics.map(m => ({ ...m, name: 'whatever', isInternal: false })),
15+
topKMetrics: metrics.map(m => ({ ...m, fullName: 'whatever', shortName: 'whatever', isInternal: false })),
1616
totalMetric: { stats: { total: 500 } } as NamedMetric,
1717
showInternal: true,
1818
showOthers: true,

‎web/src/components/metrics/metrics-content.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,15 @@ import * as React from 'react';
1515
import { NamedMetric } from '../../api/loki';
1616
import { MetricType } from '../../model/flow-query';
1717
import { getFormattedRateValue } from '../../utils/metrics';
18-
import { ChartDataPoint, chartVoronoi, Dimensions, defaultDimensions, observe, toDatapoints } from './metrics-helper';
18+
import {
19+
ChartDataPoint,
20+
chartVoronoi,
21+
Dimensions,
22+
defaultDimensions,
23+
observe,
24+
toDatapoints,
25+
LegendDataItem
26+
} from './metrics-helper';
1927
import './metrics-content.css';
2028

2129
export type MetricsContentProps = {
@@ -31,6 +39,7 @@ export type MetricsContentProps = {
3139
showScatter?: boolean;
3240
smallerTexts?: boolean;
3341
itemsPerRow?: number;
42+
tooltipsTruncate: boolean;
3443
};
3544

3645
export const MetricsContent: React.FC<MetricsContentProps> = ({
@@ -45,13 +54,15 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
4554
showArea,
4655
showScatter,
4756
smallerTexts,
48-
itemsPerRow
57+
itemsPerRow,
58+
tooltipsTruncate
4959
}) => {
5060
const filteredMetrics = metrics.slice(0, limit);
5161

52-
const legendData = filteredMetrics.map((m, idx) => ({
62+
const legendData: LegendDataItem[] = filteredMetrics.map((m, idx) => ({
5363
childName: `${showBar ? 'bar-' : 'area-'}${idx}`,
54-
name: m.name
64+
name: m.shortName,
65+
tooltipName: tooltipsTruncate ? m.shortName : m.fullName
5566
}));
5667

5768
const topKDatapoints: ChartDataPoint[][] = filteredMetrics.map(toDatapoints);

‎web/src/components/metrics/metrics-helper.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TruncateLength } from '../dropdowns/truncate-dropdown';
1111
export type LegendDataItem = {
1212
childName?: string;
1313
name?: string;
14+
tooltipName?: string;
1415
labels?: {
1516
fill?: string;
1617
};
@@ -29,7 +30,7 @@ export type ChartDataPoint = {
2930

3031
export const toDatapoints = (metric: NamedMetric): ChartDataPoint[] => {
3132
return metric.values.map(v => ({
32-
name: metric.name,
33+
name: metric.shortName,
3334
date: getFormattedDate(getDateFromUnix(v[0])),
3435
x: getDateFromUnix(v[0]),
3536
y: Number(v[1])
@@ -38,13 +39,14 @@ export const toDatapoints = (metric: NamedMetric): ChartDataPoint[] => {
3839

3940
export const chartVoronoi = (legendData: LegendDataItem[], metricType: MetricType) => {
4041
const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
42+
const tooltipData = legendData.map(item => ({ ...item, name: item.tooltipName }));
4143
return (
4244
<CursorVoronoiContainer
4345
cursorDimension="x"
4446
labels={(dp: { datum: ChartDataPoint }) => {
4547
return dp.datum.y || dp.datum.y === 0 ? getFormattedRateValue(dp.datum.y, metricType) : 'n/a';
4648
}}
47-
labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum: ChartDataPoint) => datum.date} />}
49+
labelComponent={<ChartLegendTooltip legendData={tooltipData} title={(datum: ChartDataPoint) => datum.date} />}
4850
mouseFollowTooltips
4951
voronoiDimension="x"
5052
voronoiPadding={50}
@@ -105,40 +107,47 @@ export const toNamedMetric = (
105107
truncateLength: TruncateLength = TruncateLength.OFF
106108
): NamedMetric => {
107109
const srcName = getPeerName(t, m.source, m.scope, truncateLength);
110+
const srcFullName = getPeerName(t, m.source, m.scope);
108111
const dstName = getPeerName(t, m.destination, m.scope, truncateLength);
109-
if (srcName === dstName) {
112+
const dstFullName = getPeerName(t, m.destination, m.scope);
113+
if (srcFullName === dstFullName) {
110114
if (m.source.displayName) {
111115
// E.g: namespace "netobserv" to "netobserv"
112116
return {
113117
...m,
114-
name: `${srcName} (${t('internal')})`,
118+
shortName: `${srcName} (${t('internal')})`,
119+
fullName: `${srcFullName} (${t('internal')})`,
115120
isInternal: true
116121
};
117122
} else {
118123
// E.g: host-network traffic while scope is "namespaces"
119124
return {
120125
...m,
121-
name: srcName,
126+
shortName: srcName,
127+
fullName: srcFullName,
122128
isInternal: false
123129
};
124130
}
125131
}
126132
if (data && matchPeer(data, m.source)) {
127133
return {
128134
...m,
129-
name: `${t('To')} ${dstName}`,
135+
shortName: `${t('To')} ${dstName}`,
136+
fullName: `${t('To')} ${dstFullName}`,
130137
isInternal: false
131138
};
132139
} else if (data && matchPeer(data, m.destination)) {
133140
return {
134141
...m,
135-
name: `${t('From')} ${srcName}`,
142+
shortName: `${t('From')} ${srcName}`,
143+
fullName: `${t('From')} ${srcFullName}`,
136144
isInternal: false
137145
};
138146
}
139147
return {
140148
...m,
141-
name: `${srcName} -> ${dstName}`,
149+
shortName: `${srcName} -> ${dstName}`,
150+
fullName: `${srcFullName} -> ${dstFullName}`,
142151
isInternal: false
143152
};
144153
};

‎web/src/components/metrics/metrics-total-content.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,13 @@ export const MetricsTotalContent: React.FC<MetricsTotalContentProps> = ({
6262

6363
const legendData: LegendDataItem[] = filtered.map((m, idx) => ({
6464
childName: `bar-${idx}`,
65-
name: m.name
65+
name: m.shortName,
66+
tooltipName: m.fullName
6667
}));
6768
legendData.push({
6869
childName: 'area-total',
69-
name: totalMetric.name,
70+
name: totalMetric.shortName,
71+
tooltipName: totalMetric.fullName,
7072
symbol: { fill: '#8B8D8F' }
7173
});
7274

‎web/src/components/metrics/stat-donut.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ export const StatDonut: React.FC<StatDonutProps> = ({
6161

6262
const sliced = filtered
6363
.map(m => ({
64-
name: m.name,
64+
shortName: m.shortName,
65+
fullName: m.fullName,
6566
value: getStat(m.stats, stat)
6667
}))
6768
.sort((a, b) => b.value - a.value)
@@ -70,15 +71,15 @@ export const StatDonut: React.FC<StatDonutProps> = ({
7071
const others = Math.max(0, total - sliced.reduce((prev, cur) => prev + cur.value, 0));
7172
if (showOthers) {
7273
if (others > 0) {
73-
sliced.push({ name: t('Others'), value: others });
74+
sliced.push({ fullName: t('Others'), shortName: t('Others'), value: others });
7475
}
7576
} else {
7677
total -= others;
7778
}
7879

7980
const legendData = sliced.map((m, idx) => ({
8081
childName: `${'area-'}${idx}`,
81-
name: m.name
82+
name: m.shortName
8283
}));
8384

8485
const legentComponent = (
@@ -109,7 +110,7 @@ export const StatDonut: React.FC<StatDonutProps> = ({
109110
//animate={true}
110111
width={dimensions.width}
111112
height={dimensions.height}
112-
data={sliced.map(m => ({ x: `${m.name}: ${getFormattedRateValue(m.value, metricType)}`, y: m.value }))}
113+
data={sliced.map(m => ({ x: `${m.fullName}: ${getFormattedRateValue(m.value, metricType)}`, y: m.value }))}
113114
padding={{
114115
bottom: 20,
115116
left: 20,

‎web/src/components/netflow-overview/__tests__/netflow-overview-panel.spec.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ describe('<NetflowOverviewPanel />', () => {
2020
id: SamplePanel.id,
2121
title: 'title',
2222
metricType: 'bytes' as MetricType,
23-
metrics: metrics.map(m => ({ ...m, name: 'whatever', isInternal: false })),
24-
limit: 5
23+
metrics: metrics.map(m => ({ ...m, shortName: 'whatever', fullName: 'whatever', isInternal: false })),
24+
limit: 5,
25+
tooltipsTruncate: true
2526
};
2627
it('should render component', async () => {
2728
const wrapper = shallow(<NetflowOverviewPanel {...panelProps} />);

‎web/src/components/netflow-overview/netflow-overview.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
128128
showArea={false}
129129
showScatter={false}
130130
smallerTexts={smallerTexts}
131+
tooltipsTruncate={false}
131132
/>
132133
),
133134
doubleWidth: false
@@ -145,6 +146,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
145146
showArea={true}
146147
showScatter={true}
147148
smallerTexts={smallerTexts}
149+
tooltipsTruncate={false}
148150
/>
149151
),
150152
doubleWidth: false
@@ -188,6 +190,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
188190
showScatter={true}
189191
itemsPerRow={2}
190192
smallerTexts={smallerTexts}
193+
tooltipsTruncate={false}
191194
/>
192195
),
193196
doubleWidth: true

‎web/src/components/netflow-topology/element-panel.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,7 @@ export const ElementPanelMetricsContent: React.FC<{
284284
showTitle
285285
showArea
286286
showScatter
287+
tooltipsTruncate={true}
287288
/>
288289
</div>
289290
);
@@ -311,6 +312,7 @@ export const ElementPanelMetricsContent: React.FC<{
311312
showTitle
312313
showArea
313314
showScatter
315+
tooltipsTruncate={true}
314316
/>
315317
</div>
316318
);

0 commit comments

Comments
 (0)