Commit 0f17656a authored by Leonardo Menezes's avatar Leonardo Menezes
Browse files

overview: tooltips on node stats hover 

closes #21
parent e4567e72

app/models/overview/Node.scala

+2 −2
Original line number Diff line number Diff line
@@ -44,8 +44,8 @@ object Node { 
    val freeInBytes = (stats \ "fs" \ "total" \ "free_in_bytes").asOpt[Long].getOrElse(0l)

    val usedPercent = 100 - (100 * (freeInBytes.toFloat / totalInBytes.toFloat)).toInt

    Json.obj(

      "total_in_bytes" -> JsNumber(totalInBytes),

      "disk_free_in_bytes" -> JsNumber(freeInBytes),

      "total" -> JsNumber(totalInBytes),

      "free" -> JsNumber(freeInBytes),

      "used_percent" -> JsNumber(usedPercent)

    )

  }

public/js/app.js

+3 −10
Original line number Diff line number Diff line
@@ -2167,17 +2167,10 @@ angular.module('cerebro').directive('ngProgress', 
      scope: {

        value: '=value',

        max: '=max',

        text: '=text'

        text: '=text',

        tooltip: '=tooltip'

      },

      template: function(elem, attrs) {

        return '<span class="detail"><small>{{text}}</small></span>' +

          '<div class="progress progress-thin">' +

          '<div class="progress-bar-info"' +

          'style="width: {{(value / max) * 100}}%"' +

          'ng-class="{\'progress-bar-danger\': {{(value / max) > 0.75}}}">' +

          '{{value}}%' +

          '</div></div>';

      }

      templateUrl: 'shared/progress.html'

    };

  }

);

public/overview.html

+24 −4
Original line number Diff line number Diff line
@@ -206,16 +206,36 @@ 
        </div>

        <div class="row row-condensed">

          <div class="col-lg-3 col-condensed">

            <ng-progress value="node.heap.used_percent" max="100" text="'heap'"/>

            <ng-progress

              value="node.heap.used_percent"

              max="100"

              text="'heap'"

              tooltip="'used: ' + (node.heap.used | bytes) + '\nmax: ' + (node.heap.max | bytes)"

            />

          </div>

          <div class="col-lg-3 col-condensed">

            <ng-progress value="node.disk.used_percent" max="100" text="'disk'"/>

            <ng-progress

              value="node.disk.used_percent"

              max="100"

              text="'disk'"

              tooltip="'free: ' + (node.disk.free | bytes) + '\ntotal: ' + (node.disk.total | bytes)"

            />

          </div>

          <div class="col-lg-3 col-condensed">

            <ng-progress value="node.cpu_percent" max="100" text="'cpu'"/>

            <ng-progress

              value="node.cpu_percent"

              max="100"

              text="'cpu'"

              tooltip="'process cpu: ' + node.cpu_percent + '%'"

            />

          </div>

          <div class="col-lg-3 col-condensed">

            <ng-progress value="node.load_average" max="node.available_processors" text="'load'"/>

            <ng-progress

              value="node.load_average"

              max="node.available_processors"

              text="'load'"

              tooltip="'1min avg.: ' + (node.load_average | number:2)"

            />

          </div>

        </div>

        <div ng-show="expandedView" class="node-labels">

public/shared/progress.html

0 → 100644
+11 −0
Original line number Diff line number Diff line 
<span title="{{tooltip}}">

<span class="detail"><small>{{text}}</small></span>

<div class="progress progress-thin">

  <div

    class="progress-bar-info"

    style="width: {{(value / max) * 100}}%"

    ng-class="{progress-bar-danger: ((value / max) > 0.75)}">

    {{value}}%

  </div>

</div>

</span>
 
 No newline at end of file

src/app/shared/progress.js

+3 −10
Original line number Diff line number Diff line
@@ -5,17 +5,10 @@ angular.module('cerebro').directive('ngProgress', 
      scope: {

        value: '=value',

        max: '=max',

        text: '=text'

        text: '=text',

        tooltip: '=tooltip'

      },

      template: function(elem, attrs) {

        return '<span class="detail"><small>{{text}}</small></span>' +

          '<div class="progress progress-thin">' +

          '<div class="progress-bar-info"' +

          'style="width: {{(value / max) * 100}}%"' +

          'ng-class="{\'progress-bar-danger\': {{(value / max) > 0.75}}}">' +

          '{{value}}%' +

          '</div></div>';

      }

      templateUrl: 'shared/progress.html'

    };

  }

);