@flightctl/ui-components 0.0.10 → 0.4.0-rc2

package/dist/src/utils/search.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSearchResultsCount = exports.fuzzySeach = void 0;
+exports.getSearchResultsCount = exports.fuzzySeach = exports.MAX_TOTAL_SEARCH_RESULTS = void 0;
 const tslib_1 = require("tslib");
 const fuzzysearch_1 = tslib_1.__importDefault(require("fuzzysearch"));
 // Must be an even number for "getSearchResultsCount" to work
-const MAX_TOTAL_SEARCH_RESULTS = 10;
+exports.MAX_TOTAL_SEARCH_RESULTS = 10;
 const fuzzySeach = (filter, value) => {
     if (!filter) {
         return true;
@@ -14,14 +14,14 @@ const fuzzySeach = (filter, value) => {
 };
 exports.fuzzySeach = fuzzySeach;
 const getSearchResultsCount = (labelCount, fleetCount) => {
-    if (labelCount + fleetCount <= MAX_TOTAL_SEARCH_RESULTS) {
+    if (labelCount + fleetCount <= exports.MAX_TOTAL_SEARCH_RESULTS) {
         return [labelCount, fleetCount];
     }
-    const min = Math.min(labelCount, fleetCount, MAX_TOTAL_SEARCH_RESULTS / 2);
-    if (min === MAX_TOTAL_SEARCH_RESULTS / 2) {
-        return [MAX_TOTAL_SEARCH_RESULTS / 2, MAX_TOTAL_SEARCH_RESULTS / 2];
+    const min = Math.min(labelCount, fleetCount, exports.MAX_TOTAL_SEARCH_RESULTS / 2);
+    if (min === exports.MAX_TOTAL_SEARCH_RESULTS / 2) {
+        return [exports.MAX_TOTAL_SEARCH_RESULTS / 2, exports.MAX_TOTAL_SEARCH_RESULTS / 2];
     }
-    const rest = MAX_TOTAL_SEARCH_RESULTS - min;
+    const rest = exports.MAX_TOTAL_SEARCH_RESULTS - min;
     return labelCount === min ? [labelCount, rest] : [rest, fleetCount];
 };
 exports.getSearchResultsCount = getSearchResultsCount;

package/dist/src/utils/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../src/utils/search.ts"],"names":[],"mappings":";;;;AAAA,sEAAgC;AAEhC,6DAA6D;AAC7D,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAE7B,MAAM,UAAU,GAAG,CAAC,MAA0B,EAAE,KAAc,EAAW,EAAE;IAChF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,6DAA6D;IAC7D,OAAO,IAAA,qBAAK,EAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAY,CAAC;AACrF,CAAC,CAAC;AANW,QAAA,UAAU,cAMrB;AAEK,MAAM,qBAAqB,GAAG,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE;IAC9E,IAAI,UAAU,GAAG,UAAU,IAAI,wBAAwB,EAAE,CAAC;QACxD,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAClC,CAAC;IACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,GAAG,CAAC,CAAC,CAAC;IAC3E,IAAI,GAAG,KAAK,wBAAwB,GAAG,CAAC,EAAE,CAAC;QACzC,OAAO,CAAC,wBAAwB,GAAG,CAAC,EAAE,wBAAwB,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,MAAM,IAAI,GAAG,wBAAwB,GAAG,GAAG,CAAC;IAC5C,OAAO,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AACtE,CAAC,CAAC;AAXW,QAAA,qBAAqB,yBAWhC"}
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../src/utils/search.ts"],"names":[],"mappings":";;;;AAAA,sEAAgC;AAEhC,6DAA6D;AAChD,QAAA,wBAAwB,GAAG,EAAE,CAAC;AAEpC,MAAM,UAAU,GAAG,CAAC,MAA0B,EAAE,KAAc,EAAW,EAAE;IAChF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,6DAA6D;IAC7D,OAAO,IAAA,qBAAK,EAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAY,CAAC;AACrF,CAAC,CAAC;AANW,QAAA,UAAU,cAMrB;AAEK,MAAM,qBAAqB,GAAG,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE;IAC9E,IAAI,UAAU,GAAG,UAAU,IAAI,gCAAwB,EAAE,CAAC;QACxD,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAClC,CAAC;IACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,gCAAwB,GAAG,CAAC,CAAC,CAAC;IAC3E,IAAI,GAAG,KAAK,gCAAwB,GAAG,CAAC,EAAE,CAAC;QACzC,OAAO,CAAC,gCAAwB,GAAG,CAAC,EAAE,gCAAwB,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,MAAM,IAAI,GAAG,gCAAwB,GAAG,GAAG,CAAC;IAC5C,OAAO,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AACtE,CAAC,CAAC;AAXW,QAAA,qBAAqB,yBAWhC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightctl/ui-components",
-  "version": "0.0.10",
+  "version": "0.4.0-rc2",
   "description": "Components for Flightctl UI",
   "repository": "https://github.com/flightctl/flightctl-ui.git",
   "homepage": "https://github.com/flightctl/flightctl-ui.git",
@@ -43,10 +43,10 @@
   },
   "peerDependencies": {
     "@patternfly/react-charts": "^7.2.2",
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0",
-    "@patternfly/react-styles": "^5.1.2",
-    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-core": "^5.0.0 <= 5.4.8",
+    "@patternfly/react-icons": "^5.0.0 <= 5.4.2",
+    "@patternfly/react-styles": "^5.1.2 <= 5.4.1",
+    "@patternfly/react-table": "^5.0.0 <= 5.4.9",
     "i18next": "21.8.14 - 23.x",
     "react": "17.0.1 - 18.x",
     "react-dom": "17.0.1 - 18.x",

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

@@ -0,0 +1,7 @@
+.fctl-applications-table__row .pf-v5-c-button {
+  visibility: hidden;
+}
+
+.fctl-applications-table__row:hover .pf-v5-c-button {
+  visibility: visible;
+}

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, hideTerminal }: React.PropsWithChildren<{ hideTerminal?: boolean }>) => {
+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, hideTerminal }: React.PropsWithChildren<{
   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, hideTerminal }: React.PropsWithChildren<{
 
   return (
     <DetailsPage
-      loading={loading || loadingTv}
+      loading={loading}
       error={error}
       id={deviceId}
       title={deviceAlias}
@@ -62,20 +68,22 @@ const DeviceDetailsPage = ({ children, hideTerminal }: React.PropsWithChildren<{
         <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, hideTerminal }: React.PropsWithChildren<{
           <Route
             path="details"
             element={
-              <DeviceDetailsTab device={device} errorTv={errorTv} tv={tv} refetch={refetch}>
+              <DeviceDetailsTab device={device} refetch={refetch} canEdit={canEdit}>
                 {children}
               </DeviceDetailsTab>
             }
           />
-          {!hideTerminal && <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, hideTerminal }: React.PropsWithChildren<{
   );
 };
 
-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;