Skip to content

N
nexpie-grafana-theme
Commit e4832fa1 by Ivana Huckova Committed by GitHub
Options

Explore: Fix very narrow Query fields on mobile (#25148) 

* Fix Loki and Prometheus query fields on mobile devices

* Add min widt to Elasticsearch Query Field

* Remove width for Elastic, works nicely without updating it

* Update public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
parent 3e5d721d
Showing with 30 additions and 15 deletions
public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx
...@@ -17,12 +17,12 @@ export function LokiExploreExtraField(props: LokiExploreExtraFieldProps) { ...@@ -17,12 +17,12 @@ export function LokiExploreExtraField(props: LokiExploreExtraFieldProps) {
const { label, onChangeFunc, onKeyDownFunc, value, type, min } = props; const { label, onChangeFunc, onKeyDownFunc, value, type, min } = props;
return ( return (
<div className="gf-form-inline explore-input--ml"> <div className="gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={6}>{label}</InlineFormLabel> <InlineFormLabel width={5}>{label}</InlineFormLabel>
<input <input
type={type} type={type}
className="gf-form-input width-6" className="gf-form-input width-4"
placeholder={'auto'} placeholder={'auto'}
onChange={onChangeFunc} onChange={onChangeFunc}
onKeyDown={onKeyDownFunc} onKeyDown={onKeyDownFunc}
......
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
...@@ -152,7 +152,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr ...@@ -152,7 +152,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
return ( return (
<> <>
<div className="gf-form-inline gf-form-inline--nowrap flex-grow-1"> <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
<div className="gf-form flex-shrink-0"> <div className="gf-form flex-shrink-0">
<ButtonCascader <ButtonCascader
options={logLabelOptions || []} options={logLabelOptions || []}
...@@ -164,7 +164,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr ...@@ -164,7 +164,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
{chooserText} {chooserText}
</ButtonCascader> </ButtonCascader>
</div> </div>
<div className="gf-form gf-form--grow flex-shrink-1"> <div className="gf-form gf-form--grow flex-shrink-1 min-width-15 explore-input-margin">
<QueryField <QueryField
additionalPlugins={this.plugins} additionalPlugins={this.plugins}
cleanText={cleanText} cleanText={cleanText}
......
public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreExtraField.test.tsx.snap
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
exports[`LokiExploreExtraField should render component 1`] = ` exports[`LokiExploreExtraField should render component 1`] = `
<div <div
className="gf-form-inline explore-input--ml" className="gf-form-inline"
> >
<div <div
className="gf-form" className="gf-form"
> >
<Component <Component
width={6} width={5}
> >
Loki Explore Extra Field Loki Explore Extra Field
</Component> </Component>
<input <input
className="gf-form-input width-6" className="gf-form-input width-4"
min={0} min={0}
onChange={[MockFunction]} onChange={[MockFunction]}
onKeyDown={[MockFunction]} onKeyDown={[MockFunction]}
......
public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
...@@ -17,7 +17,7 @@ export function PromExploreExtraField(props: PromExploreExtraFieldProps) { ...@@ -17,7 +17,7 @@ export function PromExploreExtraField(props: PromExploreExtraFieldProps) {
const { label, onChangeFunc, onKeyDownFunc, value, hasTooltip, tooltipContent } = props; const { label, onChangeFunc, onKeyDownFunc, value, hasTooltip, tooltipContent } = props;
return ( return (
<div className="gf-form-inline explore-input--ml" aria-label="Prometheus extra field"> <div className="gf-form-inline" aria-label="Prometheus extra field">
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={5} tooltip={hasTooltip ? tooltipContent : null}> <InlineFormLabel width={5} tooltip={hasTooltip ? tooltipContent : null}>
{label} {label}
......
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
...@@ -324,13 +324,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF ...@@ -324,13 +324,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
return ( return (
<> <>
<div className="gf-form-inline gf-form-inline--nowrap flex-grow-1"> <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
<div className="gf-form flex-shrink-0"> <div className="gf-form flex-shrink-0">
<ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}> <ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}>
{chooserText} {chooserText}
</ButtonCascader> </ButtonCascader>
</div> </div>
<div className="gf-form gf-form--grow flex-shrink-1"> <div className={'gf-form gf-form--grow flex-shrink-1 min-width-15 explore-input-margin'}>
<QueryField <QueryField
additionalPlugins={this.plugins} additionalPlugins={this.plugins}
cleanText={cleanText} cleanText={cleanText}
......
public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
exports[`PrometheusExploreExtraField should render component 1`] = ` exports[`PrometheusExploreExtraField should render component 1`] = `
<div <div
aria-label="Prometheus extra field" aria-label="Prometheus extra field"
className="gf-form-inline explore-input--ml" className="gf-form-inline"
> >
<div <div
className="gf-form" className="gf-form"
......
public/sass/components/_gf-form.scss
...@@ -87,6 +87,14 @@ $input-border: 1px solid $input-border-color; ...@@ -87,6 +87,14 @@ $input-border: 1px solid $input-border-color;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
&--xs-view-flex-column {
flex-direction: row;
flex-wrap: nowrap;
@include media-breakpoint-down(xs) {
flex-direction: column;
}
}
.select-container { .select-container {
margin-right: $space-xs; margin-right: $space-xs;
} }
......
public/sass/components/_slate_editor.scss
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
font-family: $font-family-monospace; font-family: $font-family-monospace;
height: auto; height: auto;
word-break: break-word; word-break: break-word;
overflow: scroll;
&::placeholder {
overflow: scroll;
}
} }
.slate-query-field__wrapper { .slate-query-field__wrapper {
...@@ -16,7 +20,7 @@ ...@@ -16,7 +20,7 @@
color: $text-color; color: $text-color;
background-color: $input-bg; background-color: $input-bg;
background-image: none; background-image: none;
border: $panel-border; border: $input-border;
border-radius: $border-radius; border-radius: $border-radius;
transition: all 0.3s; transition: all 0.3s;
line-height: $input-line-height; line-height: $input-line-height;
......
public/sass/pages/_explore.scss
...@@ -242,8 +242,8 @@ ...@@ -242,8 +242,8 @@
} }
} }
.explore-input--ml { .explore-input-margin {
margin-left: 4px; margin-right: 4px;
} }
.navbar .elapsed-time { .navbar .elapsed-time {
...@@ -263,6 +263,9 @@ ...@@ -263,6 +263,9 @@
display: flex; display: flex;
position: relative; position: relative;
align-items: flex-start; align-items: flex-start;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
}
& + & { & + & {
margin-top: $space-sm; margin-top: $space-sm;
......
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