[POC] Security example

x-pack/plugins/observability/public/components/shared/exploratory_view/components/series_date_picker/index.tsx

@@ -36,7 +36,7 @@ export function SeriesDatePicker({ series, seriesId }: Props) {
   const { setSeries, reportType, allSeries } = useSeriesStorage();
 
   function onTimeChange({ start, end }: { start: string; end: string }) {
-    onRefreshTimeRange();
+    onRefreshTimeRange?.();
     if (reportType === ReportTypes.KPI) {
       allSeries.forEach((currSeries, seriesIndex) => {
         setSeries(seriesIndex, { ...currSeries, time: { from: start, to: end } });

x-pack/plugins/observability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx

@@ -20,6 +20,7 @@ interface ExploratoryViewContextValue {
   }>;
   indexPatterns: Record<string, string>;
   reportConfigMap: ReportConfigMap;
+  asPanel?: boolean;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
 }
 
@@ -34,8 +35,10 @@ export function ExploratoryViewContextProvider({
   indexPatterns,
   reportConfigMap,
   setHeaderActionMenu,
+  asPanel = true,
 }: { children: JSX.Element } & ExploratoryViewContextValue) {
   const value = {
+    asPanel,
     reportTypes,
     dataTypes,
     indexPatterns,

x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx

@@ -21,6 +21,7 @@ import { SeriesViews } from './views/series_views';
 import { LensEmbeddable } from './lens_embeddable';
 import { EmptyView } from './components/empty_view';
 import type { ChartTimeRange } from './header/last_updated';
+import { useExploratoryView } from './contexts/exploatory_view_config';
 
 export type PanelId = 'seriesPanel' | 'chartPanel';
 
@@ -50,6 +51,8 @@ export function ExploratoryView({
 
   const lensAttributesT = useLensAttributes();
 
+  const { asPanel } = useExploratoryView();
+
   const setHeightOffset = () => {
     if (seriesBuilderRef?.current && wrapperRef.current) {
       const headerOffset = wrapperRef.current.getBoundingClientRect().top;
@@ -93,8 +96,10 @@ export function ExploratoryView({
     }
   };
 
+  const WrapperC = asPanel ? PanelWrapper : Wrapper;
+
   return (
-    <Wrapper>
+    <WrapperC>
       {lens ? (
         <>
           <ExploratoryViewHeader
@@ -158,7 +163,7 @@ export function ExploratoryView({
           <h2>{LENS_NOT_AVAILABLE}</h2>
         </EuiTitle>
       )}
-    </Wrapper>
+    </WrapperC>
   );
 }
 const LensWrapper = styled.div<{ height: string }>`
@@ -177,7 +182,20 @@ const ResizableContainer = styled(EuiResizableContainer)`
   }
 `;
 
-const Wrapper = styled(EuiPanel)`
+const Wrapper = styled.div`
+  max-width: 1800px;
+  min-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  overflow-x: auto;
+  position: relative;
+
+  .echLegendItem__action {
+    display: none;
+  }
+`;
+
+const PanelWrapper = styled(EuiPanel)`
   max-width: 1800px;
   min-width: 800px;
   margin: 0 auto;

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx

@@ -74,7 +74,7 @@ export function Breakdowns({ seriesConfig, seriesId, series }: Props) {
 
   const items = seriesConfig.breakdownFields.map((breakdown) => ({
     id: breakdown,
-    label: seriesConfig.labels[breakdown],
+    label: seriesConfig.labels[breakdown] ?? breakdown,
   }));
 
   if (!hasUseBreakdownColumn) {

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx

@@ -56,7 +56,7 @@ export function Series({ item, isExpanded, toggleExpanded }: Props) {
   }, [isExpanded]);
 
   return (
-    <EuiPanel hasBorder={true} data-test-subj={`exploratoryViewSeriesPanel${0}`}>
+    <EuiPanel hasBorder={true} data-test-subj={`exploratoryViewSeriesPanel${0}`} paddingSize="s">
       <StyledAccordion
         id={`exploratoryViewSeriesAccordion${id}`}
         forceState={isExpanded ? 'open' : 'closed'}

x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts

@@ -106,7 +106,15 @@ export interface ConfigProps {
   series?: SeriesUrl;
 }
 
-export type AppDataType = 'synthetics' | 'ux' | 'infra_logs' | 'infra_metrics' | 'apm' | 'mobile';
+export type AppDataType =
+  | 'synthetics'
+  | 'ux'
+  | 'infra_logs'
+  | 'infra_metrics'
+  | 'apm'
+  | 'mobile'
+  | 'security'
+  | 'securityAlerts';
 
 type FormatType = 'duration' | 'number' | 'bytes' | 'percent';
 type InputFormat = 'microseconds' | 'milliseconds' | 'seconds';

x-pack/plugins/observability/public/index.ts

@@ -91,6 +91,7 @@ export { enableComparisonByDefault } from '../common/ui_settings_keys';
 export type { SeriesConfig, ConfigProps } from './components/shared/exploratory_view/types';
 export {
   ReportTypes,
+  FILTER_RECORDS,
   REPORT_METRIC_FIELD,
 } from './components/shared/exploratory_view/configurations/constants';
 export { ExploratoryViewContextProvider } from './components/shared/exploratory_view/contexts/exploatory_view_config';

x-pack/plugins/security_solution/kibana.json

@@ -20,6 +20,7 @@
     "inspector",
     "licensing",
     "maps",
+    "observability",
     "ruleRegistry",
     "taskManager",
     "timelines",

x-pack/plugins/security_solution/public/app/exploratory_view/alert_kpi_over_time_config.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 {
+  ConfigProps,
+  SeriesConfig,
+  ReportTypes,
+  REPORT_METRIC_FIELD,
+  FILTER_RECORDS,
+} from '../../../../observability/public';
+
+export function getSecurityAlertsKPIConfig(_config: ConfigProps): SeriesConfig {
+  return {
+    reportType: ReportTypes.KPI,
+    defaultSeriesType: 'area',
+    seriesTypes: [],
+    xAxisColumn: {
+      sourceField: '@timestamp',
+    },
+    yAxisColumns: [
+      {
+        sourceField: REPORT_METRIC_FIELD,
+        operationType: 'unique_count',
+      },
+    ],
+    hasOperationType: false,
+    filterFields: [],
+    breakdownFields: ['agent.type', 'event.module', 'event.category'],
+    baseFilters: [],
+    palette: { type: 'palette', name: 'status' },
+    definitionFields: [{ field: 'kibana.alert.rule.name' }],
+    metricOptions: [
+      {
+        label: 'Detection alerts',
+        id: 'detectionAerts',
+        columnType: FILTER_RECORDS,
+        columnFilters: [
+          {
+            language: 'kuery',
+            query: 'NOT kibana.alert.building_block_type: *',
+          },
+        ],
+      },
+    ],
+    labels: { 'host.name': 'Hosts', 'url.full': 'URL', 'agent.type': 'Agent type' },
+  };
+}

x-pack/plugins/security_solution/public/app/exploratory_view/kpi_over_time_config.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 {
+  ConfigProps,
+  SeriesConfig,
+  ReportTypes,
+  FILTER_RECORDS,
+  REPORT_METRIC_FIELD,
+} from '../../../../observability/public';
+
+export function getSecurityKPIConfig(_config: ConfigProps): SeriesConfig {
+  return {
+    reportType: ReportTypes.KPI,
+    defaultSeriesType: 'area',
+    seriesTypes: [],
+    xAxisColumn: {
+      sourceField: '@timestamp',
+    },
+    yAxisColumns: [
+      {
+        sourceField: REPORT_METRIC_FIELD,
+        operationType: 'unique_count',
+      },
+    ],
+    hasOperationType: false,
+    filterFields: [],
+    breakdownFields: ['agent.type', 'event.module', 'event.dataset', 'event.category'],
+    baseFilters: [],
+    palette: { type: 'palette', name: 'status' },
+    definitionFields: [{ field: 'host.name' }],
+    metricOptions: [
+      {
+        label: 'Hosts',
+        field: 'host.name',
+        id: 'host.name',
+      },
+      {
+        label: 'External alerts',
+        id: 'EXTERNAL_ALERTS',
+        columnType: FILTER_RECORDS,
+        columnFilters: [
+          {
+            language: 'kuery',
+            query: `event.kind: alert and host.name: * `,
+          },
+        ],
+      },
+      {
+        label: 'Events',
+        id: 'EVENTS',
+        columnType: FILTER_RECORDS,
+        columnFilters: [
+          {
+            language: 'kuery',
+            query: `event: * `,
+          },
+        ],
+      },
+      {
+        label: 'User authentication success',
+        id: 'EVENT_SUCCESS',
+        columnType: FILTER_RECORDS,
+        columnFilters: [
+          {
+            language: 'kuery',
+            query: `event.outcome: success`,
+          },
+        ],
+      },
+      {
+        label: 'User authentication failure',
+        id: 'EVENT_FAILURE',
+        columnType: FILTER_RECORDS,
+        columnFilters: [
+          {
+            language: 'kuery',
+            query: `event.outcome: failure`,
+          },
+        ],
+      },
+    ],
+    labels: { 'host.name': 'Hosts', 'url.full': 'URL', 'agent.type': 'Agent type' },
+  };
+}

x-pack/plugins/security_solution/public/app/exploratory_view/security_exploratory_view.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 * as React from 'react';
+import { ExploratoryViewContextProvider, ExploratoryView } from '../../../../observability/public';
+import { getSecurityKPIConfig } from './kpi_over_time_config';
+import { RenderAppProps } from '../types';
+import { getSecurityAlertsKPIConfig } from './alert_kpi_over_time_config';
+
+export const reportConfigMap = {
+  security: [getSecurityKPIConfig],
+  securityAlerts: [getSecurityAlertsKPIConfig],
+};
+
+export const indexPatternList = {
+  security:
+    'remote_cluster:-*elastic-cloud-logs-*,remote_cluster:apm-*-transaction*,remote_cluster:traces-apm*,remote_cluster:auditbeat-*,remote_cluster:endgame-*,remote_cluster:filebeat-*,remote_cluster:logs-*,remote_cluster:packetbeat-*,remote_cluster:winlogbeat-*',
+  securityAlerts: 'remote_cluster:.internal.alerts-security.alerts-default-*',
+};
+
+export const dataTypes: any = [
+  {
+    id: 'security',
+    label: 'Security',
+  },
+  {
+    id: 'securityAlerts',
+    label: 'Security alerts',
+  },
+];
+
+export const reportTypes = [{ reportType: 'kpi-over-time', label: 'KPI over time' }];
+
+export const SecurityExploratoryView = ({
+  setHeaderActionMenu,
+}: {
+  setHeaderActionMenu: RenderAppProps['setHeaderActionMenu'];
+}) => {
+  return (
+    <ExploratoryViewContextProvider
+      reportTypes={reportTypes}
+      dataTypes={dataTypes}
+      indexPatterns={indexPatternList}
+      reportConfigMap={reportConfigMap}
+      setHeaderActionMenu={setHeaderActionMenu}
+      asPanel={false}
+    >
+      <ExploratoryView app={{ id: 'security', label: 'Security' }} />
+    </ExploratoryViewContextProvider>
+  );
+};

x-pack/plugins/security_solution/public/app/index.tsx

@@ -12,6 +12,7 @@ import { Route, Switch } from 'react-router-dom';
 import { NotFoundPage } from './404';
 import { SecurityApp } from './app';
 import { RenderAppProps } from './types';
+import { SecurityExploratoryView } from './exploratory_view/security_exploratory_view';
 
 export const renderApp = ({
   element,
@@ -35,6 +36,9 @@ export const renderApp = ({
     >
       <ApplicationUsageTrackingProvider>
         <Switch>
+          <Route key="/exploratory-view/" path="/exploratory-view/" exact={true}>
+            <SecurityExploratoryView setHeaderActionMenu={setHeaderActionMenu} />
+          </Route>
           {subPluginRoutes.map((route, index) => {
             return <Route key={`route-${index}`} {...route} />;
           })}