UI style fixes

thelastpickle · Jun 19, 2017 · ee37ad8 · ee37ad8
1 parent fe2a506
commit ee37ad8
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 47 deletions.
diff --git a/reaper_ui/app/jsx/cluster-list.jsx b/reaper_ui/app/jsx/cluster-list.jsx
@@ -137,11 +137,18 @@ const Cluster = React.createClass({
                             }, 0);;
 
       repairProgress = this.state.clusterStatus.repair_runs.filter(repairRun => repairRun.state=='RUNNING').map(repairRun => 
-                      <ProgressBar now={(repairRun.segments_repaired*100)/repairRun.total_segments} active bsStyle="success" style={progressStyle} label={repairRun.keyspace_name}/>
+                      <ProgressBar now={(repairRun.segments_repaired*100)/repairRun.total_segments} active bsStyle="success" 
+                                   style={progressStyle} 
+                                   label={repairRun.keyspace_name}
+                                   key={repairRun.id}/>
       )
 
       datacenters = Object.keys(this.state.clusterStatus.nodes_status.endpointStates[0].endpoints).sort().map(dc => 
-                      <Datacenter datacenter={this.state.clusterStatus.nodes_status.endpointStates[0].endpoints[dc]} datacenterName={dc} nbDatacenters={Object.keys(this.state.clusterStatus.nodes_status.endpointStates[0].endpoints).length} clusterName={this.props.name} key={this.props.name + '-' + dc} totalLoad={this.state.clusterStatus.nodes_status.endpointStates[0].totalLoad}/>
+                      <Datacenter datacenter={this.state.clusterStatus.nodes_status.endpointStates[0].endpoints[dc]} 
+                                  datacenterName={dc} 
+                                  nbDatacenters={Object.keys(this.state.clusterStatus.nodes_status.endpointStates[0].endpoints).length} 
+                                  clusterName={this.props.name} key={this.props.name + '-' + dc} 
+                                  totalLoad={this.state.clusterStatus.nodes_status.endpointStates[0].totalLoad}/>
       )
 
       totalLoad = this.state.clusterStatus.nodes_status.endpointStates[0].totalLoad;
