Skip to content

Commit 20359f1

Browse files
jpinsonneaujpinsonneau
committed
improve array display
1 parent fcfd1da commit 20359f1

File tree

4 files changed

+59
-20
lines changed

4 files changed

+59
-20
lines changed

‎mocks/loki/flow_records.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"values": [
1717
[
1818
"1708011867120999936",
19-
"{\"SrcK8S_Name\":\"ip-10-0-1-7.ec2.internal\",\"Bytes\":66,\"TimeFlowRttNs\":10000,\"Packets\":1,\"Interfaces\":[\"br-ex\",\"test\"],\"SrcMac\":\"02:27:A1:A8:84:B9\",\"Proto\":1,\"SrcK8S_HostIP\":\"10.0.1.7\",\"SrcK8S_HostName\":\"ip-10-0-1-7.ec2.internal\",\"Flags\":16,\"DnsErrno\":0,\"TimeFlowStartMs\":1708011867121,\"TimeReceived\":1708011867,\"DstAddr\":\"10.0.1.140\",\"Etype\":2048,\"SrcPort\":50104,\"AgentIP\":\"10.0.1.7\",\"SrcK8S_OwnerType\":\"Node\",\"Dscp\":0,\"TimeFlowEndMs\":1708011867121,\"IfDirections\":[\"1\",\"0\"],\"SrcAddr\":\"10.0.1.7\",\"DstMac\":\"02:7B:32:68:BE:65\",\"DstPort\":443,\"IcmpType\":3,\"IcmpCode\":0}"
19+
"{\"SrcK8S_Name\":\"ip-10-0-1-7.ec2.internal\",\"Bytes\":66,\"TimeFlowRttNs\":10000,\"Packets\":1,\"Interfaces\":[\"br-ex\",\"test1\",\"test2\",\"test3\",\"test4\",\"test5\"],\"SrcMac\":\"02:27:A1:A8:84:B9\",\"Proto\":1,\"SrcK8S_HostIP\":\"10.0.1.7\",\"SrcK8S_HostName\":\"ip-10-0-1-7.ec2.internal\",\"Flags\":16,\"DnsErrno\":0,\"TimeFlowStartMs\":1708011867121,\"TimeReceived\":1708011867,\"DstAddr\":\"10.0.1.140\",\"Etype\":2048,\"SrcPort\":50104,\"AgentIP\":\"10.0.1.7\",\"SrcK8S_OwnerType\":\"Node\",\"Dscp\":0,\"TimeFlowEndMs\":1708011867121,\"IfDirections\":[\"1\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"SrcAddr\":\"10.0.1.7\",\"DstMac\":\"02:7B:32:68:BE:65\",\"DstPort\":443,\"IcmpType\":3,\"IcmpCode\":0}"
2020
],
2121
[
2222
"1708011867120999936",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"Add Namespace, Owner or Resource filters (which use indexed fields), or decrease limit / range, to improve the query performance": "Add Namespace, Owner or Resource filters (which use indexed fields), or decrease limit / range, to improve the query performance",
3737
"Add more filters or decrease limit / range to improve the query performance": "Add more filters or decrease limit / range to improve the query performance",
3838
"Unable to get {{item}}": "Unable to get {{item}}",
39+
"more": "more",
3940
"DNS Error": "DNS Error",
4041
"Namespace": "Namespace",
4142
"Show related documentation": "Show related documentation",

‎web/src/components/drawer/record/record-field.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,19 @@
3333
gap: .3rem;
3434
}
3535

36+
.record-field-flex-container .flowdirints {
37+
flex-direction: column !important;
38+
}
39+
40+
.record-field-flex-container .flowdirints > div {
41+
width: 100%;
42+
}
43+
44+
.side-by-side {
45+
padding: 0 !important;
46+
margin: 0 !important;
47+
}
48+
3649
.record-field-flex {
3750
align-self: center;
3851
}
@@ -59,7 +72,6 @@
5972
.record-field-flex-container.s,
6073
.record-field-flex-container.m,
6174
.record-field-flex-container.l {
62-
flex-direction: column;
6375
}
6476

6577
.record-field-flex-container.s {

‎web/src/components/drawer/record/record-field.tsx‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export type RecordFieldFilter = {
2424
isDelete: boolean;
2525
};
2626

27+
export const MAX_ARRAY_INDEX = 2;
28+
2729
export type FlexValue = 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
2830
export type FlexWrapValue = 'wrap' | 'wrapReverse' | 'nowrap';
2931

@@ -80,6 +82,10 @@ export const RecordField: React.FC<RecordFieldProps> = ({
8082
return <Text className="record-field-flex text-muted record-field-value">{t('n/a')}</Text>;
8183
};
8284

85+
const moreText = (count: number) => {
86+
return <Text className="record-field-flex record-field-value">{`${count} ${t('more')}...`}</Text>;
87+
};
88+
8389
const emptyDnsErrorText = () => {
8490
return emptyText(
8591
flow.fields.DnsErrno
@@ -215,17 +221,27 @@ export const RecordField: React.FC<RecordFieldProps> = ({
215221
);
216222
};
217223

218-
const nthContainer = (children: (JSX.Element | undefined)[], asChild = true, childIcon = true, forcedSize?: Size) => {
224+
const nthContainer = (
225+
children: (JSX.Element | undefined)[],
226+
asChild = true,
227+
childIcon = true,
228+
truncate?: boolean,
229+
forcedSize?: Size,
230+
className = ''
231+
) => {
219232
return (
220-
<Flex className={`record-field-flex-container ${forcedSize || size}`} flex={{ default: 'flex_1' }}>
221-
{children.map((c, i) => {
222-
const child = c ? c : emptyText();
223-
if (i > 0 && asChild && childIcon) {
224-
const arrow = <span className="child-arrow">{'↪'}</span>;
225-
return sideBySideContainer(arrow, child, 'flexNone', 'flex_1', 'nowrap');
226-
}
227-
return child;
228-
})}
233+
<Flex className={`record-field-flex-container ${forcedSize || size} ${className}`} flex={{ default: 'flex_1' }}>
234+
{children
235+
.filter((_c, i) => !truncate || i < MAX_ARRAY_INDEX)
236+
.map((c, i) => {
237+
const child = c ? c : emptyText();
238+
if (i > 0 && asChild && childIcon) {
239+
const arrow = <span className="child-arrow">{'↪'}</span>;
240+
return sideBySideContainer(arrow, child, 'flexNone', 'flex_1', 'nowrap');
241+
}
242+
return child;
243+
})}
244+
{truncate && children.length > MAX_ARRAY_INDEX && moreText(children.length - MAX_ARRAY_INDEX)}
229245
</Flex>
230246
);
231247
};
@@ -237,7 +253,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
237253
childIcon = true,
238254
forcedSize?: Size
239255
) => {
240-
return nthContainer([child1, child2], asChild, childIcon, forcedSize);
256+
return nthContainer([child1, child2], asChild, childIcon, false, forcedSize);
241257
};
242258

243259
const sideBySideContainer = (
@@ -249,8 +265,12 @@ export const RecordField: React.FC<RecordFieldProps> = ({
249265
) => {
250266
return (
251267
<Flex direction={{ default: 'row' }} flex={{ default: 'flex_1' }} flexWrap={{ default: wrap }}>
252-
<FlexItem flex={{ default: leftFlex }}>{leftElement || emptyText()}</FlexItem>
253-
<FlexItem flex={{ default: rightFlex }}>{rightElement || emptyText()}</FlexItem>
268+
<FlexItem className="side-by-side" flex={{ default: leftFlex }}>
269+
{leftElement || emptyText()}
270+
</FlexItem>
271+
<FlexItem className="side-by-side" flex={{ default: rightFlex }}>
272+
{rightElement || emptyText()}
273+
</FlexItem>
254274
</Flex>
255275
);
256276
};
@@ -284,7 +304,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
284304
);
285305
};
286306

287-
const content = (c: Column) => {
307+
const content = (c: Column, isTable: boolean) => {
288308
if (!c.value) {
289309
// Value function not configured
290310
return emptyText();
@@ -416,6 +436,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
416436
value.map(dir => simpleTextWithTooltip(getDirectionDisplayString(String(dir) as FlowDirection, t))),
417437
true,
418438
false,
439+
isTable,
419440
multiLineSize
420441
);
421442
}
@@ -427,6 +448,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
427448
value.map(iName => simpleTextWithTooltip(String(iName))),
428449
true,
429450
false,
451+
isTable,
430452
multiLineSize
431453
);
432454
}
@@ -437,7 +459,8 @@ export const RecordField: React.FC<RecordFieldProps> = ({
437459
return nthContainer(
438460
value.map(iName => simpleTextWithTooltip(iName !== '' ? String(iName) : t('None'))),
439461
true,
440-
false
462+
false,
463+
isTable
441464
);
442465
}
443466
return singleContainer(simpleTextWithTooltip(String(value)));
@@ -463,7 +486,10 @@ export const RecordField: React.FC<RecordFieldProps> = ({
463486
)
464487
),
465488
true,
466-
false
489+
false,
490+
isTable,
491+
undefined,
492+
'flowdirints'
467493
);
468494
} else {
469495
return singleContainer(emptyText(t('Invalid data provided. Check JSON for details.')));
@@ -587,7 +613,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
587613
return filter ? (
588614
<Flex className={`record-field-flex-container`} flex={{ default: 'flex_1' }}>
589615
<FlexItem className={'record-field-flex'} flex={{ default: 'flex_1' }}>
590-
{content(column)}
616+
{content(column, false)}
591617
</FlexItem>
592618
<FlexItem>
593619
<Tooltip
@@ -616,7 +642,7 @@ export const RecordField: React.FC<RecordFieldProps> = ({
616642
</FlexItem>
617643
</Flex>
618644
) : (
619-
content(column)
645+
content(column, true)
620646
);
621647
};
622648

0 commit comments

Comments
 (0)