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