@flightctl/ui-components 0.0.5 → 0.4.0-rc1

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

@@ -1,19 +1,74 @@
 import * as React from 'react';
-import { Bullseye } from '@patternfly/react-core';
+import { Bullseye, Button, Spinner } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import MinusCircleIcon from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 
 import { DeviceApplicationStatus } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
 import ApplicationStatus from '../../Status/ApplicationStatus';
+import WithTooltip from '../../common/WithTooltip';
+
+import './ApplicationsTable.css';
 
 type ApplicationsTableProps = {
+  // Contains the statuses of all detected applications and systemdUnits
   appsStatus: DeviceApplicationStatus[];
+  // List of apps as defined the device / fleet spec
+  specApps: string[];
+  // List of systemd units as defined in the device / fleet spec
+  specSystemdUnits: string[];
+  // Map: (systemdUnitName, timeItWasAdded)
+  addedSystemdUnitDates: Record<string, number>;
+  onSystemdDelete?: (deletedUnit: string) => void;
+  isUpdating: boolean;
+  canEdit: boolean;
 };
 
-const ApplicationsTable = ({ appsStatus }: ApplicationsTableProps) => {
+const DELETE_SYSTED_TIMEOUT = 30000; // 30 seconds
+
+const ApplicationsTable = ({
+  appsStatus,
+  specApps,
+  specSystemdUnits,
+  addedSystemdUnitDates,
+  onSystemdDelete,
+  isUpdating,
+  canEdit,
+}: ApplicationsTableProps) => {
   const { t } = useTranslation();
 
-  return appsStatus.length ? (
+  // Required to be able to detect removed systemd units for their correct type.
+  // It takes a bit for them to be removed from the applications list.
+  const [deletedSystemdUnits, setDeletedSystemdUnits] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    // Remove a service from the deleted list if it was added back later
+    const filtered = deletedSystemdUnits.filter((deletedUnit) => {
+      if (addedSystemdUnitDates[deletedUnit]) {
+        return false;
+      }
+      return true;
+    });
+    if (filtered.length < deletedSystemdUnits.length) {
+      setDeletedSystemdUnits(filtered);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [addedSystemdUnitDates]);
+
+  const appsAndSystemdUnits: string[] = [];
+  specApps.forEach((app) => {
+    appsAndSystemdUnits.push(app);
+  });
+  specSystemdUnits.forEach((systemdUnit) => {
+    appsAndSystemdUnits.push(systemdUnit);
+  });
+  appsStatus.forEach((appStatus) => {
+    if (!appsAndSystemdUnits.includes(appStatus.name)) {
+      appsAndSystemdUnits.push(appStatus.name);
+    }
+  });
+
+  return appsAndSystemdUnits.length ? (
     <Table aria-label={t('Device applications table')}>
       <Thead>
         <Tr>
@@ -21,19 +76,101 @@ const ApplicationsTable = ({ appsStatus }: ApplicationsTableProps) => {
           <Th modifier="wrap">{t('Status')}</Th>
           <Th modifier="wrap">{t('Ready')}</Th>
           <Th modifier="wrap">{t('Restarts')}</Th>
+          <Th modifier="wrap">{t('Type')}</Th>
         </Tr>
       </Thead>
       <Tbody>
-        {appsStatus.map((appData) => (
-          <Tr key={appData.name}>
-            <Td dataLabel={t('Name')}>{appData.name}</Td>
-            <Td dataLabel={t('Status')}>
-              <ApplicationStatus status={appData.status} />
-            </Td>
-            <Td dataLabel={t('Ready')}>{appData.ready}</Td>
-            <Td dataLabel={t('Restarts')}>{appData.restarts}</Td>
-          </Tr>
-        ))}
+        {appsAndSystemdUnits.map((appName) => {
+          const appDetails = appsStatus.find((app) => app.name === appName);
+          const isDeletedSystemdUnit = deletedSystemdUnits.includes(appName);
+          const isAddedSystemdUnit = !!addedSystemdUnitDates[appName];
+          const isApp =
+            specApps.includes(appName) ||
+            !(specSystemdUnits.includes(appName) || isDeletedSystemdUnit || isAddedSystemdUnit);
+
+          const deleteSystemdUnit = canEdit && !isDeletedSystemdUnit && onSystemdDelete && (
+            <Button
+              aria-label={t('Delete')}
+              isDisabled={isUpdating}
+              variant="plain"
+              icon={<MinusCircleIcon />}
+              onClick={() => {
+                setDeletedSystemdUnits(deletedSystemdUnits.concat(appName));
+                onSystemdDelete(appName);
+              }}
+            />
+          );
+
+          if (!appDetails) {
+            // It's an app or a systemd unit which has not been reported yet
+            const appAddedTime = addedSystemdUnitDates[appName] || 0;
+            // For apps there are is no spinner since we don't when the app was added to the spec
+            const showSpinner = !isApp && Date.now() - appAddedTime < DELETE_SYSTED_TIMEOUT;
+            return (
+              <Tr key={appName} className="applications-table__row">
+                <Td dataLabel={t('Name')}>{appName}</Td>
+                <Td dataLabel={t('Status')} colSpan={3}>
+                  {showSpinner ? (
+                    <>
+                      <Spinner size="sm" /> {t('Waiting for service to be reported...')}
+                    </>
+                  ) : (
+                    t('Information not available yet')
+                  )}
+                </Td>
+                <Td dataLabel={t('Type')}>
+                  {isApp ? (
+                    <>{t('App')}</>
+                  ) : (
+                    <>
+                      {t('Systemd')} {deleteSystemdUnit}
+                    </>
+                  )}
+                </Td>
+              </Tr>
+            );
+          }
+
+          let typeColumnContent: React.ReactNode;
+
+          if (isApp) {
+            typeColumnContent = t('App');
+          } else if (onSystemdDelete) {
+            let extraContent: React.ReactNode;
+            if (isDeletedSystemdUnit) {
+              extraContent = (
+                <WithTooltip
+                  showTooltip
+                  content={t('{{ appName }} is being removed, this may take some time.', { appName })}
+                >
+                  <Spinner size="sm" />
+                </WithTooltip>
+              );
+            } else {
+              extraContent = deleteSystemdUnit;
+            }
+
+            typeColumnContent = (
+              <>
+                {t('Systemd')} {extraContent}
+              </>
+            );
+          } else {
+            typeColumnContent = t('Systemd');
+          }
+
+          return (
+            <Tr key={appName} className="fctl-applications-table__row">
+              <Td dataLabel={t('Name')}>{appName}</Td>
+              <Td dataLabel={t('Status')}>
+                <ApplicationStatus status={appDetails.status} />
+              </Td>
+              <Td dataLabel={t('Ready')}>{appDetails.ready}</Td>
+              <Td dataLabel={t('Restarts')}>{appDetails.restarts}</Td>
+              <Td dataLabel={t('Type')}>{typeColumnContent}</Td>
+            </Tr>
+          );
+        })}
       </Tbody>
     </Table>
   ) : (

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

@@ -1,144 +1,43 @@
 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 { Button, List, ListComponent, ListItem, Modal, OrderType, Stack, StackItem } 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 variant="medium" title={t('Add devices')} onClose={onClose} isOpen>
+      <Stack hasGutter>
+        <StackItem>{t('You can add devices following these steps:')}</StackItem>
+        <StackItem>
+          <List component={ListComponent.ol} type={OrderType.number}>
+            <ListItem>{t('Request an enrollment certificate for your device')}</ListItem>
+            <ListItem>{t('Build a bootc OS image')}</ListItem>
+            <ListItem>{t('Create, sign and publish a bootable OS disk image')}</ListItem>
+            <ListItem>{t('Boot your device into the OS disk image')}</ListItem>
+          </List>
+        </StackItem>
+        <StackItem>
+          <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('Learn more about adding devices')}{' '}
+          </Button>
+        </StackItem>
+        <StackItem className="pf-v5-u-mt-md">
+          <Button variant="primary" isInline onClick={onClose}>
+            {t('Close')}
+          </Button>
+        </StackItem>
+      </Stack>
     </Modal>
   );
 };

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Button, CardTitle, Flex, FlexItem } from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getStringListPatches } from '../../../utils/patch';
+import { getDeviceFleet } from '../../../utils/devices';
+import SystemdUnitsModal from '../SystemdUnitsModal/SystemdUnitsModal';
+import ApplicationsTable from '../../DetailsPage/Tables/ApplicationsTable';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+
+type DeviceDetailsTabProps = {
+  device: Required<Device>;
+  refetch: VoidFunction;
+  canEdit: boolean;
+};
+
+const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+  const [showSystemdModal, setShowSystemdModal] = React.useState<boolean>(false);
+  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
+  const [addedSystemdDates, setAddedSystemdDates] = React.useState<Record<string, number>>({});
+
+  const onClose = (hasChanges?: boolean, addedUnits?: string[]) => {
+    if (hasChanges) {
+      refetch();
+    }
+    if (addedUnits?.length) {
+      const allAddedUnitDates = { ...addedSystemdDates };
+      const addedDate = Date.now();
+      addedUnits.forEach((newUnit) => {
+        allAddedUnitDates[newUnit] = addedDate;
+      });
+      setAddedSystemdDates(allAddedUnitDates);
+    }
+    setShowSystemdModal(false);
+  };
+
+  const isManagedDevice = !!getDeviceFleet(device.metadata);
+  const trackedSystemdUnits = device.spec?.systemd?.matchPatterns || [];
+  const specApps = device.spec?.applications?.map((app) => app.name || app.image) || [];
+  const apps = device.status.applications; // includes available systemdUnits
+
+  const deleteSystemdUnit = isManagedDevice
+    ? undefined
+    : (removedUnit: string) => {
+        const updateDeviceSpec = async () => {
+          const patches = getStringListPatches(
+            '/spec/systemd',
+            trackedSystemdUnits,
+            trackedSystemdUnits.filter((unit) => unit !== removedUnit),
+            (units: string[]) => ({ matchPatterns: units }),
+          );
+          if (patches.length > 0) {
+            setIsUpdating(true);
+            await patch(`devices/${device.metadata.name}`, patches);
+            refetch();
+            setIsUpdating(false);
+          }
+        };
+        void updateDeviceSpec();
+      };
+
+  return (
+    <DetailsPageCard>
+      <CardTitle>
+        <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+          <FlexItem>{t('Applications')}</FlexItem>
+          {!isManagedDevice && canEdit && (
+            <FlexItem>
+              <Button
+                variant="link"
+                isDisabled={isUpdating}
+                onClick={() => {
+                  setShowSystemdModal(true);
+                }}
+              >
+                {t('Track systemd services')}
+              </Button>
+            </FlexItem>
+          )}
+        </Flex>
+      </CardTitle>
+      <DetailsPageCardBody>
+        <ApplicationsTable
+          appsStatus={apps}
+          specApps={specApps}
+          specSystemdUnits={trackedSystemdUnits}
+          onSystemdDelete={deleteSystemdUnit}
+          isUpdating={isUpdating}
+          addedSystemdUnitDates={addedSystemdDates}
+          canEdit={canEdit}
+        />
+        {showSystemdModal && <SystemdUnitsModal device={device} onClose={onClose} />}
+      </DetailsPageCardBody>
+    </DetailsPageCard>
+  );
+};
+
+export default DeviceApplications;

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

