[Logs UI] Support inline Log Views in the UI

x-pack/plugins/infra/common/constants.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-export const DEFAULT_SOURCE_ID = 'default';
 export const METRICS_INDEX_PATTERN = 'metrics-*,metricbeat-*';
 export const LOGS_INDEX_PATTERN = 'logs-*,filebeat-*,kibana_sample_data_logs*';
 export const METRICS_APP = 'metrics';

x-pack/plugins/infra/common/log_analysis/job_parameters.ts

@@ -16,11 +16,11 @@ export const partitionField = 'event.dataset';
 export const getJobIdPrefix = (spaceId: string, sourceId: string) =>
   `kibana-logs-ui-${spaceId}-${sourceId}-`;
 
-export const getJobId = (spaceId: string, sourceId: string, jobType: string) =>
-  `${getJobIdPrefix(spaceId, sourceId)}${jobType}`;
+export const getJobId = (spaceId: string, logViewId: string, jobType: string) =>
+  `${getJobIdPrefix(spaceId, logViewId)}${jobType}`;
 
-export const getDatafeedId = (spaceId: string, sourceId: string, jobType: string) =>
-  `datafeed-${getJobId(spaceId, sourceId, jobType)}`;
+export const getDatafeedId = (spaceId: string, logViewId: string, jobType: string) =>
+  `datafeed-${getJobId(spaceId, logViewId, jobType)}`;
 
 export const datasetFilterRT = rt.union([
   rt.strict({

x-pack/plugins/infra/common/log_views/types.ts

@@ -14,6 +14,7 @@ export interface LogViewsStaticConfig {
 export const logViewOriginRT = rt.keyof({
   stored: null,
   internal: null,
+  inline: null,
   'infra-source-stored': null,
   'infra-source-internal': null,
   'infra-source-fallback': null,

x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx

@@ -42,7 +42,10 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
             <CriterionPreview
               key={chartCriterion.field}
               ruleParams={rule.params}
-              sourceId={rule.params.logView.logViewId}
+              logViewReference={{
+                type: 'log-view-reference',
+                logViewId: rule.params.logView.logViewId,
+              }}
               chartCriterion={chartCriterion}
               showThreshold={true}
               executionTimeRange={{ gte: rangeFrom, lte: rangeTo }}

x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx

@@ -9,6 +9,7 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiPopover, EuiContextMenuItem, EuiContextMenuPanel, EuiHeaderLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useLogViewContext } from '../../../hooks/use_log_view';
 import { AlertFlyout } from './alert_flyout';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
@@ -26,14 +27,30 @@ const readOnlyUserTooltipTitle = i18n.translate(
   }
 );
 
+const inlineLogViewTooltipTitle = i18n.translate(
+  'xpack.infra.logs.alertDropdown.inlineLogViewCreateAlertTitle',
+  {
+    defaultMessage: 'Inline Log View',
+  }
+);
+
+const inlineLogViewTooltipContent = i18n.translate(
+  'xpack.infra.logs.alertDropdown.inlineLogViewCreateAlertContent',
+  {
+    defaultMessage: 'Creating alerts is not supported with inline Log Views',
+  }
+);
+
 export const AlertDropdown = () => {
   const {
     services: {
       application: { capabilities },
       observability,
     },
   } = useKibanaContextForPlugin();
-  const canCreateAlerts = capabilities?.logs?.save ?? false;
+  const { isPersistedLogView } = useLogViewContext();
+  const readOnly = !capabilities?.logs?.save;
+  const canCreateAlerts = (!readOnly && isPersistedLogView) ?? false;
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
 
@@ -61,8 +78,20 @@ export const AlertDropdown = () => {
         icon="bell"
         key="createLink"
         onClick={openFlyout}
-        toolTipContent={!canCreateAlerts ? readOnlyUserTooltipContent : undefined}
-        toolTipTitle={!canCreateAlerts ? readOnlyUserTooltipTitle : undefined}
+        toolTipContent={
+          !canCreateAlerts
+            ? readOnly
+              ? readOnlyUserTooltipContent
+              : inlineLogViewTooltipContent
+            : undefined
+        }
+        toolTipTitle={
+          !canCreateAlerts
+            ? readOnly
+              ? readOnlyUserTooltipTitle
+              : inlineLogViewTooltipTitle
+            : undefined
+        }
       >
         <FormattedMessage
           id="xpack.infra.alerting.logs.createAlertButton"
@@ -76,7 +105,7 @@ export const AlertDropdown = () => {
         />
       </EuiContextMenuItem>,
     ];
-  }, [manageRulesLinkProps, canCreateAlerts, openFlyout]);
+  }, [canCreateAlerts, openFlyout, readOnly, manageRulesLinkProps]);
 
   return (
     <>
@@ -104,3 +133,7 @@ export const AlertDropdown = () => {
     </>
   );
 };
+
+// Allow for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default AlertDropdown;

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criteria.tsx

@@ -9,7 +9,10 @@ import React, { useCallback } from 'react';
 import { EuiFlexItem, EuiFlexGroup, EuiButtonEmpty, EuiAccordion, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import type { ResolvedLogViewField } from '../../../../../common/log_views';
+import type {
+  PersistedLogViewReference,
+  ResolvedLogViewField,
+} from '../../../../../common/log_views';
 import { Criterion } from './criterion';
 import {
   PartialRuleParams,
@@ -39,7 +42,7 @@ interface SharedProps {
   defaultCriterion: PartialCriterionType;
   errors: Errors['criteria'];
   ruleParams: PartialRuleParams;
-  sourceId: string;
+  logViewReference: PersistedLogViewReference;
   updateCriteria: (criteria: PartialCriteriaType) => void;
 }
 
@@ -64,7 +67,7 @@ interface CriteriaWrapperProps {
   addCriterion: () => void;
   criteria: PartialCountCriteriaType;
   errors: CriterionErrors;
-  sourceId: SharedProps['sourceId'];
+  logViewReference: SharedProps['logViewReference'];
   isRatio?: boolean;
 }
 
@@ -77,7 +80,7 @@ const CriteriaWrapper: React.FC<CriteriaWrapperProps> = (props) => {
     fields,
     errors,
     ruleParams,
-    sourceId,
+    logViewReference,
     isRatio = false,
   } = props;
 
@@ -105,7 +108,7 @@ const CriteriaWrapper: React.FC<CriteriaWrapperProps> = (props) => {
               <CriterionPreview
                 ruleParams={ruleParams}
                 chartCriterion={criterion}
-                sourceId={sourceId}
+                logViewReference={logViewReference}
                 showThreshold={!isRatio}
               />
             </EuiAccordion>

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx

@@ -21,6 +21,7 @@ import {
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { PersistedLogViewReference } from '../../../../../common/log_views';
 import { ExecutionTimeRange } from '../../../../types';
 import {
   ChartContainer,
@@ -55,15 +56,15 @@ const GROUP_LIMIT = 5;
 interface Props {
   ruleParams: PartialRuleParams;
   chartCriterion: Partial<Criterion>;
-  sourceId: string;
+  logViewReference: PersistedLogViewReference;
   showThreshold: boolean;
   executionTimeRange?: ExecutionTimeRange;
 }
 
 export const CriterionPreview: React.FC<Props> = ({
   ruleParams,
   chartCriterion,
-  sourceId,
+  logViewReference,
   showThreshold,
   executionTimeRange,
 }) => {
@@ -105,7 +106,7 @@ export const CriterionPreview: React.FC<Props> = ({
           ? NUM_BUCKETS
           : NUM_BUCKETS / 4
       } // Display less data for groups due to space limitations
-      sourceId={sourceId}
+      logViewReference={logViewReference}
       threshold={ruleParams.count}
       chartAlertParams={chartAlertParams}
       showThreshold={showThreshold}
@@ -116,7 +117,7 @@ export const CriterionPreview: React.FC<Props> = ({
 
 interface ChartProps {
   buckets: number;
-  sourceId: string;
+  logViewReference: PersistedLogViewReference;
   threshold?: Threshold;
   chartAlertParams: GetLogAlertsChartPreviewDataAlertParamsSubset;
   showThreshold: boolean;
@@ -125,7 +126,7 @@ interface ChartProps {
 
 const CriterionPreviewChart: React.FC<ChartProps> = ({
   buckets,
-  sourceId,
+  logViewReference,
   threshold,
   chartAlertParams,
   showThreshold,
@@ -141,7 +142,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
     hasError,
     chartPreviewData: series,
   } = useChartPreviewData({
-    sourceId,
+    logViewReference,
     ruleParams: chartAlertParams,
     buckets,
     executionTimeRange,

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/editor.tsx

@@ -27,7 +27,6 @@ import {
 } from '../../../../../common/alerting/logs/log_threshold/types';
 import { decodeOrThrow } from '../../../../../common/runtime_types';
 import { ObjectEntries } from '../../../../../common/utility_types';
-import { useSourceId } from '../../../../containers/source_id';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
 import { LogViewProvider, useLogViewContext } from '../../../../hooks/use_log_view';
 import { GroupByExpression } from '../../../common/group_by_expression/group_by_expression';
@@ -54,11 +53,6 @@ const DEFAULT_BASE_EXPRESSION = {
 
 const DEFAULT_FIELD = 'log.level';
 
-const createLogViewReference = (logViewId: string): PersistedLogViewReference => ({
-  logViewId,
-  type: 'log-view-reference',
-});
-
 const createDefaultCriterion = (
   availableFields: ResolvedLogViewField[],
   value: ExpressionCriteria['value']
@@ -100,7 +94,6 @@ export const ExpressionEditor: React.FC<
   RuleTypeParamsExpressionProps<PartialRuleParams, LogsContextMeta>
 > = (props) => {
   const isInternal = props.metadata?.isInternal ?? false;
-  const [logViewId] = useSourceId();
   const {
     services: { logViews },
   } = useKibanaContextForPlugin(); // injected during alert registration
@@ -112,7 +105,7 @@ export const ExpressionEditor: React.FC<
           <Editor {...props} />
         </SourceStatusWrapper>
       ) : (
-        <LogViewProvider logViewId={logViewId} logViews={logViews.client}>
+        <LogViewProvider logViews={logViews.client}>
           <SourceStatusWrapper {...props}>
             <Editor {...props} />
           </SourceStatusWrapper>
@@ -163,7 +156,11 @@ export const Editor: React.FC<RuleTypeParamsExpressionProps<PartialRuleParams, L
 ) => {
   const { setRuleParams, ruleParams, errors } = props;
   const [hasSetDefaults, setHasSetDefaults] = useState<boolean>(false);
-  const { logViewId, resolvedLogView } = useLogViewContext();
+  const { logViewReference, resolvedLogView } = useLogViewContext();
+
+  if (logViewReference.type !== 'log-view-reference') {
+    throw new Error('The Log Threshold rule type only supports persisted Log Views');
+  }
 
   const {
     criteria: criteriaErrors,
@@ -230,8 +227,6 @@ export const Editor: React.FC<RuleTypeParamsExpressionProps<PartialRuleParams, L
     [setRuleParams]
   );
 
-  const logViewReference = useMemo(() => createLogViewReference(logViewId), [logViewId]);
-
   const defaultCountAlertParams = useMemo(
     () => createDefaultCountRuleParams(supportedFields, logViewReference),
     [supportedFields, logViewReference]
@@ -279,7 +274,7 @@ export const Editor: React.FC<RuleTypeParamsExpressionProps<PartialRuleParams, L
       defaultCriterion={defaultCountAlertParams.criteria[0]}
       errors={criteriaErrors}
       ruleParams={ruleParams}
-      sourceId={logViewId}
+      logViewReference={logViewReference}
       updateCriteria={updateCriteria}
     />
   ) : null;

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/hooks/use_chart_preview_data.tsx

@@ -8,6 +8,7 @@
 import { useState, useMemo } from 'react';
 import { HttpHandler } from '@kbn/core/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { PersistedLogViewReference } from '../../../../../../common/log_views';
 import { ExecutionTimeRange } from '../../../../../types';
 import { useTrackedPromise } from '../../../../../utils/use_tracked_promise';
 import {
@@ -20,14 +21,14 @@ import { decodeOrThrow } from '../../../../../../common/runtime_types';
 import { GetLogAlertsChartPreviewDataAlertParamsSubset } from '../../../../../../common/http_api/log_alerts';
 
 interface Options {
-  sourceId: string;
+  logViewReference: PersistedLogViewReference;
   ruleParams: GetLogAlertsChartPreviewDataAlertParamsSubset;
   buckets: number;
   executionTimeRange?: ExecutionTimeRange;
 }
 
 export const useChartPreviewData = ({
-  sourceId,
+  logViewReference,
   ruleParams,
   buckets,
   executionTimeRange,
@@ -43,7 +44,7 @@ export const useChartPreviewData = ({
       createPromise: async () => {
         setHasError(false);
         return await callGetChartPreviewDataAPI(
-          sourceId,
+          logViewReference,
           http!.fetch,
           ruleParams,
           buckets,
@@ -58,7 +59,7 @@ export const useChartPreviewData = ({
         setHasError(true);
       },
     },
-    [sourceId, http, ruleParams, buckets]
+    [logViewReference, http, ruleParams, buckets]
   );
 
   const isLoading = useMemo(
@@ -75,7 +76,7 @@ export const useChartPreviewData = ({
 };
 
 export const callGetChartPreviewDataAPI = async (
-  sourceId: string,
+  logViewReference: PersistedLogViewReference,
   fetch: HttpHandler,
   alertParams: GetLogAlertsChartPreviewDataAlertParamsSubset,
   buckets: number,
@@ -86,7 +87,7 @@ export const callGetChartPreviewDataAPI = async (
     body: JSON.stringify(
       getLogAlertsChartPreviewDataRequestPayloadRT.encode({
         data: {
-          logView: { type: 'log-view-reference', logViewId: sourceId },
+          logView: logViewReference,
           alertParams,
           buckets,
           executionTimeRange,

x-pack/plugins/infra/public/alerting/log_threshold/components/lazy_alert_dropdown.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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';
+
+const LazyAlertDropdown = React.lazy(() => import('./alert_dropdown'));
+
+export const LazyAlertDropdownWrapper = () => (
+  <React.Suspense fallback={<div />}>
+    <LazyAlertDropdown />
+  </React.Suspense>
+);

x-pack/plugins/infra/public/alerting/log_threshold/index.ts

@@ -6,4 +6,4 @@
  */
 
 export * from './log_threshold_rule_type';
-export { AlertDropdown } from './components/alert_dropdown';
+export { LazyAlertDropdownWrapper } from './components/lazy_alert_dropdown';