added header section to legacy tabs

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

@@ -81,7 +81,14 @@ export class VisualizationTab extends PureComponent<Props> {
 
     let template = '';
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
-      template += '<panel-editor-tab editor-tab="ctrl.editorTabs[' + i + ']" ctrl="ctrl"></panel-editor-tab>';
+      template += `
+      <div class="form-section" ng-cloak>
+        <div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>
+        <div class="form-section__body">
+          <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
+        </div>
+      </div>
+      `;
     }
 
     const loader = getAngularLoader();

public/app/plugins/panel/graph/module.ts

@@ -135,9 +135,9 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes', axesEditorComponent, 2);
-    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
-    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
+    this.addEditorTab('Display options', 'public/app/plugins/panel/graph/tab_display.html');
+    this.addEditorTab('Axes', axesEditorComponent);
+    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
 
     // if (config.alertingEnabled) {
     //   this.addEditorTab('Alert', alertTab, 5);

public/sass/components/_panel_editor.scss

@@ -206,3 +206,18 @@
   font-size: $font-size-md;
   margin-bottom: 20px;
 }
+
+.form-section {
+  margin-bottom: 10px;
+}
+
+.form-section__header {
+  border-bottom: 2px solid $dark-4;
+  padding: 5px 0px;
+  font-size: $font-size-h5;
+  margin-bottom: 20px;
+}
+
+.form-section__body {
+  background: $dark-1;
+}