Add build progress bar

groupon · Sep 25, 2015 · 1ce9fdb · 1ce9fdb
1 parent 6aad0ad
commit 1ce9fdb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/main/jsx/components/lib/ProgressBar.jsx b/src/main/jsx/components/lib/ProgressBar.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+require('./progress_bar.css');
+export default React.createClass({
+  render(){
+    const progressBar = this.props.visible?  <paper-progress  indeterminate ></paper-progress> : <paper-progress value="0" />;
+    return <div className="progressBar">{progressBar}</div>;
+  }
+});
diff --git a/src/main/jsx/pages/build_history_page.css → src/main/jsx/components/lib/progress_bar.css b/src/main/jsx/pages/build_history_page.css → src/main/jsx/components/lib/progress_bar.css
@@ -1,5 +1,4 @@
-paper-progress {
+.progressBar > paper-progress{
   display: block;
   width: 100%;
 }
-
diff --git a/src/main/jsx/pages/BuildHistoryPage.jsx b/src/main/jsx/pages/BuildHistoryPage.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import RangeSlider from './../components/lib/RangeSlider.jsx';
 import BuildFilters from './../components/job/BuildFilters.jsx';
 import BuildHistoryTable from './../components/job/BuildHistoryTable.jsx';
-require('./build_history_page.css');
+import ProgressBar from './../components/lib/ProgressBar.jsx';
 export default React.createClass({
   render(){
     const {query,builds,actions,dirty} = this.props.buildHistory;
@@ -21,7 +21,6 @@ export default React.createClass({
         filters={this.props.buildHistory.filters}
         actions= {{AddFilter,RemoveFilter,QueryChange}}
       />;
-      const progressBar = dirty?  <paper-progress  indeterminate ></paper-progress> : <span/>
       const buildHistoryTable = builds?<BuildHistoryTable 
         grouped={query.grouped} 
         buildFilters={buildFilters} 
@@ -30,7 +29,7 @@ export default React.createClass({
         builds ={builds}/> :<span/>;
 
         return(<span>
-          {progressBar}
+          <ProgressBar visible={dirty} />
           {buildHistoryTable}
           <div className="align-center" >
           </div>