Build Realtime AngularJS Dashboard with AngularJS and Bootstrap UI — Part 2

Building a Realtime AngularJS Dashboard using AngularJS and Bootstrap UI — Part 2

This post is a continuation of where we left off from our previous post “Building a Realtime AngularJS Dashboard using AngularJS and Bootstrap UI — Part 1“.

Creating our Tabs for the Dashboard

dashboardTabs

In order to create these toggable tabs, I have added the data-toggle=”tab” attribute to the HTML anchor tag. Then set the panes with the corresponding id to each tab. Additionally you will need to add the attribute class=”tab-pane” in the div tag. This ties each tab to each pane that it relates to.

<ul class="nav nav-tabs">
	<li class="active"><a data-toggle="tab" href="#cpu_tab"
		ng-click="setTabIndex(tabIndex.CPU)"><i class="fa fa-laptop"></i>
			CPU</a></li>
	<li><a data-toggle="tab" href="#memory_tab"
		ng-click="setTabIndex(tabIndex.MEMORY)"><i
			class="fa fa-ticket"></i> Memory</a></li>
	<li><a data-toggle="tab" href="#disk_tab"
		ng-click="setTabIndex(tabIndex.DISK)"><i
			class="fa fa-database"></i> Disk</a></li>
	<li><a data-toggle="tab" href="#network_tab"
		ng-click="setTabIndex(tabIndex.IO)"><i class="fa fa-sitemap"></i>
			I/O & Network</a></li>
	<li><a data-toggle="tab" href="#os_tab"
		ng-click="setTabIndex(tabIndex.OS)"><i class="fa fa-windows"></i>
			OS / Java</a></li>
</ul>

CPU Historical Graph using Sparkline Chart

sparklineChart
<sparklinechart data="{{cpu.system_history_list}}"
  trigger="{{tabIndex}}"
  options="{type: 'line', width: '90%', height: '80px', 
  tooltipFormat: '<span>{{prefix}}{{y}}{{suffix}}</span>', 
  lineColor: 'blue', fillColor: 'lightblue'}">
</sparklinechart>

CPU Graph Canv Gauge

CanvGaugeCPU
<canvas canv-gauge id="cpu_gauge1"
  value="{{cpu.system}}"
  options="{width: 150, height: 150, glow: true, 
  title: 'System CPU', units: 'CPU %',
    highlights : [{
      from  : 0,
      to    : 40,
      color : 'PaleGreen'
    }, {
      from  : 40,
      to    : 60,
      color : 'Khaki'
    }, {
      from  : 60,
      to    : 80,
      color : 'LightSalmon'
    }, {
      from  : 80,
      to    : 100,
      color : 'Red'
    }] }">
</canvas>

Canv-Gauge AngularJS Directive

After looking for a nice gauge implementation and finding Mikhus/Canv-gauge I was really excited. This is a nicely written component that integrates well with my real-time application. According to the documentation and by reviewing the source code, canv-gauge uses pure JavaScript and HTML5 canvas which makes it compatible with most modern browsers both on desktops and mobile devices. I subsequently began looking to see if their were any AngularJS implementations available on the web. Having exhausted my search results, I set out to create my own AngularJS directive to integrate with canv-gauge.

