ImagesTable: add error status

Add error information for failed image
builds. The error details are only displayed
for failed builds and the error highest up
the error chain is displayed in the expandable
section of the image.

src/Components/ImagesTable/ImageBuildErrorDetails.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@patternfly/react-core';
+
+const useGetErrorReason = (err) => {
+    if (!err?.reason) {
+        return 'An unknown error occured';
+    }
+
+    if (err.details?.reason) {
+        return err.details.reason;
+    }
+
+    return err.reason;
+};
+
+const ErrorDetails = ({ status }) => {
+    if (!status || status.status !== 'failure') {
+        return <></>;
+    }
+
+    const reason = useGetErrorReason(status.error);
+
+    return (
+        <div className='pf-u-mt-sm'>
+            <strong>Status</strong>
+            <Alert variant="danger" title="Image build failed" isInline isPlain />
+            <p className='pf-u-danger-color-200 pf-u-w-33-on-md'>{reason}</p>
+        </div>
+    );
+};
+
+ErrorDetails.propTypes = {
+    status: PropTypes.object,
+};
+
+export default ErrorDetails;

src/Components/ImagesTable/ImagesTable.js

@@ -15,6 +15,7 @@ import ImageBuildStatus from './ImageBuildStatus';
 import Release from './Release';
 import Target from './Target';
 import ImageLink from './ImageLink';
+import ErrorDetails from './ImageBuildErrorDetails';
 
 const ImagesTable = () => {
     const [ page, setPage ] = useState(1);
@@ -189,6 +190,7 @@ const ImagesTable = () => {
                                             <ExpandableRowContent>
                                                 <strong>UUID</strong>
                                                 <div>{ id }</div>
+                                                <ErrorDetails status={ compose.image_status } />
                                             </ExpandableRowContent>
                                         </Td>
                                     </Tr>

src/test/Components/ImagesTable/ImagesTable.test.js

@@ -180,6 +180,12 @@ const store = {
                 },
                 image_status: {
                     status: 'failure',
+                    error: {
+                        reason: 'A dependency error occured',
+                        details: {
+                            reason: 'Error in depsolve job'
+                        }
+                    }
                 },
             },
             'ca03f120-9840-4959-871e-94a5cb49d1f2': {
@@ -444,6 +450,22 @@ describe('Images Table', () => {
         userEvent.click(toggleButton);
         expect(screen.getAllByText(/1579d95b-8f1d-4982-8c53-8c2afa4ab04c/i)[1]).not.toBeVisible();
     });
+
+    test('check error details', () => {
+        renderWithReduxRouter(<ImagesTable />, store);
+
+        const table = screen.getByTestId('images-table');
+        const { getAllByRole } = within(table);
+        const rows = getAllByRole('row');
+
+        const errorToggle = within(rows[7]).getByRole('button', { name: /details/i });
+
+        expect(screen.getAllByText(/61b0effa-c901-4ee5-86b9-2010b47f1b22/i)[1]).not.toBeVisible();
+        userEvent.click(errorToggle);
+
+        expect(screen.getAllByText(/61b0effa-c901-4ee5-86b9-2010b47f1b22/i)[1]).toBeVisible();
+        expect(screen.getAllByText(/Error in depsolve job/i)[0]).toBeVisible();
+    });
 });
 
 describe('Images Table Toolbar', () => {