"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ElasticsearchOverview = void 0;
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _searchApiPanels = require("@kbn/search-api-panels");
var _react = _interopRequireWildcard(require("react"));
var _doc_links = require("../../../common/doc_links");
var _common = require("../../../common");
var _use_kibana = require("../hooks/use_kibana");
var _constants = require("../constants");
var _javascript = require("./languages/javascript");
var _languages = require("./languages/languages");
require("./overview.scss");
var _api_key = require("./api_key/api_key");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * 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.
 */

const ElasticsearchOverview = () => {
  const [selectedLanguage, setSelectedLanguage] = (0, _react.useState)(_javascript.javascriptDefinition);
  const [clientApiKey, setClientApiKey] = (0, _react.useState)(_constants.API_KEY_PLACEHOLDER);
  const {
    application,
    cloud,
    http,
    userProfile,
    share
  } = (0, _use_kibana.useKibanaServices)();
  const {
    navigateToApp
  } = application;
  const elasticsearchURL = (0, _react.useMemo)(() => {
    var _cloud$elasticsearchU;
    return (_cloud$elasticsearchU = cloud === null || cloud === void 0 ? void 0 : cloud.elasticsearchUrl) !== null && _cloud$elasticsearchU !== void 0 ? _cloud$elasticsearchU : _constants.ELASTICSEARCH_URL_PLACEHOLDER;
  }, [cloud]);
  const assetBasePath = http.basePath.prepend(`/plugins/${_common.PLUGIN_ID}/assets/`);
  const codeSnippetArguments = {
    url: elasticsearchURL,
    apiKey: clientApiKey
  };
  return /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate, {
    offset: 0,
    grow: true,
    restrictWidth: true,
    "data-test-subj": "svlSearchOverviewPage"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    alignment: "top",
    className: "serverlessSearchHeaderSection"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    color: "ghost"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.WelcomeBanner, {
    userProfile: userProfile,
    assetBasePath: assetBasePath
  }))), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.SelectClientPanel, {
    docLinks: _doc_links.docLinks,
    http: http
  }, _languages.languageDefinitions.map((language, index) => /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    key: `panelItem.${index}`
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.LanguageClientPanel, {
    language: language,
    setSelectedLanguage: setSelectedLanguage,
    isSelectedLanguage: selectedLanguage === language,
    assetBasePath: assetBasePath
  }))))), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.InstallClientPanel, {
    codeSnippet: (0, _searchApiPanels.getLanguageDefinitionCodeSnippet)(selectedLanguage, 'installClient', codeSnippetArguments),
    consoleRequest: (0, _searchApiPanels.getConsoleRequest)('installClient'),
    languages: _languages.languageDefinitions,
    language: selectedLanguage,
    setSelectedLanguage: setSelectedLanguage,
    assetBasePath: assetBasePath,
    application: application,
    sharePlugin: share
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.OverviewPanel, {
    description: _i18n.i18n.translate('xpack.serverlessSearch.apiKey.description', {
      defaultMessage: "You'll need these unique identifiers to securely connect to your Elasticsearch project."
    }),
    leftPanelContent: /*#__PURE__*/_react.default.createElement(_api_key.ApiKeyPanel, {
      setClientApiKey: setClientApiKey
    }),
    links: [{
      href: _doc_links.docLinks.securityApis,
      label: _i18n.i18n.translate('xpack.serverlessSearch.configureClient.basicConfigLabel', {
        defaultMessage: 'Basic configuration'
      })
    }],
    title: _i18n.i18n.translate('xpack.serverlessSearch.apiKey.title', {
      defaultMessage: 'Store your API key and Cloud ID'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.OverviewPanel, {
    description: _i18n.i18n.translate('xpack.serverlessSearch.configureClient.description', {
      defaultMessage: 'Initialize your client with your unique API key and Cloud ID'
    }),
    leftPanelContent: /*#__PURE__*/_react.default.createElement(_searchApiPanels.CodeBox, {
      languages: _languages.languageDefinitions,
      codeSnippet: (0, _searchApiPanels.getLanguageDefinitionCodeSnippet)(selectedLanguage, 'configureClient', codeSnippetArguments),
      consoleRequest: (0, _searchApiPanels.getConsoleRequest)('configureClient'),
      selectedLanguage: selectedLanguage,
      setSelectedLanguage: setSelectedLanguage,
      assetBasePath: assetBasePath,
      application: application,
      sharePlugin: share
    }),
    links: [...(selectedLanguage.basicConfig ? [{
      href: selectedLanguage.basicConfig,
      label: _i18n.i18n.translate('xpack.serverlessSearch.configureClient.basicConfigLabel', {
        defaultMessage: 'Basic configuration'
      })
    }] : [])],
    title: _i18n.i18n.translate('xpack.serverlessSearch.configureClient.title', {
      defaultMessage: 'Configure your client'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.OverviewPanel, {
    description: _i18n.i18n.translate('xpack.serverlessSearch.testConnection.description', {
      defaultMessage: 'Send a test request to confirm your language client and Elasticsearch instance are up and running.'
    }),
    leftPanelContent: /*#__PURE__*/_react.default.createElement(_searchApiPanels.CodeBox, {
      languages: _languages.languageDefinitions,
      codeSnippet: (0, _searchApiPanels.getLanguageDefinitionCodeSnippet)(selectedLanguage, 'testConnection', codeSnippetArguments),
      consoleRequest: (0, _searchApiPanels.getConsoleRequest)('testConnection'),
      selectedLanguage: selectedLanguage,
      setSelectedLanguage: setSelectedLanguage,
      assetBasePath: assetBasePath,
      application: application,
      sharePlugin: share
    }),
    links: [],
    title: _i18n.i18n.translate('xpack.serverlessSearch.testConnection.title', {
      defaultMessage: 'Test your connection'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.IngestData, {
    codeSnippet: (0, _searchApiPanels.getLanguageDefinitionCodeSnippet)(selectedLanguage, 'ingestData', codeSnippetArguments),
    consoleRequest: (0, _searchApiPanels.getConsoleRequest)('ingestData'),
    languages: _languages.languageDefinitions,
    selectedLanguage: selectedLanguage,
    setSelectedLanguage: setSelectedLanguage,
    assetBasePath: assetBasePath,
    docLinks: _doc_links.docLinks,
    application: application,
    sharePlugin: share
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    color: "subdued",
    bottomBorder: "extended"
  }, /*#__PURE__*/_react.default.createElement(_searchApiPanels.OverviewPanel, {
    description: _i18n.i18n.translate('xpack.serverlessSearch.searchQuery.description', {
      defaultMessage: "Now you're ready to start experimenting with searching and performing aggregations on your Elasticsearch data."
    }),
    leftPanelContent: /*#__PURE__*/_react.default.createElement(_searchApiPanels.CodeBox, {
      languages: _languages.languageDefinitions,
      codeSnippet: (0, _searchApiPanels.getLanguageDefinitionCodeSnippet)(selectedLanguage, 'buildSearchQuery', codeSnippetArguments),
      consoleRequest: (0, _searchApiPanels.getConsoleRequest)('buildSearchQuery'),
      selectedLanguage: selectedLanguage,
      setSelectedLanguage: setSelectedLanguage,
      assetBasePath: assetBasePath,
      application: application,
      sharePlugin: share
    }),
    links: [],
    title: _i18n.i18n.translate('xpack.serverlessSearch.searchQuery.title', {
      defaultMessage: 'Build your first search query'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    alignment: "top",
    className: "serverlessSearchFooterCardsSection"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiTitle, {
    size: "l"
  }, /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement(_eui.EuiTextColor, {
    color: "ghost"
  }, _i18n.i18n.translate('xpack.serverlessSearch.footer.title', {
    defaultMessage: "What's next?"
  })))))), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, null), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "xl"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiCard, {
    paddingSize: "xl",
    textAlign: "left",
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.discoverCard.title', {
      defaultMessage: 'Explore and visualize your data in Discover'
    }),
    description: _i18n.i18n.translate('xpack.serverlessSearch.footer.discoverCard.description', {
      defaultMessage: 'With Discover, you can quickly search and filter your data, get information about the structure of the fields, and display your findings in a visualization.'
    }),
    footer: /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
      color: "primary",
      onClick: () => navigateToApp('discover')
    }, _i18n.i18n.translate('xpack.serverlessSearch.footer.discoverCard.buttonText', {
      defaultMessage: 'Explore data in Discover'
    })))),
    image: /*#__PURE__*/_react.default.createElement(FooterCardImage, {
      iconSrc: `${assetBasePath}discover_icon.png`,
      backgroundSrc: `${assetBasePath}discover_bg.png`
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiCard, {
    paddingSize: "xl",
    textAlign: "left",
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.pipelinesCard.title', {
      defaultMessage: 'Transform your data using pipelines'
    }),
    description: _i18n.i18n.translate('xpack.serverlessSearch.footer.pipelinesCard.description', {
      defaultMessage: 'Preprocess data before indexing into Elasticsearch. Remove fields, extract values from text, or enrich your data with machine learning models like ELSER.'
    }),
    footer: /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
      color: "primary",
      onClick: () => navigateToApp('management', {
        path: '/ingest/ingest_pipelines'
      })
    }, _i18n.i18n.translate('xpack.serverlessSearch.footer.pipelinesCard.buttonText', {
      defaultMessage: 'Configure your ingest pipelines'
    })))),
    image: /*#__PURE__*/_react.default.createElement(FooterCardImage, {
      iconSrc: `${assetBasePath}transform_icon.png`,
      backgroundSrc: `${assetBasePath}transform_bg.png`
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiCard, {
    paddingSize: "xl",
    textAlign: "left",
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.searchUI.title', {
      defaultMessage: 'Build a user interface with Search UI'
    }),
    description: _i18n.i18n.translate('xpack.serverlessSearch.footer.searchUI.description', {
      defaultMessage: 'Search UI is a free and open source JavaScript library maintained by Elastic for the fast development of modern, engaging search experiences.'
    }),
    footer: /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
      color: "primary"
    }, _i18n.i18n.translate('xpack.serverlessSearch.footer.searchUI.buttonText', {
      defaultMessage: 'Build with Search UI'
    })))),
    image: /*#__PURE__*/_react.default.createElement(FooterCardImage, {
      iconSrc: `${assetBasePath}searchui_icon.png`,
      backgroundSrc: `${assetBasePath}searchui_bg.png`
    })
  })))), /*#__PURE__*/_react.default.createElement(_eui.EuiPageTemplate.Section, {
    alignment: "top",
    className: "serverlessSearchFooter"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "l"
  }, cloud.usersAndRolesUrl && /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(FooterIcon, {
    href: cloud.usersAndRolesUrl,
    imgSrc: `${assetBasePath}invite_users_icon.png`,
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.inviteUsers.title', {
      defaultMessage: 'Invite more users'
    })
  })), cloud.billingUrl && /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(FooterIcon, {
    href: cloud.billingUrl,
    imgSrc: `${assetBasePath}billing_icon.png`,
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.billing.title', {
      defaultMessage: 'Billing and usage'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(FooterIcon, {
    href: "https://www.elastic.co/community/",
    imgSrc: `${assetBasePath}community_icon.png`,
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.community.title', {
      defaultMessage: 'Join the community'
    })
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(FooterIcon, {
    href: _doc_links.docLinks.kibanaFeedback,
    imgSrc: `${assetBasePath}feedback_icon.png`,
    title: _i18n.i18n.translate('xpack.serverlessSearch.footer.feedback.title', {
      defaultMessage: 'Give feedback'
    })
  })))));
};
exports.ElasticsearchOverview = ElasticsearchOverview;
const FooterCardImage = ({
  iconSrc,
  backgroundSrc
}) => /*#__PURE__*/_react.default.createElement("div", {
  className: "serverlessSearchFooterCard--wrapper"
}, /*#__PURE__*/_react.default.createElement("img", {
  src: backgroundSrc,
  alt: "",
  className: "serverlessSearchFooterCard--Background"
}), /*#__PURE__*/_react.default.createElement(_eui.EuiImage, {
  size: 250,
  src: iconSrc,
  alt: "",
  wrapperProps: {
    className: 'serverlessSearchFooterCard--iconWrapper'
  },
  style: {
    width: 'auto',
    height: '100%',
    inlineSize: 'auto'
  }
}));
const FooterIcon = ({
  href,
  imgSrc,
  title
}) => /*#__PURE__*/_react.default.createElement(_eui.EuiLink, {
  href: href,
  target: "_blank",
  external: false
}, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
  direction: "column",
  alignItems: "center"
}, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiImage, {
  size: 120,
  src: imgSrc,
  alt: ""
})), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
  color: "ghost"
}, /*#__PURE__*/_react.default.createElement("h5", null, title)))));