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

Use Stack from experimental instead of css styles for flex containers (#59201)

Browse Source
This commit is contained in:
Sonia Aguilar 2022-11-23 15:43:38 +01:00 committed by GitHub
parent c9286ff794
commit 980a2cb949
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
View File

@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
import { RegisterOptions, useFormContext } from 'react-hook-form'; import { RegisterOptions, useFormContext } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { Button, Card, Field, InlineLabel, Input, InputControl, useStyles2 } from '@grafana/ui'; import { Button, Card, Field, InlineLabel, Input, InputControl, useStyles2 } from '@grafana/ui';
import { RulerRuleDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto'; import { RulerRuleDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
@ -132,7 +133,7 @@ function FolderGroupAndEvaluationInterval({
<Card className={styles.cardContainer}> <Card className={styles.cardContainer}>
<Card.Heading>Evaluation behavior</Card.Heading> <Card.Heading>Evaluation behavior</Card.Heading>
<Card.Meta> <Card.Meta>
<div className={styles.evaluationDescription}> <Stack direction="column">
<div className={styles.evaluateLabel}> <div className={styles.evaluateLabel}>
{`Alert rules in the `} <span className={styles.bold}>{group}</span> group are evaluated every{' '} {`Alert rules in the `} <span className={styles.bold}>{group}</span> group are evaluated every{' '}
<span className={styles.bold}>{evaluateEvery}</span>. <span className={styles.bold}>{evaluateEvery}</span>.
@ -145,10 +146,10 @@ function FolderGroupAndEvaluationInterval({
</div> </div>
)} )}
<br /> <br />
</div> </Stack>
</Card.Meta> </Card.Meta>
<Card.Actions> <Card.Actions>
<div className={styles.editGroup}> <Stack direction="row" justify-content="right" align-items="center">
{isNewGroup && ( {isNewGroup && (
<div className={styles.warningMessage}> <div className={styles.warningMessage}>
{`To edit the evaluation group interval, save the alert rule.`} {`To edit the evaluation group interval, save the alert rule.`}
@ -163,7 +164,7 @@ function FolderGroupAndEvaluationInterval({
> >
<span>{'Edit evaluation group'}</span> <span>{'Edit evaluation group'}</span>
</Button> </Button>
</div> </Stack>
</Card.Actions> </Card.Actions>
</Card> </Card>
)} )}
@ -181,7 +182,7 @@ function ForInput({ evaluateEvery }: { evaluateEvery: string }) {
const evaluateForId = 'eval-for-input'; const evaluateForId = 'eval-for-input';
return ( return (
<div className={styles.flexRow}> <Stack direction="row" justify-content="flex-start" align-items="flex-start">
<InlineLabel <InlineLabel
htmlFor={evaluateForId} htmlFor={evaluateForId}
width={7} width={7}
@ -197,7 +198,7 @@ function ForInput({ evaluateEvery }: { evaluateEvery: string }) {
> >
<Input id={evaluateForId} width={8} {...register('evaluateFor', forValidationOptions(evaluateEvery))} /> <Input id={evaluateForId} width={8} {...register('evaluateFor', forValidationOptions(evaluateEvery))} />
</Field> </Field>
</div> </Stack>
); );
} }
@ -216,14 +217,14 @@ export function GrafanaEvaluationBehavior({
return ( return (
// TODO remove "and alert condition" for recording rules // TODO remove "and alert condition" for recording rules
<RuleEditorSection stepNo={3} title="Alert evaluation behavior"> <RuleEditorSection stepNo={3} title="Alert evaluation behavior">
<div className={styles.flexColumn}> <Stack direction="column" justify-content="flex-start" align-items="flex-start">
<FolderGroupAndEvaluationInterval <FolderGroupAndEvaluationInterval
initialFolder={initialFolder} initialFolder={initialFolder}
setEvaluateEvery={setEvaluateEvery} setEvaluateEvery={setEvaluateEvery}
evaluateEvery={evaluateEvery} evaluateEvery={evaluateEvery}
/> />
<ForInput evaluateEvery={evaluateEvery} /> <ForInput evaluateEvery={evaluateEvery} />
</div> </Stack>
<CollapseToggle <CollapseToggle
isCollapsed={!showErrorHandling} isCollapsed={!showErrorHandling}
onToggle={(collapsed) => setShowErrorHandling(!collapsed)} onToggle={(collapsed) => setShowErrorHandling(!collapsed)}
@ -269,21 +270,9 @@ export function GrafanaEvaluationBehavior({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
flexRow: css`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
`,
inlineField: css` inlineField: css`
margin-bottom: 0; margin-bottom: 0;
`, `,
flexColumn: css`
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
`,
collapseToggle: css` collapseToggle: css`
margin: ${theme.spacing(2, 0, 2, -1)}; margin: ${theme.spacing(2, 0, 2, -1)};
`, `,
@ -305,16 +294,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
warningMessage: css` warningMessage: css`
color: ${theme.colors.warning.text}; color: ${theme.colors.warning.text};
`, `,
editGroup: css`
display: flex;
align-items: center;
justify-content: right;
`,
bold: css` bold: css`
font-weight: bold; font-weight: bold;
`, `,
evaluationDescription: css`
display: flex;
flex-direction: column;
`,
}); });