Skip to content

Commit

Permalink
addressed PR comments
Browse files Browse the repository at this point in the history 
Signed-off-by: Amardeepsingh Siglani <[email protected]>
  • Loading branch information
@amsiglan
amsiglan committed May 30, 2024
1 parent d4f1b8d commit 8da9744
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 141 deletions.
24 changes: 15 additions & 9 deletions ...components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ interface DataSourceSelectorProps {
dataSourcesPreselected: boolean;
tableFieldsLoading: boolean;
dataSourceMDSId?: string;
hideHeader?: boolean;
}

export const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
Expand All @@ -63,6 +64,7 @@ export const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
dataSourcesPreselected,
tableFieldsLoading,
dataSourceMDSId,
hideHeader,
}) => {
const { setToast } = useToast();
const [databases, setDatabases] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
Expand Down Expand Up @@ -170,15 +172,19 @@ export const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({

return (
<>
<EuiText data-test-subj="datasource-selector-header">
<h3>Select data source</h3>
</EuiText>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
Select the data source to accelerate data from. External data sources may take time to load.
</EuiText>
<EuiSpacer size="m" />

{!hideHeader && (
<>
<EuiText data-test-subj="datasource-selector-header">
<h3>Select data source</h3>
</EuiText>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
Select the data source to accelerate data from. External data sources may take time to
load.
</EuiText>
<EuiSpacer size="m" />
</>
)}
{dataSourcesPreselected ? (
<>
<EuiFlexGroup>
Expand Down
4 changes: 1 addition & 3 deletions public/components/datasources/components/manage/data_connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,7 @@ export const DataConnection = (props: { dataSource: string }) => {
}, [datasourceDetails]);

useEffect(() => {
const searchDataSourcePattern = new RegExp(
`flint_${escapeRegExp(datasourceDetails.name)}_default_.*`
);
const searchDataSourcePattern = new RegExp(`flint_${escapeRegExp(datasourceDetails.name)}_.*`);
const findIntegrations = async () => {
// TODO: we just get all results and filter, ideally we send a filtering query to the API
// Should still be probably okay until we get cases of 500+ integration instances
Expand Down
94 changes: 42 additions & 52 deletions public/components/integrations/components/setup_integration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { coreRefs } from '../../../framework/core_refs';
import { addIntegrationRequest } from './create_integration_helpers';
import { SetupIntegrationFormInputs } from './setup_integration_inputs';
import { CONSOLE_PROXY, INTEGRATIONS_BASE } from '../../../../common/constants/shared';
import { SetupIntegrationInputsForSecurityLake } from './setup_integration_inputs_security_lake';

export interface IntegrationSetupInputs {
displayName: string;
Expand All @@ -42,7 +43,6 @@ export interface IntegrationConfigProps {
integration: IntegrationConfig;
setupCallout: SetupCallout;
lockConnectionType?: boolean;
isS3ConnectionWithLakeFormation?: boolean;
}

type SetupCallout = { show: true; title: string; color?: Color; text?: string } | { show: false };
Expand Down Expand Up @@ -190,7 +190,9 @@ const addIntegration = async ({
integration,
setToast: setCalloutLikeToast,
name: config.displayName,
indexPattern: `flint_${config.connectionDataSource}_default_${config.connectionTableName}__*`,
indexPattern: `flint_${config.connectionDataSource}_${
config.connectionDatabaseName ?? 'default'
}_${config.connectionTableName}__*`,
workflows: config.enabledWorkflows,
skipRedirect: setIsInstalling ? true : false,
dataSourceInfo: { dataSource: config.connectionDataSource, tableName: makeTableName(config) },
Expand Down Expand Up @@ -374,69 +376,57 @@ export function SetupIntegrationForm({
const updateConfig = (updates: Partial<IntegrationSetupInputs>) =>
setConfig(Object.assign({}, integConfig, updates));

const IntegrationInputFormComponent = forceConnection?.properties?.lakeFormationEnabled
? SetupIntegrationInputsForSecurityLake
: SetupIntegrationFormInputs;

const content = (
<>
{showLoading ? (
<LoadingPage />
) : (
<IntegrationInputFormComponent
config={integConfig}
updateConfig={updateConfig}
integration={template}
setupCallout={setupCallout}
lockConnectionType={forceConnection !== undefined}
/>
)}
</>
);

const bottomBar = (
<SetupBottomBar
config={integConfig}
integration={template}
loading={showLoading}
setLoading={setShowLoading}
setSetupCallout={setSetupCallout}
unsetIntegration={unsetIntegration}
setIsInstalling={setIsInstalling}
/>
);

if (renderType === 'page') {
return (
<>
<EuiPageContent>
<EuiPageContentBody>
{showLoading ? (
<LoadingPage />
) : (
<SetupIntegrationFormInputs
config={integConfig}
updateConfig={updateConfig}
integration={template}
setupCallout={setupCallout}
lockConnectionType={forceConnection !== undefined}
isS3ConnectionWithLakeFormation={forceConnection?.properties?.lakeFormationEnabled}
/>
)}
</EuiPageContentBody>
<EuiPageContentBody>{content}</EuiPageContentBody>
</EuiPageContent>
<EuiBottomBar>
<SetupBottomBar
config={integConfig}
integration={template}
loading={showLoading}
setLoading={setShowLoading}
setSetupCallout={setSetupCallout}
unsetIntegration={unsetIntegration}
setIsInstalling={setIsInstalling}
/>
</EuiBottomBar>
<EuiBottomBar>{bottomBar}</EuiBottomBar>
</>
);
} else if (renderType === 'flyout') {
return (
<>
<EuiFlyoutBody>
{showLoading ? (
<LoadingPage />
) : (
<SetupIntegrationFormInputs
config={integConfig}
updateConfig={updateConfig}
integration={template}
setupCallout={setupCallout}
lockConnectionType={forceConnection !== undefined}
isS3ConnectionWithLakeFormation={forceConnection?.properties?.lakeFormationEnabled}
/>
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<SetupBottomBar
config={integConfig}
integration={template}
loading={showLoading}
setLoading={setShowLoading}
setSetupCallout={setSetupCallout}
unsetIntegration={unsetIntegration}
setIsInstalling={setIsInstalling}
/>
</EuiFlyoutFooter>
<EuiFlyoutBody>{content}</EuiFlyoutBody>
<EuiFlyoutFooter>{bottomBar}</EuiFlyoutFooter>
</>
);
}

return null;
}

export function SetupIntegrationPage({
Expand Down
129 changes: 55 additions & 74 deletions public/components/integrations/components/setup_integration_inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import React, { useState, useEffect } from 'react';
import { coreRefs } from '../../../framework/core_refs';
import { CONSOLE_PROXY, DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
import { IntegrationConfigProps, IntegrationSetupInputs } from './setup_integration';
import { SetupIntegrationInputsForSecurityLake } from './setup_integration_inputs_security_lake';

// TODO support localization
const INTEGRATION_CONNECTION_DATA_SOURCE_TYPES: Map<
Expand Down Expand Up @@ -129,23 +128,21 @@ export function SetupWorkflowSelector({
);
});

return cards;
return <>{cards}</>;
}

export function IntegrationDetailsInputs({
config,
updateConfig,
integration,
isS3ConnectionWithLakeFormation,
}: {
config: IntegrationSetupInputs;
updateConfig: (updates: Partial<IntegrationSetupInputs>) => void;
integration: IntegrationConfig;
isS3ConnectionWithLakeFormation?: boolean;
}) {
return (
<EuiFormRow
label={isS3ConnectionWithLakeFormation ? 'Integration display name' : 'Display Name'}
label={'Integration display Name'}
error={['Must be at least 1 character.']}
isInvalid={config.displayName.length === 0}
>
Expand Down Expand Up @@ -294,7 +291,7 @@ export function IntegrationQueryInputs({
</>
)}
<EuiFormRow
label={`S3 Checkpoint ${isS3ConnectionWithLakeFormation ? '' : 'Location'}`}
label={`S3 Checkpoint Location`}
helpText={
isS3ConnectionWithLakeFormation
? 'The checkpoint location for caching intermediary results.'
Expand Down Expand Up @@ -363,100 +360,84 @@ export function IntegrationWorkflowsInputs({
}

export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
const {
config,
updateConfig,
integration,
setupCallout,
lockConnectionType,
isS3ConnectionWithLakeFormation,
} = props;
const { config, updateConfig, integration, setupCallout, lockConnectionType } = props;

return (
<EuiForm>
{isS3ConnectionWithLakeFormation ? (
<SetupIntegrationInputsForSecurityLake {...props} />
) : (
<EuiTitle>
<h1>Set Up Integration</h1>
</EuiTitle>
<EuiSpacer />
{setupCallout.show ? (
<EuiCallOut title={setupCallout.title} color="danger">
<p>{setupCallout.text}</p>
</EuiCallOut>
) : null}
<EuiSpacer />
<EuiText>
<h3>Integration Details</h3>
</EuiText>
<EuiSpacer />
<IntegrationDetailsInputs
config={config}
updateConfig={updateConfig}
integration={integration}
/>
<EuiSpacer />
<EuiText>
<h3>Integration Connection</h3>
</EuiText>
<EuiSpacer />
<IntegrationConnectionInputs
config={config}
updateConfig={updateConfig}
integration={integration}
lockConnectionType={lockConnectionType}
/>
{config.connectionType === 's3' ? (
<>
<EuiTitle>
<h1>Set Up Integration</h1>
</EuiTitle>
<EuiSpacer />
{setupCallout.show ? (
<EuiCallOut title={setupCallout.title} color="danger">
<p>{setupCallout.text}</p>
</EuiCallOut>
) : null}
<EuiSpacer />
<EuiText>
<h3>Integration Details</h3>
</EuiText>
<EuiSpacer />
<IntegrationDetailsInputs
config={config}
updateConfig={updateConfig}
integration={integration}
/>
<EuiSpacer />
<EuiText>
<h3>Integration Connection</h3>
<h3>Query Fields</h3>
</EuiText>
<EuiFormRow>
<EuiText grow={false} size="xs">
<p>
To set up the integration, we need to know some information about how to process
your data.
</p>
</EuiText>
</EuiFormRow>
<EuiSpacer />
<IntegrationConnectionInputs
<IntegrationQueryInputs
config={config}
updateConfig={updateConfig}
integration={integration}
lockConnectionType={lockConnectionType}
/>
{config.connectionType === 's3' ? (
{integration.workflows ? (
<>
<EuiSpacer />
<EuiText>
<h3>Query Fields</h3>
<h3>Integration Resources</h3>
</EuiText>
<EuiFormRow>
<EuiText grow={false} size="xs">
<p>
To set up the integration, we need to know some information about how to process
your data.
This integration offers different kinds of resources compatible with your data
source. These can include dashboards, visualizations, indexes, and queries.
Select at least one of the following options.
</p>
</EuiText>
</EuiFormRow>
<EuiSpacer />
<IntegrationQueryInputs
config={config}
updateConfig={updateConfig}
integration={integration}
/>
{integration.workflows ? (
<>
<EuiSpacer />
<EuiText>
<h3>Integration Resources</h3>
</EuiText>
<EuiFormRow>
<EuiText grow={false} size="xs">
<p>
This integration offers different kinds of resources compatible with your
data source. These can include dashboards, visualizations, indexes, and
queries. Select at least one of the following options.
</p>
</EuiText>
</EuiFormRow>
<EuiSpacer />
<IntegrationWorkflowsInputs
updateConfig={updateConfig}
integration={integration}
/>
</>
) : null}
{/* Bottom bar will overlap content if there isn't some space at the end */}
<EuiSpacer />
<EuiSpacer />
<IntegrationWorkflowsInputs updateConfig={updateConfig} integration={integration} />
</>
) : null}
{/* Bottom bar will overlap content if there isn't some space at the end */}
<EuiSpacer />
<EuiSpacer />
</>
)}
) : null}
</EuiForm>
);
}
Loading

0 comments on commit 8da9744

Please sign in to comment.