@@ -10,13 +10,17 @@ 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';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import PageWithPermissions from '../../common/PageWithPermissions';
 
-const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, never>>) => {
+type DeviceDetailsPageProps = React.PropsWithChildren<{ hideTerminal?: boolean }>;
+
+const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) => {
   const { t } = useTranslation();
   const {
     router: { useParams, Routes, Route, Navigate },
@@ -25,13 +29,15 @@ const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, n
   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 [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+  const [canOpenTerminal] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
+
   const { deleteAction, deleteModal } = useDeleteAction({
     onDelete: async () => {
       await remove(`devices/${deviceId}`);
@@ -51,7 +57,7 @@ const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, n
 
   return (
     <DetailsPage
-      loading={loading || loadingTv}
+      loading={loading}
       error={error}
       id={deviceId}
       title={deviceAlias}
@@ -62,20 +68,22 @@ const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, n
         <Nav variant="tertiary">
           <NavList>
             <NavItem to="details">{t('Details')}</NavItem>
-            <NavItem to="terminal">{t('Terminal')}</NavItem>
+            {!hideTerminal && canOpenTerminal && <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}
+            {canEdit && (
+              <DropdownItem
+                onClick={() => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceId })}
+                {...editActionProps}
+              >
+                {t('Edit device configurations')}
+              </DropdownItem>
+            )}
+            {canDelete && deleteAction}
             <DropdownItem
               onClick={() => {
                 setShowDebugInfo(!showDebugInfo);
@@ -93,12 +101,12 @@ const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, n
           <Route
             path="details"
             element={
-              <DeviceDetailsTab device={device} errorTv={errorTv} tv={tv} refetch={refetch}>
+              <DeviceDetailsTab device={device} refetch={refetch} canEdit={canEdit}>
                 {children}
               </DeviceDetailsTab>
             }
           />
-          <Route path="terminal" element={<TerminalTab device={device} />} />
+          {!hideTerminal && canOpenTerminal && <Route path="terminal" element={<TerminalTab device={device} />} />}
         </Routes>
       )}
       {deleteModal}
@@ -114,4 +122,13 @@ const DeviceDetailsPage = ({ children }: React.PropsWithChildren<Record<never, n
   );
 };
 
-export default DeviceDetailsPage;
+const DeviceDetailsPageWithPermissions = (props: DeviceDetailsPageProps) => {
+  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE, VERB.GET);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <DeviceDetailsPage {...props} />
+    </PageWithPermissions>
+  );
+};
+
+export default DeviceDetailsPageWithPermissions;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  Alert,
   CardTitle,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -13,52 +12,36 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 
-import { Device, TemplateVersion } from '@flightctl/types';
+import { Device } 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 DeviceFleet from './DeviceFleet';
+import DeviceOs from './DeviceOs';
+import DeviceApplications from './DeviceApplications';
 
 import './DeviceDetailsTab.css';
 
 type DeviceDetailsTabProps = {
   device: Required<Device>;
   refetch: VoidFunction;
-  tv: TemplateVersion | undefined;
-  errorTv: unknown;
+  canEdit: boolean;
 };
 
-const DeviceDetailsTab = ({
-  device,
-  refetch,
-  tv,
-  errorTv,
-  children,
-}: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+const DeviceDetailsTab = ({ device, refetch, children, canEdit }: 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>
@@ -85,7 +68,7 @@ const DeviceDetailsTab = ({
                   <StackItem className="fctl-device-details-tab__label">{t('Labels')}</StackItem>
                 </Stack>
                 <StackItem>
-                  <EditLabelsForm device={device} onDeviceUpdate={refetch} />
+                  <EditLabelsForm device={device} onDeviceUpdate={refetch} canEdit={canEdit} />
                 </StackItem>
               </FlexItem>
             </Flex>
@@ -194,20 +177,7 @@ const DeviceDetailsTab = ({
         </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>
+        <DeviceApplications device={device} refetch={refetch} canEdit={canEdit} />
       </GridItem>
     </Grid>
   );