Move IP address field to DescriptionList

cockpit-project · Jun 26, 2023 · 1628c99 · 1628c99
1 parent 469e450
commit 1628c99
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/components/vm/nics/vmNicsCard.jsx b/src/components/vm/nics/vmNicsCard.jsx
@@ -314,14 +314,24 @@ export class VmNetworkTab extends React.Component {
                         return _("Unknown");
                     } else {
                         return (
-                            <>
-                                {ips.inet && <div id={`${id}-network-${networkId}-ipv4-address`}>
-                                    {'inet ' + ips.inet}
-                                </div>}
-                                {ips.inet6 && <div id={`${id}-network-${networkId}-ipv6-address`}>
-                                    {'inet6 ' + ips.inet6}
-                                </div>}
-                            </>
+                            <DescriptionList isHorizontal isFluid>
+                                <DescriptionListGroup>
+                                    <DescriptionListTerm>
+                                        {_("inet")}
+                                    </DescriptionListTerm>
+                                    <DescriptionListDescription id={`${id}-network-${networkId}-ipv4-address`}>
+                                        {ips.inet}
+                                    </DescriptionListDescription>
+                                </DescriptionListGroup>
+                                <DescriptionListGroup>
+                                    <DescriptionListTerm>
+                                        {_("inet6")}
+                                    </DescriptionListTerm>
+                                    <DescriptionListDescription id={`${id}-network-${networkId}-ipv6-address`}>
+                                        {ips.inet6}
+                                    </DescriptionListDescription>
+                                </DescriptionListGroup>
+                            </DescriptionList>
                         );
                     }
                 },