Grafana Widget#

Estimated time to read: 6 minutes

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 on the top ribbon and enter the Value for the current Grafana server:

   

4. Select Save.

Step 2: Create a UI Page#

1. Create your UI Page:

   

2. Select Create and your UI Page will be ready to use:

   

For more information, see Create UI Page.

Configuring the Grafana Widget#

1. In the created UI Page, search for the Grafana widget:

   

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, 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 the Dashboard URL field:

   

   In the Setup tab you can also select the Theme (defaults to Standard), set whether to Show Controls (defaults to true), and Show Menu (defaults to false):

   a) Grafana with a light theme and controls bar:

   

   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. See the example below using a 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) On 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 (name of the variable in Grafana), and Save and Close:

    

    e) In the UI Page, 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 TimeUnit Change String to Variables, which is a map, select Set Value in Map in the Converter field, and TimeUnit Label, created earlier, in the Key: (Property) field:

    

    g) Select Save and Close:

    

    h) To check your link is correct, go back to the UI Page, select Settings on the top ribbon 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: