IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15234 from grafana/15222-explore-query-wrapping

Browse Source 
Explore: Fix issue with wrapping on long queries
This commit is contained in:
Torkel Ödegaard 2019-02-04 18:43:42 +01:00 committed by GitHub
commit 3b1da3758d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
View File

@ -49,7 +49,7 @@ export default class SelectOptionGroup extends PureComponent<ExtendedGroupProps,
return (
<div className="gf-form-select-box__option-group">
<div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
<span className="flex-grow">{label}</span>
<span className="flex-grow-1">{label}</span>
<i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
</div>
{expanded && children}

2
public/app/features/dashboard/panel_editor/QueriesTab.tsx
View File

@ -133,7 +133,7 @@ export class QueriesTab extends PureComponent<Props, State> {
return (
<>
<DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />
<div className="flex-grow" />
<div className="flex-grow-1" />
{!isAddingMixed && (
<button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
Add Query

4
public/app/features/explore/QueryRow.tsx
View File

@ -111,7 +111,7 @@ export class QueryRow extends PureComponent<QueryRowProps> {
<div className="query-row-status">
<QueryTransactionStatus transactions={transactions} />
</div>
<div className="query-row-field">
<div className="query-row-field flex-shrink-1">
{QueryField ? (
<QueryField
datasource={datasourceInstance}
@ -135,7 +135,7 @@ export class QueryRow extends PureComponent<QueryRowProps> {
/>
)}
</div>
<div className="gf-form-inline">
<div className="gf-form-inline flex-shrink-0">
<div className="gf-form">
<button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
<i className="fa fa-times" />

6
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
View File

@ -249,15 +249,15 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
return (
<>
<div className="gf-form-inline">
<div className="gf-form">
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form flex-shrink-0">
<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">
<div className="gf-form gf-form--grow flex-shrink-1">
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}

4
public/sass/components/_gf-form.scss
View File

@ -84,6 +84,10 @@ $input-border: 1px solid $input-border-color;
.gf-form + .gf-form {
margin-left: $gf-form-margin;
}
&--nowrap {
flex-wrap: nowrap;
}
}
.gf-form-button-row {

10
public/sass/utils/_utils.scss
View File

@ -83,10 +83,18 @@ button.close {
position: absolute;
}
.flex-grow {
.flex-grow-1 {
flex-grow: 1;
}
.flex-shrink-1 {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.center-vh {
display: flex;
align-items: center;