Added VM list refresh button CORWEB-78

Updated VM list from Sketch design.

src/components/MigrationWizard/MigrationWizard.scss

@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 .container {
   flex: 1;
   margin: 0 auto;
-  padding: 0px 32px 70px;
+  padding: 0px 0px 70px 32px;
   overflow-y: auto;
   width: $wizard-content-width;
 
@@ -66,7 +66,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEzcHgiIHZpZXdCb3g9Ii0xIC0xIDcgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBvbHlsaW5lIGlkPSJQYWdlLTEtQ29weSIgc3Ryb2tlPSIjNjE2NzcwIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuNTAwMDAwLCA1LjUwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTIuNTAwMDAwLCAtNS41MDAwMDApICIgcG9pbnRzPSItMyA4IDIuNSAzIDggOCI+PC9wb2x5bGluZT48L3N2Zz4=');
         width: 7px;
         height: 13px;
-        display: inline-block;
         margin-left: 3px;
         margin-top: 3px;
         float:right;

src/components/SearchBox/SearchBox.js

@@ -66,21 +66,26 @@ class SearchBox extends Component {
 
   render() {
     let renderLoading = () => this.props.isLoading ? <div className="spinner"></div> : null
-    let hidden = this.props.show ? ' ' : ' hidden'
+
+    if (this.props.show === false) {
+      return null
+    }
 
     return (
-      <div className={s.root + hidden}>
-        {renderLoading()}
-        <input
-          type="text"
-          placeholder={this.props.placeholder}
-          value={this.state.queryText}
-          onChange={(e) => this.onChange(e)}
-          onClick={(e) => this.toggleSearch(e)}
-          onBlur={(e) => this.onBlurAction(e)}
-          className={s.searchBox + " " + (this.state.isMin ? s.minimize : "") + " searchBox " +
-            this.props.className}
-        />
+      <div className={s.root + ' ' + (this.props.className || '')}>
+        <div className={s.content}>
+          {renderLoading()}
+          <input
+            type="text"
+            placeholder={this.props.placeholder}
+            value={this.state.queryText}
+            onChange={(e) => this.onChange(e)}
+            onClick={(e) => this.toggleSearch(e)}
+            onBlur={(e) => this.onBlurAction(e)}
+            className={s.searchBox + " " + (this.state.isMin ? s.minimize : "") + " searchBox " +
+              this.props.className}
+          />
+        </div>
       </div>
     );
   }

src/components/SearchBox/SearchBox.scss

@@ -21,13 +21,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 $searchStrokeColor: $gray-dark;
 
 .root {
-  position: relative;
-  left: 16px;
   :global(.spinner) {
     position: absolute;
-    top: 3px;
+    top: 8px;
     right: 8px;
   }
+
+  .content {
+    position: relative;
+    display: inline-block;
+  }
 }
 
 input[type="text"].searchBox {

src/components/WizardVms/WizardVms.js

@@ -24,7 +24,6 @@ import ConnectionsActions from '../../actions/ConnectionsActions';
 import LoadingIcon from '../LoadingIcon';
 
 const title = 'Select instances to migrate';
-const vmStatesConst = ["All", "RUNNING", "PAUSED", "STOPPED"]
 const loadingStates = { IDLE: 0, QUERY: 1, PAGINATION: 2 }
 const searchTimeout = 1000;
 
@@ -51,7 +50,7 @@ class WizardVms extends Component {
       })
     }
 
-    this.retryLoadingInstances = this.retryLoadingInstances.bind(this)
+    this.reloadInstances = this.reloadInstances.bind(this)
 
     this.state = {
       valid,
@@ -209,7 +208,7 @@ class WizardVms extends Component {
     }
   }
 
-  retryLoadingInstances() {
+  reloadInstances() {
     ConnectionsActions.loadInstances(
       { id: this.props.data.sourceCloud.credential.id },
       this.state.page,
@@ -259,7 +258,7 @@ class WizardVms extends Component {
       case "error":
         return (<div className="no-results">
           An error occurred while searching for instances <br />
-          <button onClick={this.retryLoadingInstances}>Retry</button>
+          <button onClick={this.reloadInstances}>Retry</button>
         </div>)
       case "loading":
         return <LoadingIcon padding={64} text="Loading instances.." />
@@ -268,35 +267,42 @@ class WizardVms extends Component {
     }
   }
 
+  renderSelectionInfo() {
+    if (this.state.filteredData && this.state.filteredData.length) {
+      return (
+        <div className={s.selectionInfo}>
+          <div className={s.selectionCount +
+            (!(this.state.filteredData && this.state.filteredData.length) ? " hidden" : " ")}
+          >
+            {this.instancesSelected()} instances selected
+                </div>
+          <div className={s.refreshButton}
+            onClick={this.reloadInstances}
+          >
+            <div className="refresh icon"></div>
+          </div>
+        </div>
+      )
+    }
+
+    return null
+  }
+
   render() {
-    let vmStates = vmStatesConst.map(
-      (state, index) =>
-        <a
-          className={this.state.filterStatus == state || (this.state.filterStatus == null && state == "All") ?
-            "selected" : ""}
-          onClick={(e) => this.filterStatus(e, state)} key={"status_" + index}
-        >{this.toTitleCase(state)}</a>
-    )
     return (
       <div className={s.root}>
         <div className={s.container}>
           <div className={s.topFilters}>
-            <div className={s.selectionCount +
-              (!(this.state.filteredData && this.state.filteredData.length) ? " hidden" : " ")}
-            >
-              {this.instancesSelected()} instances selected
-            </div>
             <SearchBox
               placeholder="Search VMs"
               isLoading={this.state.loadingState === loadingStates.QUERY}
               value={this.state.queryText}
               onChange={(e) => this.searchVm(e)}
+              className={s.searchBox}
               show={(!this.state.filteredData || !!this.state.filteredData.length)
                 || this.state.loadingState > 0 || !!this.state.queryText}
             />
-            <div className="category-filter hidden">
-              {vmStates}
-            </div>
+            {this.renderSelectionInfo()}
           </div>
           <div className="items-list instances">
             {this.renderSearch()}

src/components/WizardVms/WizardVms.scss

@@ -17,14 +17,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 @import '../variables.scss';
 
-.root {
-  :global(.searchBox) {
-    float: right;
-    margin-top: -5px;
-    width: 116px;
-  }
-}
-
 .container {
   margin: 0 auto;
   padding: 10px 0 40px;
@@ -36,13 +28,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       cursor: pointer;
       padding-left: 16px;
       padding-right: 0;
-      width: 100%;
       span:nth-child(2) {
         flex: 2;
       }
       span:nth-child(3) {
         justify-content: flex-end;
-        padding-right: 8px;
+        padding-right: 16px;
       }
       span:nth-child(4) {
         flex: 2;
@@ -62,27 +53,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
   }
   .topFilters {
-    &:after {
-      clear: both;
-      display: block;
-      content: " ";
-      height: 0;
+    display: flex;
+
+    .searchBox {
+      flex-grow: 1;
     }
-    :global(.category-filter) {
-      position: relative;
-      left: 10px;
-      top: 5px;
+
+    .refreshButton {
+      cursor: pointer;
+      padding: 8px 8px 0 7px;
+      margin-top: 4px;
+      margin-right: -8px;
+      height: 19px;
+    }
+
+    .selectionInfo {
+      display: flex;
+    }
+    
+    .selectionCount {
+      height: 16px;
+      font-size: 14px;
+      margin-top: 12px;
+      color: $gray-dark;
+      border-right: 1px solid $gray-dark;
+      padding-right: 8px;
     }
   }
 }
 
-.selectionCount {
-  font-size: 14px;
-  color: $gray-dark;
-  float: left;
-  position: relative;
-  top: 6px;
-}
 .pagination {
   font-size: 14px;
   color: $gray-dark;
@@ -96,7 +95,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     background-repeat: no-repeat;
     width: 32px;
     height: 32px;
-    display: inline-block;
     float: left;
     &:global(.disabled) {
       opacity: 0.3;
@@ -109,7 +107,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     background-repeat: no-repeat;
     width: 32px;
     height: 32px;
-    display: inline-block;
     float: left;
     &:global(.disabled) {
       opacity: 0.3;