@flightctl/ui-components 0.4.0 → 0.5.0-rc2

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

@@ -13,21 +13,22 @@ import {
 } from '@patternfly/react-core';
 
 import { Device } from '@flightctl/types';
+import { isDeviceEnrolled } from '../../../utils/devices';
 import { timeSinceText } from '../../../utils/dates';
-import DeviceStatus from '../../Status/DeviceStatus';
+
 import { useTranslation } from '../../../hooks/useTranslation';
-import EditLabelsForm from '../../modals/EditLabelsModal/EditLabelsForm';
+import EditLabelsForm, { ViewLabels } from '../../modals/EditLabelsModal/EditLabelsForm';
 import ResourceLink from '../../common/ResourceLink';
-import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+import WithHelperText from '../../common/WithHelperText';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
 import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
-import ApplicationSummaryStatus from '../../Status/ApplicationSummaryStatus';
-import WithHelperText from '../../common/WithHelperText';
-import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
-import DeviceResourceStatus from '../../Status/DeviceResourceStatus';
+import DeviceLifecycleStatus from '../../Status/DeviceLifecycleStatus';
 import DeviceFleet from './DeviceFleet';
 import DeviceOs from './DeviceOs';
 import DeviceApplications from './DeviceApplications';
+import StatusContent from './DeviceDetailsTabContent/StatusContent';
+import SystemResourcesContent from './DeviceDetailsTabContent/SystemResourcesContent';
 
 import './DeviceDetailsTab.css';
 
@@ -37,9 +38,13 @@ type DeviceDetailsTabProps = {
   canEdit: boolean;
 };
 
