Configure S3 datasource flow (opensearch-project#1049)

* Manage datasources (opensearch-project#967) * fix name change bug and modify test to test behavior Signed-off-by: Derek Ho <[email protected]> * get rid of lint Signed-off-by: Derek Ho <[email protected]> * test for flyout Signed-off-by: Derek Ho <[email protected]> * flyout to medium size Signed-off-by: Derek Ho <[email protected]> * make accelerate extensible Signed-off-by: Derek Ho <[email protected]> * get datasources and hook up to pplservice Signed-off-by: Derek Ho <[email protected]> * get flint working Signed-off-by: Derek Ho <[email protected]> * add datasource page with steps and buttons on bottom bar Signed-off-by: Derek Ho <[email protected]> * datasources as a new plugin and mostly working Signed-off-by: Derek Ho <[email protected]> * hook up manage to show datasources call Signed-off-by: Derek Ho <[email protected]> * update two tables with descriptions Signed-off-by: Derek Ho <[email protected]> * make some updates to the page Signed-off-by: Derek Ho <[email protected]> * cleanup unused files for data connections Signed-off-by: Derek Ho <[email protected]> * cleanup and add overview panel columns Signed-off-by: Derek Ho <[email protected]> * render tabs Signed-off-by: Derek Ho <[email protected]> * add unit tests Signed-off-by: Derek Ho <[email protected]> * update data test subj and snapshot Signed-off-by: Derek Ho <[email protected]> * Add datasources to management overview Signed-off-by: Derek Ho <[email protected]> * remove spark logo and update snapshot Signed-off-by: Derek Ho <[email protected]> * refactor routes out Signed-off-by: Derek Ho <[email protected]> * separate out the roles Signed-off-by: Derek Ho <[email protected]> * bump version back to 3.0 Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> * Add acceleration management UI (opensearch-project#989) * add acceleration management UI skeleton Signed-off-by: Shenoy Pratik <[email protected]> * Create new documentation link for acc Signed-off-by: Shenoy Pratik <[email protected]> * fix typos and minor bugs Signed-off-by: Shenoy Pratik <[email protected]> * update snapshot Signed-off-by: Shenoy Pratik <[email protected]> * update window location to hash Signed-off-by: Shenoy Pratik <[email protected]> * remove unused headers Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Shenoy Pratik <[email protected]> * Rename data sources to data connections (opensearch-project#1004) * rename data sources to data connections Signed-off-by: Derek Ho <[email protected]> * final cleanup Signed-off-by: Derek Ho <[email protected]> * update acceleration breadcrumb Signed-off-by: Derek Ho <[email protected]> * fix API call for data connection page Signed-off-by: Derek Ho <[email protected]> * fix integ test and data test subj and snapshot Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> * Add fallback to show if user does not have datasource API permissions (opensearch-project#1008) * add fallback ui for manage and view datasources Signed-off-by: Derek Ho <[email protected]> * always show datasources via pplservice Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> * Add access control tab content (opensearch-project#992) * basic rendering for the access control tab Signed-off-by: Derek Ho <[email protected]> * hook up basic radio groups and euicombo boxes for query and acceleration permissions Signed-off-by: Derek Ho <[email protected]> * refactor and clean up unuseed inports Signed-off-by: Derek Ho <[email protected]> * remove unused import Signed-off-by: Derek Ho <[email protected]> * fix import and snapshot Signed-off-by: Derek Ho <[email protected]> * fix test Signed-off-by: Derek Ho <[email protected]> * Address PR comments Signed-off-by: Derek Ho <[email protected]> * Address PR comments Signed-off-by: Derek Ho <[email protected]> * Remove unused files and variables Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> * Delete datasource and Connection Configuration Tab (opensearch-project#1024) * Address previous PR comments and implement rudimentary delete Signed-off-by: Derek Ho <[email protected]> * Implement modal and instant delete showing up in list Signed-off-by: Derek Ho <[email protected]> * Refactor save or cancel to a shared component, implement hard coded datasource configurations tab Signed-off-by: Derek Ho <[email protected]> * Update test with mock role data Signed-off-by: Derek Ho <[email protected]> * Add most functionality of edit connectiondetails Signed-off-by: Derek Ho <[email protected]> * Address PR comments Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> * Get most of the workflow working for configure datasource Signed-off-by: Derek Ho <[email protected]> * remove acceleration components Signed-off-by: Shenoy Pratik <[email protected]> * Update data connection to datasources in a few more places and update tests Signed-off-by: Derek Ho <[email protected]> * Rename and re-organize in folders Signed-off-by: Derek Ho <[email protected]> * Fix import path in testing file Signed-off-by: Derek Ho <[email protected]> * Get Initial S3 configuration working Signed-off-by: Derek Ho <[email protected]> * Configure S3 Data Source Working Signed-off-by: Derek Ho <[email protected]> * Fix query permissions display Signed-off-by: Derek Ho <[email protected]> * Fix merge conflict Signed-off-by: Derek Ho <[email protected]> * Clean up PR Signed-off-by: Derek Ho <[email protected]> * Add s3 logo in manage table Signed-off-by: Derek Ho <[email protected]> * Fix up PR according to UX feedback Signed-off-by: Derek Ho <[email protected]> * Remove successfully Signed-off-by: Derek Ho <[email protected]> * Update test Signed-off-by: Derek Ho <[email protected]> * Address PR comments Signed-off-by: Derek Ho <[email protected]> * Update test in accordance to useLocation Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]>
derek-ho · Oct 4, 2023 · e3a83fe · e3a83fe
1 parent 45a92f2
commit e3a83fe
Show file tree

Hide file tree

Showing 31 changed files with 943 additions and 89 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -58,8 +58,8 @@ export const observabilityIntegrationsID = 'integrations';
 export const observabilityIntegrationsTitle = 'Integrations';
 export const observabilityIntegrationsPluginOrder = 9020;
 
-export const observabilityDataConnectionsID = 'dataconnections';
-export const observabilityDataConnectionsTitle = 'Data Connections';
+export const observabilityDataConnectionsID = 'datasources';
+export const observabilityDataConnectionsTitle = 'Data sources';
 export const observabilityDataConnectionsPluginOrder = 9030;
 
 // Shared Constants

diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -3,8 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiComboBoxOptionOption } from '@elastic/eui';
+
 export interface PermissionsConfigurationProps {
-  roles: Array<{ label: string }>;
-  selectedRoles: Array<{ label: string }>;
-  setSelectedRoles: React.Dispatch<React.SetStateAction<Array<{ label: string }>>>;
+  roles: Role[];
+  selectedRoles: Role[];
+  setSelectedRoles: React.Dispatch<React.SetStateAction<Role[]>>;
+  layout: 'horizontal' | 'vertical';
 }
+
+export type Role = EuiComboBoxOptionOption;
+
+export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH';
diff --git 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 DataConnectionsHome } from './data_connections/home';
+import { Home as DataConnectionsHome } from './datasources/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;

diff --git a/public/components/data_connections/components/data_connections_header.tsx b/public/components/data_connections/components/data_connections_header.tsx
diff --git a/...snapshots__/data_connection.test.tsx.snap → ...snapshots__/data_connection.test.tsx.snap b/...snapshots__/data_connection.test.tsx.snap → ...snapshots__/data_connection.test.tsx.snap
diff --git a/...ata_connections_description.test.tsx.snap → ...ata_connections_description.test.tsx.snap b/...ata_connections_description.test.tsx.snap → ...ata_connections_description.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Manage Data Connections Description test Renders manage data connection
       <h2
         className="euiTitle euiTitle--small"
       >
-        Manage existing data connections
+        Manage existing data sources
       </h2>
     </EuiTitle>
     <EuiSpacer
@@ -33,7 +33,7 @@ exports[`Manage Data Connections Description test Renders manage data connection
           <div
             className="euiTextColor euiTextColor--subdued"
           >
-            Manage already created data connections.
+            Manage already created data sources.
           </div>
         </EuiTextColor>
       </div>

diff --git a/...nage_data_connections_table.test.tsx.snap → ...nage_data_connections_table.test.tsx.snap b/...nage_data_connections_table.test.tsx.snap → ...nage_data_connections_table.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
               class="euiTitle euiTitle--large"
               data-test-subj="dataconnections-header"
             >
-              Data connections
+              Data sources
             </h1>
           </div>
         </header>
@@ -32,7 +32,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
           <div
             class="euiTextColor euiTextColor--subdued"
           >
-            Connect and manage compatible OpenSearch and OpenSearch Dashboard data connections.
+            Connect and manage compatible OpenSearch and OpenSearch Dashboard data sources.
              
             <a
               class="euiLink euiLink--primary"
@@ -58,6 +58,38 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
         <div
           class="euiSpacer euiSpacer--l"
         />
+        <div
+          class="euiTabs euiTabs--condensed"
+          role="tablist"
+        >
+          <button
+            aria-selected="true"
+            class="euiTab euiTab-isSelected"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Manage data source
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="euiTab"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              New data source
+            </span>
+          </button>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
@@ -68,7 +100,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
           <h2
             class="euiTitle euiTitle--small"
           >
-            Manage existing data connections
+            Manage existing data sources
           </h2>
           <div
             class="euiSpacer euiSpacer--s"
@@ -79,7 +111,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
             <div
               class="euiTextColor euiTextColor--subdued"
             >
-              Manage already created data connections.
+              Manage already created data sources.
             </div>
           </div>
           <hr

diff --git a/...onents/__tests__/data_connection.test.tsx → ...onents/__tests__/data_connection.test.tsx b/...onents/__tests__/data_connection.test.tsx → ...onents/__tests__/data_connection.test.tsx
@@ -8,7 +8,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import { act } from '@testing-library/react';
 import React from 'react';
 import { describeDataConnection, mockRoleData } from '../../../../../test/datasources';
-import { DataConnection } from '../data_connection';
+import { DataConnection } from '../manage/data_connection';
 import ReactDOM from 'react-dom';
 
 jest.mock('../../../../../public/framework/core_refs', () => ({

diff --git a/...age_data_connections_description.test.tsx → ...age_data_connections_description.test.tsx b/...age_data_connections_description.test.tsx → ...age_data_connections_description.test.tsx
@@ -7,7 +7,7 @@ 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_data_connections_description';
+import { DataConnectionsDescription } from '../manage/manage_data_connections_description';
 
 describe('Manage Data Connections Description test', () => {
   configure({ adapter: new Adapter() });

diff --git a/...__/manage_data_connections_table.test.tsx → ...__/manage_data_connections_table.test.tsx b/...__/manage_data_connections_table.test.tsx → ...__/manage_data_connections_table.test.tsx
@@ -7,10 +7,17 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { act } from '@testing-library/react';
 import React from 'react';
-import { ManageDataConnectionsTable } from '../manage_data_connections_table';
+import { ManageDataConnectionsTable } from '../manage/manage_data_connections_table';
 import { showDataConnectionsData } from '../../../../../test/datasources';
 import ReactDOM from 'react-dom';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/manage',
+  }),
+}));
+
 describe('Manage Data Connections Table test', () => {
   configure({ adapter: new Adapter() });
 

diff --git a/public/components/datasources/components/data_connections_header.tsx b/public/components/datasources/components/data_connections_header.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/data_connections';
+
+const tabs = [
+  {
+    id: 'manage',
+    name: 'Manage data source',
+    disabled: false,
+  },
+  {
+    id: 'new',
+    name: 'New data source',
+    disabled: false,
+  },
+];
+
+export const DataConnectionsHeader = () => {
+  const location = useLocation().pathname.substring(1);
+
+  const [selectedTabId, setSelectedTabId] = useState(location ? location : 'manage');
+
+  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>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="dataconnections-header">
+            <h1>Data sources</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Connect and manage compatible OpenSearch and OpenSearch Dashboard data sources.{' '}
+        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+      <EuiSpacer size="l" />
+      <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
+      <EuiSpacer size="s" />
+    </div>
+  );
+};
diff --git a/...ections/components/access_control_tab.tsx → .../components/manage/access_control_tab.tsx b/...ections/components/access_control_tab.tsx → .../components/manage/access_control_tab.tsx
@@ -14,23 +14,27 @@ import {
 import React, { useEffect, useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
-import { coreRefs } from '../../../../public/framework/core_refs';
+import { coreRefs } from '../../../../framework/core_refs';
 import { QueryPermissionsConfiguration } from './query_permissions';
-import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
-import { SaveOrCancel } from './save_or_cancel';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { SaveOrCancel } from '../save_or_cancel';
+import { Role } from '../../../../../common/types/data_connections';
 
 interface AccessControlTabProps {
   dataConnection: string;
   connector: string;
   properties: unknown;
+  allowedRoles: string[];
 }
 
 export const AccessControlTab = (props: AccessControlTabProps) => {
   const [mode, setMode] = useState<'view' | 'edit'>('view');
-  const [roles, setRoles] = useState<Array<{ label: string }>>([]);
-  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<
-    Array<{ label: string }>
-  >([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>(
+    props.allowedRoles.map((role) => {
+      return { label: role };
+    })
+  );
   const { http } = coreRefs;
 
   useEffect(() => {
@@ -51,7 +55,7 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Query access</EuiText>
               <EuiText size="s" className="overview-content">
-                {[].length ? `Restricted` : '-'}
+                {selectedQueryPermissionRoles.length ? `Restricted` : '-'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -67,6 +71,7 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
           roles={roles}
           selectedRoles={selectedQueryPermissionRoles}
           setSelectedRoles={setSelectedQueryPermissionRoles}
+          layout={'vertical'}
         />
       </EuiFlexGroup>
     );

diff --git a/...s/components/connection_configuration.tsx → ...nents/manage/connection_configuration.tsx b/...s/components/connection_configuration.tsx → ...nents/manage/connection_configuration.tsx
diff --git a/...ections/components/connection_details.tsx → .../components/manage/connection_details.tsx b/...ections/components/connection_details.tsx → .../components/manage/connection_details.tsx
@@ -14,9 +14,9 @@ import {
 import React, { useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
-import { coreRefs } from '../../../../public/framework/core_refs';
-import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
-import { SaveOrCancel } from './save_or_cancel';
+import { coreRefs } from '../../../../framework/core_refs';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { SaveOrCancel } from '../save_or_cancel';
 import { ConnectionConfiguration } from './connection_configuration';
 
 interface ConnectionDetailProps {

diff --git a/...ponents/connection_management_callout.tsx → .../manage/connection_management_callout.tsx b/...ponents/connection_management_callout.tsx → .../manage/connection_management_callout.tsx