Merge branch 'master' into issues/112388

.buildkite/scripts/steps/storybooks/build_and_upload.js

@@ -6,13 +6,20 @@ const path = require('path');
 const STORYBOOKS = [
   'apm',
   'canvas',
+  'codeeditor',
   'ci_composite',
   'url_template_editor',
-  'codeeditor',
   'dashboard',
   'dashboard_enhanced',
   'data_enhanced',
   'embeddable',
+  'expression_error',
+  'expression_image',
+  'expression_metric',
+  'expression_repeat_image',
+  'expression_reveal_image',
+  'expression_shape',
+  'expression_tagcloud',
   'fleet',
   'infra',
   'security_solution',

docs/user/dashboard/lens.asciidoc

@@ -441,4 +441,20 @@ Pagination in a data table is unsupported. To use pagination in data tables, cre
 [%collapsible]
 ====
 Specifying the color for a single data point, such as a single bar or line, is unsupported.
-====
+====
+
+[discrete]
+[[is-it-possible-to-inspect-the-elasticsearch-queries-in-Lens]]
+.*How do I inspect {es} queries in visualizations?*
+[%collapsible]
+====
+You can inspect the requests sent by the visualization to {es} using the Inspector. It can be accessed within the editor or in the dashboard.
+====
+
+[discrete]
+[[how-to-isolate-a-single-series-in-a-chart]]
+.*How do I isolate a single series in a chart?*
+[%collapsible]
+====
+For area, line, and bar charts, press Shift, then click the series in the legend. All other series are automatically unselected.
+====

test/scripts/jenkins_storybook.sh

@@ -20,6 +20,7 @@ yarn storybook --site expression_repeat_image
 yarn storybook --site expression_reveal_image
 yarn storybook --site expression_shape
 yarn storybook --site expression_tagcloud
+yarn storybook --site fleet
 yarn storybook --site infra
 yarn storybook --site security_solution
 yarn storybook --site ui_actions_enhanced

x-pack/plugins/monitoring/public/application/index.tsx

@@ -20,8 +20,9 @@ import { createPreserveQueryHistory } from './preserve_query_history';
 import { RouteInit } from './route_init';
 import { NoDataPage } from './pages/no_data';
 import { ElasticsearchOverviewPage } from './pages/elasticsearch/overview';
+import { BeatsOverviewPage } from './pages/beats/overview';
+import { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS } from '../../common/constants';
 import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page';
-import { CODE_PATH_ELASTICSEARCH } from '../../common/constants';
 import { MonitoringTimeContainer } from './hooks/use_monitoring_time';
 import { BreadcrumbContainer } from './hooks/use_breadcrumbs';
 
@@ -92,6 +93,14 @@ const MonitoringApp: React.FC<{
                     fetchAllClusters={false}
                   />
 
+                  {/* Beats Views */}
+                  <RouteInit
+                    path="/beats"
+                    component={BeatsOverviewPage}
+                    codePaths={[CODE_PATH_BEATS]}
+                    fetchAllClusters={false}
+                  />
+
                   <Redirect
                     to={{
                       pathname: '/loading',

x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import { PageTemplate } from '../page_template';
+import { TabMenuItem, PageTemplateProps } from '../page_template';
+
+interface BeatsTemplateProps extends PageTemplateProps {
+  cluster: any;
+}
+
+export const BeatsTemplate: React.FC<BeatsTemplateProps> = ({ cluster, ...props }) => {
+  const tabs: TabMenuItem[] = [
+    {
+      id: 'overview',
+      label: i18n.translate('xpack.monitoring.beatsNavigation.overviewLinkText', {
+        defaultMessage: 'Overview',
+      }),
+      route: '/beats',
+    },
+    {
+      id: 'instances',
+      label: i18n.translate('xpack.monitoring.beatsNavigation.instancesLinkText', {
+        defaultMessage: 'Instances',
+      }),
+      route: '/beats/beats',
+    },
+  ];
+
+  return <PageTemplate {...props} tabs={tabs} product="beats" />;
+};

x-pack/plugins/monitoring/public/application/pages/beats/overview.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 React, { useContext, useState, useCallback, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { find } from 'lodash';
+import { ComponentProps } from '../../route_init';
+import { BeatsTemplate } from './beats_template';
+import { GlobalStateContext } from '../../global_state_context';
+import { useCharts } from '../../hooks/use_charts';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+// @ts-ignore
+import { BeatsOverview } from '../../../components/beats/overview';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
+
+export const BeatsOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
+  const globalState = useContext(GlobalStateContext);
+  const { zoomInfo, onBrush } = useCharts();
+  const { services } = useKibana<{ data: any }>();
+  const clusterUuid = globalState.cluster_uuid;
+  const ccs = globalState.ccs;
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  const [data, setData] = useState(null);
+
+  const title = i18n.translate('xpack.monitoring.beats.overview.routeTitle', {
+    defaultMessage: 'Beats - Overview',
+  });
+
+  const pageTitle = i18n.translate('xpack.monitoring.beats.overview.pageTitle', {
+    defaultMessage: 'Beats overview',
+  });
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inBeats: true,
+      });
+    }
+  }, [cluster, generateBreadcrumbs]);
+
+  const getPageData = useCallback(async () => {
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const url = `../api/monitoring/v1/clusters/${clusterUuid}/beats`;
+
+    const response = await services.http?.fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({
+        ccs,
+        timeRange: {
+          min: bounds.min.toISOString(),
+          max: bounds.max.toISOString(),
+        },
+      }),
+    });
+
+    setData(response);
+  }, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http]);
+
+  const renderOverview = (overviewData: any) => {
+    if (overviewData === null) {
+      return null;
+    }
+    return <BeatsOverview {...overviewData} onBrush={onBrush} zoomInfo={zoomInfo} />;
+  };
+
+  return (
+    <BeatsTemplate
+      title={title}
+      pageTitle={pageTitle}
+      getPageData={getPageData}
+      data-test-subj="beatsOverviewPage"
+      cluster={cluster}
+    >
+      <div data-test-subj="beatsOverviewPage">{renderOverview(data)}</div>
+    </BeatsTemplate>
+  );
+};

x-pack/test/functional/apps/discover/feature_controls/discover_spaces.ts

@@ -28,6 +28,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
     await PageObjects.timePicker.setDefaultAbsoluteRange();
   }
 
+  // FLAKY https://github.com/elastic/kibana/issues/113067
   describe('spaces', () => {
     before(async () => {
       await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/logstash_functional');

x-pack/test/functional/apps/discover/saved_searches.ts

@@ -18,7 +18,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const panelActionsTimeRange = getService('dashboardPanelTimeRange');
   const ecommerceSOPath = 'x-pack/test/functional/fixtures/kbn_archiver/reporting/ecommerce.json';
 
-  describe('Discover Saved Searches', () => {
+  // FLAKY https://github.com/elastic/kibana/issues/104578
+  describe.skip('Discover Saved Searches', () => {
     before('initialize tests', async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/reporting/ecommerce');
       await kibanaServer.importExport.load(ecommerceSOPath);

x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts

@@ -21,7 +21,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const policyTestResources = getService('policyTestResources');
 
-  describe('When on the Endpoint Policy Details Page', function () {
+  // FLAKY https://github.com/elastic/kibana/issues/100296
+  describe.skip('When on the Endpoint Policy Details Page', function () {
     describe('with an invalid policy id', () => {
       it('should display an error', async () => {
         await pageObjects.policy.navigateToPolicyDetails('invalid-id');