3.11.2 Creating, editing, and deleting dashboards

The following topics describe how to create and edit dashboards:

• Overview of creating, editing, and deleting dashboards
• Example of creating a dashboard

(1) Overview of creating, editing, and deleting dashboards

Access the [Dashboards] screen from [Home] - [Dashboards].

[Creating a dashboard]

The general procedure for creating a dashboard is shown below.

(Table) Dashboard creation procedure

Procedure		Description
1	Create a folder	Create a folder in which to place dashboards. Click the [New] button and then click [New folder]. If you add a dashboard to an existing folder, you do not need to create a new folder.
2	Create a dashboard	Create a dashboard for placing panels. Click [New] and then click [New dashboard].
3	Create a panel	Open the settings screen for creating a panel. Click [Add visualization].
4	Configure queries	Configure the Ops I public API to retrieve the data to be displayed in the panel. You can set filters to retrieve only the required data. Configure these settings in the [Queries] tab. The available data source plugin is "Infinity". For details about how to configure queries for Infinity, see the following: https://grafana.com/docs/plugins/yesoreyeram-infinity-datasource/ For examples of settings, see "Example of creating a dashboard". Tips You can display data retrieved from different query settings in the same panel. Use [Add query] to add a second or subsequent query. Dashboards handle large amounts of data to display graphs. It is therefore important to reduce the frequency of data retrieval and the amount of data handled by configuring query settings in the [Queries] tab. If no data is retrieved, the subsequent steps cannot be performed. Prepare the data in advance. For details about the Ops I API, see "Detailed API reference information" in "JP1 Cloud Service/Operations Integration API Reference".
5	Select and transform data to be displayed	Select and transform the retrieved data to be displayed in the panel. Configure these settings in the [Transformations] tab. You can configure multiple transformations.
6	Configure data format	Configure settings for visualizing data, such as time series graphs, histograms, and tables. You can also configure settings such as table and graph titles and graph axes. Configure these settings in the [Visualization] pane.
7	Configure permissions	As necessary, configure permissions for folders and dashboards. For details about how to configure permissions, see "Configuring permissions".

Tips

• In the [Queries] tab, by selecting [-- Dashboard --] for [Data source], you can use the results retrieved in the [Queries] tab of another panel within the dashboard. This allows you to place panels with different transformations and visualizations using a single data retrieval.
• If you want to use the same panel across multiple dashboards, you can share it by creating a library panel. When you change a library panel, the changes are applied to all dashboards that reference it.

For details, see the following:
https://grafana.com/docs/grafana/v12.3/visualizations/panels-visualizations/
https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/

[Editing a dashboard]

To edit a dashboard, follow the procedure below.

1. Open the dashboard.
2. In the upper right of the dashboard screen, select the "Edit" button.
3. Edit the dashboard.
   • To edit an existing panel:
     From the ellipsis in the upper right of the panel, select "Edit" to edit the panel.
   • To delete an existing panel:
     From the ellipsis in the upper right of the panel, select "Remove".
   • To add a new panel to an existing dashboard:
     In the upper right of the screen, select [Add], then select "Visualization", and configure the panel in the same way as when creating a new panel.
4. Click [Save dashboard] to save.

[Deleting a dashboard]

To delete a dashboard, follow the procedure below.

1. In the upper right of the screen, click [Edit], and then select [Settings] that is displayed.
2. Click [Delete dashboard].

(2) Example of creating a dashboard

The following examples are provided:

• Example of creating a graph showing the number of workflow executions (using a standard API other than GraphQL)
• Example of creating a graph using a data model (using GraphQL)

(a) Example of creating a graph showing the number of workflow executions (using a standard API other than GraphQL)

An example of creating a graph showing the numbers of workflow executions by day is provided below.
The results of the API “GET /api/v1/practice-contexts” are aggregated by the date in “createdOn” to create the graph.

For details about steps 1, 2, and 10, see steps 1, 2, and 7 in “(Table) Dashboard creation procedure”.
In addition, some steps in the dashboard creation procedure cannot be performed if there is no data to be retrieved. Execute multiple workflows in advance to prepare the data.

1. Create a folder.
   Create a folder in which to place dashboards. Configure permissions for the created folder.
