How to manage an uneven number of panels in single row

[niels-s]

Hey folks,

we're trying to migrate from grafonnet-lib to this one. We're stumbling on some layout issues and where hoping folks could help us out.

Our current dashboard we have a single row with 5 panels with 2 on top and 3 at the bottom.

.addPanels([
  layout.offsetRow(grafana.row.new(title='Edge'), startRow=10),
])
.addPanels(
  layout.grid([
    basic.multiTimeseries(
      ...
    ),

    basic.multiTimeseries(
     ...
    ),
  ], cols=2, rowHeight=8, startRow=11),
)
.addPanels(
  layout.grid([
    basic.multiTimeseries(
      ...
    ),

    basic.multiTimeseries(
      ...
    ),

    basic.multiTimeseries(
      ...
    ),
  ], cols=3, rowHeight=6, startRow=19),
)

// where layout.grid is defined like

  grid(panels, cols=2, rowHeight=10, startRow=0)::
    std.mapWithIndex(
      function(index, panel)
        panel {
          gridPos: {
            x: ((24 / cols) * index) % 24,
            y: std.floor(((24 / cols) * index) / 24) * rowHeight + startRow,
            w: 24 / cols,
            h: rowHeight,
          },
        },
      panels
    ),

Does anyone can help us our how we can achieve the same result with the new grid utils methods?

This is what we have right now.

  g.util.grid.makeGrid([
    row.new('Edge')
    + row.withPanels([
        basic.multiTimeseries(
          ...
        ),
        basic.multiTimeseries(
          ...
        ),
        // TODO: figure out how we can get these panels on the next "row" without using a row and having them part of the edge row.
        basic.multiTimeseries(
          ...
        ),

        basic.multiTimeseries(
          ...
        ),

        basic.multiTimeseries(
          ...
        ),
    ]),

Which results in this:

We want to keep the panels in the same row and not split them up. We haven't come across any examples. So we're hoping someone in the community could put us in the right direction.

Thanks in advance

[timeout]

Hi, I'm also interested in the answer to this question, if anybody knows. The grid function wrapPanels looks interesting, but it doesn't behave like makeGrid:

In the following snippet, the panels have gridPos associated with each panel, which I'd like to use because the different panels require different sizes, eg a stat panel vs a time-series panel.

local g = import 'g.libsonnet';
local utils = import 'utils.libsonnet';
local quickCheckinPanels = import 'sub-dashboards/quick-checkin.libsonnet';
local expertCheckinPanels = import 'sub-dashboards/expert-checkin.libsonnet';
local auxiliaryPanels = import 'sub-dashboards/auxiliary.libsonnet';

local row = g.panel.row;

local k8sEnv = std.extVar('k8s_env');
local stage = std.extVar('stage');
local service = std.extVar('service');

local title = utils.dashboardTitle(k8sEnv, service, stage);
local uid = utils.dashboardUid(service, stage + '-temp');

{
  local dashboard = g.dashboard,
  new(description):
    dashboard.new(title)
    + dashboard.withUid(uid)
    + dashboard.withDescription(description)
    + dashboard.graphTooltip.withSharedCrosshair()
    + dashboard.withPanels(
      g.util.grid.wrapPanels([
        row.new('Quick check-in')
        + row.withPanels(
          quickCheckinPanels 
        ),
        row.new('Expert check-in')
        + row.withPanels(
          expertCheckinPanels
        ),
        row.new('Auxiliary functions')
        + row.withPanels(
          auxiliaryPanels
        ),
      ])
    ),
}

This OTOH works, but with a regular grid:

local g = import 'g.libsonnet';
local utils = import 'utils.libsonnet';
local quickCheckinPanels = import 'sub-dashboards/quick-checkin.libsonnet';
local expertCheckinPanels = import 'sub-dashboards/expert-checkin.libsonnet';
local auxiliaryPanels = import 'sub-dashboards/auxiliary.libsonnet';

local row = g.panel.row;

local k8sEnv = std.extVar('k8s_env');
local stage = std.extVar('stage');
local service = std.extVar('service');

local title = utils.dashboardTitle(k8sEnv, service, stage);
local uid = utils.dashboardUid(service, stage + '-temp');

{
  local dashboard = g.dashboard,
  new(description):
    dashboard.new(title)
    + dashboard.withUid(uid)
    + dashboard.withDescription(description)
    + dashboard.graphTooltip.withSharedCrosshair()
    + dashboard.withPanels(
      g.util.grid.wrapPanels([
        row.new('Quick check-in')
        + row.withPanels(
          quickCheckinPanels 
        ),
        row.new('Expert check-in')
        + row.withPanels(
          expertCheckinPanels
        ),
        row.new('Auxiliary functions')
        + row.withPanels(
          auxiliaryPanels
        ),
      ], panelWidth=8, panelHeight=6)
    ),
}

*Added a bit more context

[timeout]

Ok, I got this to work. You have to set all the gridPos positions (on both panels and rows) manually. Maybe there's a better way, but that's how I got it to work. The other thing to know is that the rows are added as a list element-- if you look at the JSON generated when you create rows using the grafana UI. A row is not linked by a reference to any of it's panels (or the other way around). The layout seems to be managed by gridPos position only.

"panels": [
    {
      "collapsed": false,
      "gridPos": {
        "h": 1,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "panels": [],
      "title": "Quick Check-in",
      "type": "row"
    },
    {
      // panel def, adjust gridPos y value by +1
    },
    {
      // panel def, adjust gridPos y value by +1 etc.
    }

So, you can add a row to a dashboard's withPanels function, as an element of the array, just like a panel. Make sure that the gridPos positions are correct including accounting for the fact that a row has a height of 1.