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

Loki: update height of conflicting filters (#65451)

Browse Source 
* fix height of elements

* Update public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx

Co-authored-by: Matias Chomicki <matyax@gmail.com>

* run prittier to pass drone

---------

Co-authored-by: Matias Chomicki <matyax@gmail.com>
This commit is contained in:
Gareth Dawson 2023-03-28 15:32:16 +01:00 committed by GitHub
parent 4ab3bd6f7e
commit 1f77c8c777
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { Draggable } from 'react-beautiful-dnd';
import { DataSourceApi, GrafanaTheme2 } from '@grafana/data'; import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental'; import { Stack } from '@grafana/experimental';
import { Button, Icon, InlineField, Tooltip, useStyles2 } from '@grafana/ui'; import { Button, Icon, InlineField, Tooltip, useTheme2 } from '@grafana/ui';
import { isConflictingFilter } from 'app/plugins/datasource/loki/querybuilder/operationUtils'; import { isConflictingFilter } from 'app/plugins/datasource/loki/querybuilder/operationUtils';
import { LokiOperationId } from 'app/plugins/datasource/loki/querybuilder/types'; import { LokiOperationId } from 'app/plugins/datasource/loki/querybuilder/types';
@ -44,10 +44,15 @@ export function OperationEditor({
flash, flash,
highlight, highlight,
}: Props) { }: Props) {
const styles = useStyles2(getStyles);
const def = queryModeller.getOperationDef(operation.id); const def = queryModeller.getOperationDef(operation.id);
const shouldFlash = useFlash(flash); const shouldFlash = useFlash(flash);
const isConflicting =
operation.id === LokiOperationId.LabelFilter && isConflictingFilter(operation, query.operations);
const theme = useTheme2();
const styles = getStyles(theme, isConflicting);
if (!def) { if (!def) {
return <span>Operation {operation.id} not found</span>; return <span>Operation {operation.id} not found</span>;
} }
@ -128,11 +133,6 @@ export function OperationEditor({
} }
} }
let isConflicting = false;
if (operation.id === LokiOperationId.LabelFilter) {
isConflicting = isConflictingFilter(operation, query.operations);
}
const isInvalid = (isDragging: boolean) => { const isInvalid = (isDragging: boolean) => {
if (isDragging) { if (isDragging) {
return undefined; return undefined;
@ -243,7 +243,7 @@ function callParamChangedThenOnChange(
} }
} }
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {
return { return {
cardWrapper: css({ cardWrapper: css({
alignItems: 'stretch', alignItems: 'stretch',
@ -258,10 +258,9 @@ const getStyles = (theme: GrafanaTheme2) => {
flexDirection: 'column', flexDirection: 'column',
cursor: 'grab', cursor: 'grab',
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.borderRadius(1),
marginBottom: theme.spacing(1),
position: 'relative', position: 'relative',
transition: 'all 0.5s ease-in 0s', transition: 'all 0.5s ease-in 0s',
height: '100%', height: isConflicting ? 'auto' : '100%',
}), }),
cardError: css({ cardError: css({
boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`, boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,