Updates message when no results

src/components/App/App.scss

@@ -699,6 +699,34 @@ button {
   text-align: center;
   padding: 40px 0;
 }
+:global {
+  .noResultsLarge {
+    padding: 80px;
+    border-radius: $border-radius;
+    text-align: center;
+    .icon {
+      margin-bottom: 48px;
+      display: inline-block;
+    }
+    h3 {
+      margin: 0 0 16px;
+      font-weight: 400;
+      font-size: 18px;
+      color: #202234;
+    }
+    p {
+      margin-bottom: 32px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #616870;
+      letter-spacing: 0;
+      line-height: 18px;
+    }
+    button {
+      width: 192px;
+    }
+  }
+}
 :global(.icon-delete) {
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxtYXNrIGlkPSJtYXNrLTIiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiUyM3BhdGgtMSI+PC91c2U+PC9tYXNrPjwvZGVmcz48ZyBpZD0iR3JvdXAtMiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBpZD0iT3ZhbC0yIiBzdHJva2U9IiUyMzAwNTZCOCIgbWFzaz0idXJsKCUyM21hc2stMikiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0iJTIzRkZGRkZGIiB4bGluazpocmVmPSIlMjNwYXRoLTEiPjwvdXNlPjwvZz48cGF0aCBkPSJNNCw4IEwxMiw4IiBpZD0iTGluZSIgc3Ryb2tlPSIlMjMwMDU2QjgiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==');
   background-repeat: no-repeat;

src/components/MigrationList/MigrationList.js

@@ -163,31 +163,59 @@ class MigrationList extends Reflux.Component {
   }
 
   render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <div className={s.pageHeader}>
-            <div className={s.top}>
-              <h1>{title}</h1>
-              <div className={s.topActions}>
-                <ProjectsDropdown />
-                <button onClick={this.newMigration}>New</button>
-                <UserIcon />
-                <NotificationIcon />
+    if ((this.state.migrations && this.state.migrations.length) || this.state.migrations == null) {
+      return (
+        <div className={s.root}>
+          <div className={s.container}>
+            <div className={s.pageHeader}>
+              <div className={s.top}>
+                <h1>{title}</h1>
+                <div className={s.topActions}>
+                  <ProjectsDropdown />
+                  <button onClick={this.newMigration}>New</button>
+                  <UserIcon />
+                  <NotificationIcon />
+                </div>
               </div>
             </div>
+            <MainList
+              items={this.state.migrations}
+              actions={migrationActions}
+              itemName="migration"
+              renderItem={this.renderItem}
+              filters={filters}
+              refresh={this.refreshList}
+            />
           </div>
-          <MainList
-            items={this.state.migrations}
-            actions={migrationActions}
-            itemName="migration"
-            renderItem={this.renderItem}
-            filters={filters}
-            refresh={this.refreshList}
-          />
         </div>
-      </div>
-    );
+      );
+    } else {
+      return (
+        <div className={s.root}>
+          <div className={s.container}>
+            <div className={s.pageHeader}>
+              <div className={s.top}>
+                <h1>{title}</h1>
+                <div className={s.topActions}>
+                  <ProjectsDropdown />
+                  <button onClick={this.newMigration}>New</button>
+                  <UserIcon />
+                  <NotificationIcon />
+                </div>
+              </div>
+
+              <div className="noResultsLarge">
+                <span className="icon"></span>
+                <h3>It seems that you don't have any Migrations in this project</h3>
+                <p>A Coriolis Migration is a full virtual machine migration <br /> between two cloud endpoints</p>
+                <button onClick={(e) => this.newMigration(e)}>Create a Migration</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
   }
 
 }

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -211,7 +211,10 @@ class ReplicaExecutions extends Component {
         return (
           <div className={s.root}>
             <div className={s.container}>
-              <div className="no-results">No executions for this replica <br /> <br />
+              <div className="noResultsLarge">
+                <span className="icon"></span>
+                <h3>It looks like there are no executions in this replica</h3>
+                <p>This replica has not been executed yet</p>
                 <button onClick={(e) => this.executeNow(e)}>Execute Now</button>
               </div>
             </div>

src/components/ReplicaList/ReplicaList.js

@@ -1,21 +1,21 @@
 /*
-Copyright (C) 2017  Cloudbase Solutions SRL
+ Copyright (C) 2017  Cloudbase Solutions SRL
 
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
 
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import Reflux from 'reflux';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import Location from '../../core/Location';
@@ -36,10 +36,10 @@ const filters = [
   {
     field: "status",
     options: [
-      { value: null, label: "All" },
-      { value: "RUNNING", label: "Running" },
-      { value: "ERROR", label: "Error" },
-      { value: "COMPLETED", label: "Completed" }
+      {value: null, label: "All"},
+      {value: "RUNNING", label: "Running"},
+      {value: "ERROR", label: "Error"},
+      {value: "COMPLETED", label: "Completed"}
     ]
   }
 ]
@@ -122,7 +122,7 @@ class ReplicaList extends Reflux.Component {
         <span className="cell cell-icon" onClick={(e) => this.replicaDetail(e, item)}>
           <div className={"icon " + item.type}></div>
           <span className="details">
-            <TextTruncate line={1} truncateText="..." text={item.name} />
+            <TextTruncate line={1} truncateText="..." text={item.name}/>
             <span className={s.migrationStatus + " status-pill " + item.status}>{item.status}</span>
           </span>
         </span>
@@ -134,7 +134,7 @@ class ReplicaList extends Reflux.Component {
         <span className={"cell " + s.composite} onClick={(e) => this.replicaDetail(e, item)}>
           <span className={s.label}>Last execution</span>
           <span className={s.value}>
-            {lastExecution ? <Moment format="MMM Do YYYY HH:mm" date={lastExecution} /> : "-"}
+            {lastExecution ? <Moment format="MMM Do YYYY HH:mm" date={lastExecution}/> : "-"}
           </span>
         </span>
         <span className={"cell " + s.composite} onClick={(e) => this.replicaDetail(e, item)}>
@@ -154,31 +154,60 @@ class ReplicaList extends Reflux.Component {
   }
 
   render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <div className={s.pageHeader}>
-            <div className={s.top}>
-              <h1>{title}</h1>
-              <div className={s.topActions}>
-                <ProjectsDropdown />
-                <button onClick={this.newMigration}>New</button>
-                <UserIcon />
-                <NotificationIcon />
+    if ((this.state.replicas && this.state.replicas.length) || this.state.replicas == null) {
+      return (
+        <div className={s.root}>
+          <div className={s.container}>
+            <div className={s.pageHeader}>
+              <div className={s.top}>
+                <h1>{title}</h1>
+                <div className={s.topActions}>
+                  <ProjectsDropdown />
+                  <button onClick={this.newMigration}>New</button>
+                  <UserIcon />
+                  <NotificationIcon />
+                </div>
               </div>
             </div>
+            <MainList
+              items={this.state.replicas}
+              actions={replicaActions}
+              itemName="replica"
+              renderItem={this.renderItem}
+              filters={filters}
+              refresh={this.refreshList}
+            />
           </div>
-          <MainList
-            items={this.state.replicas}
-            actions={replicaActions}
-            itemName="replica"
-            renderItem={this.renderItem}
-            filters={filters}
-            refresh={this.refreshList}
-          />
         </div>
-      </div>
-    );
+      );
+    } else {
+      return (
+        <div className={s.root}>
+          <div className={s.container}>
+            <div className={s.pageHeader}>
+              <div className={s.top}>
+                <h1>{title}</h1>
+                <div className={s.topActions}>
+                  <ProjectsDropdown />
+                  <button onClick={this.newMigration}>New</button>
+                  <UserIcon />
+                  <NotificationIcon />
+                </div>
+              </div>
+
+              <div className="noResultsLarge">
+                <span className="icon"></span>
+                <h3>It seems that you don't have any Replica's in this project</h3>
+                <p>The Coriolis Replica is obtained by replicating incrementally the<br />
+                  virtual machines data from the source cloud endpoint to the target.
+                </p>
+                <button onClick={(e) => this.newMigration(e)}>Create a Replica</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
   }
 
 }

src/stores/MigrationStore/MigrationStore.js

@@ -348,7 +348,7 @@ class MigrationStore extends Reflux.Store
     }
     currentTask["progress_updates"] = progressUpdates
     tasks.push(currentTask)
-    console.log(tasks)
+    
     return tasks
   }
 }