@@ -154,20 +161,20 @@ const Cluster = React.createClass({
 
     return (
       <div className="panel panel-default">
-              <div className="panel-body">
-    <div className="row">
-        <div className="col-lg-2"><a href={'repair.html?currentCluster=' + this.props.name}><h4>{this.props.name} <span className="badge">{humanFileSize(totalLoad,1024)}</span></h4></a><p>Running repairs : {runningRepairsBadge}<br/>{repairProgress}</p>
-        <button type="button" className="btn btn-xs btn-danger" onClick={this._onDelete}>Delete cluster</button>
-        </div>
-        <div className="col-lg-10">
-        <div className="row" style={rowDivStyle}>
-          <div className="row" style={rowDivStyle}>
-                {datacenters}
+        <div className="panel-body">
+          <div className="row">
+              <div className="col-lg-2"><a href={'repair.html?currentCluster=' + this.props.name}><h4>{this.props.name} <span className="badge">{humanFileSize(totalLoad,1024)}</span></h4></a><div>Running repairs : {runningRepairsBadge}<br/>{repairProgress}</div>
+              <button type="button" className="btn btn-xs btn-danger" onClick={this._onDelete}>Delete cluster</button>
+              </div>
+              <div className="col-lg-10">
+              <div className="row" style={rowDivStyle}>
+                <div className="row" style={rowDivStyle}>
+                      {datacenters}
+                </div>
+              </div>
+              </div>
+          </div>
           </div>
-        </div>
-        </div>
-    </div>
-    </div>
         </div>
     );
   },

diff --git a/reaper_ui/app/jsx/repair-form.jsx b/reaper_ui/app/jsx/repair-form.jsx
@@ -13,7 +13,7 @@ const repairForm = React.createClass({
     return {
       addRepairResultMsg: null, clusterNames: [], submitEnabled: false,
       clusterName: this.props.currentCluster!="all"?this.props.currentCluster:this.props.clusterNames[0], keyspace: null, tables: null, owner: null, segments: null,
-      parallism: null, intensity: null, cause: null, incrementalRepair: null
+      parallism: null, intensity: null, cause: null, incrementalRepair: null, formCollapsed: true
     };
   },
 
@@ -70,6 +70,15 @@ const repairForm = React.createClass({
     this.setState({submitEnabled: valid});
   },
 
+  _toggleFormDisplay: function() {
+    if(this.state.formCollapsed == true) {
+      this.setState({formCollapsed: false});
+    }
+    else {
+      this.setState({formCollapsed: true});
+    }
+  },
+
   render: function() {
 
     let addMsg = null;
@@ -172,10 +181,34 @@ const repairForm = React.createClass({
       </div>
     </div>
 
+
+
+    let menuDownStyle = {
+      display: "inline-block" 
+    }
+
+    let menuUpStyle = {
+      display: "none" 
+    }
+
+    if(this.state.formCollapsed == false) {
+      menuDownStyle = {
+        display: "none"
+      }
+      menuUpStyle = {
+        display: "inline-block"
+      }
+    }
+
+    const formHeader = <div className="panel-title" ><a href="#repair-form" data-toggle="collapse" onClick={this._toggleFormDisplay}>Start a new repair</a>&nbsp; <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={menuDownStyle}></span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={menuUpStyle}></span></div>
+
+
+
+
 
-    return (<div className="panel panel-default">
+    return (<div className="panel panel-warning">
               <div className="panel-heading">
-                <div className="panel-title" ><a href="#repair-form" data-toggle="collapse">Start a new repair</a></div>
+                {formHeader}
               </div>
               <div className="panel-body collapse" id="repair-form">
                 {addMsg}

diff --git a/reaper_ui/app/jsx/repair-list.jsx b/reaper_ui/app/jsx/repair-list.jsx
@@ -141,7 +141,7 @@ const repairList = React.createClass({
   },
 
   getInitialState: function() {
-    return {repairs: [], deleteResultMsg: null, clusterNames:[], currentCluster:this.props.currentCluster};
+    return {repairs: [], deleteResultMsg: null, clusterNames:[], currentCluster:this.props.currentCluster, runningCollapsed: false, doneCollapsed: false};
   },
 
   componentWillMount: function() {
@@ -179,6 +179,24 @@ const repairList = React.createClass({
     console.log("changed cluster to " + this.state.currentCluster);
   },
 
+  _toggleRunningDisplay: function() {
+    if(this.state.runningCollapsed == true) {
+      this.setState({runningCollapsed: false});
+    }
+    else {
+      this.setState({runningCollapsed: true});
+    }
+  },
+
+  _toggleDoneDisplay: function() {
+    if(this.state.doneCollapsed == true) {
+      this.setState({doneCollapsed: false});
+    }
+    else {
+      this.setState({doneCollapsed: true});
+    }
+  },
+
   render: function() {
 
     const rowsRunning = this.state.repairs.filter(repair => this.state.currentCluster == "all" || this.state.currentCluster == repair.cluster_name).filter(repair => repair.state != "DONE").map(repair =>
@@ -272,20 +290,60 @@ const repairList = React.createClass({
       </div>;
     }
 
+    let menuRunningDownStyle = {
+      display: "none" 
+    }
+
+    let menuRunningUpStyle = {
+      display: "inline-block" 
+    }
+
+    if(this.state.runningCollapsed == true) {
+      menuRunningDownStyle = {
+        display: "inline-block"
+      }
+      menuRunningUpStyle = {
+        display: "none"
+      }
+    }
+
+
+    let menuDoneDownStyle = {
+      display: "inline-block" 
+    }
+
+    let menuDoneUpStyle = {
+      display: "none" 
+    }
+
+    if(this.state.doneCollapsed == true) {
+      menuDoneDownStyle = {
+        display: "none"
+      }
+      menuDoneUpStyle = {
+        display: "inline-block"
+      }
+    }
+
+    const runningHeader = <div className="panel-title"><a href="#repairs-running" data-toggle="collapse" onClick={this._toggleRunningDisplay}>Running</a>&nbsp; <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={menuRunningDownStyle}></span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={menuRunningUpStyle}></span></div>
+    const doneHeader = <div className="panel-title"><a href="#repairs-done" data-toggle="collapse" onClick={this._toggleDoneDisplay}>Done</a>&nbsp; <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={menuDoneDownStyle}></span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={menuDoneUpStyle}></span></div>
+
+
+
     return (
             <div>
               {clusterFilter}
-              <div className="panel panel-default">
+              <div className="panel panel-primary">
                 <div className="panel-heading">
-                  <div className="panel-title"><a href="#repairs-running" data-toggle="collapse">Running</a></div>
+                  {runningHeader}
                 </div>
                 <div className="panel-body collapse in" id="repairs-running">
                   {tableRunning}
                 </div>
               </div>
-              <div className="panel panel-default">
+              <div className="panel panel-success">
                 <div className="panel-heading">
-                  <div className="panel-title"><a href="#repairs-done" data-toggle="collapse">Done</a></div>
+                  {doneHeader}
                 </div>
                 <div className="panel-body collapse" id="repairs-done">
                   {tableDone}

diff --git a/reaper_ui/app/jsx/schedule-form.jsx b/reaper_ui/app/jsx/schedule-form.jsx
@@ -14,7 +14,7 @@ const scheduleForm = React.createClass({
     return {
       addScheduleResultMsg: null, clusterNames: [], submitEnabled: false,
       clusterName: this.props.currentCluster!="all"?this.props.currentCluster:this.props.clusterNames[0], keyspace: null, tables: null, owner: null, segments: null,
-      parallism: null, intensity: null, startTime: null, intervalDays: null, incrementalRepair: null
+      parallism: null, intensity: null, startTime: null, intervalDays: null, incrementalRepair: null, formCollapsed: true
     };
   },
 
@@ -72,8 +72,18 @@ const scheduleForm = React.createClass({
     const valid = state.keyspace && state.clusterName && state.owner
       && state.startTime && state.intervalDays;
     this.setState({submitEnabled: valid});
+  }, 
+
+  _toggleFormDisplay: function() {
+    if(this.state.formCollapsed == true) {
+      this.setState({formCollapsed: false});
+    }
+    else {
+      this.setState({formCollapsed: true});
+    }
   },
 
+
   render: function() {
 
     let addMsg = null;
@@ -182,10 +192,30 @@ const scheduleForm = React.createClass({
       </div>
     </div>
 
+    let menuDownStyle = {
+      display: "inline-block" 
+    }
+
+    let menuUpStyle = {
+      display: "none" 
+    }
+
+    if(this.state.formCollapsed == false) {
+      menuDownStyle = {
+        display: "none"
+      }
+      menuUpStyle = {
+        display: "inline-block"
+      }
+    }
+
+    const formHeader = <div className="panel-title" ><a href="#schedule-form" data-toggle="collapse" onClick={this._toggleFormDisplay}>Add schedule</a>&nbsp; <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={menuDownStyle}></span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={menuUpStyle}></span></div>
+
+
 
-    return (<div className="panel panel-default">
+    return (<div className="panel panel-warning">
               <div className="panel-heading">
-                <div className="panel-title"><a href="#schedule-form" data-toggle="collapse">Add schedule</a></div>
+                {formHeader}
               </div>
               <div className="panel-body collapse" id="schedule-form">
                 {addMsg}

diff --git a/reaper_ui/app/repair.js b/reaper_ui/app/repair.js
@@ -1,5 +1,6 @@
 import jQuery from "jquery";
 import React from "react";
+import ReactDOM from "react-dom";
 import ServerStatus from "jsx/server-status";
 import Sidebar from "jsx/sidebar";
 import RepairForm from "jsx/repair-form";
@@ -31,7 +32,7 @@ jQuery(document).ready(function($){
     currentCluster = 'all';
   } 
 
-  React.render(
+  ReactDOM.render(
     React.createElement(repairScreen, {clusterNames, addRepairSubject, addRepairResult, currentCluster, repairs, deleteSubject: deleteRepairSubject,
     deleteResult: deleteRepairResult, updateStatusSubject: updateRepairStatusSubject, statusObservableTimer}),
     document.getElementById('wrapper')

diff --git a/reaper_ui/app/schedules.js b/reaper_ui/app/schedules.js
@@ -1,5 +1,6 @@
 import jQuery from "jquery";
 import React from "react";
+import ReactDOM from "react-dom";
 import ServerStatus from "jsx/server-status";
 import Sidebar from "jsx/sidebar";
 import ScheduleScreen from "jsx/schedule-screen";
@@ -28,7 +29,7 @@ jQuery(document).ready(function($){
     currentCluster = 'all';
   } 
 
-  React.render(
+  ReactDOM.render(
     React.createElement(ScheduleScreen, {clusterNames, addScheduleSubject, addScheduleResult, currentCluster, schedules, deleteSubject: deleteScheduleSubject,
     deleteResult: deleteScheduleResult, updateStatusSubject: updateScheduleStatusSubject, statusObservableTimer}),
     document.getElementById('wrapper')

diff --git a/src/main/resources/assets/deps.js b/src/main/resources/assets/deps.js
diff --git a/src/main/resources/assets/index.js b/src/main/resources/assets/index.js
diff --git a/src/main/resources/assets/repair.js b/src/main/resources/assets/repair.js
diff --git a/src/main/resources/assets/schedules.js b/src/main/resources/assets/schedules.js