Page tree
Skip to end of metadata
Go to start of metadata
About this document

This manual is a guide to MoSKito Control WebApp's user interface.

On this page

Learn how to...

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
  1. Select application by clicking its tab.
  2. In CATEGORY section, click the 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
  1. Display Charts widget.
  2. Move cursor along the curve on the 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
  1. Display Charts widget.
  2. Go to Legend section (upper-right chart area) and move mouse over the name of the curve you need.

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 NameTimestampNameStatus change
Explanation

Exact time when status changed

(format: year-month-day-hour:minute:second,milisecond)

Component namePrevious 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
  1. Select application.
  2. Display Status widget
  3. Go to STATISTICS section and click the needed status (like purple).

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...

FeatureWhat the feature does?
AutoReloadRefreshes the browser with WebApp's page, so you don't need to do refreshing manually.
Chart ZoomAfter clicking,
Settings 
  
  • No labels

1 Comment