Product-monitor NPM

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!

Product Monitor Example

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

Product Monitor Example

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

Check out (or fork) this project
From the project root, run: npm install
Run npm test to run a smoke test against the server
Run npm start to start the monitor
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