breakpoint

elastic · Mar 11, 2021 · 3ed7c82 · 3ed7c82
1 parent 501a166
commit 3ed7c82
Show file tree

Hide file tree

Showing 27 changed files with 705 additions and 113 deletions.
diff --git a/...servability/public/components/shared/exploratory_view/chart_templates/chart_templates.tsx b/...servability/public/components/shared/exploratory_view/chart_templates/chart_templates.tsx
@@ -26,6 +26,8 @@ export function ChartTemplates() {
 
   let flyout;
 
+  const style = { minWidth: 200 };
+
   if (isFlyoutVisible) {
     flyout = (
       <EuiFlyout size="s" onClose={() => setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle">
@@ -37,31 +39,39 @@ export function ChartTemplates() {
         <EuiFlyoutBody>
           <SelectionTabs />
           <EuiSpacer />
-          <EuiFlexGroup>
-            <EuiFlexItem>
+          <EuiFlexGroup wrap>
+            <EuiFlexItem style={style}>
               <EuiCard
                 icon={<EuiIcon size="xxl" type="logoObservability" />}
                 title={`Page load distribution`}
                 description="Example of a card's description. Stick to one or two sentences."
                 href="/app/observability/exploratory-view/page-load-dist"
               />
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem style={style}>
               <EuiCard
                 icon={<EuiIcon size="xxl" type="logoLogging" />}
                 title={`Page views`}
                 description="Example of a card's description. Stick to one or two sentences."
                 href="/app/observability/exploratory-view/page-views"
               />
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem style={style}>
               <EuiCard
                 icon={<EuiIcon size="xxl" type="logoUptime" />}
                 title={`Monitor duration`}
                 description="Uptime monitor duration, slice and dice by location etc"
                 href="/app/observability/exploratory-view/uptime-duration"
               />
             </EuiFlexItem>
+            <EuiFlexItem style={style}>
+              <EuiCard
+                icon={<EuiIcon size="xxl" type="logoUptime" />}
+                title={`APM Service latency`}
+                description="Uptime monitor duration, slice and dice by location etc"
+                href="/app/observability/exploratory-view/service-latency"
+              />
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutBody>
       </EuiFlyout>

diff --git a/...ugins/observability/public/components/shared/exploratory_view/configurations/constants.ts b/...ugins/observability/public/components/shared/exploratory_view/configurations/constants.ts
@@ -13,11 +13,13 @@ export const FieldLabels: Record<string, string> = {
   'client.geo.country_name': 'Location',
   'user_agent.device.name': 'Device',
   'observer.geo.name': 'Observer location',
+  'service.name': 'Service',
 };
 
 export const DataViewLabels: Record<DataViewType, string> = {
   'page-load-dist': 'Page load distribution',
   'page-views': 'Page views',
   'uptime-duration': 'Uptime monitor duration',
   'uptime-pings': 'Uptime pings',
+  'service-latency': 'APM Service latency',
 };
diff --git a/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts b/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts
@@ -9,15 +9,18 @@ import { DataViewType } from '../types';
 import { getPageLoadDistLensConfig } from './page_load_dist_config';
 import { getPageViewLensConfig } from './page_view_config';
 import { getMonitorDurationConfig } from './monitor_duration_config';
+import { getServiceLatencyLensConfig } from './service_latency_config';
 
 export const getDefaultConfigs = ({ dataViewType }: { dataViewType: DataViewType }) => {
   switch (dataViewType) {
     case 'page-load-dist':
-      return getPageLoadDistLensConfig();
+      return getPageLoadDistLensConfig({});
     case 'page-views':
       return getPageViewLensConfig();
     case 'uptime-duration':
       return getMonitorDurationConfig();
+    case 'service-latency':
+      return getServiceLatencyLensConfig();
     default:
       return getPageViewLensConfig();
   }

diff --git a/...observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/...observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts
@@ -171,8 +171,8 @@ export class LensAttributes {
   }
 
   parseFilters() {
-    const defaultFilters = this.dataViewConfig.filters ?? {};
-    const parsedFilters = this.dataViewConfig.filters ? [defaultFilters] : [];
+    const defaultFilters = this.dataViewConfig.filters ?? [];
+    const parsedFilters = this.dataViewConfig.filters ? [...defaultFilters] : [];
 
     this.filters.forEach(({ field, values = [], notValues = [] }) => {
       values?.forEach((value) => {

diff --git a/...ability/public/components/shared/exploratory_view/configurations/page_load_dist_config.ts b/...ability/public/components/shared/exploratory_view/configurations/page_load_dist_config.ts
@@ -7,10 +7,14 @@
 
 import { DataSeries } from '../types';
 
-export function getPageLoadDistLensConfig(): DataSeries {
+interface Props {
+  seriesId: string;
+  serviceName?: string;
+}
+
+export function getPageLoadDistLensConfig({ seriesId, serviceName }: Props): DataSeries {
   return {
-    name: 'elastic.co',
-    id: 'elastic-co',
+    id: seriesId ?? 'unique-key',
     dataViewType: 'page-load-dist',
     defaultSeriesType: 'line',
     indexPattern: 'apm_static_index_pattern_id',
@@ -33,8 +37,9 @@ export function getPageLoadDistLensConfig(): DataSeries {
       'client.geo.country_name',
       'user_agent.device.name',
     ],
-    filters: {
-      query: { match_phrase: { 'transaction.type': 'page-load' } },
-    },
+    filters: [
+      { query: { match_phrase: { 'transaction.type': 'page-load' } } },
+      ...(serviceName ? [{ query: { match_phrase: { 'service.type': serviceName } } }] : []),
+    ],
   };
 }
diff --git a/...bility/public/components/shared/exploratory_view/configurations/service_latency_config.ts b/...bility/public/components/shared/exploratory_view/configurations/service_latency_config.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DataSeries } from '../types';
+
+export function getServiceLatencyLensConfig(): DataSeries {
+  return {
+    name: 'elastic.co',
+    id: 'elastic-co',
+    dataViewType: 'service-latency',
+    defaultSeriesType: 'line',
+    indexPattern: 'apm_static_index_pattern_id',
+    seriesTypes: ['line', 'bar'],
+    xAxisColumn: {
+      sourceField: '@timestamp',
+    },
+    yAxisColumn: {
+      operationType: 'avg',
+      sourceField: 'transaction.duration.us',
+      label: 'Latency',
+    },
+    defaultFilters: [
+      'user_agent.name',
+      'user_agent.os.name',
+      'client.geo.country_name',
+      'user_agent.device.name',
+    ],
+    breakdowns: [
+      'user_agent.name',
+      'user_agent.os.name',
+      'client.geo.country_name',
+      'user_agent.device.name',
+    ],
+    filters: {
+      query: { match_phrase: { 'transaction.type': 'request' } },
+    },
+  };
+}
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx
@@ -22,7 +22,6 @@ import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import { ExploratoryViewHeader } from './header';
 import { SeriesEditor } from './series_editor/series_editor';
 import { useUrlStorage } from './hooks/use_url_strorage';
-import { SeriesUrl } from './types';
 import { useLensAttributes } from './hooks/use_lens_attributes';
 import styled from 'styled-components';
 
@@ -31,31 +30,24 @@ export interface Props {
   defaultIndexPattern?: IndexPattern | null;
 }
 
-export const ExploratoryView = ({ seriesId, defaultIndexPattern }: Props) => {
+export const ExploratoryView = ({ defaultIndexPattern }: Props) => {
   const {
     services: { lens },
   } = useKibana<ObservabilityClientPluginsStart>();
 
   const LensComponent = lens.EmbeddableComponent;
 
-  const storage = useUrlStorage();
+  const { firstSeries: seriesId } = useUrlStorage();
 
-  const series = storage.get<SeriesUrl>('elastic-co');
+  const { series } = useUrlStorage(seriesId);
 
   const lensAttributes = useLensAttributes({
-    seriesId: 'elastic-co',
+    seriesId,
   });
 
   return (
     <EuiPage>
       <EuiPageBody style={{ maxWidth: 1600, margin: '0 auto' }}>
-        <EuiPageHeader>
-          <EuiPageHeaderSection>
-            <EuiTitle size="l">
-              <h1>Exploratory view</h1>
-            </EuiTitle>
-          </EuiPageHeaderSection>
-        </EuiPageHeader>
         <EuiPageContent>
           <EuiPageContentBody style={{ maxWidth: 1400, margin: '0 auto' }}>
             {defaultIndexPattern ? (
@@ -70,7 +62,7 @@ export const ExploratoryView = ({ seriesId, defaultIndexPattern }: Props) => {
                       to: 'now',
                     }
                   }
-                  attributes={lensAttributes}
+                  attributes={seriesId ? lensAttributes : undefined}
                 />
                 <SeriesEditor />
               </>

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header.tsx
@@ -29,12 +29,12 @@ export function ExploratoryViewHeader({ lensAttributes }: Props) {
 
   return (
     <EuiFlexGroup justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem>
         <EuiText>
           <h2>{DataViewLabels[dataViewType]}</h2>
         </EuiText>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <ChartTypes />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

diff --git a/...ck/plugins/observability/public/components/shared/exploratory_view/header/chart_types.tsx b/...ck/plugins/observability/public/components/shared/exploratory_view/header/chart_types.tsx
@@ -13,16 +13,15 @@ import { i18n } from '@kbn/i18n';
 import { LensIconChartBar } from '../assets/chart_bar';
 import { LensIconChartBarHorizontal } from '../assets/chart_bar_horizontal';
 import { LensIconChartBarStacked } from '../assets/chart_bar_stacked';
-import { LensIconChartBarPercentage } from '../assets/chart_bar_percentage';
+// import { LensIconChartBarPercentage } from '../assets/chart_bar_percentage';
 import { LensIconChartBarHorizontalStacked } from '../assets/chart_bar_horizontal_stacked';
-import { LensIconChartBarHorizontalPercentage } from '../assets/chart_bar_horizontal_percentage';
+// import { LensIconChartBarHorizontalPercentage } from '../assets/chart_bar_horizontal_percentage';
 import { LensIconChartArea } from '../assets/chart_area';
-import { LensIconChartAreaPercentage } from '../assets/chart_area_percentage';
+// import { LensIconChartAreaPercentage } from '../assets/chart_area_percentage';
 import { LensIconChartLine } from '../assets/chart_line';
 import { LensIconChartAreaStacked } from '../assets/chart_area_stacked';
 import styled from 'styled-components';
 import { useUrlStorage } from '../hooks/use_url_strorage';
-import { SeriesUrl } from '../types';
 
 const ButtonGroup = styled(EuiButtonGroup)`
   &&& {
@@ -33,9 +32,7 @@ const ButtonGroup = styled(EuiButtonGroup)`
 `;
 
 export const ChartTypes = () => {
-  const storage = useUrlStorage();
-
-  const series = storage.get<SeriesUrl>('elastic-co');
+  const { series, setSeries, allSeries } = useUrlStorage();
 
   return (
     <ButtonGroup
@@ -54,7 +51,11 @@ export const ChartTypes = () => {
       }))}
       idSelected={series?.seriesType ?? 'line'}
       onChange={(seriesType: string) => {
-        storage.set('elastic-co', { ...series, seriesType });
+        Object.keys(allSeries).forEach((seriesKey) => {
+          const series = allSeries[seriesKey];
+
+          setSeries(seriesKey, { ...series, seriesType });
+        });
       }}
     />
   );
@@ -96,14 +97,14 @@ export const visualizationTypes: VisualizationType[] = [
     }),
     groupLabel: groupLabelForBar,
   },
-  {
-    id: 'bar_percentage_stacked',
-    icon: LensIconChartBarPercentage,
-    label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', {
-      defaultMessage: 'Bar vertical percentage',
-    }),
-    groupLabel: groupLabelForBar,
-  },
+  // {
+  //   id: 'bar_percentage_stacked',
+  //   icon: LensIconChartBarPercentage,
+  //   label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', {
+  //     defaultMessage: 'Bar vertical percentage',
+  //   }),
+  //   groupLabel: groupLabelForBar,
+  // },
   {
     id: 'bar_horizontal_stacked',
     icon: LensIconChartBarHorizontalStacked,
@@ -115,20 +116,20 @@ export const visualizationTypes: VisualizationType[] = [
     }),
     groupLabel: groupLabelForBar,
   },
-  {
-    id: 'bar_horizontal_percentage_stacked',
-    icon: LensIconChartBarHorizontalPercentage,
-    label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', {
-      defaultMessage: 'H. Percentage bar',
-    }),
-    fullLabel: i18n.translate(
-      'xpack.lens.xyVisualization.stackedPercentageBarHorizontalFullLabel',
-      {
-        defaultMessage: 'Bar horizontal percentage',
-      }
-    ),
-    groupLabel: groupLabelForBar,
-  },
+  // {
+  //   id: 'bar_horizontal_percentage_stacked',
+  //   icon: LensIconChartBarHorizontalPercentage,
+  //   label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', {
+  //     defaultMessage: 'H. Percentage bar',
+  //   }),
+  //   fullLabel: i18n.translate(
+  //     'xpack.lens.xyVisualization.stackedPercentageBarHorizontalFullLabel',
+  //     {
+  //       defaultMessage: 'Bar horizontal percentage',
+  //     }
+  //   ),
+  //   groupLabel: groupLabelForBar,
+  // },
   {
     id: 'area',
     icon: LensIconChartArea,
@@ -145,14 +146,14 @@ export const visualizationTypes: VisualizationType[] = [
     }),
     groupLabel: groupLabelForLineAndArea,
   },
-  {
-    id: 'area_percentage_stacked',
-    icon: LensIconChartAreaPercentage,
-    label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', {
-      defaultMessage: 'Area percentage',
-    }),
-    groupLabel: groupLabelForLineAndArea,
-  },
+  // {
+  //   id: 'area_percentage_stacked',
+  //   icon: LensIconChartAreaPercentage,
+  //   label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', {
+  //     defaultMessage: 'Area percentage',
+  //   }),
+  //   groupLabel: groupLabelForLineAndArea,
+  // },
   {
     id: 'line',
     icon: LensIconChartLine,

diff --git a/...gins/observability/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts b/...gins/observability/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts
@@ -27,9 +27,7 @@ export const useLensAttributes = ({
 
   const { indexPattern: defaultIndexPattern } = useIndexPatternContext(dataViewConfig.indexPattern);
 
-  const storage = useUrlStorage();
-
-  const series = storage.get<SeriesUrl>(seriesId);
+  const { series } = useUrlStorage(seriesId);
 
   const { filters = [] } = series ?? {};