-const DeviceDetailsTab = ({ device, refetch, children, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+const EnrolledDeviceDetails = ({
+  device,
+  refetch,
+  children,
+  canEdit,
+}: React.PropsWithChildren<DeviceDetailsTabProps>) => {
   const { t } = useTranslation();
-
   return (
     <Grid hasGutter>
       <GridItem md={12}>
@@ -68,91 +73,92 @@ const DeviceDetailsTab = ({ device, refetch, children, canEdit }: React.PropsWit
                   <StackItem className="fctl-device-details-tab__label">{t('Labels')}</StackItem>
                 </Stack>
                 <StackItem>
-                  <EditLabelsForm device={device} onDeviceUpdate={refetch} canEdit={canEdit} />
+                  {canEdit ? (
+                    <EditLabelsForm device={device} onDeviceUpdate={refetch} />
+                  ) : (
+                    <ViewLabels device={device} />
+                  )}
                 </StackItem>
               </FlexItem>
             </Flex>
           </DetailsPageCardBody>
         </DetailsPageCard>
       </GridItem>
+      <GridItem md={12} lg={6}>
+        <StatusContent device={device} />
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <SystemResourcesContent device={device} />
+      </GridItem>
       <GridItem md={12} lg={6}>
         <DetailsPageCard>
-          <CardTitle>{t('System status')}</CardTitle>
+          <CardTitle>{t('Configurations')}</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>
+            <FlightControlDescriptionList columnModifier={{ default: '2Col' }}>
               <DescriptionListGroup>
-                <DescriptionListTerm>
-                  <WithHelperText
-                    content={t('Indicates the overall status of the device hardware and operating system.')}
-                    ariaLabel={t('Device status')}
-                    showLabel
-                  />{' '}
-                </DescriptionListTerm>
+                <DescriptionListTerm>{t('System image (running)')}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <DeviceStatus deviceStatus={device.status} />
+                  <DeviceOs desiredOsImage={device.spec?.os?.image} renderedOsImage={device.status?.os?.image} />
                 </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
-                  />
+                  {t('Sources ({{size}})', { size: device.spec?.config?.length || 0 })}
                 </DescriptionListTerm>
                 <DescriptionListDescription>
-                  <SystemUpdateStatus deviceStatus={device.status} />
+                  <RepositorySourceList configs={device.spec.config || []} />
                 </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}>
+        <DeviceApplications device={device} refetch={refetch} canEdit={canEdit} />
+      </GridItem>
+    </Grid>
+  );
+};
+
+const DecommissionedDeviceDetails = ({ device, children }: React.PropsWithChildren<{ device: Required<Device> }>) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid hasGutter>
+      <GridItem md={12}>
         <DetailsPageCard>
-          <CardTitle>{t('Resource status')}</CardTitle>
           <DetailsPageCardBody>
             <FlightControlDescriptionList columnModifier={{ default: '3Col' }}>
               <DescriptionListGroup>
-                <DescriptionListTerm>{t('CPU pressure')}</DescriptionListTerm>
+                <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <DeviceResourceStatus device={device} monitorType="cpu" />
+                  <ResourceLink id={device.metadata.name || '-'} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>{t('Disk pressure')}</DescriptionListTerm>
+                <DescriptionListTerm>
+                  <WithHelperText
+                    content={t(
+                      'Indicates whether the device is available to be managed and assigned to do work or is moving to an end-of-life state.',
+                    )}
+                    ariaLabel={t('Status')}
+                    showLabel
+                  />
+                </DescriptionListTerm>
                 <DescriptionListDescription>
-                  <DeviceResourceStatus device={device} monitorType="disk" />
+                  <DeviceLifecycleStatus device={device} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>{t('Memory pressure')}</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <DeviceResourceStatus device={device} monitorType="memory" />
-                </DescriptionListDescription>
+                <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
+                <DescriptionListDescription>{timeSinceText(t, device.status.lastSeen)}</DescriptionListDescription>
               </DescriptionListGroup>
+              {children}
             </FlightControlDescriptionList>
           </DetailsPageCardBody>
         </DetailsPageCard>
       </GridItem>
+
       <GridItem md={12} lg={6}>
         <DetailsPageCard>
           <CardTitle>{t('Configurations')}</CardTitle>
@@ -177,10 +183,21 @@ const DeviceDetailsTab = ({ device, refetch, children, canEdit }: React.PropsWit
         </DetailsPageCard>
       </GridItem>
       <GridItem md={12} lg={6}>
-        <DeviceApplications device={device} refetch={refetch} canEdit={canEdit} />
+        <DeviceApplications device={device} canEdit={false} />
       </GridItem>
     </Grid>
   );
 };
 
+const DeviceDetailsTab = ({ device, refetch, children, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+  const isEnrolled = isDeviceEnrolled(device);
+  return isEnrolled ? (
+    <EnrolledDeviceDetails device={device} refetch={refetch} canEdit={canEdit}>
+      {children}
+    </EnrolledDeviceDetails>
+  ) : (
+    <DecommissionedDeviceDetails device={device}>{children}</DecommissionedDeviceDetails>
+  );
+};
+
 export default DeviceDetailsTab;

package/src/components/Device/DeviceDetails/DeviceDetailsTabContent/StatusContent.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { timeSinceText } from '../../../../utils/dates';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import DetailsPageCard, { DetailsPageCardBody } from '../../../DetailsPage/DetailsPageCard';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import WithHelperText from '../../../common/WithHelperText';
+import ApplicationSummaryStatus from '../../../Status/ApplicationSummaryStatus';
+import DeviceStatus from '../../../Status/DeviceStatus';
+import SystemUpdateStatus from '../../../Status/SystemUpdateStatus';
+
+const StatusContent = ({ device }: { device: Required<Device> }) => {
+  const { t } = useTranslation();
+
+  return (
+    <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>
+  );
+};
+
+export default StatusContent;

package/src/components/Device/DeviceDetails/DeviceDetailsTabContent/SystemResourcesContent.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import DetailsPageCard, { DetailsPageCardBody } from '../../../DetailsPage/DetailsPageCard';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import DeviceResourceStatus from '../../../Status/DeviceResourceStatus';
+
+const SystemResourcesContent = ({ device }: { device: Required<Device> }) => {
+  const { t } = useTranslation();
+
+  return (
+    <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>
+  );
+};
+
+export default SystemResourcesContent;

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

@@ -23,10 +23,7 @@ const TerminalTab = ({ device }: TerminalTabProps) => {
     terminal.current?.onDataReceived(msg);
   }, []);
 
-  const { sendMessage, isClosed, error, reconnect } = useWebSocket(
-    `/api/terminal/${device.metadata.name}`,
-    onMsgReceived,
-  );
+  const { sendMessage, isClosed, error, reconnect } = useWebSocket(device.metadata.name || '', onMsgReceived);
 
   if (error) {
     return <ErrorAlert error={error} />;

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
+
+import { Device } from '@flightctl/types';
+import { timeSinceText } from '../../../utils/dates';
+import { ListAction } from '../../ListPage/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import ResourceLink from '../../common/ResourceLink';
+import DeviceLifecycleStatus from '../../Status/DeviceLifecycleStatus';
+
+type DecommissionedDeviceTableRowProps = {
+  device: Device;
+  rowIndex: number;
+  onRowSelect: (device: Device) => OnSelect;
+  isRowSelected: (device: Device) => boolean;
+  canDelete: boolean;
+  canEdit: boolean;
+  deleteAction: ListAction;
+};
+
+const DecommissionedDeviceTableRow = ({
+  device,
+  deleteAction,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+  canDelete,
+  canEdit,
+}: DecommissionedDeviceTableRowProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const deviceName = device.metadata.name as string;
+  const deviceAlias = device.metadata.labels?.alias;
+
+  return (
+    <Tr>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(device),
+          isSelected: isRowSelected(device),
+        }}
+      />
+      <Td dataLabel={t('Name')}>
+        <ResourceLink id={deviceName} routeLink={ROUTE.DEVICE_DETAILS} />
+      </Td>
+      <Td dataLabel={t('Device status')}>
+        <DeviceLifecycleStatus device={device} />
+      </Td>
+      <Td dataLabel={t('Last seen')}>{timeSinceText(t, device.status?.lastSeen)}</Td>
+      {canDelete && (
+        <Td isActionCell>
+          <ActionsColumn
+            items={[
+              ...(canEdit
+                ? [
+                    {
+                      title: t('Edit device configurations'),
+                      onClick: () => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceName }),
+                      isAriaDisabled: true,
+                      tooltipProps: {
+                        content: t('Device already started decommissioning and cannot be edited.'),
+                      },
+                    },
+                  ]
+                : []),
+              {
+                title: t('View device details'),
+                onClick: () => navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceName }),
+              },
+              ...(canDelete
+                ? [
+                    deleteAction({
+                      resourceId: deviceName,
+                      resourceName: deviceAlias,
+                    }),
+                  ]
+                : []),
+            ]}
+          />
+        </Td>
+      )}
+    </Tr>
+  );
+};
+
+export default DecommissionedDeviceTableRow;

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

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { Button, Switch, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+import { Tbody } from '@patternfly/react-table';
+import { TFunction } from 'react-i18next';
+
+import { Device, DeviceList } from '@flightctl/types';
+
+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 Table, { ApiSortTableColumn } from '../../Table/Table';
+import { useDeleteListAction } from '../../ListPage/ListPageActions';
+import TablePagination from '../../Table/TablePagination';
+import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
+import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
+import { DecommissionedDevicesEmptyState } from './DevicesEmptyStates';
+import DecommissionedDeviceTableRow from './DecommissionedDeviceTableRow';
+import DeviceNameOnlyToolbarFilter from './DeviceNameOnlyToolbarFilter';
+
+interface DecommissionedDevicesTableProps {
+  devices: Array<Device>;
+  refetch: VoidFunction;
+  nameOrAlias: string | undefined;
+  setOnlyDecommissioned: (check: boolean) => void;
+  setNameOrAlias: (text: string) => void;
+  hasFiltersEnabled: boolean;
+  isFilterUpdating: boolean;
+  pagination: Pick<PaginationDetails<DeviceList>, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+}
+
+const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Name'),
+  },
+  {
+    name: t('Status'),
+  },
+  {
+    name: t('Last seen'),
+  },
+];
+
+const DecommissionedDevicesTable = ({
+  devices,
+  refetch,
+  nameOrAlias,
+  setNameOrAlias,
+  hasFiltersEnabled,
+  setOnlyDecommissioned,
+  isFilterUpdating,
+  pagination,
+}: DecommissionedDevicesTableProps) => {
+  const { t } = useTranslation();
+  const [addDeviceModal, setAddDeviceModal] = React.useState(false);
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const { remove } = useFetch();
+  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { action: deleteDeviceAction, modal: deleteDeviceModal } = useDeleteListAction({
+    resourceType: 'Device',
+    onConfirm: async (resourceId: string) => {
+      await remove(`devices/${resourceId}`);
+      refetch();
+    },
+  });
+
+  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+
+  return (
+    <>
+      <Toolbar id="decommissioned-devices-toolbar" inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="search-filter">
+              <DeviceNameOnlyToolbarFilter nameOrAlias={nameOrAlias} setNameOrAlias={setNameOrAlias} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label={t('Add devices')} onClick={() => setAddDeviceModal(true)}>
+                {t('Add devices')}
+              </Button>
+            </ToolbarItem>
+            {canDelete && (
+              <ToolbarItem>
+                <Button
+                  isDisabled={!hasSelectedRows}
+                  onClick={() => setIsMassDeleteModalOpen(true)}
+                  variant="secondary"
+                >
+                  {t('Delete forever')}
+                </Button>
+              </ToolbarItem>
+            )}
+            <ToolbarItem alignSelf="center">
+              <Switch
+                id="decommissioned-devices-switch"
+                label={t('Show only decommissioned devices')}
+                isChecked
+                onChange={() => {
+                  setOnlyDecommissioned(false);
+                }}
+                ouiaId={t('Show only decommissioned devices')}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+        </ToolbarContent>
+      </Toolbar>
+      <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) => (
+            <DecommissionedDeviceTableRow
+              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 && <DecommissionedDevicesEmptyState />}
+      {deleteDeviceModal}
+      {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
+      {isMassDeleteModalOpen && (
+        <MassDeleteDeviceModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          resources={devices.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default DecommissionedDevicesTable;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import debounce from 'lodash/debounce';
+
+import TableTextSearch, { TableTextSearchProps } from '../../Table/TableTextSearch';
+
+import './DeviceToolbarFilters.css';
+
+type DeviceNameOnlyToolbarFilterProps = {
+  nameOrAlias?: TableTextSearchProps['value'];
+  setNameOrAlias: TableTextSearchProps['setValue'];
+};
+
+const DeviceNameOnlyToolbarFilter = ({ setNameOrAlias }: DeviceNameOnlyToolbarFilterProps) => {
+  const [typingText, setTypingText] = React.useState<string>('');
+  const debouncedSetParam = React.useMemo(
+    () =>
+      debounce((setValue: TableTextSearchProps['setValue'], value: string) => {
+        setValue(value || '');
+      }, 500),
+    [],
+  );
+
+  React.useEffect(() => {
+    debouncedSetParam(setNameOrAlias, typingText);
+  }, [typingText, setNameOrAlias, debouncedSetParam]);
+
+  return <TableTextSearch value={typingText} setValue={setTypingText} />;
+};
+
+export default DeviceNameOnlyToolbarFilter;

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import { Button, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import MicrochipIcon from '@patternfly/react-icons/dist/js/icons/microchip-icon';
+import BanIcon from '@patternfly/react-icons/dist/js/icons/ban-icon';
+
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import ResourceListEmptyState from '../../common/ResourceListEmptyState';
+
+type DevicesEmptyStateProps = {
+  onAddDevice: VoidFunction;
+};
+
+export const EnrolledDevicesEmptyState = ({ onAddDevice }: DevicesEmptyStateProps) => {
+  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 aria-label={t('Add devices')} onClick={onAddDevice}>
+            {t('Add devices')}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+export const DecommissionedDevicesEmptyState = () => {
+  const { t } = useTranslation();
+  return <ResourceListEmptyState icon={BanIcon} titleText={t('No decommissioning or decommissioned devices here!')} />;
+};