diff --git a/.cypress/integration/10_datasources.spec.js b/.cypress/integration/10_datasources.spec.js index 8468c58bd..fdfe21b28 100644 --- a/.cypress/integration/10_datasources.spec.js +++ b/.cypress/integration/10_datasources.spec.js @@ -4,16 +4,38 @@ */ /// + const moveToDatasourcesHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/dataconnections`); + cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources`); + }; + + const moveToNewDatasourcesPage = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources#/new`); + }; + + const moveToCreatePrometheusDatasourcePage = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources#/configure/PROMETHEUS`); }; - describe('Basic sanity test for datasources plugin', () => { + describe('Integration tests for datasources plugin', () => { + const testPrometheusSuffix = (Math.random() + 1).toString(36).substring(7); +const testPrometheusInstance = `Prometheus_${testPrometheusSuffix}`; +const testS3Suffix = (Math.random() + 1).toString(36).substring(7); +const testS3Instance = `S3_${testS3Suffix}`; it('Navigates to datasources plugin and expects the correct header', () => { moveToDatasourcesHome(); cy.get('[data-test-subj="dataconnections-header"]').should('exist'); }); + + it('Tests navigation between tabs and goes to Prometheus creation flow', () => { + moveToDatasourcesHome(); + cy.get('[data-test-subj="new"]').click(); + cy.url().should('include', '/new') + cy.get('[data-test-subj="datasource_card_prometheus"]').click(); + cy.url().should('include', '/configure/PROMETHEUS'); + }); + }); diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts index 3e56f6ec3..6d77f8d72 100644 --- a/common/constants/data_connections.ts +++ b/common/constants/data_connections.ts @@ -3,8 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -export const OPENSEARCH_DOCUMENTATION_URL = - 'https://opensearch.org/docs/latest/data-connections/index'; +import { DatasourceType } from '../../common/types/data_connections'; + +export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/data-sources/index'; export const QUERY_RESTRICTED = 'query-restricted'; export const QUERY_ALL = 'query-all'; + +export const DatasourceTypeToDisplayName: { [key in DatasourceType]: string } = { + PROMETHEUS: 'Prometheus', + S3GLUE: 'S3', +}; + +export type AuthMethod = 'noauth' | 'basicauth' | 'awssigv4'; diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts index dfa1373d4..0c9228c2d 100644 --- a/common/types/data_connections.ts +++ b/common/types/data_connections.ts @@ -14,4 +14,4 @@ export interface PermissionsConfigurationProps { export type Role = EuiComboBoxOptionOption; -export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH' | 'PROMETHEUS'; +export type DatasourceType = 'S3GLUE' | 'PROMETHEUS'; diff --git a/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap new file mode 100644 index 000000000..104567f9d --- /dev/null +++ b/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap @@ -0,0 +1,550 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Connection Details test Renders connection details for prometheus datasource 1`] = ` + + +
+ + + +
+
+ + + Configurations may be managed elsewhere. + +
+ +
+ +
+ Access to data can be managed in other systems outside of OpenSearch. Check with your administrator for additional configurations. +
+ +
+ +
+ + + +
+ + +
+ + +
+ +
+ +
+

+ Data source configurations +

+ Control configurations for your data source. +
+ +
+ +
+ + + +
+ + + +
+ +
+ +
+ +
+ +
+ Data source name +
+ + +
+ prom +
+ +
+ + +
+ +
+ Data source description +
+ + +
+ - +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ Prometheus URI +
+ + +
+ localhost:9201 +
+ +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ + +`; + +exports[`Connection Details test Renders connection details for s3 datasource 1`] = ` + + +
+ + + +
+
+ + + Configurations may be managed elsewhere. + +
+ +
+ +
+ Access to data can be managed in other systems outside of OpenSearch. Check with your administrator for additional configurations. +
+ +
+ +
+ + + +
+ + +
+ + +
+ +
+ +
+

+ Data source configurations +

+ Control configurations for your data source. +
+ +
+ +
+ + + +
+ + + +
+ +
+ +
+ +
+ +
+ Data source name +
+ + +
+ ya +
+ +
+ + +
+ +
+ Data source description +
+ + +
+ - +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ Index store region +
+ + +
+ us-west-2 +
+ +
+ + +
+ +
+ Index store URI +
+ + +
+ y +
+ +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ + +`; diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap index f10b203c7..51ae56882 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Data Connection Page test Renders data connection page with data 1`] = ` +exports[`Data Connection Page test Renders Prometheus data connection page with data 1`] = `
- my_spark3 + prom
- Authentication method + Data source description
- Data source description + Prometheus URI
- - + localhost:9201
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ + + +
+

+ Query your data in Metrics Analytics. +

+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + Configurations may be managed elsewhere. + +
+
+
+ Access to data can be managed in other systems outside of OpenSearch. Check with your administrator for additional configurations. +
+
+
+
+
+
+
+
+

+ Access Control +

+ Control which OpenSearch users have access to this data source. +
+
+
+
+
+
+
+
+
+ Query access +
+
+ Everyone +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Data Connection Page test Renders S3 data connection page with data 1`] = ` +
+
+
+
+
+
+
+

+

