Skip to content

Commit 20aaf34

Browse files
illumeillume
authored
Merge pull request #4195 from skoeva/align-tooltips
frontend: Fix UI papercuts
2 parents 3fdf114 + 332316b commit 20aaf34

File tree

10 files changed

+175
-72
lines changed

10 files changed

+175
-72
lines changed

‎frontend/src/components/namespace/List.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { useCluster } from '../../lib/k8s';
2121
import Namespace from '../../lib/k8s/namespace';
2222
import { StatusLabel } from '../common/Label';
2323
import Link from '../common/Link';
24+
import { MetadataDictGrid } from '../common/Resource';
2425
import ResourceListView from '../common/Resource/ResourceListView';
2526
import {
2627
ResourceTableFromResourceClassProps,
@@ -104,6 +105,17 @@ export default function NamespacesList() {
104105
getValue: ns => ns.status.phase,
105106
render: makeStatusLabel,
106107
},
108+
{
109+
id: 'labels',
110+
label: t('translation|Labels'),
111+
gridTemplate: 'auto',
112+
getValue: ns =>
113+
Object.entries(ns.metadata.labels || {})
114+
.map(([k, v]) => `${k}=${v}`)
115+
.join(', '),
116+
render: ns =>
117+
ns.metadata.labels ? <MetadataDictGrid dict={ns.metadata.labels} /> : null,
118+
},
107119
'age',
108120
],
109121
} satisfies ResourceTableFromResourceClassProps<typeof Namespace>;

‎frontend/src/components/namespace/__snapshots__/NamespaceList.Regular.stories.storyshot‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@
163163
</div>
164164
</div>
165165
<table
166-
class="MuiTable-root css-1ca5o47-MuiTable-root"
166+
class="MuiTable-root css-126y9uq-MuiTable-root"
167167
>
168168
<thead
169169
class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -330,6 +330,61 @@
330330
/>
331331
</div>
332332
</th>
333+
<th
334+
aria-sort="none"
335+
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-c2oilo-MuiTableCell-root"
336+
colspan="1"
337+
data-can-sort="true"
338+
data-index="-1"
339+
scope="col"
340+
>
341+
<div
342+
class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
343+
>
344+
<div
345+
class="Mui-TableHeadCell-Content-Labels MuiBox-root css-68rqdf"
346+
>
347+
<div
348+
class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-lapokc"
349+
>
350+
Labels
351+
</div>
352+
<span
353+
aria-label="Sort by Labels ascending"
354+
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
355+
data-mui-internal-clone-element="true"
356+
>
357+
<span
358+
aria-label="Sort by Labels ascending"
359+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
360+
role="button"
361+
tabindex="0"
362+
>
363+
<svg
364+
aria-hidden="true"
365+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
366+
data-testid="SyncAltIcon"
367+
focusable="false"
368+
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
369+
viewBox="0 0 24 24"
370+
>
371+
<path
372+
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
373+
/>
374+
</svg>
375+
</span>
376+
<span
377+
class="MuiBadge-badge MuiBadge-standard MuiBadge-invisible MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightCircular MuiBadge-overlapCircular css-dniquu-MuiBadge-badge"
378+
>
379+
0
380+
</span>
381+
</span>
382+
</div>
383+
<div
384+
class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
385+
/>
386+
</div>
387+
</th>
333388
<th
334389
aria-sort="ascending"
335390
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
@@ -467,6 +522,9 @@
467522
Active
468523
</span>
469524
</td>
525+
<td
526+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-qiy7fe-MuiTableCell-root"
527+
/>
470528
<td
471529
class="MuiTableCell-root MuiTableCell-alignRight MuiTableCell-sizeMedium css-14i1ub9-MuiTableCell-root"
472530
>

‎frontend/src/components/networkpolicy/List.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
*/
1616

1717
import { useTranslation } from 'react-i18next';
18+
import { matchExpressionSimplifier, matchLabelsSimplifier } from '../../lib/k8s';
1819
import NetworkPolicy from '../../lib/k8s/networkpolicy';
19-
import LabelListItem from '../common/LabelListItem';
20+
import { MatchExpressions } from '../common/Resource/MatchExpressions';
2021
import ResourceListView from '../common/Resource/ResourceListView';
2122

