[Exploratory View] Mobile experience (#99565)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Bryce Buchanan <bryce.buchanan@elastic.co> Co-authored-by: Alexander Wert <alexander.wert@elastic.co>
elastic · Jun 18, 2021 · 303806d · 303806d
1 parent cee33b0
commit 303806d
Show file tree

Hide file tree

Showing 41 changed files with 822 additions and 205 deletions.
diff --git a/x-pack/plugins/apm/public/services/rest/apm_observability_overview_fetchers.ts b/x-pack/plugins/apm/public/services/rest/apm_observability_overview_fetchers.ts
@@ -53,10 +53,8 @@ export const fetchObservabilityOverviewPageData = async ({
 };
 
 export async function getHasData() {
-  const res = await callApmApi({
+  return await callApmApi({
     endpoint: 'GET /api/apm/observability_overview/has_data',
     signal: null,
   });
-
-  return res.hasData;
 }
diff --git a/x-pack/plugins/apm/server/lib/observability_overview/has_data.ts b/x-pack/plugins/apm/server/lib/observability_overview/has_data.ts
@@ -29,8 +29,14 @@ export async function getHasData({ setup }: { setup: Setup }) {
       'observability_overview_has_apm_data',
       params
     );
-    return response.hits.total.value > 0;
+    return {
+      hasData: response.hits.total.value > 0,
+      indices: setup.indices,
+    };
   } catch (e) {
-    return false;
+    return {
+      hasData: false,
+      indices: setup.indices,
+    };
   }
 }
diff --git a/x-pack/plugins/apm/server/lib/settings/apm_indices/get_apm_indices.ts b/x-pack/plugins/apm/server/lib/settings/apm_indices/get_apm_indices.ts
@@ -16,21 +16,11 @@ import {
 import { APMConfig } from '../../..';
 import { APMRouteHandlerResources } from '../../../routes/typings';
 import { withApmSpan } from '../../../utils/with_apm_span';
+import { ApmIndicesConfig } from '../../../../../observability/common/typings';
 
-type ISavedObjectsClient = Pick<SavedObjectsClient, 'get'>;
+export { ApmIndicesConfig };
 
-export interface ApmIndicesConfig {
-  /* eslint-disable @typescript-eslint/naming-convention */
-  'apm_oss.sourcemapIndices': string;
-  'apm_oss.errorIndices': string;
-  'apm_oss.onboardingIndices': string;
-  'apm_oss.spanIndices': string;
-  'apm_oss.transactionIndices': string;
-  'apm_oss.metricsIndices': string;
-  /* eslint-enable @typescript-eslint/naming-convention */
-  apmAgentConfigurationIndex: string;
-  apmCustomLinkIndex: string;
-}
+type ISavedObjectsClient = Pick<SavedObjectsClient, 'get'>;
 
 export type ApmIndicesName = keyof ApmIndicesConfig;
 

diff --git a/x-pack/plugins/apm/server/routes/observability_overview.ts b/x-pack/plugins/apm/server/routes/observability_overview.ts
@@ -21,8 +21,7 @@ const observabilityOverviewHasDataRoute = createApmServerRoute({
   options: { tags: ['access:apm'] },
   handler: async (resources) => {
     const setup = await setupRequest(resources);
-    const res = await getHasData({ setup });
-    return { hasData: res };
+    return await getHasData({ setup });
   },
 });
 

diff --git a/x-pack/plugins/observability/common/typings.ts b/x-pack/plugins/observability/common/typings.ts
@@ -10,3 +10,16 @@ export type Maybe<T> = T | null | undefined;
 
 export const alertStatusRt = t.union([t.literal('all'), t.literal('open'), t.literal('closed')]);
 export type AlertStatus = t.TypeOf<typeof alertStatusRt>;
+
+export interface ApmIndicesConfig {
+  /* eslint-disable @typescript-eslint/naming-convention */
+  'apm_oss.sourcemapIndices': string;
+  'apm_oss.errorIndices': string;
+  'apm_oss.onboardingIndices': string;
+  'apm_oss.spanIndices': string;
+  'apm_oss.transactionIndices': string;
+  'apm_oss.metricsIndices': string;
+  /* eslint-enable @typescript-eslint/naming-convention */
+  apmAgentConfigurationIndex: string;
+  apmCustomLinkIndex: string;
+}
diff --git a/x-pack/plugins/observability/public/components/app/empty_sections/index.tsx b/x-pack/plugins/observability/public/components/app/empty_sections/index.tsx
@@ -13,26 +13,24 @@ import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { useHasData } from '../../../hooks/use_has_data';
 import { usePluginContext } from '../../../hooks/use_plugin_context';
 import { getEmptySections } from '../../../pages/overview/empty_section';
-import { UXHasDataResponse } from '../../../typings';
 import { EmptySection } from './empty_section';
 
 export function EmptySections() {
   const { core } = usePluginContext();
   const theme = useContext(ThemeContext);
-  const { hasData } = useHasData();
+  const { hasDataMap } = useHasData();
 
   const appEmptySections = getEmptySections({ core }).filter(({ id }) => {
     if (id === 'alert') {
-      const { status, hasData: alerts } = hasData.alert || {};
+      const { status, hasData: alerts } = hasDataMap.alert || {};
       return (
         status === FETCH_STATUS.FAILURE ||
         (status === FETCH_STATUS.SUCCESS && (alerts as Alert[]).length === 0)
       );
     } else {
-      const app = hasData[id];
+      const app = hasDataMap[id];
       if (app) {
-        const _hasData = id === 'ux' ? (app.hasData as UXHasDataResponse)?.hasData : app.hasData;
-        return app.status === FETCH_STATUS.FAILURE || !_hasData;
+        return app.status === FETCH_STATUS.FAILURE || !app.hasData;
       }
     }
     return false;

diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx
@@ -29,7 +29,7 @@ jest.mock('react-router-dom', () => ({
 describe('APMSection', () => {
   beforeAll(() => {
     jest.spyOn(hasDataHook, 'useHasData').mockReturnValue({
-      hasData: {
+      hasDataMap: {
         apm: {
           status: fetcherHook.FETCH_STATUS.SUCCESS,
           hasData: true,

diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.tsx
@@ -48,7 +48,7 @@ export function APMSection({ bucketSize }: Props) {
   const theme = useContext(ThemeContext);
   const chartTheme = useChartTheme();
   const history = useHistory();
-  const { forceUpdate, hasData } = useHasData();
+  const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
 
   const { data, status } = useFetcher(
@@ -66,7 +66,7 @@ export function APMSection({ bucketSize }: Props) {
     [bucketSize, relativeStart, relativeEnd, forceUpdate]
   );
 
-  if (!hasData.apm?.hasData) {
+  if (!hasDataMap.apm?.hasData) {
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/components/app/section/logs/index.tsx b/x-pack/plugins/observability/public/components/app/section/logs/index.tsx
@@ -47,7 +47,7 @@ function getColorPerItem(series?: LogsFetchDataResponse['series']) {
 export function LogsSection({ bucketSize }: Props) {
   const history = useHistory();
   const chartTheme = useChartTheme();
-  const { forceUpdate, hasData } = useHasData();
+  const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
 
   const { data, status } = useFetcher(
@@ -65,7 +65,7 @@ export function LogsSection({ bucketSize }: Props) {
     [bucketSize, relativeStart, relativeEnd, forceUpdate]
   );
 
-  if (!hasData.infra_logs?.hasData) {
+  if (!hasDataMap.infra_logs?.hasData) {
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx b/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx
@@ -50,7 +50,7 @@ const bytesPerSecondFormatter = (value: NumberOrNull) =>
   value === null ? '' : numeral(value).format('0b') + '/s';
 
 export function MetricsSection({ bucketSize }: Props) {
-  const { forceUpdate, hasData } = useHasData();
+  const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
   const [sortDirection, setSortDirection] = useState<Direction>('asc');
   const [sortField, setSortField] = useState<keyof MetricsFetchDataSeries>('uptime');
@@ -88,7 +88,7 @@ export function MetricsSection({ bucketSize }: Props) {
     [data, setSortField, setSortDirection]
   );
 
-  if (!hasData.infra_metrics?.hasData) {
+  if (!hasDataMap.infra_metrics?.hasData) {
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx b/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx
@@ -40,7 +40,7 @@ export function UptimeSection({ bucketSize }: Props) {
   const theme = useContext(ThemeContext);
   const chartTheme = useChartTheme();
   const history = useHistory();
-  const { forceUpdate, hasData } = useHasData();
+  const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
 
   const { data, status } = useFetcher(
@@ -58,7 +58,7 @@ export function UptimeSection({ bucketSize }: Props) {
     [bucketSize, relativeStart, relativeEnd, forceUpdate]
   );
 
-  if (!hasData.synthetics?.hasData) {
+  if (!hasDataMap.synthetics?.hasData) {
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx
@@ -28,10 +28,11 @@ jest.mock('react-router-dom', () => ({
 describe('UXSection', () => {
   beforeAll(() => {
     jest.spyOn(hasDataHook, 'useHasData').mockReturnValue({
-      hasData: {
+      hasDataMap: {
         ux: {
           status: fetcherHook.FETCH_STATUS.SUCCESS,
-          hasData: { hasData: true, serviceName: 'elastic-co-frontend' },
+          hasData: true,
+          serviceName: 'elastic-co-frontend',
         },
       },
     } as HasDataContextValue);

diff --git a/x-pack/plugins/observability/public/components/app/section/ux/index.tsx b/x-pack/plugins/observability/public/components/app/section/ux/index.tsx
@@ -12,18 +12,17 @@ import { getDataHandler } from '../../../../data_handler';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { UXHasDataResponse } from '../../../../typings';
 import CoreVitals from '../../../shared/core_web_vitals';
 
 interface Props {
   bucketSize: string;
 }
 
 export function UXSection({ bucketSize }: Props) {
-  const { forceUpdate, hasData } = useHasData();
+  const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
-  const uxHasDataResponse = (hasData.ux?.hasData as UXHasDataResponse) || {};
-  const serviceName = uxHasDataResponse.serviceName as string;
+  const uxHasDataResponse = hasDataMap.ux;
+  const serviceName = uxHasDataResponse?.serviceName as string;
 
   const { data, status } = useFetcher(
     () => {

diff --git a/...servability/public/components/shared/exploratory_view/configurations/apm/field_formats.ts b/...servability/public/components/shared/exploratory_view/configurations/apm/field_formats.ts
@@ -6,7 +6,11 @@
  */
 
 import { FieldFormat } from '../../types';
-import { TRANSACTION_DURATION } from '../constants/elasticsearch_fieldnames';
+import {
+  METRIC_SYSTEM_CPU_USAGE,
+  METRIC_SYSTEM_MEMORY_USAGE,
+  TRANSACTION_DURATION,
+} from '../constants/elasticsearch_fieldnames';
 
 export const apmFieldFormats: FieldFormat[] = [
   {
@@ -18,7 +22,16 @@ export const apmFieldFormats: FieldFormat[] = [
         outputFormat: 'asMilliseconds',
         outputPrecision: 0,
         showSuffix: true,
+        useShortSuffix: true,
       },
     },
   },
+  {
+    field: METRIC_SYSTEM_MEMORY_USAGE,
+    format: { id: 'bytes', params: {} },
+  },
+  {
+    field: METRIC_SYSTEM_CPU_USAGE,
+    format: { id: 'percent', params: {} },
+  },
 ];
diff --git a/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts b/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts
@@ -13,12 +13,13 @@ import {
   BROWSER_VERSION_LABEL,
   CLS_LABEL,
   CORE_WEB_VITALS_LABEL,
+  DEVICE_DISTRIBUTION_LABEL,
   DEVICE_LABEL,
   ENVIRONMENT_LABEL,
   FCP_LABEL,
   FID_LABEL,
   HOST_NAME_LABEL,
-  KIP_OVER_TIME_LABEL,
+  KPI_OVER_TIME_LABEL,
   KPI_LABEL,
   LCP_LABEL,
   LOCATION_LABEL,
@@ -31,6 +32,7 @@ import {
   OS_LABEL,
   PERF_DIST_LABEL,
   PORT_LABEL,
+  REQUEST_METHOD,
   SERVICE_NAME_LABEL,
   TAGS_LABEL,
   TBT_LABEL,
@@ -72,14 +74,17 @@ export const FieldLabels: Record<string, string> = {
 
   'performance.metric': METRIC_LABEL,
   'Business.KPI': KPI_LABEL,
+  'http.request.method': REQUEST_METHOD,
 };
 
 export const DataViewLabels: Record<ReportViewTypeId, string> = {
   dist: PERF_DIST_LABEL,
-  kpi: KIP_OVER_TIME_LABEL,
+  kpi: KPI_OVER_TIME_LABEL,
   cwv: CORE_WEB_VITALS_LABEL,
+  mdd: DEVICE_DISTRIBUTION_LABEL,
 };
 
 export const USE_BREAK_DOWN_COLUMN = 'USE_BREAK_DOWN_COLUMN';
 export const FILTER_RECORDS = 'FILTER_RECORDS';
+export const TERMS_COLUMN = 'TERMS_COLUMN';
 export const OPERATION_COLUMN = 'operation';
diff --git a/...c/components/shared/exploratory_view/configurations/constants/elasticsearch_fieldnames.ts b/...c/components/shared/exploratory_view/configurations/constants/elasticsearch_fieldnames.ts
@@ -86,6 +86,8 @@ export const ERROR_PAGE_URL = 'error.page.url';
 
 // METRICS
 export const METRIC_SYSTEM_FREE_MEMORY = 'system.memory.actual.free';
+export const METRIC_SYSTEM_MEMORY_USAGE = 'system.memory.usage';
+export const METRIC_SYSTEM_CPU_USAGE = 'system.cpu.usage';
 export const METRIC_SYSTEM_TOTAL_MEMORY = 'system.memory.total';
 export const METRIC_SYSTEM_CPU_PERCENT = 'system.cpu.total.norm.pct';
 export const METRIC_PROCESS_CPU_PERCENT = 'system.process.cpu.total.norm.pct';