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