Changing css according to data

Question

I'm doing a widget with dashing.io and I would like to change the jenkins jobs according to the color I receive in my json file (wich I get from the Jenkins API).

ie: The job is complete, I get the color value "blue" from my json file and I want the text to be blue on the "widget jenkins" i my dashboard.

Problem: I don't really know how to get my data from my json file in my coffeescript script. Neither I know how to change the css.

My json file goes like this:

{
    "assignedLabels" : [
      {

      }
    ],
    "mode" : "NORMAL",
    "nodeDescription" : "blabla",
    "nodeName" : "",
    "numExecutors" : blabla,
    "description" : blabla,
    "jobs" : [
      {
        "name" : "JOB_NAME",
        "url" : "MY_JOB_URL",
        "color" : "blue"
      }
    ]
}

Here is my widget code:

require 'net/http'
require 'json'
require 'time'

JENKINS_URI = URI.parse("jenkins_url")

JENKINS_AUTH = {
  'name' => 'user',
  'password' => 'pwd'
}

def get_json_for_master_jenkins()
    http = Net::HTTP.new(JENKINS_URI.host, JENKINS_URI.port)
    request = Net::HTTP::Get.new("/jenkins/api/json?pretty=true")

    if JENKINS_AUTH['name']
        request.basic_auth(JENKINS_AUTH['name'], JENKINS_AUTH['password'])
    end
    response = http.request(request)
    JSON.parse(response.body)
end
# the key of this mapping must be a unique identifier for your job, the according value must be the name that is specified in jenkins

SCHEDULER.every '100s', :first_in => 0 do |job|
    thom = get_json_for_master_jenkins()
send_event('master_jobs', 
    jobs: thom['jobs'][0..4],
    colors:thom['jobs']['color']
)

end

Could you guys help me ? I'm really new to this, try to make it simple please.

Could you post some code you have already done ? – user3241019 Sep 24 '14 at 09:22 — user3241019, Sep 24 '14 at 09:22
Here you go, thank you for your concern :) – EZPK Sep 24 '14 at 09:29 — EZPK, Sep 24 '14 at 09:29

score 1 · Answer 1 · edited Apr 30 '15 at 01:37

1

OK, I think I found the answer.

Jenkins is built on batman.js, and there is a way to interact with the DOM.

I use the provided batman.js attribute data-bind-class like this in my widget HTML:

.blue{

    #CSS stuff goes here

}

edited Apr 30 '15 at 01:37

ASCIIThenANSI

865
1
9
27

answered Sep 24 '14 at 10:51

EZPK

97
1
1
9

Changing css according to data

Here is my widget code:

1 Answers1