Skip to content

Commit

Permalink
form figma updates
Browse files Browse the repository at this point in the history
Signed-off-by: Shenoy Pratik <[email protected]>
  • Loading branch information
ps48 committed Sep 28, 2023
1 parent e92569b commit 3b24634
Show file tree
Hide file tree
Showing 15 changed files with 696 additions and 142 deletions.
9 changes: 9 additions & 0 deletions common/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
export const PLUGIN_ID = 'queryWorkbenchDashboards';
export const PLUGIN_NAME = 'Query Workbench';
export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';

export const ACCELERATION_INDEX_TYPES = [
{ label: 'Skipping Index', value: 'skipping' },
Expand All @@ -20,3 +21,11 @@ export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
{ label: 'max', value: 'max' },
{ label: 'min', value: 'min' },
];

export const ACCELERATION_TIME_INTERVAL = [
{ text: 'millisecond(s)', value: 'millisecond' },
{ text: 'second(s)', value: 'second' },
{ text: 'hour(s)', value: 'hour' },
{ text: 'day(s)', value: 'day' },
{ text: 'week(s)', value: 'week' },
];
13 changes: 10 additions & 3 deletions common/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,26 @@ export interface DataTableFieldsType {
dataType: string;
}

export interface RefreshIntervalType {
refreshWindow: number;
refreshInterval: string;
}

export type AccelerationIndexType = 'skipping' | 'covering' | 'materialized';

export interface CreateAccelerationForm {
dataSource: string;
database: string;
dataTable: string;
dataTableFields: DataTableFieldsType[];
accelerationIndexType: 'skipping' | 'covering' | 'materialized';
accelerationIndexType: AccelerationIndexType;
queryBuilderType: 'visual' | 'code';
skippingIndexQueryData: SkippingIndexRowType[];
coveringIndexQueryData: string;
materializedViewQueryData: string;
accelerationIndexName: string;
accelerationIndexAlias: string;
primaryShardsCount: number;
replicaShardsCount: number;
refreshType: 'interval' | 'auto';
refreshIntervalSeconds: string | undefined;
refreshIntervalOptions: RefreshIntervalType | undefined;
}
2 changes: 1 addition & 1 deletion public/components/SQLPage/SQLPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
if (this.state.isFlyoutVisible) {
flyout = (
<CreateAcceleration
dataSource="ds"
dataSource={'spark1'} // TODO: Hardcoded for now, will be removed
setIsFlyoutVisible={this.setIsFlyoutVisible}
updateQueries={this.props.updateSQLQueries}
/>
Expand Down
15 changes: 11 additions & 4 deletions public/components/acceleration/create/create_acceleration.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ import React, { useState } from 'react';
import { CreateAccelerationHeader } from './create_acceleration_header';
import { CautionBannerCallout } from './caution_banner_callout';
import { AccelerationDataSourceSelector } from '../selectors/source_selector';
import { IndexTypeSelector } from '../selectors/index_type_selector';
import { CreateAccelerationForm } from '../../../../common/types/';
import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
import { accelerationQueryBuilder } from '../visual_editors/query_builder';
import { IndexSettingOptions } from '../selectors/index_setting_options';
import { DefineIndexOptions } from '../selectors/define_index_options';

export interface CreateAccelerationProps {
dataSource: string;
Expand All @@ -37,18 +38,18 @@ export const CreateAcceleration = ({
const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
dataSource: '',
dataTable: '',
database: '',
dataTableFields: [],
accelerationIndexType: 'skipping',
queryBuilderType: 'visual',
skippingIndexQueryData: [],
coveringIndexQueryData: '',
materializedViewQueryData: '',
accelerationIndexName: '',
accelerationIndexAlias: '',
primaryShardsCount: 5,
replicaShardsCount: 1,
refreshType: 'auto',
refreshIntervalSeconds: undefined,
refreshIntervalOptions: undefined,
});

const copyToEditor = () => {
Expand All @@ -73,7 +74,13 @@ export const CreateAcceleration = ({
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
/>
<IndexTypeSelector
<EuiSpacer size="xxl" />
<IndexSettingOptions
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
/>
<EuiSpacer size="xxl" />
<DefineIndexOptions
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const CreateAccelerationHeader = () => {
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l" data-test-subj="acceleration-header">
<h1>Create Acceleration Index</h1>
<h1>Accelerate data</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
Expand Down
30 changes: 30 additions & 0 deletions public/components/acceleration/create/utils.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export const isTimePlural = (timeWindow: number) => {
return timeWindow > 1 ? 's' : '';
};

export const validateIndexName = (value: string) => {
const lowercaseUnderscoreHyphenRegex = /^[a-z_\-]+$/;

if (!lowercaseUnderscoreHyphenRegex.test(value)) {
return false;
}

// Check if the value does not begin with underscores or hyphens
if (value.startsWith('_') || value.startsWith('-')) {
return false;
}

// Check if the value does not contain disallowed characters
const disallowedCharacters = /[\s,:"*+\/|?#><]/;
if (disallowedCharacters.test(value)) {
return false;
}

// If all checks pass, the value is valid
return true;
};
66 changes: 66 additions & 0 deletions public/components/acceleration/selectors/define_index_options.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React, { ChangeEvent, useEffect, useState } from 'react';
import { CreateAccelerationForm } from '../../../../common/types';
import { EuiFieldText, EuiFormRow, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
import { validateIndexName } from '../create/utils';

interface DefineIndexOptionsProps {
accelerationFormData: CreateAccelerationForm;
setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
}

export const DefineIndexOptions = ({
accelerationFormData,
setAccelerationFormData,
}: DefineIndexOptionsProps) => {
const [indexName, setIndexName] = useState('');

const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
setIndexName(e.target.value);
};

useEffect(() => {
accelerationFormData.accelerationIndexType === 'skipping'
? setIndexName('skipping')
: setIndexName('');
}, [accelerationFormData.accelerationIndexType]);

return (
<>
<EuiText data-test-subj="define-index-header">
<h3>Index settings</h3>
</EuiText>
<EuiSpacer size="s" />
<EuiFormRow
label="Index name"
helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed.
Prefix and suffix are added to the name of generated OpenSearch index.'
>
<EuiToolTip
position="right"
content={
accelerationFormData.accelerationIndexType === 'skipping'
? 'Skipping Index name follows a pre-defined in the format `flint_datasource_datatable_skipping_index` and cannot be changed.'
: 'Generated OpenSearch index names follow the format `flint_datasource_datatable_<covering_index_name>_index` and `flint_datasource_datatable_<materialized_view>`'
}
>
<EuiFieldText
placeholder="Enter Index Name"
value={indexName}
onChange={onChangeIndexName}
aria-label="Enter Index Name"
prepend={`flint_${accelerationFormData.dataSource}_${accelerationFormData.database}_`}
append={accelerationFormData.accelerationIndexType === 'materialized' ? '' : '_index'}
disabled={accelerationFormData.accelerationIndexType === 'skipping'}
isInvalid={validateIndexName(indexName)}
/>
</EuiToolTip>
</EuiFormRow>
</>
);
};
Loading

0 comments on commit 3b24634

Please sign in to comment.