Skip to content

Commit e2d9077

Browse files
jpinsonneaujpinsonneau
authored
added 'p' and 'pps' units + allow translation (#282)
1 parent ba2182f commit e2d9077

File tree

14 files changed

+83
-76
lines changed

14 files changed

+83
-76
lines changed

‎web/locales/en/plugin__netobserv-plugin.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,9 +218,11 @@
218218
"Hide advanced options": "Hide advanced options",
219219
"Show advanced options": "Show advanced options",
220220
"Filtered sum of bytes": "Filtered sum of bytes",
221+
"B": "B",
221222
"Filtered sum of packets": "Filtered sum of packets",
222-
"packets": "packets",
223+
"P": "P",
223224
"Filtered average speed": "Filtered average speed",
225+
"Bps": "Bps",
224226
"Summary": "Summary",
225227
"Query limit reached": "Query limit reached",
226228
"Filtered flows count": "Filtered flows count",
@@ -232,6 +234,7 @@
232234
"Filtered top-k byte rate / filtered total byte rate": "Filtered top-k byte rate / filtered total byte rate",
233235
"Filtered byte rate": "Filtered byte rate",
234236
"Filtered sum of top-k packets / filtered total packets": "Filtered sum of top-k packets / filtered total packets",
237+
"packets": "packets",
235238
"Cardinality": "Cardinality",
236239
"(top {{count}} metrics)": "(top {{count}} metrics)",
237240
"(top {{count}} metrics)_plural": "(top {{count}} metrics)",
@@ -350,6 +353,7 @@
350353
"A protocol number like 6, 17": "A protocol number like 6, 17",
351354
"A IANA name like TCP, UDP": "A IANA name like TCP, UDP",
352355
"Empty double quotes \"\" for undefined protocol": "Empty double quotes \"\" for undefined protocol",
356+
"Pps": "Pps",
353357
"Network overview": "Network overview",
354358
"Top {{limit}} flow rates stacked": "Top {{limit}} flow rates stacked",
355359
"bars": "bars",

‎web/src/components/metrics/histogram.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ export const Histogram: React.FC<{
234234
}}
235235
>
236236
<ChartAxis fixLabelOverlap />
237-
<ChartAxis dependentAxis showGrid fixLabelOverlap tickFormat={y => getFormattedRateValue(y, 'count')} />
237+
<ChartAxis dependentAxis showGrid fixLabelOverlap tickFormat={y => getFormattedRateValue(y, 'count', t)} />
238238
<ChartStack>
239239
<ChartBar
240240
name={`bar-${id}`}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
LegendDataItem
2525
} from './metrics-helper';
2626
import './metrics-content.css';
27+
import { useTranslation } from 'react-i18next';
2728

