product-monitor
v3.0.1
Published
A HTML/JavaScript template for monitoring a product by encouraging product developers to gather all the information about the status of a product, including live monitoring, statistics, endpoints, and test results into one place.
Downloads
220
Readme
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
folderAPI endpoints loaded dynamically by scanning
/api
folderAdd a single javascript file to create custom JSON
/api/
endpointsVariable in-memory caching on all custom
/api/
endpointsComponent 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
- 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
Compatability
Server
| NodeJS on | Support | |-----------|-------------------------------| | Windows 8 | Excellent | | Mac OSX | Excellent | | Raspian | Seems good |
Client
| Browser | Support | |----------|--------------------------------| | Chrome | Excellent | | Chromium | Seems good | | Opera | Works a treat | | IE11 | Seems alright | | Firefox | Plays nice |
Support and Feedback
Please get in touch for support and feedback by raising an issue here on this github project.