Initial Work For Acceleration Wizard UI

common/constants/shared.ts

@@ -14,6 +14,7 @@ export const DSL_CAT = '/cat.indices';
 export const DSL_MAPPING = '/indices.getFieldMapping';
 export const OBSERVABILITY_BASE = '/api/observability';
 export const INTEGRATIONS_BASE = '/api/integrations';
+export const DATASOURCES_BASE = '/api/datasources';
 export const EVENT_ANALYTICS = '/event_analytics';
 export const SAVED_OBJECTS = '/saved_objects';
 export const SAVED_QUERY = '/query';
@@ -56,6 +57,10 @@ export const observabilityIntegrationsID = 'integrations';
 export const observabilityIntegrationsTitle = 'Integrations';
 export const observabilityIntegrationsPluginOrder = 9020;
 
+export const observabilityDatasourcesID = 'datasources';
+export const observabilityDatasourcesTitle = 'Datasources';
+export const observabilityDatasourcesPluginOrder = 9030;
+
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
 export const PPL_DOCUMENTATION_URL =

opensearch_dashboards.json

@@ -1,7 +1,7 @@
 {
   "id": "observabilityDashboards",
   "version": "3.0.0.0",
-  "opensearchDashboardsVersion": "3.0.0",
+  "opensearchDashboardsVersion": "2.9.0",
   "server": true,
   "ui": true,
   "requiredPlugins": [

public/components/app.tsx

@@ -19,6 +19,7 @@ import { EventAnalytics } from './event_analytics';
 import { Home as MetricsHome } from './metrics/index';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
+import { Home as DatasourcesHome } from './flint/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
@@ -44,6 +45,7 @@ const pages = {
   notebooks: NotebooksHome,
   dashboards: CustomPanelsHome,
   integrations: IntegrationsHome,
+  datasources: DatasourcesHome,
 };
 
 export const App = ({

public/components/common/tabbed_page/tabbed_page.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
+
+interface TabbedPageProps {
+  tabNames: Array<[string, string]>;
+  header: JSX.Element;
+}
+
+interface Tab {
+  id: string;
+  name: string;
+}
+
+export function TabbedPage(props: TabbedPageProps) {
+  const { tabNames, header } = props;
+  const tabs: Tab[] = tabNames.map((tabName: [string, string]) => {
+    return { id: tabName[0], name: tabName[1] };
+  });
+
+  const [selectedTabId, setSelectedTabId] = useState(
+    window.location.hash.substring(2) ? window.location.hash.substring(2) : tabs && tabs.at(0)!.id
+  );
+
+  const onSelectedTabChanged = (id) => {
+    setSelectedTabId(id);
+    window.location.hash = id;
+  };
+
+  const renderTabs = () => {
+    return tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  };
+  return (
+    <div>
+      {header}
+      <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
+      <EuiSpacer size="s" />
+    </div>
+  );
+}

public/components/flint/components/accelerate.scss

@@ -0,0 +1,4 @@
+.accelerateCheckableCard {
+    width: 450px;
+}
+

public/components/flint/components/accelerate_callout.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+
+export function AccelerateCallout() {
+  return (
+    <EuiCallOut title="Considerations for data acceleration" iconType="help">
+      <p>
+        Warning about not indexing personal or sensitive data, something about the cost of indexing.
+      </p>
+    </EuiCallOut>
+  );
+}

public/components/flint/components/accelerate_flyout.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import { EuiFlyout, EuiFlyoutBody } from '@elastic/eui';
+import React, { useState } from 'react';
+import { Accelerate } from './accelerate_page';
+
+interface AccelerateFlyoutProps {
+  onClose: () => void;
+  pplService: any;
+}
+
+export function AccelerateFlyout(props: AccelerateFlyoutProps) {
+  return (
+    <EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="m">
+      <Accelerate isFlyout={true} {...props} />
+    </EuiFlyout>
+  );
+}

public/components/flint/components/accelerate_header.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlyoutHeader,
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
+import { AccelerateHeaderProps } from './accelerate_types';
+
+export function AccelerateHeader(props: AccelerateHeaderProps) {
+  if (props.isFlyout) {
+    return (
+      <div>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="l" data-test-subj="accelerate-header">
+            <h1>Accelerate Data</h1>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" color="subdued">
+            Index your data in OpenSearch for faster query performance.{' '}
+            <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+              Learn more
+            </EuiLink>
+          </EuiText>
+        </EuiFlyoutHeader>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="accelerate-header">
+            <h1>Accelerate Data</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Index your data in OpenSearch for faster query performance.{' '}
+        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+    </div>
+  );
+}