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

* Fix alignment and allow clearing metric value * Add rds latency formatter * Simplify css Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · May 14, 2020 · d3206cd · d3206cd
1 parent 2cf2633
commit d3206cd
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 38 deletions.
diff --git a/x-pack/plugins/infra/common/formatters/snapshot_metric_formats.ts b/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',
+  },
 };
diff --git a/x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx b/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' },
 };
diff --git a/x-pack/plugins/infra/public/components/alerting/inventory/metric.tsx b/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();
                   }
                 }}
               />

diff --git a/...lugins/infra/public/pages/metrics/inventory_view/lib/create_inventory_metric_formatter.ts b/...lugins/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) => (