2829
export type MetricsContentProps = {
2930
id: string;
@@ -52,6 +53,8 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
5253
itemsPerRow,
5354
tooltipsTruncate
5455
}) => {
56+
const { t } = useTranslation('plugin__netobserv-plugin');
57+
5558
const filteredMetrics = metrics.slice(0, limit);
5659

5760
const legendData: LegendDataItem[] = filteredMetrics.map((m, idx) => ({
@@ -81,7 +84,7 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
8184
<Chart
8285
themeColor={ChartThemeColor.multiUnordered}
8386
ariaTitle={title}
84-
containerComponent={chartVoronoi(legendData, metricType)}
87+
containerComponent={chartVoronoi(legendData, metricType, t)}
8588
legendData={legendData}
8689
legendOrientation={'horizontal'}
8790
legendPosition="bottom-left"
@@ -101,7 +104,7 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
101104
}}
102105
>
103106
<ChartAxis fixLabelOverlap />
104-
<ChartAxis dependentAxis showGrid fixLabelOverlap tickFormat={y => getFormattedRateValue(y, metricType)} />
107+
<ChartAxis dependentAxis showGrid fixLabelOverlap tickFormat={y => getFormattedRateValue(y, metricType, t)} />
105108
{showBar && (
106109
<ChartStack>
107110
{topKDatapoints.map((datapoints, idx) => (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export const toHistogramDatapoints = (metric: NamedMetric): ChartDataPoint[] =>
5151
return result;
5252
};
5353

54-
export const chartVoronoi = (legendData: LegendDataItem[], metricType: MetricType) => {
54+
export const chartVoronoi = (legendData: LegendDataItem[], metricType: MetricType, t: TFunction) => {
5555
const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
5656
const tooltipData = legendData.map(item => ({ ...item, name: item.tooltipName }));
5757
return (
5858
<CursorVoronoiContainer
5959
cursorDimension="x"
6060
labels={(dp: { datum: ChartDataPoint }) => {
61-
return dp.datum.y || dp.datum.y === 0 ? getFormattedRateValue(dp.datum.y, metricType) : 'n/a';
61+
return dp.datum.y || dp.datum.y === 0 ? getFormattedRateValue(dp.datum.y, metricType, t) : 'n/a';
6262
}}
6363
labelComponent={<ChartLegendTooltip legendData={tooltipData} title={(datum: ChartDataPoint) => datum.date} />}
6464
mouseFollowTooltips

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
toDatapoints
2626
} from './metrics-helper';
2727
import './metrics-content.css';
28+
import { useTranslation } from 'react-i18next';
2829

2930
export type MetricsTotalContentProps = {
3031
id: string;
@@ -51,6 +52,8 @@ export const MetricsTotalContent: React.FC<MetricsTotalContentProps> = ({
5152
showOutOfScope,
5253
smallerTexts
5354
}) => {
55+
const { t } = useTranslation('plugin__netobserv-plugin');
56+
5457
let filtered = topKMetrics;
5558
if (!showInternal) {
5659
filtered = filtered.filter(m => !m.isInternal);
@@ -96,7 +99,7 @@ export const MetricsTotalContent: React.FC<MetricsTotalContentProps> = ({
9699
<Chart
97100
themeColor={ChartThemeColor.multiUnordered}
98101
ariaTitle={title}
99-
containerComponent={chartVoronoi(legendData, metricType)}
102+
containerComponent={chartVoronoi(legendData, metricType, t)}
100103
legendData={legendData}
101104
legendOrientation="horizontal"
102105
legendPosition="bottom-left"
@@ -116,7 +119,12 @@ export const MetricsTotalContent: React.FC<MetricsTotalContentProps> = ({
116119
}}
117120
>
118121
<ChartAxis fixLabelOverlap />
119-
<ChartAxis dependentAxis showGrid fixLabelOverlap tickFormat={y => getFormattedRateValue(y, metricType)} />
122+
<ChartAxis
123+
dependentAxis
124+
showGrid
125+
fixLabelOverlap
126+
tickFormat={y => getFormattedRateValue(y, metricType, t)}
127+
/>
120128
<ChartStack>
121129
{topKDatapoints.map((datapoints, idx) => (
122130
<ChartBar name={`bar-${idx}`} key={`bar-${idx}`} data={datapoints} />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,14 @@ export const StatDonut: React.FC<StatDonutProps> = ({
110110
//animate={true}
111111
width={dimensions.width}
112112
height={dimensions.height}
113-
data={sliced.map(m => ({ x: `${m.fullName}: ${getFormattedRateValue(m.value, metricType)}`, y: m.value }))}
113+
data={sliced.map(m => ({ x: `${m.fullName}: ${getFormattedRateValue(m.value, metricType, t)}`, y: m.value }))}
114114
padding={{
115115
bottom: 20,
116116
left: 20,
117117
right: 400,
118118
top: 20
119119
}}
120-
title={`${getFormattedRateValue(total, metricType)}`}
120+
title={`${getFormattedRateValue(total, metricType, t)}`}
121121
subTitle={t('Total')}
122122
/>
123123
</div>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,41 +59,41 @@ export const ElementPanelStats: React.FC<{
5959
<Text id="metrics-stats-in">{isEdge ? t('A -> B') : t('In')}</Text>
6060
</FlexItem>
6161
<FlexItem>
62-
<Text id="metrics-stats-avg-in">{getFormattedValue(averageIn, metricType, 'avg')}</Text>
62+
<Text id="metrics-stats-avg-in">{getFormattedValue(averageIn, metricType, 'avg', t)}</Text>
6363
</FlexItem>
6464
<FlexItem>
65-
<Text id="metrics-stats-latest-in">{getFormattedValue(latestIn, metricType, 'last')}</Text>
65+
<Text id="metrics-stats-latest-in">{getFormattedValue(latestIn, metricType, 'last', t)}</Text>
6666
</FlexItem>
6767
<FlexItem>
68-
<Text id="metrics-stats-total-in">{getFormattedValue(totalIn, metricType, 'sum')}</Text>
68+
<Text id="metrics-stats-total-in">{getFormattedValue(totalIn, metricType, 'sum', t)}</Text>
6969
</FlexItem>
7070
</Flex>
7171
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
7272
<FlexItem>
7373
<Text id="metrics-stats-out">{isEdge ? t('B -> A') : t('Out')}</Text>
7474
</FlexItem>
7575
<FlexItem>
76-
<Text id="metrics-stats-avg-out">{getFormattedValue(averageOut, metricType, 'avg')}</Text>
76+
<Text id="metrics-stats-avg-out">{getFormattedValue(averageOut, metricType, 'avg', t)}</Text>
7777
</FlexItem>
7878
<FlexItem>
79-
<Text id="metrics-stats-latest-out">{getFormattedValue(latestOut, metricType, 'last')}</Text>
79+
<Text id="metrics-stats-latest-out">{getFormattedValue(latestOut, metricType, 'last', t)}</Text>
8080
</FlexItem>
8181
<FlexItem>
82-
<Text id="metrics-stats-total-out">{getFormattedValue(totalOut, metricType, 'sum')}</Text>
82+
<Text id="metrics-stats-total-out">{getFormattedValue(totalOut, metricType, 'sum', t)}</Text>
8383
</FlexItem>
8484
</Flex>
8585
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
8686
<FlexItem>
8787
<Text id="metrics-stats-both">{t('Both')}</Text>
8888
</FlexItem>
8989
<FlexItem>
90-
<Text id="metrics-stats-avg-both">{getFormattedValue(averageBoth, metricType, 'avg')}</Text>
90+
<Text id="metrics-stats-avg-both">{getFormattedValue(averageBoth, metricType, 'avg', t)}</Text>
9191
</FlexItem>
9292
<FlexItem>
93-
<Text id="metrics-stats-latest-both">{getFormattedValue(latestBoth, metricType, 'last')}</Text>
93+
<Text id="metrics-stats-latest-both">{getFormattedValue(latestBoth, metricType, 'last', t)}</Text>
9494
</FlexItem>
9595
<FlexItem>
96-
<Text id="metrics-stats-total-both">{getFormattedValue(totalBoth, metricType, 'sum')}</Text>
96+
<Text id="metrics-stats-total-both">{getFormattedValue(totalBoth, metricType, 'sum', t)}</Text>
9797
</FlexItem>
9898
</Flex>
9999
</Flex>

‎web/src/components/query-summary/__tests__/flows-query-summary.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('<FlowsQuerySummary />', () => {
3030
const wrapper = mount(<FlowsQuerySummary {...mocks} />);
3131
expect(wrapper.find('#flowsCount').last().text()).toBe('3 flows');
3232
expect(wrapper.find('#bytesCount').last().text()).toBe('161 kB');
33-
expect(wrapper.find('#packetsCount').last().text()).toBe('1100 packets');
33+
expect(wrapper.find('#packetsCount').last().text()).toBe('1 kP');
3434
expect(wrapper.find('#bpsCount').last().text()).toBe('538 Bps');
3535
expect(wrapper.find('#lastRefresh').last().text()).toBe(now.toLocaleTimeString());
3636
});

‎web/src/components/query-summary/flows-query-summary.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { rangeToSeconds, TimeRange } from '../../utils/datetime';
55
import { Record } from '../../api/ipfix';
66
import { InfoCircleIcon } from '@patternfly/react-icons';
77
import './query-summary.css';
8-
import { byteFormat, byteRateFormat } from '../../utils/format';
8+
import { valueFormat } from '../../utils/format';
99
import { Stats } from '../../api/loki';
1010
import _ from 'lodash';
1111

@@ -32,7 +32,7 @@ export const FlowsQuerySummaryContent: React.FC<{
3232
<FlexItem>
3333
<Tooltip content={<Text component={TextVariants.p}>{t('Filtered sum of bytes')}</Text>}>
3434
<Text id="bytesCount" component={TextVariants.p}>
35-
{byteFormat(bytes, 0, limitReached)}
35+
{valueFormat(bytes, 0, t('B'), limitReached)}
3636
</Text>
3737
</Tooltip>
3838
</FlexItem>
@@ -41,7 +41,7 @@ export const FlowsQuerySummaryContent: React.FC<{
4141
<FlexItem>
4242
<Tooltip content={<Text component={TextVariants.p}>{t('Filtered sum of packets')}</Text>}>
4343
<Text id="packetsCount" component={TextVariants.p}>
44-
{`${packets}${limitReached ? '+' : ''} ${t('packets')}`}
44+
{valueFormat(packets, 0, t('P'), limitReached)}
4545
</Text>
4646
</Tooltip>
4747
</FlexItem>
@@ -50,7 +50,7 @@ export const FlowsQuerySummaryContent: React.FC<{
5050
<FlexItem>
5151
<Tooltip content={<Text component={TextVariants.p}>{t('Filtered average speed')}</Text>}>
5252
<Text id="bpsCount" component={TextVariants.p}>
53-
{byteRateFormat(bytes / rangeInSeconds, 2, limitReached)}
53+
{valueFormat(bytes / rangeInSeconds, 2, t('Bps'), limitReached)}
5454
</Text>
5555
</Tooltip>
5656
</FlexItem>
@@ -81,7 +81,7 @@ export const FlowsQuerySummaryContent: React.FC<{
8181
<FlexItem>
8282
<Tooltip content={<Text component={TextVariants.p}>{t('Filtered flows count')}</Text>}>
8383
<Text id="flowsCount" component={TextVariants.p}>
84-
{`${flows!.length}${limitReached ? '+' : ''} ${t('flows')}`}
84+
{valueFormat(flows!.length, 0, t('flows'), limitReached)}
8585
</Text>
8686
</Tooltip>
8787
</FlexItem>

‎web/src/components/query-summary/metrics-query-summary.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import _ from 'lodash';
33
import { useTranslation } from 'react-i18next';
44
import { Card, Flex, FlexItem, Text, TextVariants, Tooltip } from '@patternfly/react-core';
5-
import { byteFormat, byteRateFormat } from '../../utils/format';
5+
import { valueFormat } from '../../utils/format';
66
import { TopologyMetrics } from '../../api/loki';
77
import { MetricType } from '../../model/flow-query';
88
import './query-summary.css';
@@ -35,11 +35,11 @@ export const MetricsQuerySummaryContent: React.FC<{
3535
const textAbs = appMetrics ? t('Filtered sum of top-k bytes / filtered total bytes') : t('Filtered sum of bytes');
3636
const textRate = appMetrics ? t('Filtered top-k byte rate / filtered total byte rate') : t('Filtered byte rate');
3737
const valAbs = appMetrics
38-
? byteFormat(absSum, 1) + ' / ' + byteFormat(appMetrics.stats.total, 1)
39-
: byteFormat(absSum, 1);
38+
? valueFormat(absSum, 1, t('B')) + ' / ' + valueFormat(appMetrics.stats.total, 1, t('B'))
39+
: valueFormat(absSum, 1, t('B'));
4040
const valRate = appMetrics
41-
? byteRateFormat(rateSum, 2) + ' / ' + byteRateFormat(appMetrics.stats.avg, 2)
42-
: byteRateFormat(rateSum, 2);
41+
? valueFormat(rateSum, 2, t('Bps')) + ' / ' + valueFormat(appMetrics.stats.avg, 2, t('Bps'))
42+
: valueFormat(rateSum, 2, t('Bps'));
4343
return (
4444
<>
4545
<FlexItem>

0 commit comments

Comments
 (0)