fix(graph): fix for table legend and scroll, fixes #7204, fixes #6628

public/app/plugins/app/testdata/dashboards/graph_last_1h.json

@@ -1,58 +1,17 @@
 {
-  "revision": 6,
-  "title": "TestData - Graph Panel Last 1h",
-  "tags": [
-    "grafana-test"
-  ],
-  "style": "dark",
-  "timezone": "browser",
-  "editable": true,
-  "sharedCrosshair": false,
-  "hideControls": false,
-  "time": {
-    "from": "2016-11-16T16:59:38.294Z",
-    "to": "2016-11-16T17:09:01.532Z"
-  },
-  "timepicker": {
-    "refresh_intervals": [
-      "5s",
-      "10s",
-      "30s",
-      "1m",
-      "5m",
-      "15m",
-      "30m",
-      "1h",
-      "2h",
-      "1d"
-    ],
-    "time_options": [
-      "5m",
-      "15m",
-      "1h",
-      "6h",
-      "12h",
-      "24h",
-      "2d",
-      "7d",
-      "30d"
-    ]
-  },
-  "templating": {
-    "list": []
-  },
   "annotations": {
     "list": []
   },
-  "refresh": false,
-  "schemaVersion": 13,
-  "version": 4,
-  "links": [],
+  "editable": true,
   "gnetId": null,
+  "graphTooltip": 0,
+  "hideControls": false,
+  "links": [],
+  "refresh": false,
+  "revision": 7,
   "rows": [
     {
       "collapse": false,
-      "editable": true,
       "height": "250px",
       "panels": [
         {
@@ -63,7 +22,6 @@
           "error": false,
           "fill": 1,
           "id": 1,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -137,7 +95,6 @@
           "error": false,
           "fill": 1,
           "id": 2,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -211,7 +168,6 @@
           "error": false,
           "fill": 1,
           "id": 3,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -278,17 +234,15 @@
           ]
         }
       ],
-      "title": "New row",
-      "showTitle": false,
-      "titleSize": "h6",
-      "isNew": false,
       "repeat": null,
+      "repeatIteration": null,
       "repeatRowId": null,
-      "repeatIteration": null
+      "showTitle": false,
+      "title": "New row",
+      "titleSize": "h6"
     },
     {
       "collapse": false,
-      "editable": true,
       "height": "250px",
       "panels": [
         {
@@ -299,7 +253,6 @@
           "error": false,
           "fill": 1,
           "id": 4,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -370,7 +323,6 @@
           "editable": true,
           "error": false,
           "id": 6,
-          "isNew": true,
           "links": [],
           "mode": "markdown",
           "span": 4,
@@ -378,17 +330,15 @@
           "type": "text"
         }
       ],
-      "title": "New row",
-      "showTitle": false,
-      "titleSize": "h6",
-      "isNew": false,
       "repeat": null,
+      "repeatIteration": null,
       "repeatRowId": null,
-      "repeatIteration": null
+      "showTitle": false,
+      "title": "New row",
+      "titleSize": "h6"
     },
     {
       "collapse": false,
-      "editable": true,
       "height": 336,
       "panels": [
         {
@@ -399,7 +349,6 @@
           "error": false,
           "fill": 1,
           "id": 5,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -481,7 +430,6 @@
           "editable": true,
           "error": false,
           "id": 7,
-          "isNew": true,
           "links": [],
           "mode": "markdown",
           "span": 4,
@@ -489,17 +437,15 @@
           "type": "text"
         }
       ],
-      "title": "New row",
-      "showTitle": false,
-      "titleSize": "h6",
-      "isNew": false,
       "repeat": null,
+      "repeatIteration": null,
       "repeatRowId": null,
-      "repeatIteration": null
+      "showTitle": false,
+      "title": "New row",
+      "titleSize": "h6"
     },
     {
       "collapse": false,
-      "editable": true,
       "height": "250px",
       "panels": [
         {
@@ -510,7 +456,6 @@
           "error": false,
           "fill": 1,
           "id": 8,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -584,7 +529,6 @@
           "error": false,
           "fill": 1,
           "id": 10,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -655,7 +599,6 @@
           "editable": true,
           "error": false,
           "id": 13,
-          "isNew": true,
           "links": [],
           "mode": "markdown",
           "span": 4,
@@ -663,17 +606,16 @@
           "type": "text"
         }
       ],
-      "title": "New row",
-      "showTitle": false,
-      "titleSize": "h6",
-      "isNew": false,
       "repeat": null,
+      "repeatIteration": null,
       "repeatRowId": null,
-      "repeatIteration": null
+      "showTitle": false,
+      "title": "New row",
+      "titleSize": "h6"
     },
     {
-      "isNew": false,
-      "title": "Dashboard Row",
+      "collapse": false,
+      "height": 250,
       "panels": [
         {
           "aliasColors": {},
@@ -683,7 +625,6 @@
           "error": false,
           "fill": 1,
           "id": 9,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -776,7 +717,6 @@
           "editable": true,
           "error": false,
           "id": 14,
-          "isNew": true,
           "links": [],
           "mode": "markdown",
           "span": 4,
@@ -784,17 +724,16 @@
           "type": "text"
         }
       ],
-      "showTitle": false,
-      "titleSize": "h6",
-      "height": 250,
       "repeat": null,
-      "repeatRowId": null,
       "repeatIteration": null,
-      "collapse": false
+      "repeatRowId": null,
+      "showTitle": false,
+      "title": "Dashboard Row",
+      "titleSize": "h6"
     },
     {
-      "isNew": false,
-      "title": "Dashboard Row",
+      "collapse": false,
+      "height": 250,
       "panels": [
         {
           "aliasColors": {},
@@ -804,7 +743,6 @@
           "error": false,
           "fill": 1,
           "id": 12,
-          "isNew": true,
           "legend": {
             "avg": false,
             "current": false,
@@ -833,12 +771,12 @@
           "steppedLine": false,
           "targets": [
             {
+              "alias": "",
               "hide": false,
               "refId": "B",
               "scenarioId": "csv_metric_values",
               "stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10",
-              "target": "",
-              "alias": ""
+              "target": ""
             },
             {
               "alias": "",
@@ -898,7 +836,6 @@
           "editable": true,
           "error": false,
           "id": 15,
-          "isNew": true,
           "links": [],
           "mode": "markdown",
           "span": 4,
@@ -906,13 +843,522 @@
           "type": "text"
         }
       ],
+      "repeat": null,
+      "repeatIteration": null,
+      "repeatRowId": null,
       "showTitle": false,
-      "titleSize": "h6",
+      "title": "Dashboard Row",
+      "titleSize": "h6"
+    },
+    {
+      "collapse": false,
       "height": 250,
+      "panels": [
+        {
+          "aliasColors": {},
+          "bars": false,
+          "datasource": "Grafana TestData",
+          "decimals": 3,
+          "fill": 1,
+          "id": 16,
+          "legend": {
+            "alignAsTable": true,
+            "avg": true,
+            "current": true,
+            "max": true,
+            "min": true,
+            "show": true,
+            "total": true,
+            "values": true
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "percentage": false,
+          "pointradius": 5,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "span": 6,
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "refId": "A",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "B",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "C",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "D",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeShift": null,
+          "title": "Legend Table No Scroll Visible",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "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
+            }
+          ]
+        },
+        {
+          "aliasColors": {},
+          "bars": false,
+          "datasource": "Grafana TestData",
+          "decimals": 3,
+          "fill": 1,
+          "id": 17,
+          "legend": {
+            "alignAsTable": true,
+            "avg": true,
+            "current": true,
+            "max": true,
+            "min": true,
+            "show": true,
+            "total": true,
+            "values": true
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "percentage": false,
+          "pointradius": 5,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "span": 6,
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "refId": "A",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "B",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "C",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "D",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "E",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "F",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "G",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "H",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "I",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "J",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeShift": null,
+          "title": "Legend Table Should Scroll",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "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
+            }
+          ]
+        }
+      ],
       "repeat": null,
+      "repeatIteration": null,
       "repeatRowId": null,
+      "showTitle": false,
+      "title": "Dashboard Row",
+      "titleSize": "h6"
+    },
+    {
+      "collapse": false,
+      "height": 250,
+      "panels": [
+        {
+          "aliasColors": {},
+          "bars": false,
+          "datasource": "Grafana TestData",
+          "decimals": 3,
+          "fill": 1,
+          "id": 18,
+          "legend": {
+            "alignAsTable": true,
+            "avg": true,
+            "current": true,
+            "max": true,
+            "min": true,
+            "rightSide": true,
+            "show": true,
+            "total": true,
+            "values": true
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "percentage": false,
+          "pointradius": 5,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "span": 6,
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "refId": "A",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "B",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "C",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "D",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeShift": null,
+          "title": "Legend Table No Scroll Visible",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "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
+            }
+          ]
+        },
+        {
+          "aliasColors": {},
+          "bars": false,
+          "datasource": "Grafana TestData",
+          "decimals": 3,
+          "fill": 1,
+          "id": 19,
+          "legend": {
+            "alignAsTable": true,
+            "avg": true,
+            "current": true,
+            "max": true,
+            "min": true,
+            "rightSide": true,
+            "show": true,
+            "total": true,
+            "values": true
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "percentage": false,
+          "pointradius": 5,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "span": 6,
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "refId": "A",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "B",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "C",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "D",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "E",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "F",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "G",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "H",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "I",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "J",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "K",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            },
+            {
+              "refId": "L",
+              "scenarioId": "csv_metric_values",
+              "stringInput": "1,20,90,30,5,0",
+              "target": ""
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeShift": null,
+          "title": "Legend Table No Scroll Visible",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "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
+            }
+          ]
+        }
+      ],
+      "repeat": null,
       "repeatIteration": null,
-      "collapse": false
+      "repeatRowId": null,
+      "showTitle": false,
+      "title": "Dashboard Row",
+      "titleSize": "h6"
     }
