Fixes and cleanup

public/app/core/components/AppNotifications/AppNotificationItem.tsx

@@ -20,6 +20,7 @@ export default class AppNotificationItem extends Component<Props> {
 
   render() {
     const { appNotification, onClearNotification } = this.props;
+
     return (
       <div className={`alert-${appNotification.severity} alert`}>
         <div className="alert-icon">

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

@@ -252,7 +252,7 @@ export class QueriesTab extends PureComponent<Props, State> {
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
           <PanelOptionSection>
-            <div className="query-editor-rows gf-form-group">
+            <div className="query-editor-rows">
               <div ref={element => (this.element = element)} />
 
               <div className="gf-form-query">
@@ -260,9 +260,11 @@ export class QueriesTab extends PureComponent<Props, State> {
                   <label className="gf-form-label">
                     <span className="gf-form-query-letter-cell-carret muted">
                       <i className="fa fa-caret-down" />
-                    </span>
+                    </span>{' '}
                     <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
                   </label>
+                </div>
+                <div className="gf-form">
                   {!isAddingMixed && (
                     <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
                       Add Query

public/app/features/dashboard/dashnav/dashnav.ts

@@ -91,7 +91,7 @@ export class DashNavCtrl {
 
     this.dashboard.addPanel({
       type: 'add-panel',
-      gridPos: { x: 0, y: 0, w: 12, h: 9 },
+      gridPos: { x: 0, y: 0, w: 12, h: 8 },
       title: 'Panel Title',
     });
   }

public/app/features/panel/all.ts

@@ -4,4 +4,3 @@ import './solo_panel_ctrl';
 import './query_ctrl';
 import './panel_editor_tab';
 import './query_editor_row';
-import './query_troubleshooter';

public/app/features/panel/query_troubleshooter.ts

-import _ from 'lodash';
-import appEvents from 'app/core/app_events';
-import { coreModule, JsonExplorer } from 'app/core/core';
-
-const template = `
-<div class="query-troubleshooter" ng-if="ctrl.isOpen">
-  <div class="query-troubleshooter__header">
-    <a class="pointer" ng-click="ctrl.toggleMocking()">Mock Response</a>
-    <a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
-      <i class="fa fa-plus-square-o"></i> Expand All
-    </a>
-    <a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
-      <i class="fa fa-minus-square-o"></i> Collapse All
-    </a>
-    <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
-  </div>
-  <div class="query-troubleshooter__body" ng-hide="ctrl.isMocking">
-    <i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
-    <div class="query-troubleshooter-json"></div>
-  </div>
-  <div class="query-troubleshooter__body" ng-show="ctrl.isMocking">
-    <div class="gf-form p-l-1 gf-form--v-stretch">
-			<textarea class="gf-form-input" style="width: 95%" rows="10" ng-model="ctrl.mockedResponse"  placeholder="JSON"></textarea>
-    </div>
-  </div>
-</div>
-`;
-
-export class QueryTroubleshooterCtrl {
-  isOpen: any;
-  isLoading: boolean;
-  showResponse: boolean;
-  panelCtrl: any;
-  renderJsonExplorer: (data) => void;
-  onRequestErrorEventListener: any;
-  onRequestResponseEventListener: any;
-  hasError: boolean;
-  allNodesExpanded: boolean;
-  isMocking: boolean;
-  mockedResponse: string;
-  jsonExplorer: JsonExplorer;
-
-  /** @ngInject */
-  constructor($scope, private $timeout) {
-    this.onRequestErrorEventListener = this.onRequestError.bind(this);
-    this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
-
-    appEvents.on('ds-request-response', this.onRequestResponseEventListener);
-    appEvents.on('ds-request-error', this.onRequestErrorEventListener);
-
-    $scope.$on('$destroy', this.removeEventsListeners.bind(this));
-    $scope.$watch('ctrl.isOpen', this.stateChanged.bind(this));
-  }
-
-  removeEventsListeners() {
-    appEvents.off('ds-request-response', this.onRequestResponseEventListener);
-    appEvents.off('ds-request-error', this.onRequestErrorEventListener);
-  }
-
-  toggleMocking() {
-    this.isMocking = !this.isMocking;
-  }
-
-  onRequestError(err) {
-    // ignore if closed
-    if (!this.isOpen) {
-      return;
-    }
-
-    this.isOpen = true;
-    this.hasError = true;
-    this.onRequestResponse(err);
-  }
-
-  stateChanged() {
-    if (this.isOpen) {
-      this.panelCtrl.refresh();
-      this.isLoading = true;
-    }
-  }
-
-  getClipboardText(): string {
-    if (this.jsonExplorer) {
-      return JSON.stringify(this.jsonExplorer.json, null, 2);
-    }
-    return '';
-  }
-
-  handleMocking(data) {
-    let mockedData;
-    try {
-      mockedData = JSON.parse(this.mockedResponse);
-    } catch (err) {
-      appEvents.emit('alert-error', ['Failed to parse mocked response']);
-      return;
-    }
-
-    data.data = mockedData;
-  }
-
-  onRequestResponse(data) {
-    // ignore if closed
-    if (!this.isOpen) {
-      return;
-    }
-
-    if (this.isMocking) {
-      this.handleMocking(data);
-      return;
-    }
-
-    this.isLoading = false;
-    data = _.cloneDeep(data);
-
-    if (data.headers) {
-      delete data.headers;
-    }
-
-    if (data.config) {
-      data.request = data.config;
-      delete data.config;
-      delete data.request.transformRequest;
-      delete data.request.transformResponse;
-      delete data.request.paramSerializer;
-      delete data.request.jsonpCallbackParam;
-      delete data.request.headers;
-      delete data.request.requestId;
-      delete data.request.inspect;
-      delete data.request.retry;
-      delete data.request.timeout;
-    }
-
-    if (data.data) {
-      data.response = data.data;
-
-      if (data.status === 200) {
-        // if we are in error state, assume we automatically opened
-        // and auto close it again
-        if (this.hasError) {
-          this.hasError = false;
-          this.isOpen = false;
-        }
-      }
-
-      delete data.data;
-      delete data.status;
-      delete data.statusText;
-      delete data.$$config;
-    }
-
-    this.$timeout(_.partial(this.renderJsonExplorer, data));
-  }
-
-  toggleExpand(depth) {
-    if (this.jsonExplorer) {
-      this.allNodesExpanded = !this.allNodesExpanded;
-      this.jsonExplorer.openAtDepth(this.allNodesExpanded ? 20 : 1);
-    }
-  }
-}
-
-export function queryTroubleshooter() {
-  return {
-    restrict: 'E',
-    template: template,
-    controller: QueryTroubleshooterCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    scope: {
-      panelCtrl: '=',
-      isOpen: '=',
-    },
-    link: (scope, elem, attrs, ctrl) => {
-      ctrl.renderJsonExplorer = data => {
-        const jsonElem = elem.find('.query-troubleshooter-json');
-
-        ctrl.jsonExplorer = new JsonExplorer(data, 3, {
-          animateOpen: true,
-        });
-
-        const html = ctrl.jsonExplorer.render(true);
-        jsonElem.html(html);
-      };
-    },
-  };
-}
-
-coreModule.directive('queryTroubleshooter', queryTroubleshooter);

public/app/features/panel/viz_tab.ts

-import coreModule from 'app/core/core_module';
-import { DashboardModel } from '../dashboard/dashboard_model';
-import { VizTypePicker } from '../dashboard/dashgrid/VizTypePicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { PanelPlugin } from 'app/types/plugins';
-
-export class VizTabCtrl {
-  panelCtrl: any;
-  dashboard: DashboardModel;
-
-  /** @ngInject */
-  constructor($scope) {
-    this.panelCtrl = $scope.ctrl;
-    this.dashboard = this.panelCtrl.dashboard;
-
-    $scope.ctrl = this;
-  }
-
-  onTypeChanged = (plugin: PanelPlugin) => {};
-}
-
-const template = `
-<div class="gf-form-group ">
-  <div class="gf-form-query">
-    <div class="gf-form">
-      <label class="gf-form-label">
-        <img src="public/app/plugins/panel/graph/img/icn-graph-panel.svg" style="width: 16px; height: 16px" />
-        Graph
-        <i class="fa fa-caret-down" />
-      </label>
-		</div>
-
-		<div class="gf-form gf-form--grow">
-			<label class="gf-form-label gf-form-label--grow"></label>
-		</div>
-	</div>
-
-	<br />
-	<br />
-
-  <div class="query-editor-rows gf-form-group">
-	  <div ng-repeat="tab in ctrl.panelCtrl.optionTabs">
-	    <div class="gf-form-query">
-		    <div class="gf-form gf-form-query-letter-cell">
-			    <label class="gf-form-label">
-				    <span class="gf-form-query-letter-cell-carret">
-					    <i class="fa fa-caret-down"></i>
-				    </span>
-				    <span class="gf-form-query-letter-cell-letter">{{tab.title}}</span>
-          </label>
-			  </div>
-        <div class="gf-form gf-form--grow">
-			    <label class="gf-form-label gf-form-label--grow"></label>
-		    </div>
-			</div>
-		</div>
-	</div>
-</div>`;
-
-/** @ngInject */
-export function vizTabDirective() {
-  'use strict';
-  return {
-    restrict: 'E',
-    template: template,
-    controller: VizTabCtrl,
-  };
-}
-
-react2AngularDirective('vizTypePicker', VizTypePicker, ['currentType', ['onTypeChanged', { watchDepth: 'reference' }]]);
-coreModule.directive('vizTab', vizTabDirective);

public/sass/components/_panel_editor.scss

@@ -257,7 +257,7 @@
   .btn {
     position: absolute;
     right: 0;
-    top: 2px;
+    top: 0px;
   }
 }
 

public/sass/components/_query_editor.scss

@@ -14,7 +14,7 @@
 }
 
 .query-editor-rows {
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 .gf-form-query {