Building a monitoring dashboard with Oracle APEX JET Charts

Recently we have had a requirement to monitor our webserver traffic in more detail. We considered an off the shelf product but since we’re developers ourselves and have a turbo charged toolset with APEX & FOEX, we decided to build it ourselves in a very short time period.

I started detailing some of the technical aspects on my personal blog about this application we built to monitor webserver traffic.

The purpose of this post is to highlight the mashup usage of APEX and FOEX components. This is how the end result looks:

Webserver Logfile Analysis DashboardLooking at the page it’s hard to see what are FOEX or APEX components, so here’s the annotated version:

Webserver Logfile Analysis Dashboard annotationsWhat we can see in the above screenshot is that APEX provides some great visualizations in the form of Oracle JET charts. The JET charts are child regions of a FOEX pane/layout plugin region.

This means they can be collapsed and refreshed. At the top of the page there is a FOEX toolbar plugin with some filter fields (item plugins) and buttons.

The Summary Statistics region is the “FOEX Big Number” plugin which allows you to have a refreshable/filterable set of KPI’s.

Other than providing the chart/KPI SQL queries there is no custom code involved. Everything is declarative and controlled via simple dynamic actions.

The benefit of using the FOEX Plugin Framework to layout the page over the Universal Theme is that we can have greater control over the sizing and responsiveness of widths/heights of regions. Also our toolbar plugin will automatically overflow all items and buttons into an overflow menu.

There is also more functionality which you can’t see. The “Details” button will open a non-modal FOEX Window plugin with a FOEX Grid plugin inside. Since this window isn’t modal, the filter fields in the main page’s toolbar can still be changed, refreshing both the charts, KPI’s, and the grid’s content.

Webserver Logfile Analysis Dashboard non-modal windowThe window can be resized to your needs and the Grid inside has state saving enabled and will remember your chosen column order, width, sorting, and so on.

The “Admin” button also opens a non-modal FOEX Window, with several FOEX Grids each within a FOEX Tab.

Webserver Logfile Analysis Dashboard non-modal window 2Both of the window/dialogs are non-modal, thus allowing you to open them both at the same time. You have the ability to move/resize them or maximize them.

Webserver Logfile Analysis Dashboard non-modal window 3This is just a simple example of how an application can become more interactive and functional if you have the right tools (ie. FOEX) at your disposal. Here’s a brief video overview of the application:

 

Summary of benefits by using FOEX in this example:

  • Toolbar
    An easy way to group Items an Buttons on top of the Page
  • Layout Manager
    Takes care of collapsible regions, responsive layout
  • Non-Modal Windows
    Wrap a Region or an other Page into a Window which can be resized, moved, maximized
  • Lazy Rendering
    Any Region not visible (in a Window, on another Tab, …) isn’t rendered before it actually is needed
  • Lazy Loading
    Already rendered, but still currently not visible, Regions are not refreshed/loaded if not necessary. Once the Region is shown, it will do the last issued and outstanding refresh.

 

See what you can achieve by using the FOEX Plugin Framework. Sign up for a free trial!

Add your comment

Your email address will not be published. Required fields are marked *