1 files changed, 63 insertions, 25 deletions

diff --git a/src/tools/emcoui/src/compositeApps/CompositeApps.jsx b/src/tools/emcoui/src/compositeApps/CompositeApps.jsx
index e7901ff9..5c540039 100644
--- a/src/tools/emcoui/src/compositeApps/CompositeApps.jsx
+++ b/src/tools/emcoui/src/compositeApps/CompositeApps.jsx
@@ -11,14 +11,15 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// ========================================================================  
+// ========================================================================
 import React from "react";
 import CompositeAppTable from "./CompositeAppTable";
-import { withStyles, Button, Grid } from "@material-ui/core";
+import { withStyles, Button, Grid, Typography } from "@material-ui/core";
 import CreateCompositeAppForm from "./dialogs/CompositeAppForm";
 import AddIcon from "@material-ui/icons/Add";
 import apiService from "../services/apiService";
 import Spinner from "../common/Spinner";
+import { ReactComponent as EmptyIcon } from "../assets/icons/empty.svg";
 const styles = {
   root: {
     display: "flex",
@@ -57,22 +58,43 @@ class CompositeApps extends React.Component {
 
   handleClose = (fields) => {
     if (fields) {
-      let request = {
-        payload: {
-          metadata: { name: fields.name, description: fields.description },
-          spec: { version: fields.version },
-        },
-        projectName: this.props.projectName,
+      const formData = new FormData();
+      let appsData = [];
+      fields.apps.forEach((app) => {
+        //add files for each app
+        formData.append(`${app.appName}_file`, app.file);
+        formData.append(`${app.appName}_profile`, app.profilePackageFile);
+        appsData.push({
+          metadata: {
+            name: app.appName,
+            description: app.description ? app.description : "na",
+            filename: app.file.name,
+          },
+          profileMetadata: {
+            name: `${app.appName}_profile`,
+            filename: app.profilePackageFile.name,
+          },
+          clusters: app.clusters,
+        });
+      });
+
+      let servicePayload = {
+        name: fields.name,
+        description: fields.description,
+        spec: { projectName: this.props.projectName, appsData },
       };
+      formData.append("servicePayload", JSON.stringify(servicePayload));
+      let request = { projectName: this.props.projectName, payload: formData };
       apiService
-        .createCompositeApp(request)
+        .addService(request)
         .then((res) => {
+          console.log("create service response : " + res);
           if (this.state.data && this.state.data.length > 0)
             this.setState({ data: [...this.state.data, res] });
           else this.setState({ data: [res] });
         })
         .catch((err) => {
-          console.log("error creating composite app : ", err);
+          console.log("error adding app : ", err);
         });
     }
     this.setState({ open: false });
@@ -88,32 +110,48 @@ class CompositeApps extends React.Component {
         {this.state.isLoading && <Spinner />}
         {!this.state.isLoading && (
           <>
-            <Button
-              variant="outlined"
-              color="primary"
-              startIcon={<AddIcon />}
-              onClick={this.handleCreateCompositeApp}
-            >
-              Create Composite App
-            </Button>
             <CreateCompositeAppForm
               open={this.state.open}
               handleClose={this.handleClose}
             />
             <Grid container spacing={2} alignItems="center">
-              <Grid item xs style={{ marginTop: "20px" }}>
-                {this.state.data && this.state.data.length > 0 && (
+              <Grid item xs={12}>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  startIcon={<AddIcon />}
+                  onClick={this.handleCreateCompositeApp}
+                >
+                  Add service
+                </Button>
+              </Grid>
+              {this.state.data && this.state.data.length > 0 && (
+                <Grid item xs={12}>
                   <CompositeAppTable
                     data={this.state.data}
                     projectName={this.props.projectName}
                     handleUpdateState={this.handleUpdateState}
                   />
-                )}
-                {(!this.state.data || this.state.data.length === 0) && (
-                  <span>No Composite Apps</span>
-                )}
-              </Grid>
+                </Grid>
+              )}
             </Grid>
+            {(!this.state.data || this.state.data.length === 0) && (
+              <Grid
+                container
+                spacing={2}
+                direction="column"
+                alignItems="center"
+              >
+                <Grid style={{ marginTop: "60px" }} item xs={6}>
+                  <EmptyIcon style={{ height: "100px", width: "100px" }} />
+                </Grid>
+                <Grid item xs={12}>
+                  <Typography variant="h6">
+                    No service found, start by adding a service
+                  </Typography>
+                </Grid>
+              </Grid>
+            )}
           </>
         )}
       </>