@flightctl/ui-components 0.4.0 → 0.5.0-rc2

package/src/components/Device/DevicesPage/DevicesPage.tsx

@@ -1,217 +1,28 @@
 import * as React from 'react';
-import { Button, EmptyStateActions, EmptyStateBody, EmptyStateFooter, ToolbarItem } from '@patternfly/react-core';
-import { Tbody } from '@patternfly/react-table';
-import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons/microchip-icon';
-import { Trans } from 'react-i18next';
-import { TFunction } from 'i18next';
 
-import { useFetch } from '../../../hooks/useFetch';
-import { Device } from '@flightctl/types';
+import { DeviceList } from '@flightctl/types';
 
 import ListPage from '../../ListPage/ListPage';
 import ListPageBody from '../../ListPage/ListPageBody';
-import { useDeleteListAction } from '../../ListPage/ListPageActions';
-import TablePagination from '../../Table/TablePagination';
-import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
-import Table, { ApiSortTableColumn } from '../../Table/Table';
-import DeviceTableToolbar from './DeviceTableToolbar';
-import DeviceTableRow from './DeviceTableRow';
-import { FlightCtlLabel } from '../../../types/extraTypes';
-import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
-import ResourceListEmptyState from '../../common/ResourceListEmptyState';
-import { useTableSelect } from '../../../hooks/useTableSelect';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { Link, ROUTE } from '../../../hooks/useNavigate';
-import { PaginationDetails, useTablePagination } from '../../../hooks/useTablePagination';
+import { useTablePagination } from '../../../hooks/useTablePagination';
+import { isDeviceEnrolled } from '../../../utils/devices';
 import { useDevices } from './useDevices';
 import { useDeviceBackendFilters } from './useDeviceBackendFilters';
-import {
-  getApplicationStatusHelperText,
-  getDeviceStatusHelperText,
-  getUpdateStatusHelperText,
-} from '../../Status/utils';
+
 import EnrollmentRequestList from '../../EnrollmentRequest/EnrollmentRequestList';
-import { FilterStatusMap } from './types';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { useAccessReview } from '../../../hooks/useAccessReview';
+import EnrolledDevicesTable from './EnrolledDevicesTable';
+import DecommissionedDevicesTable from './DecommissionedDevicesTable';
 