2223
export function NetworkPolicyList() {
@@ -52,22 +53,26 @@ export function NetworkPolicyList() {
5253
gridTemplate: 'auto',
5354
label: t('Pod Selector'),
5455
getValue: networkpolicy => {
55-
const podSelector = networkpolicy.jsonData.spec.podSelector;
56-
return podSelector.matchLabels
57-
? Object.keys(podSelector.matchLabels)
58-
.map(key => `${key}=${podSelector.matchLabels[key]}`)
59-
.join(', ')
60-
: null;
56+
const podSelector = networkpolicy.jsonData.spec.podSelector || {};
57+
const { matchLabels, matchExpressions } = podSelector;
58+
const labels = matchLabelsSimplifier(matchLabels, true);
59+
const expressions = matchExpressionSimplifier(matchExpressions);
60+
const parts = [
61+
...(Array.isArray(labels) ? labels : []),
62+
...(Array.isArray(expressions) ? expressions : []),
63+
];
64+
return parts.join(', ');
6165
},
6266
render: networkpolicy => {
63-
const podSelector = networkpolicy.jsonData.spec.podSelector;
64-
return podSelector.matchLabels ? (
65-
<LabelListItem
66-
labels={Object.keys(podSelector.matchLabels).map(
67-
key => `${key}=${podSelector.matchLabels[key]}`
68-
)}
69-
/>
70-
) : null;
67+
const podSelector = networkpolicy.jsonData.spec.podSelector || {};
68+
const { matchLabels, matchExpressions } = podSelector;
69+
if (!matchLabels && !matchExpressions) {
70+
return null;
71+
}
72+
73+
return (
74+
<MatchExpressions matchLabels={matchLabels} matchExpressions={matchExpressions} />
75+
);
7176
},
7277
},
7378
'age',

‎frontend/src/components/networkpolicy/__snapshots__/List.Items.stories.storyshot‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -675,13 +675,11 @@
675675
<td
676676
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-s360z4-MuiTableCell-root"
677677
>
678-
<span
679-
aria-label="app=frontend"
680-
class=""
681-
data-mui-internal-clone-element="true"
678+
<p
679+
class="MuiTypography-root MuiTypography-body1 css-cwic1g-MuiTypography-root"
682680
>
683-
app=frontend
684-
</span>
681+
app: frontend
682+
</p>
685683
</td>
686684
<td
687685
class="MuiTableCell-root MuiTableCell-alignRight MuiTableCell-sizeMedium css-14i1ub9-MuiTableCell-root"
@@ -783,13 +781,11 @@
783781
<td
784782
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-s360z4-MuiTableCell-root"
785783
>
786-
<span
787-
aria-label="app=database"
788-
class=""
789-
data-mui-internal-clone-element="true"
784+
<p
785+
class="MuiTypography-root MuiTypography-body1 css-cwic1g-MuiTypography-root"
790786
>
791-
app=database
792-
</span>
787+
app: database
788+
</p>
793789
</td>
794790
<td
795791
class="MuiTableCell-root MuiTableCell-alignRight MuiTableCell-sizeMedium css-14i1ub9-MuiTableCell-root"

‎frontend/src/components/pod/List.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -302,12 +302,16 @@ export function PodListRenderer(props: PodListProps) {
302302
}
303303

304304
return (
305-
<Box display="flex" alignItems="center">
305+
<Box display="flex" alignItems="center" width="100%">
306306
<span style={{ whiteSpace: 'nowrap' }}>{`${aValue} ${aUnit}`}</span>
307307
{tooltipLines.length > 0 && (
308-
<TooltipIcon>
309-
<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines.join('\n')}</span>
310-
</TooltipIcon>
308+
<Box component="span" sx={{ display: 'inline-flex', ml: 'auto' }}>
309+
<TooltipIcon>
310+
<span style={{ whiteSpace: 'pre-line' }}>
311+
{tooltipLines.join('\n')}
312+
</span>
313+
</TooltipIcon>
314+
</Box>
311315
)}
312316
</Box>
313317
);
@@ -350,12 +354,16 @@ export function PodListRenderer(props: PodListProps) {
350354
}
351355

352356
return (
353-
<Box display="flex" alignItems="center">
357+
<Box display="flex" alignItems="center" width="100%">
354358
<span style={{ whiteSpace: 'nowrap' }}>{`${aValue} ${aUnit}`}</span>
355359
{tooltipLines.length > 0 && (
356-
<TooltipIcon>
357-
<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines.join('\n')}</span>
358-
</TooltipIcon>
360+
<Box component="span" sx={{ display: 'inline-flex', ml: 'auto' }}>
361+
<TooltipIcon>
362+
<span style={{ whiteSpace: 'pre-line' }}>
363+
{tooltipLines.join('\n')}
364+
</span>
365+
</TooltipIcon>
366+
</Box>
359367
)}
360368
</Box>
361369
);

‎frontend/src/components/pod/__snapshots__/PodList.Items.stories.storyshot‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1125,7 +1125,7 @@
11251125
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-lm23yi-MuiTableCell-root"
11261126
>
11271127
<div
1128-
class="MuiBox-root css-70qvj9"
1128+
class="MuiBox-root css-7pf6at"
11291129
>
11301130
<span
11311131
style="white-space: nowrap;"
@@ -1138,7 +1138,7 @@
11381138
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-rrz0sj-MuiTableCell-root"
11391139
>
11401140
<div
1141-
class="MuiBox-root css-70qvj9"
1141+
class="MuiBox-root css-7pf6at"
11421142
>
11431143
<span
11441144
style="white-space: nowrap;"

