@flightctl/ui-components 0.0.3 → 0.0.5

package/dist/src/utils/status/repository.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.repositoryStatusLabels = exports.getObservedHash = exports.getRepositoryLastTransitionTime = exports.getRepositorySyncStatus = void 0;
+exports.repositoryStatusLabels = exports.getObservedHash = exports.getLastTransitionTimeText = exports.getRepositorySyncStatus = exports.getLastTransitionTime = void 0;
 const types_1 = require("@flightctl/types");
 const dates_1 = require("../dates");
 const error_1 = require("../error");
@@ -64,21 +64,25 @@ const getRepositorySyncStatus = (repository, t = (s) => s) => {
     };
 };
 exports.getRepositorySyncStatus = getRepositorySyncStatus;
-const getRepositoryLastTransitionTime = (repository, t = (s) => s) => {
-    var _a;
-    const conditions = (_a = repository.status) === null || _a === void 0 ? void 0 : _a.conditions;
+const getLastTransitionTime = (conditions) => {
     let lastTime = undefined;
     conditions === null || conditions === void 0 ? void 0 : conditions.forEach((condition) => {
         if (!lastTime || (!!condition.lastTransitionTime && condition.lastTransitionTime > lastTime)) {
             lastTime = condition.lastTransitionTime;
         }
     });
+    return lastTime;
+};
+exports.getLastTransitionTime = getLastTransitionTime;
+const getLastTransitionTimeText = (repository, t = (s) => s) => {
+    var _a;
+    const lastTime = (0, exports.getLastTransitionTime)((_a = repository.status) === null || _a === void 0 ? void 0 : _a.conditions);
     return {
         text: lastTime ? (0, dates_1.timeSinceText)(t, lastTime) : 'N/A',
         timestamp: lastTime || '0',
     };
 };
-exports.getRepositoryLastTransitionTime = getRepositoryLastTransitionTime;
+exports.getLastTransitionTimeText = getLastTransitionTimeText;
 const getObservedHash = (resourceSync) => {
     var _a;
     const lastHash = (_a = resourceSync.status) === null || _a === void 0 ? void 0 : _a.observedCommit;

package/dist/src/utils/status/repository.js.map

@@ -1 +1 @@
-{"version":3,"file":"repository.js","sourceRoot":"","sources":["../../../../src/utils/status/repository.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"repository.js","sourceRoot":"","sources":["../../../../src/utils/status/repository.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/status/system.d.ts

@@ -0,0 +1,6 @@
+import { TFunction } from 'react-i18next';
+import { DeviceUpdatedStatusType as UpdatedStatus } from '@flightctl/types';
+import { StatusItem } from './common';
+export declare const getSystemUpdateStatusItems: (t: TFunction) => StatusItem<UpdatedStatus>[];
+export declare const systemUpdateStatusOrder: UpdatedStatus[];
+//# sourceMappingURL=system.d.ts.map

package/dist/src/utils/status/system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../../../src/utils/status/system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,uBAAuB,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,eAAO,MAAM,0BAA0B,MAAO,SAAS,KAAG,WAAW,aAAa,CAAC,EAqBlF,CAAC;AACF,eAAO,MAAM,uBAAuB,iBAAsE,CAAC"}

package/dist/src/utils/status/system.js

@@ -3,11 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.systemUpdateStatusOrder = exports.getSystemUpdateStatusItems = void 0;
 const types_1 = require("@flightctl/types");
 const getSystemUpdateStatusItems = (t) => [
-    {
-        id: types_1.DeviceUpdatedStatusType.DeviceUpdatedStatusUpToDate,
-        label: t('Up-to-date'),
-        level: 'success',
-    },
     {
         id: types_1.DeviceUpdatedStatusType.DeviceUpdatedStatusOutOfDate,
         label: t('Out-of-date'),
@@ -23,6 +18,11 @@ const getSystemUpdateStatusItems = (t) => [
         label: t('Unknown'),
         level: 'unknown',
     },
+    {
+        id: types_1.DeviceUpdatedStatusType.DeviceUpdatedStatusUpToDate,
+        label: t('Up-to-date'),
+        level: 'success',
+    },
 ];
 exports.getSystemUpdateStatusItems = getSystemUpdateStatusItems;
 exports.systemUpdateStatusOrder = (0, exports.getSystemUpdateStatusItems)((s) => s).map((item) => item.id);

package/dist/src/utils/status/system.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.js","sourceRoot":"","sources":["../../../../src/utils/status/system.ts"],"names":[],"mappings":";;;AAEA,4CAA4E;AAGrE,MAAM,0BAA0B,GAAG,CAAC,CAAY,EAA+B,EAAE,CAAC;IACvF;QACE,EAAE,EAAE,+BAAa,CAAC,2BAA2B;QAC7C,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC;QACtB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,4BAA4B;QAC9C,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;QACvB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,2BAA2B;QAC7C,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;QACpB,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,0BAA0B;QAC5C,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;QACnB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AArBW,QAAA,0BAA0B,8BAqBrC;AACW,QAAA,uBAAuB,GAAG,IAAA,kCAA0B,EAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"system.js","sourceRoot":"","sources":["../../../../src/utils/status/system.ts"],"names":[],"mappings":";;;AAEA,4CAA4E;AAGrE,MAAM,0BAA0B,GAAG,CAAC,CAAY,EAA+B,EAAE,CAAC;IACvF;QACE,EAAE,EAAE,+BAAa,CAAC,4BAA4B;QAC9C,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;QACvB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,2BAA2B;QAC7C,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;QACpB,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,0BAA0B;QAC5C,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;QACnB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAa,CAAC,2BAA2B;QAC7C,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC;QACtB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AArBW,QAAA,0BAA0B,8BAqBrC;AACW,QAAA,uBAAuB,GAAG,IAAA,kCAA0B,EAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@flightctl/ui-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Components for Flightctl UI",
   "repository": "https://github.com/flightctl/flightctl-ui.git",
   "homepage": "https://github.com/flightctl/flightctl-ui.git",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
+  "exports": {
+    "./*": {
+      "source": "./src/*",
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*"
+    }
+  },
   "private": false,
   "scripts": {
     "prebuild": "tsc --noEmit && rimraf dist",
@@ -42,7 +50,7 @@
     "i18next": ">=21.8.14",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1",
-    "react-i18next": "^11.7.3",
+    "react-i18next": ">=11.7.3",
     "react-router-dom": "^6.22.0"
   }
 }

package/src/components/DetailsPage/DetailsNotFound.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  PageSection,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { Trans } from 'react-i18next';
+import { useTranslation } from '../../hooks/useTranslation';
+import { TFunction } from 'i18next';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+
+interface DetailsNotFoundProps {
+  kind: string;
+  id: string;
+}
+
+const getKindMsgs = (t: TFunction, kind: string, id: string) => {
+  switch (kind) {
+    case 'Fleets':
+      return {
+        title: t('Fleet not found'),
+        msg: (
+          <Trans t={t}>
+            We could not find the fleet with id <strong>{id}</strong>
+          </Trans>
+        ),
+      };
+    case 'Devices':
+      return {
+        title: t('Device not found'),
+        msg: (
+          <Trans t={t}>
+            We could not find the device with id <strong>{id}</strong>
+          </Trans>
+        ),
+      };
+    case 'Repositories':
+      return {
+        title: t('Repository not found'),
+        msg: (
+          <Trans t={t}>
+            We could not find the repository with id <strong>{id}</strong>
+          </Trans>
+        ),
+      };
+    case 'Enrollment requests':
+      return {
+        title: t('Enrollment request not found'),
+        msg: (
+          <Trans t={t}>
+            We could not find the enrollment request with id <strong>{id}</strong>
+          </Trans>
+        ),
+      };
+    default:
+      return {
+        title: kind.toLowerCase(),
+        msg: '',
+      };
+  }
+};
+
+const DetailsNotFound = ({ kind, id }: DetailsNotFoundProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const tryAgain = () => {
+    navigate(0);
+  };
+
+  const { title, msg } = getKindMsgs(t, kind, id);
+
+  return (
+    <PageSection>
+      <EmptyState variant="full">
+        <EmptyStateHeader
+          titleText={title}
+          icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />}
+          headingLevel="h1"
+        />
+        <EmptyStateBody>
+          <Stack>
+            <StackItem>{msg}</StackItem>
+            <StackItem>
+              <small>{t('This page will continue to attempt to fetch the details')}</small>
+            </StackItem>
+          </Stack>
+        </EmptyStateBody>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary" onClick={() => navigate(ROUTE.ROOT)}>
+              {t('Take me home')}
+            </Button>
+          </EmptyStateActions>
+          <EmptyStateActions>
+            <Button variant="link" onClick={tryAgain}>
+              {t('Try refreshing manually')}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      </EmptyState>
+    </PageSection>
+  );
+};
+
+export default DetailsNotFound;

package/src/components/DetailsPage/DetailsPage.css

@@ -0,0 +1,3 @@
+.fctl-details-page__nav {
+    padding-top: 0
+}

package/src/components/DetailsPage/DetailsPage.spec.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+
+import { checkAccessibility, render, screen } from '../../tests/test-utils';
+
+import DetailsPage, { type DetailsPageProps } from './DetailsPage';
+import { Button } from '@patternfly/react-core';
+import { ROUTE } from '../../hooks/useNavigate';
+
+const baseProps: DetailsPageProps = {
+  id: 'device-id',
+  title: 'MyTitle',
+  children: null,
+  error: null,
+  loading: false,
+  resourceLink: ROUTE.DEVICES,
+  resourceType: 'Devices',
+  resourceTypeLabel: 'Devices',
+  actions: undefined,
+  nav: undefined,
+};
+
+describe('Details page', () => {
+  it('is accessible', async () => {
+    const { container } = render(<DetailsPage {...baseProps}>Content</DetailsPage>);
+
+    await checkAccessibility(container);
+  });
+
+  describe('loading state', () => {
+    it('Shows a spinner and not the content when data is loading', () => {
+      render(
+        <DetailsPage {...baseProps} loading>
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+      expect(screen.queryByText('Content')).not.toBeInTheDocument();
+    });
+
+    it('Shows the content and not the spinner when it is not loading', () => {
+      render(<DetailsPage {...baseProps}>Content</DetailsPage>);
+
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('when in error state', () => {
+    const error = new Error('something bad happened');
+    it('shows the error message', () => {
+      render(
+        <DetailsPage {...baseProps} error={error}>
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByText('Failed to retrieve resource details')).toBeInTheDocument();
+      expect(screen.getByText('something bad happened')).toBeInTheDocument();
+    });
+
+    it('does not show the content', () => {
+      render(
+        <DetailsPage {...baseProps} error={error}>
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByText('something bad happened')).toBeInTheDocument();
+      expect(screen.queryByText('Content')).not.toBeInTheDocument();
+    });
+
+    it('shows PageNotFound if error is 404', () => {
+      const error404 = new Error('Error 404: Not Found');
+      render(
+        <DetailsPage {...baseProps} error={error404}>
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByText('Device not found')).toBeInTheDocument();
+      expect(screen.queryByText('Content')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Content', () => {
+    it('shows a link to the parent section', () => {
+      render(<DetailsPage {...baseProps}>Content</DetailsPage>);
+
+      expect(screen.getByRole('link')).toHaveTextContent('Devices');
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/devicemanagement/devices');
+    });
+
+    it('shows the title over the id', () => {
+      render(
+        <DetailsPage {...baseProps} title="MyTitle" id="device-id">
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByRole('heading')).toHaveTextContent('MyTitle');
+      expect(screen.queryByText('device-id')).not.toBeInTheDocument();
+    });
+
+    it('shows the id when the title is missing', () => {
+      render(
+        <DetailsPage {...baseProps} title="" id="device-id">
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByRole('heading')).toHaveTextContent('device-id');
+    });
+  });
+
+  describe('Actions', () => {
+    it('shows the actions', () => {
+      const action = <Button variant="primary">Some action</Button>;
+      render(
+        <DetailsPage {...baseProps} actions={action}>
+          Content
+        </DetailsPage>,
+      );
+
+      expect(screen.getByText('Some action')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/DetailsPage/DetailsPage.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  Spinner,
+  Split,
+  SplitItem,
+  Title,
+} from '@patternfly/react-core';
+
+import { getErrorMessage } from '../../utils/error';
+import DetailsNotFound from './DetailsNotFound';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Link, Route } from '../../hooks/useNavigate';
+import ErrorBoundary from '../common/ErrorBoundary';
+
+import './DetailsPage.css';
+
+export type DetailsPageProps = {
+  id: string;
+  title?: string;
+  children: React.ReactNode;
+  error: unknown;
+  loading: boolean;
+  resourceType: 'Fleets' | 'Devices' | 'Repositories' | 'Enrollment requests';
+  resourceTypeLabel: string;
+  resourceLink: Route;
+  actions?: React.ReactNode;
+  nav?: React.ReactNode;
+};
+
+const DetailsPage: React.FC<DetailsPageProps> = ({
+  id,
+  title,
+  children,
+  error,
+  loading,
+  resourceLink,
+  resourceType,
+  resourceTypeLabel,
+  actions,
+  nav,
+}) => {
+  const { t } = useTranslation();
+  let content = children;
+  if (error) {
+    const msg = getErrorMessage(error);
+    if (msg === 'Error 404: Not Found') {
+      return <DetailsNotFound kind={resourceType} id={id} />;
+    }
+    content = (
+      <Alert isInline variant="danger" title={t('Failed to retrieve resource details')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  } else if (loading) {
+    content = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={resourceLink}>{resourceTypeLabel}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{title || id}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant="light">
+        <Split hasGutter>
+          <SplitItem isFilled>
+            <Title headingLevel="h1" size="3xl" role="heading">
+              {title || id}
+            </Title>
+          </SplitItem>
+          <SplitItem>{actions}</SplitItem>
+        </Split>
+      </PageSection>
+      {nav && (
+        <PageSection variant="light" type="nav" className="fctl-details-page__nav">
+          {nav}
+        </PageSection>
+      )}
+      <PageSection>
+        <ErrorBoundary>{content}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export default DetailsPage;

package/src/components/DetailsPage/DetailsPageActions.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Dropdown, DropdownItem, MenuToggle } from '@patternfly/react-core';
+
+import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import { useTranslation } from '../../hooks/useTranslation';
+
+type DeleteActionProps = {
+  onDelete: () => Promise<unknown>;
+  resourceType: string;
+  resourceName: string;
+  disabledReason?: string | boolean;
+};
+
+export const useDeleteAction = ({ resourceType, resourceName, onDelete, disabledReason }: DeleteActionProps) => {
+  const { t } = useTranslation();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
+  const deleteAction = (
+    <DropdownItem
+      onClick={() => setIsDeleteModalOpen(true)}
+      {...(disabledReason
+        ? {
+            isAriaDisabled: true,
+            tooltipProps: {
+              content: disabledReason,
+            },
+          }
+        : undefined)}
+    >
+      {t('Delete {{ resourceType }}', { resourceType })}
+    </DropdownItem>
+  );
+  const deleteModal = isDeleteModalOpen && (
+    <DeleteModal
+      resourceType={resourceType}
+      resourceName={resourceName}
+      onClose={() => setIsDeleteModalOpen(false)}
+      onDelete={onDelete}
+    />
+  );
+
+  return { deleteAction, deleteModal };
+};
+
+type DetailsPageActionsProps = {
+  children: React.ReactNode;
+};
+
+const DetailsPageActions: React.FC<DetailsPageActionsProps> = ({ children }) => {
+  const { t } = useTranslation();
+  const [actionsOpen, setActionsOpen] = React.useState(false);
+  return (
+    <Dropdown
+      isOpen={actionsOpen}
+      onSelect={() => setActionsOpen(false)}
+      popperProps={{ position: 'left', preventOverflow: true }}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={actionsOpen}
+          onClick={() => setActionsOpen(!actionsOpen)}
+          aria-label={t('Actions dropdown')}
+          variant="primary"
+        >
+          {t('Actions')}
+        </MenuToggle>
+      )}
+    >
+      {children}
+    </Dropdown>
+  );
+};
+
+export default DetailsPageActions;

package/src/components/DetailsPage/DetailsPageCard.css

@@ -0,0 +1,8 @@
+.fctl-details-page__card-body {
+    max-height: 30rem;
+    overflow: auto;
+}
+
+.fctl-details-page__card {
+    height: 100%
+}

package/src/components/DetailsPage/DetailsPageCard.tsx

@@ -0,0 +1,12 @@
+import { Card, CardBody, CardBodyProps, CardProps } from '@patternfly/react-core';
+import * as React from 'react';
+
+import './DetailsPageCard.css';
+
+const DetailsPageCard: React.FC<CardProps> = (props) => <Card className="fctl-details-page__card" {...props} />;
+
+export const DetailsPageCardBody: React.FC<CardBodyProps> = (props) => (
+  <CardBody className="fctl-details-page__card-body" {...props} />
+);
+
+export default DetailsPageCard;

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Bullseye } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { DeviceApplicationStatus } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import ApplicationStatus from '../../Status/ApplicationStatus';
+
+type ApplicationsTableProps = {
+  appsStatus: DeviceApplicationStatus[];
+};
+
+const ApplicationsTable = ({ appsStatus }: ApplicationsTableProps) => {
+  const { t } = useTranslation();
+
+  return appsStatus.length ? (
+    <Table aria-label={t('Device applications table')}>
+      <Thead>
+        <Tr>
+          <Th>{t('Name')}</Th>
+          <Th modifier="wrap">{t('Status')}</Th>
+          <Th modifier="wrap">{t('Ready')}</Th>
+          <Th modifier="wrap">{t('Restarts')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {appsStatus.map((appData) => (
+          <Tr key={appData.name}>
+            <Td dataLabel={t('Name')}>{appData.name}</Td>
+            <Td dataLabel={t('Status')}>
+              <ApplicationStatus status={appData.status} />
+            </Td>
+            <Td dataLabel={t('Ready')}>{appData.ready}</Td>
+            <Td dataLabel={t('Restarts')}>{appData.restarts}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  ) : (
+    <Bullseye>{t('No applications found')}</Bullseye>
+  );
+};
+
+export default ApplicationsTable;

package/src/components/DetailsPage/Tables/ConditionsTable.tsx

@@ -0,0 +1,40 @@
+import { Bullseye } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Condition } from '@flightctl/types';
+import * as React from 'react';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+type ConditionsTableProps = {
+  conditions: Array<Condition> | undefined;
+  ariaLabel: string;
+};
+
+const ConditionsTable: React.FC<ConditionsTableProps> = ({ conditions, ariaLabel }) => {
+  const { t } = useTranslation();
+  return conditions?.length ? (
+    <Table aria-label={ariaLabel}>
+      <Thead>
+        <Tr>
+          <Th>{t('Type')}</Th>
+          <Th modifier="wrap">{t('Status')}</Th>
+          <Th modifier="wrap">{t('Reason')}</Th>
+          <Th modifier="wrap">{t('Message')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {conditions.map((condition) => (
+          <Tr key={condition.type}>
+            <Td dataLabel={t('Type')}>{condition.type}</Td>
+            <Td dataLabel={t('Status')}>{condition.status}</Td>
+            <Td dataLabel={t('Reason')}>{condition.reason || '-'}</Td>
+            <Td dataLabel={t('Message')}>{condition.message || '-'}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  ) : (
+    <Bullseye>{t('No conditions found')}</Bullseye>
+  );
+};
+
+export default ConditionsTable;