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 />", "6"],
[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 />", "9"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
],
"public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx:5381": [
[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 { 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 { Math } from 'app/features/expressions/components/Math';
import { Reduce } from 'app/features/expressions/components/Reduce';
@ -359,6 +359,11 @@ interface FrameProps extends Pick<ExpressionProps, 'isAlertCondition'> {
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 styles = useStyles2(getStyles);
@ -377,23 +382,26 @@ const FrameRow: FC<FrameProps> = ({ frame, index, isAlertCondition }) => {
<div className={styles.expression.resultsRow}>
<Stack direction="row" gap={1} alignItems="center">
<div className={styles.expression.resultLabel} title={title}>
<span>{hasLabels ? '' : name}</span>
{hasLabels && (
<>
<span>{'{'}</span>
{labels.map(([key, value], index) => (
<span key={uniqueId()}>
<span className={styles.expression.labelKey}>{key}</span>
<span>=</span>
<span>&quot;</span>
<span className={styles.expression.labelValue}>{value}</span>
<span>&quot;</span>
{index < labels.length - 1 && <span>, </span>}
</span>
))}
<span>{'}'}</span>
</>
)}
<Text variant="code">
{hasLabels ? (
<>
<OpeningBracket />
{labels.map(([key, value], index) => (
<Text variant="body" key={uniqueId()}>
<span className={styles.expression.labelKey}>{key}</span>
<Equals />
<Quote />
<span className={styles.expression.labelValue}>{value}</span>
<Quote />
{index < labels.length - 1 && <span>, </span>}
</Text>
))}
<ClosingBracket />
</>
) : (
<span className={styles.expression.labelKey}>{title}</span>
)}
</Text>
</div>
<div className={styles.expression.resultValue}>{value}</div>
{showFiring && <AlertStateTag state={PromAlertingRuleState.Firing} size="sm" />}