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

Select: Make portalling the menu opt-in, but opt-in *everywhere* (#37501)

Browse Source 
* Select: Don't portal by default

* Select: Portal all the Selects

* Fix indendentation in this comment

* Select: Remove @example docs until formatting is correct

* Docs: Add some documentation for the Select changes

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Select/types.ts

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Docs: Variants instead of varients

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>
This commit is contained in:
Ashley Harrison
2021-08-04 15:47:53 +01:00
committed by GitHub
parent a0f94866b4
commit 8aa3845f70
153 changed files with 347 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/FolderFilter/FolderFilter.tsx
View File

@@ -50,6 +50,7 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
</span>
)}
<AsyncMultiSelect
menuShouldPortal
{...selectOptions}
isLoading={loading}
loadOptions={debouncedLoadOptions}

2
public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
View File

@@ -56,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
Clear types
</span>
)}
<MultiSelect {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
<MultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
</div>
);
};

2
public/app/core/components/PermissionList/AddPermission.tsx
View File

@@ -100,6 +100,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
{() => (
<HorizontalGroup>
<Select
menuShouldPortal
isSearchable={false}
value={this.state.type}
options={dashboardAclTargets}
@@ -117,6 +118,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
<span className={styles.label}>Can</span>
<Select
menuShouldPortal
isSearchable={false}
value={this.state.permission}
options={dashboardPermissionLevels}

1
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
View File

@@ -25,6 +25,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
<td>
<div className="gf-form">
<Select
menuShouldPortal
options={dashboardPermissionLevels}
onChange={() => {}}
disabled={true}

1
public/app/core/components/PermissionList/PermissionListItem.tsx
View File

@@ -75,6 +75,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
<td className="query-keyword">Can</td>
<td>
<Select
menuShouldPortal
isSearchable={false}
options={dashboardPermissionLevels}
onChange={this.onPermissionChanged}

1
public/app/core/components/Select/DashboardPicker.tsx
View File

@@ -35,6 +35,7 @@ export const DashboardPicker: FC<Props> = ({ onChange, value, width, isClearable
return (
<AsyncSelect
menuShouldPortal
width={width}
isClearable={isClearable}
defaultOptions={true}

1
public/app/core/components/Select/FolderPicker.tsx
View File

@@ -165,6 +165,7 @@ export class FolderPicker extends PureComponent<Props, State> {
return (
<div aria-label={selectors.components.FolderPicker.container}>
<AsyncSelect
menuShouldPortal
loadingMessage="Loading folders..."
defaultOptions
defaultValue={folder}

1
public/app/core/components/Select/MetricSelect.tsx
View File

@@ -24,6 +24,7 @@ export const MetricSelect: FC<Props> = (props) => {
return (
<Select
menuShouldPortal
className={className}
isMulti={false}
isClearable={false}

1
public/app/core/components/Select/OrgPicker.tsx
View File

@@ -48,6 +48,7 @@ export class OrgPicker extends PureComponent<Props, State> {
return (
<AsyncSelect
menuShouldPortal
className={className}
isLoading={isLoading}
defaultOptions={true}

1
public/app/core/components/Select/SortPicker.tsx
View File

@@ -28,6 +28,7 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder, filter })
const selected = options?.find((opt) => opt.value === value);
return !loading ? (
<Select
menuShouldPortal
key={value}
width={25}
onChange={onChange}

1
public/app/core/components/Select/TeamPicker.tsx
View File

@@ -57,6 +57,7 @@ export class TeamPicker extends Component<Props, State> {
return (
<div className="user-picker" data-testid="teamPicker">
<AsyncSelect
menuShouldPortal
isLoading={isLoading}
defaultOptions={true}
loadOptions={this.debouncedSearch}

1
public/app/core/components/Select/UserPicker.tsx
View File

@@ -65,6 +65,7 @@ export class UserPicker extends Component<Props, State> {
return (
<div className="user-picker" data-testid="userPicker">
<AsyncSelect
menuShouldPortal
isClearable
className={className}
isLoading={isLoading}

1
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
View File

@@ -10,6 +10,7 @@ exports[`FolderPicker should render 1`] = `
defaultValue={null}
loadOptions={[Function]}
loadingMessage="Loading folders..."
menuShouldPortal={true}
onChange={[Function]}
onCreateOption={[Function]}
value={null}

1
public/app/core/components/SharedPreferences/SharedPreferences.tsx
View File

@@ -145,6 +145,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
aria-label="User preferences home dashboard drop down"
>
<Select
menuShouldPortal
value={dashboards.find((dashboard) => dashboard.id === homeDashboardId)}
getOptionValue={(i) => i.id}
getOptionLabel={this.getFullDashName}

2
public/app/core/components/TagFilter/TagFilter.tsx
View File

@@ -107,7 +107,7 @@ export const TagFilter: FC<Props> = ({
Clear tags
</span>
)}
<AsyncMultiSelect {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
<AsyncMultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
</div>
);
};

4
public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
View File

@@ -300,6 +300,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
</div>
<div className="gf-form">
<Select
menuShouldPortal
allowCustomValue={true}
placeholder="Field or number"
options={leftNames}
@@ -308,12 +309,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
onChange={this.onBinaryLeftChanged}
/>
<Select
menuShouldPortal
className="width-8 gf-form-spacing"
options={ops}
value={options.operator ?? ops[0].value}
onChange={this.onBinaryOperationChanged}
/>
<Select
menuShouldPortal
allowCustomValue={true}
placeholder="Field or number"
className="min-width-10"
@@ -341,6 +344,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
<div className="gf-form">
<div className="gf-form-label width-8">Mode</div>
<Select
menuShouldPortal
className="width-18"
options={calculationModes}
value={calculationModes.find((v) => v.value === mode)}

1
public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
View File

@@ -57,6 +57,7 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
<div className="gf-form">
<div className="gf-form-label width-8">Name</div>
<Select
menuShouldPortal
className="width-18"
options={nameModes}
value={nameModes.find((v) => v.value === frameNameMode)}

2
public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
View File

@@ -77,6 +77,7 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
<div className="gf-form gf-form-spacing">
<div className="gf-form-label width-7">Field</div>
<Select
menuShouldPortal
className="min-width-15 max-width-24"
placeholder="Field Name"
options={fieldsAsOptions}
@@ -87,6 +88,7 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
<div className="gf-form gf-form-spacing">
<div className="gf-form-label">Match</div>
<Select
menuShouldPortal
className="width-12"
placeholder="Select test"
options={matcherOptions}

1
public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
View File

@@ -86,6 +86,7 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
<div className={cx('gf-form', styles.cell)}>
<div className={cx('gf-form-spacing', styles.rowSpacing)}>
<Select
menuShouldPortal
className="width-12"
options={options}
value={config?.operation}

1
public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
View File

@@ -42,6 +42,7 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
<div className="gf-form">
<div className="gf-form-label width-8">Value field name</div>
<Select
menuShouldPortal
isClearable={true}
allowCustomValue={false}
placeholder="(Optional) Select label"

1
public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
View File

@@ -64,6 +64,7 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
Mode
</div>
<Select
menuShouldPortal
options={modes}
value={modes.find((v) => v.value === options.mode) || modes[0]}
onChange={onSelectMode}

2
public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
View File

@@ -32,7 +32,7 @@ export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<Series
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Field name</div>
<Select options={fieldNames} value={options.byField} onChange={onSelectField} isClearable />
<Select menuShouldPortal options={fieldNames} value={options.byField} onChange={onSelectField} isClearable />
</div>
</div>
);

1
public/app/core/components/TransformersUI/SortByTransformerEditor.tsx
View File

@@ -28,6 +28,7 @@ export const SortByTransformerEditor: React.FC<TransformerUIProps<SortByTransfor
<InlineFieldRow key={`${s.field}/${index}`}>
<InlineField label="Field" labelWidth={10} grow={true}>
<Select
menuShouldPortal
options={fieldNames}
value={s.field}
placeholder="Select field"

19
public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx
View File

@@ -51,12 +51,12 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
<>
<InlineFieldRow>
<InlineField label="Config query" labelWidth={20}>
<Select onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
<Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Apply to" labelWidth={20}>
<Select onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
<Select menuShouldPortal onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
@@ -91,10 +91,10 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem<Confi
description: configFromDataTransformer.description,
state: PluginState.beta,
help: `
### Use cases
### Use cases
This transformation allow you select one query and from it extract standard options like
**Min**, **Max**, **Unit** and **Thresholds** and apply it to other query results.
This transformation allows you select one query and from it extract standard options such as
**Min**, **Max**, **Unit**, and **Thresholds** and apply them to other query results.
This enables dynamic query driven visualization configuration.
### Options
@@ -130,15 +130,14 @@ Output (Same as Input[0] but now with config on the Value field)
| 1626178119127 | 10 |
| 1626178119129 | 30 |
As you can see each row in the source data becomes a separate field. Each field now also has a max
config option set. Options like min, max, unit and thresholds are all part of field configuration
and if set like this will be used by the visualization instead of any options manually configured
Each row in the source data becomes a separate field. Each field now also has a maximum
configuration option set. Options such as **min**, **max**, **unit**, and **thresholds** are all part of field configuration, and if they are set like this, they will be used by the visualization instead of any options that are manually configured.
in the panel editor options pane.
## Value mappings
You can also transform a query result into value mappings. This is is a bit different as here every
row in the config query result will be used to define a single value mapping row. See example below.
You can also transform a query result into value mappings. This is is a bit different because every
row in the configuration query result is used to define a single value mapping row. See the following example.
Config query result:

1
public/app/core/components/TransformersUI/fieldToConfigMapping/FieldToConfigMappingEditor.tsx
View File

@@ -73,6 +73,7 @@ export function FieldToConfigMappingEditor({ frame, mappings, onChange, withRedu
<td className={styles.labelCell}>{row.fieldName}</td>
<td className={styles.selectCell} data-testid={`${row.fieldName}-config-key`}>
<Select
menuShouldPortal
options={configProps}
value={row.configOption}
placeholder={row.placeholder}

7
public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
View File

@@ -53,6 +53,7 @@ export function PrepareTimeSeriesEditor(props: TransformerUIProps<PrepareTimeSer
<InlineFieldRow>
<InlineField label="Format" labelWidth={12}>
<Select
menuShouldPortal
width={35}
options={formats}
value={formats.find((v) => v.value === options.format) || formats[0]}
@@ -85,9 +86,9 @@ export const prepareTimeseriesTransformerRegistryItem: TransformerRegistryItem<P
name: prepareTimeSeriesTransformer.name,
description: prepareTimeSeriesTransformer.description,
help: `
### Use cases
This will take query results and transform them into a predictable timeseries format.
### Use cases
This takes query results and transforms them into a predictable timeseries format.
This transformer may be especially useful when using old panels that only expect the
many-frame timeseries format.
`,