Merge pull request #23 from grafana/davkal/19-editor-height

Default height for editor field

src/editor/editor_component.tsx

@@ -1,9 +1,7 @@
-
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 
 import coreModule from 'grafana/app/core/core_module';
 
-
 import FluxQueryField from './FluxQueryField';
 import flux from './flux';
 
@@ -20,28 +18,28 @@ class Editor extends Component<any, any> {
   }
 
   handleChangeQuery = value => {
-    const { index, change } = this.props;
-    const { query } = this.state;
+    const {index, change} = this.props;
+    const {query} = this.state;
     const edited = query !== value;
-    this.setState({ edited, query: value });
+    this.setState({edited, query: value});
     if (change) {
       change(value, index);
     }
   };
 
   handlePressEnter = () => {
-    const { execute } = this.props;
+    const {execute} = this.props;
     if (execute) {
       execute();
     }
   };
 
   render() {
-    const { database, request } = this.props;
-    const { edited, query } = this.state;
+    const {database, request} = this.props;
+    const {edited, query} = this.state;
 
     return (
-      <div className="gf-form-input">
+      <div className="gf-form-input" style={{height: 'initial'}}>
         <FluxQueryField
           defaultDatabase={database}
           initialQuery={edited ? null : query}

src/partials/query.editor.html

@@ -1,32 +1,54 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="true">
-
   <div class="gf-form" style="align-items: stretch">
-    <flux-editor class="gf-form-input" database="ctrl.defaultDatabase" request="ctrl.requestMetadata" style="border: none" query="ctrl.target.query"
-      change="ctrl.onChange" execute="ctrl.onExecute"></flux-editor>
+    <flux-editor
+      database="ctrl.defaultDatabase"
+      request="ctrl.requestMetadata"
+      style="border: none; width: 100%"
+      query="ctrl.target.query"
+      change="ctrl.onChange"
+      execute="ctrl.onExecute"
+    ></flux-editor>
     <!-- Result preview -->
-    <textarea rows="10" class="gf-form-input" ng-model="ctrl.dataPreview" readonly></textarea>
+    <textarea
+      rows="10"
+      class="gf-form-input"
+      ng-model="ctrl.dataPreview"
+      readonly
+    ></textarea>
   </div>
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label query-keyword">FORMAT AS</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats"
-          ng-change="ctrl.refresh()"></select>
+        <select
+          class="gf-form-input gf-size-auto"
+          ng-model="ctrl.target.resultFormat"
+          ng-options="f.value as f.text for f in ctrl.resultFormats"
+          ng-change="ctrl.refresh()"
+        ></select>
       </div>
     </div>
     <div class="gf-form" ng-if="ctrl.panelCtrl.loading">
-      <label class="gf-form-label">
-        <i class="fa fa-spinner fa-spin"></i> Loading</label>
+      <label class="gf-form-label"> <i class="fa fa-spinner fa-spin"></i> Loading</label>
     </div>
     <div class="gf-form" ng-if="!ctrl.panelCtrl.loading">
       <label class="gf-form-label">Result tables</label>
-      <input type="text" class="gf-form-input" ng-model="ctrl.resultTableCount" disabled="disabled">
+      <input
+        type="text"
+        class="gf-form-input"
+        ng-model="ctrl.resultTableCount"
+        disabled="disabled"
+      />
       <label class="gf-form-label">Result records</label>
-      <input type="text" class="gf-form-input" ng-model="ctrl.resultRecordCount" disabled="disabled">
+      <input
+        type="text"
+        class="gf-form-input"
+        ng-model="ctrl.resultRecordCount"
+        disabled="disabled"
+      />
     </div>
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
   </div>
-
-</query-editor-row>
+</query-editor-row>