update form validaitons

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Oct 2, 2023 · 8733e80 · 8733e80
1 parent 9fd9314
commit 8733e80
Show file tree

Hide file tree

Showing 14 changed files with 557 additions and 280 deletions.
diff --git a/common/constants/index.ts b/common/constants/index.ts
@@ -32,7 +32,16 @@ export const ACCELERATION_TIME_INTERVAL = [
   { text: 'week(s)', value: 'week' },
 ];
 
+export const SKIPPING_INDEX_ACCELERATION_METHODS = [
+  { value: 'PARTITION', text: 'Partition' },
+  { value: 'VALUE_SET', text: 'Value Set' },
+  { value: 'MIN_MAX', text: 'Min Max' },
+];
+
 export const ACCELERATION_ADD_FIELDS_TEXT = '(add fields here)';
+export const ACCELERATION_INDEX_NAME_REGEX = /^[a-z][a-z_\-]*$/;
+export const ACCELERATION_S3_URL_REGEX = /^(s3|s3a):\/\/[a-zA-Z0-9.\-]+\/.*/;
+export const ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME = 'skipping';
 
 export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices have a naming format of pattern: \`prefix_<index name>_suffix\`. They share a common prefix structure, which is \`flint_<data source name>_<database name>_<table name>_\`. Additionally, they may have a suffix that varies based on the index type. 
 ##### Skipping Index

diff --git a/common/types/index.ts b/common/types/index.ts
@@ -12,11 +12,13 @@ export interface MaterializedViewColumn {
   fieldAlias?: string;
 }
 
+export type SkippingIndexAccMethodType = 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+
 export interface SkippingIndexRowType {
   id: string;
   fieldName: string;
   dataType: string;
-  accelerationMethod: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+  accelerationMethod: SkippingIndexAccMethodType;
 }
 
 export interface DataTableFieldsType {
@@ -43,6 +45,20 @@ export interface materializedViewQueryType {
   groupByTumbleValue: GroupByTumbleType;
 }
 
+export interface FormErrorsType {
+  dataSourceError: string[];
+  databaseError: string[];
+  dataTableError: string[];
+  skippingIndexError: string[];
+  coveringIndexError: string[];
+  materializedViewError: string[];
+  indexNameError: string[];
+  primaryShardsError: string[];
+  replicaShardsError: string[];
+  refreshIntervalError: string[];
+  checkpointLocationError: string[];
+}
+
 export interface CreateAccelerationForm {
   dataSource: string;
   database: string;
@@ -57,5 +73,6 @@ export interface CreateAccelerationForm {
   replicaShardsCount: number;
   refreshType: 'interval' | 'auto';
   checkpointLocation: string | undefined;
-  refreshIntervalOptions: RefreshIntervalType | undefined;
+  refreshIntervalOptions: RefreshIntervalType;
+  formErrors: FormErrorsType;
 }
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -3,36 +3,36 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { 
-  EuiButton, 
-  EuiFlexGroup, 
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer, 
-  EuiPageSideBar , 
-  EuiPanel, 
-  EuiPage, 
+  EuiPage,
   EuiPageContent,
-  EuiPageContentBody, 
-  EuiComboBox, 
-  EuiText, 
+  EuiPageContentBody,
+  EuiPageSideBar,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
 import React from 'react';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
 import { MESSAGE_TAB_LABEL } from '../../utils/constants';
 import {
+  Tree,
   getDefaultTabId,
   getDefaultTabLabel,
   getQueries,
   getSelectedResults,
-  Tree,
 } from '../../utils/utils';
 import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
 import { SQLPage } from '../SQLPage/SQLPage';
-import { TableView } from '../SQLPage/TableView'
+import { TableView } from '../SQLPage/TableView';
 
 interface ResponseData {
   ok: boolean;
@@ -217,7 +217,7 @@ export class Main extends React.Component<MainProps, MainState> {
     this.onChange = this.onChange.bind(this);
     this.state = {
       language: 'SQL',
-      sqlQueriesString: 'SHOW tables LIKE \'%\';',
+      sqlQueriesString: "SHOW tables LIKE '%';",
       pplQueriesString: '',
       queries: [],
       queryTranslations: [],
@@ -232,7 +232,7 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
-      selectedDatasource: ''
+      selectedDatasource: '',
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -607,11 +607,11 @@ export class Main extends React.Component<MainProps, MainState> {
     ); // added callback function to handle async issues
   };
 
-  updateSQLQueries(query: string) {
+  updateSQLQueries = (query: string) => {
     this.setState({
       sqlQueriesString: query,
     });
-  }
+  };
 
   updatePPLQueries(query: string) {
     this.setState({
@@ -626,11 +626,11 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleComboOptionChange = (selectedOption: string) => {
-    this.setState({ 
-      selectedDatasource: selectedOption });
+    this.setState({
+      selectedDatasource: selectedOption,
+    });
   };
 
-
   render() {
     let page;
     let link;
@@ -645,6 +645,7 @@ export class Main extends React.Component<MainProps, MainState> {
           sqlQuery={this.state.sqlQueriesString}
           sqlTranslations={this.state.queryTranslations}
           updateSQLQueries={this.updateSQLQueries}
+          selectedDatasource={this.state.selectedDatasource}
         />
       );
       link = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
@@ -706,17 +707,19 @@ export class Main extends React.Component<MainProps, MainState> {
 
     return (
       <>
-        <EuiFlexGroup direction='row' alignItems='center'>
+        <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
             <EuiComboBox
               singleSelection={true}
-              placeholder='Connection Name'
+              placeholder="Connection Name"
               options={[
                 { label: 'S3', value: 'S3' },
                 { label: 'Opensearch', value: 'Opensearch' },
               ]}
-              selectedOptions={this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []}
+              selectedOptions={
+                this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []
+              }
               onChange={(selectedOptions) => {
                 const selectedValue = selectedOptions[0] ? selectedOptions[0].value : '';
                 this.handleComboOptionChange(selectedValue);
@@ -733,83 +736,77 @@ export class Main extends React.Component<MainProps, MainState> {
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiPage paddingSize='none'>
+        <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
               <EuiPageSideBar>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <EuiButton
-                        iconType="arrowDown"
-                        iconSide="right"
-                        fullWidth
-                      >
+                      <EuiButton iconType="arrowDown" iconSide="right" fullWidth>
                         Create
                       </EuiButton>
                     </EuiFlexItem>
                     <EuiSpacer />
-                    <TableView 
-                      http={this.httpClient} 
+                    <TableView
+                      http={this.httpClient}
                       dataConnection={this.state.selectedDatasource}
-                      />
+                    />
                     <EuiSpacer />
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageSideBar>
             </EuiPanel>
           )}
 
-          <EuiPageContent paddingSize='m'>
+          <EuiPageContent paddingSize="m">
             <EuiPageContentBody>
-              <EuiFlexGroup alignItems="center">
-              </EuiFlexGroup>
+              <EuiFlexGroup alignItems="center"></EuiFlexGroup>
               <EuiSpacer size="l" />
               <div>{page}</div>
-          <EuiSpacer size="l" />
-          <div className="sql-console-query-result">
-            <QueryResults
-              language={this.state.language}
-              queries={this.state.queries}
-              queryResults={this.state.queryResultsTable}
-              queryResultsJDBC={getSelectedResults(
-                this.state.queryResults,
-                this.state.selectedTabId
-              )}
-              queryResultsJSON={getSelectedResults(
-                this.state.queryResultsJSON,
-                this.state.selectedTabId
-              )}
-              queryResultsCSV={getSelectedResults(
-                this.state.queryResultsCSV,
-                this.state.selectedTabId
-              )}
-              queryResultsTEXT={getSelectedResults(
-                this.state.queryResultsTEXT,
-                this.state.selectedTabId
-              )}
-              messages={this.state.messages}
-              selectedTabId={this.state.selectedTabId}
-              selectedTabName={this.state.selectedTabName}
-              onSelectedTabIdChange={this.onSelectedTabIdChange}
-              itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
-              onQueryChange={this.onQueryChange}
-              updateExpandedMap={this.updateExpandedMap}
-              searchQuery={this.state.searchQuery}
-              tabsOverflow={false}
-              getJson={this.getJson}
-              getJdbc={this.getJdbc}
-              getCsv={this.getCsv}
-              getText={this.getText}
-              isResultFullScreen={this.state.isResultFullScreen}
-              setIsResultFullScreen={this.setIsResultFullScreen}
-            />
-          </div>
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPage>
+              <EuiSpacer size="l" />
+              <div className="sql-console-query-result">
+                <QueryResults
+                  language={this.state.language}
+                  queries={this.state.queries}
+                  queryResults={this.state.queryResultsTable}
+                  queryResultsJDBC={getSelectedResults(
+                    this.state.queryResults,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsJSON={getSelectedResults(
+                    this.state.queryResultsJSON,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsCSV={getSelectedResults(
+                    this.state.queryResultsCSV,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsTEXT={getSelectedResults(
+                    this.state.queryResultsTEXT,
+                    this.state.selectedTabId
+                  )}
+                  messages={this.state.messages}
+                  selectedTabId={this.state.selectedTabId}
+                  selectedTabName={this.state.selectedTabName}
+                  onSelectedTabIdChange={this.onSelectedTabIdChange}
+                  itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+                  onQueryChange={this.onQueryChange}
+                  updateExpandedMap={this.updateExpandedMap}
+                  searchQuery={this.state.searchQuery}
+                  tabsOverflow={false}
+                  getJson={this.getJson}
+                  getJdbc={this.getJdbc}
+                  getCsv={this.getCsv}
+                  getText={this.getText}
+                  isResultFullScreen={this.state.isResultFullScreen}
+                  setIsResultFullScreen={this.setIsResultFullScreen}
+                />
+              </div>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPage>
       </>
-
     );
   }
 }