mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #15107 from grafana/explore-query-styles
Updated Explore query styles to align them to other query editors
This commit is contained in:
commit
0ac0588583
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|||||||
|
|
||||||
&: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;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.gf-form-label + .gf-form-label {
|
.gf-form-label + .gf-form-label {
|
||||||
margin-right: $gf-form-margin;
|
margin-right: $gf-form-margin;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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 @@
|
|||||||
.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 @@
|
|||||||
// 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;
|
||||||
|
Loading…
Reference in New Issue
Block a user