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

CloudMonitoring: Use Field instead of InlineField (#75829)

Browse Source 
* Use Field instead of InlineField

* Prettify
This commit is contained in:
Andreas Christou 2023-10-04 14:45:26 +01:00 committed by GitHub
parent 3ef3dee751
commit d00ea685e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { InlineField, Select } from '@grafana/ui';
import { Field, Select } from '@grafana/ui';
interface VariableQueryFieldProps {
onChange: (value: string) => void;
@ -19,7 +19,7 @@ export const VariableQueryField = ({
allowCustomValue = false,
}: VariableQueryFieldProps) => {
return (
<InlineField label={label} labelWidth={20}>
<Field label={label}>
<Select
width={25}
allowCustomValue={allowCustomValue}
@ -27,6 +27,6 @@ export const VariableQueryField = ({
onChange={({ value }) => onChange(value!)}
options={options}
/>
</InlineField>
</Field>
);
};

14
public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
View File

@ -322,14 +322,12 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
render() {
if (this.state.loading) {
return (
<div className="gf-form max-width-21">
<span className="gf-form-label width-10 query-keyword">Query Type</span>
<div className="gf-form-select-wrapper max-width-12">
<select className="gf-form-input">
<option>Loading...</option>
</select>
</div>
</div>
<VariableQueryField
value={'loading'}
options={[{ value: 'loading', label: 'Loading...' }]}
onChange={(value) => null}
label="Query Type"
/>
);
}

104
public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
View File

@ -2,23 +2,99 @@
exports[`VariableQueryEditor renders correctly 1`] = `
<div
className="gf-form max-width-21"
className="css-1rplq84"
>
<span
className="gf-form-label width-10 query-keyword"
>
Query Type
</span>
<div
className="gf-form-select-wrapper max-width-12"
className="css-l4ykjo-Label"
>
<select
className="gf-form-input"
>
<option>
Loading...
</option>
</select>
<label>
<div
className="css-70qvj9"
>
Query Type
</div>
</label>
</div>
<div>
<div>
<div
className="css-1nmqu8c-input-wrapper css-rmjxhr-SelectContainer"
onKeyDown={[Function]}
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-2-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
className="css-1f43avz-a11yText-A11yText"
/>
<div
className="css-1i88p6p"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="css-1q0c0d5-grafana-select-value-container"
>
<div
className="css-8nwx1l-singleValue css-upz218-SingleValue"
>
Loading...
</div>
<div
className=" css-lq7btu-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded={false}
aria-haspopup={true}
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
className=""
disabled={false}
id="react-select-2-input"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
role="combobox"
spellCheck="false"
style={
{
"background": 0,
"border": 0,
"color": "inherit",
"font": "inherit",
"gridArea": "1 / 2",
"label": "input",
"margin": 0,
"minWidth": "2px",
"opacity": 1,
"outline": 0,
"padding": 0,
"width": "100%",
}
}
tabIndex={0}
type="text"
value=""
/>
</div>
</div>
<div
className="css-zyjsuv-input-suffix"
>
<div
className="css-1j2891d-Icon"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;