My book recommendations

Jenkins Job Dashing widget

A beautiful Jenkins dashboardkj187_Dashboard_2_i4wkw6

I just released a new dashing-js widget on GitHub. It is a Jenkins widget which provides a highly visible view of the build status and build progress of selected Jenkins jobs.

A more detailed blog post with some background information is available on the official Jenkins blog.

A full manual and explanation on how to setup and configure this widget is available on GitHubIo.

Have fun and if you have any questions, write a comment below this post.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
  • Pingback: GitHub PullRequest Dashing widget – Julian Kleinhans()

  • kfh222

    Hi Julian,

    I’m very interested in setting this up, but I know absolutely nothing about dashing-js.

    I’m trying to follow you instructions exactly, but having some difficulty.

    After the install steps, you say: Move the widgets/jenkins_job/jenkins.config.sample.js file to the dashboard root directory and rename it to jenkins.config.js.

    But the dashboards directory doesn’t seem to exist.
    I tried creating a new dashboard, and making the edits in there, but that doesn’t really seem to work either.

    If you could add a few more “connect the dots” for dashing-js newbies, that would be great!

    Thanks,
    Kelly

    • Nachi Mehta

      https://github.com/fabiocaseri/dashing-js

      Follow the “Getting Started” steps there. It’ll generate the directory structure you need.

      • kfh222

        Thanks Nachi,
        I did get past that, I think the installation section is missing some steps that are probably obvious to most folks, creating the dashboard in the first place, and I’m not sure if a bundle step is needed or not.

        After I got past that, when I do “dashing-js start”, I get a repeating message “Error: true”.
        If I load the page in chrome, I see a single orange square with the contents “Convergence ##” with a number that is changing every few seconds.

        I’m sure that I’m (again) missing something obvious, any suggestions?

        Thanks,
        Kelly

        • kj187

          Sorry for the late answer, unfortunatelly I got no notification.. strange..
          In the next few days (or weeks) I will write a new blog article about “building a dashboard from zero”

          In the meantime, are you using Jade or Esj as template engine?
          If you are using Ejs you have to start dashing-js with

          $ dashing-js -e ejs start

          • kfh222

            Hi Julian,
            I wasn’t using dashing-js at all until I read this post, so I’m afraid that I have no idea how to answer that question!

            I tried starting dashing-js with -e ejs, the results seem the same:

            # dashing-js -e ejs start

            2016-01-28T19:55:08.720Z – info: Listening on http://0.0.0.0:3030, CTRL+C to stop

            Error: true

            Error: true

            Error: true

            Error: true

            Error: true

            Error: true

            2016-01-28T19:55:36.176Z – info: GET /sample 200 93ms

            2016-01-28T19:55:36.463Z – info: GET /events 200 27130ms

            2016-01-28T19:55:37.315Z – info: Served asset /application.css – 200 OK (80ms)

            2016-01-28T19:55:37.317Z – info: GET /assets/application.css 200 83ms – 6.72kb

            2016-01-28T19:55:37.359Z – info: Served asset /application.js – 200 OK (735ms)

            2016-01-28T19:55:37.360Z – info: GET /assets/application.js 200 738ms – 194.72kb

            2016-01-28T19:55:38.191Z – info: Served asset /fontawesome-webfont.woff?v=4.0.3 – 200 OK (3ms)

            2016-01-28T19:55:38.192Z – info: GET /assets/fontawesome-webfont.woff?v=4.0.3 200 4ms – 43.39kb

            2016-01-28T19:55:38.322Z – info: GET /views/graph.html 200 6ms – 167b

            2016-01-28T19:55:38.621Z – error: Served asset /favicon.ico – 404 Not found (4ms)

            2016-01-28T19:55:38.622Z – info: GET /assets/favicon.ico 404 5ms

            Error: true

          • kfh222

            Oh, and by the way, I edited both dashboards/layout.ejs and dashboards/layout.jade, adding the snippets you gave respectively. So I think it should have worked either way.

            The instructions above don’t say WHERE in those files the snippets should go, but I tried a few different places and it doesn’t seem to matter.

            Another note, when I load http://host:3030 in chrome, it redirects to http://host:3030/sample, I also tried going to http://host:3030/layout, in case that would do something different, but that doesn’t seem to load, no error, just says Waiting for host in the chrome status area.
            The dashing-js server outputs this:

            Error: true

            Error: true

            Error: true

            2016-01-28T20:00:25.942Z – info: GET /layout 200 13857ms

            2016-01-28T20:00:28.648Z – info: GET /layout 200 2649ms

            Error: true

            Error: true

            -Kelly

          • kj187

            http://host:3030/sample is the default dashboard. If you have created a new dashboard you have to call http://host:3030/YOUR_DASHBOARD_NAME

            Or change the default value in the server.js file
            dashing.default_dashboard = ‘YOUR_DASHBOARD_NAME’;

            Regarding your error message. It seems that something with your settings or with the connection to your Jenkins server is wrong. Could you confirm that you have access to your jenkins and that the your defined job id (job settings) is available in jenkins?

          • kfh222

            When I try that, I get the message Drats! That Dashboard doesn’t exist.
            I’ll work up a script to repeat all the steps I went through, in a different directory and post it, so that you can show me the error of my ways!

            In the meantime, it might help a lot if you could just tell me what directories I need to create/cd into before running the various npm commands, and then the dashing-js install command. I’m sure I’ve done something wrong there.
            in order to even find the layout.ejs file for example, it seemed that I had to do “dashing-js new xxx” to create the first dashboard, maybe that was wrong to begin with.

            As to the question about jenkins, I haven’t used the jenkins api before, but it seems as though I have several things wrong before I even get there, so…

            -Kelly

          • Ok listen, I will start to write a new blog post with a tutorial from scratch this weekend.. give me some days and I will publish it here

          • kfh222

            OK, thanks!
            -Kelly

          • Hey Kelly,

            fyi, I released the first of six blog post http://goo.gl/1mgN8Q

          • kfh222

            Thanks Julian, I’ll definitely try these instructions out next week!

            -Kelly

          • kfh222

            For example, If I run the “dashing-js install https:…..” command immediate after the “npm install memory-cache” command, the install fails because the jobs directory doesn’t exist.

            If I create the jobs directory before running the install command, then the install completes fine but there is no layout.ejs file to edit two steps later.

            Again, I’m sure I’m completely missing something that should be obvious, but…

            -Kelly

  • Nachi Mehta

    Julian, do you have links to the other widgets you used? I was able to implement your job widget! thanks

  • Deep Mehta

    Hi I could not install dashing-js can you please help me for this ?

    dashing-js install https://github.com/kj187/dashing-jenkins_job/archive/master.zip (I used this command)

    It gives following logs

    Installing zip “https://github.com/kj187/dashing-jenkins_job/archive/master.zip”

    create widgets/dashing-jenkins_job-master/

    create widgets/dashing-jenkins_job-master/README.md

    create widgets/dashing-jenkins_job-master/config.jenkins_job.sample.js

    create widgets/dashing-jenkins_job-master/jenkins_job.coffee

    create widgets/dashing-jenkins_job-master/jenkins_job.html

    create jobs/jenkins_job.job.js

    events.js:72

    throw er; // Unhandled ‘error’ event

    ^

    Error: ENOENT, open ‘jobs/jenkins_job.job.js’

    I tried everything but it is not successful .Actually I am new for NodeJS also,Please help me

    • Bob 4u

      i am getting the same error too… any help? does it depends on specific version of nodejs and npm?

      • I will check that in the next few days and I will give you feedback afterwards

    • Hey, I will check that in the next few days and I will give you feedback afterwards