Dashboard: Fixes lazy loading & expanding collapsed rows on mobile (#17055)

* Dashboard: Fixes lazy loading & expanding collapsing rows on mobile

Fixes #16978

* Updated dashboard tags

devenv/dev-dashboards/datasource-testdata/new_features_in_v62.json

@@ -0,0 +1,1337 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "content": "# v6.2 Feature Demos \n\nScroll down to view all demo panels. \n",
+      "gridPos": {
+        "h": 3,
+        "w": 24,
+        "x": 0,
+        "y": 0
+      },
+      "id": 13,
+      "links": [],
+      "mode": "markdown",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "transparent": true,
+      "type": "text"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 3
+      },
+      "id": 15,
+      "title": "Bar Gauge",
+      "type": "row"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 7,
+        "w": 24,
+        "x": 0,
+        "y": 4
+      },
+      "id": 7,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "watt"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "orange",
+              "index": 1,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 2,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "D",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "E",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "10003,33333"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "G",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "refId": "I",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "J",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "K",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "L",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "P",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Retro LED mode",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 10,
+        "w": 18,
+        "x": 0,
+        "y": 11
+      },
+      "id": 6,
+      "links": [],
+      "options": {
+        "displayMode": "gradient",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Area B",
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Basement",
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Garage",
+          "refId": "D",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Gradient mode",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 10,
+        "w": 6,
+        "x": 18,
+        "y": 11
+      },
+      "id": 8,
+      "links": [],
+      "options": {
+        "displayMode": "basic",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "watt"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 42.5
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 80
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 90
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "J",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "K",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "L",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "P",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Basic",
+      "type": "bargauge"
+    },
+    {
+      "collapsed": false,
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 21
+      },
+      "id": 36,
+      "panels": [],
+      "title": "Gauge multi series",
+      "type": "row"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 6,
+        "w": 18,
+        "x": 0,
+        "y": 22
+      },
+      "id": 38,
+      "links": [],
+      "options": {
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "max": 100,
+            "min": 0,
+            "unit": "decgbytes"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "red",
+              "index": 1,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "auto",
+        "showThresholdLabels": false,
+        "showThresholdMarkers": true
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "alias": "sda1",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda2",
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda3",
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda4",
+          "refId": "D",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda5",
+          "refId": "E",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda6",
+          "refId": "F",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "type": "gauge"
+    },
+    {
+      "content": "  \n* The new Gauge and Bar Gauge repeat for every series, row or column your queries return.\n* Works great with table & time series data \n",
+      "gridPos": {
+        "h": 6,
+        "w": 6,
+        "x": 18,
+        "y": 22
+      },
+      "id": 40,
+      "links": [],
+      "mode": "markdown",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Multiple Series or Rows",
+      "transparent": true,
+      "type": "text"
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 28
+      },
+      "id": 19,
+      "panels": [],
+      "title": "Panels With No Title",
+      "type": "row"
+    },
+    {
+      "cacheTimeout": null,
+      "colorBackground": false,
+      "colorValue": true,
+      "colors": ["#299c46", "#73BF69", "#d44a3a"],
+      "datasource": "gdev-testdata",
+      "decimals": null,
+      "format": "ms",
+      "gauge": {
+        "maxValue": 100,
+        "minValue": 0,
+        "show": false,
+        "thresholdLabels": false,
+        "thresholdMarkers": true
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 0,
+        "y": 29
+      },
+      "id": 20,
+      "interval": null,
+      "links": [],
+      "mappingType": 1,
+      "mappingTypes": [
+        {
+          "name": "value to text",
+          "value": 1
+        },
+        {
+          "name": "range to text",
+          "value": 2
+        }
+      ],
+      "maxDataPoints": 100,
+      "nullPointMode": "connected",
+      "nullText": null,
+      "pluginVersion": "6.2.0-pre",
+      "postfix": "",
+      "postfixFontSize": "50%",
+      "prefix": "p99",
+      "prefixFontSize": "50%",
+      "rangeMaps": [
+        {
+          "from": "null",
+          "text": "N/A",
+          "to": "null"
+        }
+      ],
+      "sparkline": {
+        "fillColor": "rgba(31, 118, 189, 0.18)",
+        "full": false,
+        "lineColor": "rgb(31, 120, 193)",
+        "show": true
+      },
+      "tableColumn": "",
+      "targets": [
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholds": "",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "type": "singlestat",
+      "valueFontSize": "120%",
+      "valueMaps": [
+        {
+          "op": "=",
+          "text": "N/A",
+          "value": "null"
+        }
+      ],
+      "valueName": "avg"
+    },
+    {
+      "cacheTimeout": null,
+      "colorBackground": false,
+      "colorValue": true,
+      "colors": ["#299c46", "#73BF69", "#d44a3a"],
+      "datasource": "gdev-testdata",
+      "decimals": null,
+      "format": "ms",
+      "gauge": {
+        "maxValue": 100,
+        "minValue": 0,
+        "show": false,
+        "thresholdLabels": false,
+        "thresholdMarkers": true
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 6,
+        "y": 29
+      },
+      "id": 23,
+      "interval": null,
+      "links": [],
+      "mappingType": 1,
+      "mappingTypes": [
+        {
+          "name": "value to text",
+          "value": 1
+        },
+        {
+          "name": "range to text",
+          "value": 2
+        }
+      ],
+      "maxDataPoints": 100,
+      "nullPointMode": "connected",
+      "nullText": null,
+      "pluginVersion": "6.2.0-pre",
+      "postfix": "",
+      "postfixFontSize": "50%",
+      "prefix": "p95",
+      "prefixFontSize": "80%",
+      "rangeMaps": [
+        {
+          "from": "null",
+          "text": "N/A",
+          "to": "null"
+        }
+      ],
+      "sparkline": {
+        "fillColor": "rgba(31, 118, 189, 0.18)",
+        "full": false,
+        "lineColor": "rgb(31, 120, 193)",
+        "show": true
+      },
+      "tableColumn": "",
+      "targets": [
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholds": "",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "type": "singlestat",
+      "valueFontSize": "120%",
+      "valueMaps": [
+        {
+          "op": "=",
+          "text": "N/A",
+          "value": "null"
+        }
+      ],
+      "valueName": "avg"
+    },
+    {
+      "cacheTimeout": null,
+      "colorBackground": false,
+      "colorValue": true,
+      "colors": ["#299c46", "#73BF69", "#d44a3a"],
+      "datasource": "gdev-testdata",
+      "decimals": null,
+      "format": "ms",
+      "gauge": {
+        "maxValue": 100,
+        "minValue": 0,
+        "show": false,
+        "thresholdLabels": false,
+        "thresholdMarkers": true
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 12,
+        "y": 29
+      },
+      "id": 24,
+      "interval": null,
+      "links": [],
+      "mappingType": 1,
+      "mappingTypes": [
+        {
+          "name": "value to text",
+          "value": 1
+        },
+        {
+          "name": "range to text",
+          "value": 2
+        }
+      ],
+      "maxDataPoints": 100,
+      "nullPointMode": "connected",
+      "nullText": null,
+      "pluginVersion": "6.2.0-pre",
+      "postfix": "",
+      "postfixFontSize": "50%",
+      "prefix": "p90",
+      "prefixFontSize": "80%",
+      "rangeMaps": [
+        {
+          "from": "null",
+          "text": "N/A",
+          "to": "null"
+        }
+      ],
+      "sparkline": {
+        "fillColor": "rgba(31, 118, 189, 0.18)",
+        "full": false,
+        "lineColor": "rgb(31, 120, 193)",
+        "show": true
+      },
+      "tableColumn": "",
+      "targets": [
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholds": "",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "type": "singlestat",
+      "valueFontSize": "120%",
+      "valueMaps": [
+        {
+          "op": "=",
+          "text": "N/A",
+          "value": "null"
+        }
+      ],
+      "valueName": "avg"
+    },
+    {
+      "content": "In v6.2 if you remove the panel title the visualization will take up all the space available. \nThe panel header menu will be overlayed on top if you hover over the panel so you can still move & edit the panel. ",
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 18,
+        "y": 29
+      },
+      "id": 42,
+      "links": [],
+      "mode": "markdown",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "transparent": true,
+      "type": "text"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 4,
+        "w": 24,
+        "x": 0,
+        "y": 33
+      },
+      "id": 17,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "max": 100,
+            "min": 0,
+            "title": "Completion rate",
+            "unit": "percent"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "red",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "red",
+              "index": 1,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "type": "bargauge"
+    },
+    {
+      "aliasColors": {
+        "A-series": "blue",
+        "B-series": "dark-purple",
+        "C-series": "purple",
+        "Q-series": "dark-blue"
+      },
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 3,
+      "gridPos": {
+        "h": 6,
+        "w": 24,
+        "x": 0,
+        "y": 37
+      },
+      "id": 26,
+      "legend": {
+        "alignAsTable": true,
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "rightSide": true,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pluginVersion": "6.2.0-pre",
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": true,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 43
+      },
+      "id": 22,
+      "panels": [],
+      "title": "Lazy loading of panels",
+      "type": "row"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 1,
+      "gridPos": {
+        "h": 8,
+        "w": 15,
+        "x": 0,
+        "y": 44
+      },
+      "id": 28,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": false,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "slow_query",
+          "stringInput": "5s"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Slow Query (5s)",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "\n# Lazy Loading\n\nAs you scroll down you will see that Grafana only loads & issues queries for these panels as they are scrolled in to view. \nThis greatly reduces the load on your data source backends if you have many long dashboards with many panels. \n\n\n",
+      "gridPos": {
+        "h": 40,
+        "w": 9,
+        "x": 15,
+        "y": 44
+      },
+      "id": 34,
+      "links": [],
+      "mode": "markdown",
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "",
+      "transparent": true,
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 1,
+      "gridPos": {
+        "h": 8,
+        "w": 15,
+        "x": 0,
+        "y": 52
+      },
+      "id": 30,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": false,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "slow_query",
+          "stringInput": "5s"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Slow Query (5s)",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 1,
+      "gridPos": {
+        "h": 8,
+        "w": 15,
+        "x": 0,
+        "y": 60
+      },
+      "id": 31,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": false,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "slow_query",
+          "stringInput": "5s"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Slow Query (5s)",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 1,
+      "gridPos": {
+        "h": 8,
+        "w": 15,
+        "x": 0,
+        "y": 68
+      },
+      "id": 32,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": false,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "slow_query",
+          "stringInput": "5s"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Slow Query (5s)",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 1,
+      "gridPos": {
+        "h": 8,
+        "w": 15,
+        "x": 0,
+        "y": 76
+      },
+      "id": 29,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": false,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "slow_query",
+          "stringInput": "5s"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Slow Query (5s)",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    }
+  ],
+  "refresh": "",
+  "schemaVersion": 18,
+  "style": "dark",
+  "tags": ["gdev", "demo"],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "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": "New Features in v6.2",
+  "uid": "ZvPm55mWk",
+  "version": 1
+}

