[Exploratory View] Polish design and layout fixes (elastic#98123)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
stephmilovic · Apr 28, 2021 · 5023dce · 5023dce
1 parent d310633
commit 5023dce
Show file tree

Hide file tree

Showing 56 changed files with 705 additions and 454 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -88,17 +88,20 @@ export function PageLoadDistribution() {
   const exploratoryViewLink = createExploratoryViewUrl(
     {
       [`${serviceName}-page-views`]: {
+        dataType: 'ux',
         reportType: 'pld',
         time: { from: rangeFrom!, to: rangeTo! },
         reportDefinitions: {
-          'service.name': serviceName?.[0] as string,
+          'service.name': serviceName as string[],
         },
         ...(breakdown ? { breakdown: breakdown.fieldName } : {}),
       },
     },
     http?.basePath.get()
   );
 
+  const showAnalyzeButton = false;
+
   return (
     <div data-cy="pageLoadDist">
       <EuiFlexGroup responsive={false}>
@@ -118,18 +121,20 @@ export function PageLoadDistribution() {
             dataTestSubj={'pldBreakdownFilter'}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            size="s"
-            isDisabled={!serviceName?.[0]}
-            href={exploratoryViewLink}
-          >
-            <FormattedMessage
-              id="xpack.apm.csm.pageViews.analyze"
-              defaultMessage="Analyze"
-            />
-          </EuiButton>
-        </EuiFlexItem>
+        {showAnalyzeButton && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              size="s"
+              isDisabled={!serviceName?.[0]}
+              href={exploratoryViewLink}
+            >
+              <FormattedMessage
+                id="xpack.apm.csm.pageViews.analyze"
+                defaultMessage="Analyze"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <PageLoadDistChart

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -63,17 +63,20 @@ export function PageViewsTrend() {
   const exploratoryViewLink = createExploratoryViewUrl(
     {
       [`${serviceName}-page-views`]: {
+        dataType: 'ux',
         reportType: 'kpi',
         time: { from: rangeFrom!, to: rangeTo! },
         reportDefinitions: {
-          'service.name': serviceName?.[0] as string,
+          'service.name': serviceName as string[],
         },
         ...(breakdown ? { breakdown: breakdown.fieldName } : {}),
       },
     },
     http?.basePath.get()
   );
 
+  const showAnalyzeButton = false;
+
   return (
     <div>
       <EuiFlexGroup responsive={false}>
@@ -89,18 +92,20 @@ export function PageViewsTrend() {
             dataTestSubj={'pvBreakdownFilter'}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ width: 170 }}>
-          <EuiButton
-            size="s"
-            isDisabled={!serviceName?.[0]}
-            href={exploratoryViewLink}
-          >
-            <FormattedMessage
-              id="xpack.apm.csm.pageViews.analyze"
-              defaultMessage="Analyze"
-            />
-          </EuiButton>
-        </EuiFlexItem>
+        {showAnalyzeButton && (
+          <EuiFlexItem grow={false} style={{ width: 170 }}>
+            <EuiButton
+              size="s"
+              isDisabled={!serviceName?.[0]}
+              href={exploratoryViewLink}
+            >
+              <FormattedMessage
+                id="xpack.apm.csm.pageViews.analyze"
+                defaultMessage="Analyze"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <PageViewsChart data={data} loading={status !== 'success'} />

diff --git a/x-pack/plugins/observability/public/components/app/layout/with_header.tsx b/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
@@ -16,7 +16,9 @@ const Page = styled(EuiPage)<EuiPageProps>`
 
 const Container = styled.div<{ color?: string }>`
   overflow-y: hidden;
-  min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize});
+  min-height: calc(
+    100vh - ${(props) => props.theme.eui.euiHeaderHeight + props.theme.eui.euiHeaderHeight}
+  );
   background: ${(props) => props.color};
 `;
 

diff --git a/...plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx b/...plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx
@@ -6,18 +6,40 @@
  */
 
 import React from 'react';
-import { EuiImage, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
-import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
-import { INITIATING_VIEW } from '../series_builder/series_builder';
+import { i18n } from '@kbn/i18n';
+import { LOADING_VIEW } from '../series_builder/series_builder';
+import { SeriesUrl } from '../types';
 
-export function EmptyView({ loading }: { loading: boolean }) {
-  const {
-    services: { http },
-  } = useKibana();
+export function EmptyView({
+  loading,
+  height,
+  series,
+}: {
+  loading: boolean;
+  height: string;
+  series: SeriesUrl;
+}) {
+  const { dataType, reportType, reportDefinitions } = series ?? {};
+
+  let emptyMessage = EMPTY_LABEL;
+
+  if (dataType) {
+    if (reportType) {
+      if (isEmpty(reportDefinitions)) {
+        emptyMessage = CHOOSE_REPORT_DEFINITION;
+      }
+    } else {
+      emptyMessage = SELECT_REPORT_TYPE_BELOW;
+    }
+  } else {
+    emptyMessage = SELECTED_DATA_TYPE_FOR_REPORT;
+  }
 
   return (
-    <Wrapper>
+    <Wrapper height={height}>
       {loading && (
         <EuiProgress
           size="xs"
@@ -29,21 +51,44 @@ export function EmptyView({ loading }: { loading: boolean }) {
         />
       )}
       <EuiSpacer />
-      <ImageWrap
-        alt="Visulization"
-        url={http!.basePath.prepend(`/plugins/observability/assets/kibana_dashboard_light.svg`)}
-      />
-      <EuiText>{INITIATING_VIEW}</EuiText>
+      <FlexGroup justifyContent="center" alignItems="center">
+        <EuiFlexItem>
+          <EuiText>{loading ? LOADING_VIEW : emptyMessage}</EuiText>
+        </EuiFlexItem>
+      </FlexGroup>
     </Wrapper>
   );
 }
 
-const ImageWrap = styled(EuiImage)`
-  opacity: 0.4;
-`;
-
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ height: string }>`
   text-align: center;
-  height: 550px;
+  height: ${(props) => props.height};
   position: relative;
 `;
+
+const FlexGroup = styled(EuiFlexGroup)`
+  height: 100%;
+`;
+
+export const EMPTY_LABEL = i18n.translate('xpack.observability.expView.seriesBuilder.emptyview', {
+  defaultMessage: 'Nothing to display.',
+});
+
+export const CHOOSE_REPORT_DEFINITION = i18n.translate(
+  'xpack.observability.expView.seriesBuilder.emptyReportDefinition',
+  {
+    defaultMessage: 'Please choose a report definition below to visualize.',
+  }
+);
+
+export const SELECT_REPORT_TYPE_BELOW = i18n.translate(
+  'xpack.observability.expView.seriesBuilder.selectReportType.empty',
+  {
+    defaultMessage: 'Please Select a report type below to define visualization.',
+  }
+);
+
+const SELECTED_DATA_TYPE_FOR_REPORT = i18n.translate(
+  'xpack.observability.expView.reportType.selectDataType',
+  { defaultMessage: 'Please Select a data type below to start building a series.' }
+);
diff --git a/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts b/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts
@@ -34,7 +34,7 @@ export const FieldLabels: Record<string, string> = {
   'monitor.name': 'Monitor name',
   'monitor.type': 'Monitor Type',
   'url.port': 'Port',
-  'url.full': 'Url',
+  'url.full': 'URL',
   tags: 'Tags',
 
   // custom

diff --git a/...ility/public/components/shared/exploratory_view/configurations/constants/url_constants.ts b/...ility/public/components/shared/exploratory_view/configurations/constants/url_constants.ts
@@ -6,6 +6,7 @@
  */
 
 export enum URL_KEYS {
+  DATA_TYPE = 'dt',
   OPERATION_TYPE = 'op',
   REPORT_TYPE = 'rt',
   SERIES_TYPE = 'st',

diff --git a/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts b/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts
@@ -31,7 +31,7 @@ export const getDefaultConfigs = ({ reportType, seriesId, indexPattern }: Props)
     case 'kpi-trends':
       return getKPITrendsLensConfig({ seriesId, indexPattern });
     case 'uptime-duration':
-      return getMonitorDurationConfig({ seriesId });
+      return getMonitorDurationConfig({ seriesId, indexPattern });
     case 'uptime-pings':
       return getMonitorPingsConfig({ seriesId, indexPattern });
     case 'service-latency':

diff --git a/...vability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts b/...vability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts
@@ -79,7 +79,7 @@ describe('Lens Attribute', () => {
 
   it('should return expected field type for custom field with passed value', function () {
     lnsAttr = new LensAttributes(mockIndexPattern, reportViewConfig, 'line', [], 'count', {
-      'performance.metric': LCP_FIELD,
+      'performance.metric': [LCP_FIELD],
     });
 
     expect(JSON.stringify(lnsAttr.getFieldMeta('performance.metric'))).toEqual(

diff --git a/...observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/...observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts
@@ -31,7 +31,7 @@ import {
   IndexPattern,
 } from '../../../../../../../../src/plugins/data/common';
 import { FieldLabels } from './constants';
-import { DataSeries, UrlFilter } from '../types';
+import { DataSeries, UrlFilter, URLReportDefinition } from '../types';
 
 function getLayerReferenceName(layerId: string) {
   return `indexpattern-datasource-layer-${layerId}`;
@@ -49,7 +49,7 @@ function buildNumberColumn(sourceField: string) {
 export const parseCustomFieldName = (
   sourceField: string,
   reportViewConfig: DataSeries,
-  selectedDefinitions: Record<string, string>
+  selectedDefinitions: URLReportDefinition
 ) => {
   let fieldName = sourceField;
   let columnType;
@@ -60,7 +60,7 @@ export const parseCustomFieldName = (
 
   if (customField) {
     if (selectedDefinitions[fieldName]) {
-      fieldName = selectedDefinitions[fieldName];
+      fieldName = selectedDefinitions[fieldName][0];
       if (customField?.options)
         columnType = customField?.options?.find(({ field }) => field === fieldName)?.columnType;
     } else if (customField.defaultValue) {
@@ -81,15 +81,15 @@ export class LensAttributes {
   filters: UrlFilter[];
   seriesType: SeriesType;
   reportViewConfig: DataSeries;
-  reportDefinitions: Record<string, string>;
+  reportDefinitions: URLReportDefinition;
 
   constructor(
     indexPattern: IndexPattern,
     reportViewConfig: DataSeries,
     seriesType?: SeriesType,
     filters?: UrlFilter[],
     operationType?: OperationType,
-    reportDefinitions?: Record<string, string>
+    reportDefinitions?: URLReportDefinition
   ) {
     this.indexPattern = indexPattern;
     this.layers = {};

diff --git a/...c/components/shared/exploratory_view/configurations/synthetics/monitor_duration_config.ts b/...c/components/shared/exploratory_view/configurations/synthetics/monitor_duration_config.ts
@@ -5,14 +5,11 @@
  * 2.0.
  */
 
-import { DataSeries } from '../../types';
+import { ConfigProps, DataSeries } from '../../types';
 import { FieldLabels } from '../constants';
+import { buildExistsFilter } from '../utils';
 
-interface Props {
-  seriesId: string;
-}
-
-export function getMonitorDurationConfig({ seriesId }: Props): DataSeries {
+export function getMonitorDurationConfig({ seriesId, indexPattern }: ConfigProps): DataSeries {
   return {
     id: seriesId,
     reportType: 'uptime-duration',
@@ -29,7 +26,7 @@ export function getMonitorDurationConfig({ seriesId }: Props): DataSeries {
       },
     ],
     hasOperationType: true,
-    defaultFilters: ['monitor.type', 'observer.geo.name', 'tags', 'monitor.name', 'monitor.id'],
+    defaultFilters: ['monitor.type', 'observer.geo.name', 'tags'],
     breakdowns: [
       'observer.geo.name',
       'monitor.name',
@@ -38,11 +35,8 @@ export function getMonitorDurationConfig({ seriesId }: Props): DataSeries {
       'tags',
       'url.port',
     ],
-    filters: [],
+    filters: [...buildExistsFilter('summary.up', indexPattern)],
     reportDefinitions: [
-      {
-        field: 'monitor.id',
-      },
       {
         field: 'monitor.name',
       },

diff --git a/...blic/components/shared/exploratory_view/configurations/synthetics/monitor_pings_config.ts b/...blic/components/shared/exploratory_view/configurations/synthetics/monitor_pings_config.ts
@@ -7,8 +7,9 @@
 
 import { ConfigProps, DataSeries } from '../../types';
 import { FieldLabels } from '../constants';
+import { buildExistsFilter } from '../utils';
 
-export function getMonitorPingsConfig({ seriesId }: ConfigProps): DataSeries {
+export function getMonitorPingsConfig({ seriesId, indexPattern }: ConfigProps): DataSeries {
   return {
     id: seriesId,
     reportType: 'uptime-pings',
@@ -31,17 +32,14 @@ export function getMonitorPingsConfig({ seriesId }: ConfigProps): DataSeries {
     ],
     yTitle: 'Pings',
     hasOperationType: false,
-    defaultFilters: ['observer.geo.name', 'monitor.type', 'monitor.name', 'monitor.id'],
+    defaultFilters: ['observer.geo.name', 'monitor.type', 'tags'],
     breakdowns: ['observer.geo.name', 'monitor.type'],
-    filters: [],
+    filters: [...buildExistsFilter('summary.up', indexPattern)],
     palette: { type: 'palette', name: 'status' },
     reportDefinitions: [
       {
         field: 'monitor.name',
       },
-      {
-        field: 'monitor.id',
-      },
       {
         field: 'url.full',
       },