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: Change styling so query results with no labels are clearer (#94404)

Browse Source
This commit is contained in:
Tom Ratcliffe 2024-10-11 10:54:15 +01:00 committed by GitHub
parent 773030f15c
commit f08de95630
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.betterer.results
View File

@ -1692,10 +1692,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"], [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"], [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"], [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"], [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"]
], ],
"public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx:5381": [ "public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"] [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]

44
public/app/features/alerting/unified/components/expressions/Expression.tsx
View File

@ -4,7 +4,7 @@ import { FC, useCallback, useState } from 'react';
import { useFormContext } from 'react-hook-form'; import { useFormContext } from 'react-hook-form';
import { DataFrame, dateTimeFormat, GrafanaTheme2, isTimeSeriesFrames, LoadingState, PanelData } from '@grafana/data'; import { DataFrame, dateTimeFormat, GrafanaTheme2, isTimeSeriesFrames, LoadingState, PanelData } from '@grafana/data';
import { Alert, AutoSizeInput, Button, clearButtonStyles, IconButton, Stack, useStyles2 } from '@grafana/ui'; import { Alert, AutoSizeInput, Button, clearButtonStyles, IconButton, Stack, Text, useStyles2 } from '@grafana/ui';
import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions'; import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions';
import { Math } from 'app/features/expressions/components/Math'; import { Math } from 'app/features/expressions/components/Math';
import { Reduce } from 'app/features/expressions/components/Reduce'; import { Reduce } from 'app/features/expressions/components/Reduce';
@ -359,6 +359,11 @@ interface FrameProps extends Pick<ExpressionProps, 'isAlertCondition'> {
index: number; index: number;
} }
const OpeningBracket = () => <span>{'{'}</span>;
const ClosingBracket = () => <span>{'}'}</span>;
const Quote = () => <span>{'&quot;'}</span>;
const Equals = () => <span>{'='}</span>;
const FrameRow: FC<FrameProps> = ({ frame, index, isAlertCondition }) => { const FrameRow: FC<FrameProps> = ({ frame, index, isAlertCondition }) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
@ -377,23 +382,26 @@ const FrameRow: FC<FrameProps> = ({ frame, index, isAlertCondition }) => {
<div className={styles.expression.resultsRow}> <div className={styles.expression.resultsRow}>
<Stack direction="row" gap={1} alignItems="center"> <Stack direction="row" gap={1} alignItems="center">
<div className={styles.expression.resultLabel} title={title}> <div className={styles.expression.resultLabel} title={title}>
<span>{hasLabels ? '' : name}</span> <Text variant="code">
{hasLabels && ( {hasLabels ? (
<> <>
<span>{'{'}</span> <OpeningBracket />
{labels.map(([key, value], index) => ( {labels.map(([key, value], index) => (
<span key={uniqueId()}> <Text variant="body" key={uniqueId()}>
<span className={styles.expression.labelKey}>{key}</span> <span className={styles.expression.labelKey}>{key}</span>
<span>=</span> <Equals />
<span>&quot;</span> <Quote />
<span className={styles.expression.labelValue}>{value}</span> <span className={styles.expression.labelValue}>{value}</span>
<span>&quot;</span> <Quote />
{index < labels.length - 1 && <span>, </span>} {index < labels.length - 1 && <span>, </span>}
</span> </Text>
))} ))}
<span>{'}'}</span> <ClosingBracket />
</> </>
)} ) : (
<span className={styles.expression.labelKey}>{title}</span>
)}
</Text>
</div> </div>
<div className={styles.expression.resultValue}>{value}</div> <div className={styles.expression.resultValue}>{value}</div>
{showFiring && <AlertStateTag state={PromAlertingRuleState.Firing} size="sm" />} {showFiring && <AlertStateTag state={PromAlertingRuleState.Firing} size="sm" />}