opensearch-project · ps48 · Oct 9, 2023 · Oct 9, 2023
@@ -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';

@@ -10,6 +10,7 @@ export interface PermissionsConfigurationProps {
   selectedRoles: Role[];
   setSelectedRoles: React.Dispatch<React.SetStateAction<Role[]>>;
   layout: 'horizontal' | 'vertical';
+  hasSecurityAccess: boolean;
 }
 
 export type Role = EuiComboBoxOptionOption;

@@ -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"
             >

@@ -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('');
@@ -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 = [
@@ -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',
@@ -110,6 +115,9 @@ export function Configure(props: ConfigureDatasourceProps) {
             setPasswordForRequest={setPassword}
             currentAuthMethod={authMethod}
             setAuthMethodForRequest={setAuthMethod}
+            hasSecurityAccess={hasSecurityAccess}
+            error={error}
+            setError={setError}
           />
         );
       case 'PROMETHEUS':
@@ -136,6 +144,9 @@ export function Configure(props: ConfigureDatasourceProps) {
             setRegionForRequest={setRegion}
             currentAuthMethod={authMethod}
             setAuthMethodForRequest={setAuthMethod}
+            hasSecurityAccess={hasSecurityAccess}
+            error={error}
+            setError={setError}
           />
         );
       default:

@@ -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[];
@@ -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>>;
@@ -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 = [
@@ -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"
@@ -199,6 +190,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
             selectedRoles={selectedQueryPermissionRoles}
             setSelectedRoles={setSelectedQueryPermissionRoles}
             layout={'vertical'}
+            hasSecurityAccess={hasSecurityAccess}
           />
         </EuiForm>
       </EuiPanel>

@@ -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[];
@@ -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>>;
@@ -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);
@@ -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"
@@ -221,6 +213,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
           selectedRoles={selectedQueryPermissionRoles}
           setSelectedRoles={setSelectedQueryPermissionRoles}
           layout={'vertical'}
+          hasSecurityAccess={hasSecurityAccess}
         />
       </EuiPanel>
     </div>

@@ -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>
+  );
+};
@@ -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
@@ -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,
@@ -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>
     );
   };

@@ -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}
             />
           );
         },