Adds icons and text strings for image build status

src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Flex, Spinner } from '@patternfly/react-core';
+import { CheckCircleIcon, PendingIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+
+import './ImageBuildStatus.scss';
+
+const ImageBuildStatus = (props) => {
+    const messages = {
+        success: [
+            {
+                icon: <CheckCircleIcon className="success" />,
+                text: 'Ready'
+            }
+        ],
+        failure: [
+            {
+                icon: <ExclamationCircleIcon className="error" />,
+                text: 'Image build failed'
+            }
+        ],
+        pending: [
+            {
+                icon: <PendingIcon />,
+                text: 'Image build, Upload, Cloud registration pending'
+            }
+        ],
+        building: [
+            {
+                icon: <Spinner size="md" />,
+                text: 'Image build in progress'
+            },
+            {
+                icon: <PendingIcon />,
+                text: 'Upload, Cloud registration pending'
+            }
+        ],
+        uploading: [
+            {
+                icon: <Spinner size="md" />,
+                text: 'Upload in progress'
+            },
+            {
+                icon: <PendingIcon />,
+                text: 'Cloud registration pending'
+            }
+        ],
+        registering: [
+            {
+                icon: <Spinner size="md" />,
+                text: 'Cloud registration in progress'
+            }
+        ]
+    };
+    return (
+        <React.Fragment>
+            {messages[props.status] &&
+                messages[props.status].map((message, key) => (
+                    <Flex key={ key } className="pf-u-align-items-baseline pf-m-nowrap">
+                        <div>{message.icon}</div>
+                        <small>{message.text}</small>
+                    </Flex>
+                ))
+            }
+        </React.Fragment>
+    );
+};
+
+ImageBuildStatus.propTypes = {
+    status: PropTypes.string,
+};
+
+export default ImageBuildStatus;

src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.scss

@@ -0,0 +1,6 @@
+.error {
+  color: var(--pf-global--danger-color--100);
+}
+.success {
+  color: var(--pf-global--success-color--100);
+}

src/SmartComponents/ImagesTable/ImagesTable.js

@@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
 import { Table, TableHeader, TableBody, classNames, Visibility } from '@patternfly/react-table';
 import { TableToolbar } from '@redhat-cloud-services/frontend-components';
 
+import ImageBuildStatus from '../../PresentationalComponents/ImageBuildStatus/ImageBuildStatus';
+
 import api from '../../api.js';
 
 class ImagesTable extends Component {
@@ -63,7 +65,7 @@ class ImagesTable extends Component {
                     id,
                     compose.image_type,
                     compose.distribution,
-                    compose.status,
+                    { title: <ImageBuildStatus status={ compose.status } /> },
                     ''
                 ]
             };