- Adds "Select All" to replica, migrations, endpoints and projects

- Fixes small layout issues

src/components/ConnectionsList/ConnectionsList.js

@@ -58,6 +58,7 @@ class ConnectionsList extends Reflux.Component {
       showModal: false,
       queryText: '',
       filterType: 'all',
+      selectedAll: false,
       searchMin: true,
       connections: null,
       confirmationDialog: {
@@ -113,7 +114,18 @@ class ConnectionsList extends Reflux.Component {
         item.selected = !item.selected
       }
     })
-    this.setState({ connections: items })
+    this.setState({ connections: items, selectedAll: false  })
+  }
+
+  checkAll() {
+    let items = this.state.connections
+    let selectedAll = this.state.selectedAll
+
+    items.forEach((item) => {
+      item.selected = !selectedAll
+    })
+
+    this.setState({ connections: items, selectedAll: !selectedAll })
   }
 
   filterFn(item, queryText, filterType) {
@@ -252,6 +264,16 @@ class ConnectionsList extends Reflux.Component {
               </div>
             </div>
             <div className="filters">
+              <div className="checkbox-container">
+                <input
+                  id={"vm_check_all"}
+                  type="checkbox"
+                  checked={this.state.selectedAll}
+                  onChange={(e) => this.checkAll()}
+                  className="checkbox-normal"
+                />
+                <label htmlFor={"vm_check_all"}></label>
+              </div>
               <div className="category-filter">
                 {itemStates}
               </div>

src/components/LoginPage/LoginPage.js

@@ -23,7 +23,7 @@ import UserActions from '../../actions/UserActions';
 import UserStore from '../../stores/UserStore';
 import NotificationActions from '../../actions/NotificationActions';
 import LoadingIcon from '../LoadingIcon';
-import Location from '../../core/Location';
+import withViewport from '../withViewport.js';
 
 const title = 'Log In';
 const coriolisTextSvg = `
@@ -192,4 +192,4 @@ class LoginPage extends Reflux.Component {
 
 }
 
-export default withStyles(LoginPage, s);
+export default withViewport(withStyles(LoginPage, s));

src/components/LoginPage/LoginPage.scss

@@ -21,6 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   height: 100%;
   background-image: url('../../public/images/star-bg.jpg');
   background-position: center center;
+  position: relative;
   .coriolisText {
     width: 208px;
     height: 40px;

src/components/MigrationList/MigrationList.js

@@ -65,6 +65,10 @@ class MigrationList extends Reflux.Component {
       currentProject: "My Project",
       searchMin: true,
       filteredData: [],
+      selectedAll: {
+        migration: false,
+        replica: false
+      },
       confirmationDialog: {
         visible: false,
         message: "Are you sure?",
@@ -162,7 +166,22 @@ class MigrationList extends Reflux.Component {
         item.selected = !item.selected
       }
     })
-    this.setState({ migrations: items })
+    let selectedAll = this.state.selectedAll
+    selectedAll[this.state.filterType] = false
+    this.setState({ migrations: items, selectedAll: selectedAll })
+  }
+
+  checkAll(e) {
+    let items = this.state.migrations
+    let selectedAll = this.state.selectedAll
+
+    items.forEach((item) => {
+      if (item.type == this.state.filterType) {
+        item.selected = !selectedAll[this.state.filterType]
+      }
+    })
+    selectedAll[this.state.filterType] = !selectedAll[this.state.filterType]
+    this.setState({ migrations: items, selectedAll: selectedAll })
   }
 
   searchItem(queryText) {
@@ -374,6 +393,16 @@ class MigrationList extends Reflux.Component {
               </div>
             </div>
             <div className="filters">
+              <div className="checkbox-container">
+                <input
+                  id={"vm_check_all"}
+                  type="checkbox"
+                  checked={this.state.selectedAll[this.state.filterType]}
+                  onChange={(e) => this.checkAll()}
+                  className="checkbox-normal"
+                />
+                <label htmlFor={"vm_check_all"}></label>
+              </div>
               <div className="category-filter">
                 {itemStates}
               </div>

src/components/ProjectList/ProjectList.js

@@ -53,6 +53,7 @@ class ProjectList extends Reflux.Component {
       showModal: false,
       queryText: '',
       filterType: 'all',
+      selectedAll: false,
       searchMin: true,
       projects: null,
       confirmationDialog: {
@@ -106,7 +107,18 @@ class ProjectList extends Reflux.Component {
         item.selected = !item.selected
       }
     })
-    this.setState({ projects: items })
+    this.setState({ projects: items, selectedAll: false })
+  }
+
+  checkAll() {
+    let items = this.state.currentUser.projects
+    let selectedAll = this.state.selectedAll
+
+    items.forEach((item) => {
+      item.selected = !selectedAll
+    })
+
+    this.setState({ projects: items, selectedAll: !selectedAll })
   }
 
   filterFn(item, queryText, filterType) {
@@ -259,6 +271,16 @@ class ProjectList extends Reflux.Component {
               </div>
             </div>
             <div className="filters">
+              <div className="checkbox-container">
+                <input
+                  id={"vm_check_all"}
+                  type="checkbox"
+                  checked={this.state.selectedAll}
+                  onChange={(e) => this.checkAll()}
+                  className="checkbox-normal"
+                />
+                <label htmlFor={"vm_check_all"}></label>
+              </div>
               <div className="category-filter">
                 {itemStates}
               </div>

src/components/ProjectList/ProjectList.scss

@@ -56,6 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       padding: 2px 8px 2px 0;
       margin-top: 7px;
       border-right: 1px solid $gray-dark;
+      display: none;
     }
     :global(.name-filter) {
       float: left;

src/components/WithSidebar/WithSidebar.scss

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 .root {
   display: flex;
   height: 100%;
-
+  min-width: 1180px;
 }
 .sidebar {
   width: 320px;