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,
ThresholdsMode,
} from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
import { config, getDataSourceSrv } from '@grafana/runtime';
import { QueryWrapper } from './QueryWrapper';
import { AlertQuery } from 'app/types/unified-alerting-dto';
import { isExpressionQuery } from 'app/features/expressions/guards';
@ -211,7 +211,7 @@ export class QueryRows extends PureComponent<Props, State> {
steps: [
{
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({
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 { Threshold, GrafanaTheme2 } from '@grafana/data';
import { useStyles2, useTheme2 } from '@grafana/ui';
@ -24,10 +24,8 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
const theme = useTheme2();
const styles = useStyles2(getStyles);
const [currentValue, setCurrentValue] = useState(step.value);
const textColor = useMemo(() => {
return theme.colors.getContrastText(theme.visualization.getColorByName(step.color));
}, [step.color, theme]);
const bgColor = theme.visualization.getColorByName(step.color);
const textColor = theme.colors.getContrastText(bgColor);
return (
<Draggable
@ -44,7 +42,7 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
>
<div
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>
</div>