@flightctl/ui-components 0.0.10 → 0.4.0-rc2

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

@@ -1,24 +1,17 @@
 import * as React from 'react';
-import {
-  Button,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  PageSection,
-  PageSectionVariants,
-  ToolbarItem,
-} from '@patternfly/react-core';
-import { Tbody, ThProps } from '@patternfly/react-table';
+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, Fleet, FleetList } from '@flightctl/types';
+import { Device } 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';
@@ -29,6 +22,7 @@ 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 { useDevices } from './useDevices';
 import { useDeviceBackendFilters } from './useDeviceBackendFilters';
 import {
@@ -36,10 +30,11 @@ import {
   getDeviceStatusHelperText,
   getUpdateStatusHelperText,
 } from '../../Status/utils';
-import EnrollmentRequestList from './EnrollmentRequestList';
+import EnrollmentRequestList from '../../EnrollmentRequest/EnrollmentRequestList';
 import { FilterStatusMap } from './types';
-import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import { useApiTableSort } from '../../../hooks/useApiTableSort';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 
 type DeviceEmptyStateProps = {
   onAddDevice: VoidFunction;
@@ -47,13 +42,18 @@ type DeviceEmptyStateProps = {
 
 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>
-        <Trans t={t}>
-          You can add devices and label them to match fleets, or your can{' '}
-          <Link to={ROUTE.FLEET_CREATE}>start with a fleet</Link> and add devices into it.
-        </Trans>
+        {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>
@@ -67,36 +67,27 @@ const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
 const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Alias'),
-    // Sorting works on this field even though "alias" is actually a label
-    sortableField: 'metadata.alias',
   },
   {
     name: t('Name'),
-    sortableField: 'metadata.name',
   },
   {
     name: t('Fleet'),
-    sortableField: 'metadata.owner',
   },
   {
     name: t('Application status'),
     helperText: getApplicationStatusHelperText(t),
-    sortableField: 'status.applicationsSummary.status',
   },
   {
     name: t('Device status'),
     helperText: getDeviceStatusHelperText(t),
-    sortableField: 'status.summary.status',
-    defaultSort: true,
   },
   {
     name: t('Update status'),
     helperText: getUpdateStatusHelperText(t),
-    sortableField: 'status.updated.status',
   },
   {
     name: t('Last seen'),
-    sortableField: 'status.lastSeen',
   },
 ];
 
@@ -110,13 +101,12 @@ interface DeviceTableProps {
   setNameOrAlias: (text: string) => void;
   setOwnerFleets: (ownerFleets: string[]) => void;
   setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
-  allLabels: FlightCtlLabel[];
   selectedLabels: FlightCtlLabel[];
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
-  fleets: Fleet[];
   isFilterUpdating: boolean;
   deviceColumns: ApiSortTableColumn[];
-  getSortParams: (columnIndex: number) => ThProps['sort'];
+  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+  // getSortParams: (columnIndex: number) => ThProps['sort'];
 }
 
 export const DeviceTable = ({
@@ -128,14 +118,12 @@ export const DeviceTable = ({
   setOwnerFleets,
   activeStatuses,
   setActiveStatuses,
-  allLabels,
   selectedLabels,
   setSelectedLabels,
   hasFiltersEnabled,
-  fleets,
   isFilterUpdating,
   deviceColumns,
-  getSortParams,
+  pagination,
 }: DeviceTableProps) => {
   const { t } = useTranslation();
   const [addDeviceModal, setAddDeviceModal] = React.useState(false);
@@ -152,6 +140,9 @@ export const DeviceTable = ({
     },
   });
 
+  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+
   return (
     <>
       <DeviceTableToolbar
@@ -161,20 +152,20 @@ export const DeviceTable = ({
         setOwnerFleets={setOwnerFleets}
         activeStatuses={activeStatuses}
         setActiveStatuses={setActiveStatuses}
-        allLabels={allLabels}
         selectedLabels={selectedLabels}
         setSelectedLabels={setSelectedLabels}
-        fleets={fleets}
         isFilterUpdating={isFilterUpdating}
       >
         <ToolbarItem>
           <Button onClick={() => setAddDeviceModal(true)}>{t('Add devices')}</Button>
         </ToolbarItem>
-        <ToolbarItem>
-          <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
-            {t('Delete 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')}
@@ -182,7 +173,6 @@ export const DeviceTable = ({
         columns={deviceColumns}
         emptyFilters={!hasFiltersEnabled}
         emptyData={devices.length === 0}
-        getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
@@ -195,10 +185,13 @@ export const DeviceTable = ({
               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)} />}
@@ -216,7 +209,7 @@ export const DeviceTable = ({
   );
 };
 
-const DevicesPage = () => {
+const DevicesPage = ({ canListER }: { canListER: boolean }) => {
   const { t } = useTranslation();
   const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
 
@@ -231,30 +224,33 @@ const DevicesPage = () => {
     selectedLabels,
     setSelectedLabels,
   } = useDeviceBackendFilters();
-  const { getSortParams, sortField, direction } = useApiTableSort(deviceColumns);
-
-  const [data, loading, error, updating, refetch, allLabels] = useDevices({
+  const { currentPage, setCurrentPage, onPageFetched, nextContinue, itemCount } = useTablePagination();
+  const [data, loading, error, updating, refetch] = useDevices({
     nameOrAlias,
     ownerFleets,
     activeStatuses,
     labels: selectedLabels,
-    sortField,
-    direction,
+    nextContinue,
+    onPageFetched,
   });
 
-  const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
-    endpoint: 'fleets',
-  });
+  const pagination = React.useMemo(
+    () => ({
+      currentPage,
+      setCurrentPage,
+      itemCount,
+    }),
+    [currentPage, setCurrentPage, itemCount],
+  );
 
   return (
-    <PageSection variant={PageSectionVariants.light}>
-      <EnrollmentRequestList refetchDevices={refetch} />
+    <>
+      {canListER && <EnrollmentRequestList refetchDevices={refetch} />}
 
       <ListPage title={t('Devices')}>
-        <ListPageBody error={error || flError} loading={loading || flLoading}>
+        <ListPageBody error={error} loading={loading}>
           <DeviceTable
             devices={data}
-            allLabels={allLabels}
             refetch={refetch}
             nameOrAlias={nameOrAlias}
             setNameOrAlias={setNameOrAlias}
@@ -265,15 +261,25 @@ const DevicesPage = () => {
             setActiveStatuses={setActiveStatuses}
             selectedLabels={selectedLabels}
             setSelectedLabels={setSelectedLabels}
-            fleets={fleetsList?.items || []}
             isFilterUpdating={updating}
             deviceColumns={deviceColumns}
-            getSortParams={getSortParams}
+            pagination={pagination}
           />
         </ListPageBody>
       </ListPage>
-    </PageSection>
+    </>
+  );
+};
+
+const DevicesPageWithPermissions = () => {
+  const [canListDevice, deviceLoading] = useAccessReview(RESOURCE.DEVICE, VERB.LIST);
+  const [canListER, erLoading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.LIST);
+
+  return (
+    <PageWithPermissions loading={deviceLoading || erLoading} allowed={canListDevice || canListER}>
+      {canListDevice ? <DevicesPage canListER={canListER} /> : <EnrollmentRequestList isStandalone />}
+    </PageWithPermissions>
   );
 };
 
-export default DevicesPage;
+export default DevicesPageWithPermissions;

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

@@ -1,18 +1,6 @@
-import { DeviceSummaryStatus, FilterSearchParams } from '../../../utils/status/devices';
-import { StatusItem } from '../../../utils/status/common';
+import { FilterSearchParams } from '../../../utils/status/devices';
 import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedStatusType } from '@flightctl/types';
 
-type FilterOptionsProps<T extends DeviceSummaryStatus> = {
-  filter: string;
-  items: Array<StatusItem<T>>;
-  selectedFilters: Array<T>;
-  onClick: (value: string) => void;
-};
-
-export type FilterOptionsFC = <T extends DeviceSummaryStatus>(
-  props: FilterOptionsProps<T>,
-) => JSX.Element | JSX.Element[];
-
 export type FilterStatusMap = {
   [FilterSearchParams.AppStatus]: ApplicationsSummaryStatusType[];
   [FilterSearchParams.DeviceStatus]: DeviceSummaryStatusType[];

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

@@ -1,22 +1,20 @@
-import * as React from 'react';
 import { useDebounce } from 'use-debounce';
 
-import { Device, DeviceList, DevicesSummary, SortOrder } from '@flightctl/types';
+import { Device, DeviceList, DevicesSummary } from '@flightctl/types';
 import { FilterSearchParams } from '../../../utils/status/devices';
 import * as queryUtils from '../../../utils/query';
-import { fromAPILabel } from '../../../utils/labels';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { FilterStatusMap } from './types';
+import { PAGE_SIZE } from '../../../constants';
 
 type DevicesEndpointArgs = {
   nameOrAlias?: string;
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
-  sortField?: string;
-  direction?: string;
   summaryOnly?: boolean;
+  nextContinue?: string;
 };
 
 const getDevicesEndpoint = ({
@@ -24,8 +22,7 @@ const getDevicesEndpoint = ({
   ownerFleets,
   activeStatuses,
   labels,
-  sortField,
-  direction,
+  nextContinue,
   summaryOnly,
 }: DevicesEndpointArgs) => {
   const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
@@ -56,9 +53,11 @@ const getDevicesEndpoint = ({
   if (summaryOnly) {
     params.set('summaryOnly', 'true');
   }
-  if (sortField) {
-    params.set('sortBy', sortField);
-    params.set('sortOrder', direction || SortOrder.ASC);
+  if (nextContinue !== undefined) {
+    params.set('limit', `${PAGE_SIZE}`);
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
   }
   return params.size ? `devices?${params.toString()}` : 'devices';
 };
@@ -89,35 +88,17 @@ export const useDevices = (args: {
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
-  sortField?: string;
-  direction?: string;
-}): [Device[], boolean, unknown, boolean, VoidFunction, FlightCtlLabel[]] => {
-  const [deviceLabelList] = useFetchPeriodically<DeviceList>({
-    endpoint: 'devices',
-  });
+  nextContinue?: string;
+  onPageFetched?: (data: DeviceList) => void;
+}): [Device[], boolean, unknown, boolean, VoidFunction] => {
   const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint(args);
-  const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>({
-    endpoint: devicesEndpoint,
-  });
-
-  const allLabels = React.useMemo(() => {
-    const labelsSet = new Set<FlightCtlLabel>();
 
-    deviceLabelList?.items.forEach((device) => {
-      const deviceLabels = fromAPILabel(device.metadata.labels || {}).filter((label) => label.key !== 'alias');
-      deviceLabels.forEach((label) => {
-        labelsSet.add(label);
-      });
-    });
-    return Array.from(labelsSet);
-  }, [deviceLabelList]);
+  const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>(
+    {
+      endpoint: devicesEndpoint,
+    },
+    args.onPageFetched,
+  );
 
-  return [
-    devicesList?.items || [],
-    devicesLoading,
-    devicesError,
-    updating || devicesDebouncing,
-    devicesRefetch,
-    allLabels || [],
-  ];
+  return [devicesList?.items || [], devicesLoading, devicesError, updating || devicesDebouncing, devicesRefetch];
 };

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

@@ -25,11 +25,14 @@ import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './st
 import DeviceTemplateStep, { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
 import ReviewDeviceStep, { reviewDeviceStepId } from './steps/ReviewDeviceStep';
 import { getDevicePatches, getValidationSchema } from './utils';
-import { getApplicationValues, getConfigTemplatesValues } from './deviceSpecUtils';
+import { getApplicationValues, getConfigTemplatesValues, hasMicroshiftRegistrationConfig } from './deviceSpecUtils';
 import { useFetch } from '../../../hooks/useFetch';
 import { useEditDevice } from './useEditDevice';
 import EditDeviceWizardNav from './EditDeviceWizardNav';
 import EditDeviceWizardFooter from './EditDeviceWizardFooter';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 
 import './EditDeviceWizard.css';
 
@@ -64,15 +67,18 @@ const EditDeviceWizard = () => {
       </Alert>
     );
   } else if (device) {
+    const registerMicroShift = hasMicroshiftRegistrationConfig(device.spec);
     body = (
       <Formik<EditDeviceFormValues>
         initialValues={{
           deviceAlias,
-          osImage: device.spec?.os?.image,
+          osImage: device.spec?.os?.image || '',
           labels: fromAPILabel(device.metadata.labels || {}).filter((label) => label.key !== 'alias'),
-          configTemplates: getConfigTemplatesValues(device.spec),
+          configTemplates: getConfigTemplatesValues(device.spec, registerMicroShift),
           fleetMatch: '', // Initially this is always a fleetless device
           applications: getApplicationValues(device.spec),
+          systemdUnits: [],
+          registerMicroShift,
         }}
         validationSchema={getValidationSchema(t)}
         validateOnMount
@@ -102,6 +108,11 @@ const EditDeviceWizard = () => {
                 className="fctl-edit-device__wizard"
                 footer={<EditDeviceWizardFooter />}
                 nav={<EditDeviceWizardNav />}
+                onStepChange={() => {
+                  if (submitError) {
+                    setSubmitError(undefined);
+                  }
+                }}
               >
                 <WizardStep name={t('General info')} id={generalInfoStepId}>
                   <GeneralInfoStep />
@@ -147,4 +158,13 @@ const EditDeviceWizard = () => {
   );
 };
 
-export default EditDeviceWizard;
+const EditDeviceWizardWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <EditDeviceWizard />
+    </PageWithPermissions>
+  );
+};
+
+export default EditDeviceWizardWithPermissions;