+
+
+
+
+
+
+
- Query permissions + Connection title
- Everyone + ya +
+
+
+
+ Data source description +
+
+ -
@@ -120,12 +428,26 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
- Spark data location + Index store region
- - + us-west-2 +
+
+
+
+ Index store URI +
+
+ y
@@ -156,14 +478,19 @@ exports[`Data Connection Page test Renders data connection page with data 1`] = > + > + + + > + + +
+ > + + @@ -468,25 +808,6 @@ exports[`Data Connection Page test Renders data connection page with data 1`] = Control which OpenSearch users have access to this data source.
-
- -
- - + Everyone
diff --git a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap index 101696bc8..55b247e8a 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Manage Data Connections Description test Renders manage data connections description 1`] = ` - +
+ + +
+ +
+ + +`; diff --git a/public/components/datasources/components/__tests__/connection_details.test.tsx b/public/components/datasources/components/__tests__/connection_details.test.tsx new file mode 100644 index 000000000..c5a47a1f4 --- /dev/null +++ b/public/components/datasources/components/__tests__/connection_details.test.tsx @@ -0,0 +1,29 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { + testPrometheusConnectionDetails, + testS3ConnectionDetails, +} from '../../../../../test/datasources'; +import { ConnectionDetails } from '../manage/connection_details'; + +describe('Connection Details test', () => { + configure({ adapter: new Adapter() }); + + it('Renders connection details for s3 datasource', async () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('Renders connection details for prometheus datasource', async () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/components/datasources/components/__tests__/data_connection.test.tsx b/public/components/datasources/components/__tests__/data_connection.test.tsx index 04c1278c2..a7c817626 100644 --- a/public/components/datasources/components/__tests__/data_connection.test.tsx +++ b/public/components/datasources/components/__tests__/data_connection.test.tsx @@ -7,9 +7,13 @@ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import { act } from '@testing-library/react'; import React from 'react'; -import { describeDataConnection, mockRoleData } from '../../../../../test/datasources'; +import { + describePrometheusDataConnection, + describeS3Dataconnection, +} from '../../../../../test/datasources'; import { DataConnection } from '../manage/data_connection'; import ReactDOM from 'react-dom'; +import { coreRefs } from '../../../../../public/framework/core_refs'; jest.mock('../../../../../public/framework/core_refs', () => ({ coreRefs: { @@ -17,7 +21,7 @@ jest.mock('../../../../../public/framework/core_refs', () => ({ setBreadcrumbs: jest.fn(), }, http: { - get: jest.fn().mockResolvedValueOnce(mockRoleData).mockResolvedValue(describeDataConnection), + get: jest.fn(), }, }, })); @@ -25,11 +29,29 @@ jest.mock('../../../../../public/framework/core_refs', () => ({ describe('Data Connection Page test', () => { configure({ adapter: new Adapter() }); - it('Renders data connection page with data', async () => { + beforeEach(() => { + // Clear the mock implementation before each test + (coreRefs.http!.get as jest.Mock).mockClear(); + }); + + it('Renders Prometheus data connection page with data', async () => { + const pplService = { + fetch: jest.fn(), + }; + const container = document.createElement('div'); + (coreRefs.http!.get as jest.Mock).mockResolvedValue(describePrometheusDataConnection); + await act(() => { + ReactDOM.render(, container); + }); + expect(container).toMatchSnapshot(); + }); + + it('Renders S3 data connection page with data', async () => { const pplService = { fetch: jest.fn(), }; const container = document.createElement('div'); + (coreRefs.http!.get as jest.Mock).mockResolvedValue(describeS3Dataconnection); await act(() => { ReactDOM.render(, container); }); diff --git a/public/components/datasources/components/__tests__/manage_data_connections_description.test.tsx b/public/components/datasources/components/__tests__/manage_data_connections_description.test.tsx index 3bbfa820e..3f9500075 100644 --- a/public/components/datasources/components/__tests__/manage_data_connections_description.test.tsx +++ b/public/components/datasources/components/__tests__/manage_data_connections_description.test.tsx @@ -13,7 +13,7 @@ describe('Manage Data Connections Description test', () => { configure({ adapter: new Adapter() }); it('Renders manage data connections description', async () => { - const wrapper = mount(); + const wrapper = mount( {}} />); await waitFor(() => { expect(wrapper).toMatchSnapshot(); diff --git a/public/components/datasources/components/__tests__/no_access.test.tsx b/public/components/datasources/components/__tests__/no_access.test.tsx new file mode 100644 index 000000000..191872613 --- /dev/null +++ b/public/components/datasources/components/__tests__/no_access.test.tsx @@ -0,0 +1,19 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { NoAccess } from '../no_access'; + +describe('No access test', () => { + configure({ adapter: new Adapter() }); + + it('Renders no access view of data source', async () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/components/datasources/components/data_connections_header.tsx b/public/components/datasources/components/data_connections_header.tsx index 6f5c87092..42739c0aa 100644 --- a/public/components/datasources/components/data_connections_header.tsx +++ b/public/components/datasources/components/data_connections_header.tsx @@ -47,6 +47,7 @@ export const DataConnectionsHeader = () => { isSelected={tab.id === selectedTabId} disabled={tab.disabled} key={index} + data-test-subj={tab.id} > {tab.name} diff --git a/public/components/datasources/components/manage/access_control_tab.tsx b/public/components/datasources/components/manage/access_control_tab.tsx index 40e9e8ecd..bb56bccaf 100644 --- a/public/components/datasources/components/manage/access_control_tab.tsx +++ b/public/components/datasources/components/manage/access_control_tab.tsx @@ -3,21 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiText, - EuiHorizontalRule, -} from '@elastic/eui'; -import React, { useEffect, useState } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiHorizontalRule } from '@elastic/eui'; +import React, { useState } from 'react'; import { EuiPanel } from '@elastic/eui'; import { ConnectionManagementCallout } from './connection_management_callout'; -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 { Role } from '../../../../../common/types/data_connections'; interface AccessControlTabProps { @@ -28,24 +17,11 @@ interface AccessControlTabProps { } export const AccessControlTab = (props: AccessControlTabProps) => { - const [mode, setMode] = useState<'view' | 'edit'>('view'); - const [roles, setRoles] = useState([]); const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState( props.allowedRoles.map((role) => { return { label: role }; }) ); - const { http } = coreRefs; - - useEffect(() => { - http!.get('/api/v1/configuration/roles').then((data) => - setRoles( - Object.keys(data.data).map((key) => { - return { label: key }; - }) - ) - ); - }, []); const AccessControlDetails = () => { return ( @@ -55,7 +31,11 @@ export const AccessControlTab = (props: AccessControlTabProps) => { Query access - {selectedQueryPermissionRoles.length ? `Restricted` : '-'} + {selectedQueryPermissionRoles.length + ? `Restricted to ${selectedQueryPermissionRoles + .map((role) => role.label) + .join(',')}` + : 'Everyone'} @@ -64,31 +44,6 @@ export const AccessControlTab = (props: AccessControlTabProps) => { ); }; - const EditAccessControlDetails = () => { - return ( - - - - ); - }; - - const saveChanges = () => { - http!.put(`${DATACONNECTIONS_BASE}`, { - body: JSON.stringify({ - name: props.dataConnection, - allowedRoles: selectedQueryPermissionRoles.map((role) => role.label), - connector: props.connector, - properties: props.properties, - }), - }); - setMode('view'); - }; - const AccessControlHeader = () => { return ( @@ -98,16 +53,6 @@ export const AccessControlTab = (props: AccessControlTabProps) => { Control which OpenSearch users have access to this data source. - - - setMode(mode === 'view' ? 'edit' : 'view')} - fill={mode === 'view' ? true : false} - > - {mode === 'view' ? 'Edit' : 'Cancel'} - - ); }; @@ -120,17 +65,9 @@ export const AccessControlTab = (props: AccessControlTabProps) => { - {mode === 'view' ? : } + - {mode === 'edit' && ( - { - setMode('view'); - }} - onSave={saveChanges} - /> - )} ); diff --git a/public/components/datasources/components/manage/connection_configuration.tsx b/public/components/datasources/components/manage/connection_configuration.tsx deleted file mode 100644 index 28b70316e..000000000 --- a/public/components/datasources/components/manage/connection_configuration.tsx +++ /dev/null @@ -1,138 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { - EuiFieldPassword, - EuiFieldText, - EuiFlexGroup, - EuiFlexItem, - EuiFormRow, - EuiSelect, - EuiSpacer, - EuiText, - EuiTextArea, -} from '@elastic/eui'; -import { EuiSelectOption } from '@elastic/eui/src/components/form/select'; -import React, { useState } from 'react'; - -interface ConnectionConfigurationProps { - connectionName: string; - connectionDetails: string; - onConnectionDetailsChange: (e: any) => void; - authenticationOptions: EuiSelectOption[]; - setSelectedAuthenticationMethod: (authenticationMethod: EuiSelectOption) => void; - selectedAuthenticationMethod: string; -} - -export const ConnectionConfiguration = (props: ConnectionConfigurationProps) => { - const { - connectionName, - connectionDetails, - onConnectionDetailsChange, - authenticationOptions, - selectedAuthenticationMethod, - setSelectedAuthenticationMethod, - } = props; - const [details, setDetails] = useState(connectionDetails); - - const [password, setPassword] = useState(''); - - const NameRow = () => { - return ( - - - Data source name - - This is the name of the data source and how it will be referenced in OpenSearch - Dashboards. - - - - - - - - - ); - }; - - const SparkEndpointRow = () => { - return ( - - - Spark endpoint URL - - { - "The URL for your Spark cluster and where your data is. This is what OpenSearch will connect to. The endpoint URL can't be changed. If you'd like to use another endpoint create a new data source." - } - - - - - - - - - ); - }; - - return ( - - - - - - Description - optional - - Text that can help identify the data source or share additional details - - - - - { - setDetails(e.target.value); - }} - onBlur={onConnectionDetailsChange} - /> - - - - - - - - - Authentication details - - This is information used to authenticate and create a data source with Spark. - - - - - setSelectedAuthenticationMethod(e)} - /> - - - - - - setPassword(e.target.value)} - /> - - - - - ); -}; diff --git a/public/components/datasources/components/manage/connection_details.tsx b/public/components/datasources/components/manage/connection_details.tsx index 533071960..f78272b73 100644 --- a/public/components/datasources/components/manage/connection_details.tsx +++ b/public/components/datasources/components/manage/connection_details.tsx @@ -3,49 +3,24 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiText, - EuiHorizontalRule, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiHorizontalRule } from '@elastic/eui'; import React, { useState } from 'react'; import { EuiPanel } from '@elastic/eui'; import { ConnectionManagementCallout } from './connection_management_callout'; -import { coreRefs } from '../../../../framework/core_refs'; -import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared'; -import { SaveOrCancel } from '../save_or_cancel'; -import { ConnectionConfiguration } from './connection_configuration'; +import { PrometheusProperties, S3GlueProperties } from './data_connection'; +import { DatasourceType } from '../../../../../common/types/data_connections'; interface ConnectionDetailProps { dataConnection: string; - connector: string; - allowedRoles: string[]; - properties: unknown; + connector: DatasourceType; + description: string; + properties: S3GlueProperties | PrometheusProperties; } export const ConnectionDetails = (props: ConnectionDetailProps) => { - const [mode, setMode] = useState<'view' | 'edit'>('view'); - const { http } = coreRefs; + const { dataConnection, connector, description, properties } = props; - const { dataConnection, connector, allowedRoles, properties } = props; - const [connectionDetails, setConnectionDetails] = useState(''); - const onChange = (e) => { - setConnectionDetails(e.target.value); - }; - const authenticationOptions = [{ value: 'option_one', text: 'Username & Password' }]; - - const [selectedAuthenticationMethod, setSelectedAuthenticationMethod] = useState( - authenticationOptions[0].value - ); - - const onAuthenticationMethodChange = (e) => { - setSelectedAuthenticationMethod(e.target.value); - }; - - const ConnectionConfigurationView = () => { + const S3ConnectionConfigurationView = () => { return ( @@ -57,9 +32,9 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => { - Spark endpoint URL + Data source description - {'-'} + {description || '-'} @@ -67,15 +42,15 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => { - Description + Index store region - {'-'} + {(properties as S3GlueProperties)['glue.indexstore.opensearch.region'] || '-'} - Authentication method + Index store URI - {'-'} + {(properties as S3GlueProperties)['glue.indexstore.opensearch.uri'] || '-'} @@ -84,33 +59,39 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => { ); }; - const EditConnectionConfiguration = () => { + const PrometheusConnectionConfigurationView = () => { return ( - - + + + + + Data source name + + {dataConnection} + + + + Data source description + + {description || '-'} + + + + + + + + Prometheus URI + + {(properties as PrometheusProperties)['prometheus.uri'] || '-'} + + + + ); }; - const saveChanges = () => { - http!.put(`${DATACONNECTIONS_BASE}`, { - body: JSON.stringify({ - name: props.dataConnection, - allowedRoles: props.allowedRoles, - connector: props.connector, - properties: props.properties, - }), - }); - setMode('view'); - }; - const ConnectionConfigurationHeader = () => { return ( @@ -120,16 +101,6 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => { Control configurations for your data source. - - - setMode(mode === 'view' ? 'edit' : 'view')} - fill={mode === 'view' ? true : false} - > - {mode === 'view' ? 'Edit' : 'Cancel'} - - ); }; @@ -142,17 +113,13 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => { - {mode === 'view' ? : } + {connector === 'S3GLUE' ? ( + + ) : ( + + )} - {mode === 'edit' && ( - { - setMode('view'); - }} - onSave={saveChanges} - /> - )} ); diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx index cbe616167..69efebafb 100644 --- a/public/components/datasources/components/manage/data_connection.tsx +++ b/public/components/datasources/components/manage/data_connection.tsx @@ -30,13 +30,23 @@ import { } from '../../../../../common/constants/shared'; import { coreRefs } from '../../../../framework/core_refs'; import { ConnectionDetails } from './connection_details'; +import { DatasourceType } from '../../../../../common/types/data_connections'; interface DatasourceDetails { allowedRoles: string[]; name: string; - cluster: string; - connector: string; - properties: unknown; + connector: DatasourceType; + description: string; + properties: S3GlueProperties | PrometheusProperties; +} + +export interface S3GlueProperties { + 'glue.indexstore.opensearch.uri': string; + 'glue.indexstore.opensearch.region': string; +} + +export interface PrometheusProperties { + 'prometheus.uri': string; } export const DataConnection = (props: any) => { @@ -44,9 +54,9 @@ export const DataConnection = (props: any) => { const [datasourceDetails, setDatasourceDetails] = useState({ allowedRoles: [], name: '', - cluster: '', - connector: '', - properties: {}, + description: '', + connector: 'PROMETHEUS', + properties: { 'prometheus.uri': 'placeholder' }, }); const [hasAccess, setHasAccess] = useState(true); const { http, chrome, application } = coreRefs; @@ -106,8 +116,8 @@ export const DataConnection = (props: any) => { .then((data) => { setDatasourceDetails({ allowedRoles: data.allowedRoles, + description: data.description, name: data.name, - cluster: data.properties['emr.cluster'], connector: data.connector, properties: data.properties, }); @@ -138,8 +148,8 @@ export const DataConnection = (props: any) => { disabled: false, content: ( @@ -170,7 +180,7 @@ export const DataConnection = (props: any) => { } }; - const DatasourceOverview = () => { + const S3DatasourceOverview = () => { return ( @@ -183,9 +193,9 @@ export const DataConnection = (props: any) => { - Authentication method + Data source description - {'-'} + {datasourceDetails.description || '-'} @@ -193,27 +203,55 @@ export const DataConnection = (props: any) => { - Data source description + Index store region - {'-'} + {(datasourceDetails.properties as S3GlueProperties)[ + 'glue.indexstore.opensearch.region' + ] || '-'} - Query permissions + Index store URI - {datasourceDetails.allowedRoles && datasourceDetails.allowedRoles.length - ? 'Restricted' - : 'Everyone'} + {(datasourceDetails.properties as S3GlueProperties)[ + 'glue.indexstore.opensearch.uri' + ] || '-'} + + + + ); + }; + + const PrometheusDatasourceOverview = () => { + return ( + + - Spark data location + Connection title - {'-'} + {datasourceDetails.name || '-'} + + + + Data source description + + {datasourceDetails.description || '-'} + + + + + + + + Prometheus URI + + {(datasourceDetails.properties as PrometheusProperties)['prometheus.uri'] || '-'} @@ -224,6 +262,15 @@ export const DataConnection = (props: any) => { ); }; + const DatasourceOverview = () => { + switch (datasourceDetails.connector) { + case 'S3GLUE': + return ; + case 'PROMETHEUS': + return ; + } + }; + if (!hasAccess) { return ; } diff --git a/public/components/datasources/components/new/auth_details.tsx b/public/components/datasources/components/new/auth_details.tsx new file mode 100644 index 000000000..313588df4 --- /dev/null +++ b/public/components/datasources/components/new/auth_details.tsx @@ -0,0 +1,102 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { EuiFormRow, EuiFieldText, EuiFieldPassword } from '@elastic/eui'; +import { useState } from 'react'; +import React from 'react'; +import { AuthMethod } from '../../../../../common/constants/data_connections'; + +interface AuthDetailProps { + currentAuthMethod: AuthMethod; + currentPassword: string; + currentUsername: string; + currentAccessKey?: string; + currentSecretKey?: string; + currentRegion?: string; + setRegionForRequest?: React.Dispatch>; + setAccessKeyForRequest?: React.Dispatch>; + setSecretKeyForRequest?: React.Dispatch>; + setPasswordForRequest: React.Dispatch>; + setUsernameForRequest: React.Dispatch>; +} + +export const AuthDetails = (props: AuthDetailProps) => { + const { + currentUsername, + currentPassword, + currentAccessKey, + currentSecretKey, + currentRegion, + currentAuthMethod, + setAccessKeyForRequest, + setPasswordForRequest, + setRegionForRequest, + setSecretKeyForRequest, + setUsernameForRequest, + } = props; + const [password, setPassword] = useState(currentPassword); + const [username, setUsername] = useState(currentUsername); + const [accessKey, setAccessKey] = useState(currentAccessKey); + const [secretKey, setSecretKey] = useState(currentSecretKey); + const [region, setRegion] = useState(currentRegion); + switch (currentAuthMethod) { + case 'basicauth': + return ( + <> + + setUsername(e.target.value)} + onBlur={(e) => setUsernameForRequest(e.target.value)} + /> + + + setPassword(e.target.value)} + onBlur={(e) => setPasswordForRequest(e.target.value)} + /> + + + ); + case 'awssigv4': + return ( + <> + + { + setRegionForRequest(e.target.value); + }} + onChange={(e) => { + setRegion(e.target.value); + }} + /> + + + setAccessKey(e.target.value)} + onBlur={(e) => setAccessKeyForRequest(e.target.value)} + /> + + + setSecretKey(e.target.value)} + onBlur={(e) => setSecretKeyForRequest(e.target.value)} + /> + + + ); + default: + return null; + } +}; diff --git a/public/components/datasources/components/new/configure_datasource.tsx b/public/components/datasources/components/new/configure_datasource.tsx index fd6a2b059..41b506757 100644 --- a/public/components/datasources/components/new/configure_datasource.tsx +++ b/public/components/datasources/components/new/configure_datasource.tsx @@ -9,7 +9,6 @@ import { EuiPage, EuiPageBody, EuiSpacer, - EuiText, EuiButton, EuiSteps, EuiPageSideBar, @@ -25,16 +24,23 @@ import { useToast } from '../../../../../public/components/common/toast'; import { DatasourceType, Role } from '../../../../../common/types/data_connections'; import { ConfigurePrometheusDatasource } from './configure_prometheus_datasource'; import { ReviewPrometheusDatasource } from './review_prometheus_datasource_configuration'; +import { + AuthMethod, + DatasourceTypeToDisplayName, +} from '../../../../../common/constants/data_connections'; +import { formatError } from '../../../../../public/components/event_analytics/utils'; +import { NotificationsStart } from '../../../../../../../src/core/public'; interface ConfigureDatasourceProps { - type: string; + type: DatasourceType; + notifications: NotificationsStart; } export function Configure(props: ConfigureDatasourceProps) { - const { type } = props; + const { type, notifications } = props; const { http, chrome } = coreRefs; const { setToast } = useToast(); - + const [authMethod, setAuthMethod] = useState('basicauth'); const [name, setName] = useState(''); const [details, setDetails] = useState(''); const [arn, setArn] = useState(''); @@ -50,11 +56,10 @@ export function Configure(props: ConfigureDatasourceProps) { const ConfigureDatasourceSteps = [ { title: 'Configure Data Source', - children: null, + status: page === 'review' ? 'complete' : undefined, }, { title: 'Review Configuration', - children: null, }, ]; @@ -76,7 +81,7 @@ export function Configure(props: ConfigureDatasourceProps) { href: '#/new', }, { - text: `${type}`, + text: `${DatasourceTypeToDisplayName[type]}`, href: `#/configure/${type}`, }, ]); @@ -99,6 +104,12 @@ export function Configure(props: ConfigureDatasourceProps) { roles={roles} selectedQueryPermissionRoles={selectedQueryPermissionRoles} setSelectedQueryPermissionRoles={setSelectedQueryPermissionRoles} + currentUsername={username} + setUsernameForRequest={setUsername} + currentPassword={password} + setPasswordForRequest={setPassword} + currentAuthMethod={authMethod} + setAuthMethodForRequest={setAuthMethod} /> ); case 'PROMETHEUS': @@ -123,6 +134,8 @@ export function Configure(props: ConfigureDatasourceProps) { setSecretKeyForRequest={setSecretKey} currentRegion={region} setRegionForRequest={setRegion} + currentAuthMethod={authMethod} + setAuthMethodForRequest={setAuthMethod} /> ); default: @@ -141,6 +154,7 @@ export function Configure(props: ConfigureDatasourceProps) { currentArn={arn} currentStore={storeURI} selectedQueryPermissionRoles={selectedQueryPermissionRoles} + currentAuthMethod={authMethod} goBack={() => setPage('configure')} /> ); @@ -153,6 +167,7 @@ export function Configure(props: ConfigureDatasourceProps) { currentStore={storeURI} currentUsername={username} selectedQueryPermissionRoles={selectedQueryPermissionRoles} + currentAuthMethod={authMethod} goBack={() => setPage('configure')} /> ); @@ -194,7 +209,9 @@ export function Configure(props: ConfigureDatasourceProps) { iconType="arrowRight" fill > - {page === 'configure' ? `Review Configuration` : `Connect to ${type}`} + {page === 'configure' + ? `Review Configuration` + : `Connect to ${DatasourceTypeToDisplayName[type]}`} @@ -206,42 +223,53 @@ export function Configure(props: ConfigureDatasourceProps) { let response; switch (type) { case 'S3GLUE': + const s3properties = + authMethod === 'basicauth' + ? { + 'glue.auth.type': 'iam_role', + 'glue.auth.role_arn': arn, + 'glue.indexstore.opensearch.uri': storeURI, + 'glue.indexstore.opensearch.auth': authMethod, + 'glue.indexstore.opensearch.auth.username': username, + 'glue.indexstore.opensearch.auth.password': password, + } + : { + 'glue.auth.type': 'iam_role', + 'glue.auth.role_arn': arn, + 'glue.indexstore.opensearch.uri': storeURI, + 'glue.indexstore.opensearch.auth': authMethod, + }; response = http!.post(`${DATACONNECTIONS_BASE}`, { body: JSON.stringify({ name, allowedRoles: selectedQueryPermissionRoles.map((role) => role.label), connector: 's3glue', - properties: { - 'glue.auth.type': 'iam_role', - 'glue.auth.role_arn': arn, - 'glue.indexstore.opensearch.uri': storeURI, - 'glue.indexstore.opensearch.auth': false, - 'glue.indexstore.opensearch.region': 'us-west-2', - }, + properties: s3properties, }), }); break; case 'PROMETHEUS': - const properties = username - ? { - 'prometheus.uri': storeURI, - 'prometheus.auth.type': 'basicauth', - 'prometheus.auth.username': username, - 'prometheus.auth.password': password, - } - : { - 'prometheus.uri': storeURI, - 'prometheus.auth.type': 'awssigv4', - 'prometheus.auth.region': region, - 'prometheus.auth.access_key': accessKey, - 'prometheus.auth.secret_key': secretKey, - }; + const prometheusProperties = + authMethod === 'basicauth' + ? { + 'prometheus.uri': storeURI, + 'prometheus.auth.type': authMethod, + 'prometheus.auth.username': username, + 'prometheus.auth.password': password, + } + : { + 'prometheus.uri': storeURI, + 'prometheus.auth.type': authMethod, + 'prometheus.auth.region': region, + 'prometheus.auth.access_key': accessKey, + 'prometheus.auth.secret_key': secretKey, + }; response = http!.post(`${DATACONNECTIONS_BASE}`, { body: JSON.stringify({ name, allowedRoles: selectedQueryPermissionRoles.map((role) => role.label), connector: 'prometheus', - properties, + properties: prometheusProperties, }), }); break; @@ -254,12 +282,10 @@ export function Configure(props: ConfigureDatasourceProps) { window.location.hash = '#/manage'; }) .catch((err) => { - console.log(JSON.stringify(err)); - setToast( - `Could not create data source`, - 'danger', - `An error occured while trying to create the ${type} data source ${name}: ${err.body.message}` - ); + const formattedError = formatError(err.name, err.message, err.body.message); + notifications.toasts.addError(formattedError, { + title: 'Could not create data source', + }); setPage('configure'); }); }; @@ -267,7 +293,7 @@ export function Configure(props: ConfigureDatasourceProps) { return ( - + {page === 'configure' ? ( diff --git a/public/components/datasources/components/new/configure_prometheus_datasource.tsx b/public/components/datasources/components/new/configure_prometheus_datasource.tsx index 8014cc12b..7c74e0651 100644 --- a/public/components/datasources/components/new/configure_prometheus_datasource.tsx +++ b/public/components/datasources/components/new/configure_prometheus_datasource.tsx @@ -14,12 +14,16 @@ import { EuiTextArea, EuiSelect, EuiFieldPassword, + EuiForm, } from '@elastic/eui'; import React, { useState } from 'react'; -import { access } from 'fs'; -import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections'; -import { QueryPermissionsConfiguration } from '../manage/query_permissions'; +import { + AuthMethod, + OPENSEARCH_DOCUMENTATION_URL, +} from '../../../../../common/constants/data_connections'; +import { QueryPermissionsConfiguration } from './query_permissions'; import { Role } from '../../../../../common/types/data_connections'; +import { AuthDetails } from './auth_details'; interface ConfigurePrometheusDatasourceProps { roles: Role[]; @@ -33,6 +37,8 @@ interface ConfigurePrometheusDatasourceProps { currentAccessKey: string; currentSecretKey: string; currentRegion: string; + currentAuthMethod: AuthMethod; + setAuthMethodForRequest: React.Dispatch>; setRegionForRequest: React.Dispatch>; setAccessKeyForRequest: React.Dispatch>; setSecretKeyForRequest: React.Dispatch>; @@ -64,88 +70,23 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour setSecretKeyForRequest, currentRegion, setRegionForRequest, + currentAuthMethod, + setAuthMethodForRequest, } = props; const [name, setName] = useState(currentName); const [details, setDetails] = useState(currentDetails); const [store, setStore] = useState(currentStore); const authOptions = [ - { value: 'basic', text: 'Basic Auth' }, - { value: 'sigv4', text: 'SIGV4' }, + { value: 'basicauth', text: 'Basic authentication' }, + { value: 'awssigv4', text: 'AWS Signature Version 4' }, ]; - const [selectedAuthOption, setSelectedAuthOption] = useState(authOptions[0].value); - - const AuthDetails = () => { - const [password, setPassword] = useState(currentPassword); - const [username, setUsername] = useState(currentUsername); - const [accessKey, setAccessKey] = useState(currentAccessKey); - const [secretKey, setSecretKey] = useState(currentSecretKey); - const [region, setRegion] = useState(currentRegion); - switch (selectedAuthOption) { - case 'basic': - return ( - <> - - setUsername(e.target.value)} - onBlur={(e) => setUsernameForRequest(e.target.value)} - /> - - - setPassword(e.target.value)} - onBlur={(e) => setPasswordForRequest(e.target.value)} - /> - - - ); - case 'sigv4': - return ( - <> - - { - setRegionForRequest(e.target.value); - }} - onChange={(e) => { - setRegion(e.target.value); - }} - /> - - - setAccessKey(e.target.value)} - onBlur={(e) => setAccessKeyForRequest(e.target.value)} - /> - - - setSecretKey(e.target.value)} - onBlur={(e) => setSecretKeyForRequest(e.target.value)} - /> - - - ); - default: - return null; - } - }; return (
-

