Skip to content

Commit

Permalink
Reverting notebooks changes, add docs/validation to datasources, expl…
Browse files Browse the repository at this point in the history
…orer minor fixes (opensearch-project#1101) (opensearch-project#1102)

* Add documentation linking and validation for query permissions



* Update test with link



* Add form validation for name field



* reverting notebook changes from opensearch-project#974 & opensearch-project#985



* Remove console log



* surrounding events functionally working



* small surrounding flyout ui changes



---------






(cherry picked from commit 4a8b500)

Signed-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Paul Sebastian <paulstn@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
Co-authored-by: Paul Sebastian <paulstn@amazon.com>
  • Loading branch information
4 people authored Oct 9, 2023
1 parent c9d5367 commit 2d4afc3
Show file tree
Hide file tree
Showing 22 changed files with 913 additions and 201 deletions.
3 changes: 2 additions & 1 deletion common/constants/data_connections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@

import { DatasourceType } from '../../common/types/data_connections';

export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/data-sources/index';
export const OPENSEARCH_DOCUMENTATION_URL =
'https://opensearch.org/docs/latest/dashboards/management/data-sources/';

export const OPENSEARCH_ACC_DOCUMENTATION_URL =
'https://opensearch.org/docs/latest/data-acceleration/index';
Expand Down
1 change: 1 addition & 0 deletions common/types/data_connections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface PermissionsConfigurationProps {
selectedRoles: Role[];
setSelectedRoles: React.Dispatch<React.SetStateAction<Role[]>>;
layout: 'horizontal' | 'vertical';
hasSecurityAccess: boolean;
}

export type Role = EuiComboBoxOptionOption;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
<a
class="euiLink euiLink--primary"
href="https://opensearch.org/docs/latest/data-sources/index"
href="https://opensearch.org/docs/latest/dashboards/management/data-sources/"
rel="noreferrer"
target="blank"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export function Configure(props: ConfigureDatasourceProps) {
const { type, notifications } = props;
const { http, chrome } = coreRefs;
const { setToast } = useToast();
const [error, setError] = useState<string>('');
const [authMethod, setAuthMethod] = useState<AuthMethod>('basicauth');
const [name, setName] = useState('');
const [details, setDetails] = useState('');
Expand All @@ -51,6 +52,7 @@ export function Configure(props: ConfigureDatasourceProps) {
const [secretKey, setSecretKey] = useState('');
const [region, setRegion] = useState('');
const [roles, setRoles] = useState<Role[]>([]);
const [hasSecurityAccess, setHasSecurityAccess] = useState(true);
const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>([]);
const [page, setPage] = useState<'configure' | 'review'>('configure');
const ConfigureDatasourceSteps = [
Expand All @@ -64,13 +66,16 @@ export function Configure(props: ConfigureDatasourceProps) {
];

useEffect(() => {
http!.get('/api/v1/configuration/roles').then((data) =>
setRoles(
Object.keys(data.data).map((key) => {
return { label: key };
})
http!
.get('/api/v1/configuration/roles')
.then((data) =>
setRoles(
Object.keys(data.data).map((key) => {
return { label: key };
})
)
)
);
.catch((err) => setHasSecurityAccess(false));
chrome!.setBreadcrumbs([
{
text: 'Data sources',
Expand Down Expand Up @@ -110,6 +115,9 @@ export function Configure(props: ConfigureDatasourceProps) {
setPasswordForRequest={setPassword}
currentAuthMethod={authMethod}
setAuthMethodForRequest={setAuthMethod}
hasSecurityAccess={hasSecurityAccess}
error={error}
setError={setError}
/>
);
case 'PROMETHEUS':
Expand All @@ -136,6 +144,9 @@ export function Configure(props: ConfigureDatasourceProps) {
setRegionForRequest={setRegion}
currentAuthMethod={authMethod}
setAuthMethodForRequest={setAuthMethod}
hasSecurityAccess={hasSecurityAccess}
error={error}
setError={setError}
/>
);
default:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
import { QueryPermissionsConfiguration } from './query_permissions';
import { Role } from '../../../../../common/types/data_connections';
import { AuthDetails } from './auth_details';
import { NameRow } from './name_row';

interface ConfigurePrometheusDatasourceProps {
roles: Role[];
Expand All @@ -38,6 +39,9 @@ interface ConfigurePrometheusDatasourceProps {
currentSecretKey: string;
currentRegion: string;
currentAuthMethod: AuthMethod;
hasSecurityAccess: boolean;
error: string;
setError: React.Dispatch<React.SetStateAction<string>>;
setAuthMethodForRequest: React.Dispatch<React.SetStateAction<AuthMethod>>;
setRegionForRequest: React.Dispatch<React.SetStateAction<string>>;
setAccessKeyForRequest: React.Dispatch<React.SetStateAction<string>>;
Expand Down Expand Up @@ -72,9 +76,11 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
setRegionForRequest,
currentAuthMethod,
setAuthMethodForRequest,
hasSecurityAccess,
error,
setError,
} = props;

const [name, setName] = useState(currentName);
const [details, setDetails] = useState(currentDetails);
const [store, setStore] = useState(currentStore);
const authOptions = [
Expand All @@ -101,27 +107,12 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
<h3>Data source details</h3>
</EuiText>
<EuiSpacer />
<EuiFormRow label="Data source name">
<>
<EuiText size="xs">
<p>
Connection name that OpenSearch Dashboards references. This name should be
descriptive and concise.
</p>
</EuiText>
<EuiFieldText
data-test-subj="name"
placeholder="Title"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
onBlur={(e) => {
setNameForRequest(e.target.value);
}}
/>
</>
</EuiFormRow>
<NameRow
currentName={currentName}
setNameForRequest={setNameForRequest}
currentError={error}
setErrorForForm={setError}
/>
<EuiFormRow label="Description - Optional">
<EuiTextArea
data-test-subj="data-source-description"
Expand Down Expand Up @@ -199,6 +190,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
selectedRoles={selectedQueryPermissionRoles}
setSelectedRoles={setSelectedQueryPermissionRoles}
layout={'vertical'}
hasSecurityAccess={hasSecurityAccess}
/>
</EuiForm>
</EuiPanel>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
import { QueryPermissionsConfiguration } from './query_permissions';
import { Role } from '../../../../../common/types/data_connections';
import { AuthDetails } from './auth_details';
import { NameRow } from './name_row';

interface ConfigureS3DatasourceProps {
roles: Role[];
Expand All @@ -34,6 +35,9 @@ interface ConfigureS3DatasourceProps {
currentAuthMethod: AuthMethod;
currentUsername: string;
currentPassword: string;
hasSecurityAccess: boolean;
error: string;
setError: React.Dispatch<React.SetStateAction<string>>;
setAuthMethodForRequest: React.Dispatch<React.SetStateAction<AuthMethod>>;
setPasswordForRequest: React.Dispatch<React.SetStateAction<string>>;
setUsernameForRequest: React.Dispatch<React.SetStateAction<string>>;
Expand Down Expand Up @@ -62,9 +66,11 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
currentUsername,
setPasswordForRequest,
setUsernameForRequest,
hasSecurityAccess,
error,
setError,
} = props;

const [name, setName] = useState(currentName);
const [details, setDetails] = useState(currentDetails);
const [arn, setArn] = useState(currentArn);
const [store, setStore] = useState(currentStore);
Expand All @@ -91,27 +97,13 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
<h3>Data source details</h3>
</EuiText>
<EuiSpacer />
<EuiFormRow label="Data source name">
<>
<EuiText size="xs">
<p>
Connection name that OpenSearch Dashboards references. This name should be
descriptive and concise.
</p>
</EuiText>
<EuiFieldText
data-test-subj="data-source-name"
placeholder="Title"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
onBlur={(e) => {
setNameForRequest(e.target.value);
}}
/>
</>
</EuiFormRow>
<NameRow
key={error}
currentName={currentName}
setNameForRequest={setNameForRequest}
currentError={error}
setErrorForForm={setError}
/>
<EuiFormRow label="Description - Optional">
<EuiTextArea
placeholder="Describe data source"
Expand Down Expand Up @@ -221,6 +213,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
selectedRoles={selectedQueryPermissionRoles}
setSelectedRoles={setSelectedQueryPermissionRoles}
layout={'vertical'}
hasSecurityAccess={hasSecurityAccess}
/>
</EuiPanel>
</div>
Expand Down
68 changes: 68 additions & 0 deletions public/components/datasources/components/new/name_row.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiText, EuiFormRow, EuiFieldText } from '@elastic/eui';
import React, { useEffect, useState } from 'react';
import { coreRefs } from '../../../../../public/framework/core_refs';

interface ConfigureNameProps {
currentName: string;
currentError: string;
setErrorForForm: React.Dispatch<React.SetStateAction<string>>;
setNameForRequest: React.Dispatch<React.SetStateAction<string>>;
}

export const NameRow = (props: ConfigureNameProps) => {
const { setNameForRequest, currentName, currentError, setErrorForForm } = props;
const { pplService } = coreRefs;

const [name, setName] = useState<string>(currentName);
const [existingNames, setExistingNames] = useState<string[]>([]);

useEffect(() => {
pplService!.fetch({ query: 'show datasources', format: 'jdbc' }).then((dataconnections) =>
setExistingNames(
dataconnections.jsonData.map((x) => {
return x.DATASOURCE_NAME;
})
)
);
}, []);

const onBlur = (e) => {
if (e.target.value === '') {
setErrorForForm('Name is a required parameter.');
} else if (existingNames.includes(e.target.value)) {
setErrorForForm('Name must be unique across data sources.');
} else {
setErrorForForm('');
}

setNameForRequest(e.target.value);
};

return (
<EuiFormRow label="Data source name" isInvalid={currentError.length !== 0} error={currentError}>
<>
<EuiText size="xs">
<p>
Connection name that OpenSearch Dashboards references. This name should be descriptive
and concise.
</p>
</EuiText>
<EuiFieldText
data-test-subj="name"
placeholder="Title"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
onBlur={onBlur}
isInvalid={currentError.length !== 0}
/>
</>
</EuiFormRow>
);
};
37 changes: 22 additions & 15 deletions public/components/datasources/components/new/query_permissions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,17 @@ import {
EuiComboBox,
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiFormRow,
EuiRadioGroup,
EuiSpacer,
EuiText,
} from '@elastic/eui';
import React, { useState } from 'react';
import {
OPENSEARCH_DOCUMENTATION_URL,
QUERY_ALL,
QUERY_RESTRICTED,
} from '../../../../../common/constants/data_connections';
import { QUERY_ALL, QUERY_RESTRICTED } from '../../../../../common/constants/data_connections';
import { PermissionsConfigurationProps } from '../../../../../common/types/data_connections';

export const QueryPermissionsConfiguration = (props: PermissionsConfigurationProps) => {
const { roles, selectedRoles, setSelectedRoles, layout } = props;
const { roles, selectedRoles, setSelectedRoles, layout, hasSecurityAccess } = props;

const [selectedAccessLevel, setSelectedAccessLevel] = useState(
selectedRoles.length ? QUERY_RESTRICTED : QUERY_ALL
Expand All @@ -30,6 +26,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
{
id: QUERY_RESTRICTED,
label: 'Restricted - accessible by users with specific OpenSearch roles',
disabled: !hasSecurityAccess,
},
{
id: QUERY_ALL,
Expand All @@ -45,14 +42,24 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
<EuiText size="xs">
Select one or more OpenSearch roles that can query this data connection.
</EuiText>
<EuiComboBox
placeholder="Select one or more options"
options={roles}
selectedOptions={selectedRoles}
onChange={setSelectedRoles}
isClearable={true}
data-test-subj="query-permissions-combo-box"
/>
<EuiFormRow
isInvalid={selectedRoles.length === 0}
error={
selectedRoles.length === 0
? 'Select an OpenSearch role or roles that will have query access to this data source'
: undefined
}
>
<EuiComboBox
placeholder="Select one or more options"
options={roles}
selectedOptions={selectedRoles}
onChange={setSelectedRoles}
isClearable={true}
data-test-subj="query-permissions-combo-box"
isInvalid={selectedRoles.length === 0}
/>
</EuiFormRow>
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,12 @@ export function DataGrid(props: DataGridProps) {
pplService={pplService}
rawQuery={rawQuery}
onFlyoutOpen={() => {}}
dataGridColumns={dataGridColumns}
dataGridColumnVisibility={dataGridColumnVisibility}
selectedIndex={rowIndex}
sortingFields={sortingFields}
rowHeightsOptions={rowHeightsOptions}
rows={rows}
/>
);
},
Expand Down
Loading

0 comments on commit 2d4afc3

Please sign in to comment.