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: Fix alert detail layout issue (#53256)

Browse Source
This commit is contained in:
Gilles De Mey
2022-08-08 16:57:34 +02:00
committed by GitHub
parent c2d3b45bf4
commit f0594ebace
2 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
View File

@@ -58,7 +58,7 @@ const AnnotationValue: FC<Props> = ({ annotationKey, value }) => {
export const getStyles = (theme: GrafanaTheme) => ({
well: css`
word-break: break-all;
word-break: break-word;
`,
link: css`
word-break: break-all;

45
public/app/features/alerting/unified/components/Tokenize.tsx
View File

@@ -18,7 +18,6 @@ function Tokenize({ input, delimiter = ['{{', '}}'] }: TokenizerProps) {
const styles = useStyles2(getStyles);
const [open, close] = delimiter;
const normalizedIput = normalizeInput(input);
/**
* This RegExp uses 2 named capture groups, text that comes before the token and the token itself
@@ -28,26 +27,31 @@ function Tokenize({ input, delimiter = ['{{', '}}'] }: TokenizerProps) {
* Some text {{ $labels.foo }}
*/
const regex = new RegExp(`(?<before>.*?)(${open}(?<token>.*?)${close}|$)`, 'gm');
const matches = Array.from(normalizedIput.matchAll(regex));
const lines = input.split('\n');
const output: React.ReactElement[] = [];
matches.forEach((match, index) => {
const before = match.groups?.before;
const token = match.groups?.token?.trim();
lines.forEach((line, index) => {
const matches = Array.from(line.matchAll(regex));
if (before) {
output.push(<span key={`${index}-before`}>{before}</span>);
}
matches.forEach((match, index) => {
const before = match.groups?.before;
const token = match.groups?.token?.trim();
if (token) {
const type = tokenType(token);
const description = type === TokenType.Variable ? token : '';
const tokenContent = `${open} ${token} ${close}`;
if (before) {
output.push(<span key={`${index}-before`}>{before}</span>);
}
output.push(<Token key={`${index}-token`} content={tokenContent} type={type} description={description} />);
}
if (token) {
const type = tokenType(token);
const description = type === TokenType.Variable ? token : '';
const tokenContent = `${open} ${token} ${close}`;
output.push(<Token key={`${index}-token`} content={tokenContent} type={type} description={description} />);
}
});
output.push(<br key={`${index}-newline`} />);
});
return <span className={styles.wrapper}>{output}</span>;
@@ -68,7 +72,6 @@ interface TokenProps {
function Token({ content, description, type }: TokenProps) {
const styles = useStyles2(getStyles);
const varName = content.trim();
const disableCard = Boolean(type) === false;
@@ -83,16 +86,12 @@ function Token({ content, description, type }: TokenProps) {
}
>
<span>
<Badge className={styles.token} text={varName} color={'blue'} />
<Badge className={styles.token} text={content} color={'blue'} />
</span>
</HoverCard>
);
}
function normalizeInput(input: string) {
return input.replace(/\s+/g, ' ').trim();
}
function isVariable(input: string) {
return VARIABLES.some((character) => input.startsWith(character));
}
@@ -122,9 +121,7 @@ function tokenType(input: string) {
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
display: inline-flex;
align-items: center;
white-space: pre;
white-space: pre-wrap;
`,
token: css`
cursor: default;