{`Configure Prometheus Data Source`}

+

{`Configure Prometheus Data Source`}

 @@ -155,97 +96,112 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour - -

Data source details

- - - - <> - -

- This is the name the connection will be referenced by in OpenSearch Dashboards. It - is recommended to make this short yet descriptive to help users when selecting a - connection. -

- - { - setName(e.target.value); - }} + + +

Data source details

+ + + + <> + +

+ This is the name the connection will be referenced by in OpenSearch Dashboards. It + is recommended to make this short yet descriptive to help users when selecting a + connection. +

+ + { + setName(e.target.value); + }} + onBlur={(e) => { + setNameForRequest(e.target.value); + }} + /> + + + + { - setNameForRequest(e.target.value); + setDetailsForRequest(e.target.value); + }} + onChange={(e) => { + setDetails(e.target.value); }} /> - - - - { - setDetailsForRequest(e.target.value); - }} - onChange={(e) => { - setDetails(e.target.value); - }} - /> - - + + - -

Prometheus data location

- - + +

Prometheus data location

+ + - - <> - -

Provide the Prometheus URI endpoint to connect to.

- - + <> + +

Provide the Prometheus URI endpoint to connect to.

+ + { + setStore(e.target.value); + }} + onBlur={(e) => { + setStoreForRequest(e.target.value); + }} + /> + + + + + +

