1import React from 'react'; 2import { css, cx } from '@emotion/css'; 3import { CombinedRule, RulesSource } from 'app/types/unified-alerting'; 4import { isCloudRulesSource } from '../../utils/datasource'; 5import { DetailsField } from '../DetailsField'; 6import { Expression } from '../Expression'; 7 8type Props = { 9 rule: CombinedRule; 10 rulesSource: RulesSource; 11 annotations: Array<[string, string]>; 12}; 13 14export function RuleDetailsExpression(props: Props): JSX.Element | null { 15 const { annotations, rulesSource, rule } = props; 16 const styles = getStyles(); 17 18 if (!isCloudRulesSource(rulesSource)) { 19 return null; 20 } 21 22 return ( 23 <DetailsField label="Expression" horizontal={true} className={cx({ [styles.exprRow]: !!annotations.length })}> 24 <Expression expression={rule.query} rulesSource={rulesSource} /> 25 </DetailsField> 26 ); 27} 28 29const getStyles = () => ({ 30 exprRow: css` 31 margin-bottom: 46px; 32 `, 33}); 34