components: Show status of image composes

src/SmartComponents/LandingPage/CreateImageCard.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import {
@@ -9,8 +10,6 @@ import {
     FlexModifiers,
     Form,
     FormGroup,
-    FormSelect,
-    FormSelectOption,
 } from '@patternfly/react-core';
 
 import { DefaultApi } from '@redhat-cloud-services/osbuild-installer';
@@ -33,9 +32,8 @@ class CreateImageCard extends Component {
                 }]
         };
         let api = new DefaultApi();
-        api.osbuildInstallerViewsV1BuildImage(request).then(x => {
+        api.composeImage(request).then(response => {
-            console.log('response', x);
+            this.props.onCompose(response.data.compose_id);
-            alert('composing ' + x.data.compose_id);
         });
     }
 
@@ -43,25 +41,11 @@ class CreateImageCard extends Component {
         return (
             <Card>
                 <CardHeader>Create a new image</CardHeader>
-                <CardBody>
-                    <FormGroup label="Release" fieldId="release-select">
-                        <FormSelect aria-label="FormSelect Input">
-                            {[ '8-2', '8-1' ].map((option, index) => (
-                                <FormSelectOption key={ index } value={ option } label={ option } />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-                </CardBody>
                 <CardBody>
                     <Form>
                         <FormGroup label="Package set" fieldId="package-set">
                             <Flex breakpointMods={ [{ modifier: FlexModifiers.column }] }>
-                                <Button variant="secondary">Web server</Button>
+                                <Button  onClick={ () => this.buildImage() } variant="Primary">Build f31.x86_64 image</Button>
-                                <Button variant="secondary">SQL server</Button>
-                                <Button variant="secondary">General database server</Button>
-                                <Button variant="secondary">Performance sensitive workload</Button>
-                                <Button variant="secondary">Show more options</Button>
-                                <Button  onClick={ () => this.buildImage() } variant="Primary">Build image (this one actually works)</Button>
                             </Flex>
                         </FormGroup>
                     </Form>
@@ -70,4 +54,8 @@ class CreateImageCard extends Component {
     }
 }
 
+CreateImageCard.propTypes = {
+    onCompose: PropTypes.func,
+};
+
 export default CreateImageCard;

src/SmartComponents/LandingPage/LandingPage.js

@@ -9,6 +9,7 @@ import {
 } from '@redhat-cloud-services/frontend-components';
 
 import CreateImageCard from './CreateImageCard';
+import PendingImagesCard from './PendingImagesCard.js';
 
 /**
  * A smart component that handles all the api calls and data needed by the dumb components.
@@ -20,6 +21,18 @@ import CreateImageCard from './CreateImageCard';
 class LandingPage extends Component {
     constructor(props) {
         super(props);
+
+        this.state = {
+            pendingComposeIds: [],
+        };
+
+        this.onPendingCompose = this.onPendingCompose.bind(this);
+    }
+
+    onPendingCompose(composeId) {
+        this.setState(oldState => {
+            return { pendingComposeIds: oldState.pendingComposeIds.concat(composeId) };
+        });
     }
 
     render() {
@@ -31,7 +44,10 @@ class LandingPage extends Component {
                 <Main>
                     <Flex>
                         <FlexItem breakpointMods={ [{ modifier: FlexModifiers.column }, { modifier: FlexModifiers['flex-1'] }] }>
-                            <CreateImageCard />
+                            <CreateImageCard onCompose={ this.onPendingCompose } />
+                        </FlexItem>
+                        <FlexItem breakpointMods={ [{ modifier: FlexModifiers.column }, { modifier: FlexModifiers['flex-1'] }] }>
+                            <PendingImagesCard pendingComposeIds={ this.state.pendingComposeIds } />
                         </FlexItem>
                     </Flex>
                 </Main>

src/SmartComponents/LandingPage/PendingImagesCard.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import {
+    Card,
+    CardHeader,
+    CardBody,
+} from '@patternfly/react-core';
+
+import { DefaultApi } from '@redhat-cloud-services/osbuild-installer';
+
+class PendingImagesCard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            composeStatuses: {},
+        };
+
+        this.pollComposeIds = this.pollComposeIds.bind(this);
+    }
+
+    componentDidMount() {
+        this.interval = setInterval(() => this.pollComposeIds(), 8000);
+    }
+
+    pollComposeIds() {
+        let api = new DefaultApi();
+        for (let id of this.props.pendingComposeIds) {
+            api.getComposeStatus(id).then(response => {
+                this.setState(oldState => {
+                    let composeStatuses = Object.assign({}, oldState.composeStatuses);
+                    composeStatuses[id] = response.data.status;
+                    return { composeStatuses };
+                });
+            });
+        }
+    }
+
+    render() {
+        return (
+            <Card>
+                <CardHeader>Pending composes</CardHeader>
+                { Object.entries(this.state.composeStatuses).map(([ id, status ]) => {
+                    return <CardBody key={ id }><label>{ id }</label><p>{ status }</p></CardBody>;
+                })
+                }
+            </Card>);
+    }
+}
+
+PendingImagesCard.propTypes = {
+    pendingComposeIds: PropTypes.array,
+};
+
+export default PendingImagesCard;