Simplify dashboard layout (#57)

README.md

@@ -47,7 +47,9 @@ data "gdashboard_dashboard" "dashboard" {
   title = "My dashboard"
 
   layout {
-    row {
+    section {
+      title = "Basic Details"
+              
       panel {
         size = {
           height = 8

docs/data-sources/dashboard.md

@@ -1,5 +1,4 @@
 ---
-# generated by https://github.com/hashicorp/terraform-plugin-docs
 page_title: "gdashboard_dashboard Data Source - terraform-provider-gdashboard"
 subcategory: ""
 description: |-
@@ -24,6 +23,28 @@ data "gdashboard_timeseries" "jvm_memory" {
   }
 }
 
+data "gdashboard_timeseries" "http_requests" {
+  title = "HTTP Requests"
+
+  queries {
+    prometheus {
+      uid  = "prometheus"
+      expr = "sum(increase(http_request_total{container_name='container'}[$__rate_interval]))"
+    }
+  }
+}
+
+data "gdashboard_timeseries" "http_status" {
+  title = "HTTP Status"
+
+  queries {
+    prometheus {
+      uid  = "prometheus"
+      expr = "sum(increase(http_status_total{container_name='container'}[$__rate_interval]))"
+    }
+  }
+}
+
 data "gdashboard_dashboard" "jvm_dashboard" {
   title         = "JVM Dashboard"
   description   = "JVM details"
@@ -60,7 +81,9 @@ data "gdashboard_dashboard" "jvm_dashboard" {
   }
 
   layout {
-    row {
+    section {
+      title = "JVM"
+
       panel {
         size = {
           height = 8
@@ -69,10 +92,90 @@ data "gdashboard_dashboard" "jvm_dashboard" {
         source = data.gdashboard_timeseries.jvm_memory.json
       }
     }
+
+    section { // each panel is on a new row
+      title = "HTTP"
+
+      row { // force a new row/line
+        panel {
+          size = {
+            height = 8
+            width  = 10
+          }
+          source = data.gdashboard_timeseries.http_requests.json
+        }
+      }
+
+      row { // force a new row/line
+        panel {
+          size = {
+            height = 8
+            width  = 10
+          }
+          source = data.gdashboard_timeseries.http_status.json
+        }
+      }
+    }
+  }
+}
+```
+
+## Layout Explained
+
+The `layout` block is used to define the structure of the dashboard by grouping the panels into sections.
+The layout block can contain one or more section blocks, and each section block can contain one or more panel blocks.
+
+You have the option to include `title` and `collapsed` attributes. If either of these attributes is included,
+the section will be collapsible, appearing as a row that can be expanded or collapsed based on the user's preference.
+
+______
+
+The panels are placed starting from the top-left corner of the section and are positioned in a way that preserves their order.
+In other words, the first panel specified in the configuration will be placed in the top-left corner of the section, followed by the second panel, and so on.
+
+It's important to note that the placement of panels cannot be manually specified, and it is determined by the order in which the panels are defined in the configuration.
+
+______
+
+You can use the `row` block instead of the `panel` block to explicitly mark rows when defining a layout.
+By using `row`, you have greater control over the placement of the panels within the section.
+
+For example, you can place each panel on a new line/row:
+```terraform
+layout {
+  section {
+    title = "HTTP"
+
+    row { // force a new row/line
+      panel {
+        size = {
+          height = 8
+          width  = 10
+        }
+        source = data.gdashboard_timeseries.http_requests.json
+      }
+    }
+
+    row { // force a new row/line
+      panel {
+        size = {
+          height = 8
+          width  = 10
+        }
+        source = data.gdashboard_timeseries.http_status.json
+      }
+    }
   }
 }
 ```
 
+**Note:** the section block cannot have both `panel` and `row` blocks at the same time. You must use either one or the other.
+______
+
+In the example above, the layout block contains two **collapsible** section blocks, one titled "JVM" and the other "HTTP".
+The "JVM" section has a single panel block with dimensions `8x10`, and the data source specified as `data.gdashboard_timeseries.jvm_memory.json`.
+The "HTTP" section has two panel blocks, both with dimensions `8x10` and data sources `data.gdashboard_timeseries.http_requests.json` and `data.gdashboard_timeseries.http_status.json`, respectively.
+
 <!-- schema generated by tfplugindocs -->
 ## Schema
 
@@ -103,25 +206,53 @@ data "gdashboard_dashboard" "jvm_dashboard" {
 
 Optional:
 
-- `row` (Block List) The row within the dashboard. (see [below for nested schema](#nestedblock--layout--row))
+- `section` (Block List) The row within the dashboard. (see [below for nested schema](#nestedblock--layout--section))
+
+<a id="nestedblock--layout--section"></a>
+### Nested Schema for `layout.section`
+
+Optional:
+
+- `collapsed` (Boolean) Whether the row is collapsed or not.
+- `panel` (Block List) The definition of the panel within the row. (see [below for nested schema](#nestedblock--layout--section--panel))
+- `row` (Block List) The new row to align the nested panels. (see [below for nested schema](#nestedblock--layout--section--row))
+- `title` (String) The title of the row. If the title is defined the row is treated as collapsible.
+
+<a id="nestedblock--layout--section--panel"></a>
+### Nested Schema for `layout.section.panel`
+
+Required:
+
+- `size` (Attributes) The size of the panel. (see [below for nested schema](#nestedatt--layout--section--panel--size))
+- `source` (String) The JSON source of the panel.
 
-<a id="nestedblock--layout--row"></a>
-### Nested Schema for `layout.row`
+<a id="nestedatt--layout--section--panel--size"></a>
+### Nested Schema for `layout.section.panel.size`
+
+Required:
+
+- `height` (Number) The height of the panel.
+- `width` (Number) The width of the panel.
+
+
+
+<a id="nestedblock--layout--section--row"></a>
+### Nested Schema for `layout.section.row`
 
 Optional:
 
-- `panel` (Block List) The definition of the panel within the row. (see [below for nested schema](#nestedblock--layout--row--panel))
+- `panel` (Block List) The definition of the panel within the row. (see [below for nested schema](#nestedblock--layout--section--row--panel))
 
-<a id="nestedblock--layout--row--panel"></a>
-### Nested Schema for `layout.row.panel`
+<a id="nestedblock--layout--section--row--panel"></a>
+### Nested Schema for `layout.section.row.panel`
 
 Required:
 
-- `size` (Attributes) The size of the panel. (see [below for nested schema](#nestedatt--layout--row--panel--size))
+- `size` (Attributes) The size of the panel. (see [below for nested schema](#nestedatt--layout--section--row--panel--size))
 - `source` (String) The JSON source of the panel.
 
-<a id="nestedatt--layout--row--panel--size"></a>
-### Nested Schema for `layout.row.panel.size`
+<a id="nestedatt--layout--section--row--panel--size"></a>
+### Nested Schema for `layout.section.row.panel.size`
 
 Required:
 
@@ -132,6 +263,7 @@ Required:
 
 
 
+
 <a id="nestedblock--time"></a>
 ### Nested Schema for `time`
 
@@ -186,7 +318,7 @@ Required:
 
 Optional:
 
-- `datasource` (Block List) The datasource to use. (see [below for nested schema](#nestedblock--variables--adhoc--datasource))
+- `datasource` (Block, Optional) The datasource to use. (see [below for nested schema](#nestedblock--variables--adhoc--datasource))
 - `description` (String) The description of the variable.
 - `filter` (Block List) The predefined filters. (see [below for nested schema](#nestedblock--variables--adhoc--filter))
 - `hide` (String) Which variable information to hide from the dashboard. The choices are: `label`, `variable`.
@@ -282,7 +414,7 @@ Optional:
 - `include_all` (Block List) An option to include all variables. If `custom_value` is blank, then the Grafana concatenates (adds together) all the values in the query. (see [below for nested schema](#nestedblock--variables--datasource--include_all))
 - `label` (String) The optional display name.
 - `multi` (Boolean) Whether to allow selecting multiple values at the same time or not.
-- `source` (Block List) The datasource selector. (see [below for nested schema](#nestedblock--variables--datasource--source))
+- `source` (Block, Optional) The datasource selector. (see [below for nested schema](#nestedblock--variables--datasource--source))
 
 <a id="nestedblock--variables--datasource--include_all"></a>
 ### Nested Schema for `variables.datasource.include_all`
@@ -409,5 +541,3 @@ Optional:
 - `description` (String) The description of the variable.
 - `hide` (String) Which variable information to hide from the dashboard. The choices are: `label`, `variable`.
 - `label` (String) The optional display name.
-
-

docs/index.md

@@ -37,7 +37,9 @@ data "gdashboard_dashboard" "dashboard" {
   title = "My dashboard"
 
   layout {
-    row {
+    section {
+      title = "Basic Details"
+
       panel {
         size = {
           height = 8

examples/data-sources/gdashboard_dashboard/data-source.tf

@@ -9,6 +9,28 @@ data "gdashboard_timeseries" "jvm_memory" {
   }
 }
 
+data "gdashboard_timeseries" "http_requests" {
+  title = "HTTP Requests"
+
+  queries {
+    prometheus {
+      uid  = "prometheus"
+      expr = "sum(increase(http_request_total{container_name='container'}[$__rate_interval]))"
+    }
+  }
+}
+
+data "gdashboard_timeseries" "http_status" {
+  title = "HTTP Status"
+
+  queries {
+    prometheus {
+      uid  = "prometheus"
+      expr = "sum(increase(http_status_total{container_name='container'}[$__rate_interval]))"
+    }
+  }
+}
+
 data "gdashboard_dashboard" "jvm_dashboard" {
   title         = "JVM Dashboard"
   description   = "JVM details"
@@ -45,7 +67,9 @@ data "gdashboard_dashboard" "jvm_dashboard" {
   }
 
   layout {
-    row {
+    section {
+      title = "JVM"
+
       panel {
         size = {
           height = 8
@@ -54,5 +78,29 @@ data "gdashboard_dashboard" "jvm_dashboard" {
         source = data.gdashboard_timeseries.jvm_memory.json
       }
     }
+
+    section { // each panel is on a new row
+      title = "HTTP"
+
+      row { // force a new row/line
+        panel {
+          size = {
+            height = 8
+            width  = 10
+          }
+          source = data.gdashboard_timeseries.http_requests.json
+        }
+      }
+
+      row { // force a new row/line
+        panel {
+          size = {
+            height = 8
+            width  = 10
+          }
+          source = data.gdashboard_timeseries.http_status.json
+        }
+      }
+    }
   }
 }

examples/provider/provider_grafana_example.tf

@@ -13,7 +13,9 @@ data "gdashboard_dashboard" "dashboard" {
   title = "My dashboard"
 
   layout {
-    row {
+    section {
+      title = "Basic Details"
+
       panel {
         size = {
           height = 8