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

Loki: Refactor query editor so query field can be used independently (#33276)

Browse Source 
* Refactor Loki so LokiQueryField can be used independently

* Refactor PromQueryEditor
This commit is contained in:
Ivana Huckova
2021-04-23 10:08:23 +02:00
committed by GitHub
parent c809d63065
commit c32c682f81
9 changed files with 590 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
View File

@@ -1,197 +1,197 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render PromQueryEditor with basic options should render 1`] = `
<div>
<PromQueryField
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
}
}
history={Array []}
onChange={[Function]}
onRunQuery={[Function]}
query={
Object {
"expr": "",
"refId": "A",
}
}
/>
<div
className="gf-form-inline"
>
<PromQueryField
ExtraFieldElement={
<div
className="gf-form"
>
<FormLabel
tooltip="Controls the name of the time series, using name or pattern. For example
{{hostname}} will be replaced with label value for the label hostname."
width={7}
>
Legend
</FormLabel>
<input
className="gf-form-input"
onBlur={[Function]}
onChange={[Function]}
placeholder="legend format"
type="text"
value=""
/>
</div>
<div
className="gf-form"
>
<FormLabel
tooltip={
<React.Fragment>
An additional lower limit for the step parameter of the Prometheus query and for the
<code>
$__interval
</code>
and
<code>
$__rate_interval
</code>
variables. The limit is absolute and not modified by the "Resolution" setting.
</React.Fragment>
}
width={7}
>
Min step
</FormLabel>
<input
className="gf-form-input width-8"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
<div
className="gf-form"
className="gf-form-inline"
>
<div
className="gf-form-label"
className="gf-form"
>
Resolution
<FormLabel
tooltip="Controls the name of the time series, using name or pattern. For example
{{hostname}} will be replaced with label value for the label hostname."
width={7}
>
Legend
</FormLabel>
<input
className="gf-form-input"
onBlur={[Function]}
onChange={[Function]}
placeholder="legend format"
type="text"
value=""
/>
</div>
<Select
isSearchable={false}
onChange={[Function]}
options={
Array [
<div
className="gf-form"
>
<FormLabel
tooltip={
<React.Fragment>
An additional lower limit for the step parameter of the Prometheus query and for the
<code>
$__interval
</code>
and
<code>
$__rate_interval
</code>
variables. The limit is absolute and not modified by the "Resolution" setting.
</React.Fragment>
}
width={7}
>
Min step
</FormLabel>
<input
className="gf-form-input width-8"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
<div
className="gf-form"
>
<div
className="gf-form-label"
>
Resolution
</div>
<Select
isSearchable={false}
onChange={[Function]}
options={
Array [
Object {
"label": "1/1",
"value": 1,
},
Object {
"label": "1/2",
"value": 2,
},
Object {
"label": "1/3",
"value": 3,
},
Object {
"label": "1/4",
"value": 4,
},
Object {
"label": "1/5",
"value": 5,
},
Object {
"label": "1/10",
"value": 10,
},
]
}
value={
Object {
"label": "1/1",
"value": 1,
},
Object {
"label": "1/2",
"value": 2,
},
Object {
"label": "1/3",
"value": 3,
},
Object {
"label": "1/4",
"value": 4,
},
Object {
"label": "1/5",
"value": 5,
},
Object {
"label": "1/10",
"value": 10,
},
]
}
value={
Object {
"label": "1/1",
"value": 1,
}
}
/>
</div>
<div
className="gf-form"
>
<div
className="gf-form-label width-7"
>
Format
</div>
<Select
isSearchable={false}
onChange={[Function]}
options={
Array [
Object {
"label": "Time series",
"value": "time_series",
},
Object {
"label": "Table",
"value": "table",
},
Object {
"label": "Heatmap",
"value": "heatmap",
},
]
}
value={
Object {
"label": "Time series",
"value": "time_series",
}
}
width={16}
/>
<Switch
checked={false}
label="Instant"
onChange={[Function]}
/>
<FormLabel
tooltip="Link to Graph in Prometheus"
width={10}
>
<Memo(PromLink)
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
}
}
query={
Object {
"exemplar": true,
"expr": "",
"interval": "",
"legendFormat": "",
"refId": "A",
}
}
/>
</FormLabel>
</div>
<PromExemplarField
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
</div>
<div
className="gf-form"
>
<div
className="gf-form-label width-7"
>
Format
</div>
<Select
isSearchable={false}
onChange={[Function]}
options={
Array [
Object {
"label": "Time series",
"value": "time_series",
},
Object {
"label": "Table",
"value": "table",
},
Object {
"label": "Heatmap",
"value": "heatmap",
},
]
}
value={
Object {
"label": "Time series",
"value": "time_series",
}
}
width={16}
/>
<Switch
checked={false}
label="Instant"
onChange={[Function]}
/>
<FormLabel
tooltip="Link to Graph in Prometheus"
width={10}
>
<Memo(PromLink)
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
}
}
query={
Object {
"exemplar": true,
"expr": "",
"interval": "",
"legendFormat": "",
"refId": "A",
}
}
/>
</FormLabel>
</div>
<PromExemplarField
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
}
}
}
isEnabled={true}
onChange={[Function]}
/>
</div>
</div>
isEnabled={true}
onChange={[Function]}
/>
</div>
}
datasource={
Object {
"createQuery": [MockFunction],
"getPrometheusTime": [MockFunction],
}
}
history={Array []}
onChange={[Function]}
onRunQuery={[Function]}
query={
Object {
"expr": "",
"refId": "A",
}
}
/>
`;