Can dashing change style (e.g. background-color) depending of the job's value?

[dkapanidis]

A simple use case of this would be to make a box color greenish when good values are given, and redish when bad values are given, giving a visual alert of things to notice.

It would be good to see a generic solution for existing widgets, or explain how a new widget could be implemented to do that.

[davefp]

If you look in the coffee file for a widget you'll see the code that gets called whenever new data comes in. From that function changing the background colour of the widget is a few simple lines of js. On Nov 12, 2012 9:52 AM, "spiddy" notifications@github.com wrote:

A simple use case of this would be to make a box color greenish when good values are given, and redish when bad values are given, giving a visual alert of things to notice.

It would be good to see a generic solution for existing widgets, or explain how a new widget could be implemented to do that.

— Reply to this email directly or view it on GitHubhttps://github.com/Shopify/dashing/issues/24.

[aidansteele]

I hate to be a pest, but could you perhaps provide an example of such code, @davefp ? It would be very much appreciated. :)

[mattcl]

onData: (data) ->
  if data.something
     $(@node).css('background-color', '#fff')

[crcastle]

Also try adding the class 'status-danger' or 'status-warning' to the widget. It makes the panel pulsate yellow or red.

https://github.com/Shopify/dashing/blob/master/templates/project/assets/stylesheets/application.scss#L151

[dieterdemeyer]

I seem to be struggling a bit with this... The classes status-danger and status-warning actually don't pulsate... But my biggest problem is setting the class for a widget to this status from a certain outcome in de scheduler job...

Any help with this would be much appreciated..

[crcastle]

This is a snippet from the ruby job that sends the status to the widget. It is used to monitor the depth of a queue. If it gets above 3 then I get worried. If it gets above 9 then something's very wrong. This sends an event to any widgets listening for (i.e. with data-id equal to) report-queue events. Note that 'danger' and 'warning' are flipped because that's how the CSS came in the dashing library and I was too lazy to fix it.

# set status based on queue depth
status = case current_queue_depth
  when 0..3 then 'ok'
  when 4..9 then 'danger'
  else 'warning'
end
send_event('report-queue', { current: current_depth, status: status })

I'm changing the background of a Number widget, so in the Number.coffee widget I have this function to set the class to status-warning, status-danger, or status-ok:

onData: (data) ->
  if data.status
    # clear existing "status-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bstatus-\S+/g, ''
      # add new class
      $(@get('node')).addClass "status-#{data.status}"

[dieterdemeyer]

@crcastle Thanks for your reply.... I had some problems resetting the status and knew that clearing the status classes would help but didn't know how to.. Your code did the trick..

[dieterdemeyer]

@crcastle Are you having some issues with the animation for the status classes ? This doesn't seem to work...

[crcastle]

hmmm.... what browser are you using? i've only tested in chrome.

On Mon, Dec 10, 2012 at 4:10 AM, Dieter De Meyer notifications@github.comwrote:

@crcastle https://github.com/crcastle Are you having some issues with the animation for the status classes ? This doesn't seem to work...

— Reply to this email directly or view it on GitHubhttps://github.com/Shopify/dashing/issues/24#issuecomment-11190783.

[dieterdemeyer]

I'm using Firefox 10.05 on CentOS 6.3.

[dieterdemeyer]

I can confirm that the animations on Chrome work, but not on Firefox...

[davefp]

Look at the animation styles set in application.scss as well as the compiled styles. I have a hunch that there's something in there that FF is puking on.

[cyl-moz]

My guess is that application.scss is not generating the framesets needed for -moz-animation or -ms-animation.

(Caveat emptor, as I'm not terribly web-development oriented!) I was able to get things working by deleting the @-webkit-keyframes status-warning-background and @-webkit-keyframes status-danger-background definitions, then adding the following:

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@include keyframes(status-warning-background) {
  0%   { background-color: $background-warning-color-1; }
  50%  { background-color: $background-warning-color-2; }
  100% { background-color: $background-warning-color-1; }
}

@include keyframes(status-danger-background) {
  0%   { background-color: $background-danger-color-1; }
  50%  { background-color: $background-danger-color-2; }
  100% { background-color: $background-danger-color-1; }
}

As a trivial test, it works in FF19.0.2 and Chrome 25.0.1364.172 (both running on MacOSX).

[jbogarin]

As far as I can see, this change hasn't been included in the master branch. Is it possible to do it?

I can confirm that the change actually works.

[derwin12]

Some widgets do it..check the number widget for example. From: jbogarinSent: Thursday, July 10, 2014 8:07 PMTo: Shopify/dashingReply To: Shopify/dashingSubject: Re: [dashing] Can dashing change style (e.g. background-color) depending of the job's value? (#24)As far as I can see, this change hasn't been included in the master branch. Is it possible to do it?

I can confirm that the change actually works.

—Reply to this email directly or view it on GitHub.

[jbogarin]

Yeah, I know. What I'm talking about is that animations don't work in Firefox, but they do if you put the changes that cyl-moz described above.

[mbainter]

Agreed - works for me as well. The diff I have looks like this:

--- application.scss.orig   2014-07-11 13:35:58.551965551 -0400
+++ application.scss    2014-07-11 13:36:02.010226539 -0400
@@ -16,16 +16,33 @@
 $background-danger-color-2: #ff9618;
 $text-danger-color: #fff;

-@-webkit-keyframes status-warning-background {
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+  @-ms-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+@include keyframes(status-warning-background) {
   0%   { background-color: $background-warning-color-1; }
   50%  { background-color: $background-warning-color-2; }
   100% { background-color: $background-warning-color-1; }
 }
-@-webkit-keyframes status-danger-background {
+
+@include keyframes(status-danger-background) {
   0%   { background-color: $background-danger-color-1; }
   50%  { background-color: $background-danger-color-2; }
   100% { background-color: $background-danger-color-1; }
 }
+
 @mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){
   -webkit-animation:  $animation-name $duration $function #{$animation-iteration-count};
   -moz-animation:     $animation-name $duration $function #{$animation-iteration-count};

[odrino14]

how can i use this for dashing-icinga2 ? i want that my kachel-color for blue to red change when the count of critical is 1 or more did someone have any idear ?