Dashing: Widget not updated on load/reload until job refreshes data (CSS Transition not initilized)

Question

I have no understanding of this html/coffee/scss stuff. (ruby is ok) I'm using this hotlist widget from here: https://gist.github.com/andre-morassut/8705385 It works but when loading/reloading the page in the browser I get empty widgets until the job is run again. In general the data should be available. The "more-info" field is also set by the same job and is visible from start. I'd really appreciate some help. My job is currently scheduled every minute but I want an update every hour, only (due to the server queries which are running within the job)

I guess, that it is an issue with this transitions stuff in the scss? I don't need transitions.

Thanks in advance

My job looks like

    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'clang'), 'clang')
    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'gcc'), 'gcc')

    #...


    def sendEventData(myData, eventHandler)
      itemarray = [
      #{label: 'at', value: 'result'},
        {label: (myData[:current][:end] == nil) ? myData[:current][:start] : myData[:current][:end], value: myData[:current][:state]},
       {label: (myData[:previous][:end] == nil) ? myData[:previous][:start] : myData[:previous][:end], value: myData[:previous][:state]}
      ];

    case myData[:current][:state]
      when 'successful'
        heat = 1
      when 'pending'
        case myData[:previous][:state]
      when 'successful'
        heat = 1
      else
        heat =10
      end
      else
        heat = 10
      end

    datastruct = {
     items: itemarray,
     hotnessvalue:heat  
    }

    send_event(eventHandler, datastruct)
    send_event(eventHandler, {moreinfo: 'Current BuildNo ' + myData[:current][:revisions].to_s})
    end

hotlist.coffee looks like

    class Dashing.Hotlist extends Dashing.Widget
      ready: ->
        if @get('unordered')
          $(@node).find('ol').remove()
        else
          $(@node).find('ul').remove()

      onData: (data) ->
       node = $(@node)
       value = parseInt data.hotnessvalue
       cool = parseInt node.data "cool"
       warm = parseInt node.data "warm"
       level = switch
        when value <= cool then 0
        when value >= warm then 4
       else 
         bucketSize = (warm - cool) / 3 # Total # of colours in middle
         Math.ceil (value - cool) / bucketSize

      backgroundClass = "hotness#{level}"
      lastClass = @get "lastClass"
      node.toggleClass "#{lastClass} #{backgroundClass}"
      @set "lastClass", backgroundClass

hotlist.hmtl

    <h1 class="title" data-bind="title"></h1>

    <ol>
     <li data-foreach-item="items">
      <span class="label" data-bind="item.label"></span>
      <span class="value" data-bind="item.value"></span>
     </li>
    </ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value"></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

scss

    //        ----------------------------------------------------------------------------
    // Mixins
    //     ----------------------------------------------------------------------------
    @mixin transition($transition-property, $transition-time, $method) {
      -webkit-transition: $transition-property $transition-time $method;
      -moz-transition: $transition-property $transition-time $method;
      -o-transition: $transition-property $transition-time $method;
      transition: $transition-property $transition-time $method;
    }

    //    ----------------------------------------------------------------------------
    // Sass declarations
    //    ----------------------------------------------------------------------------
    $background-color:  #12b0c5;
    $value-color:       #fff;

    $title-color:       rgba(255, 255, 255, 0.9);
    $label-color:       rgba(255, 255, 255, 0.9);
    $moreinfo-color:    rgba(2, 2, 2, 0.6);

    // ----------------------------------------------------------------------------
    // Widget-list styles
    // ----------------------------------------------------------------------------
    .widget-hotlist {

       background-color: $background-color;
       vertical-align: top !important;
      @include transition(background-color, 0.5s, linear);

      .title {
        color: $title-color;
        font-weight: 800;
      }

      ol, ul {
        margin: 0 15px;
        text-align: left;
        color: $label-color;
      }

      ol {
         list-style-position: inside;
      }

      li {
        margin-bottom: 5px;
      }

      .list-nostyle {
        list-style: none;
      }

      .label {
         color: $label-color;
       }

          .value {
            float: right;
            margin-left: 12px;
            font-weight: 800;
            color: $value-color;
          }

          .updated-at {
            color: rgba(0, 0, 0, 0.3);
          }

          .more-info {
            color: $moreinfo-color;
          }

    }
    .hotness0 { background-color: #00C176; }
    .hotness1 { background-color: #88C100; }
    .hotness2 { background-color: #FABE28; }
    .hotness3 { background-color: #FF8A00; }
    .hotness4 { background-color: #FF003C; }

score 0 · Accepted Answer · answered Oct 26 '15 at 15:30

0

This is how Dashing works. The data to the widgets wont feed in until you run it the first time.

Why dont you stream the data first before "SCHEDULER.every ..."? That should set the widgets up first and will wait until the next scheduled refresh for the new data.

answered Oct 26 '15 at 15:30

sam

1,280
2
11
20

I'm not sure, what you mean. The job is running several times, so the "backend" has the data all data. I think I thought I need something like described here: https://github.com/Shopify/dashing/issues/50 But something like ready: -> @onData({ value: 0 }) did not help, yet – Fookiee Oct 26 '15 at 15:42
I mean, for example "SCHEDULER.every '2s' do" in the sample.rb is where the data is generated and pushed to the widgets. So, when you reload/refresh/start the dashboard, it wont start until 2s later. If you set that to 1hr, it will start streaming after 1hr. So, if you stream some data before the first scheduled job, it should showup immediate and will refresh after 1hr (if you set it to refresh every hour) – sam Oct 26 '15 at 15:50
Ah, yes, I have considered this. Especially for the graph widget which shows historical data I'll do it that way. Anyway, Dashing should work different. When I switch the widget here from Hotlist to List I get all data immediately - even when the job runs only every 24hrs. This means, it is a real rendering issue. So your solution is my fallback. – Fookiee Oct 26 '15 at 16:05
Graph, List and others have data initialized at the very beginning in the jobs. Thats why the data is streamed immediately. Goodluck! – sam Oct 26 '15 at 16:34
This suggested caching works of course. However I'm still unhappy with the fact, that my dashing instance pushes updates to my estimated 85 future users every 2s - while the data itself is updated every 30m only. My current investigation let me believe that the css3 transition attribute is causing the issue – Fookiee Oct 28 '15 at 12:17
Actually, I was suggesting something else. You initialize the dashboard once (outside the schedule), but keep the update schedule at 30m or any other time window you want. – sam Oct 28 '15 at 17:55
Ah, ok. I set up a second SCHEDULER.in '2s' do Update() end and made the same in both schedulers... no change – Fookiee Oct 29 '15 at 09:25
Problem solved... you were right O_O. The issue was not in the frontend. – Fookiee Oct 29 '15 at 12:05

Dashing: Widget not updated on load/reload until job refreshes data (CSS Transition not initilized)

1 Answers1