angular.module('ngCanvGauge', [])
  .directive('canvGauge', ['$timeout', function ($timeout) {
    return {
      restrict: 'EA',
      scope: {
        id: '@',
        class: '@',
        width: '=',
        height: '=',        
        glow: '=',
				title: '@',
        units: '@',
        value: '@',
        strokeTicks: '=',
    ...
    ...

Download Canv-Gauge AngularJS Directive

I am planning on making the cang-gauge angularjs directive on Github as soon as possible. In the meantime, you are able to pull in the entire code base for this project at the end of this tutorial series.

Reviewing Process Statistics in the Real-Time Dashboard

<div class="x_content">
  <span class="pull-left processIcon"></span>
  <div class="DetailsSlab">
    <p class="title">{{procs.threads | number:0 }} Number
      of Threads, {{procs.total_procs | number:0 }} Number of
      Total Processes</p>
      <p class="title">
      <br />
      <br />
      <br />
    </p>
  </div>
  <div class="col-sm-10">
    <nvd3 options="procs.options" data="procs.data"></nvd3>
  </div>
  <div class="col-sm-2">
    <table class="tableInset">
      <tr>
        <th>Process Details</th>
      </tr>
      <tr>
        <td>{{procs.threads | number:0 }} # of Threads</td>
      </tr>
      <tr>
        <td>{{procs.running_procs | number:0 }} Running</td>
      </tr>
      <tr>
        <td>{{procs.sleeping_procs | number:0 }} Sleeping</td>
      </tr>
      <tr>
        <td>{{procs.idle_procs | number:0 }} Idle</td>
      </tr>
      <tr>
        <td>{{procs.zombie_procs | number:0 }} Zombie</td>
      </tr>
      <tr>
        <td>{{procs.stopped_procs | number:0 }} Stopped</td>
      </tr>
      <tr>
        <td>{{procs.total_procs | number:0 }} Total</td>
      </tr>
    </table>
  </div>
</div>

Memory Details in the Real-Time Dashboard

<div class="x_panel">
  <div class="x_title">
    <h2>Memory Statistics</h2>
    <ul class="nav navbar-right panel_toolbox">
      <li><a class="collapse-link">
        <i class="fa fa-chevron-up"></i></a>
      </li>
      <li class="dropdown"><a href="#"
        class="dropdown-toggle" data-toggle="dropdown"
        role="button" aria-expanded="false">
        <i class="fa fa-wrench"></i></a>
        <ul class="dropdown-menu" role="menu">
          <li><a ng-click="changeScale('kilobytes')">Display
              in Kilobytes</a></li>
          <li><a ng-click="changeScale('megabytes')">Display
              in Megabytes</a></li>
          <li><a ng-click="changeScale('gigabytes')">Display
              in Gigabytes</a></li>
        </ul></li>
      <li><a class="close-link"><i class="fa fa-close"></i></a>
      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="x_content">
    <span class="pull-left memoryIcon"></span>
    <div class="DetailsSlab">
      <p class="title">{{memory.total_mem | number:0}} Bytes
        Total Memory</p>
      <p class="title">
        <br />
      </p>
    </div>
    <div class="col-sm-10">
      <canvas id="line" width="500" height="250"
        class="chart chart-line" chart-data="data"
        chart-labels="labels" chart-colours="colors"
        chart-legend="false" chart-series="series"
        chart-options="{animation: false}">
      </canvas>
    </div>
    <div class="col-sm-2">
      <table class="tableInset">
        <tr>
          <th>Memory Details</th>
        </tr>
        <tr>
          <td>{{memory.total_memory | number:0 }}
            {{memory.scale_precision}} Total</td>
        </tr>
        <tr>
          <td>{{memory.used_memory | number:0 }}
            {{memory.scale_precision}} Used</td>
        </tr>
        <tr>
          <td>{{memory.free_memory | number:0 }}
            {{memory.scale_precision}} Free</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Creating the Selectable Drive Icons for Real-Time Dashboard

diskDriveIcons
<div class="col-sm-4 centered">
  <div class="centered" justgage title="Disk Space"
    title-font-color="#999"
    customSectors="{{disk_details.customSectors}}"
    value="{{disk_details.use_percentage}}"
    value-font-color="#999" width="200" height="150" min="0"
    max="100" label="Used Percentage" label-font-color="#999"
    start-animation-time="300" start-animation-type="linear"
    refresh-animation-time="300"
    refresh-animation-type="linear" counter="true">
  </div>
</div>

Let’s View the Realtime AngularJS Dashboard GUI Screens

As you can see from the following screen shots, the UI is quite appealing in its design.

Associated Posts

angular_bootstrap_dashboard

Please Share Us on Social Media

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *