Eliminate frictions from the developers’ experience – discover the new Inspector data visualization UI

Valerio Barbera

Hi, I’m Valerio, software engineer from Italy, CTO and founder at Inspector.

We’ve been hard at work these past few months improving the data visualization components in the application monitoring dashboard to make Inspector even more valuable for developers. We’re super excited to tell you all about these new features and we hope you enjoy them as much as we do.

The problem to solve

Since it was launched in the early of 2019 Inspector give the developers the ability to visually explore and analyze the code execution flow inside their applications.

In the last two years more and more mature companies have adopted Inspector as their main application monitoring dashboard, giving us the opportunity to see the product in action in a variety of scenarios.

It was clear that navigating the insights using the previous version of the dashboard, some important metrics were lost in the large amount of data Inspector is able to trace.

For complex applications, developers had to apply filters, manually settings time intervals, move the mouse in tiny spaces within the charts… The real informative power of our data was still underused.

So we immediately got to work improving the product and giving developers the information they need immediately, without any additional effort.

Highcharts as data visualization library

We decided to purchase the license for use Highcharts, one of the best data visualization libraries on the market, and rebuild our UI components to bring its powerful features to our users.

The Inspector dashboard is a Vue.js Single Page Application, built as a set of components that consume and visualize data provided by our REST APIs.

Highcharts has a great design particularly suitable for developing a dashboard based on components. It provides the global “plotOptions” property that can contains all the default settings for all type of charts.

This is perfect to create a “Highcharts” basic component to standardize the chart rendering options like colors, weigth of lines, legends, width, height, etc, and incapsulate the chart constructor. The default properties can be replaced at runtime if some chart has its own specific needs.

Here is an example from one of our Vue.js components that use the basic Highcharts component:

<template>
    <Highcharts :options="options"/>
</template>

<script>
export default {
    props: {
        dataset: {
            type: Array,
            required: true
        }
    },

    data() {
        return {
            options: {series: []}
        }
    },

    mounted() {
        this.$watch('dataset', {
            handler(newVal, oldVal) {
                if (newVal)
                    this.renderCharts([...newVal])
            },
            immediate: true,
            deep: true
        })
    },


    methods: {
        renderCharts(data) {
            this.options.series = data.map(host => {
                return {
                    name: host.hostname,
                    data: host.performance.map(item => {
                        return [
                            this.$moment(item.date).unix()*1000,
                            item.transactions
                        ]
                    })
                }
            })
        }
    }
}
</script>

New data navigation features

The new dashboard now shows application insights segmented by server. This allows you to understand at a glance which server deserves more attention based of ts performance KPIs.

Zoom in

You can click and drag into the chart to zoom in on a shorter time interval.

Errors trend

The exception tracking view now shows the error occurrences in the last 30 days.

Conclusion

We very much hope you can enjoy the best monitoring experience on the market, and we are continuing to work on many other improvements to make Inspector your best partner to deliver high quality software product for your customers.

Are you curious about what Inspector can do for you? Pick your preferred technology:

New to Inspector? Create an account.

Related Posts

How to prevent users from registering into your app with insecure passwords

Hi, I’m Valerio, software engineer and CTO at Inspector. About one year ago one of our accounts on an external platform has been hacked. Our credit card was attached to this account so we had to warn the bank to block it. Fortunately, there were no consequences, neither for our bank account, nor for our

Is it better to BUILD an internal monitoring environment, or BUY a prepackaged solution?

“Build vs Buy” Bake-off: Which should you choose? Every case is different, and all of these factors should be considered carefully before making a decision. There are situations where building a solution makes sense, either because you have the time, your requirements aren’t very complex, or if your applications simply don’t have enough load to

How to extend Laravel with driver-based services

Hi, I’m Valerio, software engineer and CTO at Inspector. In this article I talk about a Laravel internal feature not mentioned in the official documentation called “Driver Manager”. It can completely change the way you design and develop your application solving critical architectural bottlenecks, allowing you to build large systems built around decoupled, independent and