[7.x] [Metrics UI] Fix alignment and allow clearing metric value (#66589)

x-pack/plugins/infra/common/formatters/snapshot_metric_formats.ts

@@ -70,4 +70,8 @@ export const METRIC_FORMATTERS: MetricFormatters = {
  formatter: InfraFormatterType.number,
  template: '{{value}} seconds',
  },
+ ['rdsLatency']: {
+ formatter: InfraFormatterType.number,
+ template: '{{value}} ms',
+ },
 };

x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx

@@ -185,6 +185,31 @@ export const Expressions: React.FC<Props> = props => {
  [onFilterChange]
  );
 
+ const preFillAlertCriteria = useCallback(() => {
+ const md = alertsContext.metadata;
+ if (md && md.options) {
+ setAlertParams('criteria', [
+ {
+ ...defaultExpression,
+ metric: md.options.metric!.type,
+ } as InventoryMetricConditions,
+ ]);
+ } else {
+ setAlertParams('criteria', [defaultExpression]);
+ }
+ }, [alertsContext.metadata, setAlertParams]);
+
+ const preFillAlertFilter = useCallback(() => {
+ const md = alertsContext.metadata;
+ if (md && md.filter) {
+ setAlertParams('filterQueryText', md.filter);
+ setAlertParams(
+ 'filterQuery',
+ convertKueryToElasticSearchQuery(md.filter, derivedIndexPattern) || ''
+ );
+ }
+ }, [alertsContext.metadata, derivedIndexPattern, setAlertParams]);
+
  useEffect(() => {
  const md = alertsContext.metadata;
  if (!alertParams.nodeType) {
@@ -195,31 +220,19 @@ export const Expressions: React.FC<Props> = props => {
  }
  }
 
- if (!alertParams.criteria) {
- if (md && md.options) {
- setAlertParams('criteria', [
- {
- ...defaultExpression,
- metric: md.options.metric!.type,
- } as InventoryMetricConditions,
- ]);
- } else {
- setAlertParams('criteria', [defaultExpression]);
- }
+ if (alertParams.criteria && alertParams.criteria.length) {
+ setTimeSize(alertParams.criteria[0].timeSize);
+ setTimeUnit(alertParams.criteria[0].timeUnit);
+ } else {
+ preFillAlertCriteria();
  }
 
  if (!alertParams.filterQuery) {
- if (md && md.filter) {
- setAlertParams('filterQueryText', md.filter);
- setAlertParams(
- 'filterQuery',
- convertKueryToElasticSearchQuery(md.filter, derivedIndexPattern) || ''
- );
- }
+ preFillAlertFilter();
  }
 
  if (!alertParams.sourceId) {
- setAlertParams('sourceId', source?.id);
+ setAlertParams('sourceId', source?.id || 'default');
  }
  }, [alertsContext.metadata, derivedIndexPattern, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -235,11 +248,13 @@ export const Expressions: React.FC<Props> = props => {
  </h4>
  </EuiText>
  <StyledExpression>
- <NodeTypeExpression
- options={nodeTypes}
- value={alertParams.nodeType || 'host'}
- onChange={updateNodeType}
- />
+ <StyledExpressionRow>
+ <NodeTypeExpression
+ options={nodeTypes}
+ value={alertParams.nodeType || 'host'}
+ onChange={updateNodeType}
+ />
+ </StyledExpressionRow>
  </StyledExpression>
  <EuiSpacer size={'xs'} />
  {alertParams.criteria &&
@@ -425,11 +440,13 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
  />
  </StyledExpression>
  {metric && (
- <StyledExpression>
- <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
- <div>{metricUnit[metric]?.label || ''}</div>
- </div>
- </StyledExpression>
+ <div
+ style={{
+ alignSelf: 'center',
+ }}
+ >
+ <EuiText size={'s'}>{metricUnit[metric]?.label || ''}</EuiText>
+ </div>
  )}
  </StyledExpressionRow>
  </EuiFlexItem>
@@ -502,4 +519,5 @@ const metricUnit: Record<string, { label: string }> = {
  s3UploadBytes: { label: 'bytes' },
  s3DownloadBytes: { label: 'bytes' },
  sqsOldestMessage: { label: 'seconds' },
+ rdsLatency: { label: 'ms' },
 };

x-pack/plugins/infra/public/components/alerting/inventory/metric.tsx

@@ -24,7 +24,7 @@ interface Props {
  metric?: { value: SnapshotMetricType; text: string };
  metrics: Array<{ value: string; text: string }>;
  errors: IErrorObject;
- onChange: (metric: SnapshotMetricType) => void;
+ onChange: (metric?: SnapshotMetricType) => void;
  popupPosition?:
  | 'upCenter'
  | 'upLeft'
@@ -65,11 +65,11 @@ export const MetricExpression = ({ metric, metrics, errors, onChange, popupPosit
  }
  )}
  value={metric?.text || firstFieldOption.text}
- isActive={aggFieldPopoverOpen || !metric}
+ isActive={Boolean(aggFieldPopoverOpen || (errors.metric && errors.metric.length > 0))}
  onClick={() => {
  setAggFieldPopoverOpen(true);
  }}
- color={metric ? 'secondary' : 'danger'}
+ color={errors.metric?.length ? 'danger' : 'secondary'}
  />
  }
  isOpen={aggFieldPopoverOpen}
@@ -89,16 +89,12 @@ export const MetricExpression = ({ metric, metrics, errors, onChange, popupPosit
  </ClosablePopoverTitle>
  <EuiFlexGroup>
  <EuiFlexItem grow={false} className="actOf__aggFieldContainer">
- <EuiFormRow
- fullWidth
- isInvalid={errors.metric.length > 0 && metric !== undefined}
- error={errors.metric}
- >
+ <EuiFormRow fullWidth isInvalid={errors.metric.length > 0} error={errors.metric}>
  <EuiComboBox
  fullWidth
  singleSelection={{ asPlainText: true }}
  data-test-subj="availablefieldsOptionsComboBox"
- isInvalid={errors.metric.length > 0 && metric !== undefined}
+ isInvalid={errors.metric.length > 0}
  placeholder={firstFieldOption.text}
  options={availablefieldsOptions}
  noSuggestions={!availablefieldsOptions.length}
@@ -110,6 +106,8 @@ export const MetricExpression = ({ metric, metrics, errors, onChange, popupPosit
  if (selectedOptions.length > 0) {
  onChange(selectedOptions[0].value as SnapshotMetricType);
  setAggFieldPopoverOpen(false);
+ } else {
+ onChange();
  }
  }}
  />

x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_inventory_metric_formatter.ts

@@ -71,6 +71,10 @@ const METRIC_FORMATTERS: MetricFormatters = {
  formatter: InfraFormatterType.number,
  template: '{{value}} seconds',
  },
+ ['rdsLatency']: {
+ formatter: InfraFormatterType.number,
+ template: '{{value}} ms',
+ },
 };
 
 export const createInventoryMetricFormatter = (metric: SnapshotMetricInput) => (