Grafana#

Estimated time to read: 7 minutes

Manufacturing operations generate a lot of data. Being able to present the most important data in real time and in a visual way, that is clear and easy to read, helps the different stakeholders to understand the current situation and quickly visualize any problem that requires attention.

This is achieved through dashboards (highly visual mechanisms to display different types of data), which are created by combining and configuring different widgets such as reports, queries, resource lists, and charts.

By definition "Grafana is a multi-platform open source analytics and interactive visualization web application. It provides charts, graphs, and alerts for the web when connected to supported data sources. End users can create complex monitoring dashboards using interactive query builders." (Wikipedia)

Using Grafana will allow you to query, visualize, alert on and understand your metrics regardless of where they are stored. Additionally, Grafana provides you with a wide variety of ways to display your data and includes the following visualization formats: tables, timelines, time series, stat, gauge, bar and pie charts.

This document will guide you through the required configurations and set up for the integration of a Grafana dashboard into a UI Page with the Grafana widget.

Overview#

The Grafana widget is used within Critical Manufacturing MES but your original Grafana dashboard is initially created in a separate external page.

Setting Up Grafana#

To have a functioning Grafana widget and be able to deploy a full Grafana dashboard within Critical Manufacturing MES, you have to follow the steps in the table below:

Step 1: Configure Grafana#

1. Go to the Administration menu and select Configuration.

2. Search and select the Grafana path to be able to edit it:

   

3. Select Edit in the top ribbon and enter the Value for the current Grafana server:

   

4. Save.

Step 2: Create a UI Page#

1. Create your UI Page:

   

   For more information, see Create UI Page.

Configuring the Grafana Widget#

1. In the created UI Page, select Edit in the top ribbon:

   

2. Drag and drop the Grafana widget into the desired place and expand it as needed:

   

3. If you have not yet created your Grafana ⧉ dashboard, select the More dropdown, and Open Grafana to access the Grafana platform, where you can create your dashboard that you will use later in this UI Page.

   Note

   You can access Grafana Documentation ⧉ and other useful links to help you start creating your Grafana dashboard.

   

4. When your Grafana dashboard is created, copy its address.

5. In your UI Page and select Settings in the More dropdown of the Grafana widget:

6. Select the Setup tab and paste the complete address of your created Grafana dashboard in Dashboard Url:

   

   In the Setup tab you can also select between a light and a dark theme and whether or not to hide the controls:

   a) Grafana with a light theme and the controls bar on the left:

   

   b) Grafana with a dark theme and no controls bar:

   

7. In the General tab, provide a name for the widget (Grafana by default), and configure the other available options as needed:

   

8. In the Variables tab you can or override the variables created in Grafana along with their details:

   

   Note

   The Variables you define in the settings are the default ones but you can introduce other settings, like Area or Resource, from the UI Page into Grafana. For this tutorial, we are using a TimeUnit variable.

9. In the Inputs tab you can as needed, and the Name and Type, that relate to the input, are mandatory:

   

10. In the Links tab you can add links and make your UI Page more dynamic.

    Example with Form widget:

    a) Drag and drop the Form widget into your UI Page dashboard and select its Settings: b) Go to the Fields tab, select to change the TimeUnit variable, which is of the Type String, and Save and Close: c) In your UI Page dashboard, define a value for the new TimeUnit: d) In the top ribbon of your UI Page, select Settings, then in the Properties tab a new property that will be your TimeUnit label. Give it the appropriate Name, Source, Type, Value (key of the variable in Grafana), and Save and Close: e) Select Links and drag and drop the Forms and Grafana widgets onto your page: It will look like this: f) Send the result of the TimeUnitChange String to variables, which is a map, select setMapValue in Converter, and TimeUnitLabel, created earlier, in Converter Param: g) Select OK: h) To check your link is correct, go back to UI Page, select Settings and access the Links tab:

11. Save and close the settings, and the widget will be updated:

    

    For more information, see the System Widgets Grafana page in the UI Pages menu.

Making it Available#

You can create a shortcut for your UI Page by editing the Scope to Entity Type or Menu Entry, and setting the Pin To Quick Access option to true:

This means that quick access will be visible in the Dashboards section of the menu entry for the Menu Entry scope, or under View for the Entity Type scope: