From 89b9dc655b43466668684457379c1573ca72e4f1 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 20 Jul 2023 14:06:54 -0400
Subject: [PATCH 01/22] fix name change bug and modify test to test behavior

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/9_integrations.spec.js                 | 6 ++++--
 .../integrations/components/add_integration_flyout.tsx      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/.cypress/integration/9_integrations.spec.js b/.cypress/integration/9_integrations.spec.js
index 6a6ad2fd58..6ceae7bcbd 100644
--- a/.cypress/integration/9_integrations.spec.js
+++ b/.cypress/integration/9_integrations.spec.js
@@ -62,10 +62,12 @@ describe('Tests the add nginx integration instance flow', () => {
     cy.get('[data-test-subj="new-instance-name"]').should('have.value', 'nginx');
     cy.get('[data-test-subj="createInstanceButton"]').should('be.disabled')
     cy.get('[data-test-subj="addIntegrationFlyoutTitle"]').should('exist')
+    // Modifies the name of the integration
+    cy.get('[data-test-subj="new-instance-name"]').type(testInstance.substring(5));
     // validates the created sample index
     cy.get('[data-test-subj="data-source-name"]').type('ss4o_logs-nginx-sample-sample');
-    cy.get('[data-test-subj="validateIndex"]').click()
-    cy.get('[data-test-subj="new-instance-name"]').type(testInstance.substring(5));
+    cy.get('[data-test-subj="validateIndex"]').click();
+    cy.get('.euiToastHeader__title').should('contain', 'valid');
     cy.get('[data-test-subj="createInstanceButton"]').click();
     cy.get('.euiToastHeader__title').should('contain', 'successfully');
   })
diff --git a/public/components/integrations/components/add_integration_flyout.tsx b/public/components/integrations/components/add_integration_flyout.tsx
index 9688d1b1e8..bfdfaa23e5 100644
--- a/public/components/integrations/components/add_integration_flyout.tsx
+++ b/public/components/integrations/components/add_integration_flyout.tsx
@@ -173,7 +173,7 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
     }
     const [dataSourceMappings, integrationMappings] = await Promise.all([
       fetchDataSourceMappings(targetDataSource),
-      fetchIntegrationMappings(name),
+      fetchIntegrationMappings(integrationName),
     ]);
     if (!dataSourceMappings) {
       validationErrors.push('Provided data stream could not be retrieved');

From a38e5134d9ef1ac59f4ca1288fd964592b103741 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 25 Jul 2023 12:39:17 -0400
Subject: [PATCH 02/22] get rid of lint

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/flint/accelerate.scss       |   4 +
 .../components/flint/accelerate_callout.tsx   |  17 ++
 public/components/flint/accelerate_header.tsx |  40 +++++
 public/components/flint/accelerate_page.tsx   | 145 ++++++++++++++++++
 4 files changed, 206 insertions(+)
 create mode 100644 public/components/flint/accelerate.scss
 create mode 100644 public/components/flint/accelerate_callout.tsx
 create mode 100644 public/components/flint/accelerate_header.tsx
 create mode 100644 public/components/flint/accelerate_page.tsx

diff --git a/public/components/flint/accelerate.scss b/public/components/flint/accelerate.scss
new file mode 100644
index 0000000000..9bfa11e095
--- /dev/null
+++ b/public/components/flint/accelerate.scss
@@ -0,0 +1,4 @@
+.accelerateCheckableCard {
+    width: 450px;
+}
+  
\ No newline at end of file
diff --git a/public/components/flint/accelerate_callout.tsx b/public/components/flint/accelerate_callout.tsx
new file mode 100644
index 0000000000..ee3ad1cdd2
--- /dev/null
+++ b/public/components/flint/accelerate_callout.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import React, { useEffect, useState } 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>
+  );
+}
diff --git a/public/components/flint/accelerate_header.tsx b/public/components/flint/accelerate_header.tsx
new file mode 100644
index 0000000000..e140837ed6
--- /dev/null
+++ b/public/components/flint/accelerate_header.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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';
+
+export function AccelerateHeader() {
+  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>
+      <EuiSpacer size="l" />
+    </div>
+  );
+}
diff --git a/public/components/flint/accelerate_page.tsx b/public/components/flint/accelerate_page.tsx
new file mode 100644
index 0000000000..3caaa44a07
--- /dev/null
+++ b/public/components/flint/accelerate_page.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './accelerate.scss';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastList,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiCheckableCard,
+  htmlIdGenerator,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
+import React, { ReactChild, useEffect, useState } from 'react';
+import { AccelerateHeader } from './accelerate_header';
+import { AccelerateCallout } from './accelerate_callout';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
+
+export function AcceleratePage(props: any) {
+  const [useCase, setUseCase] = useState('queryAcceleration');
+  const [accelerationMethod, setAccelerationMethod] = useState('coveredIndex');
+
+  const useCaseGroup = () => {
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
+          <EuiCheckableCard
+            label="Query acceleration only"
+            value="radio1"
+            checked={useCase === 'queryAcceleration'}
+            onChange={() => setUseCase('queryAcceleration')}
+            id={htmlIdGenerator()()}
+          >
+            <EuiText>
+              Index only meta-data in OpenSearch to speed up query performance when querying through
+              Data Explorer.
+            </EuiText>
+          </EuiCheckableCard>
+        </EuiFlexItem>
+        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
+          <EuiCheckableCard
+            label="Full OpenSearch functionality"
+            value="radio1"
+            checked={useCase === 'fullFunctionality'}
+            onChange={() => setUseCase('fullFunctionality')}
+            id={htmlIdGenerator()()}
+          >
+            <EuiText>
+              Ingest data into OpenSearch to use all Dashboards features and better query
+              performance in Data Explorer.
+            </EuiText>
+          </EuiCheckableCard>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const accelerationMethodGroup = () => {
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
+          <EuiCheckableCard
+            label="Covered Index"
+            value="radio1"
+            checked={accelerationMethod === 'coveredIndex'}
+            onChange={() => setAccelerationMethod('coveredIndex')}
+            id={htmlIdGenerator()()}
+          >
+            <EuiText>
+              Index only meta-data in OpenSearch to speed up query performance when querying through
+              Data Explorer.
+            </EuiText>
+          </EuiCheckableCard>
+        </EuiFlexItem>
+        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
+          <EuiCheckableCard
+            label="Materialized View"
+            value="radio1"
+            checked={accelerationMethod === 'materializedView'}
+            onChange={() => setAccelerationMethod('materializedView')}
+            id={htmlIdGenerator()()}
+          >
+            <EuiText>
+              Ingest data into OpenSearch to use all Dashboards features and better query
+              performance in Data Explorer.
+            </EuiText>
+          </EuiCheckableCard>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <AccelerateHeader />
+        <AccelerateCallout />
+        <EuiSpacer />
+        <EuiTitle size="s" data-test-subj="accelerate-header">
+          <h2>Select use case</h2>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
+          Select the acceleration option that best suites your use case.{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText>
+        <EuiSpacer />
+        {useCaseGroup()}
+        <EuiSpacer />
+        {/* <EuiTitle size="s" data-test-subj="accelerate-header">
+              <h2>Data source selection</h2>
+              </EuiTitle>
+              <EuiText size="s" color="subdued">
+         Select the acceleration option that best suites your use case.{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText> */}
+        <EuiTitle size="s" data-test-subj="accelerate-header">
+          <h2>Acceleration Method</h2>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
+          OpenSearch provides multiple ways to accelerate data. Select the best indexing option
+          based on your needs{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText>
+        <EuiSpacer />
+        {accelerationMethodGroup()}
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

From cb8889a207de93fea5e35771abf988c2da5b91fd Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 25 Jul 2023 15:28:32 -0400
Subject: [PATCH 03/22] test for flyout

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/flint/accelerate_flyout.tsx | 70 +++++++++++++++++++
 public/components/flint/test_page.tsx         | 41 +++++++++++
 public/components/integrations/home.tsx       |  4 ++
 3 files changed, 115 insertions(+)
 create mode 100644 public/components/flint/accelerate_flyout.tsx
 create mode 100644 public/components/flint/test_page.tsx

diff --git a/public/components/flint/accelerate_flyout.tsx b/public/components/flint/accelerate_flyout.tsx
new file mode 100644
index 0000000000..281bda279d
--- /dev/null
+++ b/public/components/flint/accelerate_flyout.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import {
+  EuiButton,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiForm,
+  EuiText,
+  EuiLink,
+  EuiFormRow,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { IfVoid } from '@reduxjs/toolkit/dist/tsHelpers';
+import { HttpStart } from '../../../../../../src/core/public';
+import { useToast } from '../../../../public/components/common/toast';
+import { AcceleratePage } from './accelerate_page';
+
+interface AccelerateFlyoutProps {
+  onClose: () => void;
+}
+
+export function AccelerateFlyout(props: AccelerateFlyoutProps) {
+  return (
+    <EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="s">
+      <EuiFlyoutBody>
+        <AcceleratePage />
+      </EuiFlyoutBody>
+      {/* <EuiFlyoutBody>{renderContent()}</EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButton onClick={() => onClose()} color="danger">
+              Cancel
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                onCreate(name, dataSource);
+                onClose();
+              }}
+              fill
+              disabled={
+                dataSource.length < 1 ||
+                dataSource.length > 50 ||
+                name.length < 1 ||
+                name.length > 50 ||
+                isDataSourceValid !== true
+              }
+              data-test-subj="createInstanceButton"
+              data-click-metric-element="integrations.create_from_setup"
+            >
+              Add Integration
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter> */}
+    </EuiFlyout>
+  );
+}
diff --git a/public/components/flint/test_page.tsx b/public/components/flint/test_page.tsx
new file mode 100644
index 0000000000..c92d5494b9
--- /dev/null
+++ b/public/components/flint/test_page.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './accelerate.scss';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastList,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiCheckableCard,
+  htmlIdGenerator,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiButton,
+} from '@elastic/eui';
+import React, { ReactChild, useEffect, useState } from 'react';
+import { AccelerateHeader } from './accelerate_header';
+import { AccelerateCallout } from './accelerate_callout';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
+import { AccelerateFlyout } from './accelerate_flyout';
+
+export function TestPage(props: any) {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  return (
+    <EuiPage>
+      <EuiButton onClick={() => setIsFlyoutVisible(true)}>Click Me</EuiButton>
+
+      {isFlyoutVisible && <AccelerateFlyout onClose={() => setIsFlyoutVisible(false)} />}
+    </EuiPage>
+  );
+}
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 3fa85b98dc..cb68ca041d 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -13,6 +13,8 @@ import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import { AvailableIntegrationOverviewPage } from './components/available_integration_overview_page';
 import { AddedIntegrationOverviewPage } from './components/added_integration_overview_page';
 import { AddedIntegration } from './components/added_integration';
+import { AcceleratePage } from '../flint/accelerate_page';
+import { TestPage } from '../flint/test_page';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -62,6 +64,8 @@ export const Home = (props: HomeProps) => {
               />
             )}
           />
+          <Route exact path={'/accelerate'} render={(routerProps) => <AcceleratePage />} />
+          <Route exact path={'/accelerateAsModal'} render={(routerProps) => <TestPage />} />
         </Switch>
       </HashRouter>
     </div>

From f6b7a77fd85578c38fda019b134e305d8a847830 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 25 Jul 2023 15:45:26 -0400
Subject: [PATCH 04/22] flyout to medium size

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/flint/accelerate_flyout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/components/flint/accelerate_flyout.tsx b/public/components/flint/accelerate_flyout.tsx
index 281bda279d..319fa24833 100644
--- a/public/components/flint/accelerate_flyout.tsx
+++ b/public/components/flint/accelerate_flyout.tsx
@@ -31,7 +31,7 @@ interface AccelerateFlyoutProps {
 
 export function AccelerateFlyout(props: AccelerateFlyoutProps) {
   return (
-    <EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="s">
+    <EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="m">
       <EuiFlyoutBody>
         <AcceleratePage />
       </EuiFlyoutBody>

From 63985ebaeae8a1c517f9a89bf10db9353d0f4411 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 7 Aug 2023 11:34:20 -0400
Subject: [PATCH 05/22] make accelerate extensible

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/flint/accelerate_flyout.tsx | 50 +----------------
 public/components/flint/accelerate_header.tsx |  1 -
 public/components/flint/accelerate_page.tsx   | 56 ++++++++++++++++++-
 public/components/integrations/home.tsx       |  4 +-
 4 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/public/components/flint/accelerate_flyout.tsx b/public/components/flint/accelerate_flyout.tsx
index 319fa24833..afad266e95 100644
--- a/public/components/flint/accelerate_flyout.tsx
+++ b/public/components/flint/accelerate_flyout.tsx
@@ -5,25 +5,11 @@
 
 import _ from 'lodash';
 import {
-  EuiButton,
-  EuiFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiFlyout,
   EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiForm,
-  EuiText,
-  EuiLink,
-  EuiFormRow,
-  EuiTitle,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { IfVoid } from '@reduxjs/toolkit/dist/tsHelpers';
-import { HttpStart } from '../../../../../../src/core/public';
-import { useToast } from '../../../../public/components/common/toast';
-import { AcceleratePage } from './accelerate_page';
+import { Accelerate } from './accelerate_page';
 
 interface AccelerateFlyoutProps {
   onClose: () => void;
@@ -32,39 +18,7 @@ interface AccelerateFlyoutProps {
 export function AccelerateFlyout(props: AccelerateFlyoutProps) {
   return (
     <EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="m">
-      <EuiFlyoutBody>
-        <AcceleratePage />
-      </EuiFlyoutBody>
-      {/* <EuiFlyoutBody>{renderContent()}</EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiButton onClick={() => onClose()} color="danger">
-              Cancel
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiButton
-              onClick={() => {
-                onCreate(name, dataSource);
-                onClose();
-              }}
-              fill
-              disabled={
-                dataSource.length < 1 ||
-                dataSource.length > 50 ||
-                name.length < 1 ||
-                name.length > 50 ||
-                isDataSourceValid !== true
-              }
-              data-test-subj="createInstanceButton"
-              data-click-metric-element="integrations.create_from_setup"
-            >
-              Add Integration
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter> */}
+        <Accelerate isFlyout={true}/>
     </EuiFlyout>
   );
 }
diff --git a/public/components/flint/accelerate_header.tsx b/public/components/flint/accelerate_header.tsx
index e140837ed6..775428ef9d 100644
--- a/public/components/flint/accelerate_header.tsx
+++ b/public/components/flint/accelerate_header.tsx
@@ -34,7 +34,6 @@ export function AccelerateHeader() {
           Learn more
         </EuiLink>
       </EuiText>
-      <EuiSpacer size="l" />
     </div>
   );
 }
diff --git a/public/components/flint/accelerate_page.tsx b/public/components/flint/accelerate_page.tsx
index 3caaa44a07..8c75b3b954 100644
--- a/public/components/flint/accelerate_page.tsx
+++ b/public/components/flint/accelerate_page.tsx
@@ -20,13 +20,20 @@ import {
   EuiTitle,
   EuiText,
   EuiLink,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
 } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
 import { AccelerateHeader } from './accelerate_header';
 import { AccelerateCallout } from './accelerate_callout';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
 
-export function AcceleratePage(props: any) {
+interface AccelerateProps {
+  isFlyout: boolean | undefined;
+}
+
+export function Accelerate(props: AccelerateProps) {
+  const isFlyout = props.isFlyout;
   const [useCase, setUseCase] = useState('queryAcceleration');
   const [accelerationMethod, setAccelerationMethod] = useState('coveredIndex');
 
@@ -100,6 +107,53 @@ export function AcceleratePage(props: any) {
     );
   };
 
+  if (isFlyout) {
+    return (
+      <>
+      <EuiFlyoutHeader hasBorder>
+        <AccelerateHeader />
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+      <AccelerateCallout/>
+      <EuiSpacer/>
+        <EuiTitle size="s" data-test-subj="accelerate-header">
+          <h2>Select use case</h2>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
+          Select the acceleration option that best suites your use case.{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText>
+        <EuiSpacer />
+        {useCaseGroup()}
+        <EuiSpacer />
+        {/* <EuiTitle size="s" data-test-subj="accelerate-header">
+              <h2>Data source selection</h2>
+              </EuiTitle>
+              <EuiText size="s" color="subdued">
+         Select the acceleration option that best suites your use case.{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText> */}
+        <EuiTitle size="s" data-test-subj="accelerate-header">
+          <h2>Acceleration Method</h2>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
+          OpenSearch provides multiple ways to accelerate data. Select the best indexing option
+          based on your needs{' '}
+          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+            Learn more
+          </EuiLink>
+        </EuiText>
+        <EuiSpacer />
+        {accelerationMethodGroup()}
+      </EuiFlyoutBody>
+      </>
+    )
+  }
+
   return (
     <EuiPage>
       <EuiPageBody>
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index cb68ca041d..d352fdd26c 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -13,7 +13,7 @@ import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import { AvailableIntegrationOverviewPage } from './components/available_integration_overview_page';
 import { AddedIntegrationOverviewPage } from './components/added_integration_overview_page';
 import { AddedIntegration } from './components/added_integration';
-import { AcceleratePage } from '../flint/accelerate_page';
+import { Accelerate } from '../flint/accelerate_page';
 import { TestPage } from '../flint/test_page';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
@@ -64,7 +64,7 @@ export const Home = (props: HomeProps) => {
               />
             )}
           />
-          <Route exact path={'/accelerate'} render={(routerProps) => <AcceleratePage />} />
+          <Route exact path={'/accelerate'} render={(routerProps) => <Accelerate />} />
           <Route exact path={'/accelerateAsModal'} render={(routerProps) => <TestPage />} />
         </Switch>
       </HashRouter>

From 81f380982a719a58fbe6da5fcb5e24d9d6b494fc Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 9 Aug 2023 15:38:55 -0400
Subject: [PATCH 06/22] get datasources and hook up to pplservice

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 opensearch_dashboards.json                    |  2 +-
 public/components/flint/accelerate_flyout.tsx |  8 +-
 public/components/flint/accelerate_page.tsx   | 78 +++++++------------
 public/components/flint/test_page.tsx         | 11 ++-
 public/components/integrations/home.tsx       | 17 +++-
 5 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 17267478d2..c3ed81d205 100644
--- a/opensearch_dashboards.json
+++ b/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": [
diff --git a/public/components/flint/accelerate_flyout.tsx b/public/components/flint/accelerate_flyout.tsx
index afad266e95..ebf217a3bc 100644
--- a/public/components/flint/accelerate_flyout.tsx
+++ b/public/components/flint/accelerate_flyout.tsx
@@ -4,21 +4,19 @@
  */
 
 import _ from 'lodash';
-import {
-  EuiFlyout,
-  EuiFlyoutBody,
-} from '@elastic/eui';
+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}/>
+      <Accelerate isFlyout={true} {...props} />
     </EuiFlyout>
   );
 }
diff --git a/public/components/flint/accelerate_page.tsx b/public/components/flint/accelerate_page.tsx
index 8c75b3b954..ddcd9cc7cd 100644
--- a/public/components/flint/accelerate_page.tsx
+++ b/public/components/flint/accelerate_page.tsx
@@ -22,6 +22,7 @@ import {
   EuiLink,
   EuiFlyoutBody,
   EuiFlyoutHeader,
+  EuiComboBox,
 } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
 import { AccelerateHeader } from './accelerate_header';
@@ -30,12 +31,32 @@ import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrat
 
 interface AccelerateProps {
   isFlyout: boolean | undefined;
+  pplService: any;
 }
 
 export function Accelerate(props: AccelerateProps) {
-  const isFlyout = props.isFlyout;
+  const { pplService } = props;
   const [useCase, setUseCase] = useState('queryAcceleration');
   const [accelerationMethod, setAccelerationMethod] = useState('coveredIndex');
+  const [query, setQuery] = useState('');
+  const [dataSources, setDataSources] = useState([]);
+  const [selectedOptions, setSelected] = useState([]);
+
+  const onChange = (selectedOption) => {
+    setSelected(selectedOption);
+  };
+
+  useEffect(() => {
+    pplService
+      .fetch({ query: "show datasources | where CONNECTOR_TYPE = 'SPARK'", format: 'jdbc' })
+      .then((data) =>
+        setDataSources(
+          data.jsonData.map((x: any) => {
+            return { label: x.DATASOURCE_NAME };
+          })
+        )
+      );
+  }, []);
 
   const useCaseGroup = () => {
     return (
@@ -107,53 +128,6 @@ export function Accelerate(props: AccelerateProps) {
     );
   };
 
-  if (isFlyout) {
-    return (
-      <>
-      <EuiFlyoutHeader hasBorder>
-        <AccelerateHeader />
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-      <AccelerateCallout/>
-      <EuiSpacer/>
-        <EuiTitle size="s" data-test-subj="accelerate-header">
-          <h2>Select use case</h2>
-        </EuiTitle>
-        <EuiText size="s" color="subdued">
-          Select the acceleration option that best suites your use case.{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText>
-        <EuiSpacer />
-        {useCaseGroup()}
-        <EuiSpacer />
-        {/* <EuiTitle size="s" data-test-subj="accelerate-header">
-              <h2>Data source selection</h2>
-              </EuiTitle>
-              <EuiText size="s" color="subdued">
-         Select the acceleration option that best suites your use case.{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText> */}
-        <EuiTitle size="s" data-test-subj="accelerate-header">
-          <h2>Acceleration Method</h2>
-        </EuiTitle>
-        <EuiText size="s" color="subdued">
-          OpenSearch provides multiple ways to accelerate data. Select the best indexing option
-          based on your needs{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText>
-        <EuiSpacer />
-        {accelerationMethodGroup()}
-      </EuiFlyoutBody>
-      </>
-    )
-  }
-
   return (
     <EuiPage>
       <EuiPageBody>
@@ -193,6 +167,14 @@ export function Accelerate(props: AccelerateProps) {
         </EuiText>
         <EuiSpacer />
         {accelerationMethodGroup()}
+        <EuiSpacer />
+        <EuiComboBox
+          placeholder="Select DataSource"
+          singleSelection={{ asPlainText: true }}
+          options={dataSources}
+          selectedOptions={selectedOptions}
+          onChange={onChange}
+        />
       </EuiPageBody>
     </EuiPage>
   );
diff --git a/public/components/flint/test_page.tsx b/public/components/flint/test_page.tsx
index c92d5494b9..92dc9fd8ba 100644
--- a/public/components/flint/test_page.tsx
+++ b/public/components/flint/test_page.tsx
@@ -23,6 +23,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
+import httpClientMock from 'test/__mocks__/httpClientMock';
 import { AccelerateHeader } from './accelerate_header';
 import { AccelerateCallout } from './accelerate_callout';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
@@ -33,9 +34,15 @@ export function TestPage(props: any) {
 
   return (
     <EuiPage>
-      <EuiButton onClick={() => setIsFlyoutVisible(true)}>Click Me</EuiButton>
+      <EuiButton
+        onClick={() => {
+          setIsFlyoutVisible(true);
+        }}
+      >
+        Click Me
+      </EuiButton>
 
-      {isFlyoutVisible && <AccelerateFlyout onClose={() => setIsFlyoutVisible(false)} />}
+      {isFlyoutVisible && <AccelerateFlyout onClose={() => setIsFlyoutVisible(false)} {...props} />}
     </EuiPage>
   );
 }
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index d352fdd26c..673ebf48aa 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import PPLService from 'public/services/requests/ppl';
 import { Integration } from './components/integration';
 import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { ChromeBreadcrumb } from '../../../../../src/core/public';
@@ -20,14 +21,16 @@ export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
 interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
   parentBreadcrumbs: ChromeBreadcrumb[];
+  pplService: any;
 }
 
 export const Home = (props: HomeProps) => {
-  const { http, chrome } = props;
+  const { http, chrome, pplService } = props;
 
   const commonProps = {
     http,
     chrome,
+    pplService,
   };
 
   return (
@@ -64,8 +67,16 @@ export const Home = (props: HomeProps) => {
               />
             )}
           />
-          <Route exact path={'/accelerate'} render={(routerProps) => <Accelerate />} />
-          <Route exact path={'/accelerateAsModal'} render={(routerProps) => <TestPage />} />
+          <Route
+            exact
+            path={'/accelerate'}
+            render={(routerProps) => <Accelerate {...commonProps} />}
+          />
+          <Route
+            exact
+            path={'/accelerateAsModal'}
+            render={(routerProps) => <TestPage {...commonProps} />}
+          />
         </Switch>
       </HashRouter>
     </div>

From 2b4d21c2ef32f4ee9323f0f8032710d17c619f2e Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 11 Aug 2023 17:58:30 -0400
Subject: [PATCH 07/22] get flint working

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/flint/accelerate_header.tsx |  22 ++-
 public/components/flint/accelerate_page.tsx   |  29 +++-
 public/components/flint/accelerate_types.ts   |  11 ++
 public/components/flint/datasource.tsx        | 138 ++++++++++++++++++
 public/components/flint/table.tsx             | 138 ++++++++++++++++++
 public/components/integrations/home.tsx       |  27 +++-
 6 files changed, 356 insertions(+), 9 deletions(-)
 create mode 100644 public/components/flint/accelerate_types.ts
 create mode 100644 public/components/flint/datasource.tsx
 create mode 100644 public/components/flint/table.tsx

diff --git a/public/components/flint/accelerate_header.tsx b/public/components/flint/accelerate_header.tsx
index 775428ef9d..bb63bdeaa0 100644
--- a/public/components/flint/accelerate_header.tsx
+++ b/public/components/flint/accelerate_header.tsx
@@ -4,6 +4,7 @@
  */
 
 import {
+  EuiFlyoutHeader,
   EuiLink,
   EuiPageHeader,
   EuiPageHeaderSection,
@@ -16,8 +17,27 @@ import {
 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() {
+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>
diff --git a/public/components/flint/accelerate_page.tsx b/public/components/flint/accelerate_page.tsx
index ddcd9cc7cd..1b68c0192d 100644
--- a/public/components/flint/accelerate_page.tsx
+++ b/public/components/flint/accelerate_page.tsx
@@ -23,16 +23,15 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiComboBox,
+  EuiCodeBlock,
+  EuiCodeEditor,
+  EuiButton,
 } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
 import { AccelerateHeader } from './accelerate_header';
 import { AccelerateCallout } from './accelerate_callout';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
-
-interface AccelerateProps {
-  isFlyout: boolean | undefined;
-  pplService: any;
-}
+import { AccelerateProps } from './accelerate_types';
 
 export function Accelerate(props: AccelerateProps) {
   const { pplService } = props;
@@ -41,6 +40,7 @@ export function Accelerate(props: AccelerateProps) {
   const [query, setQuery] = useState('');
   const [dataSources, setDataSources] = useState([]);
   const [selectedOptions, setSelected] = useState([]);
+  const [result, setResult] = useState('');
 
   const onChange = (selectedOption) => {
     setSelected(selectedOption);
@@ -58,6 +58,13 @@ export function Accelerate(props: AccelerateProps) {
       );
   }, []);
 
+  const sendAccelerationQuery = () => {
+    const dataSource = selectedOptions[0].label;
+    pplService
+      .fetch({ query: `source = ${dataSource}.sql(\' ${query}\')`, format: 'jdbc' })
+      .then((data) => setResult(JSON.stringify(data)));
+  };
+
   const useCaseGroup = () => {
     return (
       <EuiFlexGroup>
@@ -131,8 +138,8 @@ export function Accelerate(props: AccelerateProps) {
   return (
     <EuiPage>
       <EuiPageBody>
-        <AccelerateHeader />
-        <AccelerateCallout />
+        <AccelerateHeader {...props} />
+        <AccelerateCallout {...props} />
         <EuiSpacer />
         <EuiTitle size="s" data-test-subj="accelerate-header">
           <h2>Select use case</h2>
@@ -175,6 +182,14 @@ export function Accelerate(props: AccelerateProps) {
           selectedOptions={selectedOptions}
           onChange={onChange}
         />
+        <EuiSpacer />
+        <EuiCodeEditor value={query} onChange={setQuery} />
+        <EuiSpacer />
+        {result}
+
+        <EuiButton onClick={sendAccelerationQuery} disabled={!query || !selectedOptions}>
+          Accelerate
+        </EuiButton>
       </EuiPageBody>
     </EuiPage>
   );
diff --git a/public/components/flint/accelerate_types.ts b/public/components/flint/accelerate_types.ts
new file mode 100644
index 0000000000..abad38916a
--- /dev/null
+++ b/public/components/flint/accelerate_types.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface AccelerateProps {
+  pplService: any;
+  isFlyout: boolean | undefined;
+}
+
+export type AccelerateHeaderProps = AccelerateProps;
diff --git a/public/components/flint/datasource.tsx b/public/components/flint/datasource.tsx
new file mode 100644
index 0000000000..7a0f36d327
--- /dev/null
+++ b/public/components/flint/datasource.tsx
@@ -0,0 +1,138 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './accelerate.scss';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastList,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiCheckableCard,
+  htmlIdGenerator,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiTableFieldDataColumnType,
+  EuiPageContent,
+} from '@elastic/eui';
+import React, { ReactChild, useEffect, useState } from 'react';
+import httpClientMock from 'test/__mocks__/httpClientMock';
+import { AccelerateHeader } from './accelerate_header';
+import { AccelerateCallout } from './accelerate_callout';
+import {
+  ASSET_FILTER_OPTIONS,
+  OPENSEARCH_DOCUMENTATION_URL,
+} from '../../../common/constants/integrations';
+import { AccelerateFlyout } from './accelerate_flyout';
+
+export function DataSource(props: any) {
+  // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const { dataSource, pplService } = props;
+  console.log(dataSource);
+
+  const [tables, setTables] = useState([]);
+
+  useEffect(() => {
+    pplService
+      .fetch({ query: `source = ${dataSource}.sql(\'SHOW TABLES\')`, format: 'jdbc' })
+      .then((data) =>
+        setTables(
+          data.jsonData.map((x: any) => {
+            return { label: x.tableName, namespace: x.namespace, isTemporary: x.isTemporary };
+          })
+        )
+      );
+  }, []);
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Table Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink
+          data-test-subj={`${record.label}IntegrationDescription`}
+          href={`#/accelerate/${dataSource}/${record.label}`}
+        >
+          {_.truncate(record.label, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'namespace',
+      name: 'Namespace',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.namespace}Namespace`}>
+          {_.truncate(record.namespace, { length: 100 })}
+        </EuiText>
+      ),
+    },
+    {
+      field: 'isTemporary',
+      name: 'Is Temporary',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.isTemporary}temporary`}>
+          {_.truncate(record.isTemporary, { length: 100 })}
+        </EuiText>
+      ),
+    },
+  ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  const search = {
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'assetType',
+        name: 'Type',
+        multiSelect: false,
+        options: ASSET_FILTER_OPTIONS.map((i) => ({
+          value: i,
+          name: i,
+          view: i,
+        })),
+      },
+    ],
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageContent data-test-subj="addedIntegrationsArea">
+        {dataSource}
+        <EuiSpacer />
+
+        <EuiInMemoryTable
+          loading={props.loading}
+          items={tables}
+          itemId="id"
+          columns={tableColumns}
+          tableLayout="auto"
+          pagination={{
+            initialPageSize: 10,
+            pageSizeOptions: [5, 10, 15],
+          }}
+          search={search}
+          allowNeutralSort={false}
+          isSelectable={true}
+        />
+      </EuiPageContent>
+    </EuiPage>
+  );
+}
diff --git a/public/components/flint/table.tsx b/public/components/flint/table.tsx
new file mode 100644
index 0000000000..a1d229c312
--- /dev/null
+++ b/public/components/flint/table.tsx
@@ -0,0 +1,138 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './accelerate.scss';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastList,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiCheckableCard,
+  htmlIdGenerator,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiTableFieldDataColumnType,
+  EuiPageContent,
+} from '@elastic/eui';
+import React, { ReactChild, useEffect, useState } from 'react';
+import httpClientMock from 'test/__mocks__/httpClientMock';
+import { AccelerateHeader } from './accelerate_header';
+import { AccelerateCallout } from './accelerate_callout';
+import {
+  ASSET_FILTER_OPTIONS,
+  OPENSEARCH_DOCUMENTATION_URL,
+} from '../../../common/constants/integrations';
+import { AccelerateFlyout } from './accelerate_flyout';
+
+export function Table(props: any) {
+  // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const { table, dataSource, pplService } = props;
+  console.log(table);
+
+  const [tables, setTables] = useState([]);
+
+  useEffect(() => {
+    pplService
+      .fetch({ query: `source = ${dataSource}.sql(\'DESCRIBE TABLE ${table}\')`, format: 'jdbc' })
+      .then((data) =>
+        setTables(
+          data.jsonData.map((x: any) => {
+            return { label: x.tableName, namespace: x.namespace, isTemporary: x.isTemporary };
+          })
+        )
+      );
+  }, []);
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Table Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink
+          data-test-subj={`${record.label}IntegrationDescription`}
+          href={`#/accelerate/${dataSource}/${record.label}`}
+        >
+          {_.truncate(record.label, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'namespace',
+      name: 'Namespace',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.namespace}Namespace`}>
+          {_.truncate(record.namespace, { length: 100 })}
+        </EuiText>
+      ),
+    },
+    {
+      field: 'isTemporary',
+      name: 'Is Temporary',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.isTemporary}temporary`}>
+          {_.truncate(record.isTemporary, { length: 100 })}
+        </EuiText>
+      ),
+    },
+  ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  const search = {
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'assetType',
+        name: 'Type',
+        multiSelect: false,
+        options: ASSET_FILTER_OPTIONS.map((i) => ({
+          value: i,
+          name: i,
+          view: i,
+        })),
+      },
+    ],
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageContent data-test-subj="addedIntegrationsArea">
+        {dataSource}
+        {/* <EuiSpacer/>
+
+      <EuiInMemoryTable
+          loading={props.loading}
+          items={tables}
+          itemId="id"
+          columns={tableColumns}
+          tableLayout="auto"
+          pagination={{
+            initialPageSize: 10,
+            pageSizeOptions: [5, 10, 15],
+          }}
+          search={search}
+          allowNeutralSort={false}
+          isSelectable={true}
+        /> */}
+      </EuiPageContent>
+    </EuiPage>
+  );
+}
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 673ebf48aa..92e6c82c88 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -16,6 +16,8 @@ import { AddedIntegrationOverviewPage } from './components/added_integration_ove
 import { AddedIntegration } from './components/added_integration';
 import { Accelerate } from '../flint/accelerate_page';
 import { TestPage } from '../flint/test_page';
+import { DataSource } from '../flint/datasource';
+import { Table } from '../flint/table';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -73,10 +75,33 @@ export const Home = (props: HomeProps) => {
             render={(routerProps) => <Accelerate {...commonProps} />}
           />
           <Route
-            exact
+            exacts
             path={'/accelerateAsModal'}
             render={(routerProps) => <TestPage {...commonProps} />}
           />
+          {/* needs to go before the Datasource*/}
+          <Route
+            exact
+            path={'/accelerate/:id/:table'}
+            render={(routerProps) => (
+              <Table
+                {...commonProps}
+                dataSource={decodeURIComponent(routerProps.match.params.id)}
+                table={decodeURIComponent(routerProps.match.params.table)}
+              />
+            )}
+          />
+
+          <Route
+            exact
+            path={'/accelerate/:id+'}
+            render={(routerProps) => (
+              <DataSource
+                {...commonProps}
+                dataSource={decodeURIComponent(routerProps.match.params.id)}
+              />
+            )}
+          />
         </Switch>
       </HashRouter>
     </div>

From a85848281d8f3d7a58a0cf2b2afbf8ef65f99912 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 17 Aug 2023 10:27:43 -0400
Subject: [PATCH 08/22] add datasource page with steps and buttons on bottom
 bar

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/flint/configure_datasource.tsx | 127 ++++++++++++++++++
 public/components/integrations/home.tsx       |   7 +
 2 files changed, 134 insertions(+)
 create mode 100644 public/components/flint/configure_datasource.tsx

diff --git a/public/components/flint/configure_datasource.tsx b/public/components/flint/configure_datasource.tsx
new file mode 100644
index 0000000000..78c8aaa5be
--- /dev/null
+++ b/public/components/flint/configure_datasource.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './accelerate.scss';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastList,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiCheckableCard,
+  htmlIdGenerator,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiTableFieldDataColumnType,
+  EuiPageContent,
+  EuiSteps,
+  EuiPageSideBar,
+  EuiPanel,
+  EuiFormRow,
+  EuiFieldText,
+  EuiBottomBar,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import React, { ReactChild, useEffect, useState } from 'react';
+import httpClientMock from 'test/__mocks__/httpClientMock';
+import { AccelerateHeader } from './accelerate_header';
+import { AccelerateCallout } from './accelerate_callout';
+import {
+  ASSET_FILTER_OPTIONS,
+  OPENSEARCH_DOCUMENTATION_URL,
+} from '../../../common/constants/integrations';
+import { AccelerateFlyout } from './accelerate_flyout';
+
+export function Configure(props: any) {
+  const firstSetOfSteps = [
+    {
+      title: 'Step 1',
+      children: (
+        <EuiText>
+          <p>Configure Connection</p>
+        </EuiText>
+      ),
+    },
+    {
+      title: 'Step 2',
+      children: (
+        <EuiText>
+          <p>Review Configuration</p>
+        </EuiText>
+      ),
+    },
+  ];
+
+  const body = (connectionType: string) => {
+    return (
+      <div>
+        <EuiPanel>
+          <EuiTitle>
+            <h1>{`Configure ${connectionType} Connection`}</h1>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" color="subdued">
+            {`Connect to ${connectionType} with OpenSearch and OpenSearch Dashboards `}
+            <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+              Learn more
+            </EuiLink>
+          </EuiText>
+          <EuiSpacer />
+          <EuiText>
+            <h3>Connection Details</h3>
+          </EuiText>
+          <EuiSpacer />
+          <EuiFormRow label="Title">
+            <EuiFieldText data-test-subj="data-source-name" name="first" />
+          </EuiFormRow>
+          <EuiFormRow label="Description - Optional">
+            <EuiFieldText data-test-subj="data-source-name" name="first" />
+          </EuiFormRow>
+
+          <EuiFormRow label="Endpoint URL">
+            <EuiFieldText data-test-subj="data-source-name" name="first" />
+          </EuiFormRow>
+        </EuiPanel>
+      </div>
+    );
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <EuiSteps steps={firstSetOfSteps} />
+      </EuiPageSideBar>
+      <EuiPageBody>{body('Amazon S3')}</EuiPageBody>
+
+      <EuiBottomBar>
+        <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={() => {}} color="ghost" size="s" iconType="cross">
+              Cancel
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={() => {}} color="ghost" size="s" iconType="arrowLeft">
+              Previous
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={() => {}} size="s" iconType="arrowRight" fill>
+              Review Configuration
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+    </EuiPage>
+  );
+}
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 92e6c82c88..3584ef2e20 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -18,6 +18,7 @@ import { Accelerate } from '../flint/accelerate_page';
 import { TestPage } from '../flint/test_page';
 import { DataSource } from '../flint/datasource';
 import { Table } from '../flint/table';
+import { Configure } from '../flint/configure_datasource';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -102,6 +103,12 @@ export const Home = (props: HomeProps) => {
               />
             )}
           />
+
+          <Route
+            exact
+            path={'/configure'}
+            render={(routerProps) => <Configure {...commonProps} />}
+          />
         </Switch>
       </HashRouter>
     </div>

From 069ad9ecda76b3585be432450a0d978ff8ccf7c6 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 23 Aug 2023 11:00:47 -0400
Subject: [PATCH 09/22] datasources as a new plugin and mostly working

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 common/constants/shared.ts                    |   5 +
 public/components/app.tsx                     |   2 +
 .../common/tabbed_page/tabbed_page.tsx        |  58 ++++
 .../flint/{ => components}/accelerate.scss    |   0
 .../{ => components}/accelerate_callout.tsx   |   0
 .../{ => components}/accelerate_flyout.tsx    |   0
 .../{ => components}/accelerate_header.tsx    |   2 +-
 .../{ => components}/accelerate_page.tsx      |   2 +-
 .../{ => components}/accelerate_types.ts      |   0
 .../{ => components}/configure_datasource.tsx |   2 +-
 .../flint/{ => components}/datasource.tsx     |   2 +-
 .../flint/components/datasources.tsx          |  97 ++++++
 .../components/datasources_card_view.tsx      | 122 ++++++++
 .../flint/components/datasources_header.tsx   |  40 +++
 .../components/manage_datasource_table.tsx    | 215 ++++++++++++++
 .../flint/{ => components}/table.tsx          |   2 +-
 .../flint/{ => components}/test_page.tsx      |   0
 public/components/flint/home.tsx              |  93 ++++++
 .../added_integration_overview_page.tsx       |  11 +-
 .../available_integration_overview_page.tsx   |  11 +-
 .../components/integration_header.tsx         |  36 ---
 public/components/integrations/home.tsx       |  50 +---
 public/plugin.ts                              |  11 +
 .../routes/datasources/datasources_router.ts  | 277 ++++++++++++++++++
 server/routes/index.ts                        |   2 +
 25 files changed, 951 insertions(+), 89 deletions(-)
 create mode 100644 public/components/common/tabbed_page/tabbed_page.tsx
 rename public/components/flint/{ => components}/accelerate.scss (100%)
 rename public/components/flint/{ => components}/accelerate_callout.tsx (100%)
 rename public/components/flint/{ => components}/accelerate_flyout.tsx (100%)
 rename public/components/flint/{ => components}/accelerate_header.tsx (94%)
 rename public/components/flint/{ => components}/accelerate_page.tsx (98%)
 rename public/components/flint/{ => components}/accelerate_types.ts (100%)
 rename public/components/flint/{ => components}/configure_datasource.tsx (98%)
 rename public/components/flint/{ => components}/datasource.tsx (98%)
 create mode 100644 public/components/flint/components/datasources.tsx
 create mode 100644 public/components/flint/components/datasources_card_view.tsx
 create mode 100644 public/components/flint/components/datasources_header.tsx
 create mode 100644 public/components/flint/components/manage_datasource_table.tsx
 rename public/components/flint/{ => components}/table.tsx (98%)
 rename public/components/flint/{ => components}/test_page.tsx (100%)
 create mode 100644 public/components/flint/home.tsx
 create mode 100644 server/routes/datasources/datasources_router.ts

diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 2d10c08e2a..528e7a4afa 100644
--- a/common/constants/shared.ts
+++ b/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 =
diff --git a/public/components/app.tsx b/public/components/app.tsx
index ac3fa5772c..f7cc77245b 100644
--- a/public/components/app.tsx
+++ b/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 = ({
diff --git a/public/components/common/tabbed_page/tabbed_page.tsx b/public/components/common/tabbed_page/tabbed_page.tsx
new file mode 100644
index 0000000000..13b63486f2
--- /dev/null
+++ b/public/components/common/tabbed_page/tabbed_page.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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;
+}
+
+export function TabbedPage(props: TabbedPageProps) {
+  const { tabNames, header } = props;
+  const tabs = 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(-1).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>
+  );
+}
diff --git a/public/components/flint/accelerate.scss b/public/components/flint/components/accelerate.scss
similarity index 100%
rename from public/components/flint/accelerate.scss
rename to public/components/flint/components/accelerate.scss
diff --git a/public/components/flint/accelerate_callout.tsx b/public/components/flint/components/accelerate_callout.tsx
similarity index 100%
rename from public/components/flint/accelerate_callout.tsx
rename to public/components/flint/components/accelerate_callout.tsx
diff --git a/public/components/flint/accelerate_flyout.tsx b/public/components/flint/components/accelerate_flyout.tsx
similarity index 100%
rename from public/components/flint/accelerate_flyout.tsx
rename to public/components/flint/components/accelerate_flyout.tsx
diff --git a/public/components/flint/accelerate_header.tsx b/public/components/flint/components/accelerate_header.tsx
similarity index 94%
rename from public/components/flint/accelerate_header.tsx
rename to public/components/flint/components/accelerate_header.tsx
index bb63bdeaa0..77cd4128ab 100644
--- a/public/components/flint/accelerate_header.tsx
+++ b/public/components/flint/components/accelerate_header.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
 import { AccelerateHeaderProps } from './accelerate_types';
 
 export function AccelerateHeader(props: AccelerateHeaderProps) {
diff --git a/public/components/flint/accelerate_page.tsx b/public/components/flint/components/accelerate_page.tsx
similarity index 98%
rename from public/components/flint/accelerate_page.tsx
rename to public/components/flint/components/accelerate_page.tsx
index 1b68c0192d..b0288b2424 100644
--- a/public/components/flint/accelerate_page.tsx
+++ b/public/components/flint/components/accelerate_page.tsx
@@ -30,7 +30,7 @@ import {
 import React, { ReactChild, useEffect, useState } from 'react';
 import { AccelerateHeader } from './accelerate_header';
 import { AccelerateCallout } from './accelerate_callout';
-import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
 import { AccelerateProps } from './accelerate_types';
 
 export function Accelerate(props: AccelerateProps) {
diff --git a/public/components/flint/accelerate_types.ts b/public/components/flint/components/accelerate_types.ts
similarity index 100%
rename from public/components/flint/accelerate_types.ts
rename to public/components/flint/components/accelerate_types.ts
diff --git a/public/components/flint/configure_datasource.tsx b/public/components/flint/components/configure_datasource.tsx
similarity index 98%
rename from public/components/flint/configure_datasource.tsx
rename to public/components/flint/components/configure_datasource.tsx
index 78c8aaa5be..cf9b12c5ac 100644
--- a/public/components/flint/configure_datasource.tsx
+++ b/public/components/flint/components/configure_datasource.tsx
@@ -39,7 +39,7 @@ import { AccelerateCallout } from './accelerate_callout';
 import {
   ASSET_FILTER_OPTIONS,
   OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../common/constants/integrations';
+} from '../../../../common/constants/integrations';
 import { AccelerateFlyout } from './accelerate_flyout';
 
 export function Configure(props: any) {
diff --git a/public/components/flint/datasource.tsx b/public/components/flint/components/datasource.tsx
similarity index 98%
rename from public/components/flint/datasource.tsx
rename to public/components/flint/components/datasource.tsx
index 7a0f36d327..289c85f7e3 100644
--- a/public/components/flint/datasource.tsx
+++ b/public/components/flint/components/datasource.tsx
@@ -32,7 +32,7 @@ import { AccelerateCallout } from './accelerate_callout';
 import {
   ASSET_FILTER_OPTIONS,
   OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../common/constants/integrations';
+} from '../../../../common/constants/integrations';
 import { AccelerateFlyout } from './accelerate_flyout';
 
 export function DataSource(props: any) {
diff --git a/public/components/flint/components/datasources.tsx b/public/components/flint/components/datasources.tsx
new file mode 100644
index 0000000000..30f05a3a56
--- /dev/null
+++ b/public/components/flint/components/datasources.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFieldSearch,
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiFilterSelectItem,
+  EuiPage,
+  EuiPageBody,
+  EuiPopover,
+  EuiPopoverTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
+import { DatasourcesHeader } from './datasources_header';
+import { AvailableIntegrationsCardView } from '../../../../public/components/integrations/components/available_integration_card_view';
+import { DatasourcesCardView } from './datasources_card_view';
+
+export interface AvailableIntegrationType {
+  name: string;
+  description: string;
+  assetUrl?: string | undefined;
+  version?: string | undefined;
+  displayName?: string;
+  integrationType: string;
+  statics: any;
+  components: any[];
+  displayAssets: any[];
+}
+
+export interface AvailableIntegrationsTableProps {
+  loading: boolean;
+  data: AvailableIntegrationsList;
+  isCardView: boolean;
+  setCardView: (input: boolean) => void;
+  renderCateogryFilters: () => React.JSX.Element;
+}
+
+export interface AvailableIntegrationsList {
+  hits: AvailableIntegrationType[];
+}
+
+export interface AvailableIntegrationsCardViewProps {
+  data: AvailableIntegrationsList;
+  isCardView: boolean;
+  setCardView: (input: boolean) => void;
+  query: string;
+  setQuery: (input: string) => void;
+  renderCateogryFilters: () => React.JSX.Element;
+}
+
+export function Datasources() {
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        {TabbedPage({
+          tabNames: [
+            ['manage', 'Manage connections'],
+            ['new', 'New connection'],
+          ],
+          header: DatasourcesHeader(),
+        })}
+        {DatasourcesCardView({
+          data: {
+            hits: [
+              {
+                name: 'AWS S3',
+                version: '1.0.1',
+                displayName: 'AWS S3',
+                integrationType: 'logs',
+                description: 'Connect to AWS S3',
+                statics: {
+                  logo: { annotation: 'NginX Logo', path: 'logo.svg' },
+                  gallery: [
+                    { annotation: 'NginX Dashboard', path: 'dashboard1.png' },
+                    { annotation: 'NginX Logo', path: 'logo.svg' },
+                  ],
+                },
+                displayAssets: [],
+                components: [],
+              },
+            ],
+          },
+          isCardView: true,
+          setCardView: () => {},
+          query: '',
+          setQuery: () => {},
+          renderCateogryFilters: () => <></>,
+        })}
+      </EuiPageBody>
+    </EuiPage>
+  );
+}
diff --git a/public/components/flint/components/datasources_card_view.tsx b/public/components/flint/components/datasources_card_view.tsx
new file mode 100644
index 0000000000..18d62ab310
--- /dev/null
+++ b/public/components/flint/components/datasources_card_view.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiPanel,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiSearchBar,
+  EuiButton,
+  EuiFieldSearch,
+  EuiSwitch,
+  EuiButtonGroup,
+  EuiBadgeGroup,
+  EuiBadge,
+  EuiToolTip,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useRef, useState } from 'react';
+import {
+  AvailableIntegrationsCardViewProps,
+  AvailableIntegrationType,
+} from '../../integrations/components/available_integration_overview_page';
+import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
+import { badges } from '../../integrations/components/integration_category_badge_group';
+
+export function DatasourcesCardView(props: AvailableIntegrationsCardViewProps) {
+  const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
+
+  const getImage = (url?: string) => {
+    let optionalImg;
+    if (url) {
+      optionalImg = (
+        <img style={{ height: 100, width: 100 }} alt="" className="synopsisIcon" src={url} />
+      );
+    }
+    return optionalImg;
+  };
+
+  const toggleButtonsIcons = [
+    {
+      id: '0',
+      label: 'list',
+      iconType: 'list',
+    },
+    {
+      id: '1',
+      label: 'grid',
+      iconType: 'grid',
+    },
+  ];
+
+  const onChangeIcons = (optionId) => {
+    setToggleIconIdSelected(optionId);
+    if (optionId === '0') {
+      props.setCardView(false);
+    } else {
+      props.setCardView(true);
+    }
+  };
+
+  const renderRows = (integrations: AvailableIntegrationType[]) => {
+    if (!integrations || !integrations.length) return null;
+    return (
+      <>
+        <EuiFlexGroup gutterSize="l" style={{ flexWrap: 'wrap' }}>
+          {integrations.map((i, v) => {
+            return (
+              <EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
+                <EuiCard
+                  icon={getImage(
+                    'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Amazon-S3-Logo.svg/1200px-Amazon-S3-Logo.svg.png'
+                  )}
+                  title={i.displayName ? i.displayName : i.name}
+                  description={i.description}
+                  data-test-subj={`integration_card_${i.name.toLowerCase()}`}
+                  titleElement="span"
+                  onClick={() => (window.location.hash = `#/configure`)}
+                  footer={badges(i.components)}
+                />
+              </EuiFlexItem>
+            );
+          })}
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </>
+    );
+  };
+
+  return (
+    <EuiPanel>
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <EuiFieldSearch
+            fullWidth
+            isClearable={false}
+            placeholder="Search..."
+            data-test-subj="search-bar-input-box"
+            onChange={(e) => {
+              props.setQuery(e.target.value);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{props.renderCateogryFilters()}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonGroup
+            legend="Text align"
+            options={toggleButtonsIcons}
+            idSelected={toggleIconIdSelected}
+            onChange={(id) => onChangeIcons(id)}
+            isIconOnly
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      {renderRows(props.data.hits.filter((x) => x.name.includes(props.query)))}
+    </EuiPanel>
+  );
+}
diff --git a/public/components/flint/components/datasources_header.tsx b/public/components/flint/components/datasources_header.tsx
new file mode 100644
index 0000000000..0721a3d54a
--- /dev/null
+++ b/public/components/flint/components/datasources_header.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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';
+
+export function DatasourcesHeader() {
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="integrations-header">
+            <h1>Data connections</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Connect and manage compatible OpenSearch Dashboard data sources and compute.{' '}
+        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+      <EuiSpacer size="l" />
+    </div>
+  );
+}
diff --git a/public/components/flint/components/manage_datasource_table.tsx b/public/components/flint/components/manage_datasource_table.tsx
new file mode 100644
index 0000000000..36ac9ef939
--- /dev/null
+++ b/public/components/flint/components/manage_datasource_table.tsx
@@ -0,0 +1,215 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { AddedIntegrationsTableProps } from '../../integrations/components/added_integration_overview_page';
+import {
+  ASSET_FILTER_OPTIONS,
+  INTEGRATION_TEMPLATE_OPTIONS,
+} from '../../../../common/constants/integrations';
+import { DeleteModal } from '../../../../public/components/common/helpers/delete_modal';
+import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../../common/constants/shared';
+import { useToast } from '../../../../public/components/common/toast';
+import { DatasourcesHeader } from './datasources_header';
+import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
+
+export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
+  const { http, chrome } = props;
+
+  const integrations = [];
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      {
+        text: 'Datasources',
+        href: '#/',
+      },
+    ]);
+    handleDataRequest();
+  }, []);
+
+  async function handleDataRequest() {
+    http.get(`${DATASOURCES_BASE}/datasources`).then((exists) => setData(exists.data));
+  }
+
+  const { setToast } = useToast();
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Asset name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink data-test-subj={`${record.name}IntegrationLink`} href={`#/installed/${record.id}`}>
+          {_.truncate(record.name, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'source',
+      name: 'Source',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink
+          data-test-subj={`${record.templateName}IntegrationDescription`}
+          href={`#/available/${record.templateName}`}
+        >
+          {_.truncate(record.templateName, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'dateAdded',
+      name: 'Date Added',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.templateName}IntegrationDescription`}>
+          {_.truncate(record.creationDate, { length: 100 })}
+        </EuiText>
+      ),
+    },
+    {
+      field: 'actions',
+      name: 'Actions',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiIcon
+          type={'trash'}
+          onClick={() => {
+            getModal(record.id, record.templateName);
+          }}
+        />
+      ),
+    },
+  ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  async function deleteAddedIntegration(integrationInstance: string, name: string) {
+    http
+      .delete(`${INTEGRATIONS_BASE}/store/${integrationInstance}`)
+      .then(() => {
+        setToast(`${name} integration successfully deleted!`, 'success');
+      })
+      .catch((err) => {
+        setToast(`Error deleting ${name} or its assets`, 'danger');
+      })
+      .finally(() => {
+        window.location.hash = '#/installed';
+      });
+  }
+
+  const getModal = (integrationInstanceId, name) => {
+    setModalLayout(
+      <DeleteModal
+        onConfirm={() => {
+          setIsModalVisible(false);
+          deleteAddedIntegration(integrationInstanceId, name);
+        }}
+        onCancel={() => {
+          setIsModalVisible(false);
+        }}
+        title={`Delete Assets`}
+        message={`Are you sure you want to delete the selected asset(s)?`}
+      />
+    );
+    setIsModalVisible(true);
+  };
+
+  const search = {
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'templateName',
+        name: 'Type',
+        multiSelect: false,
+        options: INTEGRATION_TEMPLATE_OPTIONS.map((i) => ({
+          value: i,
+          name: i,
+          view: i,
+        })),
+      },
+    ],
+  };
+
+  const entries = integrations.map((integration) => {
+    const id = integration.id;
+    const templateName = integration.templateName;
+    const creationDate = integration.creationDate;
+    const name = integration.name;
+    return { id, templateName, creationDate, name, data: { templateName, name } };
+  });
+
+  return (
+    <EuiPage>
+      <EuiPageBody component="div">
+        {TabbedPage({
+          tabNames: [
+            ['manage', 'Manage connections'],
+            ['new', 'New connection'],
+          ],
+          header: DatasourcesHeader(),
+        })}
+        <EuiPageContent data-test-subj="addedIntegrationsArea">
+          {entries && entries.length > 0 ? (
+            <EuiInMemoryTable
+              loading={props.loading}
+              items={entries}
+              itemId="id"
+              columns={tableColumns}
+              tableLayout="auto"
+              pagination={{
+                initialPageSize: 10,
+                pageSizeOptions: [5, 10, 15],
+              }}
+              search={search}
+              allowNeutralSort={false}
+              isSelectable={true}
+            />
+          ) : (
+            <>
+              <EuiFlexGroup direction="column" alignItems="center">
+                <EuiFlexItem grow={true}>
+                  <EuiIcon size="xxl" type="help" />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer />
+              <EuiText textAlign="center" data-test-subj="no-added-integrations">
+                <h2>
+                  There are currently no added integrations. Add them{' '}
+                  <EuiLink href={'#/available'}>here</EuiLink> to start using pre-canned assets!
+                </h2>
+              </EuiText>
+              <EuiSpacer size="m" />
+            </>
+          )}
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}
diff --git a/public/components/flint/table.tsx b/public/components/flint/components/table.tsx
similarity index 98%
rename from public/components/flint/table.tsx
rename to public/components/flint/components/table.tsx
index a1d229c312..4e0b25093b 100644
--- a/public/components/flint/table.tsx
+++ b/public/components/flint/components/table.tsx
@@ -32,7 +32,7 @@ import { AccelerateCallout } from './accelerate_callout';
 import {
   ASSET_FILTER_OPTIONS,
   OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../common/constants/integrations';
+} from '../../../../common/constants/integrations';
 import { AccelerateFlyout } from './accelerate_flyout';
 
 export function Table(props: any) {
diff --git a/public/components/flint/test_page.tsx b/public/components/flint/components/test_page.tsx
similarity index 100%
rename from public/components/flint/test_page.tsx
rename to public/components/flint/components/test_page.tsx
diff --git a/public/components/flint/home.tsx b/public/components/flint/home.tsx
new file mode 100644
index 0000000000..7a28b26068
--- /dev/null
+++ b/public/components/flint/home.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
+import { ChromeBreadcrumb } from '../../../../../src/core/public';
+import { Accelerate } from '../flint/components/accelerate_page';
+import { TestPage } from '../flint/components/test_page';
+import { DataSource } from '../flint/components/datasource';
+import { Table } from '../flint/components/table';
+import { Configure } from '../flint/components/configure_datasource';
+import { Datasources } from '../flint/components/datasources';
+import { AddedIntegrationsTable } from './components/manage_datasource_table';
+
+export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
+
+interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
+  parentBreadcrumbs: ChromeBreadcrumb[];
+  pplService: any;
+}
+
+export const Home = (props: HomeProps) => {
+  const { http, chrome, pplService } = props;
+
+  const commonProps = {
+    http,
+    chrome,
+    pplService,
+  };
+
+  return (
+    <div>
+      <HashRouter>
+        <Switch>
+          <Route
+            exact
+            path={'/accelerate'}
+            render={(routerProps) => <Accelerate {...commonProps} />}
+          />
+          <Route
+            exacts
+            path={'/accelerateAsModal'}
+            render={(routerProps) => <TestPage {...commonProps} />}
+          />
+          {/* needs to go before the Datasource*/}
+          <Route
+            exact
+            path={'/accelerate/:id/:table'}
+            render={(routerProps) => (
+              <Table
+                {...commonProps}
+                dataSource={decodeURIComponent(routerProps.match.params.id)}
+                table={decodeURIComponent(routerProps.match.params.table)}
+              />
+            )}
+          />
+
+          <Route
+            exact
+            path={'/accelerate/:id+'}
+            render={(routerProps) => (
+              <DataSource
+                {...commonProps}
+                dataSource={decodeURIComponent(routerProps.match.params.id)}
+              />
+            )}
+          />
+
+          <Route
+            exact
+            path={['/', '/new']}
+            render={(routerProps) => <Datasources {...commonProps} />}
+          />
+
+          <Route
+            exact
+            path={'/manage'}
+            render={(routerProps) => <AddedIntegrationsTable {...commonProps} />}
+          />
+
+          <Route
+            exact
+            path={'/configure'}
+            render={(routerProps) => <Configure {...commonProps} />}
+          />
+        </Switch>
+      </HashRouter>
+    </div>
+  );
+};
diff --git a/public/components/integrations/components/added_integration_overview_page.tsx b/public/components/integrations/components/added_integration_overview_page.tsx
index 89026239c4..af02e078d9 100644
--- a/public/components/integrations/components/added_integration_overview_page.tsx
+++ b/public/components/integrations/components/added_integration_overview_page.tsx
@@ -7,11 +7,12 @@
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { IntegrationHeader } from './integration_header';
 import { AddedIntegrationsTable } from './added_integration_table';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AddedIntegrationOverviewPageProps } from './integration_types';
 import { HttpStart } from '../../../../../../src/core/public';
+import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
+import { IntegrationHeader } from './integration_header';
 
 export interface AddedIntegrationsTableProps {
   loading: boolean;
@@ -56,7 +57,13 @@ export function AddedIntegrationOverviewPage(props: AddedIntegrationOverviewPage
   return (
     <EuiPage>
       <EuiPageBody component="div">
-        {IntegrationHeader()}
+        {TabbedPage({
+          tabNames: [
+            ['installed', 'Installed'],
+            ['available', 'Available'],
+          ],
+          header: IntegrationHeader(),
+        })}
         {AddedIntegrationsTable({ data, loading: false, http })}
       </EuiPageBody>
     </EuiPage>
diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
index 1ec40154b3..373b51c887 100644
--- a/public/components/integrations/components/available_integration_overview_page.tsx
+++ b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -17,12 +17,13 @@ import {
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { INTEGRATION_CATEOGRY_OPTIONS } from '../../../../common/constants/integrations';
-import { IntegrationHeader } from './integration_header';
 import { AvailableIntegrationsTable } from './available_integration_table';
 import { AvailableIntegrationsCardView } from './available_integration_card_view';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AvailableIntegrationOverviewPageProps } from './integration_types';
 import { useToast } from '../../../../public/components/common/toast';
+import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
+import { IntegrationHeader } from './integration_header';
 
 export interface AvailableIntegrationType {
   name: string;
@@ -179,7 +180,13 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
   return (
     <EuiPage>
       <EuiPageBody>
-        {IntegrationHeader()}
+        {TabbedPage({
+          tabNames: [
+            ['installed', 'Installed'],
+            ['available', 'Available'],
+          ],
+          header: IntegrationHeader(),
+        })}
         {isCardView
           ? AvailableIntegrationsCardView({
               data: {
diff --git a/public/components/integrations/components/integration_header.tsx b/public/components/integrations/components/integration_header.tsx
index 2b8ad7f177..c90ddf6526 100644
--- a/public/components/integrations/components/integration_header.tsx
+++ b/public/components/integrations/components/integration_header.tsx
@@ -18,40 +18,6 @@ import React, { useEffect, useState } from 'react';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
 
 export function IntegrationHeader() {
-  const tabs = [
-    {
-      id: 'installed',
-      name: 'Installed',
-      disabled: false,
-    },
-    {
-      id: 'available',
-      name: 'Available',
-      disabled: false,
-    },
-  ];
-
-  const [selectedTabId, setSelectedTabId] = useState(
-    window.location.hash.substring(2) ? window.location.hash.substring(2) : 'installed'
-  );
-
-  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}
-        disabled={tab.disabled}
-        key={index}
-      >
-        {tab.name}
-      </EuiTab>
-    ));
-  };
   return (
     <div>
       <EuiPageHeader>
@@ -70,8 +36,6 @@ export function IntegrationHeader() {
         </EuiLink>
       </EuiText>
       <EuiSpacer size="l" />
-      <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
-      <EuiSpacer size="s" />
     </div>
   );
 }
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 3584ef2e20..9fa4ff6fbf 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -14,11 +14,12 @@ import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import { AvailableIntegrationOverviewPage } from './components/available_integration_overview_page';
 import { AddedIntegrationOverviewPage } from './components/added_integration_overview_page';
 import { AddedIntegration } from './components/added_integration';
-import { Accelerate } from '../flint/accelerate_page';
-import { TestPage } from '../flint/test_page';
-import { DataSource } from '../flint/datasource';
-import { Table } from '../flint/table';
-import { Configure } from '../flint/configure_datasource';
+import { Accelerate } from '../flint/components/accelerate_page';
+import { TestPage } from '../flint/components/test_page';
+import { DataSource } from '../flint/components/datasource';
+import { Table } from '../flint/components/table';
+import { Configure } from '../flint/components/configure_datasource';
+import { Datasources } from '../flint/components/datasources';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -70,45 +71,6 @@ export const Home = (props: HomeProps) => {
               />
             )}
           />
-          <Route
-            exact
-            path={'/accelerate'}
-            render={(routerProps) => <Accelerate {...commonProps} />}
-          />
-          <Route
-            exacts
-            path={'/accelerateAsModal'}
-            render={(routerProps) => <TestPage {...commonProps} />}
-          />
-          {/* needs to go before the Datasource*/}
-          <Route
-            exact
-            path={'/accelerate/:id/:table'}
-            render={(routerProps) => (
-              <Table
-                {...commonProps}
-                dataSource={decodeURIComponent(routerProps.match.params.id)}
-                table={decodeURIComponent(routerProps.match.params.table)}
-              />
-            )}
-          />
-
-          <Route
-            exact
-            path={'/accelerate/:id+'}
-            render={(routerProps) => (
-              <DataSource
-                {...commonProps}
-                dataSource={decodeURIComponent(routerProps.match.params.id)}
-              />
-            )}
-          />
-
-          <Route
-            exact
-            path={'/configure'}
-            render={(routerProps) => <Configure {...commonProps} />}
-          />
         </Switch>
       </HashRouter>
     </div>
diff --git a/public/plugin.ts b/public/plugin.ts
index 021a9f56ad..f6f5aae589 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -39,6 +39,9 @@ import {
   observabilityIntegrationsTitle,
   observabilityIntegrationsPluginOrder,
   observabilityPluginOrder,
+  observabilityDatasourcesID,
+  observabilityDatasourcesTitle,
+  observabilityDatasourcesPluginOrder,
 } from '../common/constants/shared';
 import { QueryManager } from '../common/query_manager';
 import { VISUALIZATION_SAVED_OBJECT } from '../common/types/observability_saved_object_attributes';
@@ -197,6 +200,14 @@ export class ObservabilityPlugin
       mount: appMountWithStartPage('integrations'),
     });
 
+    core.application.register({
+      id: observabilityDatasourcesID,
+      title: observabilityDatasourcesTitle,
+      category: DEFAULT_APP_CATEGORIES.management,
+      order: observabilityDatasourcesPluginOrder,
+      mount: appMountWithStartPage('datasources'),
+    });
+
     const embeddableFactory = new ObservabilityEmbeddableFactoryDefinition(async () => ({
       getAttributeService: (await core.getStartServices())[1].dashboard.getAttributeService,
       savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
diff --git a/server/routes/datasources/datasources_router.ts b/server/routes/datasources/datasources_router.ts
new file mode 100644
index 0000000000..5b2f9a8d50
--- /dev/null
+++ b/server/routes/datasources/datasources_router.ts
@@ -0,0 +1,277 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import * as mime from 'mime';
+import sanitize from 'sanitize-filename';
+import { IRouter, RequestHandlerContext } from '../../../../../src/core/server';
+import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../common/constants/shared';
+import { IntegrationsAdaptor } from '../../adaptors/integrations/integrations_adaptor';
+import {
+  OpenSearchDashboardsRequest,
+  OpenSearchDashboardsResponseFactory,
+} from '../../../../../src/core/server/http/router';
+import { IntegrationsKibanaBackend } from '../../adaptors/integrations/integrations_kibana_backend';
+
+/**
+ * Handle an `OpenSearchDashboardsRequest` using the provided `callback` function.
+ * This is a convenience method that handles common error handling and response formatting.
+ * The callback must accept a `IntegrationsAdaptor` as its first argument.
+ *
+ * If the callback throws an error,
+ * the `OpenSearchDashboardsResponse` will be formatted using the error's `statusCode` and `message` properties.
+ * Otherwise, the callback's return value will be formatted in a JSON object under the `data` field.
+ *
+ * @param {IntegrationsAdaptor} adaptor The adaptor instance to use for making requests.
+ * @param {OpenSearchDashboardsResponseFactory} response The factory to use for creating responses.
+ * @callback callback A callback that will invoke a request on a provided adaptor.
+ * @returns {Promise<OpenSearchDashboardsResponse>} An `OpenSearchDashboardsResponse` with the return data from the callback.
+ */
+export const handleWithCallback = async (
+  adaptor: IntegrationsAdaptor,
+  response: OpenSearchDashboardsResponseFactory,
+  callback: (a: IntegrationsAdaptor) => any
+): Promise<any> => {
+  try {
+    const data = await callback(adaptor);
+    return response.ok({
+      body: {
+        data,
+      },
+    });
+  } catch (err: any) {
+    console.error(`handleWithCallback: callback failed with error "${err.message}"`);
+    return response.custom({
+      statusCode: err.statusCode || 500,
+      body: err.message,
+    });
+  }
+};
+
+const getAdaptor = (
+  context: RequestHandlerContext,
+  _request: OpenSearchDashboardsRequest
+): IntegrationsAdaptor => {
+  return new IntegrationsKibanaBackend(context.core.savedObjects.client);
+};
+
+export function registerDatasourcesRoute(router: IRouter) {
+  //   router.get(
+  //     {
+  //       path: `${DATASOURCES_BASE}/repository`,
+  //       validate: false,
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getIntegrationTemplates()
+  //       );
+  //     }
+  //   );
+
+  //   router.post(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/store/{templateName}`,
+  //       validate: {
+  //         params: schema.object({
+  //           templateName: schema.string(),
+  //         }),
+  //         body: schema.object({
+  //           name: schema.string(),
+  //           dataSource: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) => {
+  //         return a.loadIntegrationInstance(
+  //           request.params.templateName,
+  //           request.body.name,
+  //           request.body.dataSource
+  //         );
+  //       });
+  //     }
+  //   );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/repository/{name}`,
+  //       validate: {
+  //         params: schema.object({
+  //           name: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(
+  //         adaptor,
+  //         response,
+  //         async (a: IntegrationsAdaptor) =>
+  //           (
+  //             await a.getIntegrationTemplates({
+  //               name: request.params.name,
+  //             })
+  //           ).hits[0]
+  //       );
+  //     }
+  //   );
+
+  router.get(
+    {
+      path: `${DATASOURCES_BASE}/datasources`,
+      validate: false,
+    },
+    async (context, request, response): Promise<any> => {
+      const adaptor = getAdaptor(context, request);
+      try {
+        const requestPath = sanitize(request.params.path);
+        const result = await adaptor.getStatic(request.params.id, requestPath);
+        return response.ok({
+          headers: {
+            'Content-Type': mime.getType(request.params.path),
+          },
+          body: result,
+        });
+      } catch (err: any) {
+        return response.custom({
+          statusCode: err.statusCode ? err.statusCode : 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  router.get(
+    {
+      path: `${DATASOURCES_BASE}/repository/{id}/static/{path}`,
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+          path: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response): Promise<any> => {
+      const adaptor = getAdaptor(context, request);
+      try {
+        const requestPath = sanitize(request.params.path);
+        const result = await adaptor.getStatic(request.params.id, requestPath);
+        return response.ok({
+          headers: {
+            'Content-Type': mime.getType(request.params.path),
+          },
+          body: result,
+        });
+      } catch (err: any) {
+        return response.custom({
+          statusCode: err.statusCode ? err.statusCode : 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/repository/{id}/schema`,
+  //       validate: {
+  //         params: schema.object({
+  //           id: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getSchemas(request.params.id)
+  //       );
+  //     }
+  //   );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/repository/{id}/assets`,
+  //       validate: {
+  //         params: schema.object({
+  //           id: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getAssets(request.params.id)
+  //       );
+  //     }
+  //   );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/repository/{id}/data`,
+  //       validate: {
+  //         params: schema.object({
+  //           id: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getSampleData(request.params.id)
+  //       );
+  //     }
+  //   );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/store`,
+  //       validate: false,
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getIntegrationInstances({})
+  //       );
+  //     }
+  //   );
+
+  //   router.delete(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/store/{id}`,
+  //       validate: {
+  //         params: schema.object({
+  //           id: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.deleteIntegrationInstance(request.params.id)
+  //       );
+  //     }
+  //   );
+
+  //   router.get(
+  //     {
+  //       path: `${INTEGRATIONS_BASE}/store/{id}`,
+  //       validate: {
+  //         params: schema.object({
+  //           id: schema.string(),
+  //         }),
+  //       },
+  //     },
+  //     async (context, request, response): Promise<any> => {
+  //       const adaptor = getAdaptor(context, request);
+  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
+  //         a.getIntegrationInstance({
+  //           id: request.params.id,
+  //         })
+  //       );
+  //     }
+  //   );
+}
diff --git a/server/routes/index.ts b/server/routes/index.ts
index 4830bf58c4..d3d64f5509 100644
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -21,6 +21,7 @@ import { registerEventAnalyticsRouter } from './event_analytics/event_analytics_
 import { registerAppAnalyticsRouter } from './application_analytics/app_analytics_router';
 import { registerMetricsRoute } from './metrics/metrics_rounter';
 import { registerIntegrationsRoute } from './integrations/integrations_router';
+import { registerDatasourcesRoute } from './datasources/datasources_router';
 
 export function setupRoutes({ router, client }: { router: IRouter; client: ILegacyClusterClient }) {
   PanelsRouter(router);
@@ -42,4 +43,5 @@ export function setupRoutes({ router, client }: { router: IRouter; client: ILega
 
   registerMetricsRoute(router);
   registerIntegrationsRoute(router);
+  registerDatasourcesRoute(router);
 }

From 5720ffd113b5182c327db6dd8880cf9f0577a052 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 23 Aug 2023 12:01:00 -0400
Subject: [PATCH 10/22] hook up manage to show datasources call

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/manage_datasource_table.tsx    | 47 +++++++++----------
 public/components/flint/home.tsx              | 12 +++--
 .../available_integration_overview_page.tsx   |  2 +
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/public/components/flint/components/manage_datasource_table.tsx b/public/components/flint/components/manage_datasource_table.tsx
index 36ac9ef939..6e722245dc 100644
--- a/public/components/flint/components/manage_datasource_table.tsx
+++ b/public/components/flint/components/manage_datasource_table.tsx
@@ -29,11 +29,21 @@ import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../../common/constant
 import { useToast } from '../../../../public/components/common/toast';
 import { DatasourcesHeader } from './datasources_header';
 import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
+import { RouteComponentProps } from 'react-router-dom';
+import { HttpStart } from '../../../../../../src/core/public';
+import { HomeProps } from '../home';
+import { coreRefs } from '../../../framework/core_refs';
 
-export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
+export interface ManageDatasourcesTableProps extends HomeProps{
+}
+
+export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
   const { http, chrome } = props;
+  const {pplService} = coreRefs;
+
+  
 
-  const integrations = [];
+  const [data, setData] = useState([]);
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -46,13 +56,18 @@ export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
   }, []);
 
   async function handleDataRequest() {
-    http.get(`${DATASOURCES_BASE}/datasources`).then((exists) => setData(exists.data));
+      pplService!
+        .fetch({ query: "show datasources", format: 'jdbc' })
+        .then((data) =>
+          setData(
+            data.jsonData.map((x: any) => {
+              return { name: x.DATASOURCE_NAME };
+            })
+          ));
   }
 
   const { setToast } = useToast();
 
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
   const tableColumns = [
     {
@@ -148,7 +163,7 @@ export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
         field: 'templateName',
         name: 'Type',
         multiSelect: false,
-        options: INTEGRATION_TEMPLATE_OPTIONS.map((i) => ({
+        options: [].map((i) => ({
           value: i,
           name: i,
           view: i,
@@ -157,7 +172,7 @@ export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
     ],
   };
 
-  const entries = integrations.map((integration) => {
+  const entries = data.map((integration) => {
     const id = integration.id;
     const templateName = integration.templateName;
     const creationDate = integration.creationDate;
@@ -176,7 +191,6 @@ export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
           header: DatasourcesHeader(),
         })}
         <EuiPageContent data-test-subj="addedIntegrationsArea">
-          {entries && entries.length > 0 ? (
             <EuiInMemoryTable
               loading={props.loading}
               items={entries}
@@ -191,23 +205,6 @@ export function ManageDatasourcesTable(props: AddedIntegrationsTableProps) {
               allowNeutralSort={false}
               isSelectable={true}
             />
-          ) : (
-            <>
-              <EuiFlexGroup direction="column" alignItems="center">
-                <EuiFlexItem grow={true}>
-                  <EuiIcon size="xxl" type="help" />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer />
-              <EuiText textAlign="center" data-test-subj="no-added-integrations">
-                <h2>
-                  There are currently no added integrations. Add them{' '}
-                  <EuiLink href={'#/available'}>here</EuiLink> to start using pre-canned assets!
-                </h2>
-              </EuiText>
-              <EuiSpacer size="m" />
-            </>
-          )}
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
diff --git a/public/components/flint/home.tsx b/public/components/flint/home.tsx
index 7a28b26068..8f94cd7a54 100644
--- a/public/components/flint/home.tsx
+++ b/public/components/flint/home.tsx
@@ -6,20 +6,22 @@
 import React from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
-import { ChromeBreadcrumb } from '../../../../../src/core/public';
+import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public';
 import { Accelerate } from '../flint/components/accelerate_page';
 import { TestPage } from '../flint/components/test_page';
 import { DataSource } from '../flint/components/datasource';
 import { Table } from '../flint/components/table';
 import { Configure } from '../flint/components/configure_datasource';
 import { Datasources } from '../flint/components/datasources';
-import { AddedIntegrationsTable } from './components/manage_datasource_table';
+import { AddedIntegrationsTable, ManageDatasourcesTable } from './components/manage_datasource_table';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
-interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
-  parentBreadcrumbs: ChromeBreadcrumb[];
+export interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
   pplService: any;
+  parentBreadcrumb: ChromeBreadcrumb;
+  http: HttpStart;
+  chrome: ChromeStart;
 }
 
 export const Home = (props: HomeProps) => {
@@ -78,7 +80,7 @@ export const Home = (props: HomeProps) => {
           <Route
             exact
             path={'/manage'}
-            render={(routerProps) => <AddedIntegrationsTable {...commonProps} />}
+            render={(routerProps) => <ManageDatasourcesTable {...commonProps} />}
           />
 
           <Route
diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
index ad0fda79d5..d7d7ac1bb2 100644
--- a/public/components/integrations/components/available_integration_overview_page.tsx
+++ b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -24,6 +24,7 @@ import { AvailableIntegrationOverviewPageProps } from './integration_types';
 import { useToast } from '../../../../public/components/common/toast';
 import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
 import { IntegrationHeader } from './integration_header';
+import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
   labels?: string[];
@@ -57,6 +58,7 @@ export interface AvailableIntegrationsCardViewProps {
   query: string;
   setQuery: (input: string) => void;
   renderCateogryFilters: () => React.JSX.Element;
+  http: HttpStart;
 }
 
 export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOverviewPageProps) {

From 515f2654d9a38ce5b5bf49f3e4493b74e5322e7f Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 23 Aug 2023 14:29:26 -0400
Subject: [PATCH 11/22] update two tables with descriptions

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../common/tabbed_page/tabbed_page.tsx        |   9 +-
 .../components/datasources_card_view.tsx      |   2 +
 .../manage_datasource_description.tsx         |  34 +++++
 .../components/manage_datasource_table.tsx    | 135 +++++++-----------
 .../components/new_datasource_description.tsx |  35 +++++
 public/components/flint/home.tsx              |  13 +-
 6 files changed, 139 insertions(+), 89 deletions(-)
 create mode 100644 public/components/flint/components/manage_datasource_description.tsx
 create mode 100644 public/components/flint/components/new_datasource_description.tsx

diff --git a/public/components/common/tabbed_page/tabbed_page.tsx b/public/components/common/tabbed_page/tabbed_page.tsx
index 13b63486f2..37a37ed23a 100644
--- a/public/components/common/tabbed_page/tabbed_page.tsx
+++ b/public/components/common/tabbed_page/tabbed_page.tsx
@@ -22,14 +22,19 @@ interface TabbedPageProps {
   header: JSX.Element;
 }
 
+interface Tab {
+  id: string;
+  name: string;
+}
+
 export function TabbedPage(props: TabbedPageProps) {
   const { tabNames, header } = props;
-  const tabs = tabNames.map((tabName: [string, string]) => {
+  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(-1).id
+    window.location.hash.substring(2) ? window.location.hash.substring(2) : tabs && tabs.at(0)!.id
   );
 
   const onSelectedTabChanged = (id) => {
diff --git a/public/components/flint/components/datasources_card_view.tsx b/public/components/flint/components/datasources_card_view.tsx
index 18d62ab310..0e9960d9cc 100644
--- a/public/components/flint/components/datasources_card_view.tsx
+++ b/public/components/flint/components/datasources_card_view.tsx
@@ -26,6 +26,7 @@ import {
 } from '../../integrations/components/available_integration_overview_page';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { badges } from '../../integrations/components/integration_category_badge_group';
+import { NewDatasourcesDescription } from './new_datasource_description';
 
 export function DatasourcesCardView(props: AvailableIntegrationsCardViewProps) {
   const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
@@ -92,6 +93,7 @@ export function DatasourcesCardView(props: AvailableIntegrationsCardViewProps) {
 
   return (
     <EuiPanel>
+      <NewDatasourcesDescription />
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFieldSearch
diff --git a/public/components/flint/components/manage_datasource_description.tsx b/public/components/flint/components/manage_datasource_description.tsx
new file mode 100644
index 0000000000..491594497c
--- /dev/null
+++ b/public/components/flint/components/manage_datasource_description.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+
+export function DatasourcesDescription() {
+  return (
+    <div>
+      <EuiTitle size="s">
+        <h2>Manage existing data connections</h2>
+      </EuiTitle>
+
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Create or manage already created data source connections.
+      </EuiText>
+      <EuiHorizontalRule size="full" />
+    </div>
+  );
+}
diff --git a/public/components/flint/components/manage_datasource_table.tsx b/public/components/flint/components/manage_datasource_table.tsx
index 6e722245dc..b54e89f422 100644
--- a/public/components/flint/components/manage_datasource_table.tsx
+++ b/public/components/flint/components/manage_datasource_table.tsx
@@ -19,6 +19,7 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { AddedIntegrationsTableProps } from '../../integrations/components/added_integration_overview_page';
 import {
   ASSET_FILTER_OPTIONS,
@@ -29,19 +30,16 @@ import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../../common/constant
 import { useToast } from '../../../../public/components/common/toast';
 import { DatasourcesHeader } from './datasources_header';
 import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
-import { RouteComponentProps } from 'react-router-dom';
 import { HttpStart } from '../../../../../../src/core/public';
 import { HomeProps } from '../home';
 import { coreRefs } from '../../../framework/core_refs';
+import { DatasourcesDescription } from './manage_datasource_description';
 
-export interface ManageDatasourcesTableProps extends HomeProps{
-}
+export type ManageDatasourcesTableProps = HomeProps;
 
 export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
   const { http, chrome } = props;
-  const {pplService} = coreRefs;
-
-  
+  const { pplService } = coreRefs;
 
   const [data, setData] = useState([]);
 
@@ -56,52 +54,61 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
   }, []);
 
   async function handleDataRequest() {
-      pplService!
-        .fetch({ query: "show datasources", format: 'jdbc' })
-        .then((data) =>
-          setData(
-            data.jsonData.map((x: any) => {
-              return { name: x.DATASOURCE_NAME };
-            })
-          ));
+    pplService!.fetch({ query: 'show datasources', format: 'jdbc' }).then((datasources) =>
+      setData(
+        datasources.jsonData.map((x: any) => {
+          return { name: x.DATASOURCE_NAME, connectionType: x.CONNECTOR_TYPE };
+        })
+      )
+    );
   }
 
   const { setToast } = useToast();
 
-
   const tableColumns = [
     {
       field: 'name',
-      name: 'Asset name',
+      name: 'Name',
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink data-test-subj={`${record.name}IntegrationLink`} href={`#/installed/${record.id}`}>
+        <EuiLink
+          data-test-subj={`${record.name}DatasourceLink`}
+          href={`#/accelerate/${record.name}`}
+        >
           {_.truncate(record.name, { length: 100 })}
         </EuiLink>
       ),
     },
     {
-      field: 'source',
-      name: 'Source',
+      field: 'connectionType',
+      name: 'Connection type',
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.templateName}IntegrationDescription`}
-          href={`#/available/${record.templateName}`}
-        >
-          {_.truncate(record.templateName, { length: 100 })}
-        </EuiLink>
+        <EuiText data-test-subj={`${record.templateName}DatasourceType`}>
+          {_.truncate(record.connectionType, { length: 100 })}
+        </EuiText>
       ),
     },
     {
-      field: 'dateAdded',
-      name: 'Date Added',
+      field: 'connectedTo',
+      name: 'Connected to',
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiText data-test-subj={`${record.templateName}IntegrationDescription`}>
+        <EuiText data-test-subj={`${record.templateName}DatasourceConnectedTo`}>
+          {_.truncate(record.creationDate, { length: 100 })}
+        </EuiText>
+      ),
+    },
+    {
+      field: 'connectionHealth',
+      name: 'Connection Health',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiText data-test-subj={`${record.templateName}DatasourceConnectionHealth`}>
           {_.truncate(record.creationDate, { length: 100 })}
         </EuiText>
       ),
@@ -115,44 +122,13 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
         <EuiIcon
           type={'trash'}
           onClick={() => {
-            getModal(record.id, record.templateName);
+            /* Delete Datasource*/
           }}
         />
       ),
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
-  async function deleteAddedIntegration(integrationInstance: string, name: string) {
-    http
-      .delete(`${INTEGRATIONS_BASE}/store/${integrationInstance}`)
-      .then(() => {
-        setToast(`${name} integration successfully deleted!`, 'success');
-      })
-      .catch((err) => {
-        setToast(`Error deleting ${name} or its assets`, 'danger');
-      })
-      .finally(() => {
-        window.location.hash = '#/installed';
-      });
-  }
-
-  const getModal = (integrationInstanceId, name) => {
-    setModalLayout(
-      <DeleteModal
-        onConfirm={() => {
-          setIsModalVisible(false);
-          deleteAddedIntegration(integrationInstanceId, name);
-        }}
-        onCancel={() => {
-          setIsModalVisible(false);
-        }}
-        title={`Delete Assets`}
-        message={`Are you sure you want to delete the selected asset(s)?`}
-      />
-    );
-    setIsModalVisible(true);
-  };
-
   const search = {
     box: {
       incremental: true,
@@ -172,12 +148,10 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
     ],
   };
 
-  const entries = data.map((integration) => {
-    const id = integration.id;
-    const templateName = integration.templateName;
-    const creationDate = integration.creationDate;
-    const name = integration.name;
-    return { id, templateName, creationDate, name, data: { templateName, name } };
+  const entries = data.map((datasource) => {
+    const name = datasource.name;
+    const connectionType = datasource.connectionType;
+    return { connectionType, name, data: { name, connectionType } };
   });
 
   return (
@@ -191,20 +165,21 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
           header: DatasourcesHeader(),
         })}
         <EuiPageContent data-test-subj="addedIntegrationsArea">
-            <EuiInMemoryTable
-              loading={props.loading}
-              items={entries}
-              itemId="id"
-              columns={tableColumns}
-              tableLayout="auto"
-              pagination={{
-                initialPageSize: 10,
-                pageSizeOptions: [5, 10, 15],
-              }}
-              search={search}
-              allowNeutralSort={false}
-              isSelectable={true}
-            />
+          <DatasourcesDescription />
+          <EuiInMemoryTable
+            loading={props.loading}
+            items={entries}
+            itemId="id"
+            columns={tableColumns}
+            tableLayout="auto"
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            search={search}
+            allowNeutralSort={false}
+            isSelectable={true}
+          />
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
diff --git a/public/components/flint/components/new_datasource_description.tsx b/public/components/flint/components/new_datasource_description.tsx
new file mode 100644
index 0000000000..9fd5e5d805
--- /dev/null
+++ b/public/components/flint/components/new_datasource_description.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+
+export function NewDatasourcesDescription() {
+  return (
+    <div>
+      <EuiTitle size="s">
+        <h2>Create a new data connection</h2>
+      </EuiTitle>
+
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Connect to a compatible data source or compute engine to bring your data into OpenSearch and
+        OpenSearch Dashboards.
+      </EuiText>
+      <EuiHorizontalRule size="full" />
+    </div>
+  );
+}
diff --git a/public/components/flint/home.tsx b/public/components/flint/home.tsx
index 8f94cd7a54..64f4720dea 100644
--- a/public/components/flint/home.tsx
+++ b/public/components/flint/home.tsx
@@ -13,7 +13,10 @@ import { DataSource } from '../flint/components/datasource';
 import { Table } from '../flint/components/table';
 import { Configure } from '../flint/components/configure_datasource';
 import { Datasources } from '../flint/components/datasources';
-import { AddedIntegrationsTable, ManageDatasourcesTable } from './components/manage_datasource_table';
+import {
+  AddedIntegrationsTable,
+  ManageDatasourcesTable,
+} from './components/manage_datasource_table';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -71,15 +74,11 @@ export const Home = (props: HomeProps) => {
             )}
           />
 
-          <Route
-            exact
-            path={['/', '/new']}
-            render={(routerProps) => <Datasources {...commonProps} />}
-          />
+          <Route exact path={'/new'} render={(routerProps) => <Datasources {...commonProps} />} />
 
           <Route
             exact
-            path={'/manage'}
+            path={['/', '/manage']}
             render={(routerProps) => <ManageDatasourcesTable {...commonProps} />}
           />
 

From 8d7b933281872018f974e4281a739fde8a2bd794 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 31 Aug 2023 07:26:09 -0400
Subject: [PATCH 12/22] make some updates to the page

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../flint/components/accelerate_callout.tsx   |  4 +-
 .../flint/components/datasource.tsx           | 73 ++++++++++++----
 .../manage_datasource_description.tsx         |  2 +-
 .../components/manage_datasource_table.tsx    | 87 +++++++------------
 public/components/flint/home.tsx              |  2 +-
 public/components/flint/icons/spark_logo.svg  | 13 +++
 6 files changed, 105 insertions(+), 76 deletions(-)
 create mode 100644 public/components/flint/icons/spark_logo.svg

diff --git a/public/components/flint/components/accelerate_callout.tsx b/public/components/flint/components/accelerate_callout.tsx
index ee3ad1cdd2..90c5d94b72 100644
--- a/public/components/flint/components/accelerate_callout.tsx
+++ b/public/components/flint/components/accelerate_callout.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCallOut, EuiLink } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import React from 'react';
 
 export function AccelerateCallout() {
   return (
diff --git a/public/components/flint/components/datasource.tsx b/public/components/flint/components/datasource.tsx
index 289c85f7e3..ed51f92be3 100644
--- a/public/components/flint/components/datasource.tsx
+++ b/public/components/flint/components/datasource.tsx
@@ -24,6 +24,13 @@ import {
   EuiInMemoryTable,
   EuiTableFieldDataColumnType,
   EuiPageContent,
+  EuiPanel,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiAccordion,
+  EuiIcon,
+  EuiCard,
 } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
 import httpClientMock from 'test/__mocks__/httpClientMock';
@@ -34,6 +41,7 @@ import {
   OPENSEARCH_DOCUMENTATION_URL,
 } from '../../../../common/constants/integrations';
 import { AccelerateFlyout } from './accelerate_flyout';
+import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
 
 export function DataSource(props: any) {
   // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -114,25 +122,54 @@ export function DataSource(props: any) {
 
   return (
     <EuiPage>
-      <EuiPageContent data-test-subj="addedIntegrationsArea">
-        {dataSource}
-        <EuiSpacer />
+      <EuiPageBody>
+        <EuiPageHeader style={{ justifyContent: 'spaceBetween' }}>
+          <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiTitle data-test-subj="eventHomePageTitle" size="l">
+                  <h1>{dataSource}</h1>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
 
-        <EuiInMemoryTable
-          loading={props.loading}
-          items={tables}
-          itemId="id"
-          columns={tableColumns}
-          tableLayout="auto"
-          pagination={{
-            initialPageSize: 10,
-            pageSizeOptions: [5, 10, 15],
-          }}
-          search={search}
-          allowNeutralSort={false}
-          isSelectable={true}
-        />
-      </EuiPageContent>
+        <EuiPanel>{dataSource}</EuiPanel>
+        <EuiSpacer />
+        <EuiAccordion
+          id="queryOrAccelerateAccordion"
+          buttonContent="Ways to use in Dashboards"
+          initialIsOpen={true}
+        >
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiCard
+                icon={<EuiIcon size="xxl" type="discoverApp" />}
+                title={'Query data'}
+                description="Query your data in Data Explorer or Observability Logs."
+                onClick={() => {}}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCard
+                icon={<EuiIcon size="xxl" type="bolt" />}
+                title={'Accelerate performance'}
+                description="Accelerate performance through OpenSearch indexing."
+                onClick={() => {}}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiAccordion>
+        <EuiSpacer />
+        {TabbedPage({
+          tabNames: [
+            ['manage', 'Manage connections'],
+            ['new', 'New connection'],
+          ],
+          header: <></>,
+        })}
+      </EuiPageBody>
     </EuiPage>
   );
 }
diff --git a/public/components/flint/components/manage_datasource_description.tsx b/public/components/flint/components/manage_datasource_description.tsx
index 491594497c..056934d642 100644
--- a/public/components/flint/components/manage_datasource_description.tsx
+++ b/public/components/flint/components/manage_datasource_description.tsx
@@ -26,7 +26,7 @@ export function DatasourcesDescription() {
 
       <EuiSpacer size="s" />
       <EuiText size="s" color="subdued">
-        Create or manage already created data source connections.
+        Manage already created data source connections.
       </EuiText>
       <EuiHorizontalRule size="full" />
     </div>
diff --git a/public/components/flint/components/manage_datasource_table.tsx b/public/components/flint/components/manage_datasource_table.tsx
index b54e89f422..00d6215cd9 100644
--- a/public/components/flint/components/manage_datasource_table.tsx
+++ b/public/components/flint/components/manage_datasource_table.tsx
@@ -9,34 +9,27 @@ import {
   EuiIcon,
   EuiInMemoryTable,
   EuiLink,
-  EuiOverlayMask,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
-  EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { AddedIntegrationsTableProps } from '../../integrations/components/added_integration_overview_page';
-import {
-  ASSET_FILTER_OPTIONS,
-  INTEGRATION_TEMPLATE_OPTIONS,
-} from '../../../../common/constants/integrations';
-import { DeleteModal } from '../../../../public/components/common/helpers/delete_modal';
-import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../../common/constants/shared';
-import { useToast } from '../../../../public/components/common/toast';
 import { DatasourcesHeader } from './datasources_header';
-import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
-import { HttpStart } from '../../../../../../src/core/public';
 import { HomeProps } from '../home';
 import { coreRefs } from '../../../framework/core_refs';
 import { DatasourcesDescription } from './manage_datasource_description';
+import sparkSvg from '../icons/spark_logo.svg';
 
 export type ManageDatasourcesTableProps = HomeProps;
 
+interface DataConnection {
+  connectionType: 'OPENSEARCH' | 'SPARK';
+  name: string;
+}
+
 export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
   const { http, chrome } = props;
   const { pplService } = coreRefs;
@@ -63,7 +56,17 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
     );
   }
 
-  const { setToast } = useToast();
+  const icon = (record: DataConnection) => {
+    switch (record.connectionType) {
+      case 'OPENSEARCH':
+        return <EuiIcon type="logoOpenSearch" />;
+      case 'SPARK':
+        return <EuiIcon type={sparkSvg} />;
+
+      default:
+        return <></>;
+    }
+  };
 
   const tableColumns = [
     {
@@ -71,40 +74,23 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
       name: 'Name',
       sortable: true,
       truncateText: true,
-      render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.name}DatasourceLink`}
-          href={`#/accelerate/${record.name}`}
-        >
-          {_.truncate(record.name, { length: 100 })}
-        </EuiLink>
-      ),
-    },
-    {
-      field: 'connectionType',
-      name: 'Connection type',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.templateName}DatasourceType`}>
-          {_.truncate(record.connectionType, { length: 100 })}
-        </EuiText>
-      ),
-    },
-    {
-      field: 'connectedTo',
-      name: 'Connected to',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.templateName}DatasourceConnectedTo`}>
-          {_.truncate(record.creationDate, { length: 100 })}
-        </EuiText>
+      render: (value, record: DataConnection) => (
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>{icon(record)}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiLink
+              data-test-subj={`${record.name}DatasourceLink`}
+              href={`#/manage/${record.name}`}
+            >
+              {_.truncate(record.name, { length: 100 })}
+            </EuiLink>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
     },
     {
-      field: 'connectionHealth',
-      name: 'Connection Health',
+      field: 'connectionStatus',
+      name: 'Connection Status',
       sortable: true,
       truncateText: true,
       render: (value, record) => (
@@ -148,7 +134,7 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
     ],
   };
 
-  const entries = data.map((datasource) => {
+  const entries = data.map((datasource: DataConnection) => {
     const name = datasource.name;
     const connectionType = datasource.connectionType;
     return { connectionType, name, data: { name, connectionType } };
@@ -157,17 +143,10 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
   return (
     <EuiPage>
       <EuiPageBody component="div">
-        {TabbedPage({
-          tabNames: [
-            ['manage', 'Manage connections'],
-            ['new', 'New connection'],
-          ],
-          header: DatasourcesHeader(),
-        })}
+        {DatasourcesHeader()}
         <EuiPageContent data-test-subj="addedIntegrationsArea">
           <DatasourcesDescription />
           <EuiInMemoryTable
-            loading={props.loading}
             items={entries}
             itemId="id"
             columns={tableColumns}
diff --git a/public/components/flint/home.tsx b/public/components/flint/home.tsx
index 64f4720dea..f66f96e958 100644
--- a/public/components/flint/home.tsx
+++ b/public/components/flint/home.tsx
@@ -65,7 +65,7 @@ export const Home = (props: HomeProps) => {
 
           <Route
             exact
-            path={'/accelerate/:id+'}
+            path={'/manage/:id+'}
             render={(routerProps) => (
               <DataSource
                 {...commonProps}
diff --git a/public/components/flint/icons/spark_logo.svg b/public/components/flint/icons/spark_logo.svg
new file mode 100644
index 0000000000..4fe9de5215
--- /dev/null
+++ b/public/components/flint/icons/spark_logo.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" sodipodi:docname="Apache_Spark_logo.svg" version="1.1" viewBox="0 0 414 215" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
+<title>Apache Spark logo</title>
+<metadata>
+    <rdf:RDF>
+        <cc:Work rdf:about="">
+            <dc:format>image/svg+xml</dc:format>
+            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+            <dc:title/>
+        </cc:Work>
+    </rdf:RDF>
+</metadata>
+<sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" inkscape:current-layer="g12650" inkscape:cx="89.093483" inkscape:cy="177.49819" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1014" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="0" inkscape:window-y="36" inkscape:zoom="1.086315" objecttolerance="10" pagecolor="#ffffff" showgrid="false"/><g transform="matrix(1.33 0 0 1.33 0 4.05e-6)" inkscape:groupmode="layer" inkscape:label="spark"><path d="m284 81.5c-.269-.575-.39-.864-.535-1.14-3.89-7.4-7.77-14.8-11.7-22.2-.394-.742-.344-1.18.195-1.82 6.19-7.23 12.3-14.5 18.5-21.7.219-.254.414-.523.496-.976-1.8.469-3.6.933-5.41 1.41-7.47 1.98-15 3.95-22.4 5.96-.695.187-1.01-.016-1.36-.594-4.24-7.09-8.51-14.2-12.8-21.2-.219-.367-.458-.723-.926-1.03-.344 1.89-.692 3.77-1.03 5.66-1.19 6.67-2.38 13.3-3.56 20-.129.719-.305 1.44-.367 2.16-.059.688-.414.942-1.04 1.14-8.81 2.77-17.6 5.56-26.4 8.35-.386.121-.765.281-1.18.656 7.2 2.86 14.4 5.72 21.7 8.63-.266.211-.442.375-.637.5-4.5 2.91-9.01 5.82-13.5 8.74-.539.352-.965.402-1.57.129-5.38-2.42-10.8-4.8-16.2-7.2-2.42-1.08-4.59-2.51-6.28-4.59-3.83-4.68-3.07-10 2.03-13.3 1.67-1.07 3.57-1.86 5.46-2.48 8.63-2.81 17.3-5.52 25.9-8.24.726-.231 1.06-.555 1.2-1.34 1.16-6.68 2.35-13.4 3.56-20 .644-3.57.984-7.22 2.72-10.5.665-1.26 1.46-2.49 2.42-3.54 3.44-3.82 8.23-3.96 11.9-.328 1.23 1.23 2.28 2.67 3.19 4.16 4 6.53 7.94 13.1 11.9 19.7.465.777.883.933 1.74.707 9.65-2.59 19.3-5.14 29-7.69 2-.527 4.01-.718 6.06-.335 4.45.832 6.4 4.22 4.89 8.53-.683 1.96-1.87 3.61-3.2 5.18-6.74 7.93-13.5 15.9-20.2 23.8-.551.648-.562 1.11-.18 1.84 4.04 7.61 8.04 15.2 12.1 22.9.961 1.82 1.7 3.72 1.72 5.81.047 4.76-3.44 8.66-8.17 9.36-2.65.387-5.11-.179-7.6-.945-6.05-1.87-12.1-3.71-18.2-5.54-.563-.168-.778-.391-.879-.996-.696-4.27-1.46-8.53-2.2-12.8-.019-.117.016-.242.036-.504 6.91 1.91 13.8 3.79 20.9 5.76" style="fill-rule:evenodd;fill:#e25a1c"/><path d="m272 144c-5.46-.008-10.9-.035-16.4-.011-.723 0-1.13-.207-1.53-.821-6.46-9.84-13-19.7-19.4-29.5-.207-.312-.426-.613-.793-1.14-1.39 10.6-2.76 21-4.13 31.4h-14.3c.168-1.39.317-2.74.493-4.08 1.39-10.7 2.8-21.3 4.2-32 1.34-10.2 2.67-20.4 4.03-30.6.039-.301.242-.688.488-.848 4.92-3.21 9.86-6.39 14.8-9.57.071-.047.172-.051.426-.125-1.49 11.4-2.97 22.7-4.46 34 .059.039.117.082.176.121 7.75-8.58 15.5-17.2 23.4-25.9.227 1.32.426 2.45.621 3.58.555 3.23 1.09 6.48 1.68 9.71.121.652-.055 1.05-.488 1.51-5.01 5.24-10 10.5-15 15.8-.219.231-.426.469-.676.743.16.253.297.5.457.726 8.61 12.1 17.2 24.2 25.8 36.3.156.219.382.391.574.586v.191" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m103 112c-.219-1.11-.375-2.75-.871-4.28-2.4-7.39-9.97-11.4-17.8-9.61-8.61 2-14.8 8.77-15.6 17.6-.66 6.5 2.84 12.8 9.34 15.1 5.24 1.89 10.3 1.1 15-1.71 6.21-3.72 9.57-9.25 10-17.1zm-37.8 27.5c-.422 3.18-.828 6.17-1.22 9.17-.523 3.98-1.05 7.97-1.55 12-.058.465-.199.672-.699.668-3.93-.015-7.86-.011-11.8-.019-.09 0-.18-.047-.391-.109.238-1.88.469-3.77.715-5.65.867-6.6 1.73-13.2 2.61-19.8 1.01-7.56 1.8-15.1 3.09-22.6 2.28-13.3 13.6-24.7 26.8-27.6 7.67-1.66 15-.891 21.7 3.43 6.68 4.3 10.5 10.6 11.4 18.4 1.24 11.1-2.85 20.3-10.7 28-5.18 5.01-11.4 8.19-18.5 9.27-7.37 1.11-14.3-.117-20.5-4.46-.227-.16-.473-.3-.863-.546" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m58.6 76.5c-4.4 3.28-8.65 6.44-12.9 9.61-.687-1.08-1.3-2.16-2.02-3.17-1.85-2.59-4.15-4.52-7.49-4.75-2.78-.196-5.16.718-7.05 2.77-1.69 1.83-1.91 4.44-.332 6.51 1.74 2.28 3.64 4.44 5.59 6.55 3.23 3.5 6.6 6.86 9.8 10.4 2.91 3.2 5.24 6.78 5.96 11.2.856 5.2-.183 10.1-2.64 14.7-4.55 8.45-11.7 13.4-21.2 14.9-4.18.675-8.34.543-12.4-.657-5.41-1.59-9.18-5.14-11.6-10.1-.855-1.77-1.51-3.64-2.28-5.54 4.73-2.53 9.34-5 14-7.49.16.387.277.711.426 1.02.797 1.59 1.45 3.28 2.43 4.75 2.93 4.35 7.65 5.67 12.4 3.52 1.23-.555 2.42-1.33 3.43-2.23 3.08-2.74 3.66-6.56 1.38-10-1.31-1.98-2.95-3.76-4.55-5.53-3.82-4.24-7.8-8.35-11.5-12.7-2.57-2.98-4.32-6.44-4.88-10.4-.605-4.36.266-8.46 2.53-12.1 5.63-9.11 13.8-13.8 24.6-13.5 6.17.223 11.1 3.11 14.9 7.91 1.13 1.42 2.19 2.89 3.34 4.43" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m163 125c-.719 5.49-1.4 10.7-2.1 15.9-.039.266-.246.625-.469.727-10.7 4.94-24.7 4.25-33.4-5.69-4.7-5.34-6.67-11.7-6.38-18.7.683-16.3 14.2-30.6 30.4-32.6 9.45-1.16 17.7 1.39 24.1 8.74 4.36 5 6.38 11 6.08 17.6-.195 4.36-.879 8.69-1.42 13-.77 6.14-1.61 12.3-2.42 18.4-.031.214-.074.433-.125.711h-12.7c.168-1.41.324-2.79.504-4.17.922-7.09 1.94-14.2 2.75-21.3.504-4.42.187-8.81-1.84-12.9-2.15-4.35-5.75-6.66-10.5-7.16-9.82-1.04-19.2 5.78-21.2 15.4-1.38 6.38.797 12.5 5.88 15.9 4.95 3.29 10.2 3.3 15.6 1.17 2.74-1.08 5.06-2.8 7.28-5.11" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m217 86.3c-.582 4.42-1.16 8.77-1.74 13.2-2.7 0-5.34-.015-7.98.004-2.14.016-4.09 1.4-4.74 3.4-.25.781-.343 1.62-.453 2.44-1.34 10.2-2.67 20.3-4 30.4-.336 2.56-.66 5.12-.996 7.72h-13.3c.246-1.95.48-3.84.726-5.73.863-6.58 1.73-13.2 2.6-19.7.754-5.69 1.43-11.4 2.32-17.1 1.19-7.6 8.75-14.4 16.4-14.7 3.66-.16 7.33-.027 11.1-.027" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m288 144v-5.6h-.031l-2.2 5.6h-.699l-2.2-5.6h-.035v5.6h-1.1v-6.71h1.71l2 5.1 1.97-5.1h1.7v6.71zm-9.74-5.81v5.81h-1.1v-5.81h-2.1v-.899h5.31v.899h-2.1" style="fill:#3c3a3e"/><path d="m76.3 67.1h3.29l-.778-4.98zm3.81 3.22h-5.47l-1.74 3.41h-3.88l8.55-16h3.74l2.91 16h-3.59l-.516-3.41" style="fill:#3c3a3e"/><path d="m99.7 61h-1.95l-.656 3.69h1.95c1.18 0 2.11-.773 2.11-2.23 0-.965-.586-1.46-1.46-1.46zm-4.72-3.22h5.12c2.68 0 4.55 1.6 4.55 4.34 0 3.46-2.44 5.78-5.92 5.78h-2.21l-1.04 5.85h-3.34l2.82-16" style="fill:#3c3a3e"/><path d="m116 67.1h3.29l-.777-4.98zm3.8 3.22h-5.47l-1.74 3.41h-3.88l8.55-16h3.74l2.91 16h-3.59l-.516-3.41" style="fill:#3c3a3e"/><path d="m141 73.2c-1.13.516-2.37.824-3.62.824-4.23 0-6.88-3.17-6.88-7.14 0-5.08 4.27-9.35 9.35-9.35 1.27 0 2.42.305 3.36.82l-.469 3.83c-.703-.777-1.84-1.32-3.24-1.32-2.91 0-5.5 2.63-5.5 5.68 0 2.32 1.46 4.14 3.76 4.14 1.41 0 2.77-.543 3.69-1.29l-.445 3.8" style="fill:#3c3a3e"/><path d="m162 67.3h-6.95l-1.13 6.43h-3.33l2.82-16h3.34l-1.12 6.32h6.95l1.13-6.32h3.34l-2.82 16h-3.34l1.12-6.43" style="fill:#3c3a3e"/><path d="m174 73.7 2.82-16h8.86l-.563 3.22h-5.52l-.563 3.1h5.07l-.563 3.22h-5.07l-.563 3.22h5.52l-.563 3.22h-8.86" style="fill:#3c3a3e"/></g></svg>

From c37ff6d2d42d4c821644a37f6daa90052df703f7 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 1 Sep 2023 13:07:12 -0400
Subject: [PATCH 13/22] cleanup unused files for data connections

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 common/constants/data_connections.ts          |   7 +
 public/components/app.tsx                     |   2 +-
 public/components/data_connections/.DS_Store  | Bin 0 -> 6148 bytes
 .../components/datasource.tsx                 |   2 +-
 .../components/datasources_header.tsx         |  10 +-
 .../manage_datasource_description.tsx         |  16 +-
 .../components/manage_datasource_table.tsx    |  18 +-
 public/components/data_connections/home.tsx   |  52 +++++
 .../icons/spark_logo.svg                      |   0
 .../flint/components/accelerate.scss          |   4 -
 .../flint/components/accelerate_callout.tsx   |  17 --
 .../flint/components/accelerate_flyout.tsx    |  22 --
 .../flint/components/accelerate_header.tsx    |  59 ------
 .../flint/components/accelerate_page.tsx      | 196 ------------------
 .../flint/components/accelerate_types.ts      |  11 -
 .../flint/components/configure_datasource.tsx | 127 ------------
 .../flint/components/datasources.tsx          |  97 ---------
 .../components/datasources_card_view.tsx      | 124 -----------
 .../components/new_datasource_description.tsx |  35 ----
 public/components/flint/components/table.tsx  | 138 ------------
 .../components/flint/components/test_page.tsx |  48 -----
 public/components/flint/home.tsx              |  94 ---------
 public/components/integrations/home.tsx       |  11 +-
 23 files changed, 77 insertions(+), 1013 deletions(-)
 create mode 100644 common/constants/data_connections.ts
 create mode 100644 public/components/data_connections/.DS_Store
 rename public/components/{flint => data_connections}/components/datasource.tsx (98%)
 rename public/components/{flint => data_connections}/components/datasources_header.tsx (80%)
 rename public/components/{flint => data_connections}/components/manage_datasource_description.tsx (62%)
 rename public/components/{flint => data_connections}/components/manage_datasource_table.tsx (88%)
 create mode 100644 public/components/data_connections/home.tsx
 rename public/components/{flint => data_connections}/icons/spark_logo.svg (100%)
 delete mode 100644 public/components/flint/components/accelerate.scss
 delete mode 100644 public/components/flint/components/accelerate_callout.tsx
 delete mode 100644 public/components/flint/components/accelerate_flyout.tsx
 delete mode 100644 public/components/flint/components/accelerate_header.tsx
 delete mode 100644 public/components/flint/components/accelerate_page.tsx
 delete mode 100644 public/components/flint/components/accelerate_types.ts
 delete mode 100644 public/components/flint/components/configure_datasource.tsx
 delete mode 100644 public/components/flint/components/datasources.tsx
 delete mode 100644 public/components/flint/components/datasources_card_view.tsx
 delete mode 100644 public/components/flint/components/new_datasource_description.tsx
 delete mode 100644 public/components/flint/components/table.tsx
 delete mode 100644 public/components/flint/components/test_page.tsx
 delete mode 100644 public/components/flint/home.tsx

diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts
new file mode 100644
index 0000000000..ce031cb6e4
--- /dev/null
+++ b/common/constants/data_connections.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const OPENSEARCH_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/data-connections/index';
diff --git a/public/components/app.tsx b/public/components/app.tsx
index f7cc77245b..cb7ba34e43 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -19,7 +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';
+import { Home as DatasourcesHome } from './data_connections/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
diff --git a/public/components/data_connections/.DS_Store b/public/components/data_connections/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..cb43dff474806e6766c5c62c61634b73ee2416e9
GIT binary patch
literal 6148
zcmeHK%}T>S5Z>*NO({YS3OxqA7Ob`^#Y>3w1&ruHr6#6mFz%M7HHT8jSzpK}@p+ut
z-9U@Mqlle>-EVe&b~7Jje;8xjn@0zX*^Ds@8X`xfM9^I7s+eFzuI5O?ES-dj3`?f@
zn<o7BI*Zu@lT5JH@BauVNu18Q-A`Vr*6Ldgt6{aQJO4>${w$cyQ!kj_;OJ7yBrNnG
zyo$%!$lf`VViv?=JXHyCG=`Ad>sUlG^W<Dasmk@W!)jX1k=<S_dPn_^(?1z3JI-Qo
z*af|Jyj(V|-M#(Oi_vrPBIKJUk^|#Pwhb2W4$4YJul`gdQapmS$S5KSi2-7O7$62V
zlL2!cSgp-0pQ<JXh=Cs%!2Q92hUgm1HL9%xI=nukzlMkcI=&?k9fPjHTqAfuxK0Js
zsoXp<xK0PVW8z$cxkjDNxLO(JF)J637p_(ZyQ9JxcQsN^3=jkB3{>^d#`FIieworo
z{(1_Hhyh~YpE1B|Lx1Q&QRZy@Rvw<U4zzn{C>WQc0s{KlB>)DvkF=Fj`yJFF&NY~8
V#97d;(gEorpa`Lk82AMSz5v$GO8Wo+

literal 0
HcmV?d00001

diff --git a/public/components/flint/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx
similarity index 98%
rename from public/components/flint/components/datasource.tsx
rename to public/components/data_connections/components/datasource.tsx
index ed51f92be3..46fc2eee81 100644
--- a/public/components/flint/components/datasource.tsx
+++ b/public/components/data_connections/components/datasource.tsx
@@ -41,7 +41,7 @@ import {
   OPENSEARCH_DOCUMENTATION_URL,
 } from '../../../../common/constants/integrations';
 import { AccelerateFlyout } from './accelerate_flyout';
-import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
+import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
 
 export function DataSource(props: any) {
   // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
diff --git a/public/components/flint/components/datasources_header.tsx b/public/components/data_connections/components/datasources_header.tsx
similarity index 80%
rename from public/components/flint/components/datasources_header.tsx
rename to public/components/data_connections/components/datasources_header.tsx
index 0721a3d54a..de53fededd 100644
--- a/public/components/flint/components/datasources_header.tsx
+++ b/public/components/data_connections/components/datasources_header.tsx
@@ -8,21 +8,19 @@ import {
   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 React from 'react';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/data_connections';
 
-export function DatasourcesHeader() {
+export function DataConnectionsHeader() {
   return (
     <div>
       <EuiPageHeader>
         <EuiPageHeaderSection>
-          <EuiTitle size="l" data-test-subj="integrations-header">
+          <EuiTitle size="l" data-test-subj="data-connections-header">
             <h1>Data connections</h1>
           </EuiTitle>
         </EuiPageHeaderSection>
diff --git a/public/components/flint/components/manage_datasource_description.tsx b/public/components/data_connections/components/manage_datasource_description.tsx
similarity index 62%
rename from public/components/flint/components/manage_datasource_description.tsx
rename to public/components/data_connections/components/manage_datasource_description.tsx
index 056934d642..f05fb01e25 100644
--- a/public/components/flint/components/manage_datasource_description.tsx
+++ b/public/components/data_connections/components/manage_datasource_description.tsx
@@ -3,21 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  EuiLink,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiText,
-  EuiTitle,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiTitle, EuiHorizontalRule } from '@elastic/eui';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-export function DatasourcesDescription() {
+export function DataConnectionsDescription() {
   return (
     <div>
       <EuiTitle size="s">
diff --git a/public/components/flint/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx
similarity index 88%
rename from public/components/flint/components/manage_datasource_table.tsx
rename to public/components/data_connections/components/manage_datasource_table.tsx
index 00d6215cd9..5c9f30fe6f 100644
--- a/public/components/flint/components/manage_datasource_table.tsx
+++ b/public/components/data_connections/components/manage_datasource_table.tsx
@@ -17,20 +17,18 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { DatasourcesHeader } from './datasources_header';
+import { DataConnectionsHeader } from './datasources_header';
 import { HomeProps } from '../home';
 import { coreRefs } from '../../../framework/core_refs';
 import { DatasourcesDescription } from './manage_datasource_description';
 import sparkSvg from '../icons/spark_logo.svg';
 
-export type ManageDatasourcesTableProps = HomeProps;
-
 interface DataConnection {
   connectionType: 'OPENSEARCH' | 'SPARK';
   name: string;
 }
 
-export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
+export function ManageDatasourcesTable(props: HomeProps) {
   const { http, chrome } = props;
   const { pplService } = coreRefs;
 
@@ -79,7 +77,7 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
           <EuiFlexItem grow={false}>{icon(record)}</EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiLink
-              data-test-subj={`${record.name}DatasourceLink`}
+              data-test-subj={`${record.name}DataConnectionsLink`}
               href={`#/manage/${record.name}`}
             >
               {_.truncate(record.name, { length: 100 })}
@@ -134,17 +132,17 @@ export function ManageDatasourcesTable(props: ManageDatasourcesTableProps) {
     ],
   };
 
-  const entries = data.map((datasource: DataConnection) => {
-    const name = datasource.name;
-    const connectionType = datasource.connectionType;
+  const entries = data.map((dataconnection: DataConnection) => {
+    const name = dataconnection.name;
+    const connectionType = dataconnection.connectionType;
     return { connectionType, name, data: { name, connectionType } };
   });
 
   return (
     <EuiPage>
       <EuiPageBody component="div">
-        {DatasourcesHeader()}
-        <EuiPageContent data-test-subj="addedIntegrationsArea">
+        <DataConnectionsHeader />
+        <EuiPageContent data-test-subj="manageDataConnectionsarea">
           <DatasourcesDescription />
           <EuiInMemoryTable
             items={entries}
diff --git a/public/components/data_connections/home.tsx b/public/components/data_connections/home.tsx
new file mode 100644
index 0000000000..88ad367c53
--- /dev/null
+++ b/public/components/data_connections/home.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public';
+import { DataSource } from './components/datasource';
+import { ManageDatasourcesTable } from './components/manage_datasource_table';
+
+export interface HomeProps extends RouteComponentProps {
+  pplService: any;
+  parentBreadcrumb: ChromeBreadcrumb;
+  http: HttpStart;
+  chrome: ChromeStart;
+}
+
+export const Home = (props: HomeProps) => {
+  const { http, chrome, pplService } = props;
+
+  const commonProps = {
+    http,
+    chrome,
+    pplService,
+  };
+
+  return (
+    <div>
+      <HashRouter>
+        <Switch>
+          <Route
+            exact
+            path={'/manage/:id+'}
+            render={(routerProps) => (
+              <DataSource
+                {...commonProps}
+                dataSource={decodeURIComponent(routerProps.match.params.id)}
+              />
+            )}
+          />
+
+          <Route
+            exact
+            path={['/', '/manage']}
+            render={(routerProps) => <ManageDatasourcesTable {...commonProps} />}
+          />
+        </Switch>
+      </HashRouter>
+    </div>
+  );
+};
diff --git a/public/components/flint/icons/spark_logo.svg b/public/components/data_connections/icons/spark_logo.svg
similarity index 100%
rename from public/components/flint/icons/spark_logo.svg
rename to public/components/data_connections/icons/spark_logo.svg
diff --git a/public/components/flint/components/accelerate.scss b/public/components/flint/components/accelerate.scss
deleted file mode 100644
index 9bfa11e095..0000000000
--- a/public/components/flint/components/accelerate.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.accelerateCheckableCard {
-    width: 450px;
-}
-  
\ No newline at end of file
diff --git a/public/components/flint/components/accelerate_callout.tsx b/public/components/flint/components/accelerate_callout.tsx
deleted file mode 100644
index 90c5d94b72..0000000000
--- a/public/components/flint/components/accelerate_callout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * 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>
-  );
-}
diff --git a/public/components/flint/components/accelerate_flyout.tsx b/public/components/flint/components/accelerate_flyout.tsx
deleted file mode 100644
index ebf217a3bc..0000000000
--- a/public/components/flint/components/accelerate_flyout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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>
-  );
-}
diff --git a/public/components/flint/components/accelerate_header.tsx b/public/components/flint/components/accelerate_header.tsx
deleted file mode 100644
index 77cd4128ab..0000000000
--- a/public/components/flint/components/accelerate_header.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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>
-  );
-}
diff --git a/public/components/flint/components/accelerate_page.tsx b/public/components/flint/components/accelerate_page.tsx
deleted file mode 100644
index b0288b2424..0000000000
--- a/public/components/flint/components/accelerate_page.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './accelerate.scss';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastList,
-  EuiLoadingSpinner,
-  EuiOverlayMask,
-  EuiPage,
-  EuiPageBody,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiCheckableCard,
-  htmlIdGenerator,
-  EuiTitle,
-  EuiText,
-  EuiLink,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiComboBox,
-  EuiCodeBlock,
-  EuiCodeEditor,
-  EuiButton,
-} from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
-import { AccelerateHeader } from './accelerate_header';
-import { AccelerateCallout } from './accelerate_callout';
-import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
-import { AccelerateProps } from './accelerate_types';
-
-export function Accelerate(props: AccelerateProps) {
-  const { pplService } = props;
-  const [useCase, setUseCase] = useState('queryAcceleration');
-  const [accelerationMethod, setAccelerationMethod] = useState('coveredIndex');
-  const [query, setQuery] = useState('');
-  const [dataSources, setDataSources] = useState([]);
-  const [selectedOptions, setSelected] = useState([]);
-  const [result, setResult] = useState('');
-
-  const onChange = (selectedOption) => {
-    setSelected(selectedOption);
-  };
-
-  useEffect(() => {
-    pplService
-      .fetch({ query: "show datasources | where CONNECTOR_TYPE = 'SPARK'", format: 'jdbc' })
-      .then((data) =>
-        setDataSources(
-          data.jsonData.map((x: any) => {
-            return { label: x.DATASOURCE_NAME };
-          })
-        )
-      );
-  }, []);
-
-  const sendAccelerationQuery = () => {
-    const dataSource = selectedOptions[0].label;
-    pplService
-      .fetch({ query: `source = ${dataSource}.sql(\' ${query}\')`, format: 'jdbc' })
-      .then((data) => setResult(JSON.stringify(data)));
-  };
-
-  const useCaseGroup = () => {
-    return (
-      <EuiFlexGroup>
-        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
-          <EuiCheckableCard
-            label="Query acceleration only"
-            value="radio1"
-            checked={useCase === 'queryAcceleration'}
-            onChange={() => setUseCase('queryAcceleration')}
-            id={htmlIdGenerator()()}
-          >
-            <EuiText>
-              Index only meta-data in OpenSearch to speed up query performance when querying through
-              Data Explorer.
-            </EuiText>
-          </EuiCheckableCard>
-        </EuiFlexItem>
-        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
-          <EuiCheckableCard
-            label="Full OpenSearch functionality"
-            value="radio1"
-            checked={useCase === 'fullFunctionality'}
-            onChange={() => setUseCase('fullFunctionality')}
-            id={htmlIdGenerator()()}
-          >
-            <EuiText>
-              Ingest data into OpenSearch to use all Dashboards features and better query
-              performance in Data Explorer.
-            </EuiText>
-          </EuiCheckableCard>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  };
-
-  const accelerationMethodGroup = () => {
-    return (
-      <EuiFlexGroup>
-        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
-          <EuiCheckableCard
-            label="Covered Index"
-            value="radio1"
-            checked={accelerationMethod === 'coveredIndex'}
-            onChange={() => setAccelerationMethod('coveredIndex')}
-            id={htmlIdGenerator()()}
-          >
-            <EuiText>
-              Index only meta-data in OpenSearch to speed up query performance when querying through
-              Data Explorer.
-            </EuiText>
-          </EuiCheckableCard>
-        </EuiFlexItem>
-        <EuiFlexItem className="accelerateCheckableCard" grow={false}>
-          <EuiCheckableCard
-            label="Materialized View"
-            value="radio1"
-            checked={accelerationMethod === 'materializedView'}
-            onChange={() => setAccelerationMethod('materializedView')}
-            id={htmlIdGenerator()()}
-          >
-            <EuiText>
-              Ingest data into OpenSearch to use all Dashboards features and better query
-              performance in Data Explorer.
-            </EuiText>
-          </EuiCheckableCard>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  };
-
-  return (
-    <EuiPage>
-      <EuiPageBody>
-        <AccelerateHeader {...props} />
-        <AccelerateCallout {...props} />
-        <EuiSpacer />
-        <EuiTitle size="s" data-test-subj="accelerate-header">
-          <h2>Select use case</h2>
-        </EuiTitle>
-        <EuiText size="s" color="subdued">
-          Select the acceleration option that best suites your use case.{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText>
-        <EuiSpacer />
-        {useCaseGroup()}
-        <EuiSpacer />
-        {/* <EuiTitle size="s" data-test-subj="accelerate-header">
-              <h2>Data source selection</h2>
-              </EuiTitle>
-              <EuiText size="s" color="subdued">
-         Select the acceleration option that best suites your use case.{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText> */}
-        <EuiTitle size="s" data-test-subj="accelerate-header">
-          <h2>Acceleration Method</h2>
-        </EuiTitle>
-        <EuiText size="s" color="subdued">
-          OpenSearch provides multiple ways to accelerate data. Select the best indexing option
-          based on your needs{' '}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-            Learn more
-          </EuiLink>
-        </EuiText>
-        <EuiSpacer />
-        {accelerationMethodGroup()}
-        <EuiSpacer />
-        <EuiComboBox
-          placeholder="Select DataSource"
-          singleSelection={{ asPlainText: true }}
-          options={dataSources}
-          selectedOptions={selectedOptions}
-          onChange={onChange}
-        />
-        <EuiSpacer />
-        <EuiCodeEditor value={query} onChange={setQuery} />
-        <EuiSpacer />
-        {result}
-
-        <EuiButton onClick={sendAccelerationQuery} disabled={!query || !selectedOptions}>
-          Accelerate
-        </EuiButton>
-      </EuiPageBody>
-    </EuiPage>
-  );
-}
diff --git a/public/components/flint/components/accelerate_types.ts b/public/components/flint/components/accelerate_types.ts
deleted file mode 100644
index abad38916a..0000000000
--- a/public/components/flint/components/accelerate_types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export interface AccelerateProps {
-  pplService: any;
-  isFlyout: boolean | undefined;
-}
-
-export type AccelerateHeaderProps = AccelerateProps;
diff --git a/public/components/flint/components/configure_datasource.tsx b/public/components/flint/components/configure_datasource.tsx
deleted file mode 100644
index cf9b12c5ac..0000000000
--- a/public/components/flint/components/configure_datasource.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './accelerate.scss';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastList,
-  EuiLoadingSpinner,
-  EuiOverlayMask,
-  EuiPage,
-  EuiPageBody,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiCheckableCard,
-  htmlIdGenerator,
-  EuiTitle,
-  EuiText,
-  EuiLink,
-  EuiButton,
-  EuiInMemoryTable,
-  EuiTableFieldDataColumnType,
-  EuiPageContent,
-  EuiSteps,
-  EuiPageSideBar,
-  EuiPanel,
-  EuiFormRow,
-  EuiFieldText,
-  EuiBottomBar,
-  EuiButtonEmpty,
-} from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
-import httpClientMock from 'test/__mocks__/httpClientMock';
-import { AccelerateHeader } from './accelerate_header';
-import { AccelerateCallout } from './accelerate_callout';
-import {
-  ASSET_FILTER_OPTIONS,
-  OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../../common/constants/integrations';
-import { AccelerateFlyout } from './accelerate_flyout';
-
-export function Configure(props: any) {
-  const firstSetOfSteps = [
-    {
-      title: 'Step 1',
-      children: (
-        <EuiText>
-          <p>Configure Connection</p>
-        </EuiText>
-      ),
-    },
-    {
-      title: 'Step 2',
-      children: (
-        <EuiText>
-          <p>Review Configuration</p>
-        </EuiText>
-      ),
-    },
-  ];
-
-  const body = (connectionType: string) => {
-    return (
-      <div>
-        <EuiPanel>
-          <EuiTitle>
-            <h1>{`Configure ${connectionType} Connection`}</h1>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="s" color="subdued">
-            {`Connect to ${connectionType} with OpenSearch and OpenSearch Dashboards `}
-            <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
-              Learn more
-            </EuiLink>
-          </EuiText>
-          <EuiSpacer />
-          <EuiText>
-            <h3>Connection Details</h3>
-          </EuiText>
-          <EuiSpacer />
-          <EuiFormRow label="Title">
-            <EuiFieldText data-test-subj="data-source-name" name="first" />
-          </EuiFormRow>
-          <EuiFormRow label="Description - Optional">
-            <EuiFieldText data-test-subj="data-source-name" name="first" />
-          </EuiFormRow>
-
-          <EuiFormRow label="Endpoint URL">
-            <EuiFieldText data-test-subj="data-source-name" name="first" />
-          </EuiFormRow>
-        </EuiPanel>
-      </div>
-    );
-  };
-
-  return (
-    <EuiPage>
-      <EuiPageSideBar>
-        <EuiSteps steps={firstSetOfSteps} />
-      </EuiPageSideBar>
-      <EuiPageBody>{body('Amazon S3')}</EuiPageBody>
-
-      <EuiBottomBar>
-        <EuiFlexGroup justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={() => {}} color="ghost" size="s" iconType="cross">
-              Cancel
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => {}} color="ghost" size="s" iconType="arrowLeft">
-              Previous
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => {}} size="s" iconType="arrowRight" fill>
-              Review Configuration
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiBottomBar>
-    </EuiPage>
-  );
-}
diff --git a/public/components/flint/components/datasources.tsx b/public/components/flint/components/datasources.tsx
deleted file mode 100644
index 30f05a3a56..0000000000
--- a/public/components/flint/components/datasources.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiFieldSearch,
-  EuiFilterButton,
-  EuiFilterGroup,
-  EuiFilterSelectItem,
-  EuiPage,
-  EuiPageBody,
-  EuiPopover,
-  EuiPopoverTitle,
-} from '@elastic/eui';
-import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
-import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
-import { DatasourcesHeader } from './datasources_header';
-import { AvailableIntegrationsCardView } from '../../../../public/components/integrations/components/available_integration_card_view';
-import { DatasourcesCardView } from './datasources_card_view';
-
-export interface AvailableIntegrationType {
-  name: string;
-  description: string;
-  assetUrl?: string | undefined;
-  version?: string | undefined;
-  displayName?: string;
-  integrationType: string;
-  statics: any;
-  components: any[];
-  displayAssets: any[];
-}
-
-export interface AvailableIntegrationsTableProps {
-  loading: boolean;
-  data: AvailableIntegrationsList;
-  isCardView: boolean;
-  setCardView: (input: boolean) => void;
-  renderCateogryFilters: () => React.JSX.Element;
-}
-
-export interface AvailableIntegrationsList {
-  hits: AvailableIntegrationType[];
-}
-
-export interface AvailableIntegrationsCardViewProps {
-  data: AvailableIntegrationsList;
-  isCardView: boolean;
-  setCardView: (input: boolean) => void;
-  query: string;
-  setQuery: (input: string) => void;
-  renderCateogryFilters: () => React.JSX.Element;
-}
-
-export function Datasources() {
-  return (
-    <EuiPage>
-      <EuiPageBody>
-        {TabbedPage({
-          tabNames: [
-            ['manage', 'Manage connections'],
-            ['new', 'New connection'],
-          ],
-          header: DatasourcesHeader(),
-        })}
-        {DatasourcesCardView({
-          data: {
-            hits: [
-              {
-                name: 'AWS S3',
-                version: '1.0.1',
-                displayName: 'AWS S3',
-                integrationType: 'logs',
-                description: 'Connect to AWS S3',
-                statics: {
-                  logo: { annotation: 'NginX Logo', path: 'logo.svg' },
-                  gallery: [
-                    { annotation: 'NginX Dashboard', path: 'dashboard1.png' },
-                    { annotation: 'NginX Logo', path: 'logo.svg' },
-                  ],
-                },
-                displayAssets: [],
-                components: [],
-              },
-            ],
-          },
-          isCardView: true,
-          setCardView: () => {},
-          query: '',
-          setQuery: () => {},
-          renderCateogryFilters: () => <></>,
-        })}
-      </EuiPageBody>
-    </EuiPage>
-  );
-}
diff --git a/public/components/flint/components/datasources_card_view.tsx b/public/components/flint/components/datasources_card_view.tsx
deleted file mode 100644
index 0e9960d9cc..0000000000
--- a/public/components/flint/components/datasources_card_view.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiPanel,
-  EuiCard,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiSearchBar,
-  EuiButton,
-  EuiFieldSearch,
-  EuiSwitch,
-  EuiButtonGroup,
-  EuiBadgeGroup,
-  EuiBadge,
-  EuiToolTip,
-} from '@elastic/eui';
-import _ from 'lodash';
-import React, { useRef, useState } from 'react';
-import {
-  AvailableIntegrationsCardViewProps,
-  AvailableIntegrationType,
-} from '../../integrations/components/available_integration_overview_page';
-import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
-import { badges } from '../../integrations/components/integration_category_badge_group';
-import { NewDatasourcesDescription } from './new_datasource_description';
-
-export function DatasourcesCardView(props: AvailableIntegrationsCardViewProps) {
-  const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
-
-  const getImage = (url?: string) => {
-    let optionalImg;
-    if (url) {
-      optionalImg = (
-        <img style={{ height: 100, width: 100 }} alt="" className="synopsisIcon" src={url} />
-      );
-    }
-    return optionalImg;
-  };
-
-  const toggleButtonsIcons = [
-    {
-      id: '0',
-      label: 'list',
-      iconType: 'list',
-    },
-    {
-      id: '1',
-      label: 'grid',
-      iconType: 'grid',
-    },
-  ];
-
-  const onChangeIcons = (optionId) => {
-    setToggleIconIdSelected(optionId);
-    if (optionId === '0') {
-      props.setCardView(false);
-    } else {
-      props.setCardView(true);
-    }
-  };
-
-  const renderRows = (integrations: AvailableIntegrationType[]) => {
-    if (!integrations || !integrations.length) return null;
-    return (
-      <>
-        <EuiFlexGroup gutterSize="l" style={{ flexWrap: 'wrap' }}>
-          {integrations.map((i, v) => {
-            return (
-              <EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
-                <EuiCard
-                  icon={getImage(
-                    'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Amazon-S3-Logo.svg/1200px-Amazon-S3-Logo.svg.png'
-                  )}
-                  title={i.displayName ? i.displayName : i.name}
-                  description={i.description}
-                  data-test-subj={`integration_card_${i.name.toLowerCase()}`}
-                  titleElement="span"
-                  onClick={() => (window.location.hash = `#/configure`)}
-                  footer={badges(i.components)}
-                />
-              </EuiFlexItem>
-            );
-          })}
-        </EuiFlexGroup>
-        <EuiSpacer />
-      </>
-    );
-  };
-
-  return (
-    <EuiPanel>
-      <NewDatasourcesDescription />
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem>
-          <EuiFieldSearch
-            fullWidth
-            isClearable={false}
-            placeholder="Search..."
-            data-test-subj="search-bar-input-box"
-            onChange={(e) => {
-              props.setQuery(e.target.value);
-            }}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{props.renderCateogryFilters()}</EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonGroup
-            legend="Text align"
-            options={toggleButtonsIcons}
-            idSelected={toggleIconIdSelected}
-            onChange={(id) => onChangeIcons(id)}
-            isIconOnly
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
-      {renderRows(props.data.hits.filter((x) => x.name.includes(props.query)))}
-    </EuiPanel>
-  );
-}
diff --git a/public/components/flint/components/new_datasource_description.tsx b/public/components/flint/components/new_datasource_description.tsx
deleted file mode 100644
index 9fd5e5d805..0000000000
--- a/public/components/flint/components/new_datasource_description.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiLink,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiText,
-  EuiTitle,
-  EuiHorizontalRule,
-} from '@elastic/eui';
-import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
-
-export function NewDatasourcesDescription() {
-  return (
-    <div>
-      <EuiTitle size="s">
-        <h2>Create a new data connection</h2>
-      </EuiTitle>
-
-      <EuiSpacer size="s" />
-      <EuiText size="s" color="subdued">
-        Connect to a compatible data source or compute engine to bring your data into OpenSearch and
-        OpenSearch Dashboards.
-      </EuiText>
-      <EuiHorizontalRule size="full" />
-    </div>
-  );
-}
diff --git a/public/components/flint/components/table.tsx b/public/components/flint/components/table.tsx
deleted file mode 100644
index 4e0b25093b..0000000000
--- a/public/components/flint/components/table.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './accelerate.scss';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastList,
-  EuiLoadingSpinner,
-  EuiOverlayMask,
-  EuiPage,
-  EuiPageBody,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiCheckableCard,
-  htmlIdGenerator,
-  EuiTitle,
-  EuiText,
-  EuiLink,
-  EuiButton,
-  EuiInMemoryTable,
-  EuiTableFieldDataColumnType,
-  EuiPageContent,
-} from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
-import httpClientMock from 'test/__mocks__/httpClientMock';
-import { AccelerateHeader } from './accelerate_header';
-import { AccelerateCallout } from './accelerate_callout';
-import {
-  ASSET_FILTER_OPTIONS,
-  OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../../common/constants/integrations';
-import { AccelerateFlyout } from './accelerate_flyout';
-
-export function Table(props: any) {
-  // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const { table, dataSource, pplService } = props;
-  console.log(table);
-
-  const [tables, setTables] = useState([]);
-
-  useEffect(() => {
-    pplService
-      .fetch({ query: `source = ${dataSource}.sql(\'DESCRIBE TABLE ${table}\')`, format: 'jdbc' })
-      .then((data) =>
-        setTables(
-          data.jsonData.map((x: any) => {
-            return { label: x.tableName, namespace: x.namespace, isTemporary: x.isTemporary };
-          })
-        )
-      );
-  }, []);
-
-  const tableColumns = [
-    {
-      field: 'name',
-      name: 'Table Name',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.label}IntegrationDescription`}
-          href={`#/accelerate/${dataSource}/${record.label}`}
-        >
-          {_.truncate(record.label, { length: 100 })}
-        </EuiLink>
-      ),
-    },
-    {
-      field: 'namespace',
-      name: 'Namespace',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.namespace}Namespace`}>
-          {_.truncate(record.namespace, { length: 100 })}
-        </EuiText>
-      ),
-    },
-    {
-      field: 'isTemporary',
-      name: 'Is Temporary',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.isTemporary}temporary`}>
-          {_.truncate(record.isTemporary, { length: 100 })}
-        </EuiText>
-      ),
-    },
-  ] as Array<EuiTableFieldDataColumnType<any>>;
-
-  const search = {
-    box: {
-      incremental: true,
-    },
-    filters: [
-      {
-        type: 'field_value_selection',
-        field: 'assetType',
-        name: 'Type',
-        multiSelect: false,
-        options: ASSET_FILTER_OPTIONS.map((i) => ({
-          value: i,
-          name: i,
-          view: i,
-        })),
-      },
-    ],
-  };
-
-  return (
-    <EuiPage>
-      <EuiPageContent data-test-subj="addedIntegrationsArea">
-        {dataSource}
-        {/* <EuiSpacer/>
-
-      <EuiInMemoryTable
-          loading={props.loading}
-          items={tables}
-          itemId="id"
-          columns={tableColumns}
-          tableLayout="auto"
-          pagination={{
-            initialPageSize: 10,
-            pageSizeOptions: [5, 10, 15],
-          }}
-          search={search}
-          allowNeutralSort={false}
-          isSelectable={true}
-        /> */}
-      </EuiPageContent>
-    </EuiPage>
-  );
-}
diff --git a/public/components/flint/components/test_page.tsx b/public/components/flint/components/test_page.tsx
deleted file mode 100644
index 92dc9fd8ba..0000000000
--- a/public/components/flint/components/test_page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './accelerate.scss';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastList,
-  EuiLoadingSpinner,
-  EuiOverlayMask,
-  EuiPage,
-  EuiPageBody,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiCheckableCard,
-  htmlIdGenerator,
-  EuiTitle,
-  EuiText,
-  EuiLink,
-  EuiButton,
-} from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
-import httpClientMock from 'test/__mocks__/httpClientMock';
-import { AccelerateHeader } from './accelerate_header';
-import { AccelerateCallout } from './accelerate_callout';
-import { OPENSEARCH_DOCUMENTATION_URL } from '../../../common/constants/integrations';
-import { AccelerateFlyout } from './accelerate_flyout';
-
-export function TestPage(props: any) {
-  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-
-  return (
-    <EuiPage>
-      <EuiButton
-        onClick={() => {
-          setIsFlyoutVisible(true);
-        }}
-      >
-        Click Me
-      </EuiButton>
-
-      {isFlyoutVisible && <AccelerateFlyout onClose={() => setIsFlyoutVisible(false)} {...props} />}
-    </EuiPage>
-  );
-}
diff --git a/public/components/flint/home.tsx b/public/components/flint/home.tsx
deleted file mode 100644
index f66f96e958..0000000000
--- a/public/components/flint/home.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
-import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public';
-import { Accelerate } from '../flint/components/accelerate_page';
-import { TestPage } from '../flint/components/test_page';
-import { DataSource } from '../flint/components/datasource';
-import { Table } from '../flint/components/table';
-import { Configure } from '../flint/components/configure_datasource';
-import { Datasources } from '../flint/components/datasources';
-import {
-  AddedIntegrationsTable,
-  ManageDatasourcesTable,
-} from './components/manage_datasource_table';
-
-export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
-
-export interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
-  pplService: any;
-  parentBreadcrumb: ChromeBreadcrumb;
-  http: HttpStart;
-  chrome: ChromeStart;
-}
-
-export const Home = (props: HomeProps) => {
-  const { http, chrome, pplService } = props;
-
-  const commonProps = {
-    http,
-    chrome,
-    pplService,
-  };
-
-  return (
-    <div>
-      <HashRouter>
-        <Switch>
-          <Route
-            exact
-            path={'/accelerate'}
-            render={(routerProps) => <Accelerate {...commonProps} />}
-          />
-          <Route
-            exacts
-            path={'/accelerateAsModal'}
-            render={(routerProps) => <TestPage {...commonProps} />}
-          />
-          {/* needs to go before the Datasource*/}
-          <Route
-            exact
-            path={'/accelerate/:id/:table'}
-            render={(routerProps) => (
-              <Table
-                {...commonProps}
-                dataSource={decodeURIComponent(routerProps.match.params.id)}
-                table={decodeURIComponent(routerProps.match.params.table)}
-              />
-            )}
-          />
-
-          <Route
-            exact
-            path={'/manage/:id+'}
-            render={(routerProps) => (
-              <DataSource
-                {...commonProps}
-                dataSource={decodeURIComponent(routerProps.match.params.id)}
-              />
-            )}
-          />
-
-          <Route exact path={'/new'} render={(routerProps) => <Datasources {...commonProps} />} />
-
-          <Route
-            exact
-            path={['/', '/manage']}
-            render={(routerProps) => <ManageDatasourcesTable {...commonProps} />}
-          />
-
-          <Route
-            exact
-            path={'/configure'}
-            render={(routerProps) => <Configure {...commonProps} />}
-          />
-        </Switch>
-      </HashRouter>
-    </div>
-  );
-};
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 9fa4ff6fbf..9f3f6f6349 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -3,23 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { EuiGlobalToastList } from '@elastic/eui';
-import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import PPLService from 'public/services/requests/ppl';
 import { Integration } from './components/integration';
 import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import { AvailableIntegrationOverviewPage } from './components/available_integration_overview_page';
 import { AddedIntegrationOverviewPage } from './components/added_integration_overview_page';
 import { AddedIntegration } from './components/added_integration';
-import { Accelerate } from '../flint/components/accelerate_page';
-import { TestPage } from '../flint/components/test_page';
-import { DataSource } from '../flint/components/datasource';
-import { Table } from '../flint/components/table';
-import { Configure } from '../flint/components/configure_datasource';
-import { Datasources } from '../flint/components/datasources';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 

From b453a75e1c43f3f974650bc6c56f4b8e34acdae6 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 5 Sep 2023 11:07:13 -0400
Subject: [PATCH 14/22] cleanup and add overview panel columns

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../common/tabbed_page/tabbed_page.tsx        |  63 ----------
 public/components/data_connections/.DS_Store  | Bin 6148 -> 0 bytes
 .../components/datasource.tsx                 | 113 +++++++-----------
 .../components/manage_datasource_table.tsx    |   4 +-
 .../added_integration_overview_page.tsx       |  11 +-
 .../available_integration_overview_page.tsx   |  15 +--
 .../components/integration_header.tsx         |  36 ++++++
 public/components/integrations/home.tsx       |   8 +-
 8 files changed, 89 insertions(+), 161 deletions(-)
 delete mode 100644 public/components/common/tabbed_page/tabbed_page.tsx
 delete mode 100644 public/components/data_connections/.DS_Store

diff --git a/public/components/common/tabbed_page/tabbed_page.tsx b/public/components/common/tabbed_page/tabbed_page.tsx
deleted file mode 100644
index 37a37ed23a..0000000000
--- a/public/components/common/tabbed_page/tabbed_page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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>
-  );
-}
diff --git a/public/components/data_connections/.DS_Store b/public/components/data_connections/.DS_Store
deleted file mode 100644
index cb43dff474806e6766c5c62c61634b73ee2416e9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK%}T>S5Z>*NO({YS3OxqA7Ob`^#Y>3w1&ruHr6#6mFz%M7HHT8jSzpK}@p+ut
z-9U@Mqlle>-EVe&b~7Jje;8xjn@0zX*^Ds@8X`xfM9^I7s+eFzuI5O?ES-dj3`?f@
zn<o7BI*Zu@lT5JH@BauVNu18Q-A`Vr*6Ldgt6{aQJO4>${w$cyQ!kj_;OJ7yBrNnG
zyo$%!$lf`VViv?=JXHyCG=`Ad>sUlG^W<Dasmk@W!)jX1k=<S_dPn_^(?1z3JI-Qo
z*af|Jyj(V|-M#(Oi_vrPBIKJUk^|#Pwhb2W4$4YJul`gdQapmS$S5KSi2-7O7$62V
zlL2!cSgp-0pQ<JXh=Cs%!2Q92hUgm1HL9%xI=nukzlMkcI=&?k9fPjHTqAfuxK0Js
zsoXp<xK0PVW8z$cxkjDNxLO(JF)J637p_(ZyQ9JxcQsN^3=jkB3{>^d#`FIieworo
z{(1_Hhyh~YpE1B|Lx1Q&QRZy@Rvw<U4zzn{C>WQc0s{KlB>)DvkF=Fj`yJFF&NY~8
V#97d;(gEorpa`Lk82AMSz5v$GO8Wo+

diff --git a/public/components/data_connections/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx
index 46fc2eee81..c78c87bcba 100644
--- a/public/components/data_connections/components/datasource.tsx
+++ b/public/components/data_connections/components/datasource.tsx
@@ -3,50 +3,29 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './accelerate.scss';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiGlobalToastList,
-  EuiLoadingSpinner,
-  EuiOverlayMask,
   EuiPage,
   EuiPageBody,
   EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiCheckableCard,
-  htmlIdGenerator,
   EuiTitle,
   EuiText,
   EuiLink,
-  EuiButton,
-  EuiInMemoryTable,
   EuiTableFieldDataColumnType,
-  EuiPageContent,
   EuiPanel,
-  EuiPageContentHeaderSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiAccordion,
   EuiIcon,
   EuiCard,
+  EuiHorizontalRule,
 } from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
-import httpClientMock from 'test/__mocks__/httpClientMock';
-import { AccelerateHeader } from './accelerate_header';
-import { AccelerateCallout } from './accelerate_callout';
-import {
-  ASSET_FILTER_OPTIONS,
-  OPENSEARCH_DOCUMENTATION_URL,
-} from '../../../../common/constants/integrations';
-import { AccelerateFlyout } from './accelerate_flyout';
-import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ASSET_FILTER_OPTIONS } from '../../../../common/constants/integrations';
 
 export function DataSource(props: any) {
-  // const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const { dataSource, pplService } = props;
-  console.log(dataSource);
 
   const [tables, setTables] = useState([]);
 
@@ -62,45 +41,6 @@ export function DataSource(props: any) {
       );
   }, []);
 
-  const tableColumns = [
-    {
-      field: 'name',
-      name: 'Table Name',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.label}IntegrationDescription`}
-          href={`#/accelerate/${dataSource}/${record.label}`}
-        >
-          {_.truncate(record.label, { length: 100 })}
-        </EuiLink>
-      ),
-    },
-    {
-      field: 'namespace',
-      name: 'Namespace',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.namespace}Namespace`}>
-          {_.truncate(record.namespace, { length: 100 })}
-        </EuiText>
-      ),
-    },
-    {
-      field: 'isTemporary',
-      name: 'Is Temporary',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.isTemporary}temporary`}>
-          {_.truncate(record.isTemporary, { length: 100 })}
-        </EuiText>
-      ),
-    },
-  ] as Array<EuiTableFieldDataColumnType<any>>;
-
   const search = {
     box: {
       incremental: true,
@@ -120,6 +60,44 @@ export function DataSource(props: any) {
     ],
   };
 
+  const renderOverview = () => {
+    return (
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Name</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {props.serviceName || '-'}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Average latency (ms)</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Error rate</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Throughput</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Traces</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </EuiPanel>
+    );
+  };
+
+  const overview = useMemo(() => renderOverview(), []);
+
   return (
     <EuiPage>
       <EuiPageBody>
@@ -135,7 +113,7 @@ export function DataSource(props: any) {
           </EuiPageHeaderSection>
         </EuiPageHeader>
 
-        <EuiPanel>{dataSource}</EuiPanel>
+        {overview}
         <EuiSpacer />
         <EuiAccordion
           id="queryOrAccelerateAccordion"
@@ -162,13 +140,6 @@ export function DataSource(props: any) {
           </EuiFlexGroup>
         </EuiAccordion>
         <EuiSpacer />
-        {TabbedPage({
-          tabNames: [
-            ['manage', 'Manage connections'],
-            ['new', 'New connection'],
-          ],
-          header: <></>,
-        })}
       </EuiPageBody>
     </EuiPage>
   );
diff --git a/public/components/data_connections/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx
index 5c9f30fe6f..8419f066c8 100644
--- a/public/components/data_connections/components/manage_datasource_table.tsx
+++ b/public/components/data_connections/components/manage_datasource_table.tsx
@@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react';
 import { DataConnectionsHeader } from './datasources_header';
 import { HomeProps } from '../home';
 import { coreRefs } from '../../../framework/core_refs';
-import { DatasourcesDescription } from './manage_datasource_description';
+import { DataConnectionsDescription } from './manage_datasource_description';
 import sparkSvg from '../icons/spark_logo.svg';
 
 interface DataConnection {
@@ -143,7 +143,7 @@ export function ManageDatasourcesTable(props: HomeProps) {
       <EuiPageBody component="div">
         <DataConnectionsHeader />
         <EuiPageContent data-test-subj="manageDataConnectionsarea">
-          <DatasourcesDescription />
+          <DataConnectionsDescription />
           <EuiInMemoryTable
             items={entries}
             itemId="id"
diff --git a/public/components/integrations/components/added_integration_overview_page.tsx b/public/components/integrations/components/added_integration_overview_page.tsx
index 1dc1e771f1..ef9623b64c 100644
--- a/public/components/integrations/components/added_integration_overview_page.tsx
+++ b/public/components/integrations/components/added_integration_overview_page.tsx
@@ -7,12 +7,11 @@
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { IntegrationHeader } from './integration_header';
 import { AddedIntegrationsTable } from './added_integration_table';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AddedIntegrationOverviewPageProps } from './integration_types';
 import { HttpStart } from '../../../../../../src/core/public';
-import { TabbedPage } from '../../../../public/components/common/tabbed_page/tabbed_page';
-import { IntegrationHeader } from './integration_header';
 
 export interface AddedIntegrationsTableProps {
   loading: boolean;
@@ -58,13 +57,7 @@ export function AddedIntegrationOverviewPage(props: AddedIntegrationOverviewPage
   return (
     <EuiPage>
       <EuiPageBody component="div">
-        {TabbedPage({
-          tabNames: [
-            ['installed', 'Installed'],
-            ['available', 'Available'],
-          ],
-          header: IntegrationHeader(),
-        })}
+        {IntegrationHeader()}
         {AddedIntegrationsTable({ data, setData, loading: false, http })}
       </EuiPageBody>
     </EuiPage>
diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
index d7d7ac1bb2..360bf0db49 100644
--- a/public/components/integrations/components/available_integration_overview_page.tsx
+++ b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -16,14 +16,12 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { INTEGRATION_CATEOGRY_OPTIONS } from '../../../../common/constants/integrations';
+import { IntegrationHeader } from './integration_header';
 import { AvailableIntegrationsTable } from './available_integration_table';
 import { AvailableIntegrationsCardView } from './available_integration_card_view';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AvailableIntegrationOverviewPageProps } from './integration_types';
 import { useToast } from '../../../../public/components/common/toast';
-import { TabbedPage } from '../../common/tabbed_page/tabbed_page';
-import { IntegrationHeader } from './integration_header';
 import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
@@ -119,8 +117,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
     http.get(`${INTEGRATIONS_BASE}/repository`).then((exists) => {
       setData(exists.data);
 
-      let newItems = exists.data.hits
-        .flatMap((hit: { labels?: string[] }) => hit.labels ?? []);
+      let newItems = exists.data.hits.flatMap((hit: { labels?: string[] }) => hit.labels ?? []);
       newItems = [...new Set(newItems)].sort().map((newItem) => {
         return {
           name: newItem,
@@ -181,13 +178,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
   return (
     <EuiPage>
       <EuiPageBody>
-        {TabbedPage({
-          tabNames: [
-            ['installed', 'Installed'],
-            ['available', 'Available'],
-          ],
-          header: IntegrationHeader(),
-        })}
+        {IntegrationHeader()}
         {isCardView
           ? AvailableIntegrationsCardView({
               data: {
diff --git a/public/components/integrations/components/integration_header.tsx b/public/components/integrations/components/integration_header.tsx
index 4fcf4fb062..90ad3f2331 100644
--- a/public/components/integrations/components/integration_header.tsx
+++ b/public/components/integrations/components/integration_header.tsx
@@ -18,6 +18,40 @@ import React, { useEffect, useState } from 'react';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
 
 export function IntegrationHeader() {
+  const tabs = [
+    {
+      id: 'installed',
+      name: 'Installed',
+      disabled: false,
+    },
+    {
+      id: 'available',
+      name: 'Available',
+      disabled: false,
+    },
+  ];
+
+  const [selectedTabId, setSelectedTabId] = useState(
+    window.location.hash.substring(2) ? window.location.hash.substring(2) : 'installed'
+  );
+
+  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}
+        disabled={tab.disabled}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  };
   return (
     <div>
       <EuiPageHeader>
@@ -35,6 +69,8 @@ export function IntegrationHeader() {
         </EuiLink>
       </EuiText>
       <EuiSpacer size="l" />
+      <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
+      <EuiSpacer size="s" />
     </div>
   );
 }
diff --git a/public/components/integrations/home.tsx b/public/components/integrations/home.tsx
index 9f3f6f6349..3fa85b98dc 100644
--- a/public/components/integrations/home.tsx
+++ b/public/components/integrations/home.tsx
@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { EuiGlobalToastList } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import { Integration } from './components/integration';
 import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { ChromeBreadcrumb } from '../../../../../src/core/public';
@@ -16,16 +18,14 @@ export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
 interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
   parentBreadcrumbs: ChromeBreadcrumb[];
-  pplService: any;
 }
 
 export const Home = (props: HomeProps) => {
-  const { http, chrome, pplService } = props;
+  const { http, chrome } = props;
 
   const commonProps = {
     http,
     chrome,
-    pplService,
   };
 
   return (

From 9fa45b6a4c4b8e325681b87d48c3e9179fe1a6d6 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 5 Sep 2023 16:21:03 -0400
Subject: [PATCH 15/22] render tabs

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 common/constants/shared.ts                    |   6 +-
 .../components/datasource.tsx                 | 121 +++++---
 .../opensearch_observability_plugin.ts        |  15 +-
 .../routes/datasources/datasources_router.ts  | 266 +-----------------
 4 files changed, 110 insertions(+), 298 deletions(-)

diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 528e7a4afa..f694562214 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -24,6 +24,7 @@ export const SAVED_VISUALIZATION = '/vis';
 export const PPL_ENDPOINT = '/_plugins/_ppl';
 export const SQL_ENDPOINT = '/_plugins/_sql';
 export const DSL_ENDPOINT = '/_plugins/_dsl';
+export const DATASOURCES_ENDPOINT = '/_plugins/_query/_datasources';
 
 export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
@@ -79,10 +80,13 @@ export const PPL_NEWLINE_REGEX = /[\n\r]+/g;
 
 // Observability plugin URI
 const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
-const BASE_INTEGRATIONS_URI = '/_plugins/_integrations'; // Used later in front-end for routing
+const BASE_DATASOURCES_URI = '/_plugins/_query/_datasources';
 export const OPENSEARCH_PANELS_API = {
   OBJECT: `${BASE_OBSERVABILITY_URI}/object`,
 };
+export const OPENSEARCH_DATASOURCES_API = {
+  DATASOURCE: `${BASE_DATASOURCES_URI}`,
+};
 
 // Saved Objects
 export const SAVED_OBJECT = '/object';
diff --git a/public/components/data_connections/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx
index c78c87bcba..ba07e19c0b 100644
--- a/public/components/data_connections/components/datasource.tsx
+++ b/public/components/data_connections/components/datasource.tsx
@@ -11,53 +11,78 @@ import {
   EuiSpacer,
   EuiTitle,
   EuiText,
-  EuiLink,
-  EuiTableFieldDataColumnType,
   EuiPanel,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiAccordion,
   EuiIcon,
   EuiCard,
-  EuiHorizontalRule,
+  EuiTab,
+  EuiTabs,
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ASSET_FILTER_OPTIONS } from '../../../../common/constants/integrations';
+import { DATASOURCES_BASE } from '../../../../common/constants/shared';
 
-export function DataSource(props: any) {
-  const { dataSource, pplService } = props;
+interface DatasourceDetails {
+  allowedRoles: string[];
+  name: string;
+  cluster: string;
+}
 
-  const [tables, setTables] = useState([]);
+export function DataSource(props: any) {
+  const { dataSource, pplService, http } = props;
+  const [datasourceDetails, setDatasourceDetails] = useState<DatasourceDetails>({
+    allowedRoles: [],
+    name: '',
+    cluster: '',
+  });
 
   useEffect(() => {
-    pplService
-      .fetch({ query: `source = ${dataSource}.sql(\'SHOW TABLES\')`, format: 'jdbc' })
-      .then((data) =>
-        setTables(
-          data.jsonData.map((x: any) => {
-            return { label: x.tableName, namespace: x.namespace, isTemporary: x.isTemporary };
-          })
-        )
-      );
+    http.get(`${DATASOURCES_BASE}/${dataSource}`).then((data) =>
+      setDatasourceDetails({
+        allowedRoles: data.allowedRoles,
+        name: data.name,
+        cluster: data.properties['emr.cluster'],
+      })
+    );
   }, []);
 
-  const search = {
-    box: {
-      incremental: true,
+  const tabs = [
+    {
+      id: 'data',
+      name: 'Data',
+      disabled: false,
+    },
+    {
+      id: 'access_control',
+      name: 'Access control',
+      disabled: false,
+    },
+    {
+      id: 'connection_configuration',
+      name: 'Connection configuration',
+      disabled: false,
     },
-    filters: [
-      {
-        type: 'field_value_selection',
-        field: 'assetType',
-        name: 'Type',
-        multiSelect: false,
-        options: ASSET_FILTER_OPTIONS.map((i) => ({
-          value: i,
-          name: i,
-          view: i,
-        })),
-      },
-    ],
+  ];
+
+  const [selectedTabId, setSelectedTabId] = useState('data');
+
+  const onSelectedTabChanged = (id) => {
+    setSelectedTabId(id);
+  };
+
+  const renderTabs = () => {
+    return tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+        disabled={tab.disabled}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
   };
 
   const renderOverview = () => {
@@ -67,9 +92,17 @@ export function DataSource(props: any) {
           <EuiFlexItem>
             <EuiFlexGroup direction="column">
               <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Name</EuiText>
+                <EuiText className="overview-title">Connection title</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {datasourceDetails.name || '-'}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Access control</EuiText>
                 <EuiText size="s" className="overview-content">
-                  {props.serviceName || '-'}
+                  {datasourceDetails.allowedRoles && datasourceDetails.allowedRoles.length
+                    ? datasourceDetails.allowedRoles
+                    : '-'}
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -77,16 +110,16 @@ export function DataSource(props: any) {
           <EuiFlexItem>
             <EuiFlexGroup direction="column">
               <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Average latency (ms)</EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Error rate</EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Throughput</EuiText>
+                <EuiText className="overview-title">Connection description</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {datasourceDetails.name || '-'}
+                </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Traces</EuiText>
+                <EuiText className="overview-title">Connection status</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {datasourceDetails.cluster || '-'}
+                </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -96,8 +129,6 @@ export function DataSource(props: any) {
     );
   };
 
-  const overview = useMemo(() => renderOverview(), []);
-
   return (
     <EuiPage>
       <EuiPageBody>
@@ -113,7 +144,7 @@ export function DataSource(props: any) {
           </EuiPageHeaderSection>
         </EuiPageHeader>
 
-        {overview}
+        {renderOverview()}
         <EuiSpacer />
         <EuiAccordion
           id="queryOrAccelerateAccordion"
@@ -139,6 +170,8 @@ export function DataSource(props: any) {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiAccordion>
+        <EuiTabs>{renderTabs()}</EuiTabs>
+
         <EuiSpacer />
       </EuiPageBody>
     </EuiPage>
diff --git a/server/adaptors/opensearch_observability_plugin.ts b/server/adaptors/opensearch_observability_plugin.ts
index fbdbac72be..b4de94a530 100644
--- a/server/adaptors/opensearch_observability_plugin.ts
+++ b/server/adaptors/opensearch_observability_plugin.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { OPENSEARCH_PANELS_API } from '../../common/constants/shared';
+import { OPENSEARCH_DATASOURCES_API, OPENSEARCH_PANELS_API } from '../../common/constants/shared';
 
 export function OpenSearchObservabilityPlugin(Client: any, config: any, components: any) {
   const clientAction = components.clientAction.factory;
@@ -51,6 +51,19 @@ export function OpenSearchObservabilityPlugin(Client: any, config: any, componen
     method: 'GET',
   });
 
+  observability.getDatasourceById = clientAction({
+    url: {
+      fmt: `${OPENSEARCH_DATASOURCES_API.DATASOURCE}/<%=datasource%>`,
+      req: {
+        datasource: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    method: 'GET',
+  });
+
   // Get Object by Id
   observability.getObjectById = clientAction({
     url: {
diff --git a/server/routes/datasources/datasources_router.ts b/server/routes/datasources/datasources_router.ts
index 5b2f9a8d50..4b6f001c6f 100644
--- a/server/routes/datasources/datasources_router.ts
+++ b/server/routes/datasources/datasources_router.ts
@@ -4,274 +4,36 @@
  */
 
 import { schema } from '@osd/config-schema';
-import * as mime from 'mime';
-import sanitize from 'sanitize-filename';
-import { IRouter, RequestHandlerContext } from '../../../../../src/core/server';
-import { DATASOURCES_BASE, INTEGRATIONS_BASE } from '../../../common/constants/shared';
-import { IntegrationsAdaptor } from '../../adaptors/integrations/integrations_adaptor';
-import {
-  OpenSearchDashboardsRequest,
-  OpenSearchDashboardsResponseFactory,
-} from '../../../../../src/core/server/http/router';
-import { IntegrationsKibanaBackend } from '../../adaptors/integrations/integrations_kibana_backend';
-
-/**
- * Handle an `OpenSearchDashboardsRequest` using the provided `callback` function.
- * This is a convenience method that handles common error handling and response formatting.
- * The callback must accept a `IntegrationsAdaptor` as its first argument.
- *
- * If the callback throws an error,
- * the `OpenSearchDashboardsResponse` will be formatted using the error's `statusCode` and `message` properties.
- * Otherwise, the callback's return value will be formatted in a JSON object under the `data` field.
- *
- * @param {IntegrationsAdaptor} adaptor The adaptor instance to use for making requests.
- * @param {OpenSearchDashboardsResponseFactory} response The factory to use for creating responses.
- * @callback callback A callback that will invoke a request on a provided adaptor.
- * @returns {Promise<OpenSearchDashboardsResponse>} An `OpenSearchDashboardsResponse` with the return data from the callback.
- */
-export const handleWithCallback = async (
-  adaptor: IntegrationsAdaptor,
-  response: OpenSearchDashboardsResponseFactory,
-  callback: (a: IntegrationsAdaptor) => any
-): Promise<any> => {
-  try {
-    const data = await callback(adaptor);
-    return response.ok({
-      body: {
-        data,
-      },
-    });
-  } catch (err: any) {
-    console.error(`handleWithCallback: callback failed with error "${err.message}"`);
-    return response.custom({
-      statusCode: err.statusCode || 500,
-      body: err.message,
-    });
-  }
-};
-
-const getAdaptor = (
-  context: RequestHandlerContext,
-  _request: OpenSearchDashboardsRequest
-): IntegrationsAdaptor => {
-  return new IntegrationsKibanaBackend(context.core.savedObjects.client);
-};
+import { IRouter } from '../../../../../src/core/server';
+import { DATASOURCES_BASE } from '../../../common/constants/shared';
 
 export function registerDatasourcesRoute(router: IRouter) {
-  //   router.get(
-  //     {
-  //       path: `${DATASOURCES_BASE}/repository`,
-  //       validate: false,
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getIntegrationTemplates()
-  //       );
-  //     }
-  //   );
-
-  //   router.post(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/store/{templateName}`,
-  //       validate: {
-  //         params: schema.object({
-  //           templateName: schema.string(),
-  //         }),
-  //         body: schema.object({
-  //           name: schema.string(),
-  //           dataSource: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) => {
-  //         return a.loadIntegrationInstance(
-  //           request.params.templateName,
-  //           request.body.name,
-  //           request.body.dataSource
-  //         );
-  //       });
-  //     }
-  //   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/repository/{name}`,
-  //       validate: {
-  //         params: schema.object({
-  //           name: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(
-  //         adaptor,
-  //         response,
-  //         async (a: IntegrationsAdaptor) =>
-  //           (
-  //             await a.getIntegrationTemplates({
-  //               name: request.params.name,
-  //             })
-  //           ).hits[0]
-  //       );
-  //     }
-  //   );
-
-  router.get(
-    {
-      path: `${DATASOURCES_BASE}/datasources`,
-      validate: false,
-    },
-    async (context, request, response): Promise<any> => {
-      const adaptor = getAdaptor(context, request);
-      try {
-        const requestPath = sanitize(request.params.path);
-        const result = await adaptor.getStatic(request.params.id, requestPath);
-        return response.ok({
-          headers: {
-            'Content-Type': mime.getType(request.params.path),
-          },
-          body: result,
-        });
-      } catch (err: any) {
-        return response.custom({
-          statusCode: err.statusCode ? err.statusCode : 500,
-          body: err.message,
-        });
-      }
-    }
-  );
-
   router.get(
     {
-      path: `${DATASOURCES_BASE}/repository/{id}/static/{path}`,
+      path: `${DATASOURCES_BASE}/{name}`,
       validate: {
         params: schema.object({
-          id: schema.string(),
-          path: schema.string(),
+          name: schema.string(),
         }),
       },
     },
     async (context, request, response): Promise<any> => {
-      const adaptor = getAdaptor(context, request);
       try {
-        const requestPath = sanitize(request.params.path);
-        const result = await adaptor.getStatic(request.params.id, requestPath);
+        const dataSourcesresponse = await context.observability_plugin.observabilityClient
+          .asScoped(request)
+          .callAsCurrentUser('observability.getDatasourceById', {
+            datasource: request.params.name,
+          });
         return response.ok({
-          headers: {
-            'Content-Type': mime.getType(request.params.path),
-          },
-          body: result,
+          body: dataSourcesresponse,
         });
-      } catch (err: any) {
+      } catch (error: any) {
+        console.error('Issue in fetching datasource:', error);
         return response.custom({
-          statusCode: err.statusCode ? err.statusCode : 500,
-          body: err.message,
+          statusCode: error.statusCode || 500,
+          body: error.message,
         });
       }
     }
   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/repository/{id}/schema`,
-  //       validate: {
-  //         params: schema.object({
-  //           id: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getSchemas(request.params.id)
-  //       );
-  //     }
-  //   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/repository/{id}/assets`,
-  //       validate: {
-  //         params: schema.object({
-  //           id: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getAssets(request.params.id)
-  //       );
-  //     }
-  //   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/repository/{id}/data`,
-  //       validate: {
-  //         params: schema.object({
-  //           id: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getSampleData(request.params.id)
-  //       );
-  //     }
-  //   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/store`,
-  //       validate: false,
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getIntegrationInstances({})
-  //       );
-  //     }
-  //   );
-
-  //   router.delete(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/store/{id}`,
-  //       validate: {
-  //         params: schema.object({
-  //           id: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.deleteIntegrationInstance(request.params.id)
-  //       );
-  //     }
-  //   );
-
-  //   router.get(
-  //     {
-  //       path: `${INTEGRATIONS_BASE}/store/{id}`,
-  //       validate: {
-  //         params: schema.object({
-  //           id: schema.string(),
-  //         }),
-  //       },
-  //     },
-  //     async (context, request, response): Promise<any> => {
-  //       const adaptor = getAdaptor(context, request);
-  //       return handleWithCallback(adaptor, response, async (a: IntegrationsAdaptor) =>
-  //         a.getIntegrationInstance({
-  //           id: request.params.id,
-  //         })
-  //       );
-  //     }
-  //   );
 }

From d8a626ffbfffa93300424105e3f0d8330bc2b354 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 6 Sep 2023 10:22:09 -0400
Subject: [PATCH 16/22] add unit tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/10_datasources.spec.js   |  20 +
 .../__snapshots__/datasource.test.tsx.snap    | 309 +++++++
 ...anage_datasource_description.test.tsx.snap |  50 ++
 .../manage_datasource_table.test.tsx.snap     | 806 ++++++++++++++++++
 .../components/__tests__/datasource.test.tsx  |  39 +
 .../manage_datasource_description.test.tsx    |  22 +
 .../manage_datasource_table.test.tsx          |  34 +
 .../components/__tests__/testing_constants.ts |  63 ++
 .../components/datasources_header.tsx         |   2 +-
 .../components/manage_datasource_table.tsx    |   6 +-
 10 files changed, 1346 insertions(+), 5 deletions(-)
 create mode 100644 .cypress/integration/10_datasources.spec.js
 create mode 100644 public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
 create mode 100644 public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap
 create mode 100644 public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
 create mode 100644 public/components/data_connections/components/__tests__/datasource.test.tsx
 create mode 100644 public/components/data_connections/components/__tests__/manage_datasource_description.test.tsx
 create mode 100644 public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
 create mode 100644 public/components/data_connections/components/__tests__/testing_constants.ts

diff --git a/.cypress/integration/10_datasources.spec.js b/.cypress/integration/10_datasources.spec.js
new file mode 100644
index 0000000000..c4ef7618f8
--- /dev/null
+++ b/.cypress/integration/10_datasources.spec.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+  
+  const moveToDatasourcesHome = () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources`);
+  };
+  
+  describe('Basic sanity test for datasources plugin', () => {
+    it('Navigates to datasources plugin and expects the correct header', () => {
+      moveToDatasourcesHome();
+      cy.get('[data-test-subj="datasources-header"]').should('exist');
+    });
+});
+
+  
+  
diff --git a/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
new file mode 100644
index 0000000000..fa2c46105b
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datasource Page test Renders datasource page with data 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+        style="justify-content: spaceBetween;"
+      >
+        <div
+          class="euiPageHeaderSection"
+          style="width: 100%; justify-content: space-between;"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="eventHomePageTitle"
+              />
+            </div>
+          </div>
+        </div>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium overview-title"
+                >
+                  Connection title
+                </div>
+                <div
+                  class="euiText euiText--small overview-content"
+                >
+                  my_spark3
+                </div>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium overview-title"
+                >
+                  Access control
+                </div>
+                <div
+                  class="euiText euiText--small overview-content"
+                >
+                  -
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium overview-title"
+                >
+                  Connection description
+                </div>
+                <div
+                  class="euiText euiText--small overview-content"
+                >
+                  my_spark3
+                </div>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium overview-title"
+                >
+                  Connection status
+                </div>
+                <div
+                  class="euiText euiText--small overview-content"
+                >
+                  j-3UNQLT1MPBGLG
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiAccordion euiAccordion-isOpen"
+      >
+        <div
+          class="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="queryOrAccelerateAccordion"
+            aria-expanded="true"
+            class="euiAccordion__button"
+            id="random_html_id"
+            type="button"
+          >
+            <span
+              class="euiAccordion__iconWrapper"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </span>
+            <span
+              class="euiIEFlexWrapFix"
+            >
+              Ways to use in Dashboards
+            </span>
+          </button>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          class="euiAccordion__childWrapper"
+          id="queryOrAccelerateAccordion"
+          role="region"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              class=""
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <div
+                  class="euiFlexItem"
+                >
+                  <div
+                    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
+                  >
+                    <div
+                      class="euiCard__top"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--xxLarge euiIcon--app euiIcon-isLoading euiCard__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </div>
+                    <div
+                      class="euiCard__content"
+                    >
+                      <span
+                        class="euiTitle euiTitle--small euiCard__title"
+                        id="random_html_idTitle"
+                      >
+                        <button
+                          aria-describedby=" random_html_idDescription"
+                          class="euiCard__titleButton"
+                        >
+                          Query data
+                        </button>
+                      </span>
+                      <div
+                        class="euiText euiText--small euiCard__description"
+                        id="random_html_idDescription"
+                      >
+                        <p>
+                          Query your data in Data Explorer or Observability Logs.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem"
+                >
+                  <div
+                    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
+                  >
+                    <div
+                      class="euiCard__top"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </div>
+                    <div
+                      class="euiCard__content"
+                    >
+                      <span
+                        class="euiTitle euiTitle--small euiCard__title"
+                        id="random_html_idTitle"
+                      >
+                        <button
+                          aria-describedby=" random_html_idDescription"
+                          class="euiCard__titleButton"
+                        >
+                          Accelerate performance
+                        </button>
+                      </span>
+                      <div
+                        class="euiText euiText--small euiCard__description"
+                        id="random_html_idDescription"
+                      >
+                        <p>
+                          Accelerate performance through OpenSearch indexing.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiTabs"
+        role="tablist"
+      >
+        <button
+          aria-selected="true"
+          class="euiTab euiTab-isSelected"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Data
+          </span>
+        </button>
+        <button
+          aria-selected="false"
+          class="euiTab"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Access control
+          </span>
+        </button>
+        <button
+          aria-selected="false"
+          class="euiTab"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Connection configuration
+          </span>
+        </button>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap
new file mode 100644
index 0000000000..b9ab1040b9
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Manage Datasource Description test Renders manage datasource description 1`] = `
+<DataConnectionsDescription>
+  <div>
+    <EuiTitle
+      size="s"
+    >
+      <h2
+        className="euiTitle euiTitle--small"
+      >
+        Manage existing data connections
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="s"
+    >
+      <div
+        className="euiSpacer euiSpacer--s"
+      />
+    </EuiSpacer>
+    <EuiText
+      color="subdued"
+      size="s"
+    >
+      <div
+        className="euiText euiText--small"
+      >
+        <EuiTextColor
+          color="subdued"
+          component="div"
+        >
+          <div
+            className="euiTextColor euiTextColor--subdued"
+          >
+            Manage already created data source connections.
+          </div>
+        </EuiTextColor>
+      </div>
+    </EuiText>
+    <EuiHorizontalRule
+      size="full"
+    >
+      <hr
+        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+      />
+    </EuiHorizontalRule>
+  </div>
+</DataConnectionsDescription>
+`;
diff --git a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
new file mode 100644
index 0000000000..d1e9677c2c
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
@@ -0,0 +1,806 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Manage Datasource Table test Renders manage datasource table with data 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <div>
+        <header
+          class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+        >
+          <div
+            class="euiPageHeaderSection"
+          >
+            <h1
+              class="euiTitle euiTitle--large"
+              data-test-subj="datasources-header"
+            >
+              Data connections
+            </h1>
+          </div>
+        </header>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
+        <div
+          class="euiText euiText--small"
+        >
+          <div
+            class="euiTextColor euiTextColor--subdued"
+          >
+            Connect and manage compatible OpenSearch Dashboard data sources and compute.
+             
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/latest/data-connections/index"
+              rel="noreferrer"
+              target="blank"
+            >
+              Learn more
+              <svg
+                aria-hidden="true"
+                aria-label="External link"
+                class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </a>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+      </div>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+        data-test-subj="manageDataConnectionsarea"
+        role="main"
+      >
+        <div>
+          <h2
+            class="euiTitle euiTitle--small"
+          >
+            Manage existing data connections
+          </h2>
+          <div
+            class="euiSpacer euiSpacer--s"
+          />
+          <div
+            class="euiText euiText--small"
+          >
+            <div
+              class="euiTextColor euiTextColor--subdued"
+            >
+              Manage already created data source connections.
+            </div>
+          </div>
+          <hr
+            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+          />
+        </div>
+        <div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <div
+              class="euiFlexItem euiSearchBar__searchHolder"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    class="euiFieldSearch euiFieldSearch--fullWidth"
+                    placeholder="Search..."
+                    type="search"
+                    value=""
+                  />
+                  <div
+                    class="euiFormControlLayoutIcons"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero euiSearchBar__filtersHolder"
+            >
+              <div
+                class="euiFilterGroup"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                  id="field_value_selection_0"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <span
+                          class="euiButtonEmpty__text"
+                        >
+                          <span
+                            class="euiFilterButton__textShift"
+                            data-text="Type"
+                            title="Type"
+                          >
+                            Type
+                          </span>
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiBasicTable"
+          >
+            <div>
+              <div
+                class="euiTableHeaderMobile"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                </div>
+              </div>
+              <table
+                class="euiTable euiTable--responsive euiTable--auto"
+                id="random_html_id"
+                tabindex="-1"
+              >
+                <caption
+                  class="euiScreenReaderOnly euiTableCaption"
+                />
+                <thead>
+                  <tr>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Name"
+                        >
+                          Name
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_connectionStatus_1"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Connection Status"
+                        >
+                          Connection Status
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_actions_2"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Actions"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Name
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <img
+                              alt=""
+                              class="euiIcon euiIcon--medium"
+                              src="file-stub"
+                            />
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <a
+                              class="euiLink euiLink--primary"
+                              data-test-subj="my_spark3DataConnectionsLink"
+                              href="#/manage/my_spark3"
+                              rel="noreferrer"
+                            >
+                              my_spark3
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Connection Status
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                          data-test-subj="undefinedDatasourceConnectionHealth"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Name
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <img
+                              alt=""
+                              class="euiIcon euiIcon--medium"
+                              src="file-stub"
+                            />
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <a
+                              class="euiLink euiLink--primary"
+                              data-test-subj="my_spark4DataConnectionsLink"
+                              href="#/manage/my_spark4"
+                              rel="noreferrer"
+                            >
+                              my_spark4
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Connection Status
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                          data-test-subj="undefinedDatasourceConnectionHealth"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Name
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <img
+                              alt=""
+                              class="euiIcon euiIcon--medium"
+                              src="file-stub"
+                            />
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <a
+                              class="euiLink euiLink--primary"
+                              data-test-subj="my_sparkDataConnectionsLink"
+                              href="#/manage/my_spark"
+                              rel="noreferrer"
+                            >
+                              my_spark
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Connection Status
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                          data-test-subj="undefinedDatasourceConnectionHealth"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Name
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--medium euiIcon-isLoading"
+                              focusable="false"
+                              height="16"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <a
+                              class="euiLink euiLink--primary"
+                              data-test-subj="@opensearchDataConnectionsLink"
+                              href="#/manage/@opensearch"
+                              rel="noreferrer"
+                            >
+                              @opensearch
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Connection Status
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                          data-test-subj="undefinedDatasourceConnectionHealth"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Name
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <img
+                              alt=""
+                              class="euiIcon euiIcon--medium"
+                              src="file-stub"
+                            />
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <a
+                              class="euiLink euiLink--primary"
+                              data-test-subj="my_spark2DataConnectionsLink"
+                              href="#/manage/my_spark2"
+                              rel="noreferrer"
+                            >
+                              my_spark2
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Connection Status
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                          data-test-subj="undefinedDatasourceConnectionHealth"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <div
+                    class="euiPopover euiPopover--anchorUpRight"
+                  >
+                    <div
+                      class="euiPopover__anchor"
+                    >
+                      <button
+                        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                        data-test-subj="tablePaginationPopoverButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <span
+                            class="euiButtonEmpty__text"
+                          >
+                            Rows per page
+                            : 
+                            10
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <nav
+                    class="euiPagination"
+                  >
+                    <button
+                      aria-label="Previous page"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                      data-test-subj="pagination-button-previous"
+                      disabled=""
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </button>
+                    <ul
+                      class="euiPagination__list"
+                    >
+                      <li
+                        class="euiPagination__item"
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-current="true"
+                          aria-label="Page 1 of 1"
+                          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                          data-test-subj="pagination-button-0"
+                          disabled=""
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButtonEmpty__content"
+                          >
+                            <span
+                              class="euiButtonEmpty__text"
+                            >
+                              1
+                            </span>
+                          </span>
+                        </button>
+                      </li>
+                    </ul>
+                    <button
+                      aria-label="Next page"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                      data-test-subj="pagination-button-next"
+                      disabled=""
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </button>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/data_connections/components/__tests__/datasource.test.tsx b/public/components/data_connections/components/__tests__/datasource.test.tsx
new file mode 100644
index 0000000000..8294e05989
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/datasource.test.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { act, waitFor } from '@testing-library/react';
+import React from 'react';
+import { DataConnectionsDescription } from '../manage_datasource_description';
+import { ManageDatasourcesTable } from '../manage_datasource_table';
+import { describeDatasource, showDatasourceData } from './testing_constants';
+import { DataSource } from '../datasource';
+import ReactDOM from 'react-dom';
+
+describe('Datasource Page test', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders datasource page with data', async () => {
+    const http = {
+      get: jest.fn().mockResolvedValue(describeDatasource),
+    };
+    const pplService = {
+      fetch: jest.fn(),
+    };
+    const mockChrome = {
+      setBreadcrumbs: jest.fn(),
+    };
+    const wrapper = mount(<DataSource http={http} pplService={pplService} chrome={mockChrome} />);
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOM.render(
+        <DataSource http={http} pplService={pplService} chrome={mockChrome} />,
+        container
+      );
+    });
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/public/components/data_connections/components/__tests__/manage_datasource_description.test.tsx b/public/components/data_connections/components/__tests__/manage_datasource_description.test.tsx
new file mode 100644
index 0000000000..e6380b0d51
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/manage_datasource_description.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+import { DataConnectionsDescription } from '../manage_datasource_description';
+
+describe('Manage Datasource Description test', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders manage datasource description', async () => {
+    const wrapper = mount(<DataConnectionsDescription />);
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx b/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
new file mode 100644
index 0000000000..bbc92b4b5b
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { act } from '@testing-library/react';
+import React from 'react';
+import { ManageDatasourcesTable } from '../manage_datasource_table';
+import { showDatasourceData } from './testing_constants';
+import ReactDOM from 'react-dom';
+
+describe('Manage Datasource Table test', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders manage datasource table with data', async () => {
+    const http = jest.fn();
+    const pplService = {
+      fetch: jest.fn().mockResolvedValue(showDatasourceData),
+    };
+    const mockChrome = {
+      setBreadcrumbs: jest.fn(),
+    };
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOM.render(
+        <ManageDatasourcesTable http={http} pplService={pplService} chrome={mockChrome} />,
+        container
+      );
+    });
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/public/components/data_connections/components/__tests__/testing_constants.ts b/public/components/data_connections/components/__tests__/testing_constants.ts
new file mode 100644
index 0000000000..4ead8e5c13
--- /dev/null
+++ b/public/components/data_connections/components/__tests__/testing_constants.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const showDatasourceData = {
+  schema: [
+    {
+      name: 'DATASOURCE_NAME',
+      type: 'string',
+    },
+    {
+      name: 'CONNECTOR_TYPE',
+      type: 'string',
+    },
+  ],
+  datarows: [
+    ['my_spark3', 'SPARK'],
+    ['my_spark4', 'SPARK'],
+    ['my_spark', 'SPARK'],
+    ['@opensearch', 'OPENSEARCH'],
+    ['my_spark2', 'SPARK'],
+  ],
+  total: 5,
+  size: 5,
+  jsonData: [
+    {
+      DATASOURCE_NAME: 'my_spark3',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+    {
+      DATASOURCE_NAME: 'my_spark4',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+    {
+      DATASOURCE_NAME: 'my_spark',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+    {
+      DATASOURCE_NAME: '@opensearch',
+      CONNECTOR_TYPE: 'OPENSEARCH',
+    },
+    {
+      DATASOURCE_NAME: 'my_spark2',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+  ],
+};
+
+export const describeDatasource = {
+  name: 'my_spark3',
+  connector: 'SPARK',
+  allowedRoles: [],
+  properties: {
+    'spark.connector': 'emr',
+    'spark.datasource.flint.host': '0.0.0.0',
+    'spark.datasource.flint.integration':
+      'https://aws.oss.sonatype.org/content/repositories/snapshots/org/opensearch/opensearch-spark-standalone_2.12/0.1.0-SNAPSHOT/opensearch-spark-standalone_2.12-0.1.0-20230731.182705-3.jar',
+    'spark.datasource.flint.port': '9200',
+    'spark.datasource.flint.scheme': 'http',
+    'emr.cluster': 'j-3UNQLT1MPBGLG',
+  },
+};
diff --git a/public/components/data_connections/components/datasources_header.tsx b/public/components/data_connections/components/datasources_header.tsx
index de53fededd..8c0ceb7242 100644
--- a/public/components/data_connections/components/datasources_header.tsx
+++ b/public/components/data_connections/components/datasources_header.tsx
@@ -20,7 +20,7 @@ export function DataConnectionsHeader() {
     <div>
       <EuiPageHeader>
         <EuiPageHeaderSection>
-          <EuiTitle size="l" data-test-subj="data-connections-header">
+          <EuiTitle size="l" data-test-subj="datasources-header">
             <h1>Data connections</h1>
           </EuiTitle>
         </EuiPageHeaderSection>
diff --git a/public/components/data_connections/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx
index 8419f066c8..a9bf8824bc 100644
--- a/public/components/data_connections/components/manage_datasource_table.tsx
+++ b/public/components/data_connections/components/manage_datasource_table.tsx
@@ -19,7 +19,6 @@ import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { DataConnectionsHeader } from './datasources_header';
 import { HomeProps } from '../home';
-import { coreRefs } from '../../../framework/core_refs';
 import { DataConnectionsDescription } from './manage_datasource_description';
 import sparkSvg from '../icons/spark_logo.svg';
 
@@ -29,8 +28,7 @@ interface DataConnection {
 }
 
 export function ManageDatasourcesTable(props: HomeProps) {
-  const { http, chrome } = props;
-  const { pplService } = coreRefs;
+  const { http, chrome, pplService } = props;
 
   const [data, setData] = useState([]);
 
@@ -45,7 +43,7 @@ export function ManageDatasourcesTable(props: HomeProps) {
   }, []);
 
   async function handleDataRequest() {
-    pplService!.fetch({ query: 'show datasources', format: 'jdbc' }).then((datasources) =>
+    pplService.fetch({ query: 'show datasources', format: 'jdbc' }).then((datasources) =>
       setData(
         datasources.jsonData.map((x: any) => {
           return { name: x.DATASOURCE_NAME, connectionType: x.CONNECTOR_TYPE };

From f453c7eceb99c3d7fcd9298d8887ca9407494b56 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 6 Sep 2023 10:55:57 -0400
Subject: [PATCH 17/22] update data test subj and snapshot

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../__tests__/__snapshots__/datasource.test.tsx.snap         | 2 +-
 public/components/data_connections/components/datasource.tsx | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
index fa2c46105b..793dde1044 100644
--- a/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
+++ b/public/components/data_connections/components/__tests__/__snapshots__/datasource.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Datasource Page test Renders datasource page with data 1`] = `
             >
               <h1
                 class="euiTitle euiTitle--large"
-                data-test-subj="eventHomePageTitle"
+                data-test-subj="dataspirceTitle"
               />
             </div>
           </div>
diff --git a/public/components/data_connections/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx
index ba07e19c0b..19c6b9fbec 100644
--- a/public/components/data_connections/components/datasource.tsx
+++ b/public/components/data_connections/components/datasource.tsx
@@ -20,8 +20,7 @@ import {
   EuiTab,
   EuiTabs,
 } from '@elastic/eui';
-import React, { useEffect, useMemo, useState } from 'react';
-import { ASSET_FILTER_OPTIONS } from '../../../../common/constants/integrations';
+import React, { useEffect, useState } from 'react';
 import { DATASOURCES_BASE } from '../../../../common/constants/shared';
 
 interface DatasourceDetails {
@@ -136,7 +135,7 @@ export function DataSource(props: any) {
           <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
-                <EuiTitle data-test-subj="eventHomePageTitle" size="l">
+                <EuiTitle data-test-subj="dataspirceTitle" size="l">
                   <h1>{dataSource}</h1>
                 </EuiTitle>
               </EuiFlexItem>

From 5cc9387af97f79ca81c722555d926d0d2521f7c8 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 6 Sep 2023 14:43:37 -0400
Subject: [PATCH 18/22] Add datasources to management overview

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 opensearch_dashboards.json | 3 +++
 public/plugin.ts           | 9 +++++++++
 public/types.ts            | 2 ++
 3 files changed, 14 insertions(+)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index c3ed81d205..0fcc95b9bb 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -17,5 +17,8 @@
     "uiActions",
     "urlForwarding",
     "visualizations"
+  ],
+  "optionalPlugins": [
+    "managementOverview"
   ]
 }
\ No newline at end of file
diff --git a/public/plugin.ts b/public/plugin.ts
index f6f5aae589..6d553f63cf 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -208,6 +208,15 @@ export class ObservabilityPlugin
       mount: appMountWithStartPage('datasources'),
     });
 
+    setupDeps.managementOverview?.register({
+      id: observabilityDatasourcesID,
+      title: observabilityDatasourcesTitle,
+      order: 9070,
+      description: i18n.translate('observability.datasourcesDescription', {
+        defaultMessage: 'Manage compatible data sources and compute with OpenSearch Dashboards.',
+      }),
+    });
+
     const embeddableFactory = new ObservabilityEmbeddableFactoryDefinition(async () => ({
       getAttributeService: (await core.getStartServices())[1].dashboard.getAttributeService,
       savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
diff --git a/public/types.ts b/public/types.ts
index 48f0ad9de6..75afb133bf 100644
--- a/public/types.ts
+++ b/public/types.ts
@@ -7,6 +7,7 @@ import { SavedObjectsClient } from '../../../src/core/server';
 import { DashboardStart } from '../../../src/plugins/dashboard/public';
 import { DataPublicPluginSetup } from '../../../src/plugins/data/public';
 import { EmbeddableSetup, EmbeddableStart } from '../../../src/plugins/embeddable/public';
+import { ManagementOverViewPluginSetup } from '../../../src/plugins/management_overview/public';
 import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
 import { VisualizationsSetup } from '../../../src/plugins/visualizations/public';
@@ -23,6 +24,7 @@ export interface SetupDependencies {
   visualizations: VisualizationsSetup;
   data: DataPublicPluginSetup;
   uiActions: UiActionsStart;
+  managementOverview?: ManagementOverViewPluginSetup;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

From 3caa45d14ddcb05bee80002c51f41ba752ca095c Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 6 Sep 2023 15:13:43 -0400
Subject: [PATCH 19/22] remove spark logo and update snapshot

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../manage_datasource_table.test.tsx.snap     | 32 +++----------------
 .../components/manage_datasource_table.tsx    |  4 ---
 .../data_connections/icons/spark_logo.svg     | 13 --------
 3 files changed, 4 insertions(+), 45 deletions(-)
 delete mode 100644 public/components/data_connections/icons/spark_logo.svg

diff --git a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
index d1e9677c2c..2134dc907d 100644
--- a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
+++ b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
@@ -279,13 +279,7 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <img
-                              alt=""
-                              class="euiIcon euiIcon--medium"
-                              src="file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
@@ -361,13 +355,7 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <img
-                              alt=""
-                              class="euiIcon euiIcon--medium"
-                              src="file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
@@ -443,13 +431,7 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <img
-                              alt=""
-                              class="euiIcon euiIcon--medium"
-                              src="file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
@@ -612,13 +594,7 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <img
-                              alt=""
-                              class="euiIcon euiIcon--medium"
-                              src="file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
diff --git a/public/components/data_connections/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx
index a9bf8824bc..83daf395ff 100644
--- a/public/components/data_connections/components/manage_datasource_table.tsx
+++ b/public/components/data_connections/components/manage_datasource_table.tsx
@@ -20,7 +20,6 @@ import React, { useEffect, useState } from 'react';
 import { DataConnectionsHeader } from './datasources_header';
 import { HomeProps } from '../home';
 import { DataConnectionsDescription } from './manage_datasource_description';
-import sparkSvg from '../icons/spark_logo.svg';
 
 interface DataConnection {
   connectionType: 'OPENSEARCH' | 'SPARK';
@@ -56,9 +55,6 @@ export function ManageDatasourcesTable(props: HomeProps) {
     switch (record.connectionType) {
       case 'OPENSEARCH':
         return <EuiIcon type="logoOpenSearch" />;
-      case 'SPARK':
-        return <EuiIcon type={sparkSvg} />;
-
       default:
         return <></>;
     }
diff --git a/public/components/data_connections/icons/spark_logo.svg b/public/components/data_connections/icons/spark_logo.svg
deleted file mode 100644
index 4fe9de5215..0000000000
--- a/public/components/data_connections/icons/spark_logo.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" sodipodi:docname="Apache_Spark_logo.svg" version="1.1" viewBox="0 0 414 215" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
-<title>Apache Spark logo</title>
-<metadata>
-    <rdf:RDF>
-        <cc:Work rdf:about="">
-            <dc:format>image/svg+xml</dc:format>
-            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-            <dc:title/>
-        </cc:Work>
-    </rdf:RDF>
-</metadata>
-<sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" inkscape:current-layer="g12650" inkscape:cx="89.093483" inkscape:cy="177.49819" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1014" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="0" inkscape:window-y="36" inkscape:zoom="1.086315" objecttolerance="10" pagecolor="#ffffff" showgrid="false"/><g transform="matrix(1.33 0 0 1.33 0 4.05e-6)" inkscape:groupmode="layer" inkscape:label="spark"><path d="m284 81.5c-.269-.575-.39-.864-.535-1.14-3.89-7.4-7.77-14.8-11.7-22.2-.394-.742-.344-1.18.195-1.82 6.19-7.23 12.3-14.5 18.5-21.7.219-.254.414-.523.496-.976-1.8.469-3.6.933-5.41 1.41-7.47 1.98-15 3.95-22.4 5.96-.695.187-1.01-.016-1.36-.594-4.24-7.09-8.51-14.2-12.8-21.2-.219-.367-.458-.723-.926-1.03-.344 1.89-.692 3.77-1.03 5.66-1.19 6.67-2.38 13.3-3.56 20-.129.719-.305 1.44-.367 2.16-.059.688-.414.942-1.04 1.14-8.81 2.77-17.6 5.56-26.4 8.35-.386.121-.765.281-1.18.656 7.2 2.86 14.4 5.72 21.7 8.63-.266.211-.442.375-.637.5-4.5 2.91-9.01 5.82-13.5 8.74-.539.352-.965.402-1.57.129-5.38-2.42-10.8-4.8-16.2-7.2-2.42-1.08-4.59-2.51-6.28-4.59-3.83-4.68-3.07-10 2.03-13.3 1.67-1.07 3.57-1.86 5.46-2.48 8.63-2.81 17.3-5.52 25.9-8.24.726-.231 1.06-.555 1.2-1.34 1.16-6.68 2.35-13.4 3.56-20 .644-3.57.984-7.22 2.72-10.5.665-1.26 1.46-2.49 2.42-3.54 3.44-3.82 8.23-3.96 11.9-.328 1.23 1.23 2.28 2.67 3.19 4.16 4 6.53 7.94 13.1 11.9 19.7.465.777.883.933 1.74.707 9.65-2.59 19.3-5.14 29-7.69 2-.527 4.01-.718 6.06-.335 4.45.832 6.4 4.22 4.89 8.53-.683 1.96-1.87 3.61-3.2 5.18-6.74 7.93-13.5 15.9-20.2 23.8-.551.648-.562 1.11-.18 1.84 4.04 7.61 8.04 15.2 12.1 22.9.961 1.82 1.7 3.72 1.72 5.81.047 4.76-3.44 8.66-8.17 9.36-2.65.387-5.11-.179-7.6-.945-6.05-1.87-12.1-3.71-18.2-5.54-.563-.168-.778-.391-.879-.996-.696-4.27-1.46-8.53-2.2-12.8-.019-.117.016-.242.036-.504 6.91 1.91 13.8 3.79 20.9 5.76" style="fill-rule:evenodd;fill:#e25a1c"/><path d="m272 144c-5.46-.008-10.9-.035-16.4-.011-.723 0-1.13-.207-1.53-.821-6.46-9.84-13-19.7-19.4-29.5-.207-.312-.426-.613-.793-1.14-1.39 10.6-2.76 21-4.13 31.4h-14.3c.168-1.39.317-2.74.493-4.08 1.39-10.7 2.8-21.3 4.2-32 1.34-10.2 2.67-20.4 4.03-30.6.039-.301.242-.688.488-.848 4.92-3.21 9.86-6.39 14.8-9.57.071-.047.172-.051.426-.125-1.49 11.4-2.97 22.7-4.46 34 .059.039.117.082.176.121 7.75-8.58 15.5-17.2 23.4-25.9.227 1.32.426 2.45.621 3.58.555 3.23 1.09 6.48 1.68 9.71.121.652-.055 1.05-.488 1.51-5.01 5.24-10 10.5-15 15.8-.219.231-.426.469-.676.743.16.253.297.5.457.726 8.61 12.1 17.2 24.2 25.8 36.3.156.219.382.391.574.586v.191" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m103 112c-.219-1.11-.375-2.75-.871-4.28-2.4-7.39-9.97-11.4-17.8-9.61-8.61 2-14.8 8.77-15.6 17.6-.66 6.5 2.84 12.8 9.34 15.1 5.24 1.89 10.3 1.1 15-1.71 6.21-3.72 9.57-9.25 10-17.1zm-37.8 27.5c-.422 3.18-.828 6.17-1.22 9.17-.523 3.98-1.05 7.97-1.55 12-.058.465-.199.672-.699.668-3.93-.015-7.86-.011-11.8-.019-.09 0-.18-.047-.391-.109.238-1.88.469-3.77.715-5.65.867-6.6 1.73-13.2 2.61-19.8 1.01-7.56 1.8-15.1 3.09-22.6 2.28-13.3 13.6-24.7 26.8-27.6 7.67-1.66 15-.891 21.7 3.43 6.68 4.3 10.5 10.6 11.4 18.4 1.24 11.1-2.85 20.3-10.7 28-5.18 5.01-11.4 8.19-18.5 9.27-7.37 1.11-14.3-.117-20.5-4.46-.227-.16-.473-.3-.863-.546" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m58.6 76.5c-4.4 3.28-8.65 6.44-12.9 9.61-.687-1.08-1.3-2.16-2.02-3.17-1.85-2.59-4.15-4.52-7.49-4.75-2.78-.196-5.16.718-7.05 2.77-1.69 1.83-1.91 4.44-.332 6.51 1.74 2.28 3.64 4.44 5.59 6.55 3.23 3.5 6.6 6.86 9.8 10.4 2.91 3.2 5.24 6.78 5.96 11.2.856 5.2-.183 10.1-2.64 14.7-4.55 8.45-11.7 13.4-21.2 14.9-4.18.675-8.34.543-12.4-.657-5.41-1.59-9.18-5.14-11.6-10.1-.855-1.77-1.51-3.64-2.28-5.54 4.73-2.53 9.34-5 14-7.49.16.387.277.711.426 1.02.797 1.59 1.45 3.28 2.43 4.75 2.93 4.35 7.65 5.67 12.4 3.52 1.23-.555 2.42-1.33 3.43-2.23 3.08-2.74 3.66-6.56 1.38-10-1.31-1.98-2.95-3.76-4.55-5.53-3.82-4.24-7.8-8.35-11.5-12.7-2.57-2.98-4.32-6.44-4.88-10.4-.605-4.36.266-8.46 2.53-12.1 5.63-9.11 13.8-13.8 24.6-13.5 6.17.223 11.1 3.11 14.9 7.91 1.13 1.42 2.19 2.89 3.34 4.43" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m163 125c-.719 5.49-1.4 10.7-2.1 15.9-.039.266-.246.625-.469.727-10.7 4.94-24.7 4.25-33.4-5.69-4.7-5.34-6.67-11.7-6.38-18.7.683-16.3 14.2-30.6 30.4-32.6 9.45-1.16 17.7 1.39 24.1 8.74 4.36 5 6.38 11 6.08 17.6-.195 4.36-.879 8.69-1.42 13-.77 6.14-1.61 12.3-2.42 18.4-.031.214-.074.433-.125.711h-12.7c.168-1.41.324-2.79.504-4.17.922-7.09 1.94-14.2 2.75-21.3.504-4.42.187-8.81-1.84-12.9-2.15-4.35-5.75-6.66-10.5-7.16-9.82-1.04-19.2 5.78-21.2 15.4-1.38 6.38.797 12.5 5.88 15.9 4.95 3.29 10.2 3.3 15.6 1.17 2.74-1.08 5.06-2.8 7.28-5.11" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m217 86.3c-.582 4.42-1.16 8.77-1.74 13.2-2.7 0-5.34-.015-7.98.004-2.14.016-4.09 1.4-4.74 3.4-.25.781-.343 1.62-.453 2.44-1.34 10.2-2.67 20.3-4 30.4-.336 2.56-.66 5.12-.996 7.72h-13.3c.246-1.95.48-3.84.726-5.73.863-6.58 1.73-13.2 2.6-19.7.754-5.69 1.43-11.4 2.32-17.1 1.19-7.6 8.75-14.4 16.4-14.7 3.66-.16 7.33-.027 11.1-.027" style="fill-rule:evenodd;fill:#3c3a3e"/><path d="m288 144v-5.6h-.031l-2.2 5.6h-.699l-2.2-5.6h-.035v5.6h-1.1v-6.71h1.71l2 5.1 1.97-5.1h1.7v6.71zm-9.74-5.81v5.81h-1.1v-5.81h-2.1v-.899h5.31v.899h-2.1" style="fill:#3c3a3e"/><path d="m76.3 67.1h3.29l-.778-4.98zm3.81 3.22h-5.47l-1.74 3.41h-3.88l8.55-16h3.74l2.91 16h-3.59l-.516-3.41" style="fill:#3c3a3e"/><path d="m99.7 61h-1.95l-.656 3.69h1.95c1.18 0 2.11-.773 2.11-2.23 0-.965-.586-1.46-1.46-1.46zm-4.72-3.22h5.12c2.68 0 4.55 1.6 4.55 4.34 0 3.46-2.44 5.78-5.92 5.78h-2.21l-1.04 5.85h-3.34l2.82-16" style="fill:#3c3a3e"/><path d="m116 67.1h3.29l-.777-4.98zm3.8 3.22h-5.47l-1.74 3.41h-3.88l8.55-16h3.74l2.91 16h-3.59l-.516-3.41" style="fill:#3c3a3e"/><path d="m141 73.2c-1.13.516-2.37.824-3.62.824-4.23 0-6.88-3.17-6.88-7.14 0-5.08 4.27-9.35 9.35-9.35 1.27 0 2.42.305 3.36.82l-.469 3.83c-.703-.777-1.84-1.32-3.24-1.32-2.91 0-5.5 2.63-5.5 5.68 0 2.32 1.46 4.14 3.76 4.14 1.41 0 2.77-.543 3.69-1.29l-.445 3.8" style="fill:#3c3a3e"/><path d="m162 67.3h-6.95l-1.13 6.43h-3.33l2.82-16h3.34l-1.12 6.32h6.95l1.13-6.32h3.34l-2.82 16h-3.34l1.12-6.43" style="fill:#3c3a3e"/><path d="m174 73.7 2.82-16h8.86l-.563 3.22h-5.52l-.563 3.1h5.07l-.563 3.22h-5.07l-.563 3.22h5.52l-.563 3.22h-8.86" style="fill:#3c3a3e"/></g></svg>

From c7e5adda7b9409d14926ef57a73c893338a70361 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 6 Sep 2023 16:10:51 -0400
Subject: [PATCH 20/22] refactor routes out

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../manage_datasource_table.test.tsx.snap     | 87 ------------------
 .../manage_datasource_table.test.tsx          |  6 +-
 .../components/__tests__/testing_constants.ts | 90 +++++++++++--------
 .../components/manage_datasource_table.tsx    |  7 +-
 .../opensearch_observability_plugin.ts        | 13 ---
 server/adaptors/ppl_plugin.ts                 | 19 +++-
 .../routes/datasources/datasources_router.ts  | 27 +++++-
 7 files changed, 103 insertions(+), 146 deletions(-)

diff --git a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
index 2134dc907d..8206d792b7 100644
--- a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
+++ b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_table.test.tsx.snap
@@ -488,93 +488,6 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                       </div>
                     </td>
                   </tr>
-                  <tr
-                    class="euiTableRow euiTableRow-isSelectable"
-                  >
-                    <td
-                      class="euiTableRowCell"
-                    >
-                      <div
-                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                      >
-                        Name
-                      </div>
-                      <div
-                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                      >
-                        <div
-                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                        >
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon-isLoading"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </div>
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <a
-                              class="euiLink euiLink--primary"
-                              data-test-subj="@opensearchDataConnectionsLink"
-                              href="#/manage/@opensearch"
-                              rel="noreferrer"
-                            >
-                              @opensearch
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="euiTableRowCell"
-                    >
-                      <div
-                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                      >
-                        Connection Status
-                      </div>
-                      <div
-                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                      >
-                        <div
-                          class="euiText euiText--medium"
-                          data-test-subj="undefinedDatasourceConnectionHealth"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="euiTableRowCell"
-                    >
-                      <div
-                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                      >
-                        Actions
-                      </div>
-                      <div
-                        class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="euiIcon euiIcon--medium euiIcon-isLoading"
-                          focusable="false"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        />
-                      </div>
-                    </td>
-                  </tr>
                   <tr
                     class="euiTableRow euiTableRow-isSelectable"
                   >
diff --git a/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx b/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
index bbc92b4b5b..599a7a235e 100644
--- a/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
+++ b/public/components/data_connections/components/__tests__/manage_datasource_table.test.tsx
@@ -15,9 +15,11 @@ describe('Manage Datasource Table test', () => {
   configure({ adapter: new Adapter() });
 
   it('Renders manage datasource table with data', async () => {
-    const http = jest.fn();
+    const http = {
+      get: jest.fn().mockResolvedValue(showDatasourceData),
+    };
     const pplService = {
-      fetch: jest.fn().mockResolvedValue(showDatasourceData),
+      fetch: jest.fn(),
     };
     const mockChrome = {
       setBreadcrumbs: jest.fn(),
diff --git a/public/components/data_connections/components/__tests__/testing_constants.ts b/public/components/data_connections/components/__tests__/testing_constants.ts
index 4ead8e5c13..5cad339575 100644
--- a/public/components/data_connections/components/__tests__/testing_constants.ts
+++ b/public/components/data_connections/components/__tests__/testing_constants.ts
@@ -3,49 +3,61 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const showDatasourceData = {
-  schema: [
-    {
-      name: 'DATASOURCE_NAME',
-      type: 'string',
+export const showDatasourceData = [
+  {
+    name: 'my_spark3',
+    connector: 'SPARK',
+    allowedRoles: [],
+    properties: {
+      'spark.connector': 'emr',
+      'spark.datasource.flint.host': '0.0.0.0',
+      'spark.datasource.flint.integration':
+        'https://aws.oss.sonatype.org/content/repositories/snapshots/org/opensearch/opensearch-spark-standalone_2.12/0.1.0-SNAPSHOT/opensearch-spark-standalone_2.12-0.1.0-20230731.182705-3.jar',
+      'spark.datasource.flint.port': '9200',
+      'spark.datasource.flint.scheme': 'http',
+      'emr.cluster': 'j-3UNQLT1MPBGLG',
     },
-    {
-      name: 'CONNECTOR_TYPE',
-      type: 'string',
-    },
-  ],
-  datarows: [
-    ['my_spark3', 'SPARK'],
-    ['my_spark4', 'SPARK'],
-    ['my_spark', 'SPARK'],
-    ['@opensearch', 'OPENSEARCH'],
-    ['my_spark2', 'SPARK'],
-  ],
-  total: 5,
-  size: 5,
-  jsonData: [
-    {
-      DATASOURCE_NAME: 'my_spark3',
-      CONNECTOR_TYPE: 'SPARK',
-    },
-    {
-      DATASOURCE_NAME: 'my_spark4',
-      CONNECTOR_TYPE: 'SPARK',
-    },
-    {
-      DATASOURCE_NAME: 'my_spark',
-      CONNECTOR_TYPE: 'SPARK',
+  },
+  {
+    name: 'my_spark4',
+    connector: 'SPARK',
+    allowedRoles: [],
+    properties: {
+      'spark.connector': 'emr',
+      'spark.datasource.flint.host': '15.248.1.68',
+      'spark.datasource.flint.integration':
+        'https://aws.oss.sonatype.org/content/repositories/snapshots/org/opensearch/opensearch-spark-standalone_2.12/0.1.0-SNAPSHOT/opensearch-spark-standalone_2.12-0.1.0-20230731.182705-3.jar',
+      'spark.datasource.flint.port': '9200',
+      'spark.datasource.flint.scheme': 'http',
+      'emr.cluster': 'j-3UNQLT1MPBGLG',
     },
-    {
-      DATASOURCE_NAME: '@opensearch',
-      CONNECTOR_TYPE: 'OPENSEARCH',
+  },
+  {
+    name: 'my_spark',
+    connector: 'SPARK',
+    allowedRoles: [],
+    properties: {
+      'spark.connector': 'emr',
+      'spark.datasource.flint.host': '0.0.0.0',
+      'spark.datasource.flint.port': '9200',
+      'spark.datasource.flint.scheme': 'http',
+      'spark.datasource.flint.region': 'xxx',
+      'emr.cluster': 'xxx',
     },
-    {
-      DATASOURCE_NAME: 'my_spark2',
-      CONNECTOR_TYPE: 'SPARK',
+  },
+  {
+    name: 'my_spark2',
+    connector: 'SPARK',
+    allowedRoles: [],
+    properties: {
+      'spark.connector': 'emr',
+      'spark.datasource.flint.host': '0.0.0.0',
+      'spark.datasource.flint.port': '9200',
+      'spark.datasource.flint.scheme': 'http',
+      'emr.cluster': 'j-3UNQLT1MPBGLG',
     },
-  ],
-};
+  },
+];
 
 export const describeDatasource = {
   name: 'my_spark3',
diff --git a/public/components/data_connections/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx
index 83daf395ff..2fd3e01b3b 100644
--- a/public/components/data_connections/components/manage_datasource_table.tsx
+++ b/public/components/data_connections/components/manage_datasource_table.tsx
@@ -20,6 +20,7 @@ import React, { useEffect, useState } from 'react';
 import { DataConnectionsHeader } from './datasources_header';
 import { HomeProps } from '../home';
 import { DataConnectionsDescription } from './manage_datasource_description';
+import { DATASOURCES_BASE } from '../../../../common/constants/shared';
 
 interface DataConnection {
   connectionType: 'OPENSEARCH' | 'SPARK';
@@ -42,10 +43,10 @@ export function ManageDatasourcesTable(props: HomeProps) {
   }, []);
 
   async function handleDataRequest() {
-    pplService.fetch({ query: 'show datasources', format: 'jdbc' }).then((datasources) =>
+    http.get(`${DATASOURCES_BASE}`).then((datasources) =>
       setData(
-        datasources.jsonData.map((x: any) => {
-          return { name: x.DATASOURCE_NAME, connectionType: x.CONNECTOR_TYPE };
+        datasources.map((x: any) => {
+          return { name: x.name, connectionType: x.connector };
         })
       )
     );
diff --git a/server/adaptors/opensearch_observability_plugin.ts b/server/adaptors/opensearch_observability_plugin.ts
index b4de94a530..10137b33c7 100644
--- a/server/adaptors/opensearch_observability_plugin.ts
+++ b/server/adaptors/opensearch_observability_plugin.ts
@@ -51,19 +51,6 @@ export function OpenSearchObservabilityPlugin(Client: any, config: any, componen
     method: 'GET',
   });
 
-  observability.getDatasourceById = clientAction({
-    url: {
-      fmt: `${OPENSEARCH_DATASOURCES_API.DATASOURCE}/<%=datasource%>`,
-      req: {
-        datasource: {
-          type: 'string',
-          required: true,
-        },
-      },
-    },
-    method: 'GET',
-  });
-
   // Get Object by Id
   observability.getObjectById = clientAction({
     url: {
diff --git a/server/adaptors/ppl_plugin.ts b/server/adaptors/ppl_plugin.ts
index 304d196e3f..c8fdb9d074 100644
--- a/server/adaptors/ppl_plugin.ts
+++ b/server/adaptors/ppl_plugin.ts
@@ -3,7 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { PPL_ENDPOINT, SQL_ENDPOINT } from '../../common/constants/shared';
+import {
+  OPENSEARCH_DATASOURCES_API,
+  PPL_ENDPOINT,
+  SQL_ENDPOINT,
+} from '../../common/constants/shared';
 
 export const PPLPlugin = function (Client, config, components) {
   const ca = components.clientAction.factory;
@@ -37,4 +41,17 @@ export const PPLPlugin = function (Client, config, components) {
     needBody: true,
     method: 'POST',
   });
+
+  ppl.datasourceQuery = ca({
+    url: {
+      fmt: `${OPENSEARCH_DATASOURCES_API.DATASOURCE}/<%=datasource%>`,
+      req: {
+        datasource: {
+          type: 'string',
+          required: false,
+        },
+      },
+    },
+    method: 'GET',
+  });
 };
diff --git a/server/routes/datasources/datasources_router.ts b/server/routes/datasources/datasources_router.ts
index 4b6f001c6f..2761b411c6 100644
--- a/server/routes/datasources/datasources_router.ts
+++ b/server/routes/datasources/datasources_router.ts
@@ -21,7 +21,7 @@ export function registerDatasourcesRoute(router: IRouter) {
       try {
         const dataSourcesresponse = await context.observability_plugin.observabilityClient
           .asScoped(request)
-          .callAsCurrentUser('observability.getDatasourceById', {
+          .callAsCurrentUser('ppl.datasourceQuery', {
             datasource: request.params.name,
           });
         return response.ok({
@@ -36,4 +36,29 @@ export function registerDatasourcesRoute(router: IRouter) {
       }
     }
   );
+
+  router.get(
+    {
+      path: `${DATASOURCES_BASE}`,
+      validate: false,
+    },
+    async (context, request, response): Promise<any> => {
+      try {
+        const dataSourcesresponse = await context.observability_plugin.observabilityClient
+          .asScoped(request)
+          .callAsCurrentUser('ppl.datasourceQuery', {
+            datasource: '',
+          });
+        return response.ok({
+          body: dataSourcesresponse,
+        });
+      } catch (error: any) {
+        console.error('Issue in fetching datasource:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
 }

From bc88ebe4cc2191a721a8e9bd36f0e57ef8e157b5 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 7 Sep 2023 10:34:05 -0400
Subject: [PATCH 21/22] separate out the roles

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 server/adaptors/ppl_plugin.ts                   | 11 +++++++++--
 server/routes/datasources/datasources_router.ts |  8 +++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/server/adaptors/ppl_plugin.ts b/server/adaptors/ppl_plugin.ts
index c8fdb9d074..e4714c9d00 100644
--- a/server/adaptors/ppl_plugin.ts
+++ b/server/adaptors/ppl_plugin.ts
@@ -42,16 +42,23 @@ export const PPLPlugin = function (Client, config, components) {
     method: 'POST',
   });
 
-  ppl.datasourceQuery = ca({
+  ppl.getDatasourceById = ca({
     url: {
       fmt: `${OPENSEARCH_DATASOURCES_API.DATASOURCE}/<%=datasource%>`,
       req: {
         datasource: {
           type: 'string',
-          required: false,
+          required: true,
         },
       },
     },
     method: 'GET',
   });
+
+  ppl.getDatasources = ca({
+    url: {
+      fmt: `${OPENSEARCH_DATASOURCES_API.DATASOURCE}`,
+    },
+    method: 'GET',
+  });
 };
diff --git a/server/routes/datasources/datasources_router.ts b/server/routes/datasources/datasources_router.ts
index 2761b411c6..187be8da1c 100644
--- a/server/routes/datasources/datasources_router.ts
+++ b/server/routes/datasources/datasources_router.ts
@@ -21,7 +21,7 @@ export function registerDatasourcesRoute(router: IRouter) {
       try {
         const dataSourcesresponse = await context.observability_plugin.observabilityClient
           .asScoped(request)
-          .callAsCurrentUser('ppl.datasourceQuery', {
+          .callAsCurrentUser('ppl.getDatasourceById', {
             datasource: request.params.name,
           });
         return response.ok({
@@ -46,14 +46,12 @@ export function registerDatasourcesRoute(router: IRouter) {
       try {
         const dataSourcesresponse = await context.observability_plugin.observabilityClient
           .asScoped(request)
-          .callAsCurrentUser('ppl.datasourceQuery', {
-            datasource: '',
-          });
+          .callAsCurrentUser('ppl.getDatasources');
         return response.ok({
           body: dataSourcesresponse,
         });
       } catch (error: any) {
-        console.error('Issue in fetching datasource:', error);
+        console.error('Issue in fetching datasources:', error);
         return response.custom({
           statusCode: error.statusCode || 500,
           body: error.message,

From 04402dc82a830c2e8dfc3c44cfeefae56a7ca365 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 7 Sep 2023 10:35:04 -0400
Subject: [PATCH 22/22] bump version back to 3.0

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 opensearch_dashboards.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 0fcc95b9bb..7abafdabd9 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -1,7 +1,7 @@
 {
   "id": "observabilityDashboards",
   "version": "3.0.0.0",
-  "opensearchDashboardsVersion": "2.9.0",
+  "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
   "requiredPlugins": [