public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DashboardGrid, Props } from './DashboardGrid';
+import { DashboardModel } from '../state';
+
+interface ScenarioContext {
+  props: Props;
+  wrapper?: ShallowWrapper<Props, any, DashboardGrid>;
+  setup?: (fn: () => void) => void;
+  setProps: (props: Partial<Props>) => void;
+}
+
+function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
+  const data = Object.assign(
+    {
+      title: 'My dashboard',
+      panels: [
+        {
+          id: 1,
+          type: 'graph',
+          title: 'My graph',
+          gridPos: { x: 0, y: 0, w: 24, h: 10 },
+        },
+        {
+          id: 2,
+          type: 'graph2',
+          title: 'My graph2',
+          gridPos: { x: 0, y: 10, w: 25, h: 10 },
+        },
+        {
+          id: 3,
+          type: 'graph3',
+          title: 'My graph3',
+          gridPos: { x: 0, y: 20, w: 25, h: 100 },
+        },
+        {
+          id: 4,
+          type: 'graph4',
+          title: 'My graph4',
+          gridPos: { x: 0, y: 120, w: 25, h: 10 },
+        },
+      ],
+    },
+    overrides
+  );
+
+  const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
+  return new DashboardModel(data, meta);
+}
+
+function dashboardGridScenario(description, scenarioFn: (ctx: ScenarioContext) => void) {
+  describe(description, () => {
+    let setupFn: () => void;
+
+    const ctx: ScenarioContext = {
+      setup: fn => {
+        setupFn = fn;
+      },
+      props: {
+        isEditing: false,
+        isFullscreen: false,
+        scrollTop: null,
+        dashboard: getTestDashboard(),
+      },
+      setProps: (props: Partial<Props>) => {
+        Object.assign(ctx.props, props);
+        if (ctx.wrapper) {
+          ctx.wrapper.setProps(ctx.props);
+        }
+      },
+    };
+
+    beforeEach(() => {
+      setupFn();
+      ctx.wrapper = shallow(<DashboardGrid {...ctx.props} />);
+    });
+
+    scenarioFn(ctx);
+  });
+}
+
+describe('DashboardGrid', () => {
+  dashboardGridScenario('Can render dashboard grid', ctx => {
+    ctx.setup(() => {});
+
+    it('Should render', () => {
+      expect(ctx.wrapper).toMatchSnapshot();
+    });
+  });
+});

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -205,7 +205,7 @@ export class DashboardGrid extends PureComponent<Props> {
       return false;
     }
 