-type DeviceEmptyStateProps = {
-  onAddDevice: VoidFunction;
-};
-
-const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
-  const { t } = useTranslation();
-  const [canCreateFleet] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
-  return (
-    <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No devices here!')}>
-      <EmptyStateBody>
-        {canCreateFleet ? (
-          <Trans t={t}>
-            You can add devices and label them to match fleets, or you can{' '}
-            <Link to={ROUTE.FLEET_CREATE}>start with a fleet</Link> and add devices into it.
-          </Trans>
-        ) : (
-          t('You can add devices and label them to match fleets')
-        )}
-      </EmptyStateBody>
-      <EmptyStateFooter>
-        <EmptyStateActions>
-          <Button onClick={onAddDevice}>{t('Add devices')}</Button>
-        </EmptyStateActions>
-      </EmptyStateFooter>
-    </ResourceListEmptyState>
-  );
-};
-
-const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
-  {
-    name: t('Alias'),
-  },
-  {
-    name: t('Name'),
-  },
-  {
-    name: t('Fleet'),
-  },
-  {
-    name: t('Application status'),
-    helperText: getApplicationStatusHelperText(t),
-  },
-  {
-    name: t('Device status'),
-    helperText: getDeviceStatusHelperText(t),
-  },
-  {
-    name: t('Update status'),
-    helperText: getUpdateStatusHelperText(t),
-  },
-  {
-    name: t('Last seen'),
-  },
-];
-
-interface DeviceTableProps {
-  devices: Array<Device>;
-  refetch: VoidFunction;
-  ownerFleets: string[];
-  activeStatuses: FilterStatusMap;
-  hasFiltersEnabled: boolean;
-  nameOrAlias: string | undefined;
-  setNameOrAlias: (text: string) => void;
-  setOwnerFleets: (ownerFleets: string[]) => void;
-  setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
-  selectedLabels: FlightCtlLabel[];
-  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
-  isFilterUpdating: boolean;
-  deviceColumns: ApiSortTableColumn[];
-  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
-  // getSortParams: (columnIndex: number) => ThProps['sort'];
-}
-
-export const DeviceTable = ({
-  devices,
-  refetch,
-  nameOrAlias,
-  setNameOrAlias,
-  ownerFleets,
-  setOwnerFleets,
-  activeStatuses,
-  setActiveStatuses,
-  selectedLabels,
-  setSelectedLabels,
-  hasFiltersEnabled,
-  isFilterUpdating,
-  deviceColumns,
-  pagination,
-}: DeviceTableProps) => {
-  const { t } = useTranslation();
-  const [addDeviceModal, setAddDeviceModal] = React.useState(false);
-  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
-  const { remove } = useFetch();
-
-  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
-
-  const { deleteAction: deleteDeviceAction, deleteModal: deleteDeviceModal } = useDeleteListAction({
-    resourceType: 'Device',
-    onDelete: async (resourceId: string) => {
-      await remove(`devices/${resourceId}`);
-      refetch();
-    },
-  });
-
-  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
-  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
-
-  return (
-    <>
-      <DeviceTableToolbar
-        nameOrAlias={nameOrAlias}
-        setNameOrAlias={setNameOrAlias}
-        ownerFleets={ownerFleets}
-        setOwnerFleets={setOwnerFleets}
-        activeStatuses={activeStatuses}
-        setActiveStatuses={setActiveStatuses}
-        selectedLabels={selectedLabels}
-        setSelectedLabels={setSelectedLabels}
-        isFilterUpdating={isFilterUpdating}
-      >
-        <ToolbarItem>
-          <Button onClick={() => setAddDeviceModal(true)}>{t('Add devices')}</Button>
-        </ToolbarItem>
-        {canDelete && (
-          <ToolbarItem>
-            <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
-              {t('Delete devices')}
-            </Button>
-          </ToolbarItem>
-        )}
-      </DeviceTableToolbar>
-      <Table
-        aria-label={t('Devices table')}
-        loading={isFilterUpdating}
-        columns={deviceColumns}
-        emptyFilters={!hasFiltersEnabled}
-        emptyData={devices.length === 0}
-        isAllSelected={isAllSelected}
-        onSelectAll={setAllSelected}
-      >
-        <Tbody>
-          {devices.map((device, index) => (
-            <DeviceTableRow
-              key={device.metadata.name || ''}
-              device={device}
-              deleteAction={deleteDeviceAction}
-              onRowSelect={onRowSelect}
-              isRowSelected={isRowSelected}
-              rowIndex={index}
-              canDelete={canDelete}
-              canEdit={canEdit}
-            />
-          ))}
-        </Tbody>
-      </Table>
-      <TablePagination isUpdating={isFilterUpdating} pagination={pagination} />
-      {!hasFiltersEnabled && devices.length === 0 && <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />}
-      {deleteDeviceModal}
-      {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
-      {isMassDeleteModalOpen && (
-        <MassDeleteDeviceModal
-          onClose={() => setIsMassDeleteModalOpen(false)}
-          resources={devices.filter(isRowSelected)}
-          onDeleteSuccess={() => {
-            setIsMassDeleteModalOpen(false);
-            refetch();
-          }}
-        />
-      )}
-    </>
-  );
+const removeDecommissionedDevices = (data: DeviceList) => {
+  data.items = data.items.filter(isDeviceEnrolled);
 };
 
 const DevicesPage = ({ canListER }: { canListER: boolean }) => {
   const { t } = useTranslation();
-  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
 
   const {
     nameOrAlias,
@@ -224,10 +35,16 @@ const DevicesPage = ({ canListER }: { canListER: boolean }) => {
     selectedLabels,
     setSelectedLabels,
   } = useDeviceBackendFilters();
-  const { currentPage, setCurrentPage, onPageFetched, nextContinue, itemCount } = useTablePagination();
+  const [onlyDecommissioned, setOnlyDecommissioned] = React.useState<boolean>(false);
+
+  const { currentPage, setCurrentPage, onPageFetched, nextContinue, itemCount } = useTablePagination<DeviceList>(
+    onlyDecommissioned ? undefined : removeDecommissionedDevices,
+  );
+
   const [data, loading, error, updating, refetch] = useDevices({
     nameOrAlias,
     ownerFleets,
+    onlyDecommissioned,
     activeStatuses,
     labels: selectedLabels,
     nextContinue,
@@ -248,23 +65,36 @@ const DevicesPage = ({ canListER }: { canListER: boolean }) => {
       {canListER && <EnrollmentRequestList refetchDevices={refetch} />}
 
       <ListPage title={t('Devices')}>
-        <ListPageBody error={error} loading={loading}>
-          <DeviceTable
-            devices={data}
-            refetch={refetch}
-            nameOrAlias={nameOrAlias}
-            setNameOrAlias={setNameOrAlias}
-            hasFiltersEnabled={hasFiltersEnabled || updating}
-            ownerFleets={ownerFleets}
-            activeStatuses={activeStatuses}
-            setOwnerFleets={setOwnerFleets}
-            setActiveStatuses={setActiveStatuses}
-            selectedLabels={selectedLabels}
-            setSelectedLabels={setSelectedLabels}
-            isFilterUpdating={updating}
-            deviceColumns={deviceColumns}
-            pagination={pagination}
-          />
+        {/* When searching for decommissioned devices we want to avoid showing the enrolled devices */}
+        <ListPageBody error={error} loading={loading || (onlyDecommissioned && updating && !hasFiltersEnabled)}>
+          {onlyDecommissioned ? (
+            <DecommissionedDevicesTable
+              devices={data}
+              refetch={refetch}
+              nameOrAlias={nameOrAlias}
+              setNameOrAlias={setNameOrAlias}
+              hasFiltersEnabled={hasFiltersEnabled || updating}
+              setOnlyDecommissioned={setOnlyDecommissioned}
+              isFilterUpdating={updating}
+              pagination={pagination}
+            />
+          ) : (
+            <EnrolledDevicesTable
+              devices={data}
+              nameOrAlias={nameOrAlias}
+              setNameOrAlias={setNameOrAlias}
+              hasFiltersEnabled={hasFiltersEnabled || updating}
+              ownerFleets={ownerFleets}
+              setOnlyDecommissioned={setOnlyDecommissioned}
+              activeStatuses={activeStatuses}
+              setOwnerFleets={setOwnerFleets}
+              setActiveStatuses={setActiveStatuses}
+              selectedLabels={selectedLabels}
+              setSelectedLabels={setSelectedLabels}
+              isFilterUpdating={updating}
+              pagination={pagination}
+            />
+          )}
         </ListPageBody>
       </ListPage>
     </>

package/src/components/Device/DevicesPage/{DeviceTableRow.tsx → EnrolledDeviceTableRow.tsx}

@@ -4,8 +4,9 @@ import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
 import { Device } from '@flightctl/types';
 import DeviceFleet from '../DeviceDetails/DeviceFleet';
 import { timeSinceText } from '../../../utils/dates';
-import { getDeviceFleet } from '../../../utils/devices';
-import { DeleteListActionResult } from '../../ListPage/types';
+import { getDecommissionDisabledReason, getEditDisabledReason } from '../../../utils/devices';
+import { getDisabledTooltipProps } from '../../../utils/tooltip';
+import { ListAction } from '../../ListPage/types';
 import ApplicationSummaryStatus from '../../Status/ApplicationSummaryStatus';
 import DeviceStatus from '../../Status/DeviceStatus';
 import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
@@ -13,37 +14,31 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import ResourceLink from '../../common/ResourceLink';
 
-type DeviceTableRowProps = {
+type EnrolledDeviceTableRowProps = {
   device: Device;
-  deleteAction: DeleteListActionResult['deleteAction'];
   rowIndex: number;
   onRowSelect: (device: Device) => OnSelect;
   isRowSelected: (device: Device) => boolean;
-  canDelete: boolean;
   canEdit: boolean;
+  canDecommission: boolean;
+  decommissionAction: ListAction;
 };
 
-const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
+const EnrolledDeviceTableRow = ({
   device,
-  deleteAction,
   rowIndex,
   onRowSelect,
   isRowSelected,
-  canDelete,
   canEdit,
-}) => {
+  canDecommission,
+  decommissionAction,
+}: EnrolledDeviceTableRowProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const deviceName = device.metadata.name as string;
   const deviceAlias = device.metadata.labels?.alias;
-  const editActionProps = getDeviceFleet(device?.metadata)
-    ? {
-        isAriaDisabled: true,
-        tooltipProps: {
-          content: t('Device is bound to a fleet. Its configurations cannot be edited'),
-        },
-      }
-    : undefined;
+  const editActionProps = getDisabledTooltipProps(getEditDisabledReason(device, t));
+  const decommissionDisabledReason = getDecommissionDisabledReason(device, t);
 
   return (
     <Tr>
@@ -89,11 +84,12 @@ const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
               title: t('View device details'),
               onClick: () => navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceName }),
             },
-            ...(canDelete
+            ...(canDecommission
               ? [
-                  deleteAction({
+                  decommissionAction({
                     resourceId: deviceName,
                     resourceName: deviceAlias,
+                    disabledReason: decommissionDisabledReason,
                   }),
                 ]
               : []),
@@ -104,4 +100,4 @@ const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
   );
 };
 
-export default DeviceTableRow;
+export default EnrolledDeviceTableRow;

package/src/components/Device/DevicesPage/EnrolledDevicesTable.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { Button, Switch, ToolbarItem } from '@patternfly/react-core';
+import { Tbody } from '@patternfly/react-table';
+import { TFunction } from 'react-i18next';
+
+import { Device, DeviceDecommission, DeviceDecommissionTargetType, DeviceList } from '@flightctl/types';
+
+import { FilterStatusMap } from './types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { PaginationDetails } from '../../../hooks/useTablePagination';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useTableSelect } from '../../../hooks/useTableSelect';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { useFetch } from '../../../hooks/useFetch';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import {
+  getApplicationStatusHelperText,
+  getDeviceStatusHelperText,
+  getUpdateStatusHelperText,
+} from '../../Status/utils';
+
+import Table, { ApiSortTableColumn } from '../../Table/Table';
+import { useDecommissionListAction } from '../../ListPage/ListPageActions';
+import TablePagination from '../../Table/TablePagination';
+import MassDecommissionDeviceModal from '../../modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal';
+import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
+import { EnrolledDevicesEmptyState } from './DevicesEmptyStates';
+import DeviceTableToolbar from './DeviceTableToolbar';
+import EnrolledDeviceTableRow from './EnrolledDeviceTableRow';
+import { FilterSearchParams } from '../../../utils/status/devices';
+
+interface EnrolledDeviceTableProps {
+  devices: Array<Device>;
+  ownerFleets: string[];
+  activeStatuses: FilterStatusMap;
+  hasFiltersEnabled: boolean;
+  nameOrAlias: string | undefined;
+  setOnlyDecommissioned: (check: boolean) => void;
+  setNameOrAlias: (text: string) => void;
+  setOwnerFleets: (ownerFleets: string[]) => void;
+  setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
+  selectedLabels: FlightCtlLabel[];
+  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
+  isFilterUpdating: boolean;
+  pagination: Pick<PaginationDetails<DeviceList>, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+  // getSortParams: (columnIndex: number) => ThProps['sort'];
+}
+
+const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Alias'),
+  },
+  {
+    name: t('Name'),
+  },
+  {
+    name: t('Fleet'),
+  },
+  {
+    name: t('Application status'),
+    helperText: getApplicationStatusHelperText(t),
+  },
+  {
+    name: t('Device status'),
+    helperText: getDeviceStatusHelperText(t),
+  },
+  {
+    name: t('Update status'),
+    helperText: getUpdateStatusHelperText(t),
+  },
+  {
+    name: t('Last seen'),
+  },
+];
+
+const EnrolledDevicesTable = ({
+  devices,
+  nameOrAlias,
+  setNameOrAlias,
+  ownerFleets,
+  setOwnerFleets,
+  activeStatuses,
+  setActiveStatuses,
+  setOnlyDecommissioned,
+  selectedLabels,
+  setSelectedLabels,
+  hasFiltersEnabled,
+  isFilterUpdating,
+  pagination,
+}: EnrolledDeviceTableProps) => {
+  const { t } = useTranslation();
+  const { put } = useFetch();
+
+  const [addDeviceModal, setAddDeviceModal] = React.useState(false);
+  const [isMassDecommissionModalOpen, setIsMassDecommissionModalOpen] = React.useState(false);
+  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { action: decommissionDeviceAction, modal: decommissionDeviceModal } = useDecommissionListAction({
+    resourceType: 'Device',
+    onConfirm: async (deviceId: string, params) => {
+      await put<DeviceDecommission>(`devices/${deviceId}/decommission`, {
+        target: params?.target || DeviceDecommissionTargetType.DeviceDecommissionTargetTypeUnenroll,
+      });
+      setOnlyDecommissioned(true);
+    },
+  });
+
+  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+  const [canDecommission] = useAccessReview(RESOURCE.DEVICE_DECOMMISSION, VERB.UPDATE);
+
+  return (
+    <>
+      <DeviceTableToolbar
+        nameOrAlias={nameOrAlias}
+        setNameOrAlias={setNameOrAlias}
+        ownerFleets={ownerFleets}
+        setOwnerFleets={setOwnerFleets}
+        activeStatuses={activeStatuses}
+        setActiveStatuses={setActiveStatuses}
+        selectedLabels={selectedLabels}
+        setSelectedLabels={setSelectedLabels}
+        isFilterUpdating={isFilterUpdating}
+      >
+        <ToolbarItem>
+          <Button aria-label={t('Add devices')} onClick={() => setAddDeviceModal(true)}>
+            {t('Add devices')}
+          </Button>
+        </ToolbarItem>
+        {canDecommission && (
+          <ToolbarItem>
+            <Button
+              isDisabled={!hasSelectedRows}
+              onClick={() => setIsMassDecommissionModalOpen(true)}
+              variant="secondary"
+            >
+              {t('Decommission devices')}
+            </Button>
+          </ToolbarItem>
+        )}
+        <ToolbarItem alignSelf="center">
+          <Switch
+            id="enrolled-devices-switch"
+            label={t('Show only decommissioned devices')}
+            isChecked={false}
+            onChange={() => {
+              if (hasFiltersEnabled) {
+                setActiveStatuses({
+                  [FilterSearchParams.AppStatus]: [],
+                  [FilterSearchParams.DeviceStatus]: [],
+                  [FilterSearchParams.UpdatedStatus]: [],
+                });
+                setOwnerFleets([]);
+                setNameOrAlias('');
+                setSelectedLabels([]);
+              }
+              setOnlyDecommissioned(true);
+            }}
+            ouiaId={t('Show only decommissioned devices')}
+          />
+        </ToolbarItem>
+      </DeviceTableToolbar>
+      <Table
+        aria-label={t('Enrolled devices table')}
+        loading={isFilterUpdating}
+        columns={deviceColumns}
+        emptyFilters={!hasFiltersEnabled}
+        emptyData={devices.length === 0}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+      >
+        <Tbody>
+          {devices.map((device, index) => (
+            <EnrolledDeviceTableRow
+              key={device.metadata.name || ''}
+              device={device}
+              onRowSelect={onRowSelect}
+              isRowSelected={isRowSelected}
+              rowIndex={index}
+              canEdit={canEdit}
+              canDecommission={canDecommission}
+              decommissionAction={decommissionDeviceAction}
+            />
+          ))}
+        </Tbody>
+      </Table>
+      <TablePagination isUpdating={isFilterUpdating} pagination={pagination} />
+      {!hasFiltersEnabled && devices.length === 0 && (
+        <EnrolledDevicesEmptyState onAddDevice={() => setAddDeviceModal(true)} />
+      )}
+      {decommissionDeviceModal}
+      {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
+      {isMassDecommissionModalOpen && (
+        <MassDecommissionDeviceModal
+          onClose={() => setIsMassDecommissionModalOpen(false)}
+          devices={devices.filter(isRowSelected)}
+          onSuccess={() => {
+            setIsMassDecommissionModalOpen(false);
+            setOnlyDecommissioned(true);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default EnrolledDevicesTable;

package/src/components/Device/DevicesPage/useDevices.ts

@@ -1,6 +1,6 @@
 import { useDebounce } from 'use-debounce';
 
-import { Device, DeviceList, DevicesSummary } from '@flightctl/types';
+import { Device, DeviceLifecycleStatusType, DeviceList, DevicesSummary } from '@flightctl/types';
 import { FilterSearchParams } from '../../../utils/status/devices';
 import * as queryUtils from '../../../utils/query';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
@@ -12,16 +12,28 @@ type DevicesEndpointArgs = {
   nameOrAlias?: string;
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
+  onlyDecommissioned?: boolean;
   labels?: FlightCtlLabel[];
   summaryOnly?: boolean;
   nextContinue?: string;
 };
 
+const enrolledStatuses = [
+  DeviceLifecycleStatusType.DeviceLifecycleStatusEnrolled,
+  DeviceLifecycleStatusType.DeviceLifecycleStatusUnknown,
+];
+
+const decommissionedStatuses = [
+  DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioned,
+  DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioning,
+];
+
 const getDevicesEndpoint = ({
   nameOrAlias,
   ownerFleets,
   activeStatuses,
   labels,
+  onlyDecommissioned,
   nextContinue,
   summaryOnly,
 }: DevicesEndpointArgs) => {
@@ -45,6 +57,12 @@ const getDevicesEndpoint = ({
     );
   }
 
+  if (onlyDecommissioned) {
+    queryUtils.addQueryConditions(fieldSelectors, 'status.lifecycle.status', decommissionedStatuses);
+  } else if (summaryOnly) {
+    queryUtils.addQueryConditions(fieldSelectors, 'status.lifecycle.status', enrolledStatuses);
+  }
+
   const params = new URLSearchParams();
   if (fieldSelectors.length > 0) {
     params.set('fieldSelector', fieldSelectors.join(','));
@@ -65,6 +83,7 @@ const getDevicesEndpoint = ({
 export const useDevicesEndpoint = (args: DevicesEndpointArgs): [string, boolean] => {
   const endpoint = getDevicesEndpoint(args);
   const [devicesEndpointDebounced] = useDebounce(endpoint, 1000);
+
   return [devicesEndpointDebounced, endpoint !== devicesEndpointDebounced];
 };
 
@@ -88,6 +107,7 @@ export const useDevices = (args: {
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
+  onlyDecommissioned: boolean;
   nextContinue?: string;
   onPageFetched?: (data: DeviceList) => void;
 }): [Device[], boolean, unknown, boolean, VoidFunction] => {

package/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx

@@ -17,6 +17,7 @@ import { Device } from '@flightctl/types';
 import { EditDeviceFormValues } from './types';
 import { getErrorMessage } from '../../../utils/error';
 import { fromAPILabel } from '../../../utils/labels';
+import { getEditDisabledReason } from '../../../utils/devices';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
@@ -47,6 +48,8 @@ const EditDeviceWizard = () => {
   const deviceAlias = device?.metadata.labels?.alias || '';
   const displayText = device ? deviceAlias || t('Untitled') : deviceId;
 
+  const editDisabledReason = device ? getEditDisabledReason(device, t) : undefined;
+
   let body: React.ReactNode;
   if (isLoading) {
     body = (
@@ -60,10 +63,10 @@ const EditDeviceWizard = () => {
         {getErrorMessage(loadError)}
       </Alert>
     );
-  } else if (!!device?.metadata.owner) {
+  } else if (editDisabledReason) {
     body = (
       <Alert isInline variant="info" title={t('Device is non-editable')}>
-        {t('This device is managed by a fleet and it cannot be edited directly.')}
+        {editDisabledReason}
       </Alert>
     );
   } else if (device) {
@@ -120,7 +123,7 @@ const EditDeviceWizard = () => {
                 <WizardStep name={t('Device template')} id={deviceTemplateStepId} isDisabled={isTemplateStepDisabled}>
                   <DeviceTemplateStep isFleet={false} />
                 </WizardStep>
-                <WizardStep name={t('Review and update')} id={reviewDeviceStepId} isDisabled={!templateStepValid}>
+                <WizardStep name={t('Review and save')} id={reviewDeviceStepId} isDisabled={!templateStepValid}>
                   <ReviewDeviceStep error={submitError} />
                 </WizardStep>
               </Wizard>