Skip to content

N
nexpie-grafana-theme
Commit 0ac05885 by Torkel Ödegaard Committed by GitHub
Options

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

Updated Explore query styles to align them to other query editors
parents f28d38ce 8b70a8dd
Showing with 87 additions and 75 deletions
public/app/features/explore/QueryRow.tsx
...@@ -131,16 +131,22 @@ export class QueryRow extends PureComponent<QueryRowProps> { ...@@ -131,16 +131,22 @@ export class QueryRow extends PureComponent<QueryRowProps> {
/> />
)} )}
</div> </div>
<div className="query-row-tools"> <div className="gf-form-inline">
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}> <div className="gf-form">
<i className="fa fa-times" /> <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
</button> <i className="fa fa-times" />
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}> </button>
<i className="fa fa-plus" /> </div>
</button> <div className="gf-form">
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}> <button className="gf-form-label gf-form-label--btn" onClick={this.onClickAddButton}>
<i className="fa fa-minus" /> <i className="fa fa-plus" />
</button> </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>
</div> </div>
); );
......
public/app/plugins/datasource/loki/components/LokiQueryField.tsx
...@@ -226,26 +226,30 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF ...@@ -226,26 +226,30 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
const chooserText = getChooserText(syntaxLoaded, hasLogLabels); const chooserText = getChooserText(syntaxLoaded, hasLogLabels);
return ( return (
<div className="prom-query-field"> <>
<div className="prom-query-field-tools"> <div className="gf-form-inline">
<Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}> <div className="gf-form">
<button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}> <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
{chooserText} <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
</button> {chooserText} <i className="fa fa-caret-down" />
</Cascader> </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>
<div className="prom-query-field-wrapper"> <div>
<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}
/>
{error ? <div className="prom-query-field-info text-error">{error}</div> : null} {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
{hint ? ( {hint ? (
<div className="prom-query-field-info text-warning"> <div className="prom-query-field-info text-warning">
...@@ -258,7 +262,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF ...@@ -258,7 +262,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
</div> </div>
) : null} ) : null}
</div> </div>
</div> </>
); );
} }
} }
......
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
...@@ -248,39 +248,41 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF ...@@ -248,39 +248,41 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
const chooserText = syntaxLoaded ? 'Metrics' : 'Loading metrics...'; const chooserText = syntaxLoaded ? 'Metrics' : 'Loading metrics...';
return ( return (
<div className="prom-query-field"> <>
<div className="prom-query-field-tools"> <div className="gf-form-inline">
<Cascader options={metricsOptions} onChange={this.onChangeMetrics}> <div className="gf-form">
<button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}> <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
{chooserText} <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
</button> {chooserText} <i className="fa fa-caret-down" />
</Cascader> </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>
<div className="prom-query-field-wrapper"> {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
<QueryField {hint ? (
additionalPlugins={this.plugins} <div className="prom-query-field-info text-warning">
cleanText={cleanText} {hint.label}{' '}
initialQuery={initialQuery.expr} {hint.fix ? (
onTypeahead={this.onTypeahead} <a className="text-link muted" onClick={this.onClickHintFix}>
onWillApplySuggestion={willApplySuggestion} {hint.fix.label}
onValueChanged={this.onChangeQuery} </a>
placeholder="Enter a PromQL query" ) : null}
portalOrigin="prometheus" </div>
syntaxLoaded={syntaxLoaded} ) : null}
/> </>
{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>
); );
} }
} }
......
public/sass/components/_gf-form.scss
...@@ -5,7 +5,7 @@ $input-border: 1px solid $input-border-color; ...@@ -5,7 +5,7 @@ $input-border: 1px solid $input-border-color;
margin-bottom: $gf-form-margin; margin-bottom: $gf-form-margin;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-start;
text-align: left; text-align: left;
position: relative; position: relative;
...@@ -129,6 +129,11 @@ $input-border: 1px solid $input-border-color; ...@@ -129,6 +129,11 @@ $input-border: 1px solid $input-border-color;
&:hover { &:hover {
background: $list-item-hover-bg; 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; ...@@ -137,6 +142,7 @@ $input-border: 1px solid $input-border-color;
} }
} }
.gf-form-label + .gf-form-label { .gf-form-label + .gf-form-label {
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
} }
......
public/sass/components/_slate_editor.scss
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
.slate-query-field__wrapper { .slate-query-field__wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 6px 7px 4px; padding: $input-padding-y $input-padding-x;
min-height: $gf-form-input-height;
width: 100%; width: 100%;
cursor: text; cursor: text;
line-height: $line-height-base; line-height: $line-height-base;
......
public/sass/pages/_explore.scss
...@@ -322,6 +322,7 @@ ...@@ -322,6 +322,7 @@
.query-row { .query-row {
display: flex; display: flex;
position: relative; position: relative;
align-items: flex-start;
& + & { & + & {
margin-top: 0.5rem; margin-top: 0.5rem;
...@@ -335,17 +336,17 @@ ...@@ -335,17 +336,17 @@
.query-row-status { .query-row-status {
position: absolute; position: absolute;
top: 0; top: 0;
right: 90px; right: 105px;
z-index: 1015; z-index: 1015;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 34px; height: $input-height;
} }
.query-row-field { .query-row-field {
margin-right: 3px; margin-right: 3px;
width: 100%; flex-grow: 1;
} }
.query-transactions { .query-transactions {
...@@ -382,14 +383,6 @@ ...@@ -382,14 +383,6 @@
// Prometheus-specifics, to be extracted to datasource soon // Prometheus-specifics, to be extracted to datasource soon
.explore { .explore {
.prom-query-field {
display: flex;
}
.prom-query-field-wrapper {
width: 100%;
}
.prom-query-field-info { .prom-query-field-info {
margin: 0.25em 0.5em 0.5em; margin: 0.25em 0.5em 0.5em;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment