[GenAI] Integration assistant UI

packages/kbn-doc-links/src/get_doc_links.ts

@@ -28,6 +28,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
   const ELASTICSEARCH_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/`;
   const KIBANA_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/`;
   const FLEET_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/fleet/${DOC_LINK_VERSION}/`;
+  const INTEGRATIONS_DEV_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/integrations-developer/${DOC_LINK_VERSION}/`;
   const PLUGIN_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`;
   const OBSERVABILITY_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/`;
   const APM_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/apm/`;
@@ -861,6 +862,9 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       roleAndPrivileges: `${FLEET_DOCS}fleet-roles-and-privileges.html`,
       proxiesSettings: `${FLEET_DOCS}fleet-agent-proxy-support.html`,
     },
+    integrationDeveloper: {
+      upload: `${INTEGRATIONS_DEV_DOCS}upload-a-new-integration.html`,
+    },
     ecs: {
       guide: `${ELASTIC_WEBSITE_URL}guide/en/ecs/${ECS_VERSION}/index.html`,
       dataStreams: `${ELASTIC_WEBSITE_URL}guide/en/ecs/${ECS_VERSION}/ecs-data_stream.html`,

packages/kbn-doc-links/src/types.ts

@@ -554,6 +554,9 @@ export interface DocLinks {
     roleAndPrivileges: string;
     proxiesSettings: string;
   }>;
+  readonly integrationDeveloper: {
+    upload: string;
+  };
   readonly ecs: {
     readonly guide: string;
     readonly dataStreams: string;

packages/kbn-optimizer/limits.yml

@@ -82,6 +82,7 @@ pageLoadAssetSize:
   ingestPipelines: 58003
   inputControlVis: 172675
   inspector: 148711
+  integrationAssistant: 20927
   interactiveSetup: 80000
   investigate: 17970
   kibanaOverview: 56279

x-pack/.i18nrc.json

@@ -51,6 +51,7 @@
     "xpack.logsShared": "plugins/observability_solution/logs_shared",
     "xpack.fleet": "plugins/fleet",
     "xpack.ingestPipelines": "plugins/ingest_pipelines",
+    "xpack.integrationAssistant": "plugins/integration_assistant",
     "xpack.investigate": "plugins/observability_solution/investigate",
     "xpack.kubernetesSecurity": "plugins/kubernetes_security",
     "xpack.lens": "plugins/lens",

x-pack/packages/kbn-elastic-assistant/impl/assistant_context/constants.tsx

@@ -7,6 +7,7 @@
 
 import { KnowledgeBaseConfig } from '../assistant/types';
 
+export const INTEGRATIONS_ASSISTANT_STORAGE_KEY = 'attackDiscovery';
 export const ATTACK_DISCOVERY_STORAGE_KEY = 'attackDiscovery';
 export const DEFAULT_ASSISTANT_NAMESPACE = 'elasticAssistantDefault';
 export const QUICK_PROMPT_LOCAL_STORAGE_KEY = 'quickPrompts';

x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx

@@ -34,6 +34,7 @@ const ConnectorButtonWrapper = styled.div`
 export interface ConnectorSetupProps {
   conversation?: Conversation;
   isFlyoutMode?: boolean;
+  actionTypeIds?: string[];
   onSetupComplete?: () => void;
   onConversationUpdate: ({ cId, cTitle }: { cId: string; cTitle: string }) => Promise<void>;
   updateConversationsOnSaveConnector?: boolean;
@@ -42,6 +43,7 @@ export interface ConnectorSetupProps {
 export const useConnectorSetup = ({
   conversation: defaultConversation,
   isFlyoutMode,
+  actionTypeIds,
   onSetupComplete,
   onConversationUpdate,
   updateConversationsOnSaveConnector = true,
@@ -74,7 +76,7 @@ export const useConnectorSetup = ({
     // If no presentation data on messages, default to showing add connector button so it doesn't delay render and flash on screen
     return conversationHasNoPresentationData(conversation);
   });
-  const { data: actionTypes } = useLoadActionTypes({ http });
+  const { data: actionTypes } = useLoadActionTypes({ http, actionTypeIds });
 
   const [selectedActionType, setSelectedActionType] = useState<ActionType | null>(null);
 

x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_action_types/index.tsx

@@ -27,11 +27,13 @@ export const QUERY_KEY = ['elastic-assistant, load-action-types'];
 export interface Props {
   http: HttpSetup;
   toasts?: IToasts;
+  actionTypeIds?: string[];
 }
 
 export const useLoadActionTypes = ({
   http,
   toasts,
+  actionTypeIds,
 }: Props): UseQueryResult<ActionType[], IHttpFetchError> => {
   return useQuery(
     QUERY_KEY,
@@ -42,8 +44,10 @@ export const useLoadActionTypes = ({
         featureId: GenerativeAIForSecurityConnectorFeatureId,
       });
       const sortedData = queryResult.sort((a, b) => a.name.localeCompare(b.name));
-
-      return sortedData;
+      if (!actionTypeIds) {
+        return sortedData;
+      }
+      return sortedData.filter((actionType) => actionTypeIds.includes(actionType.id));
     },
     {
       retry: false,

x-pack/packages/kbn-elastic-assistant/index.ts

@@ -81,6 +81,7 @@ export {
   DEFAULT_ASSISTANT_NAMESPACE,
   DEFAULT_LATEST_ALERTS,
   KNOWLEDGE_BASE_LOCAL_STORAGE_KEY,
+  INTEGRATIONS_ASSISTANT_STORAGE_KEY,
 } from './impl/assistant_context/constants';
 
 export { useLoadConnectors } from './impl/connectorland/use_load_connectors';

x-pack/packages/security-solution/features/src/product_features_keys.ts

@@ -67,6 +67,11 @@ export enum ProductFeatureSecurityKey {
    * enables all rule actions
    */
   externalRuleActions = 'external_rule_actions',
+
+  /**
+   * enables the assistant for external integrations
+   */
+  integrationsAssistant = 'integrations_assistant',
 }
 
 export enum ProductFeatureCasesKey {

x-pack/packages/security-solution/features/src/security/product_feature_config.ts

@@ -116,9 +116,10 @@ export const securityDefaultProductFeaturesConfig: DefaultSecurityProductFeature
     ],
   },
 
-  // Product features without RBAC
+  // Product features without privileges
   [ProductFeatureSecurityKey.osqueryAutomatedResponseActions]: {},
   [ProductFeatureSecurityKey.endpointProtectionUpdates]: {},
   [ProductFeatureSecurityKey.endpointAgentTamperProtection]: {},
   [ProductFeatureSecurityKey.externalRuleActions]: {},
+  [ProductFeatureSecurityKey.integrationsAssistant]: {},
 };

x-pack/plugins/actions/server/application/connector/methods/get/get.ts

@@ -62,6 +62,7 @@ export async function get({
       id,
       actionTypeId: foundInMemoryConnector.actionTypeId,
       name: foundInMemoryConnector.name,
+      config: foundInMemoryConnector.config,
       isPreconfigured: foundInMemoryConnector.isPreconfigured,
       isSystemAction: foundInMemoryConnector.isSystemAction,
       isDeprecated: isConnectorDeprecated(foundInMemoryConnector),

x-pack/plugins/fleet/kibana.jsonc

@@ -37,6 +37,7 @@
       "ingestPipelines",
       "spaces",
       "guidedOnboarding",
+      "integrationAssistant",
     ],
     "requiredBundles": [
       "kibanaReact",

x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx

@@ -42,6 +42,14 @@ const breadcrumbGetters: {
       }),
     },
   ],
+  integration_create: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.fleet.breadcrumbs.createIntegrationPageTitle', {
+        defaultMessage: 'Create integration',
+      }),
+    },
+  ],
   integration_details_overview: ({ pkgTitle }) => [BASE_BREADCRUMB, { text: pkgTitle }],
   integration_policy_edit: ({ pkgTitle, pkgkey, policyName }) => [
     BASE_BREADCRUMB,

x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx

@@ -8,7 +8,7 @@ import React, { memo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiNotificationBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useLink } from '../../../hooks';
+import { useLink, useStartServices } from '../../../hooks';
 import type { Section } from '../sections';
 
 import { WithHeaderLayout } from '.';
@@ -21,6 +21,7 @@ interface Props {
 
 export const DefaultLayout: React.FC<Props> = memo(
   ({ section, children, notificationsBySection }) => {
+    const { integrationAssistant } = useStartServices();
     const { getHref } = useLink();
     const tabs = [
       {
@@ -48,30 +49,46 @@ export const DefaultLayout: React.FC<Props> = memo(
     return (
       <WithHeaderLayout
         leftColumn={
-          <EuiFlexGroup direction="column" gutterSize="none" justifyContent="center">
-            <EuiText>
-              <h1>
-                <FormattedMessage
-                  id="xpack.fleet.integrationsHeaderTitle"
-                  defaultMessage="Integrations"
-                />
-              </h1>
-            </EuiText>
-
-            <EuiSpacer size="s" />
-
-            <EuiFlexItem grow={false}>
-              <EuiText size="s" color="subdued">
-                <p>
+          <EuiFlexGroup direction="row" gutterSize="none" justifyContent="center">
+            <EuiFlexGroup direction="column" gutterSize="none" justifyContent="center">
+              <EuiText>
+                <h1>
                   <FormattedMessage
-                    id="xpack.fleet.epm.pageSubtitle"
-                    defaultMessage="Choose an integration to start collecting and analyzing your data."
+                    id="xpack.fleet.integrationsHeaderTitle"
+                    defaultMessage="Integrations"
                   />
-                </p>
+                </h1>
               </EuiText>
-            </EuiFlexItem>
+
+              <EuiSpacer size="s" />
+
+              <EuiFlexItem grow={false}>
+                <EuiText size="s" color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.fleet.epm.pageSubtitle"
+                      defaultMessage="Choose an integration to start collecting and analyzing your data."
+                    />
+                  </p>
+                </EuiText>
+              </EuiFlexItem>
+
+              <EuiSpacer size="s" />
+            </EuiFlexGroup>
           </EuiFlexGroup>
         }
+        rightColumnGrow={false}
+        rightColumn={
+          <>
+            {integrationAssistant && (
+              <EuiFlexItem grow={false}>
+                <integrationAssistant.CreateIntegrationCardButton
+                  href={getHref('integration_create')}
+                />
+              </EuiFlexItem>
+            )}
+          </>
+        }
         tabs={tabs.map((tab) => {
           const notificationCount = notificationsBySection?.[tab.section];
           return {

x-pack/plugins/fleet/public/applications/integrations/sections/epm/index.tsx

@@ -11,14 +11,16 @@ import { Routes, Route } from '@kbn/shared-ux-router';
 import { EuiSkeletonText } from '@elastic/eui';
 
 import { INTEGRATIONS_ROUTING_PATHS } from '../../constants';
-import { IntegrationsStateContextProvider, useBreadcrumbs } from '../../hooks';
+import { IntegrationsStateContextProvider, useBreadcrumbs, useStartServices } from '../../hooks';
 
 import { EPMHomePage } from './screens/home';
 import { Detail } from './screens/detail';
 import { Policy } from './screens/policy';
+import { CreateIntegration } from './screens/create';
 import { CustomLanguagesOverview } from './screens/detail/custom_languages_overview';
 
 export const EPMApp: React.FunctionComponent = () => {
+  const { integrationAssistant } = useStartServices();
   useBreadcrumbs('integrations');
 
   return (
@@ -38,6 +40,11 @@ export const EPMApp: React.FunctionComponent = () => {
           </React.Suspense>
         </IntegrationsStateContextProvider>
       </Route>
+      {integrationAssistant && (
+        <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_create}>
+          <CreateIntegration />
+        </Route>
+      )}
       <Route path={INTEGRATIONS_ROUTING_PATHS.integrations}>
         <EPMHomePage />
       </Route>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/create/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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, { useMemo } from 'react';
+
+import { useStartServices, useBreadcrumbs } from '../../../../hooks';
+
+export const CreateIntegration = React.memo(() => {
+  const { integrationAssistant } = useStartServices();
+  useBreadcrumbs('integration_create');
+
+  const CreateIntegrationAssistant = useMemo(
+    () => integrationAssistant?.CreateIntegration,
+    [integrationAssistant]
+  );
+
+  return CreateIntegrationAssistant ? <CreateIntegrationAssistant /> : null;
+});

x-pack/plugins/fleet/public/components/header.tsx

@@ -83,7 +83,6 @@ export const Header: React.FC<HeaderProps> = ({
       <EuiFlexGroup>
         {tabs ? (
           <EuiFlexItem>
-            <EuiSpacer size="s" />
             <Tabs className={tabsClassName}>
               {tabs.map((props, index) => (
                 <EuiTab {...(props as EuiTabProps)} key={`${props.id}-${index}`}>

x-pack/plugins/fleet/public/constants/page_paths.ts

@@ -11,6 +11,7 @@ export type StaticPage =
   | 'base'
   | 'overview'
   | 'integrations'
+  | 'integration_create'
   | 'policies'
   | 'policies_list'
   | 'enrollment_tokens'
@@ -97,6 +98,7 @@ export const INTEGRATIONS_ROUTING_PATHS = {
   integrations_all: '/browse/:category?/:subcategory?',
   integrations_installed: '/installed/:category?',
   integrations_installed_updates_available: '/installed/updates_available/:category?',
+  integrations_create: '/create',
   integration_details: '/detail/:pkgkey/:panel?',
   integration_details_overview: '/detail/:pkgkey/overview',
   integration_details_policies: '/detail/:pkgkey/policies',
@@ -152,6 +154,7 @@ export const pagePathGetters: {
     const queryParams = query ? `?${INTEGRATIONS_SEARCH_QUERYPARAM}=${query}` : ``;
     return [INTEGRATIONS_BASE_PATH, `/installed/updates_available${categoryPath}${queryParams}`];
   },
+  integration_create: () => [INTEGRATIONS_BASE_PATH, `/create`],
   integration_details_overview: ({ pkgkey, integration }) => [
     INTEGRATIONS_BASE_PATH,
     `/detail/${pkgkey}/overview${integration ? `?integration=${integration}` : ''}`,

x-pack/plugins/fleet/public/plugin.ts

@@ -18,6 +18,7 @@ import { DEFAULT_APP_CATEGORIES } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 
 import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
+import type { IntegrationAssistantPluginStart } from '@kbn/integration-assistant-plugin/public';
 import { ELASTIC_HTTP_VERSION_HEADER } from '@kbn/core-http-common';
 
 import type {
@@ -130,6 +131,7 @@ export interface FleetStartDeps {
   navigation: NavigationPublicPluginStart;
   customIntegrations: CustomIntegrationsStart;
   share: SharePluginStart;
+  integrationAssistant?: IntegrationAssistantPluginStart;
   cloud?: CloudStart;
   usageCollection?: UsageCollectionStart;
   guidedOnboarding?: GuidedOnboardingPluginStart;
@@ -139,6 +141,7 @@ export interface FleetStartServices extends CoreStart, Exclude<FleetStartDeps, '
   storage: Storage;
   share: SharePluginStart;
   dashboard: DashboardStart;
+  integrationAssistant?: IntegrationAssistantPluginStart;
   cloud?: CloudSetup & CloudStart;
   discover?: DiscoverStart;
   spaces?: SpacesPluginStart;

x-pack/plugins/fleet/tsconfig.json

@@ -111,5 +111,6 @@
     "@kbn/fields-metadata-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/core-saved-objects-utils-server",
+    "@kbn/integration-assistant-plugin",
   ]
 }

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

@@ -13,8 +13,10 @@ export const INTEGRATION_ASSISTANT_APP_ROUTE = '/app/integration_assistant';
 
 // Server API Routes
 export const INTEGRATION_ASSISTANT_BASE_PATH = '/api/integration_assistant';
+
 export const ECS_GRAPH_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/ecs`;
 export const CATEGORIZATION_GRAPH_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/categorization`;
 export const RELATED_GRAPH_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/related`;
+export const CHECK_PIPELINE_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/pipeline`;
 export const INTEGRATION_BUILDER_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/build`;
-export const TEST_PIPELINE_PATH = `${INTEGRATION_ASSISTANT_BASE_PATH}/pipeline`;
+export const FLEET_PACKAGES_PATH = `/api/fleet/epm/packages`;