- Adds refresh button to migration/replica lists

- Makes cloud logo coloured
- Fixes "Flavour" typo
- Adds status filtering (view only)

src/components/AddCloudConnection/AddCloudConnection.js

@@ -197,7 +197,7 @@ class AddCloudConnection extends Reflux.Component {
 
   renderCloudList() {
     let clouds = this.state.allClouds.map((cloud, index) => {
-      let colorType = "dimmer"
+      let colorType = ""
       if (cloud.credentials != null && cloud.credentials.length != 0) {
         colorType = ""
       }

src/components/MigrationList/MigrationList.js

@@ -38,6 +38,12 @@ const migrationTypes = [
   { label: "Migrations", type: "migration" },
   { label: "All", type: "all" }
 ]
+const statusTypes = [
+  { label: "Running", type: "RUNNING" },
+  { label: "Error", type: "ERROR" },
+  { label: "Completed", type: "COMPLETED" },
+  { label: "All", type: "all" }
+]
 const migrationActions = [
   { label: "Execute", value: "execute" },
   { label: "Cancel", value: "cancel" },
@@ -324,9 +330,13 @@ class MigrationList extends Reflux.Component {
     return instance
   }
 
+  refreshList() {
+    MigrationActions.loadMigrations()
+  }
+
   render() {
     let _this = this
-    let itemStates = migrationTypes.map((state, index) => (
+    let itemStates = statusTypes.map((state, index) => (
         <a
           className={_this.state.filterType == state.type || (_this.state.filterType == null && state.type == "all") ?
             "selected" : ""}
@@ -356,6 +366,9 @@ class MigrationList extends Reflux.Component {
               <div className="category-filter">
                 {itemStates}
               </div>
+              <div className={s.refreshBtn}>
+                <div className="icon refresh" onClick={this.refreshList}></div>
+              </div>
               <div className="name-filter">
                 <SearchBox
                   placeholder="Search"

src/components/MigrationList/MigrationList.scss

@@ -60,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
     :global(.name-filter) {
       float: left;
-      padding-left: 24px;
+      padding-left: 0px;
       margin-top: 2px;
     }
     &:after {
@@ -90,6 +90,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     margin-right: 16px;
   }
 }
+.refreshBtn {
+  float: left;
+  padding: 5px 5px;
+  margin-top: 6px;
+  margin-left: 11px;
+  cursor: pointer;
+}
 .container {
   margin: 0 auto;
   padding: 0;