Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

This article will show you how to build a very simple monitor that allows you to observe some OS parameters, such as free memory available. We will be using Node.js, Angular 4, and Chart.js – and all you need is Angular IDE.

We will be creating two applications; the first is a Node application that will monitor the OS parameters and send them via websocket to the second app, which is an Angular 4 application. The Angular app will utilize Chart.js to represent the server status graphically.

Server App

To keep things simple, we will run our Node application on the same machine as the Angular application; typically, you would be executing this code on your server, a different physical, or virtual machine.
If you don’t already have Angular IDE, download and install it now. Create a new project using the Faceted Project wizard (File > New > Other > General > Faceted Project) and name it DuneServer.

faceted-project-wizard

Create a package.json file in the root folder of the project with the following content

Our package.json contains 3 dependencies: os-monitor – a very simple monitor for the built-in os module in Node.js, nodemon – monitor for any changes in your Node.js application and automatically restart the server (perfect for development), and socket.io – enables real-time bidirectional event-based communication.

Now, in the Terminal+ view (Window > Show View > Terminal+) , let’s select the DuneServer project and type in the following command.
npm install

npm-install

This will download and install all the dependencies of the project as Node modules.

Let’s also create the main code for our application, create a new file named index.js in the root of the project, and place the following code in it.

In the code above we imported socket.io and created a server running on port 9500, next we imported os-monitor. The socket.io server will emit a connect event when a client app connects with it, so on connect we send the os type (osm.os.type) and number of cpus (osm.os.cpus()) to the client.

In the last two sections of the code above, we start monitoring the server using osm.start(), at an interval of 300ms. os-monitor emits a monitor event on each monitor cycle, so on monitor we use socket.io to send the monitorEvent to the client.

When the dependencies from the previous step have finished downloading, open the Terminal+ view again and type the following command to run our server app.
npm run dev

npm-run
Note: If you see an EADDRINUSE error show up in the Terminal when executing the above command, the port 9500 may already be in use on your system. Change it to another port, but do remember to change the references to this port in the Angular app below as well.

Angular App, Socket.io and Chart,js

Let’s move on to the Angular frontend, by creating a new Angular project named DuneServerMonitor. Use the Angular project wizard at File > New > Angular Project.

new-angular-project

Once the project is created, we can now add Socket.io and Chart.js to our project. In the Terminal+ view, with DuneServerMonitor selected, type the following commands to install Socket.io and Chart.js:

npm install socket.io chart.js --save

Monitoring the free memory

Replace the content of src/app/app.component.html with:

Replace the content of src/app/app.component.ts with:

Finally, for styling, let’s add some boostrap CSS to our index.html file. Add the following snippet of code into the head section of the src/index.html file.
Our client app looks like the image below, so we’ll now go on to discuss the sections of the code.

duneservermonitor-app

Section I

We used the Component decorator to mark our class as an Angular component and provide additional metadata that determines how the component should behave. The app component (app.component.ts) uses the content of app.component.html as its template and applies the style rules in app.component.css.

Our app class implements OnInit interface which we imported from ‘@angular/core’, so we can use the ngOnInit life cycle hook called by Angular to indicate that Angular is done creating the component. Finally, we created some class variables to be used in the succeeding sections.

  • socket which is an instance of the socket.io client
  • memChart currently undefined, but will be assigned as an instance of Chart from Chart.js
  • cpuChart currently undefined, but will be assigned as an instance of Chart from Chart.js
  • cpuType and noOfCpu will be used to store the variables returned from the section of the server code highlighted below

Section II

Here we created a doughnut chart to be used to display the free memory.

Here we created a line chart to be used to display the 15 minute cpu load average.

Section III

Here we are setting callbacks for the connected and os-update events emitted by our socket.io server.

  • We set the connected method as the callback for the connected event
  • We set the updateCharts method as the callback for the os-update event

Section IV

Here we empty the the array that holds the labels for the free memory chart whose initial value is [Free,Used], then we push two new labels of the format Free:XXMB and Used:XXMB.

Here we empty the dataset for the doughnut chart and push new values, then we update the chart.

Note: The loadavg array is available only on Linux and macOS. On Windows, the array will always be [0,0,0], resulting in a flat graph.
Finally let us run the Angular app, there is a server view in Angular IDE, in order to open it, select Window then Show view then Servers, right click on DuneServerMonitor and click Start Server.

ng-serve

Use the Run or Debug context menu actions to automatically open the app in Chrome, or manually open  http://127.0.0.1:4200 in your browser to see the app in action. Note that the Angular application is served at port 4200 by the ng serve command, executed by the Start Server action – which is why we use this port to access the app. This application itself still connects with the Node server we set up earlier at port 9500.

Our final real-time server monitoring dashboard looks like this:

duneservermonitor-app-final

Related Posts

Angular 5 Features Front-end developers, rejoice - after a short delay, the Angular 5 release is scheduled for October 23rd!Several beta releases have been available since August, and this version is now at the release candidate stage. Being the first major release since version 4 in March (yes, there never was an “Angular 3” - see here to find out what happened), wh...
Using Swagger to Connect a Backend to an Angular F... IntroductionLet’s say you have an advanced backend system, for which you wish to develop a modern Angular frontend, or, perhaps it’s not your backend, but something public like Facebook, and you want to develop a site using some of its exposed APIs. Of course, you want to do this with minimal effort ... how do you pull this off? Enter Swagger!This ...
JavaOne 2017: Highlights In his keynote at the JavaOne Conference, James Governor said, “Things have changed in the Java ecosystem, probably more in the past three weeks, than they have in the previous thirteen years.” Now JavaOne has only just ended, and we’re still trying to sift through the vast volumes of information pouring out from this conference, but with the recen...
Code Sharing Evolving Is there a little code snippet that is just driving you crazy? Or would you like a detailed collaborative session even before you dive in? There are different ways of sharing your code to get another developer to get involved. Read on for more!Simply Share with SlackSo how can you share your code? One easy way is to use Slack, your good ol’ teamwor...

Posted on Aug 14th 2017

Working on an #Angular template & can’t remember your Component’s field names? Angular IDE’s code completion will h… https://t.co/a6mTpnRaEf

about 1 hour ago

Follow us on social media
17
Oct

Angular 5 Features

Front-end developers, rejoice – after a short delay, the Angular 5 release is scheduled for October 23rd!Several beta releases have been available since August, and this version is now at the release candidate stage. Being the first major rel...