-  ]
+  ],
+  "schemaVersion": 14,
+  "style": "dark",
+  "tags": [
+    "grafana-test"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-1h",
+    "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": "browser",
+  "title": "TestData - Graph Panel Last 1h",
+  "version": 6
 }

public/app/plugins/app/testdata/plugin.json

@@ -9,7 +9,7 @@
       "name": "Grafana Project",
       "url": "http://grafana.org"
     },
-    "version": "1.0.15",
+    "version": "1.0.16",
     "updated": "2016-09-26"
   },
 

public/app/plugins/panel/graph/legend.js

@@ -124,6 +124,7 @@ function (angular, _, $) {
 
           $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
 
+          var tableHeaderElem;
           if (panel.legend.alignAsTable) {
             var header = '<tr>';
             header += '<th colspan="2" style="text-align:left"></th>';
@@ -135,7 +136,7 @@ function (angular, _, $) {
               header += getTableHeaderHtml('total');
             }
             header += '</tr>';
-            $container.append($(header));
+            tableHeaderElem = $(header);
           }
 
           if (panel.legend.sort) {
@@ -148,6 +149,8 @@ function (angular, _, $) {
           }
 
           var seriesShown = 0;
+          var seriesElements = [];
+
           for (i = 0; i < seriesList.length; i++) {
             var series = seriesList[i];
 
@@ -156,6 +159,7 @@ function (angular, _, $) {
             }
 
             var html = '<div class="graph-legend-series';
+
             if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; }
             if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             html += '" data-series-index="' + i + '">';
@@ -180,7 +184,7 @@ function (angular, _, $) {
             }
 
             html += '</div>';
-            $container.append($(html));
+            seriesElements.push($(html));
 
             seriesShown++;
           }
@@ -193,9 +197,13 @@ function (angular, _, $) {
             }
 
             var topPadding = 6;
-            $container.css("max-height", maxHeight - topPadding);
+            var tbodyElem = $('<tbody></tbody>');
+            tbodyElem.css("height", maxHeight - topPadding);
+            tbodyElem.append(tableHeaderElem);
+            tbodyElem.append(seriesElements);
+            $container.append(tbodyElem);
           } else {
-            $container.css("max-height", "");
+            $container.append(seriesElements);
           }
         }
       }

public/sass/components/_panel_graph.scss

@@ -85,9 +85,11 @@
 }
 
 .graph-legend-table {
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: table;
+  tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 
   .graph-legend-series {
     display: table-row;