Merge branch 'master' into severity_column

src/core/public/doc_links/doc_links_service.ts

@@ -198,6 +198,8 @@ export class DocLinksService {
           transportSettings: `${ELASTICSEARCH_DOCS}modules-network.html#common-network-settings`,
           typesRemoval: `${ELASTICSEARCH_DOCS}removal-of-types.html`,
           deprecationLogging: `${ELASTICSEARCH_DOCS}logging.html#deprecation-logging`,
+          setupUpgrade: `${ELASTICSEARCH_DOCS}setup-upgrade.html`,
+          releaseHighlights: `${ELASTICSEARCH_DOCS}release-highlights.html`,
         },
         siem: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/index.html`,

src/plugins/vis_default_editor/public/components/controls/utils/use_handlers.ts

@@ -7,6 +7,7 @@
  */
 
 import { useCallback } from 'react';
+import type { SerializableRecord } from '@kbn/utility-types';
 
 import { IAggConfig, AggParamType } from 'src/plugins/data/public';
 
@@ -20,7 +21,7 @@ function useSubAggParamsHandlers(
 ) {
   const setAggParamValue = useCallback(
     (aggId, paramName, val) => {
-      const parsedParams = subAgg.toJSON();
+      const parsedParams = subAgg.serialize();
       const params = {
         ...parsedParams,
         params: {
@@ -36,10 +37,18 @@ function useSubAggParamsHandlers(
 
   const onAggTypeChange = useCallback(
     (aggId, aggType) => {
-      const parsedAgg = subAgg.toJSON();
+      const parsedAgg = subAgg.serialize();
+      const parsedAggParams = parsedAgg.params as SerializableRecord;
 
+      // we should share between aggs only field and base params: json, label, time shift.
       const params = {
         ...parsedAgg,
+        params: {
+          field: parsedAggParams.field,
+          json: parsedAggParams.json,
+          customLabel: parsedAggParams.customLabel,
+          timeShift: parsedAggParams.timeShift,
+        },
         type: aggType,
       };
 

test/functional/page_objects/visual_builder_page.ts

@@ -131,7 +131,7 @@ export class VisualBuilderPageObject extends FtrService {
     await this.clearMarkdown();
     const input = await this.find.byCssSelector('.tvbMarkdownEditor__editor textarea');
     await input.type(markdown);
-    await this.common.sleep(3000);
+    await this.visChart.waitForVisualizationRenderingStabilized();
   }
 
   public async clearMarkdown() {

x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { EuiIconTip, EuiInMemoryTable, EuiBasicTableColumn, EuiLink } from '@elastic/eui';
 import type { EuiSearchBarOnChangeArgs } from '@elastic/eui';
@@ -71,7 +71,11 @@ export const RoleMappingsTable: React.FC<Props> = ({
     return _rm;
   }) as SharedRoleMapping[];
 
-  const [items, setItems] = useState(standardizedRoleMappings);
+  const [items, setItems] = useState([] as SharedRoleMapping[]);
+
+  useEffect(() => {
+    setItems(standardizedRoleMappings);
+  }, [roleMappings]);
 
   const attributeNameCol: EuiBasicTableColumn<SharedRoleMapping> = {
     field: 'attribute',

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -15,14 +15,14 @@ import {
   ALERT_DURATION as ALERT_DURATION_TYPED,
   ALERT_SEVERITY as ALERT_SEVERITY_TYPED,
   ALERT_STATUS as ALERT_STATUS_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_TYPED,
+  ALERT_REASON as ALERT_REASON_TYPED,
   ALERT_RULE_CONSUMER,
 } from '@kbn/rule-data-utils';
 import {
   ALERT_DURATION as ALERT_DURATION_NON_TYPED,
   ALERT_SEVERITY as ALERT_SEVERITY_NON_TYPED,
   ALERT_STATUS as ALERT_STATUS_NON_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_NON_TYPED,
+  ALERT_REASON as ALERT_REASON_NON_TYPED,
   TIMESTAMP,
   // @ts-expect-error importing from a place other than root because we want to limit what we import from this package
 } from '@kbn/rule-data-utils/target_node/technical_field_names';
@@ -41,7 +41,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import React, { Suspense, useMemo, useState, useCallback } from 'react';
-
 import { get } from 'lodash';
 import { useGetUserAlertsPermissions } from '../../hooks/use_alert_permission';
 import type { TimelinesUIStart, TGridType, SortDirection } from '../../../../timelines/public';
@@ -68,7 +67,7 @@ const AlertConsumers: typeof AlertConsumersTyped = AlertConsumersNonTyped;
 const ALERT_DURATION: typeof ALERT_DURATION_TYPED = ALERT_DURATION_NON_TYPED;
 const ALERT_SEVERITY: typeof ALERT_SEVERITY_TYPED = ALERT_SEVERITY_NON_TYPED;
 const ALERT_STATUS: typeof ALERT_STATUS_TYPED = ALERT_STATUS_NON_TYPED;
-const ALERT_RULE_NAME: typeof ALERT_RULE_NAME_TYPED = ALERT_RULE_NAME_NON_TYPED;
+const ALERT_REASON: typeof ALERT_REASON_TYPED = ALERT_REASON_NON_TYPED;
 
 interface AlertsTableTGridProps {
   indexName: string;
@@ -77,6 +76,7 @@ interface AlertsTableTGridProps {
   kuery: string;
   status: string;
   setRefetch: (ref: () => void) => void;
+  addToQuery: (value: string) => void;
 }
 
 interface ObservabilityActionsProps extends ActionProps {
@@ -113,10 +113,10 @@ export const columns: Array<
   {
     columnHeaderType: 'not-filtered',
     displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', {
-      defaultMessage: 'Status',
+      defaultMessage: 'Alert Status',
     }),
     id: ALERT_STATUS,
-    initialWidth: 79,
+    initialWidth: 110,
   },
   {
     columnHeaderType: 'not-filtered',
@@ -147,8 +147,8 @@ export const columns: Array<
     displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
       defaultMessage: 'Reason',
     }),
+    id: ALERT_REASON,
     linkField: '*',
-    id: ALERT_RULE_NAME,
   },
 ];
 
@@ -299,7 +299,7 @@ function ObservabilityActions({
 }
 
 export function AlertsTableTGrid(props: AlertsTableTGridProps) {
-  const { indexName, rangeFrom, rangeTo, kuery, status, setRefetch } = props;
+  const { indexName, rangeFrom, rangeTo, kuery, status, setRefetch, addToQuery } = props;
   const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
 
   const [flyoutAlert, setFlyoutAlert] = useState<TopAlert | undefined>(undefined);
@@ -343,7 +343,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
       type,
       columns,
       deletedEventIds: [],
-      defaultCellActions: getDefaultCellActions({ enableFilterActions: false }),
+      defaultCellActions: getDefaultCellActions({ addToQuery }),
       end: rangeTo,
       filters: [],
       indexNames: [indexName],
@@ -388,6 +388,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     rangeTo,
     setRefetch,
     status,
+    addToQuery,
   ]);
   const handleFlyoutClose = () => setFlyoutAlert(undefined);
   const { observabilityRuleTypeRegistry } = usePluginContext();

x-pack/plugins/observability/public/pages/alerts/default_cell_actions.tsx

@@ -6,16 +6,18 @@
  */
 
 import React from 'react';
-
+import { i18n } from '@kbn/i18n';
 import { ObservabilityPublicPluginsStart } from '../..';
 import { getMappedNonEcsValue } from './render_cell_value';
+import FilterForValueButton from './filter_for_value';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { TimelineNonEcsData } from '../../../../timelines/common/search_strategy';
 import { TGridCellAction } from '../../../../timelines/common/types/timeline';
 import { TimelinesUIStart } from '../../../../timelines/public';
 
-/** a noop required by the filter in / out buttons */
-const onFilterAdded = () => {};
+export const FILTER_FOR_VALUE = i18n.translate('xpack.observability.hoverActions.filterForValue', {
+  defaultMessage: 'Filter for value',
+});
 
 /** a hook to eliminate the verbose boilerplate required to use common services */
 const useKibanaServices = () => {
@@ -31,32 +33,10 @@ const useKibanaServices = () => {
   return { timelines, filterManager };
 };
 
-/** actions for adding filters to the search bar */
-const filterCellActions: TGridCellAction[] = [
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines, filterManager } = useKibanaServices();
-
-    const value = getMappedNonEcsValue({
-      data: data[rowIndex],
-      fieldName: columnId,
-    });
-
-    return (
-      <>
-        {timelines.getHoverActions().getFilterForValueButton({
-          Component,
-          field: columnId,
-          filterManager,
-          onFilterAdded,
-          ownFocus: false,
-          showTooltip: false,
-          value,
-        })}
-      </>
-    );
-  },
+/** actions common to all cells (e.g. copy to clipboard) */
+const commonCellActions: TGridCellAction[] = [
   ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines, filterManager } = useKibanaServices();
+    const { timelines } = useKibanaServices();
 
     const value = getMappedNonEcsValue({
       data: data[rowIndex],
@@ -65,11 +45,10 @@ const filterCellActions: TGridCellAction[] = [
 
     return (
       <>
-        {timelines.getHoverActions().getFilterOutValueButton({
+        {timelines.getHoverActions().getCopyButton({
           Component,
           field: columnId,
-          filterManager,
-          onFilterAdded,
+          isHoverAction: false,
           ownFocus: false,
           showTooltip: false,
           value,
@@ -79,31 +58,27 @@ const filterCellActions: TGridCellAction[] = [
   },
 ];
 
-/** actions common to all cells (e.g. copy to clipboard) */
-const commonCellActions: TGridCellAction[] = [
+/** actions for adding filters to the search bar */
+const buildFilterCellActions = (addToQuery: (value: string) => void): TGridCellAction[] => [
   ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines } = useKibanaServices();
-
     const value = getMappedNonEcsValue({
       data: data[rowIndex],
       fieldName: columnId,
     });
 
     return (
-      <>
-        {timelines.getHoverActions().getCopyButton({
-          Component,
-          field: columnId,
-          isHoverAction: false,
-          ownFocus: false,
-          showTooltip: false,
-          value,
-        })}
-      </>
+      <FilterForValueButton
+        Component={Component}
+        field={columnId}
+        value={value}
+        addToQuery={addToQuery}
+      />
     );
   },
 ];
 
 /** returns the default actions shown in `EuiDataGrid` cells */
-export const getDefaultCellActions = ({ enableFilterActions }: { enableFilterActions: boolean }) =>
-  enableFilterActions ? [...filterCellActions, ...commonCellActions] : [...commonCellActions];
+export const getDefaultCellActions = ({ addToQuery }: { addToQuery: (value: string) => void }) => [
+  ...buildFilterCellActions(addToQuery),
+  ...commonCellActions,
+];

x-pack/plugins/observability/public/pages/alerts/filter_for_value.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+
+export const filterForValueButtonLabel = i18n.translate(
+  'xpack.observability.hoverActions.filterForValueButtonLabel',
+  {
+    defaultMessage: 'Filter for value',
+  }
+);
+
+import { EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';
+
+interface FilterForValueProps {
+  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon;
+  field: string;
+  value: string[] | string | null | undefined;
+  addToQuery: (value: string) => void;
+}
+
+const FilterForValueButton: React.FC<FilterForValueProps> = React.memo(
+  ({ Component, field, value, addToQuery }) => {
+    const text = useMemo(() => `${field}${value != null ? `: "${value}"` : ''}`, [field, value]);
+    const onClick = useCallback(() => {
+      addToQuery(text);
+    }, [text, addToQuery]);
+    const button = useMemo(
+      () =>
+        Component ? (
+          <Component
+            aria-label={filterForValueButtonLabel}
+            data-test-subj="filter-for-value"
+            iconType="plusInCircle"
+            onClick={onClick}
+            title={filterForValueButtonLabel}
+          >
+            {filterForValueButtonLabel}
+          </Component>
+        ) : (
+          <EuiButtonIcon
+            aria-label={filterForValueButtonLabel}
+            className="timelines__hoverActionButton"
+            data-test-subj="filter-for-value"
+            iconSize="s"
+            iconType="plusInCircle"
+            onClick={onClick}
+          />
+        ),
+      [Component, onClick]
+    );
+    return button;
+  }
+);
+
+FilterForValueButton.displayName = 'FilterForValueButton';
+
+// eslint-disable-next-line import/no-default-export
+export { FilterForValueButton as default };

x-pack/plugins/observability/public/pages/alerts/index.tsx

@@ -40,7 +40,12 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
   const history = useHistory();
   const refetch = useRef<() => void>();
   const {
-    query: { rangeFrom = 'now-15m', rangeTo = 'now', kuery = '', status = 'open' },
+    query: {
+      rangeFrom = 'now-15m',
+      rangeTo = 'now',
+      kuery = 'kibana.alert.status: "open"', // TODO change hardcoded values as part of another PR
+      status = 'open',
+    },
   } = routeParams;
 
   useBreadcrumbs([
@@ -98,6 +103,20 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
     [history, rangeFrom, rangeTo, kuery]
   );
 
+  const addToQuery = useCallback(
+    (value: string) => {
+      let output = value;
+      if (kuery !== '') {
+        output = `${kuery} and ${value}`;
+      }
+      onQueryChange({
+        dateRange: { from: rangeFrom, to: rangeTo },
+        query: output,
+      });
+    },
+    [kuery, onQueryChange, rangeFrom, rangeTo]
+  );
+
   const setRefetch = useCallback((ref) => {
     refetch.current = ref;
   }, []);
@@ -170,6 +189,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
                 kuery={kuery}
                 status={status}
                 setRefetch={setRefetch}
+                addToQuery={addToQuery}
               />
             </EuiFlexItem>
           </EuiFlexGroup>