Job Status Widget with progress bar

README.md

@@ -109,6 +109,27 @@ key      | required |description                                   | notes
 ```
 
 
+## Jenkins Job Status With Progress
+
+![jenkins job status](https://raw.githubusercontent.com/przemuh/mozaik-ext-jenkins/progress-job-status/preview/jenkins.job_status_progress.png)
+
+> Display job current build status with progress % - based on Job Status - bold.
+
+### parameters
+
+key      | required |description                                   | notes
+---------|----------|----------------------------------------------|-----------------------------------------
+`job`    | yes      | *jenkins job identifier*                     |
+
+### usage
+
+```javascript
+{
+  type: 'jenkins.job_status_progress', job: 'my-job',
+  columns: 1, rows: 1, x: 0, y: 0
+}
+```
+
 
 ## Jenkins View
 

src/client.js

@@ -65,7 +65,7 @@ const client = mozaik => {
         },
 
         job(params) {
-            return buildRequest(`/job/${ params.job }/api/json?pretty=true&depth=10&tree=builds[number,duration,result,builtOn,timestamp,id,building,url]`)
+            return buildRequest(`/job/${ params.job }/api/json?pretty=true&depth=10&tree=builds[number,estimatedDuration,duration,result,builtOn,timestamp,id,building,url]`)
                 .then(res => res.body.builds)
             ;
         },

src/components/JobStatusProgress.jsx

@@ -0,0 +1,92 @@
+import React, { Component, PropTypes } from 'react'; // eslint-disable-line no-unused-vars
+import moment                          from 'moment';
+import reactMixin                      from 'react-mixin';
+import { ListenerMixin }               from 'reflux';
+import Mozaik                          from 'mozaik/browser';
+import { getBuildStatus }              from './util';
+import compact                         from 'lodash/compact';
+
+class JobStatusProgress extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = { previousBuild: {}, currentBuild: {} };
+    }
+
+    getApiRequest() {
+        const { job } = this.props;
+
+        return {
+            id:     `jenkins.job.${job}`,
+            params: { job }
+        };
+    }
+
+    onApiData(builds) {
+        const [currentBuild = {}, previousBuild = {}] = builds;
+        this.setState({ currentBuild, previousBuild });
+    }
+
+    render() {
+        const { job } = this.props;
+        const { currentBuild, previousBuild } = this.state;
+        const currentStatus = getBuildStatus(currentBuild);
+        const previousStatus = getBuildStatus(previousBuild);
+        const title = this.props.title || `Jenkins job ${ job }`;
+
+        const classList = [
+            'widget__body__colored',
+            `jenkins__view__job__build__colored_status--${ (currentBuild.building ? previousStatus : currentStatus).toLowerCase() }`
+        ];
+
+        const iconClassList = [
+            'fa',
+            currentStatus === 'SUCCESS' && 'fa-check',
+            currentStatus === 'FAILURE' && 'fa-close',
+            currentStatus === 'UNSTABLE' && 'fa-meh-o',
+            currentBuild.building && 'fa-spin fa-cog',
+        ];
+
+        const progress = currentBuild.building ?
+            ((Date.now() - currentBuild.timestamp) / currentBuild.estimatedDuration) * 100 : 100;
+
+        const progressStyle = {
+            border:          '1px solid #000',
+            backgroundColor: 'red',
+            width:           `${progress}%`
+        };
+
+        return (
+            <div className={compact(classList).join(' ')}>
+                <div className="jenkins__job-status__current">
+                    Build #{currentBuild.number}<br />
+                    <a className="jenkins__job-status__current__status" href={currentBuild.url}>
+                        {title}&nbsp;<br />
+                        <i className={compact(iconClassList).join(' ')}/>&nbsp;
+                        <span className="jenkins__job-status__current__progress-number">
+                            {progress < 100 && `${Math.round(progress)}%`}
+                        </span>
+                    </a>
+                    {progress < 100 && <div className="jenkins__job-status__current__progress-bar" style={progressStyle}/>}
+                    <time className="jenkins__job-status__current__time">
+                        <i className="fa fa-clock-o"/>&nbsp;
+                        {moment(currentBuild.timestamp, 'x').fromNow()}
+                    </time>
+                </div>
+            </div>
+        );
+    }
+}
+
+JobStatusProgress.displayName = 'JobStatusProgress';
+
+JobStatusProgress.propTypes = {
+    job:   PropTypes.string.isRequired,
+    title: PropTypes.string
+};
+
+reactMixin(JobStatusProgress.prototype, ListenerMixin);
+reactMixin(JobStatusProgress.prototype, Mozaik.Mixin.ApiConsumer);
+
+export default JobStatusProgress;

src/components/index.js

@@ -2,12 +2,14 @@ import Jobs               from './Jobs.jsx';
 import JobStatus          from './JobStatus.jsx';
 import JobBuilds          from './JobBuilds.jsx';
 import JobBuildsHistogram from './JobBuildsHistogram.jsx';
+import JobStatusProgress  from './JobStatusProgress.jsx';
 import View               from './View.jsx';
 
 
 export default {
     Jobs,
     JobStatus,
+    JobStatusProgress,
     JobBuilds,
     JobBuildsHistogram,
     View

styl/index.styl

@@ -62,6 +62,13 @@
         &--failure
           color $failure-color
 
+      &__progress-number
+        font-size 70%
+
+      &__progress-bar
+        border 0.25em solid $main-txt-color
+        margin 8px 0
+
       &__time
         font-size 13px
         color darken($main-txt-color, 20)