FoxInCloud Web Application Dashboard

 

Introducing the ‘FoxInCloud Web Application Dashboard’

FoxInCloud has had a Control Dashboard since version 2.0 released in Jan. 2013 (5 years before writing this paper).

Initially called ‘FoxInCloud Server Status’, this page have evolved to a true dashboard by taking advantage of Bootstrap layout capability:

  • Structured: information split into panels that are easier to read
  • Responsive: you can use it from any device from smartphone to regular desktop computer
  • Helpful: you quickly and easily nail down the weaknesses in your application like slow response time

Build with Bootstrap

Bootstrap provides a complete set of standard features to enhance a Web page presentation: responsive layout that adapts to any display size, convenient CSS classes and styles for a legible typography, widgets like panes ans accordions that help structuring content and makes it easier to memorize and understand.

FoxInCloud integrates Bootstrap since V. 2.23 released at the end of 2016. FoxInCloud interprets the form’s structure to render it into Bootstrap’s responsive grid and form rendering system.

To know more about Bootstrap Integration in FoxInCloud, please make sure to test the FoxInCloud Live Tutorial, and its associated Dashboard

In the FoxInCloud Web Application Dashboard (FWAD), you can see ‘badges’ here and there, with different colors:

'Application' Tab'Forms' tab

  • grey denotes a count of member elements; eg. ‘16’ in the ‘Forms’ tab means 16 forms are currently instantiated
  • orange denotes a number of warnings: you can drill down to see what these warnings pertain to, and possible enhancements
  • red denotes a number of errors: in the ‘Forms’ tab, it tells the number of errors occurred in the forms’ code.

We’ll now detail each pane of FWAD.

Application Tab

'Application' startup tab

First pane is the ‘startup’ pane; tells you whether the application has started OK (green tick) and provides whatever message the environment class has delivered (see xxxSets.Init(result)).

'Application' startup pane

Startup pane also provides the number of requests and errors recorded in the log 1, today and total.

Application startup log

Clicking on the links (arrows) displays the log; clicking on today’s errors (green arrow) displays a detailed error analysis form:

FoxInCloud advanced log and errors display

Application Data Tab

Aliases that are USEd in the private datasession that FoxInCloud created for your application. In this example, as all forms operate in a private datasession, only FoxInCloud internal tables are open:

Application Data Pane

Note that clicking on the words DataSession and Application displays the SETtings respectively scoped to the application datasession and shared by the server and the application:

settings scoped to the DataSession general settings

Application Forms Tab

The ‘Forms’ tab first displays a global application response time table 1:

Global Application Response Time

Then comes the list of forms currently running on the server where you can drill down on a particular form:

Form Datasession and Response Time

Application _Screen Tab Application _VFP Tab Application Public Tab

These 3 tabs display your application’s custom _Screen and _VFP properties, and PUBLIC variables that FoxInCloud maintains for you across users 2.

_Screen, _VFP or PUBLIC entry

Users Tab

The users tab lets you know how many active users you have currently and in the past. If you market your application based on the number of users, this tab helps you and your clients make sure they remain within the licensing terms.

Users and CAS Tab

This tab provides a list of users currently active: Users currently active on Web Application

To make the list display the actual name of users, implement xxxProcess.wUserName() as documented in xxxServer.prg.

Clicking on the session ID (blue link) ends the session for that user.

CAS history Tab

This tab lets you query the number of CAS that the FoxInCloud server has recorded since your application went to production 3.

CAS (Concurrent Active Sessions) history

Server Tab

The Server tab tells you everything about what lies below your Application:

  • FoxInCloud Application Server and underlying West-Wind Web Connect,
  • Windows Server,
  • The Machine where all this run.

Server Status Tab

The Server Status pane lets you draw a quick diagnostic whether the server is running in good condition and/or if some maintenance operation is required 4.

Server Status pane

Server Data Tab

This pane mainly shows the tables used internally by FoxInCloud and West-Wind Web Connect:

  • wwRequestLog alias CGIlog where HTTP requests are logged,
  • wwSession where user sessions are persisted.

Server Status pane

Like explained above, clicking on Datasession or Server displays the resp. the Server Datasession’s and the global SETtings.

jQueryUI dialog replaces Prototype Window Class

Starting with V 2.25, Prototype.js is being deprecated in favor of jQuery; similarly, UI widgets depending on Prototype.js are being replaced by similar widgets built over jQuery: * Prototype Window Class (PWC) replaced by jQueryUI dialog * event.simulate.js replaced by jQuery.on()

The form design being slightly different, you may have to adjust your CSS if you have variations around the PWC standard styles:

Form rendered with Prototype Window Class Form rendered with jQueryUI dialog

Of course, if you use the Bootstrap Responsive mode, you don’t need to care about this.


  1. If server logging is activated – see .../wc.wc?wwMaint~EditConfig 2

  2. For more information on how to automatically maintain _Screen.*, _VFP.* and PUBLIC variables, see in modify command xxxServer, properties lAppUserEnvSave and below.

  3. When clicking the double arrow icon, your server sends a request to the foxincloud.com server to get the raw data from the parameters you selected. From this raw data, your FoxinCloud Application Server builds the chart using VFPx FoxChart

  4. On this screen shot, the license IDs are intentionnally shown as N/A