store: implement compose start action/reducer

When a compose is started the api call is no longer handled by the
CreateImageWizard onSave function. Instead, the CreateImageWizard
calls the composeStart thunk. This function calls the api and handles
the response. If successful, the compose is added to the store.
Otherwise, an error is added to the store.

The store's compose object now has a list of the compose ids and an
object containing key/value pairs mapping a compose id to the compose
for all composes. This "normalized" state will allow more efficiency
when selecting individual composes or iterating through all composes.

The compose objects in the store now match the composeRequest object
instead of having a shape unique to the UI. This can be changed in the
future if image-builder's api returns compose objects of a different
format.

Tests are updated for new compose format and action/reducer types.
This commit is contained in:
Jacob Kozol 2021-04-16 20:10:44 +02:00 committed by Sanne Raymaekers
parent 8a8a7229a1
commit f3eed9c28f
8 changed files with 379 additions and 166 deletions

View file

@ -52,15 +52,14 @@ class ImagesTable extends Component {
pollComposeStatuses() {
let { composeUpdated, composes } = this.props;
Object.entries(composes).map(([ id, compose ]) => {
Object.entries(composes.byId).map(([ id, compose ]) => {
/* Skip composes that have been complete */
if (compose.image_status.status === 'success' || compose.image_status.status === 'failure') {
return;
}
api.getComposeStatus(id).then(response => {
let newCompose = {};
newCompose[id] = Object.assign({}, compose, { image_status: response.image_status });
const newCompose = Object.assign({}, compose, { image_status: response.image_status });
composeUpdated(newCompose);
});
});
@ -68,11 +67,11 @@ class ImagesTable extends Component {
render() {
let { composes } = this.props;
const rows = Object.entries(composes).map(([ id, compose ]) => {
const rows = Object.entries(composes.byId).map(([ id, compose ]) => {
return {
cells: [
id,
{ title: <Upload uploadType={ compose.upload_type } /> },
{ title: <Upload uploadType={ compose.image_requests[0].image_type } /> },
{ title: <Release release={ compose.distribution } /> },
{ title: <ImageBuildStatus status={ compose.image_status.status } /> },
''
@ -81,7 +80,7 @@ class ImagesTable extends Component {
});
return (
<React.Fragment>
{ Object.keys(composes).length === 0 && (
{ composes.allIds.length === 0 && (
<EmptyState variant={ EmptyStateVariant.large } data-testid="empty-state">
<EmptyStateIcon icon={ PlusCircleIcon } />
<Title headingLevel="h4" size="lg">