Authentication details

+ + + + + { - setStore(e.target.value); - }} - onBlur={(e) => { - setStoreForRequest(e.target.value); + setAuthMethodForRequest(e.target.value as AuthMethod); }} /> - - - + - -

Authentication details

- - - - - { - setSelectedAuthOption(e.target.value); - }} + - - + - - - + +
); diff --git a/public/components/datasources/components/new/configure_s3_datasource.tsx b/public/components/datasources/components/new/configure_s3_datasource.tsx index 1c827e619..212bda33c 100644 --- a/public/components/datasources/components/new/configure_s3_datasource.tsx +++ b/public/components/datasources/components/new/configure_s3_datasource.tsx @@ -15,9 +15,13 @@ import { EuiSelect, } from '@elastic/eui'; import React, { useState } from 'react'; -import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections'; -import { QueryPermissionsConfiguration } from '../manage/query_permissions'; +import { + AuthMethod, + OPENSEARCH_DOCUMENTATION_URL, +} from '../../../../../common/constants/data_connections'; +import { QueryPermissionsConfiguration } from './query_permissions'; import { Role } from '../../../../../common/types/data_connections'; +import { AuthDetails } from './auth_details'; interface ConfigureS3DatasourceProps { roles: Role[]; @@ -27,6 +31,12 @@ interface ConfigureS3DatasourceProps { currentDetails: string; currentArn: string; currentStore: string; + currentAuthMethod: AuthMethod; + currentUsername: string; + currentPassword: string; + setAuthMethodForRequest: React.Dispatch>; + setPasswordForRequest: React.Dispatch>; + setUsernameForRequest: React.Dispatch>; setStoreForRequest: React.Dispatch>; setNameForRequest: React.Dispatch>; setDetailsForRequest: React.Dispatch>; @@ -44,8 +54,14 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => { currentDetails, currentArn, roles, + currentAuthMethod, + setAuthMethodForRequest, selectedQueryPermissionRoles, setSelectedQueryPermissionRoles, + currentPassword, + currentUsername, + setPasswordForRequest, + setUsernameForRequest, } = props; const [name, setName] = useState(currentName); @@ -53,11 +69,9 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => { const [arn, setArn] = useState(currentArn); const [store, setStore] = useState(currentStore); const authOptions = [ - { value: 'option_one', text: 'No authentication' }, - { value: 'option_two', text: 'SIGV4' }, - { value: 'option_three', text: 'Basic Auth' }, + { value: 'basicauth', text: 'Basic authentication' }, + { value: 'noauth', text: 'No authentication' }, ]; - const [selectedAuthOption, setSelectedAuthOption] = useState(authOptions[0].value); return (
@@ -186,22 +200,20 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => { { - setSelectedAuthOption(e.target.value); + setAuthMethodForRequest(e.target.value as AuthMethod); }} /> - - - <> - -