‎frontend/src/components/replicaset/List.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import { useTranslation } from 'react-i18next';
1818
import { KubeContainer } from '../../lib/k8s/cluster';
1919
import ReplicaSet from '../../lib/k8s/replicaSet';
20+
import { MetadataDictGrid } from '../common/Resource';
2021
import ResourceListView from '../common/Resource/ResourceListView';
2122
import LightTooltip from '../common/Tooltip/TooltipLight';
2223

@@ -100,14 +101,8 @@ export default function ReplicaSetList() {
100101
label: t('Selector'),
101102
getValue: replicaSet => replicaSet.getMatchLabelsList().join(''),
102103
render: replicaSet => {
103-
const selectorText = replicaSet.getMatchLabelsList().join('\n');
104-
return (
105-
selectorText && (
106-
<LightTooltip title={selectorText} interactive>
107-
{selectorText}
108-
</LightTooltip>
109-
)
110-
);
104+
const matchLabels = replicaSet.spec.selector?.matchLabels;
105+
return matchLabels && <MetadataDictGrid dict={matchLabels} />;
111106
},
112107
},
113108
'age',

‎frontend/src/components/replicaset/__snapshots__/List.ReplicaSets.stories.storyshot‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -930,17 +930,29 @@
930930
<td
931931
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13vbnfx-MuiTableCell-root"
932932
>
933-
<span
934-
aria-label="app.kubernetes.io/instance=headlamp-release
935-
app.kubernetes.io/name=headlamp
936-
pod-template-hash=b123456"
937-
class=""
938-
data-mui-internal-clone-element="true"
933+
<div
934+
class="MuiBox-root css-0"
939935
>
940-
app.kubernetes.io/instance=headlamp-release
941-
app.kubernetes.io/name=headlamp
942-
pod-template-hash=b123456
943-
</span>
936+
<div
937+
class="MuiBox-root css-yi3mkw"
938+
>
939+
<p
940+
class="MuiTypography-root MuiTypography-body1 css-1on669h-MuiTypography-root"
941+
>
942+
app.kubernetes.io/instance: headlamp-release
943+
</p>
944+
<p
945+
class="MuiTypography-root MuiTypography-body1 css-1on669h-MuiTypography-root"
946+
>
947+
app.kubernetes.io/name: headlamp
948+
</p>
949+
<p
950+
class="MuiTypography-root MuiTypography-body1 css-1on669h-MuiTypography-root"
951+
>
952+
pod-template-hash: b123456
953+
</p>
954+
</div>
955+
</div>
944956
</td>
945957
<td
946958
class="MuiTableCell-root MuiTableCell-alignRight MuiTableCell-sizeMedium css-14i1ub9-MuiTableCell-root"
@@ -1074,15 +1086,24 @@ pod-template-hash=b123456
10741086
<td
10751087
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13vbnfx-MuiTableCell-root"
10761088
>
1077-
<span
1078-
aria-label="k8s-app=headlamp
1079-
pod-template-hash=a123456"
1080-
class=""
1081-
data-mui-internal-clone-element="true"
1089+
<div
1090+
class="MuiBox-root css-0"
10821091
>
1083-
k8s-app=headlamp
1084-
pod-template-hash=a123456
1085-
</span>
1092+
<div
1093+
class="MuiBox-root css-yi3mkw"
1094+
>
1095+
<p
1096+
class="MuiTypography-root MuiTypography-body1 css-1on669h-MuiTypography-root"
1097+
>
1098+
k8s-app: headlamp
1099+
</p>
1100+
<p
1101+
class="MuiTypography-root MuiTypography-body1 css-1on669h-MuiTypography-root"
1102+
>
1103+
pod-template-hash: a123456
1104+
</p>
1105+
</div>
1106+
</div>
10861107
</td>
10871108
<td
10881109
class="MuiTableCell-root MuiTableCell-alignRight MuiTableCell-sizeMedium css-14i1ub9-MuiTableCell-root"

‎frontend/src/components/service/List.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import { useTranslation } from 'react-i18next';
1818
import Service from '../../lib/k8s/service';
1919
import LabelListItem from '../common/LabelListItem';
20+
import { MetadataDictGrid } from '../common/Resource';
2021
import ResourceListView from '../common/Resource/ResourceListView';
2122

2223
export default function ServiceList() {
@@ -47,7 +48,7 @@ export default function ServiceList() {
4748
id: 'externalIP',
4849
label: t('External IP'),
4950
gridTemplate: 'min-content',
50-
getValue: service => service.getExternalAddresses(),
51+
getValue: service => service.getExternalAddresses() || '-',
5152
},
5253
{
5354
id: 'ports',
@@ -61,7 +62,8 @@ export default function ServiceList() {
6162
label: t('Selector'),
6263
gridTemplate: 'auto',
6364
getValue: service => service.getSelector().join(', '),
64-
render: service => <LabelListItem labels={service.getSelector()} />,
65+
render: service =>
66+
service.spec.selector ? <MetadataDictGrid dict={service.spec.selector} /> : null,
6567
},
6668
'age',
6769
]}

0 commit comments

Comments
 (0)