log sample dashing widget

README.mkd

Introduction

This the sample log widget for CodingWithMe Learn Dashing Widget.

Dashing is the exceptionally handsome dashboard framework.

Using follow curl command to update the data inside

$ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "access": "1/0"}' http://localhost:3030/widgets/log
$ curl -d @log.json http://localhost:3030/widgets/log

log.coffee

class Dashing.Log extends Dashing.Widget
  ready: ->
  # This is fired when the widget is done being rendered

  onData: (data) ->
    # Fired when you receive data
    for key,value of data
      break if key in ["id","updatedAt"]
      id = $(@node).find("##{key}")
      console.log(id)
      [error,warning] = value.split("/")
      if error != "0"
        id.attr("class","value-error")
      else if warning != "0"
        id.attr("class","value-warning")
      else
        id.attr("class","value-ok")

log.erb

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="log" data-view="Log" data-title="Monitor logs" data-value="Hello World"></div>
    </li>

log.html

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

<ul class="list-nostyle">
  <li>
    <span class="label">Access Log</span>
    <span id="access" class="value-na" data-bind="access">0/0</span>
  </li>
  <li>
    <span class="label">Event Log</span>
    <span id="event2" class="value-na" data-bind="event2">0/0</span>
  </li>
    <li>
    <span class="label">Monitor Log</span>
    <span id="monitor" class="value-na" data-bind="monitor">0/0</span>
  </li>  
  <li>
    <span class="label">HA Log</span>
    <span id="ha" class="value-na" data-bind="ha">0/0</span>
  </li>
  <li>
    <span class="label">JBoss Boot log</span>
    <span id="jboss" class="value-na" data-bind="jboss">0/0</span>
  </li>
  <li>
    <span class="label">Core Dump</span>
    <span id="coredump" class="value-na" data-bind="coredump">0/0</span>
  </li>
</ul>

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

log.json

{
	"auth_token": "YOUR_AUTH_TOKEN", 
	"access" : "0/0",
	"event2" : "0/1",
	"monitor" : "0/0",
	"ha" : "1/0",
	"jboss": "5/0",
	"coredump": "1/0"
}

log.scss

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

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

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

  background-color: $background-color;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  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: 600;
    color: $value-color;
  }

 .value-warning {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: #e9ab17;
  }

  .value-error {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: #d26771;
  }

  .value-ok {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: #00ff00;
  }

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

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

}