InfluxDB: Remove context menu "remove" option from query builder (#77102)

* remove menu item from query builder

* files changed

* file fixed

* error fixed

* unit test fixed
pull/77712/head^2
siddhikhapare 2 years ago committed by GitHub
parent 721988e931
commit 80b9af3c33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 26
      public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx
  2. 14
      public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx

@ -3,7 +3,7 @@ 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 { useTheme2 } from '@grafana/ui';
import { toSelectableValue } from '../utils/toSelectableValue';
import { unwrap } from '../utils/unwrap';
@ -27,31 +27,11 @@ type Props = {
onAddNewPart: (type: string) => void;
};
const renderRemovableNameMenuItems = (onClick: () => void) => {
return (
<MenuGroup label="">
<MenuItem label="remove" onClick={onClick} />
</MenuGroup>
);
};
const noRightMarginPaddingClass = css({
paddingRight: '0',
marginRight: '0',
});
const RemovableName = ({ name, onRemove }: { name: string; onRemove: () => void }) => {
return (
<WithContextMenu renderMenuItems={() => renderRemovableNameMenuItems(onRemove)}>
{({ openMenu }) => (
<button className={cx('gf-form-label', noRightMarginPaddingClass)} onClick={openMenu}>
{name}
</button>
)}
</WithContextMenu>
);
};
type PartProps = {
name: string;
params: PartParams;
@ -79,7 +59,7 @@ const getPartClass = (theme: GrafanaTheme2) => {
);
};
const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => {
const Part = ({ name, params, onChange }: PartProps): JSX.Element => {
const theme = useTheme2();
const partClass = useMemo(() => getPartClass(theme), [theme]);
@ -90,7 +70,7 @@ const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => {
};
return (
<div className={partClass}>
<RemovableName name={name} onRemove={onRemove} />(
<button className={cx('gf-form-label', noRightMarginPaddingClass)}>{name}</button>(
{params.map((p, i) => {
const { value, options } = p;
const isLast = i === params.length - 1;

@ -58,8 +58,8 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
await assertEditor(
query,
'FROM[default][select measurement]WHERE[+]' +
'SELECT[field]([value])[mean]()[+]' +
'GROUP BY[time]([$__interval])[fill]([null])[+]' +
'SELECTfield([value])mean()[+]' +
'GROUP BYtime([$__interval])fill([null])[+]' +
'TIMEZONE[(optional)]ORDER BY TIME[ASC]' +
'LIMIT[(optional)]SLIMIT[(optional)]' +
'FORMAT AS[time_series]ALIAS[Naming pattern]'
@ -75,8 +75,8 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
await assertEditor(
query,
'FROM[default][select measurement]WHERE[+]' +
'SELECT[field]([value])[mean]()[+]' +
'GROUP BY[time]([$__interval])[fill]([null])[+]' +
'SELECTfield([value])mean()[+]' +
'GROUP BYtime([$__interval])fill([null])[+]' +
'TIMEZONE[(optional)]ORDER BY TIME[ASC]' +
'LIMIT[(optional)]SLIMIT[(optional)]' +
'FORMAT AS[table]'
@ -154,9 +154,9 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
await assertEditor(
query,
'FROM[default][cpu]WHERE[cpu][=][cpu1][AND][cpu][<][cpu3][+]' +
'SELECT[field]([usage_idle])[mean]()[+]' +
'[field]([usage_guest])[median]()[holt_winters_with_fit]([10],[2])[+]' +
'GROUP BY[time]([$__interval])[tag]([cpu])[tag]([host])[fill]([null])[+]' +
'SELECTfield([usage_idle])mean()[+]' +
'field([usage_guest])median()holt_winters_with_fit([10],[2])[+]' +
'GROUP BYtime([$__interval])tag([cpu])tag([host])fill([null])[+]' +
'TIMEZONE[UTC]ORDER BY TIME[DESC]' +
'LIMIT[4]SLIMIT[5]' +
'FORMAT AS[logs]ALIAS[all i as]'

Loading…
Cancel
Save