Product Monitor

A HTML/JavaScript template for monitoring a product by encouraging product developers to gather all the information about the status of a product. The idea is to provide components to bring live monitoring, statistics, endpoints, and test results all into one place.

Uses a pattern of HTML/JavaScript components connected to custom JSON /api/ endpoints which can be created and customised in order to use your own declarative HTML templates to create a monitor customised to your project's needs.

How to get started

How to create your own product monitor

1. Run mkdir my-product-monitor && cd my-product-monitor to start in a new folder

2. Run npm init --yes to create new default project

3. Run npm install product-monitor --save

4. Create your own server.js file:

const monitor = require('product-monitor')
const server = monitor({
  "serverPort": 8080,
  "productInformation": {
    "title": "My Product Monitor",
  },
  "userContentPath": "config"
})

5. Run your server using the command node server.js, you should see the following output:

...
 
[My Product Monitor Listening] on http://localhost:8080

6. Visit http://localhost:8080 to see the monitor in action

7. Now that your server is running, read the supplied documentation, and try out the examples!

Key Features

• Minimal setup

• Write simple HTML to configure your monitor

• Navigation generated dynamically by scanning /content folder

• API endpoints loaded dynamically by scanning /api folder

• Add a single javascript file to create custom JSON /api/ endpoints

• Variable in-memory caching on all custom /api/ endpoints

• Component Showcase and documentation served up through client

• Extremely simple wiring to load JSON data from custom templates, e.g. adding:

  <template for="custom-web-component"><h2>{{name}}</h2><pre>{{dataSourceData}}</pre></template>

  Will enable data loading on:

  <custom-web-component data-source-url="/api/packageInfo"></custom-web-component>

  (No custom javascript required)

• Bootstrap look and feel, using all their CSS advice and best practice

• Handlebar templates for rendering complex JSON data

Preview

Defined by:

<h3>Endpoints</h3>
<status-checker data-url="/">Can monitor its own server</status-checker>
<status-checker data-url="https://google.com" data-contains="Google">Can monitor google</status-checker>
<status-checker data-url="/api/generateStatusCode?statusCode=404">Can monitor for 404's</status-checker>
<status-checker data-url="http://not-a-real-dns-entry/">Can monitor DNS not found errors</status-checker>

Development Instructions using a checkout from github

1. Check out (or fork) this project
2. From the project root, run: npm install
3. Run npm test to run a smoke test against the server
4. Run npm start to start the monitor
5. Visit http://localhost:8080

Warning: you might miss out on the latest updates to the server and its documentation if you check out this project directly from github. The recommended method for setting up a monitor is to use the NPM setup instructions.

Library Credits

Downloaded from CDN:

• Bootstrap - basic styling and layout for client-side components
• jQuery - for remote calls to server to drive components
• Handlebars - for "minimal templating on steroids"
• Node.js - for package management and running the server instance
• Strapdown.js - for markdown rendering via <markdown></markdown> tags
• Web Component JS - for enriching the client DOM with web component templates, providing the client-side data-loading and rendering logic for the product monitor.

Node packages:

• Express - for defining the server, the api endpoints, and serving up the client
• md5-node - for hashing keys in an in-memory cache
• request - for making server side requests to remote domains
• utils-merge - for merging configuration together with the default config
• ncp - for copying files used during setup of a new server instance
• And more... thanks to the community for such a diverse and useful set of libraries

Compatability

Server

Client

Support and Feedback

Please get in touch for support and feedback by raising an issue here on this github project.