WiseLoop Server Monitor Application is an AngularJS module designed to act as a tool to check the online status of any server.

HTML Integration

The following section will show you how to integrate the provided AngularJS full monitoring application directive into your own projects.
If you don't know what a directive is, you just need to know that it is a sort of a HTML tag or attribute that has the ability to change the DOM.

For the simplicity of the learning process, all the samples will use a simple HTML page layout.
Also, you need a basic understanding of HTML and JavaScript. If you are not familiar with HTML or JavaScript, you can find plenty of documentation over the internet.

The following file structure is assumed to exists on the server as this is the default structure that the package comes with.

The assumed server file structure

The file we are editing is /sample/index.html

The following code shows how to integrate the full application directive:

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../bins/lib/toastr/toastr.min.css"/>
        <script type="text/javascript" src="../bins/lib/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/draganddrop.js"></script>
        <script type="text/javascript" src="../bins/lib/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../bins/lib/toastr/toastr.min.js"></script>
        <script type="text/javascript" src="../bins/js/app/wl-ng-sm-app.js"></script>
        <link rel="stylesheet" href="../bins/assets/wl-ng-sm.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
    </head>
    <body>
        <div class="container" ng-app="wl-ng-sm-app">
            <div wl-ng-sm-app class="wlsm-app"></div>
        </div>
    </body>
    <script>
        //must set the bins url
        angular.module('wl-ng-sm-config', []).value('bins', '../bins');
    </script>
</html>

Note:: Please be aware that the paths are relative to the current file where your JavaScript application is included or executed.
The sample above is available under the /sample/ directory of the downloaded package.

Application Screens

Login Screen

After browsing to our http;//the-server-root/php-server-monitor/sample/index.html, we should get something like:

Server Monitor Application login screen

The initial credentials are username: admin and password: admin.

Live Monitor Screen

After a successful login, the application will display the "Live Monitor" screen:

Live Monitor screen

This screen is responsible for the actual server checking and management by offering the following operations:

refresh servers status
add servers
edit servers
remove servers
reorder (by dragging with mouse or by using the up & down buttons form the right side)

Daemon Settings Screen

The daemon settings screen is responsible for configuring how the server status reports will be delivered:

Daemon Setting screen

Even if most of the settings are pretty much self explanatory, some further explanations regarding the special formatting tags are probably needed.
The report fields (report title, report line and report footer) besides regular text, support some special formatting tags that are relevant in the context of status checking and they will be replaced in the logs and reports by the corresponding actual values:

{{time}} will be replaced with the timestamp when the report was sent
{{name}} will be replaced with the friendly name of the server as specified in the live monitor screen
{{host}} will be replaced with the host of the server as specified in the live monitor screen
{{port}} will be replaced with the port of the server as specified in the live monitor screen
{{status}} will be replaced with status of the server after checking: ONLINE or OFFLINE
{{reason}} will be replaced with the reason (if any) why the server is offline
Note:
The "Daemon Settings" screen makes sense only if a daemon (aka. cronjob, scheduled task) is set at the operating system level.
Please check the Setting up a daemon section the see how such a daemon can be set.

Daemon Status Screen

This screen offers some introspective about the daemon status:

Daemon Status screen

The runtime estimations are based on the previous runs and the log is trimmed to the size specified in the daemon settings screen.

Note:: The "Daemon Status" screen makes sense only if a daemon (aka. cronjob, scheduled task) is set at the operating system level.
Please check the Setting up a daemon section the see how such a daemon can be set.

Users Screen

User management screen

If the current logged user has user management rights, this screen allows him to apply the following operations:

add users
edit users
remove users
change users passwords
change users rights: server management, daemon settings change, user management

If the current logged user has no user management rights, then the user list will contain only his name and he will be able to change only his name and his password.