The region where the index store is.

- - - - + diff --git a/public/components/datasources/components/new/new_datasource.tsx b/public/components/datasources/components/new/new_datasource.tsx index e82a49513..ec06984dd 100644 --- a/public/components/datasources/components/new/new_datasource.tsx +++ b/public/components/datasources/components/new/new_datasource.tsx @@ -4,7 +4,7 @@ */ import { EuiPage, EuiPageBody } from '@elastic/eui'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { DataConnectionsHeader } from '../data_connections_header'; import { HomeProps } from '../../home'; import { NewDatasourceCardView } from './new_datasource_card_view'; diff --git a/public/components/datasources/components/new/new_datasource_card_view.tsx b/public/components/datasources/components/new/new_datasource_card_view.tsx index e0eca6f5d..66bb3612c 100644 --- a/public/components/datasources/components/new/new_datasource_card_view.tsx +++ b/public/components/datasources/components/new/new_datasource_card_view.tsx @@ -3,17 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { - EuiPanel, - EuiCard, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiFieldSearch, - EuiButtonGroup, - EuiIcon, -} from '@elastic/eui'; -import React, { useState } from 'react'; +import { EuiPanel, EuiCard, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiIcon } from '@elastic/eui'; +import React from 'react'; import { NewDatasourceDescription } from './new_datasource_description'; import s3Svg from '../../icons/s3-logo.svg'; import prometheusSvg from '../../icons/prometheus-logo.svg'; @@ -28,8 +19,6 @@ export interface DatasourceCard { } export function NewDatasourceCardView() { - const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1'); - const Datasources: DatasourceCard[] = [ { name: 'S3GLUE', @@ -41,29 +30,12 @@ export function NewDatasourceCardView() { { name: 'PROMETHEUS', displayName: 'Prometheus', - description: 'Connect to Amazon managed Prometheus', + description: 'Connect to Prometheus', displayIcon: , onClick: () => (window.location.hash = `#/configure/PROMETHEUS`), }, ]; - const toggleButtonsIcons = [ - { - id: '0', - label: 'list', - iconType: 'list', - }, - { - id: '1', - label: 'grid', - iconType: 'grid', - }, - ]; - - const onChangeIcons = (optionId: string) => { - setToggleIconIdSelected(optionId); - }; - const renderRows = (datasources: DatasourceCard[]) => { return ( <> diff --git a/public/components/datasources/components/manage/query_permissions.tsx b/public/components/datasources/components/new/query_permissions.tsx similarity index 84% rename from public/components/datasources/components/manage/query_permissions.tsx rename to public/components/datasources/components/new/query_permissions.tsx index 92ae3ae95..d8537d68a 100644 --- a/public/components/datasources/components/manage/query_permissions.tsx +++ b/public/components/datasources/components/new/query_permissions.tsx @@ -61,12 +61,14 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro - Query Permissions - - Control which OpenSearch roles have query permissions on this data source.{' '} - - Learn more - + +

Query permissions

+ + +

+ Control which OpenSearch roles have permission to query and index data from this data + source +

@@ -76,7 +78,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro onChange={(id) => setSelectedAccessLevel(id)} name="query-radio-group" legend={{ - children: Access level, + children: Query access level, }} /> {selectedAccessLevel === QUERY_RESTRICTED && } diff --git a/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx b/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx index 3e8ccc9dd..4b2d3788e 100644 --- a/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx +++ b/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx @@ -13,8 +13,9 @@ import { EuiFlexItem, EuiButton, } from '@elastic/eui'; -import { Role } from 'common/types/data_connections'; import React from 'react'; +import { AuthMethod } from '../../../../../common/constants/data_connections'; +import { Role } from '../../../../../common/types/data_connections'; interface ConfigurePrometheusDatasourceProps { selectedQueryPermissionRoles: Role[]; @@ -23,6 +24,7 @@ interface ConfigurePrometheusDatasourceProps { currentArn: string; currentStore: string; currentUsername: string; + currentAuthMethod: AuthMethod; goBack: () => void; } @@ -31,7 +33,7 @@ export const ReviewPrometheusDatasource = (props: ConfigurePrometheusDatasourceP currentStore, currentName, currentDetails, - currentUsername, + currentAuthMethod, selectedQueryPermissionRoles, goBack, } = props; @@ -84,7 +86,9 @@ export const ReviewPrometheusDatasource = (props: ConfigurePrometheusDatasourceP Authentication method - {currentUsername ? 'Basic auth' : 'AWSSigV4'} + {currentAuthMethod === 'basicauth' + ? 'Basic authentication' + : 'AWS Signature Version 4'} diff --git a/public/components/datasources/components/new/review_s3_datasource_configuration.tsx b/public/components/datasources/components/new/review_s3_datasource_configuration.tsx index 2ae742b4f..419c66e01 100644 --- a/public/components/datasources/components/new/review_s3_datasource_configuration.tsx +++ b/public/components/datasources/components/new/review_s3_datasource_configuration.tsx @@ -13,8 +13,9 @@ import { EuiFlexItem, EuiButton, } from '@elastic/eui'; -import { Role } from 'common/types/data_connections'; import React from 'react'; +import { AuthMethod } from '../../../../../common/constants/data_connections'; +import { Role } from '../../../../../common/types/data_connections'; interface ConfigureS3DatasourceProps { selectedQueryPermissionRoles: Role[]; @@ -22,6 +23,7 @@ interface ConfigureS3DatasourceProps { currentDetails: string; currentArn: string; currentStore: string; + currentAuthMethod: AuthMethod; goBack: () => void; } @@ -32,6 +34,7 @@ export const ReviewS3Datasource = (props: ConfigureS3DatasourceProps) => { currentDetails, currentArn, selectedQueryPermissionRoles, + currentAuthMethod, goBack, } = props; @@ -100,6 +103,12 @@ export const ReviewS3Datasource = (props: ConfigureS3DatasourceProps) => { : 'Everyone'} + + Authentication method + + {currentAuthMethod === 'basicauth' ? 'Basic authentication' : 'No authentication'} + + diff --git a/public/components/datasources/home.tsx b/public/components/datasources/home.tsx index fef07a780..0bbfa93cd 100644 --- a/public/components/datasources/home.tsx +++ b/public/components/datasources/home.tsx @@ -5,7 +5,12 @@ import React from 'react'; import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom'; -import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public'; +import { + ChromeBreadcrumb, + ChromeStart, + HttpStart, + NotificationsStart, +} from '../../../../../src/core/public'; import { DataConnection } from './components/manage/data_connection'; import { ManageDataConnectionsTable } from './components/manage/manage_data_connections_table'; import { NewDatasource } from './components/new/new_datasource'; @@ -16,15 +21,17 @@ export interface HomeProps extends RouteComponentProps { parentBreadcrumb: ChromeBreadcrumb; http: HttpStart; chrome: ChromeStart; + notifications: NotificationsStart; } export const Home = (props: HomeProps) => { - const { http, chrome, pplService } = props; + const { http, chrome, pplService, notifications } = props; const commonProps = { http, chrome, pplService, + notifications, }; return ( diff --git a/test/datasources.ts b/test/datasources.ts index 1bdf6e25b..6258101fc 100644 --- a/test/datasources.ts +++ b/test/datasources.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { DatasourceType } from '../common/types/data_connections'; + export const showDataConnectionsData = { schema: [ { @@ -41,18 +43,43 @@ export const showDataConnectionsData = { ], }; -export const describeDataConnection = { - name: 'my_spark3', - connector: 'SPARK', +export const describePrometheusDataConnection = { + name: 'prom', + description: '', + connector: 'PROMETHEUS', + allowedRoles: [], + properties: { + 'prometheus.uri': 'localhost:9201', + }, +}; + +export const testS3ConnectionDetails = { + dataConnection: 'ya', + description: '', + connector: 'S3GLUE' as DatasourceType, + properties: { + 'glue.indexstore.opensearch.uri': 'y', + 'glue.indexstore.opensearch.region': 'us-west-2', + }, +}; + +export const testPrometheusConnectionDetails = { + dataConnection: 'prom', + description: '', + connector: 'PROMETHEUS' as DatasourceType, + properties: { + 'prometheus.uri': 'localhost:9201', + }, +}; + +export const describeS3Dataconnection = { + name: 'ya', + description: '', + connector: 'S3GLUE', 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', + 'glue.indexstore.opensearch.uri': 'y', + 'glue.indexstore.opensearch.region': 'us-west-2', }, };