@flightctl/ui-components 0.7.2 → 0.8.0-rc1

package/src/components/modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Alert, Button, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { Device, EnrollmentRequest } from '@flightctl/types';
@@ -44,72 +45,69 @@ const MassDeleteDeviceModal: React.FC<MassDeleteDeviceModalProps> = ({ onClose,
       onDeleteSuccess();
     }
   };
+
   return (
-    <Modal
-      title={t('Delete devices ?')}
-      isOpen
-      onClose={onClose}
-      showClose={!isDeleting}
-      titleIconVariant="warning"
-      variant="medium"
-      actions={[
+    <Modal isOpen onClose={isDeleting ? undefined : onClose} variant="medium">
+      <ModalHeader title={t('Delete devices ?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>{t('Are you sure you want to delete the following devices ?')}</StackItem>
+          <StackItem>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{t('Alias')}</Th>
+                  <Th>{t('Name')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {resources.map((resource) => {
+                  return (
+                    <Tr key={resource.metadata.name}>
+                      <Td dataLabel={t('Alias')}>{resource.metadata.labels?.alias || '-'}</Td>
+                      <Td dataLabel={t('Name')}>
+                        <ResourceLink id={resource.metadata.name as string} />
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </Tbody>
+            </Table>
+          </StackItem>
+          {isDeleting && (
+            <StackItem>
+              <Progress
+                value={progress}
+                min={0}
+                max={totalProgress}
+                title={t('Deleting...')}
+                measureLocation={ProgressMeasureLocation.top}
+                label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+              />
+            </StackItem>
+          )}
+          {errors?.length && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <Stack hasGutter>
+                  {errors.map((e, index) => (
+                    <StackItem key={index}>{e}</StackItem>
+                  ))}
+                </Stack>
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
           {t('Delete devices')}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>{t('Are you sure you want to delete the following devices ?')}</StackItem>
-        <StackItem>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{t('Alias')}</Th>
-                <Th>{t('Name')}</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {resources.map((resource) => {
-                return (
-                  <Tr key={resource.metadata.name}>
-                    <Td dataLabel={t('Alias')}>{resource.metadata.labels?.alias || '-'}</Td>
-                    <Td dataLabel={t('Name')}>
-                      <ResourceLink id={resource.metadata.name as string} />
-                    </Td>
-                  </Tr>
-                );
-              })}
-            </Tbody>
-          </Table>
-        </StackItem>
-        {isDeleting && (
-          <StackItem>
-            <Progress
-              value={progress}
-              min={0}
-              max={totalProgress}
-              title={t('Deleting...')}
-              measureLocation={ProgressMeasureLocation.top}
-              label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-              valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-            />
-          </StackItem>
-        )}
-        {errors?.length && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <Stack hasGutter>
-                {errors.map((e, index) => (
-                  <StackItem key={index}>{e}</StackItem>
-                ))}
-              </Stack>
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/modals/massModals/MassDeleteFleetModal/MassDeleteFleetModal.tsx

@@ -3,12 +3,12 @@ import {
   Alert,
   Button,
   ExpandableSection,
-  Modal,
   Progress,
   ProgressMeasureLocation,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { Fleet } from '@flightctl/types';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
@@ -85,107 +85,100 @@ const MassDeleteFleetModal: React.FC<MassDeleteFleetModalProps> = ({ onClose, fl
 
   if (fleetsToDelete.length === 0) {
     return (
-      <Modal
-        title={t('Delete fleets')}
-        isOpen
-        onClose={onClose}
-        showClose
-        variant="medium"
-        actions={[
-          <Button key="close" variant="primary" onClick={onClose}>
-            {t('Close')}
-          </Button>,
-        ]}
-      >
-        <Stack hasGutter>
-          <StackItem>
-            <Alert
-              variant="info"
-              isInline
-              title={t(
-                'All the fleets you selected are managed by a resource sync and cannot be deleted. You can remove each fleet individually. Alternatively, to delete multiple fleets, first delete the resource syncs from the related repositories inside the "Repositories" tab.',
-              )}
-            />
-          </StackItem>
-          <StackItem>
-            <MassDeleteFleetTable fleets={fleets} />
-          </StackItem>
-        </Stack>
-      </Modal>
-    );
-  }
-
-  return (
-    <Modal
-      title={t('Delete fleets ?')}
-      isOpen
-      onClose={onClose}
-      showClose={!isDeleting}
-      variant="medium"
-      titleIconVariant="warning"
-      actions={[
-        <Button key="delete" variant="danger" onClick={deleteFleets} isLoading={isDeleting} isDisabled={isDeleting}>
-          {t('Delete fleets')}
-        </Button>,
-        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
-          {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          {t(
-            'The following fleets will be deleted and as a result, the devices managed by them will be left unmanaged. Are you sure you want to delete the listed fleets?',
-          )}
-        </StackItem>
-        <StackItem>
-          <MassDeleteFleetTable fleets={fleetsToDelete} />
-        </StackItem>
-
-        {fleetsToSkip.length > 0 && (
-          <>
+      <Modal isOpen onClose={onClose} variant="medium">
+        <ModalHeader title={t('Delete fleets')} />
+        <ModalBody>
+          <Stack hasGutter>
             <StackItem>
               <Alert
                 variant="info"
                 isInline
                 title={t(
-                  `Some fleets you selected are managed by a resource sync and cannot be deleted. To remove those fleets, delete the resource syncs from the related repositories inside the "Repositories" tab.`,
+                  'All the fleets you selected are managed by a resource sync and cannot be deleted. You can remove each fleet individually. Alternatively, to delete multiple fleets, first delete the resource syncs from the related repositories inside the "Repositories" tab.',
                 )}
               />
             </StackItem>
             <StackItem>
-              <ExpandableSection toggleText={t('Show fleets')}>
-                <MassDeleteFleetTable fleets={fleetsToSkip} />
-              </ExpandableSection>
+              <MassDeleteFleetTable fleets={fleets} />
             </StackItem>
-          </>
-        )}
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="close" variant="primary" onClick={onClose}>
+            {t('Close')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
 
-        {isDeleting && (
+  return (
+    <Modal isOpen onClose={isDeleting ? undefined : onClose} variant="medium">
+      <ModalHeader title={t('Delete fleets ?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
           <StackItem>
-            <Progress
-              value={progress}
-              min={0}
-              max={progressTotal}
-              title={t('Deleting...')}
-              measureLocation={ProgressMeasureLocation.top}
-              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-            />
+            {t(
+              'The following fleets will be deleted and as a result, the devices managed by them will be left unmanaged. Are you sure you want to delete the listed fleets?',
+            )}
           </StackItem>
-        )}
-        {errors?.length && (
           <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <Stack hasGutter>
-                {errors.map((e, index) => (
-                  <StackItem key={index}>{e}</StackItem>
-                ))}
-              </Stack>
-            </Alert>
+            <MassDeleteFleetTable fleets={fleetsToDelete} />
           </StackItem>
-        )}
-      </Stack>
+
+          {fleetsToSkip.length > 0 && (
+            <>
+              <StackItem>
+                <Alert
+                  variant="info"
+                  isInline
+                  title={t(
+                    `Some fleets you selected are managed by a resource sync and cannot be deleted. To remove those fleets, delete the resource syncs from the related repositories inside the "Repositories" tab.`,
+                  )}
+                />
+              </StackItem>
+              <StackItem>
+                <ExpandableSection toggleText={t('Show fleets')}>
+                  <MassDeleteFleetTable fleets={fleetsToSkip} />
+                </ExpandableSection>
+              </StackItem>
+            </>
+          )}
+
+          {isDeleting && (
+            <StackItem>
+              <Progress
+                value={progress}
+                min={0}
+                max={progressTotal}
+                title={t('Deleting...')}
+                measureLocation={ProgressMeasureLocation.top}
+                label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+                valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              />
+            </StackItem>
+          )}
+          {errors?.length && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <Stack hasGutter>
+                  {errors.map((e, index) => (
+                    <StackItem key={index}>{e}</StackItem>
+                  ))}
+                </Stack>
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button key="delete" variant="danger" onClick={deleteFleets} isLoading={isDeleting} isDisabled={isDeleting}>
+          {t('Delete fleets')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Alert, Button, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { Repository, ResourceSyncList } from '@flightctl/types';
@@ -88,14 +89,71 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
   }, [fetchResourceSyncsCount]);
 
   return (
-    <Modal
-      title={t('Delete repositories ?')}
-      isOpen
-      onClose={onClose}
-      showClose={!isDeleting}
-      variant="medium"
-      titleIconVariant="warning"
-      actions={[
+    <Modal isOpen onClose={isDeleting ? undefined : onClose} variant="medium">
+      <ModalHeader title={t('Delete repositories ?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          {isLoading && <>{t('Please wait while the repository details are loading')}</>}
+          {!isLoading && (
+            <>
+              <StackItem>{t('Are you sure you want to delete the following repositories ?')}</StackItem>
+              <StackItem>
+                <Alert variant="warning" title={t('Resource syncs will also be deleted')} isInline>
+                  {t(
+                    'Note that all the resource syncs of the selected repositories will also be deleted. Any fleet that is being managed by those resource syncs will become unmanaged.',
+                  )}
+                </Alert>
+              </StackItem>
+              <StackItem>
+                <Table>
+                  <Thead>
+                    <Tr>
+                      <Th modifier="fitContent">{t('Repository name')}</Th>
+                      <Th modifier="fitContent">{t('# Resource syncs')}</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {repositories.map((repository) => {
+                      const repositoryId = repository.metadata.name || '';
+                      return (
+                        <Tr key={repositoryId}>
+                          <Td dataLabel={t('Repository name')}>{repositoryId}</Td>
+                          <Td dataLabel={t('# Resource syncs')}>{resourceSyncCount[repositoryId] || '0'}</Td>
+                        </Tr>
+                      );
+                    })}
+                  </Tbody>
+                </Table>
+              </StackItem>
+            </>
+          )}
+          {isDeleting && (
+            <StackItem>
+              <Progress
+                value={progress}
+                min={0}
+                max={progressTotal}
+                title={t('Deleting...')}
+                measureLocation={ProgressMeasureLocation.top}
+                label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+                valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              />
+            </StackItem>
+          )}
+          {errors?.length && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <Stack hasGutter>
+                  {errors.map((e, index) => (
+                    <StackItem key={index}>{e}</StackItem>
+                  ))}
+                </Stack>
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="delete"
           variant="danger"
@@ -104,72 +162,11 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
           isDisabled={isLoading || isDeleting}
         >
           {t('Delete repositories')}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        {isLoading && <>{t('Please wait while the repository details are loading')}</>}
-        {!isLoading && (
-          <>
-            <StackItem>{t('Are you sure you want to delete the following repositories ?')}</StackItem>
-            <StackItem>
-              <Alert variant="warning" title={t('Resource syncs will also be deleted')} isInline>
-                {t(
-                  'Note that all the resource syncs of the selected repositories will also be deleted. Any fleet that is being managed by those resource syncs will become unmanaged.',
-                )}
-              </Alert>
-            </StackItem>
-            <StackItem>
-              <Table>
-                <Thead>
-                  <Tr>
-                    <Th modifier="fitContent">{t('Repository name')}</Th>
-                    <Th modifier="fitContent">{t('# Resource syncs')}</Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {repositories.map((repository) => {
-                    const repositoryId = repository.metadata.name || '';
-                    return (
-                      <Tr key={repositoryId}>
-                        <Td dataLabel={t('Repository name')}>{repositoryId}</Td>
-                        <Td dataLabel={t('# Resource syncs')}>{resourceSyncCount[repositoryId] || '0'}</Td>
-                      </Tr>
-                    );
-                  })}
-                </Tbody>
-              </Table>
-            </StackItem>
-          </>
-        )}
-        {isDeleting && (
-          <StackItem>
-            <Progress
-              value={progress}
-              min={0}
-              max={progressTotal}
-              title={t('Deleting...')}
-              measureLocation={ProgressMeasureLocation.top}
-              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-            />
-          </StackItem>
-        )}
-        {errors?.length && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <Stack hasGutter>
-                {errors.map((e, index) => (
-                  <StackItem key={index}>{e}</StackItem>
-                ))}
-              </Stack>
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/modals/massModals/MassDeleteResourceSyncModal/MassDeleteResourceSyncModal.tsx

@@ -1,9 +1,11 @@
-import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
-import { ResourceSync } from '@flightctl/types';
 import * as React from 'react';
+import { Alert, Button, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { ResourceSync } from '@flightctl/types';
 import { getErrorMessage } from '../../../../utils/error';
 import { useFetch } from '../../../../hooks/useFetch';
-import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { isPromiseRejected } from '../../../../types/typeUtils';
 
@@ -45,70 +47,67 @@ const MassDeleteResourceSyncModal: React.FC<MassDeleteResourceSyncModalProps> =
     }
   };
   return (
-    <Modal
-      title={t('Delete resource syncs')}
-      isOpen
-      onClose={onClose}
-      showClose={!isDeleting}
-      variant="medium"
-      actions={[
+    <Modal isOpen onClose={isDeleting ? undefined : onClose} variant="medium">
+      <ModalHeader title={t('Delete resource syncs')} />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>{t('Are you sure you want to delete the following resource syncs?')}</StackItem>
+          <StackItem>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{t('Name')}</Th>
+                  <Th>{t('Revision')}</Th>
+                  <Th>{t('Path')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {resources.map((resource) => {
+                  return (
+                    <Tr key={resource.metadata.name}>
+                      <Td dataLabel={t('Name')}>{resource.metadata.name || '-'}</Td>
+                      <Td dataLabel={t('Target revision')}>{resource.spec.targetRevision || '-'}</Td>
+                      <Td dataLabel={t('Path')}>{resource.spec.path || '-'}</Td>
+                    </Tr>
+                  );
+                })}
+              </Tbody>
+            </Table>
+          </StackItem>
+          {isDeleting && (
+            <StackItem>
+              <Progress
+                value={progress}
+                min={0}
+                max={progressTotal}
+                title={t('Deleting...')}
+                measureLocation={ProgressMeasureLocation.top}
+                label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+                valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              />
+            </StackItem>
+          )}
+          {errors?.length && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <Stack hasGutter>
+                  {errors.map((e, index) => (
+                    <StackItem key={index}>{e}</StackItem>
+                  ))}
+                </Stack>
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
           {t('Delete')}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>{t('Are you sure you want to delete the following resource syncs ?')}</StackItem>
-        <StackItem>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{t('Name')}</Th>
-                <Th>{t('Revision')}</Th>
-                <Th>{t('Path')}</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {resources.map((resource) => {
-                return (
-                  <Tr key={resource.metadata.name}>
-                    <Td dataLabel={t('Name')}>{resource.metadata.name || '-'}</Td>
-                    <Td dataLabel={t('Target revision')}>{resource.spec.targetRevision || '-'}</Td>
-                    <Td dataLabel={t('Path')}>{resource.spec.path || '-'}</Td>
-                  </Tr>
-                );
-              })}
-            </Tbody>
-          </Table>
-        </StackItem>
-        {isDeleting && (
-          <StackItem>
-            <Progress
-              value={progress}
-              min={0}
-              max={progressTotal}
-              title={t('Deleting...')}
-              measureLocation={ProgressMeasureLocation.top}
-              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
-            />
-          </StackItem>
-        )}
-        {errors?.length && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <Stack hasGutter>
-                {errors.map((e, index) => (
-                  <StackItem key={index}>{e}</StackItem>
-                ))}
-              </Stack>
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/constants.ts

@@ -1,5 +1,6 @@
 const APP_TITLE = 'Edge Manager';
 const API_VERSION = 'v1alpha1';
 const PAGE_SIZE = 15;
+const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
 
-export { APP_TITLE, API_VERSION, PAGE_SIZE };
+export { APP_TITLE, API_VERSION, PAGE_SIZE, EVENT_PAGE_SIZE };