[Serverless Search] Index Management - Index Details Overview

x-pack/plugins/serverless_search/common/doc_links.ts

@@ -19,6 +19,7 @@ class ESDocLinks {
   public roleDescriptors: string = '';
   public securityApis: string = '';
   public ingestionPipelines: string = '';
+  public dataStreams: string = '';
   // Client links
   public elasticsearchClients: string = '';
   // go
@@ -61,6 +62,7 @@ class ESDocLinks {
     this.roleDescriptors = newDocLinks.serverlessSecurity.apiKeyPrivileges;
     this.securityApis = newDocLinks.apis.securityApis;
     this.ingestionPipelines = newDocLinks.ingest.pipelines;
+    this.dataStreams = newDocLinks.elasticsearch.dataStreams;
 
     // Client links
     this.elasticsearchClients = newDocLinks.serverlessClients.clientLib;

x-pack/plugins/serverless_search/common/types/index.ts

@@ -5,6 +5,9 @@
  * 2.0.
  */
 
+import { IndicesIndexState, IndicesStatsIndicesStats } from '@elastic/elasticsearch/lib/api/types';
+import { Connector } from '@kbn/search-connectors';
+
 export interface CreateAPIKeyArgs {
   expiration?: string;
   metadata?: Record<string, any>;
@@ -20,3 +23,11 @@ export interface IndexData {
 export interface FetchIndicesResult {
   indices: IndexData[];
 }
+
+export interface FetchIndexResult {
+  index: IndicesIndexState & {
+    connector?: Connector;
+    count: number;
+    stats?: IndicesStatsIndicesStats;
+  };
+}

x-pack/plugins/serverless_search/public/application/components/badge_list.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { EuiBadgeGroup, EuiBadge } from '@elastic/eui';
+
+export interface BadeListProps {
+  badges: React.ReactNode[];
+  maxBadgesToDisplay?: number;
+}
+
+export const BadgeList = ({ badges, maxBadgesToDisplay }: BadeListProps) => {
+  const maxBadges = maxBadgesToDisplay ?? 3;
+  if (badges.length === 0) {
+    return <></>;
+  }
+
+  const badgesToDisplay = badges.slice(0, maxBadges);
+  return (
+    <EuiBadgeGroup gutterSize="s" css={{ width: '100%' }}>
+      {badgesToDisplay.map((badge) => badge)}
+      {badges.length > maxBadges && (
+        <EuiBadge color="hollow">+{badges.length - maxBadges}</EuiBadge>
+      )}
+    </EuiBadgeGroup>
+  );
+};

x-pack/plugins/serverless_search/public/application/components/connectors/empty_connectors_prompt.tsx

@@ -19,14 +19,16 @@ import {
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { PLUGIN_ID } from '../../../../common';
+
 import { useConnectorTypes } from '../../hooks/api/use_connector_types';
-import { useKibanaServices } from '../../hooks/use_kibana';
+import { useCreateConnector } from '../../hooks/api/use_create_connector';
+import { useAssetBasePath } from '../../hooks/use_asset_base_path';
 
 export const EmptyConnectorsPrompt: React.FC = () => {
-  const { http } = useKibanaServices();
   const { data: connectorTypes } = useConnectorTypes();
-  const assetBasePath = http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets`);
+  const { createConnector, isLoading } = useCreateConnector();
+
+  const assetBasePath = useAssetBasePath();
   const connectorsPath = assetBasePath + '/connectors.svg';
   return (
     <EuiFlexGroup alignItems="center" direction="column">
@@ -167,6 +169,8 @@ export const EmptyConnectorsPrompt: React.FC = () => {
                 data-test-subj="serverlessSearchEmptyConnectorsPromptCreateConnectorButton"
                 fill
                 iconType="plusInCircleFilled"
+                onClick={() => createConnector()}
+                isLoading={isLoading}
               >
                 {i18n.translate('xpack.serverlessSearch.connectorsEmpty.createConnector', {
                   defaultMessage: 'Create connector',

x-pack/plugins/serverless_search/public/application/components/index_documents/documents_tab.tsx

@@ -15,7 +15,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { ServerlessSearchPluginStartDependencies } from '../../../types';
 import { IndexDocuments } from './documents';
 
-export const createIndexOverviewContent = (
+export const createIndexDocumentsContent = (
   core: CoreStart,
   services: ServerlessSearchPluginStartDependencies
 ): IndexDetailsTab => {

x-pack/plugins/serverless_search/public/application/components/index_management/api_empty_prompt.tsx

@@ -0,0 +1,167 @@
+/*
+ * 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, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiEmptyPrompt,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiIcon,
+  EuiText,
+  EuiButtonEmpty,
+  EuiLink,
+  EuiPanel,
+  EuiTitle,
+  EuiSpacer,
+  EuiSteps,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import {
+  CodeBox,
+  getConsoleRequest,
+  getLanguageDefinitionCodeSnippet,
+  LanguageDefinition,
+  LanguageDefinitionSnippetArguments,
+} from '@kbn/search-api-panels';
+
+import { useAssetBasePath } from '../../hooks/use_asset_base_path';
+import { useKibanaServices } from '../../hooks/use_kibana';
+import { javaDefinition } from '../languages/java';
+import { languageDefinitions } from '../languages/languages';
+import { LanguageGrid } from '../languages/language_grid';
+import {
+  API_KEY_PLACEHOLDER,
+  CLOUD_ID_PLACEHOLDER,
+  ELASTICSEARCH_URL_PLACEHOLDER,
+} from '../../constants';
+
+import { ApiKeyPanel } from '../api_key/api_key';
+
+export interface APIIndexEmptyPromptProps {
+  indexName: string;
+  onBackClick?: () => void;
+}
+
+export const APIIndexEmptyPrompt = ({ indexName, onBackClick }: APIIndexEmptyPromptProps) => {
+  const { application, cloud, share } = useKibanaServices();
+  const assetBasePath = useAssetBasePath();
+  const [selectedLanguage, setSelectedLanguage] =
+    React.useState<LanguageDefinition>(javaDefinition);
+  const [clientApiKey, setClientApiKey] = useState<string>(API_KEY_PLACEHOLDER);
+  const { elasticsearchURL, cloudId } = useMemo(() => {
+    return {
+      elasticsearchURL: cloud?.elasticsearchUrl ?? ELASTICSEARCH_URL_PLACEHOLDER,
+      cloudId: cloud?.cloudId ?? CLOUD_ID_PLACEHOLDER,
+    };
+  }, [cloud]);
+  const codeSnippetArguments: LanguageDefinitionSnippetArguments = {
+    url: elasticsearchURL,
+    apiKey: clientApiKey,
+    cloudId,
+    indexName,
+  };
+
+  const apiIngestSteps: EuiContainedStepProps[] = [
+    {
+      title: i18n.translate(
+        'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.ingest.title',
+        { defaultMessage: 'Ingest data via API using a programming language client' }
+      ),
+      children: (
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            <LanguageGrid
+              assetBasePath={assetBasePath}
+              setSelectedLanguage={setSelectedLanguage}
+              languages={languageDefinitions}
+              selectedLanguage={selectedLanguage.id}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <CodeBox
+              languages={languageDefinitions}
+              codeSnippet={getLanguageDefinitionCodeSnippet(
+                selectedLanguage,
+                'ingestDataIndex',
+                codeSnippetArguments
+              )}
+              consoleRequest={getConsoleRequest('ingestDataIndex')}
+              selectedLanguage={selectedLanguage}
+              setSelectedLanguage={setSelectedLanguage}
+              assetBasePath={assetBasePath}
+              application={application}
+              sharePlugin={share}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
+    },
+    {
+      title: i18n.translate(
+        'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.apiKey.title',
+        { defaultMessage: 'Prepare an API key' }
+      ),
+      children: <ApiKeyPanel setClientApiKey={setClientApiKey} />,
+    },
+  ];
+
+  return (
+    <EuiPanel>
+      <EuiButtonEmpty
+        data-test-subj="serverlessSearchAPIIndexEmptyPromptBackButton"
+        onClick={onBackClick}
+        iconSide="left"
+        iconType="arrowLeft"
+      >
+        <FormattedMessage
+          id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.backBtn"
+          defaultMessage="Back"
+        />
+      </EuiButtonEmpty>
+      <EuiEmptyPrompt
+        icon={<EuiIcon type="addDataApp" size="xl" />}
+        title={
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.title"
+                defaultMessage="Ingest content"
+              />
+            </h5>
+          </EuiTitle>
+        }
+        body={
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.body"
+                defaultMessage="Customize these variables to match your content. For a full setup guide, visit our {getStartedLink} guide."
+                values={{
+                  getStartedLink: (
+                    <EuiLink
+                      data-test-subj="serverlessSearchAPIIndexEmptyPromptGetStartedLink"
+                      onClick={() => application.navigateToApp('elasticsearch')}
+                    >
+                      {i18n.translate(
+                        'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.body.getStartedLink',
+                        { defaultMessage: 'Get started' }
+                      )}
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+          </EuiText>
+        }
+      />
+      <EuiSpacer />
+      <EuiSteps steps={apiIngestSteps} titleSize="xs" />
+    </EuiPanel>
+  );
+};

x-pack/plugins/serverless_search/public/application/components/index_management/connector_empty_prompt.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { EmptyConnectorsPrompt } from '../connectors/empty_connectors_prompt';
+
+interface ConnectorIndexEmptyPromptProps {
+  indexName: string;
+  onBackClick?: () => void;
+}
+
+export const ConnectorIndexEmptyPrompt = ({ onBackClick }: ConnectorIndexEmptyPromptProps) => {
+  return (
+    <EuiPanel>
+      <EuiButtonEmpty
+        data-test-subj="serverlessSearchConnectorIndexEmptyPromptBackButton"
+        onClick={onBackClick}
+        iconSide="left"
+        iconType="arrowLeft"
+      >
+        <FormattedMessage
+          id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.connector.backBtn"
+          defaultMessage="Back"
+        />
+      </EuiButtonEmpty>
+      <EmptyConnectorsPrompt />
+    </EuiPanel>
+  );
+};