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

Prometheus: Fix OperationEditor and mounting of components (#81656)

Browse Source 
* Prometheus: Fix OperationEditor

* Remove redundant import
This commit is contained in:
Ivana Huckova 2024-01-31 17:57:16 +01:00 committed by GitHub
parent cb945aa5df
commit e00aba0ce5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
View File

@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { useEffect, useId, useState } from 'react'; import React, { useEffect, useId, useState } from 'react';
import { Draggable, DraggableProvided } from 'react-beautiful-dnd'; import { Draggable } from 'react-beautiful-dnd';
import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data'; import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
import { Button, Icon, InlineField, Tooltip, useTheme2, Stack } from '@grafana/ui'; import { Button, Icon, InlineField, Tooltip, useTheme2, Stack } from '@grafana/ui';
@ -145,34 +145,6 @@ export function OperationEditor({
return isConflicting ? true : undefined; return isConflicting ? true : undefined;
}; };
// We need to extract this into a component to prevent InlineField passing invalid to div which produces console error
const StyledOperationHeader = ({ provided }: { provided: DraggableProvided }) => (
<div
className={cx(styles.card, (shouldFlash || highlight) && styles.cardHighlight, isConflicting && styles.cardError)}
ref={provided.innerRef}
{...provided.draggableProps}
data-testid={`operations.${index}.wrapper`}
>
<OperationHeader
operation={operation}
dragHandleProps={provided.dragHandleProps}
def={def}
index={index}
onChange={onChange}
onRemove={onRemove}
queryModeller={queryModeller}
/>
<div className={styles.body}>{operationElements}</div>
{restParam}
{index < query.operations.length - 1 && (
<div className={styles.arrow}>
<div className={styles.arrowLine} />
<div className={styles.arrowArrow} />
</div>
)}
</div>
);
return ( return (
<Draggable draggableId={`operation-${index}`} index={index}> <Draggable draggableId={`operation-${index}`} index={index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
@ -181,7 +153,34 @@ export function OperationEditor({
invalid={isInvalid(snapshot.isDragging)} invalid={isInvalid(snapshot.isDragging)}
className={cx(styles.error, styles.cardWrapper)} className={cx(styles.error, styles.cardWrapper)}
> >
<StyledOperationHeader provided={provided} /> <div
className={cx(
styles.card,
(shouldFlash || highlight) && styles.cardHighlight,
isConflicting && styles.cardError
)}
ref={provided.innerRef}
{...provided.draggableProps}
data-testid={`operations.${index}.wrapper`}
>
<OperationHeader
operation={operation}
dragHandleProps={provided.dragHandleProps}
def={def}
index={index}
onChange={onChange}
onRemove={onRemove}
queryModeller={queryModeller}
/>
<div className={styles.body}>{operationElements}</div>
{restParam}
{index < query.operations.length - 1 && (
<div className={styles.arrow}>
<div className={styles.arrowLine} />
<div className={styles.arrowArrow} />
</div>
)}
</div>
</InlineField> </InlineField>
)} )}
</Draggable> </Draggable>