为什么我的Grafana仪表板中的面板重叠？

Question

我正在尝试创建一个Grafana脚本控制面板，该面板由指示服务器是否已启动的面板组成。原因是我们不断添加一个代理列表，并且每次创建一个新的面板时都变得重复。

当前，我将其作为脚本（请注意，我的JavaScript / JQuery技能很糟糕。）：

'use strict';

// accessible variables in this scope
var window, document, ARGS, $, jQuery, moment, kbn;

return function(callback) {

  // Setup some variables
  var dashboard;

  // Initialize a skeleton with nothing but a rows array and service object
  dashboard = {
    annotations: {
      list: [
        {
          builtIn: 1,
          datasource: "-- Grafana --",
          enable: true,
          hide: false,
          iconColor: "rgba(0, 211, 255, 1)",
          name: "Annotations & Alerts",
          type: "dashboard"
        }
      ]
    },
    editable: true,
    gnetId: null,
    graphTooltip: 0,
    id: 15,
    links: [],
    panels : [],
    refresh: false,
    schemaVersion: 16,
    style: "dark",
    tags: [],
    templating: {
      list: []
    },
    time: {
      from: "now-5m",
      to: "now"
    },
    timepicker: {
      refresh_intervals: [
        "5s",
        "10s",
        "30s",
        "1m",
        "5m",
        "15m",
        "30m",
        "1h",
        "2h",
        "1d"
      ],
      time_options: [
        "5m",
        "15m",
        "1h",
        "6h",
        "12h",
        "24h",
        "2d",
        "7d",
        "30d"
      ]
    },
    timezone: "",
    title: "My Agents",
    //uid: "000000019",
    version: 2
  };

  // Set a title
  dashboard.title = 'Scripted dash';

  // Set default time
  // time can be overridden in the url using from/to parameters, but this is
  // handled automatically in grafana core during dashboard initialization
  dashboard.time = {
      from: "now-6h",
      to: "now"
  };

  var rows = 1;
  var seriesName = 'argName';

  if(!_.isUndefined(ARGS.rows)) {
    rows = parseInt(ARGS.rows, 10);
  }

  if(!_.isUndefined(ARGS.name)) {
    seriesName = ARGS.name;
  }

  $.ajax({
    method: 'GET',
    url: 'http://my_server/api/my_rest_call_to_get_agents'
  })
  .done(function(result) {
    //console.log(JSON.stringify(result));
    var x = 0;
    var y = 0;
    var id = 0;
    $.each(result.data.result, function(index, value) {
      //console.log(value.metric.instance);
      var panel = {
        clusterName: "My Agent",
        colorMode: "Panel",
        colors: {
          crit: "rgba(245, 54, 54, 0.9)",
          disable: "rgba(128, 128, 128, 0.9)",
          ok: "rgba(50, 128, 45, 0.9)",
          warn: "rgba(237, 129, 40, 0.9)"
        },
        cornerRadius: 0,
        //datasource: "Prometheus",
        displayName: "Agent_Name",
        flipCard: true,
        flipTime: "2",
        fontFormat: "Bold",
        gridPos: {
          h: 3,
          w: 2,
          x: x,
          y: y
        },
        id: id,
        isGrayOnNoData: true,
        isHideAlertsOnDisable: false,
        isIgnoreOKColors: false,
        links: [],
        targets: [
          {
            aggregation: "Last",
            alias: value.metric.instance,
            crit: 0,
            decimals: 2,
            displayAliasType: "Warning / Critical",
            displayType: "Regular",
            displayValueWithAlias: "Never",
            expr: 'expression_to_query_service',
            format: "time_series",
            instant: true,
            intervalFactor: 1,
            legendFormat: value.metric.instance,
            refId: "A",
            units: "short",
            valueHandler: "Number Threshold"
          }
        ],
        title: value.metric.instance,
        transparent: true,
        type: "vonage-status-panel"
      }
      dashboard.panels.push(panel);
      x += 2;
    });
    callback(dashboard);
  });
}

关于所有面板重叠的最奇怪的部分是，如果我查看每个面板的JSON，则每个面板具有不同的坐标。

任何帮助，将不胜感激！