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,16 +131,22 @@ export class QueryRow extends PureComponent<QueryRowProps> {
             />
           )}
         </div>
-        <div className="query-row-tools">
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
-            <i className="fa fa-times" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
-            <i className="fa fa-plus" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
-            <i className="fa fa-minus" />
-          </button>
+        <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>
+          </div>
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickAddButton}>
+              <i className="fa fa-plus" />
+            </button>
+          </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,26 +226,30 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
     const chooserText = getChooserText(syntaxLoaded, hasLogLabels);
 
     return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
-          <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
-            </button>
-          </Cascader>
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
+              </button>
+            </Cascader>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <QueryField
+              additionalPlugins={this.plugins}
+              cleanText={cleanText}
+              initialQuery={initialQuery.expr}
+              onTypeahead={this.onTypeahead}
+              onWillApplySuggestion={willApplySuggestion}
+              onValueChanged={this.onChangeQuery}
+              placeholder="Enter a Loki query"
+              portalOrigin="loki"
+              syntaxLoaded={syntaxLoaded}
+            />
+          </div>
         </div>
-        <div className="prom-query-field-wrapper">
-          <QueryField
-            additionalPlugins={this.plugins}
-            cleanText={cleanText}
-            initialQuery={initialQuery.expr}
-            onTypeahead={this.onTypeahead}
-            onWillApplySuggestion={willApplySuggestion}
-            onValueChanged={this.onChangeQuery}
-            placeholder="Enter a Loki query"
-            portalOrigin="loki"
-            syntaxLoaded={syntaxLoaded}
-          />
+        <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,39 +248,41 @@ 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">
-          <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
-            </button>
-          </Cascader>
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
+              </button>
+            </Cascader>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <QueryField
+              additionalPlugins={this.plugins}
+              cleanText={cleanText}
+              initialQuery={initialQuery.expr}
+              onTypeahead={this.onTypeahead}
+              onWillApplySuggestion={willApplySuggestion}
+              onValueChanged={this.onChangeQuery}
+              placeholder="Enter a PromQL query"
+              portalOrigin="prometheus"
+              syntaxLoaded={syntaxLoaded}
+            />
+          </div>
         </div>
-        <div className="prom-query-field-wrapper">
-          <QueryField
-            additionalPlugins={this.plugins}
-            cleanText={cleanText}
-            initialQuery={initialQuery.expr}
-            onTypeahead={this.onTypeahead}
-            onWillApplySuggestion={willApplySuggestion}
-            onValueChanged={this.onChangeQuery}
-            placeholder="Enter a PromQL query"
-            portalOrigin="prometheus"
-            syntaxLoaded={syntaxLoaded}
-          />
-          {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
-          {hint ? (
-            <div className="prom-query-field-info text-warning">
-              {hint.label}{' '}
-              {hint.fix ? (
-                <a className="text-link muted" onClick={this.onClickHintFix}>
-                  {hint.fix.label}
-                </a>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-      </div>
+        {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
+        {hint ? (
+          <div className="prom-query-field-info text-warning">
+            {hint.label}{' '}
+            {hint.fix ? (
+              <a className="text-link muted" onClick={this.onClickHintFix}>
+                {hint.fix.label}
+              </a>
+            ) : null}
+          </div>
+        ) : null}
+      </>
     );
   }
 }

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;