Merge pull request #15107 from grafana/explore-query-styles

Updated Explore query styles to align them to other query editors

public/app/features/explore/QueryRow.tsx

@@ -131,18 +131,24 @@ export class QueryRow extends PureComponent<QueryRowProps> {
             />
           )}
         </div>
-        <div className="query-row-tools">
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
               <i className="fa fa-times" />
             </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
+          </div>
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickAddButton}>
               <i className="fa fa-plus" />
             </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
+          </div>
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickRemoveButton}>
               <i className="fa fa-minus" />
             </button>
           </div>
         </div>
+      </div>
     );
   }
 }

public/app/plugins/datasource/loki/components/LokiQueryField.tsx

@@ -226,15 +226,16 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
     const chooserText = getChooserText(syntaxLoaded, hasLogLabels);
 
     return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
             <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
               </button>
             </Cascader>
           </div>
-        <div className="prom-query-field-wrapper">
+          <div className="gf-form gf-form--grow">
             <QueryField
               additionalPlugins={this.plugins}
               cleanText={cleanText}
@@ -246,6 +247,9 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
               portalOrigin="loki"
               syntaxLoaded={syntaxLoaded}
             />
+          </div>
+        </div>
+        <div>
           {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
           {hint ? (
             <div className="prom-query-field-info text-warning">
@@ -258,7 +262,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
-      </div>
+      </>
     );
   }
 }

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -248,15 +248,16 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     const chooserText = syntaxLoaded ? 'Metrics' : 'Loading metrics...';
 
     return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
             <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
               </button>
             </Cascader>
           </div>
-        <div className="prom-query-field-wrapper">
+          <div className="gf-form gf-form--grow">
             <QueryField
               additionalPlugins={this.plugins}
               cleanText={cleanText}
@@ -268,6 +269,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
               portalOrigin="prometheus"
               syntaxLoaded={syntaxLoaded}
             />
+          </div>
+        </div>
         {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
         {hint ? (
           <div className="prom-query-field-info text-warning">
@@ -279,8 +282,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
             ) : null}
           </div>
         ) : null}
-        </div>
-      </div>
+      </>
     );
   }
 }

public/sass/components/_gf-form.scss

@@ -5,7 +5,7 @@ $input-border: 1px solid $input-border-color;
   margin-bottom: $gf-form-margin;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   text-align: left;
   position: relative;
 
@@ -129,6 +129,11 @@ $input-border: 1px solid $input-border-color;
 
     &:hover {
       background: $list-item-hover-bg;
+      color: $link-color;
+    }
+
+    .fa-caret-down {
+      padding-left: 4px;
     }
   }
 
@@ -137,6 +142,7 @@ $input-border: 1px solid $input-border-color;
   }
 }
 
+
 .gf-form-label + .gf-form-label {
   margin-right: $gf-form-margin;
 }

public/sass/components/_slate_editor.scss

@@ -8,7 +8,8 @@
 .slate-query-field__wrapper {
   position: relative;
   display: inline-block;
-  padding: 6px 7px 4px;
+  padding: $input-padding-y $input-padding-x;
+  min-height: $gf-form-input-height;
   width: 100%;
   cursor: text;
   line-height: $line-height-base;

public/sass/pages/_explore.scss

@@ -322,6 +322,7 @@
 .query-row {
   display: flex;
   position: relative;
+  align-items: flex-start;
 
   & + & {
     margin-top: 0.5rem;
@@ -335,17 +336,17 @@
 .query-row-status {
   position: absolute;
   top: 0;
-  right: 90px;
+  right: 105px;
   z-index: 1015;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 34px;
+  height: $input-height;
 }
 
 .query-row-field {
   margin-right: 3px;
-  width: 100%;
+  flex-grow: 1;
 }
 
 .query-transactions {
@@ -382,14 +383,6 @@
 // Prometheus-specifics, to be extracted to datasource soon
 
 .explore {
-  .prom-query-field {
-    display: flex;
-  }
-
-  .prom-query-field-wrapper {
-    width: 100%;
-  }
-
   .prom-query-field-info {
     margin: 0.25em 0.5em 0.5em;
     display: flex;