Vsock interface can be configured

The vsock facilitates communication between virtual machines and the host they are running on independent of virtual machine network configuration. Fixes https://issues.redhat.com/browse/COCKPIT-894
cockpit-project · May 16, 2023 · c27056c · c27056c
1 parent c9d5daa
commit c27056c
Show file tree

Hide file tree

Showing 11 changed files with 572 additions and 7 deletions.
diff --git a/src/components/vm/overview/firmware.jsx b/src/components/vm/overview/firmware.jsx
@@ -28,7 +28,7 @@ import { useDialogs, DialogsContext } from 'dialogs.jsx';
 
 import { ModalError } from 'cockpit-components-inline-notification.jsx';
 import { domainSetOSFirmware, domainCanInstall } from "../../../libvirtApi/domain.js";
-import { supportsUefiXml, labelForFirmwarePath } from './helpers.js';
+import { supportsUefiXml, labelForFirmwarePath } from './helpers.jsx';
 
 const _ = cockpit.gettext;
 

diff --git a/src/components/vm/overview/helpers.js → src/components/vm/overview/helpers.jsx b/src/components/vm/overview/helpers.js → src/components/vm/overview/helpers.jsx
@@ -16,12 +16,33 @@
  * You should have received a copy of the GNU Lesser General Public License
  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  */
-
+import React from 'react';
 import cockpit from 'cockpit';
 
+import { CodeBlock, CodeBlockCode } from "@patternfly/react-core/dist/esm/components/CodeBlock";
+import { FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex";
+
 const _ = cockpit.gettext;
 
 export const WATCHDOG_INFO_MESSAGE = _("Watchdogs act when systems stop responding. To use this virtual watchdog device, the guest system also needs to have an additional driver and a running watchdog service.");
+export const VSOCK_INFO_MESSAGE = _("Virtual socket support enables communication between the host and guest over a socket. It still requires special vsock-aware software to communicate over the socket.");
+export const SOCAT_EXAMPLE_HEADER = _("An example of vsock-aware software is socat");
+export const SOCAT_EXAMPLE = (
+    <>
+        <FlexItem>
+            {_("On the host")}
+            <CodeBlock>
+                <CodeBlockCode>socat VSOCK-LISTEN:1234 VSOCK-CONNECT:[vsock_identifier]:1234</CodeBlockCode>
+            </CodeBlock>
+        </FlexItem>
+        <FlexItem>
+            {_("Inside the VM")}
+            <CodeBlock>
+                <CodeBlockCode>nc --vsock -l 1234</CodeBlockCode>
+            </CodeBlock>
+        </FlexItem>
+    </>
+);
 
 export function labelForFirmwarePath(path, guest_arch) {
     /* Copied from virt-manager code:

diff --git a/src/components/vm/overview/vmOverviewCard.jsx b/src/components/vm/overview/vmOverviewCard.jsx
@@ -20,10 +20,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cockpit from 'cockpit';
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { Icon } from "@patternfly/react-core/dist/esm/components/Icon";
 import { Text, TextVariants } from "@patternfly/react-core/dist/esm/components/Text";
 import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
 import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex";
+import { Popover } from "@patternfly/react-core/dist/esm/components/Popover";
 import { Switch } from "@patternfly/react-core/dist/esm/components/Switch";
 import { DialogsContext } from 'dialogs.jsx';
 import { HelpIcon } from '@patternfly/react-icons';
@@ -41,10 +43,16 @@ import { BootOrderLink } from './bootOrder.jsx';
 import { FirmwareLink } from './firmware.jsx';
 import { WatchdogLink } from './watchdog.jsx';
 import { needsShutdownCpuModel, NeedsShutdownTooltip, needsShutdownVcpu } from '../../common/needsShutdown.jsx';
+import { VsockLink } from './vsock.jsx';
 import { StateIcon } from '../../common/stateIcon.jsx';
 import { domainChangeAutostart, domainGet } from '../../../libvirtApi/domain.js';
 import store from '../../../store.js';
-import { WATCHDOG_INFO_MESSAGE } from './helpers.js';
+import {
+    SOCAT_EXAMPLE,
+    SOCAT_EXAMPLE_HEADER,
+    VSOCK_INFO_MESSAGE,
+    WATCHDOG_INFO_MESSAGE,
+} from './helpers.jsx';
 
 import '../../common/overviewCard.css';
 
@@ -92,7 +100,7 @@ class VmOverviewCard extends React.Component {
     }
 
     render() {
-        const { vm, nodeDevices, libvirtVersion } = this.props;
+        const { vm, vms, nodeDevices, libvirtVersion } = this.props;
         const idPrefix = vmId(vm.name);
 
         const autostart = (
@@ -216,6 +224,38 @@ class VmOverviewCard extends React.Component {
                                 <WatchdogLink vm={vm} idPrefix={idPrefix} />
                             </DescriptionListDescription>
                         </DescriptionListGroup>
+
+                        <DescriptionListGroup>
+                            <Flex spaceItems={{ default: 'spaceItemsXs' }} alignItems={{ default: 'alignItemsCenter' }}>
+                                <FlexItem>
+                                    <DescriptionListTerm>
+                                        {_("Vsock")}
+                                    </DescriptionListTerm>
+                                </FlexItem>
+                                <FlexItem>
+                                    <Popover alertSeverityVariant="info"
+                                        position="right"
+                                        headerContent={_("vsock requires special software")}
+                                        bodyContent={VSOCK_INFO_MESSAGE}
+                                        footerContent={
+                                            <Flex direction={{ default: 'column' }}>
+                                                <FlexItem>{SOCAT_EXAMPLE_HEADER}</FlexItem>
+                                                {SOCAT_EXAMPLE}
+                                            </Flex>
+                                        }
+                                        hasAutoWidth>
+                                        <button onClick={e => e.preventDefault()} className="pf-c-form__group-label-help">
+                                            <Icon className="overview-icon" status="info">
+                                                <HelpIcon noVerticalAlign />
+                                            </Icon>
+                                        </button>
+                                    </Popover>
+                                </FlexItem>
+                            </Flex>
+                            <DescriptionListDescription id={`${idPrefix}-vsock`}>
+                                <VsockLink vm={vm} vms={vms} idPrefix={idPrefix} infoMessage={VSOCK_INFO_MESSAGE} socatMessage={SOCAT_EXAMPLE} />
+                            </DescriptionListDescription>
+                        </DescriptionListGroup>
                     </DescriptionList>
                 </FlexItem>
                 <FlexItem>
@@ -246,6 +286,7 @@ class VmOverviewCard extends React.Component {
 
 VmOverviewCard.propTypes = {
     vm: PropTypes.object.isRequired,
+    vms: PropTypes.array.isRequired,
     config: PropTypes.object.isRequired,
     libvirtVersion: PropTypes.number.isRequired,
     nodeDevices: PropTypes.array.isRequired,