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

Valerio Barbera
screenshot inspector code monitoring dashboard

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

aws sqs in a large scale laravel application inspector

AWS SQS in a large scale application

In today’s article, I’m going to show you how we use AWS SQS in our Laravel application, and how it helps us to manage 1.6 billion operations each month. In the image below you can see our typical bill for a month of AWS SQS usage: Before entering in the details of our system design

How to implement a reusable tooltip directive in Vuejs 3

Custom Tooltip Directive in Vuejs 3: Tutorial

Custom directives in Vuejs 3 are one of those things where there is no compatibility with the previous version of the framework.  Working on the new version of the Inspector frontend dashboard I had the need to show tooltips in many different points of the application. The goal was immediately to avoid duplicate code. Before

Why and how to create an Event Bus in Vuejs 3

Have you ever used an event bus in Vue 2 and don’t know how to recreate it in Vue 3? Since I’m working on the 2.0 version of my product’s UI (to be released in May) I’m publishing some technical tricks I learn migrating my application from Vuejs 2 to Vuejs 3. The current version