[Synthetics]Add availability metric to summary page (#135296)

elastic · Jul 12, 2022 · ec64c5d · ec64c5d
1 parent cd8a4ae
commit ec64c5d
Show file tree

Hide file tree

Showing 17 changed files with 6,878 additions and 41 deletions.
diff --git a/x-pack/plugins/observability/e2e/synthetics_runner.ts b/x-pack/plugins/observability/e2e/synthetics_runner.ts
@@ -53,16 +53,20 @@ export class SyntheticsRunner {
   }
 
   async loadTestData(e2eDir: string, dataArchives: string[]) {
-    console.log('Loading esArchiver...');
+    try {
+      console.log('Loading esArchiver...');
 
-    const esArchiver = this.getService('esArchiver');
+      const esArchiver = this.getService('esArchiver');
 
-    const promises = dataArchives.map((archive) => esArchiver.loadIfNeeded(e2eDir + archive));
+      const promises = dataArchives.map((archive) => esArchiver.loadIfNeeded(e2eDir + archive));
 
-    await Promise.all([
-      ...promises,
-      esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/farequote'),
-    ]);
+      await Promise.all([
+        ...promises,
+        esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/farequote'),
+      ]);
+    } catch (e) {
+      console.log(e);
+    }
   }
 
   getKibanaUrl() {

diff --git a/...shared/exploratory_view/configurations/lens_attributes/sample_formula_metric_attribute.ts b/...shared/exploratory_view/configurations/lens_attributes/sample_formula_metric_attribute.ts
@@ -35,13 +35,13 @@ export const sampleMetricFormulaAttribute = {
                 customLabel: true,
                 dataType: 'number',
                 isBucketed: false,
-                label: 'Monitor availability',
+                label: 'Availability',
                 operationType: 'formula',
                 params: {
                   format: {
                     id: 'percent',
                     params: {
-                      decimals: 2,
+                      decimals: 1,
                     },
                   },
                   formula: "1- (count(kql='summary.down > 0') / count())",
@@ -57,7 +57,7 @@ export const sampleMetricFormulaAttribute = {
                   query: 'summary.down > 0',
                 },
                 isBucketed: false,
-                label: 'Part of Monitor availability',
+                label: 'Part of Availability',
                 operationType: 'count',
                 params: {
                   emptyAsNull: false,
@@ -69,7 +69,7 @@ export const sampleMetricFormulaAttribute = {
                 customLabel: true,
                 dataType: 'number',
                 isBucketed: false,
-                label: 'Part of Monitor availability',
+                label: 'Part of Availability',
                 operationType: 'count',
                 params: {
                   emptyAsNull: false,
@@ -81,7 +81,7 @@ export const sampleMetricFormulaAttribute = {
                 customLabel: true,
                 dataType: 'number',
                 isBucketed: false,
-                label: 'Part of Monitor availability',
+                label: 'Part of Availability',
                 operationType: 'math',
                 params: {
                   tinymathAst: {
@@ -148,7 +148,7 @@ export const sampleMetricFormulaAttribute = {
           name: 'custom',
           progression: 'fixed',
           rangeMax: 1,
-          rangeMin: 0.8,
+          rangeMin: 0,
           rangeType: 'number',
           reverse: false,
           steps: 3,
@@ -169,6 +169,8 @@ export const sampleMetricFormulaAttribute = {
         },
         type: 'palette',
       },
+      size: 's',
+      titlePosition: 'bottom',
     },
   },
   title: 'Prefilled from exploratory view app',

diff --git a/...s/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.test.ts b/...s/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.test.ts
@@ -103,6 +103,7 @@ describe('SingleMetricAttributes', () => {
           accessor: 'layer-0-column-1',
           layerId: 'layer0',
           layerType: 'data',
+          size: 's',
         },
       },
       title: 'Prefilled from exploratory view app',
@@ -168,6 +169,7 @@ describe('SingleMetricAttributes', () => {
           accessor: 'layer-0-column-1',
           layerId: 'layer0',
           layerType: 'data',
+          size: 's',
         },
       },
       title: 'Prefilled from exploratory view app',

diff --git a/...onents/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts b/...onents/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
@@ -112,7 +112,7 @@ export class SingleMetricLensAttributes extends LensAttributes {
         format: {
           id: 'percent',
           params: {
-            decimals: 2,
+            decimals: 1,
           },
         },
       },
@@ -159,6 +159,7 @@ export class SingleMetricLensAttributes extends LensAttributes {
       layerId: 'layer0',
       layerType: 'data',
       ...(this.metricStateOptions ?? {}),
+      size: 's',
     };
   }
 

diff --git a/...blic/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts b/...blic/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
@@ -33,7 +33,7 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
       {
         id: 'monitor_availability',
         columnType: FORMULA_COLUMN,
-        label: 'Monitor availability',
+        label: 'Availability',
         formula: "1- (count(kql='summary.down > 0') / count())",
         metricStateOptions: {
           colorMode: 'Labels',
@@ -45,7 +45,7 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
               name: 'custom',
               reverse: false,
               rangeType: 'number',
-              rangeMin: 0.8,
+              rangeMin: 0,
               rangeMax: 1,
               progression: 'fixed',
               stops: [
@@ -62,6 +62,7 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
               maxSteps: 5,
             },
           },
+          titlePosition: 'bottom',
         },
       },
     ],

diff --git a/...plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/...plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@@ -9,9 +9,15 @@ import { Position } from '@elastic/charts';
 import React, { useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
-import { LensEmbeddableInput, LensPublicStart, XYState } from '@kbn/lens-plugin/public';
+import {
+  FormulaPublicApi,
+  LensEmbeddableInput,
+  LensPublicStart,
+  XYState,
+} from '@kbn/lens-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/common';
-import { AllSeries, useTheme } from '../../../..';
+import { SingleMetricLensAttributes } from '../configurations/lens_attributes/single_metric_attributes';
+import { AllSeries, ReportTypes, useTheme } from '../../../..';
 import { LayerConfig, LensAttributes } from '../configurations/lens_attributes';
 import { AppDataType, ReportViewType } from '../types';
 import { getLayerConfigs } from '../hooks/use_lens_attributes';
@@ -44,11 +50,13 @@ export interface ExploratoryEmbeddableProps {
   singleMetricOptions?: SingleMetricOptions;
   title?: string | JSX.Element;
   withActions?: boolean | ActionTypes[];
+  align?: 'left' | 'right' | 'center';
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {
   lens: LensPublicStart;
   indexPatterns: DataViewState;
+  lensFormulaHelper?: FormulaPublicApi;
 }
 
 // eslint-disable-next-line import/no-default-export
@@ -73,6 +81,8 @@ export default function Embeddable({
   singleMetricOptions,
   title,
   withActions = true,
+  lensFormulaHelper,
+  align,
 }: ExploratoryEmbeddableComponentProps) {
   const LensComponent = lens?.EmbeddableComponent;
   const LensSaveModalComponent = lens?.SaveModalComponent;
@@ -95,7 +105,11 @@ export default function Embeddable({
 
   let lensAttributes;
   try {
-    lensAttributes = new LensAttributes(layerConfigs, reportType);
+    if (reportType === ReportTypes.SINGLE_METRIC) {
+      lensAttributes = new SingleMetricLensAttributes(layerConfigs, reportType, lensFormulaHelper!);
+    } else {
+      lensAttributes = new LensAttributes(layerConfigs, reportType, lensFormulaHelper);
+    }
     // eslint-disable-next-line no-empty
   } catch (error) {}
 
@@ -133,7 +147,7 @@ export default function Embeddable({
   }
 
   return (
-    <Wrapper $customHeight={customHeight}>
+    <Wrapper $customHeight={customHeight} align={align}>
       <EuiFlexGroup alignItems="center" gutterSize="none">
         {title && (
           <EuiFlexItem data-test-subj="exploratoryView-title">
@@ -206,6 +220,7 @@ export default function Embeddable({
 
 const Wrapper = styled.div<{
   $customHeight?: string | number;
+  align?: 'left' | 'right' | 'center';
 }>`
   height: 100%;
   &&& {
@@ -225,11 +240,26 @@ const Wrapper = styled.div<{
     .embPanel__optionsMenuPopover {
       visibility: collapse;
     }
+    .expExpressionRenderer__expression {
+      padding-top: 0;
+    }
 
     &&&:hover {
       .embPanel__optionsMenuPopover {
         visibility: visible;
       }
     }
+    .legacyMtrVis > :first-child {
+      justify-content: ${(props) =>
+        props.align === 'left' ? `flex-start;` : props.align === 'right' ? `flex-end;` : 'center;'};
+      .legacyMtrVis__container {
+        padding-top: 4px;
+        padding-left: ${(props) => (props.align === 'left' ? `0` : '16px;')};
+        padding-right: ${(props) => (props.align === 'right' ? `0` : '16px;')};
+      }
+      > :first-child {
+        transform: none !important;
+      }
+    }
   }
 `;
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/index.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/index.tsx
@@ -11,6 +11,7 @@ import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import type { IUiSettingsClient } from '@kbn/core/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { LensPublicStart } from '@kbn/lens-plugin/public';
+import { useFetcher } from '../../../..';
 import type { ExploratoryEmbeddableProps, ExploratoryEmbeddableComponentProps } from './embeddable';
 import { ObservabilityDataViews } from '../../../../utils/observability_data_views';
 import type { DataViewState } from '../hooks/use_app_data_view';
@@ -43,6 +44,10 @@ export function getExploratoryViewEmbeddable(
 
     const isDarkMode = uiSettings?.get('theme:darkMode');
 
+    const { data: lensHelper, loading: lensLoading } = useFetcher(async () => {
+      return lens.stateHelperApi();
+    }, []);
+
     const loadIndexPattern = useCallback(
       async ({ dataType }: { dataType: AppDataType }) => {
         const dataTypesIndexPatterns = props.dataTypesIndexPatterns;
@@ -70,13 +75,18 @@ export function getExploratoryViewEmbeddable(
       }
     }, [series?.dataType, loadIndexPattern]);
 
-    if (Object.keys(indexPatterns).length === 0 || loading) {
+    if (Object.keys(indexPatterns).length === 0 || loading || !lensHelper || lensLoading) {
       return <EuiLoadingSpinner />;
     }
 
     return (
       <EuiThemeProvider darkMode={isDarkMode}>
-        <ExploratoryViewEmbeddable {...props} indexPatterns={indexPatterns} lens={lens} />
+        <ExploratoryViewEmbeddable
+          {...props}
+          indexPatterns={indexPatterns}
+          lens={lens}
+          lensFormulaHelper={lensHelper.formula}
+        />
       </EuiThemeProvider>
     );
   };

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts
@@ -67,7 +67,7 @@ export interface MetricOption {
   timeScale?: string;
   showPercentileAnnotations?: boolean;
   formula?: string;
-  metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette'>;
+  metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette' | 'titlePosition'>;
   palette?: PaletteOutput;
 }
 

diff --git a/x-pack/plugins/synthetics/e2e/fixtures/es_archiver/synthetics_data/data.json.gz b/x-pack/plugins/synthetics/e2e/fixtures/es_archiver/synthetics_data/data.json.gz