2. Create a dashboard.
3. Click the [Add visualization] button to add a visualization and create a panel.
4. In [Select data source], select "Ops I" to open [Edit panel].
5. In the [Queries] tab, configure the following settings to retrieve the data used for the graph. After configuring the settings, set [Table view] to ON to display the retrieved data. Here, "Rows/Root" specifies the position of the list. Specify it in the JSONata format specified for "Parser".

   Item	Value
   Data source	Ops I
   Type	JSON
   Parser	JSONata
   Method	GET
   URL	/api/v1/practice-contexts
   Rows/Root*1	$.data.content
   URL Query Params*2	Configure the following items in key-value format. For items that can be specified as keys, see the details of the API "GET /practice-contexts". pageSize: 10000 Specifies the number of records to retrieve. sortBy: createdOn:desc Retrieves workflows in descending order of creation date and time. filterBy: createdOn:ge:${__from:date:iso},createdOn:lt:${__to:date:iso} Specifies the period for which to retrieve data. For details about "__from" and "__to", see the following: https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/variables/add-template-variables/#global-variables

   *1: This item is displayed when [Parsing options & Result fields] is clicked.
   *2: This item is displayed when [Headers, Request params] is clicked.
   
   
6. In the [Transformations] tab, configure the following settings. From the list of transformations displayed when [Add transformation] is clicked, select the transformation to use and configure it. To add a second or subsequent transformation setting, click [Add another transformation] to select it from the list. If you first specify the graph type in the [Visualization] pane in step 7, you can verify in real time that the settings in [Transformations] are reflected in the graph.

   Type	Setting
   Filter fields by name	Clear all checkboxes except "createdOn" to display only createdOn data.
   Format string	Configure the following settings to hide time information. Specify the range of characters to be displayed so that only the date information is retained from the date and time information. Field: createdOn Format: Substring Substring range: 0 to 10
   Group by	Specify "Group by" and "Count" for createdOn to count the number of records.
   Sort by	Specify "createdOn" to sort the data in order of createdOn.
   Organize fields by name	Specify the following to change the displayed field name: createdOn: Creation date createdOn (count): Number of records

7. In the [Visualization] pane, select the graph type "Bar chart". When you set [Table view] to OFF, the data is displayed using the selected graph and settings. Configure the following graph settings:

   Setting	Value
   [Panel options]-[Title]	Specify "Number of workflows" or a similar title.
   [Standard options]-[Decimals]	Specify "0" to display axis values as integers.

8. Click [Back to dashboard] to return to the dashboard editing screen. As necessary, adjust the size of the created graph by dragging. You can also change the display period in the upper right of the screen.
9. Click [Save dashboard]. Specify the dashboard name and the folder in which to place the dashboard, and save it.
10. (Optional) Configure permissions for the created dashboard.

(b) Example of creating a graph using a data model (using GraphQL)

Assume that the data model defined in the Datamodel YAML file “Custom table definition example” is registered and that data is registered in the lend_vm_table table.
The following shows an example of displaying, in a table, a list of requests with start dates within the specified period.
Using the API “POST /api/v1/graphql”, the results filtered by “start_date” are output to the table.

For details about steps 1, 2, and 9, see steps 1, 2, and 7 in “(Table) Dashboard creation procedure”.
In addition, some steps in the dashboard creation procedure cannot be performed if there is no data to be retrieved. Execute multiple workflows in advance to prepare the data.

1. Create a folder.
   Create a folder in which to place dashboards. Configure permissions for the created folder.
2. Create a dashboard.
3. Click the [Add visualization] button to add a visualization and create a panel.
4. In [Select data source], select "Ops I" to open [Edit panel].
5. In the [Queries] tab, configure the following settings to retrieve the data used for the graph. After configuring the settings, set [Table view] to ON to display the retrieved data. Here, "Rows/Root" specifies the position of the list. Specify it in the JSONata format specified for "Parser".

   Item	Value
   Data source	Ops I
   Type	GraphQL
   Parser	JSONata
   Method	POST
   URL	/api/v1/graphql
   URL options Body Type*1	Select GraphQL and configure the following in GraphQL query: {   u_lend_vm_table(where: {_and: [         {start_date: {_gte: " ${__from:date:iso}"}},         {start_date: {_lte: " ${__to:date:iso}"}}       ]}) {     app_number     sys_name     vm_name     os_name     cpu     start_date     applicant   } } For details about "__from" and "__to", see the following: https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/variables/add-template-variables/#global-variables
   Rows/Root*2	$.data.data.u_lend_vm_table

   *1: This item is displayed when [Headers, Body, Request params] is clicked.
   *2: This item is displayed when [Parsing options & Result fields] is clicked.
   
   
6. In the [Visualization] pane, select the graph type "Table". Set [Table view] to OFF.

   Item	Value
   [Panel options]-[Title]	Specify "Request list" or a similar title.

7. Click [Back to dashboard] to return to the dashboard editing screen. As necessary, adjust the size of the created graph by dragging. You can also change the display period in the upper right of the screen.
8. Click [Save dashboard]. Specify the dashboard name and the folder in which to place the dashboard, and save it.
9. (Optional) Configure permissions for the created dashboard.