IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

InfluxDB: Add delete buttons to measurement, part and tag in query editor (#72825)

Browse Source 
* InfluxDB/QueryEditor: Add delete buttons to measurement, part and tag sections

The diff provides an additional "delete" button to measurement section, part list section and tags section in the influxdb datasource editor. This improves user experience by allowing users to delete measurements, parts and tags directly from the user interface. The commit also slightly refactors the options generation for these sections, removing the "-- remove filter --" option as it becomes redundant with the new delete button.

* InfluxDB/QueryEditor: Replace Button with AccessoryButton

Changed the Button components to AccessoryButton from the '@grafana/experimental' package, used for the delete functionality in data source components for influxdb query editor. The AccessoryButton is more visually consistent with our current Grafana UI aesthetic and provides better user experience. The change was implemented in FromSection.tsx, PartListSection.tsx, and TagsSection.tsx files.

* Update public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

* Update public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

---------

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
This commit is contained in:
Alex Godbehere 2023-08-24 16:19:01 +01:00 committed by GitHub
parent 6d8fc42cdd
commit e17928c194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import { AccessoryButton } from '@grafana/experimental';
import { DEFAULT_POLICY } from '../../../../../types';
import { toSelectableValue } from '../utils/toSelectableValue';
@ -65,6 +67,17 @@ export const FromSection = ({
onChange(policy, v.value);
}}
/>
{measurement && (
<AccessoryButton
style={{ marginRight: '4px' }}
aria-label="remove"
icon="times"
variant="secondary"
onClick={() => {
onChange(policy, undefined);
}}
/>
)}
</>
);
};

33
public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx
View File

@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
import React, { useMemo } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { AccessoryButton } from '@grafana/experimental';
import { MenuGroup, MenuItem, useTheme2, WithContextMenu } from '@grafana/ui';
import { toSelectableValue } from '../utils/toSelectableValue';
@ -125,17 +126,27 @@ export const PartListSection = ({
return (
<>
{parts.map((part, index) => (
<Part
key={index}
name={part.name}
params={part.params}
onRemove={() => {
onRemovePart(index);
}}
onChange={(pars) => {
onChange(index, pars);
}}
/>
<React.Fragment key={index}>
<Part
name={part.name}
params={part.params}
onRemove={() => {
onRemovePart(index);
}}
onChange={(pars) => {
onChange(index, pars);
}}
/>
<AccessoryButton
style={{ marginRight: '4px' }}
aria-label="remove"
icon="times"
variant="secondary"
onClick={() => {
onRemovePart(index);
}}
/>
</React.Fragment>
))}
<AddButton loadOptions={getNewPartOptions} onAdd={onAddNewPart} />
</>

12
public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { AccessoryButton } from '@grafana/experimental';
import { InfluxQueryTag } from '../../../../../types';
import { adjustOperatorIfNeeded, getCondition, getOperator } from '../utils/tagUtils';
@ -56,7 +57,7 @@ const Tag = ({ tag, isFirst, onRemove, onChange, getTagKeyOptions, getTagValueOp
console.error(err);
return [];
})
.then((tags) => [{ label: '-- remove filter --', value: undefined }, ...tags.map(toSelectableValue)]);
.then((tags) => tags.map(toSelectableValue));
};
const getTagValueSegmentOptions = () => {
@ -103,6 +104,15 @@ const Tag = ({ tag, isFirst, onRemove, onChange, getTagKeyOptions, getTagValueOp
onChange({ ...tag, value, operator: adjustOperatorIfNeeded(operator, value) });
}}
/>
<AccessoryButton
style={{ marginRight: '4px' }}
aria-label="remove"
icon="times"
variant="secondary"
onClick={() => {
onRemove();
}}
/>
</div>
);
};