@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/DetailsPage/Tables/IntegrityDetails.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {
+  Bullseye,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+
+import { DeviceIntegrityStatus } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import IntegrityStatus from '../../Status/IntegrityStatus';
+import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+
+type IntegrityDetailsProps = {
+  integrity?: DeviceIntegrityStatus;
+};
+
+const IntegrityDetails = ({ integrity }: IntegrityDetailsProps) => {
+  const { t } = useTranslation();
+  const info = integrity?.summary.info;
+  const status = integrity?.summary.status;
+  return info || status ? (
+    <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
+      {status && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
+          <DescriptionListDescription>
+            <IntegrityStatus status={status} />
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+      {info && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t('Details')}</DescriptionListTerm>
+          <DescriptionListDescription>{info}</DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+    </FlightControlDescriptionList>
+  ) : (
+    <Bullseye>{t('No system integrity details found.')}</Bullseye>
+  );
+};
+
+export default IntegrityDetails;

package/src/components/DetailsPage/Tables/SystemdDetailsTable.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Bullseye } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import SystemdStatus from '../../Status/SystemdStatus';
+
+interface DeviceSystemdUnitStatus {
+  name: string;
+  status: string;
+}
+
+type SystemdDetailsTableProps = {
+  matchPatterns?: Array<string>;
+  systemdUnits: DeviceSystemdUnitStatus[] | undefined;
+};
+
+const SystemdDetailsTable = ({ matchPatterns, systemdUnits }: SystemdDetailsTableProps) => {
+  const { t } = useTranslation();
+  const hasPatterns = matchPatterns && matchPatterns.length > 0;
+  const hasUnits = systemdUnits && systemdUnits.length > 0;
+
+  if (!hasPatterns && !hasUnits) {
+    return <Bullseye>{t('No systemd units found')}</Bullseye>;
+  }
+
+  const patterns: Record<string, DeviceSystemdUnitStatus> = {};
+  matchPatterns?.forEach((pattern) => {
+    patterns[pattern] = {
+      name: pattern,
+      status: '',
+    };
+  });
+  systemdUnits?.forEach((unit) => {
+    const name = unit.name;
+    patterns[name] = unit;
+  });
+
+  return (
+    <Table aria-label={t('Device systemd table')}>
+      <Thead>
+        <Tr>
+          <Th>{t('Name')}</Th>
+          <Th modifier="wrap">{t('Status')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {Object.entries(patterns).map(([patternName, systemUnitState]) => {
+          return (
+            <Tr key={patternName}>
+              <Td dataLabel={t('Name')}>{patternName}</Td>
+              <Td dataLabel={t('Status')}>
+                <SystemdStatus status={systemUnitState.status} />
+              </Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </Table>
+  );
+};
+
+export default SystemdDetailsTable;

package/src/components/Device/AddDeviceModal/AddDeviceModal.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  ClipboardCopy,
+  FormGroup,
+  Grid,
+  GridItem,
+  Modal,
+  OrderType,
+  Radio,
+  Stack,
+  StackItem,
+  TextContent,
+  TextList,
+  TextListItem,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import FlightCtlForm from '../../form/FlightCtlForm';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+const AddDeviceModal = ({ onClose }: { onClose: VoidFunction }) => {
+  const { t } = useTranslation();
+  const { qcow2ImgUrl, bootcImgUrl } = useAppContext();
+  const [imgType, setImgType] = React.useState<'bootc' | 'qcow2'>();
+
+  React.useEffect(() => {
+    if (!!bootcImgUrl) {
+      setImgType('bootc');
+    } else if (!!qcow2ImgUrl) {
+      setImgType('qcow2');
+    }
+  }, [qcow2ImgUrl, bootcImgUrl]);
+
+  const actions = [
+    <Button key="close" variant="secondary" onClick={onClose}>
+      {t('Close')}
+    </Button>,
+  ];
+
+  if (imgType === 'qcow2') {
+    actions.unshift(
+      <Button key="download" onClick={() => window.open(qcow2ImgUrl, '_blank')}>
+        {t('Download disk')}
+      </Button>,
+    );
+  }
+  return (
+    <Modal variant="medium" title={t('Add device')} onClose={onClose} isOpen actions={actions}>
+      <Grid hasGutter>
+        <GridItem>
+          <Alert variant="info" isInline title={t('Learn how to build a bootable container image')}>
+            <Button
+              component="a"
+              variant="link"
+              isInline
+              href="https://github.com/flightctl/flightctl/blob/main/docs/user/getting-started.md#building-a-bootable-container-image-including-the-flight-control-agent"
+              target="_blank"
+              icon={<ExternalLinkAltIcon />}
+              iconPosition="end"
+            >
+              {t('View documentation')}
+            </Button>
+          </Alert>
+        </GridItem>
+        <GridItem>
+          <Radio
+            isChecked={imgType === 'bootc'}
+            name="bootc"
+            onChange={(_, checked) => checked && setImgType('bootc')}
+            label={
+              bootcImgUrl ? t('Use a container image (bootc)') : t('Use a container image (bootc) (Not available)')
+            }
+            id="bootc"
+            isDisabled={!bootcImgUrl}
+          />
+          <Radio
+            isChecked={imgType === 'qcow2'}
+            name="qcow2"
+            onChange={(_, checked) => checked && setImgType('qcow2')}
+            label={qcow2ImgUrl ? t('Use a disk image (qcow2)') : t('Use a disk image (qcow2) (Not available)')}
+            id="qcow2"
+            isDisabled={!qcow2ImgUrl}
+          />
+        </GridItem>
+        <GridItem>
+          {imgType === 'bootc' && (
+            <Alert isInline variant="info" title={t('Adding devices instructions')}>
+              <TextContent>
+                <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+                  <TextListItem>{t('Boot you device.')}</TextListItem>
+                  <TextListItem>{t('Ensure that your device has a disk available for installation.')}</TextListItem>
+                  <TextListItem>
+                    {t('Execute the following podman command')}
+                    <ClipboardCopy isReadOnly hoverTip={t('Copy')} clickTip={t('Copied')}>
+                      {`podman run --rm --privileged --pid=host -v /var/lib/containers:/var/lib/containers --security-opt label=type:unconfined_t ${bootcImgUrl} bootc install to-disk /path/to/disk`}
+                    </ClipboardCopy>
+                  </TextListItem>
+                  <TextListItem>{t('Ensure that your device will boot from `/path/to/disk`.')}</TextListItem>
+                  <TextListItem>{t('Reboot the device.')}</TextListItem>
+                  <TextListItem>
+                    {t('Booted device should appear in the devices table. This might take a few minutes.')}
+                  </TextListItem>
+                </TextList>
+              </TextContent>
+            </Alert>
+          )}
+          {imgType === 'qcow2' && (
+            <Stack hasGutter>
+              <StackItem>
+                <Alert isInline variant="info" title={t('Adding devices instructions')}>
+                  <TextContent>
+                    <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+                      <TextListItem>{t('Download the qcow2 disk and use it to boot your device.')}</TextListItem>
+                      <TextListItem>
+                        {t('Booted device should appear in the devices table. This might take a few minutes.')}
+                      </TextListItem>
+                    </TextList>
+                  </TextContent>
+                </Alert>
+              </StackItem>
+              <StackItem>
+                <FlightCtlForm>
+                  <FormGroup label={t('Disk URL')}>
+                    <ClipboardCopy isReadOnly hoverTip={t('Copy')} clickTip={t('Copied')}>
+                      {qcow2ImgUrl}
+                    </ClipboardCopy>
+                  </FormGroup>
+                  <FormGroup label={t('Command to download the disk')}>
+                    <ClipboardCopy isReadOnly hoverTip={t('Copy')} clickTip={t('Copied')}>
+                      {`wget -O disk.qcow2 ${qcow2ImgUrl}`}
+                    </ClipboardCopy>
+                  </FormGroup>
+                </FlightCtlForm>
+              </StackItem>
+            </Stack>
+          )}
+        </GridItem>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default AddDeviceModal;

package/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { useFetch } from '../../../hooks/useFetch';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import DetailsPageActions, { useDeleteAction } from '../../DetailsPage/DetailsPageActions';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+import DeviceDetailsTab from './DeviceDetailsTab';
+import { useTemplateVersion } from '../../../hooks/useTemplateVersion';
+import TerminalTab from './TerminalTab';
+import NavItem from '../../NavItem/NavItem';
+import DeviceStatusDebugModal from './DeviceStatusDebugModal';
+import { getDeviceFleet } from '../../../utils/devices';
+
+const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, never>>) => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams, Routes, Route, Navigate },
+  } = useAppContext();
+  const { deviceId } = useParams() as { deviceId: string };
+  const [device, loading, error, refetch] = useFetchPeriodically<Required<Device>>({ endpoint: `devices/${deviceId}` });
+  const [showDebugInfo, setShowDebugInfo] = React.useState<boolean>(false);
+
+  const [, /* useTv */ tv, loadingTv, errorTv] = useTemplateVersion(device);
+
+  const navigate = useNavigate();
+  const { remove } = useFetch();
+
+  const deviceAlias = device?.metadata.labels?.alias || deviceId;
+
+  const { deleteAction, deleteModal } = useDeleteAction({
+    onDelete: async () => {
+      await remove(`devices/${deviceId}`);
+      navigate(ROUTE.DEVICES);
+    },
+    resourceName: deviceAlias,
+    resourceType: 'device',
+  });
+  const editActionProps = getDeviceFleet(device?.metadata || {})
+    ? {
+        isAriaDisabled: true,
+        tooltipProps: {
+          content: t('Device is bound to a fleet. Its configurations cannot be edited'),
+        },
+      }
+    : undefined;
+
+  return (
+    <DetailsPage
+      loading={loading || loadingTv}
+      error={error}
+      id={deviceId}
+      title={deviceAlias}
+      resourceLink={ROUTE.DEVICES}
+      resourceType="Devices"
+      resourceTypeLabel={t('Devices')}
+      nav={
+        <Nav variant="tertiary">
+          <NavList>
+            <NavItem to="details">{t('Details')}</NavItem>
+            <NavItem to="terminal">{t('Terminal')}</NavItem>
+          </NavList>
+        </Nav>
+      }
+      actions={
+        <DetailsPageActions>
+          <DropdownList>
+            <DropdownItem
+              onClick={() => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceId })}
+              {...editActionProps}
+            >
+              {t('Edit device configurations')}
+            </DropdownItem>
+            {deleteAction}
+            <DropdownItem
+              onClick={() => {
+                setShowDebugInfo(!showDebugInfo);
+              }}
+            >
+              {t('View status debug information')}
+            </DropdownItem>
+          </DropdownList>
+        </DetailsPageActions>
+      }
+    >
+      {device && (
+        <Routes>
+          <Route index element={<Navigate to="details" replace />} />
+          <Route
+            path="details"
+            element={
+              <DeviceDetailsTab device={device} errorTv={errorTv} tv={tv} refetch={refetch}>
+                {children}
+              </DeviceDetailsTab>
+            }
+          />
+          <Route path="terminal" element={<TerminalTab device={device} />} />
+        </Routes>
+      )}
+      {deleteModal}
+      {device && showDebugInfo && (
+        <DeviceStatusDebugModal
+          status={device.status}
+          onClose={() => {
+            setShowDebugInfo(false);
+          }}
+        />
+      )}
+    </DetailsPage>
+  );
+};
+
+export default DeviceDetailsPage;

package/src/components/Device/DeviceDetails/DeviceDetailsTab.css

@@ -0,0 +1,4 @@
+.fctl-device-details-tab__label {
+  font-weight: var(--pf-v5-global--FontWeight--bold, bold);
+  font-size: var(--pf-v5-c-form__label--FontSize, 13px);
+}

package/src/components/Device/DeviceDetails/DeviceDetailsTab.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import {
+  Alert,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { Device, TemplateVersion } from '@flightctl/types';
+import { timeSinceText } from '../../../utils/dates';
+import ApplicationsTable from '../../DetailsPage/Tables/ApplicationsTable';
+import DeviceStatus from '../../Status/DeviceStatus';
+import { useTranslation } from '../../../hooks/useTranslation';
+import EditLabelsForm from '../../modals/EditLabelsModal/EditLabelsForm';
+import ResourceLink from '../../common/ResourceLink';
+import DeviceFleet from './DeviceFleet';
+import DeviceOs from './DeviceOs';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+import SystemdTable from './SystemdTable';
+import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
+import { getErrorMessage } from '../../../utils/error';
+import ApplicationSummaryStatus from '../../Status/ApplicationSummaryStatus';
+import WithHelperText from '../../common/WithHelperText';
+import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
+import DeviceResourceStatus from '../../Status/DeviceResourceStatus';
+
+import './DeviceDetailsTab.css';
+
+type DeviceDetailsTabProps = {
+  device: Required<Device>;
+  refetch: VoidFunction;
+  tv: TemplateVersion | undefined;
+  errorTv: unknown;
+};
+
+const DeviceDetailsTab = ({
+  device,
+  refetch,
+  tv,
+  errorTv,
+  children,
+}: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid hasGutter>
+      {!!errorTv && (
+        <GridItem md={12}>
+          <Alert isInline variant="warning" title={t('Some device details could not be loaded.')}>
+            {getErrorMessage(errorTv)}
+          </Alert>
+        </GridItem>
+      )}
+      <GridItem md={12}>
+        <DetailsPageCard>
+          <DetailsPageCardBody>
+            <Flex alignItems={{ default: 'alignItemsFlexStart' }}>
+              <FlexItem flex={{ default: 'flex_1' }}>
+                <Stack>
+                  <StackItem className="fctl-device-details-tab__label">{t('Name')}</StackItem>
+                </Stack>
+                <StackItem>
+                  <ResourceLink id={device.metadata.name || '-'} />
+                </StackItem>
+              </FlexItem>
+              {!!children && <FlexItem flex={{ default: 'flex_1' }}>{children}</FlexItem>}
+              <FlexItem flex={{ default: 'flex_1' }}>
+                <Stack>
+                  <StackItem className="fctl-device-details-tab__label">{t('Fleet name')}</StackItem>
+                  <StackItem>
+                    <DeviceFleet device={device} />
+                  </StackItem>
+                </Stack>
+              </FlexItem>
+              <FlexItem flex={{ default: 'flex_4' }}>
+                <Stack>
+                  <StackItem className="fctl-device-details-tab__label">{t('Labels')}</StackItem>
+                </Stack>
+                <StackItem>
+                  <EditLabelsForm device={device} onDeviceUpdate={refetch} />
+                </StackItem>
+              </FlexItem>
+            </Flex>
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DetailsPageCard>
+          <CardTitle>{t('System status')}</CardTitle>
+          <DetailsPageCardBody>
+            <FlightControlDescriptionList columnModifier={{ default: '3Col' }}>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <WithHelperText
+                    content={t('Indicates the overall status of application workloads on the device.')}
+                    ariaLabel={t('Application status')}
+                    showLabel
+                  />
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  <ApplicationSummaryStatus statusSummary={device.status?.applicationsSummary} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <WithHelperText
+                    content={t('Indicates the overall status of the device hardware and operating system.')}
+                    ariaLabel={t('Device status')}
+                    showLabel
+                  />{' '}
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  <DeviceStatus deviceStatus={device.status} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <WithHelperText
+                    content={t(
+                      'Indicates whether a system is running the latest target configuration or is updating towards it.',
+                    )}
+                    ariaLabel={t('Update status')}
+                    showLabel
+                  />
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  <SystemUpdateStatus deviceStatus={device.status} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
+                <DescriptionListDescription>{timeSinceText(t, device.status.lastSeen)}</DescriptionListDescription>
+              </DescriptionListGroup>
+            </FlightControlDescriptionList>
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DetailsPageCard>
+          <CardTitle>{t('Resource status')}</CardTitle>
+          <DetailsPageCardBody>
+            <FlightControlDescriptionList columnModifier={{ default: '3Col' }}>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('CPU pressure')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <DeviceResourceStatus device={device} monitorType="cpu" />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Disk pressure')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <DeviceResourceStatus device={device} monitorType="disk" />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Memory pressure')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <DeviceResourceStatus device={device} monitorType="memory" />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </FlightControlDescriptionList>
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DetailsPageCard>
+          <CardTitle>{t('Configurations')}</CardTitle>
+          <DetailsPageCardBody>
+            <FlightControlDescriptionList columnModifier={{ default: '2Col' }}>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('System image (running)')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <DeviceOs desiredOsImage={device.spec?.os?.image} renderedOsImage={device.status?.os?.image} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  {t('Sources ({{size}})', { size: device.spec?.config?.length || 0 })}
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  <RepositorySourceList configs={device.spec.config || []} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </FlightControlDescriptionList>
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DetailsPageCard>
+          <CardTitle>{t('Applications')}</CardTitle>
+          <DetailsPageCardBody>
+            <ApplicationsTable appsStatus={device.status.applications} />
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DetailsPageCard>
+          <CardTitle>{t('System services')}</CardTitle>
+          <DetailsPageCardBody>
+            <SystemdTable device={device} templateVersion={tv} onSystemdUnitsUpdate={refetch} />
+          </DetailsPageCardBody>
+        </DetailsPageCard>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default DeviceDetailsTab;

package/src/components/Device/DeviceDetails/DeviceFleet.css

@@ -0,0 +1,3 @@
+.fctl-device-fleet {
+    white-space: nowrap;
+}

package/src/components/Device/DeviceDetails/DeviceFleet.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Button, List, ListItem, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+
+import { Condition, ConditionType, Device } from '@flightctl/types';
+import { getDeviceFleet } from '../../../utils/devices';
+import { getCondition } from '../../../utils/api';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+
+import './DeviceFleet.css';
+
+const FleetLessDevice = ({ multipleOwnersCondition }: { multipleOwnersCondition?: Condition }) => {
+  const { t } = useTranslation();
+
+  let message = '';
+  let owners: string[] = [];
+  if (multipleOwnersCondition) {
+    message = t('Device is owned by more than one fleet');
+    owners = (multipleOwnersCondition.message || '').split(',');
+  } else {
+    message = t("Device labels don't match any fleet's selector labels");
+  }
+
+  const hasMultipleOwners = owners.length > 1;
+
+  return (
+    <div className="fctl-device-fleet">
+      {hasMultipleOwners ? t('Multiple owners') : t('None')}
+      <Popover
+        bodyContent={
+          <span>
+            {message}
+            {hasMultipleOwners && (
+              <span>
+                {': '}
+                <List>
+                  {owners.map((ownerFleet) => {
+                    return (
+                      <ListItem key={ownerFleet}>
+                        <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: ownerFleet }}>{ownerFleet}</Link>
+                      </ListItem>
+                    );
+                  })}
+                </List>
+              </span>
+            )}
+          </span>
+        }
+      >
+        <Button
+          isInline
+          variant="plain"
+          icon={<OutlinedQuestionCircleIcon />}
+          aria-label={t('Ownership information')}
+        />
+      </Popover>
+    </div>
+  );
+};
+
+const DeviceFleet = ({ device }: { device?: Device }) => {
+  if (!device) {
+    return '-';
+  }
+
+  const fleetName = getDeviceFleet(device.metadata);
+  if (fleetName) {
+    return <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: fleetName }}>{fleetName}</Link>;
+  }
+
+  const multipleOwnersCondition = getCondition(device.status?.conditions, ConditionType.DeviceMultipleOwners);
+  return <FleetLessDevice multipleOwnersCondition={multipleOwnersCondition} />;
+};
+
+export default DeviceFleet;