-    const top = parseInt(elem.style.top.replace('px', ''), 10);
+    const top = elem.offsetTop;
     const height = panel.gridPos.h * GRID_CELL_HEIGHT + 40;
     const bottom = top + height;
 

public/app/features/dashboard/dashgrid/DashboardGridDirective.ts

@@ -1,4 +0,0 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import DashboardGrid from './DashboardGrid';
-
-react2AngularDirective('dashboardGrid', DashboardGrid, [['dashboard', { watchDepth: 'reference' }]]);

public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap

@@ -0,0 +1,996 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
+<SizeMe(GridWrapper)
+  className="layout"
+  isDraggable={true}
+  isFullscreen={false}
+  isResizable={true}
+  layout={
+    Array [
+      Object {
+        "h": 10,
+        "i": "1",
+        "w": 24,
+        "x": 0,
+        "y": 0,
+      },
+      Object {
+        "h": 10,
+        "i": "2",
+        "w": 25,
+        "x": 0,
+        "y": 10,
+      },
+      Object {
+        "h": 100,
+        "i": "3",
+        "w": 25,
+        "x": 0,
+        "y": 20,
+      },
+      Object {
+        "h": 10,
+        "i": "4",
+        "w": 25,
+        "x": 0,
+        "y": 120,
+      },
+    ]
+  }
+  onDragStop={[Function]}
+  onLayoutChange={[Function]}
+  onResize={[Function]}
+  onResizeStop={[Function]}
+  onWidthChange={[Function]}
+>
+  <div
+    className=""
+    id="panel-1"
+    key="1"
+  >
+    <DashboardPanel
+      dashboard={
+        DashboardModel {
+          "annotations": Object {
+            "list": Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ],
+          },
+          "autoUpdate": undefined,
+          "description": undefined,
+          "editable": true,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {
+                "panel-added": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "panel-removed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "repeats-processed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-collapsed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-expanded": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "view-mode-changed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+              },
+              "_eventsCount": 6,
+            },
+          },
+          "gnetId": null,
+          "graphTooltip": 0,
+          "id": null,
+          "links": Array [],
+          "meta": Object {
+            "canEdit": true,
+            "canMakeEditable": false,
+            "canSave": true,
+            "canShare": true,
+            "canStar": true,
+            "fullscreen": false,
+            "isEditing": false,
+            "showSettings": true,
+          },
+          "originalTemplating": Array [],
+          "originalTime": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "panels": Array [
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 24,
+                "x": 0,
+                "y": 0,
+              },
+              "id": 1,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph",
+              "transparent": false,
+              "type": "graph",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 10,
+              },
+              "id": 2,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph2",
+              "transparent": false,
+              "type": "graph2",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 100,
+                "w": 25,
+                "x": 0,
+                "y": 20,
+              },
+              "id": 3,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph3",
+              "transparent": false,
+              "type": "graph3",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 120,
+              },
+              "id": 4,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph4",
+              "transparent": false,
+              "type": "graph4",
+            },
+          ],
+          "refresh": undefined,
+          "revision": undefined,
+          "schemaVersion": 18,
+          "snapshot": undefined,
+          "style": "dark",
+          "tags": Array [],
+          "templating": Object {
+            "list": Array [],
+          },
+          "time": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "timepicker": Object {},
+          "timezone": "",
+          "title": "My dashboard",
+          "uid": null,
+          "version": 0,
+        }
+      }
+      isInView={false}
+      panel={
+        PanelModel {
+          "cachedPluginOptions": Object {},
+          "datasource": null,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {},
+              "_eventsCount": 0,
+            },
+          },
+          "gridPos": Object {
+            "h": 10,
+            "w": 24,
+            "x": 0,
+            "y": 0,
+          },
+          "id": 1,
+          "isInView": false,
+          "targets": Array [
+            Object {
+              "refId": "A",
+            },
+          ],
+          "title": "My graph",
+          "transparent": false,
+          "type": "graph",
+        }
+      }
+    />
+  </div>
+  <div
+    className=""
+    id="panel-2"
+    key="2"
+  >
+    <DashboardPanel
+      dashboard={
+        DashboardModel {
+          "annotations": Object {
+            "list": Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ],
+          },
+          "autoUpdate": undefined,
+          "description": undefined,
+          "editable": true,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {
+                "panel-added": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "panel-removed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "repeats-processed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-collapsed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-expanded": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "view-mode-changed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+              },
+              "_eventsCount": 6,
+            },
+          },
+          "gnetId": null,
+          "graphTooltip": 0,
+          "id": null,
+          "links": Array [],
+          "meta": Object {
+            "canEdit": true,
+            "canMakeEditable": false,
+            "canSave": true,
+            "canShare": true,
+            "canStar": true,
+            "fullscreen": false,
+            "isEditing": false,
+            "showSettings": true,
+          },
+          "originalTemplating": Array [],
+          "originalTime": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "panels": Array [
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 24,
+                "x": 0,
+                "y": 0,
+              },
+              "id": 1,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph",
+              "transparent": false,
+              "type": "graph",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 10,
+              },
+              "id": 2,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph2",
+              "transparent": false,
+              "type": "graph2",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 100,
+                "w": 25,
+                "x": 0,
+                "y": 20,
+              },
+              "id": 3,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph3",
+              "transparent": false,
+              "type": "graph3",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 120,
+              },
+              "id": 4,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph4",
+              "transparent": false,
+              "type": "graph4",
+            },
+          ],
+          "refresh": undefined,
+          "revision": undefined,
+          "schemaVersion": 18,
+          "snapshot": undefined,
+          "style": "dark",
+          "tags": Array [],
+          "templating": Object {
+            "list": Array [],
+          },
+          "time": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "timepicker": Object {},
+          "timezone": "",
+          "title": "My dashboard",
+          "uid": null,
+          "version": 0,
+        }
+      }
+      isInView={false}
+      panel={
+        PanelModel {
+          "cachedPluginOptions": Object {},
+          "datasource": null,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {},
+              "_eventsCount": 0,
+            },
+          },
+          "gridPos": Object {
+            "h": 10,
+            "w": 25,
+            "x": 0,
+            "y": 10,
+          },
+          "id": 2,
+          "isInView": false,
+          "targets": Array [
+            Object {
+              "refId": "A",
+            },
+          ],
+          "title": "My graph2",
+          "transparent": false,
+          "type": "graph2",
+        }
+      }
+    />
+  </div>
+  <div
+    className=""
+    id="panel-3"
+    key="3"
+  >
+    <DashboardPanel
+      dashboard={
+        DashboardModel {
+          "annotations": Object {
+            "list": Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ],
+          },
+          "autoUpdate": undefined,
+          "description": undefined,
+          "editable": true,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {
+                "panel-added": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "panel-removed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "repeats-processed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-collapsed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-expanded": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "view-mode-changed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+              },
+              "_eventsCount": 6,
+            },
+          },
+          "gnetId": null,
+          "graphTooltip": 0,
+          "id": null,
+          "links": Array [],
+          "meta": Object {
+            "canEdit": true,
+            "canMakeEditable": false,
+            "canSave": true,
+            "canShare": true,
+            "canStar": true,
+            "fullscreen": false,
+            "isEditing": false,
+            "showSettings": true,
+          },
+          "originalTemplating": Array [],
+          "originalTime": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "panels": Array [
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 24,
+                "x": 0,
+                "y": 0,
+              },
+              "id": 1,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph",
+              "transparent": false,
+              "type": "graph",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 10,
+              },
+              "id": 2,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph2",
+              "transparent": false,
+              "type": "graph2",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 100,
+                "w": 25,
+                "x": 0,
+                "y": 20,
+              },
+              "id": 3,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph3",
+              "transparent": false,
+              "type": "graph3",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 120,
+              },
+              "id": 4,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph4",
+              "transparent": false,
+              "type": "graph4",
+            },
+          ],
+          "refresh": undefined,
+          "revision": undefined,
+          "schemaVersion": 18,
+          "snapshot": undefined,
+          "style": "dark",
+          "tags": Array [],
+          "templating": Object {
+            "list": Array [],
+          },
+          "time": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "timepicker": Object {},
+          "timezone": "",
+          "title": "My dashboard",
+          "uid": null,
+          "version": 0,
+        }
+      }
+      isInView={false}
+      panel={
+        PanelModel {
+          "cachedPluginOptions": Object {},
+          "datasource": null,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {},
+              "_eventsCount": 0,
+            },
+          },
+          "gridPos": Object {
+            "h": 100,
+            "w": 25,
+            "x": 0,
+            "y": 20,
+          },
+          "id": 3,
+          "isInView": false,
+          "targets": Array [
+            Object {
+              "refId": "A",
+            },
+          ],
+          "title": "My graph3",
+          "transparent": false,
+          "type": "graph3",
+        }
+      }
+    />
+  </div>
+  <div
+    className=""
+    id="panel-4"
+    key="4"
+  >
+    <DashboardPanel
+      dashboard={
+        DashboardModel {
+          "annotations": Object {
+            "list": Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ],
+          },
+          "autoUpdate": undefined,
+          "description": undefined,
+          "editable": true,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {
+                "panel-added": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "panel-removed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "repeats-processed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-collapsed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "row-expanded": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+                "view-mode-changed": EE {
+                  "context": [Circular],
+                  "fn": [Function],
+                  "once": false,
+                },
+              },
+              "_eventsCount": 6,
+            },
+          },
+          "gnetId": null,
+          "graphTooltip": 0,
+          "id": null,
+          "links": Array [],
+          "meta": Object {
+            "canEdit": true,
+            "canMakeEditable": false,
+            "canSave": true,
+            "canShare": true,
+            "canStar": true,
+            "fullscreen": false,
+            "isEditing": false,
+            "showSettings": true,
+          },
+          "originalTemplating": Array [],
+          "originalTime": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "panels": Array [
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 24,
+                "x": 0,
+                "y": 0,
+              },
+              "id": 1,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph",
+              "transparent": false,
+              "type": "graph",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 10,
+              },
+              "id": 2,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph2",
+              "transparent": false,
+              "type": "graph2",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 100,
+                "w": 25,
+                "x": 0,
+                "y": 20,
+              },
+              "id": 3,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph3",
+              "transparent": false,
+              "type": "graph3",
+            },
+            PanelModel {
+              "cachedPluginOptions": Object {},
+              "datasource": null,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gridPos": Object {
+                "h": 10,
+                "w": 25,
+                "x": 0,
+                "y": 120,
+              },
+              "id": 4,
+              "isInView": false,
+              "targets": Array [
+                Object {
+                  "refId": "A",
+                },
+              ],
+              "title": "My graph4",
+              "transparent": false,
+              "type": "graph4",
+            },
+          ],
+          "refresh": undefined,
+          "revision": undefined,
+          "schemaVersion": 18,
+          "snapshot": undefined,
+          "style": "dark",
+          "tags": Array [],
+          "templating": Object {
+            "list": Array [],
+          },
+          "time": Object {
+            "from": "now-6h",
+            "to": "now",
+          },
+          "timepicker": Object {},
+          "timezone": "",
+          "title": "My dashboard",
+          "uid": null,
+          "version": 0,
+        }
+      }
+      isInView={false}
+      panel={
+        PanelModel {
+          "cachedPluginOptions": Object {},
+          "datasource": null,
+          "events": Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {},
+              "_eventsCount": 0,
+            },
+          },
+          "gridPos": Object {
+            "h": 10,
+            "w": 25,
+            "x": 0,
+            "y": 120,
+          },
+          "id": 4,
+          "isInView": false,
+          "targets": Array [
+            Object {
+              "refId": "A",
+            },
+          ],
+          "title": "My graph4",
+          "transparent": false,
+          "type": "graph4",
+        }
+      }
+    />
+  </div>
+</SizeMe(GridWrapper)>
+`;

public/app/features/dashboard/index.ts

@@ -1,5 +1,3 @@
-import './dashgrid/DashboardGridDirective';
-
 // Services
 import './services/UnsavedChangesSrv';
 import './services/DashboardLoaderSrv';