This manual is a guide to MoSKito Control WebApp's user interface.
Concepts
The initial goal of MoSKito Control is to provide full control to all aspects of a WebApplication through one tool. So, WebApp's user interface is handcrafted to become a universal monitoring station with maximum convenience for the user.
How It Works
Every application, watched by MoSKito Control, consists of monitored components. The app state is determined by the health of its components.
Widgets display essential components' info: health status, performance charts and history of changes).
- For filtering purposes, components fall under different categories or may be shown/hidden on the basis of their current status (statistics).
How It Feels
The interface feels like a console, filled with leds (light bulbs) that change colors. Every led is an application component, its color is a certain health state, from green (good) to purple (bad-bad-bad).
Imagine everything is working perfectly fine (unlikely to happen in real life, but still). Then all the light bulbs are green.
Suddenly, one component gets worse (a method fails, service goes down or whatever). The corresponding led changes color immediately, letting you know something goes wrong. You see the change and you know the component, so you know where the problem is and you're ready to react right away.
What's great is that you can notice the "filthy sheep" at once, because:
the whole application takes the color of the worst performing component,
bad status colors are very bright against the green (good) ones.
Thus, you see the upcoming problems at once and that gives you enough time to deal with them before they hit your application and bring it down.
Applications
Definition
In this context, the applications are web applications, monitored by MoSKito Control.
MoSKito Control can monitor multiple applications at a time. Apps are presented as tabs at the top of WebApp.
Select application | |
|---|---|
 | Click the needed application tab. |
Make sure one application is always selected! In case widgets display nothing or filtering through CATEGORY and STATISTICS sections does not work, always check the application tabs first.
Tabs Change Colors
Application tabs also change colors, following the worst available component. For example, when all components are green and only one is yellow, the application tab becomes purple, too.
Components
Components are functional parts (like methods in the application's code), services or other application areas, monitored by MoSKito Control Agents.
Components are displayed in the central area of WebApp as coloured blocks with health indicators.
Components become visible as soon as you display the Status widget.
Display additional info | |
|---|---|
| Move cursor over component. |
Rearrange components | |
|---|---|
| Click the component and drag it to a new position. |
Categories
Definition
Categories unite related components.
This relation may be based on functionality, working principles, architectural similarity and so on.
Categories are used for filtering. They allow displaying those application components you're currently interested in.
Display components within category | |
|---|---|
|
Click All Categories to display all available components, in all categories. |
Widgets
Definition
Widgets display basic and additional info, related to your application performance.
Display widget | |
|---|---|
| Click a widget in WIDGET section. An active widget is highlighted with blue. |
Hide widget | |
|---|---|
| Click an active widget in WIDGET section. An inactive widget loses its highlighting. |
Status widget
Status widget displays all available application components and their health state.
This widget is the most basic and important.
After the widget is displayed, you may rearrange components and display their additional info.
SCREENSHOT HERE
Charts widget
Charts widget displays component's performance history as a chart.
Chart widget clearly visualises the changes in your app's performance. This info essential for any analytical report.
The chart itself is an X-Y axis (with performance figures on X and timestamp on Y), the curve is a component's performance.
SCREENSHOT HERE
Display additional info tips on chart | |
|---|---|
|
When a cursor hits the curve, a tip with additional info appears. Pinpoint additional info tip: click the needed curve point. |
SCREENSHOT HERE
In case a chart contains multiple curves (each corresponding to a component), you may need to highlight one to visually separate it from others.
Highlight curve on chart | |
|---|---|
|
When a cursor hits the curve name, the curve on the chart gets highlighted. Lock curve highlighting: click the needed curve name in the Legend section |
SCREENSHOT HERE
History widget
History widget lists status changes for all components.
History widget displays info in 3 columns:
| Column Name | Timestamp | Name | Status change |
|---|---|---|---|
| Explanation | Exact time when status changed (format: year-month-day-hour:minute:second,milisecond) | Component name | Previous status -> New status |
SCREENSHOT HERE
Statistics
Statistics section unites components with the same current status.
Statistics section is used for filtering. It allows displaying the application components that currently share one status (like all green, yellow, red or purple ones).
SCREENSHOT HERE
Display components with the same current status | |
|---|---|
|
As a result, all components with selected status will be displayed. |
Refreshing
Info about the last refresh is available on the Toolbar below Application Tabs section.
SCREENSHOT
Currently, AutoReload feature is under development!
Make sure you refresh the browser page manually to have the last updated info.
Coming Soon...
| Feature | What the feature does? |
|---|---|
| AutoReload | Refreshes the browser with WebApp's page, so you don't need to do refreshing manually. |
| Chart Zoom | After clicking, |
| Settings | |
1 Comment
Leon Rosenberg
autoreload works