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 { 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 { LokiOperationId } from 'app/plugins/datasource/loki/querybuilder/types';
@ -44,10 +44,15 @@ export function OperationEditor({
flash,
highlight,
}: Props) {
const styles = useStyles2(getStyles);
const def = queryModeller.getOperationDef(operation.id);
const shouldFlash = useFlash(flash);
const isConflicting =
operation.id === LokiOperationId.LabelFilter && isConflictingFilter(operation, query.operations);
const theme = useTheme2();
const styles = getStyles(theme, isConflicting);
if (!def) {
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) => {
if (isDragging) {
return undefined;
@ -243,7 +243,7 @@ function callParamChangedThenOnChange(
}
}
const getStyles = (theme: GrafanaTheme2) => {
const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {
return {
cardWrapper: css({
alignItems: 'stretch',
@ -258,10 +258,9 @@ const getStyles = (theme: GrafanaTheme2) => {
flexDirection: 'column',
cursor: 'grab',
borderRadius: theme.shape.borderRadius(1),
marginBottom: theme.spacing(1),
position: 'relative',
transition: 'all 0.5s ease-in 0s',
height: '100%',
height: isConflicting ? 'auto' : '100%',
}),
cardError: css({
boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,