@datalayer/core
Version:
[](https://datalayer.io)
119 lines (118 loc) • 9.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useEffect, useState } from 'react';
import { PageHeader, FormControl, Button, TextInput, Text, Textarea, Select, Flash, Link, } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCache, useNavigate, useToast } from '../../hooks';
import { useRunStore } from '../../state';
export const DatasourceNew = () => {
const runStore = useRunStore();
const { useCreateDatasource } = useCache();
const createDatasourceMutation = useCreateDatasource();
const navigate = useNavigate();
const { enqueueToast } = useToast();
const [formValues, setFormValues] = useState({
variant: 'athena',
database: undefined,
outputBucket: undefined,
name: undefined,
description: undefined,
});
const [validationResult, setValidationResult] = useState({
variant: undefined,
database: undefined,
outputBucket: undefined,
name: undefined,
description: undefined,
});
const valueVariantChange = (event) => {
setFormValues(prevFormValues => ({
...prevFormValues,
variant: event.target.value,
}));
};
const valueDatabaseChange = (event) => {
setFormValues(prevFormValues => ({
...prevFormValues,
database: event.target.value,
}));
};
const valueOutputBucketChange = (event) => {
setFormValues(prevFormValues => ({
...prevFormValues,
outputBucket: event.target.value,
}));
};
const valueNameChange = (event) => {
setFormValues(prevFormValues => ({
...prevFormValues,
name: event.target.value,
}));
};
const valueDescriptionChange = (event) => {
setFormValues(prevFormValues => ({
...prevFormValues,
description: event.target.value,
}));
};
useEffect(() => {
setValidationResult({
...validationResult,
name: formValues.name === undefined
? undefined
: formValues.name.length > 2
? true
: false,
description: formValues.description === undefined
? undefined
: formValues.description.length > 2
? true
: false,
database: formValues.variant !== 'athena'
? true
: formValues.database === undefined
? undefined
: formValues.database.length > 0
? true
: false,
outputBucket: formValues.variant !== 'athena'
? true
: formValues.outputBucket === undefined
? undefined
: formValues.outputBucket.length > 0
? true
: false,
});
}, [formValues]);
const submitCreate = () => {
runStore.layout().showBackdrop('Creating an datasource...');
createDatasourceMutation.mutate({
name: formValues.name,
variant: formValues.variant,
database: formValues.database ?? '',
outputBucket: formValues.outputBucket ?? '',
description: formValues.description,
}, {
onSuccess: (resp) => {
if (resp.success) {
enqueueToast(resp.message, { variant: 'success' });
navigate(`/settings/integrations/datasources`);
}
},
onSettled: () => {
runStore.layout().hideBackdrop();
},
});
};
return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secrets" }), ' ', "are available:", ' ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), ' ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), ' ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", ' ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", ' ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", ' ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
!validationResult.outputBucket ||
!validationResult.name ||
!validationResult.description, sx: { marginTop: 2 }, onClick: e => {
e.preventDefault();
submitCreate();
}, children: "Create a datasource" })] }) }) })] }));
};
export default DatasourceNew;