Implement SLA Charts for Hosts in Reporting Using Chart.js

[lippserd]

Our current reporting implementation lacks charts, a feature that has been frequently requested by customers and ourselves for years. Instead of providing a generalized approach from the start, we should implement specific reports initially to understand how we can streamline them.

First, I would like to see charts for each host individually in the selected filter/time frame, showing the SLA in % over the respective time:

Requirements:

• Display of SLA in % over time for each host individually within the selected filter/time frame.
• The report requires a breakdown configuration that will be used as the x-axis (time).
• Use Chart.js for rendering the charts.
• Ensure the charts are responsive and visually appealing.
• Ensure that PDF exports works.

[sukhwinder33445]

Notes so far:

As discussed offline, chart.js has its limitations, even for the usual scenarios. So I looked for alternative libs and tested apexcharts, echarts and billboard.js (d3.js based lib). Apexcharts is very good, but took about 4–6 times longer to render the charts than echarts, so it is not suitable for large amounts of charts. I decided to use echarts, and it is pretty good, but since @nilmerg was using d3.js for the dependency module, he advised me to also test some d3 based libraries as he prefers to have less libraries to maintain than writing a bit more code to use those libs, and I totally agree with that point. So I used billboard.js, as this is the most commonly used and up-to-date d3-based library. It has much less code to maintain than the echart.

Billboard is easy to configure and customize. It also offers a few CSS theme files for the default design. I chose the modern theme because I liked it the most.

The BillboardBehavior introduces the following dataset attributes:

Required:

• data-chart-data {json}: Chart data (dataPoints: [int|float], xAxisTicks: [int|float|string])

Optional:

• data-chart-type {string}: Chart type [line, bar, area...] (default: line)
• data-chart-x-axis-type {string}: X-axis type [timeseries, category, indexed, log] (default: indexed)
• data-chart-x-axis-ticks-type {string}: X-axis ticks type (hour, day, week, month) [only for chartXAxisType: timeseries] (default: detected automatically)
• data-chart-time-format-locale {string}: Locale for the time format [only for chartXAxisType: timeseries] (default: 'en-US')
• data-chart-y-axis-label {string}: Label for the y-axis (default: null)
• data-chart-x-axis-label {string}: Label for the x-axis (default: null)
• data-chart-show-legend {boolean}: Show legend (default: false)
• data-chart-y-axis-max {int|float}: Max value for the y-axis (default: 100)
• data-chart-y-axis-min {int|float}: Min value for the y-axis (default: 0)
• data-chart-threshold {int|float}: Threshold value for the chart (default: null)
• data-chart-line-color {string}: Color for the line (only for line chart) (default: FALLBACK_COLOR)
• data-chart-below-threshold-color {string}: Color for values below the threshold (default: FALLBACK_COLOR)
• data-chart-above-threshold-color {string}: Color for values above the threshold (default: FALLBACK_COLOR)
• data-chart-tooltip-label {string}: Datapoint label for the tooltip (default: '')

How to use:

1. Create a div with the class .icinga-chart.
2. Collect dataPoints (values) and xAxisTicks (value labels) as an associative array.

for example:
$arr = [
        'dataPoints' => [15, 45, 10, 55],
        'xAxisTicks' => ['Jan', 'Feb', 'Mar', 'Apr']
    ];

3. Add the data-chart-data attribute to .icinga-chart and assign the collected data ($arr as json) as value.
4. As the xAxisTicks are of type category, set the data-chart-x-axis-type to category.

The following chart will be rendered:

Implementation

BillboardBehavior (we can rename it to IcingaChartBehavior once transferred to ipl-web) selects all elements with .icinga-chart class, creates the chart configuration using the dataset attributes of the element and generate the chart in a new child div element created via JS (in BillboardBehavior).