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

Alerting: Fixing threshold handle color (#41813)

Browse Source 
* Alerting: Fixing color of threshold handles

* Use theme colors test
This commit is contained in:
Torkel Ödegaard 2021-11-17 16:15:41 +01:00 committed by GitHub
parent c426f5673b
commit 78888158ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
View File

@ -9,7 +9,7 @@ import {
ThresholdsConfig, ThresholdsConfig,
ThresholdsMode, ThresholdsMode,
} from '@grafana/data'; } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime'; import { config, getDataSourceSrv } from '@grafana/runtime';
import { QueryWrapper } from './QueryWrapper'; import { QueryWrapper } from './QueryWrapper';
import { AlertQuery } from 'app/types/unified-alerting-dto'; import { AlertQuery } from 'app/types/unified-alerting-dto';
import { isExpressionQuery } from 'app/features/expressions/guards'; import { isExpressionQuery } from 'app/features/expressions/guards';
@ -211,7 +211,7 @@ export class QueryRows extends PureComponent<Props, State> {
steps: [ steps: [
{ {
value: -Infinity, value: -Infinity,
color: 'green', color: config.theme2.colors.success.main,
}, },
], ],
}; };
@ -219,7 +219,7 @@ export class QueryRows extends PureComponent<Props, State> {
record[refId].steps.push({ record[refId].steps.push({
value: threshold, value: threshold,
color: 'red', color: config.theme2.colors.error.main,
}); });
}); });
} }

10
public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react'; import React, { useState } from 'react';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Threshold, GrafanaTheme2 } from '@grafana/data'; import { Threshold, GrafanaTheme2 } from '@grafana/data';
import { useStyles2, useTheme2 } from '@grafana/ui'; import { useStyles2, useTheme2 } from '@grafana/ui';
@ -24,10 +24,8 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
const theme = useTheme2(); const theme = useTheme2();
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const [currentValue, setCurrentValue] = useState(step.value); const [currentValue, setCurrentValue] = useState(step.value);
const bgColor = theme.visualization.getColorByName(step.color);
const textColor = useMemo(() => { const textColor = theme.colors.getContrastText(bgColor);
return theme.colors.getContrastText(theme.visualization.getColorByName(step.color));
}, [step.color, theme]);
return ( return (
<Draggable <Draggable
@ -44,7 +42,7 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
> >
<div <div
className={styles.handle} className={styles.handle}
style={{ color: textColor, background: step.color, borderColor: step.color, borderWidth: 0 }} style={{ color: textColor, background: bgColor, borderColor: bgColor, borderWidth: 0 }}
> >
<span className={styles.handleText}>{formatValue(currentValue)}</span> <span className={styles.handleText}>{formatValue(currentValue)}</span>
</div> </div>