diff --git a/src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.js b/src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.js new file mode 100644 index 00000000..b7b783eb --- /dev/null +++ b/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: , + text: 'Ready' + } + ], + failure: [ + { + icon: , + text: 'Image build failed' + } + ], + pending: [ + { + icon: , + text: 'Image build, Upload, Cloud registration pending' + } + ], + building: [ + { + icon: , + text: 'Image build in progress' + }, + { + icon: , + text: 'Upload, Cloud registration pending' + } + ], + uploading: [ + { + icon: , + text: 'Upload in progress' + }, + { + icon: , + text: 'Cloud registration pending' + } + ], + registering: [ + { + icon: , + text: 'Cloud registration in progress' + } + ] + }; + return ( + + {messages[props.status] && + messages[props.status].map((message, key) => ( + +
{message.icon}
+ {message.text} +
+ )) + } +
+ ); +}; + +ImageBuildStatus.propTypes = { + status: PropTypes.string, +}; + +export default ImageBuildStatus; diff --git a/src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.scss b/src/PresentationalComponents/ImageBuildStatus/ImageBuildStatus.scss new file mode 100644 index 00000000..a397ddc7 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/SmartComponents/ImagesTable/ImagesTable.js b/src/SmartComponents/ImagesTable/ImagesTable.js index 12459a86..f36deb14 100644 --- a/src/SmartComponents/ImagesTable/ImagesTable.js +++ b/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: }, '' ] };