Session update, minor fixes for acceleration flyout (#179) (#181)

* update session if not null



* clear query and window on datasource selection



* update primary shard to 5 and MV index preview name



* update tumble input width and MV validation



* update s3 regex



* Add toast for load failure in acc flyout



* add error toasts for invalid job id



---------


(cherry picked from commit 16e2e1c)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

common/constants/index.ts

@@ -72,7 +72,7 @@ export const SKIPPING_INDEX_ACCELERATION_METHODS = [
 
 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_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. 
@@ -89,6 +89,7 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices
 - All user given index names must be in lowercase letters. Index name cannot begin with underscores. Spaces, commas, and characters -, :, ", *, +, /, \, |, ?, #, >, or < are not allowed.  
   `;
 
+export const OPENSEARCH_SQL_INIT_QUERY = `SHOW tables LIKE '%';`;
 export const TIMESTAMP_DATATYPE = 'timestamp';
 export const FETCH_OPENSEARCH_INDICES_PATH = '/api/sql_console/sqlquery';
 export const POLL_INTERVAL_MS = 2000;

common/utils/async_query_helpers.ts

@@ -13,8 +13,9 @@ import {
 } from '../constants';
 
 export const setAsyncSessionId = (value: string | null) => {
-  if (value === null) sessionStorage.removeItem(ASYNC_QUERY_SESSION_ID);
-  else sessionStorage.setItem(ASYNC_QUERY_SESSION_ID, value);
+  if (value !== null) {
+    sessionStorage.setItem(ASYNC_QUERY_SESSION_ID, value);
+  }
 };
 
 export const getAsyncSessionId = () => {

public/components/Main/main.tsx

@@ -25,6 +25,7 @@ import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
 import {
   ASYNC_QUERY_ENDPOINT,
   ASYNC_QUERY_JOB_ENDPOINT,
+  OPENSEARCH_SQL_INIT_QUERY,
   POLL_INTERVAL_MS,
 } from '../../../common/constants';
 import { AsyncQueryLoadingStatus } from '../../../common/types';
@@ -239,7 +240,7 @@ export class Main extends React.Component<MainProps, MainState> {
     this.onChange = this.onChange.bind(this);
     this.state = {
       language: 'SQL',
-      sqlQueriesString: "SHOW tables LIKE '%';",
+      sqlQueriesString: OPENSEARCH_SQL_INIT_QUERY,
       pplQueriesString: '',
       queries: [],
       queryTranslations: [],
@@ -816,8 +817,11 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleDataSelect = (selectedItems: EuiComboBoxOptionOption[]) => {
-    if (selectedItems[0].label !== 'OpenSearch' && this.state.language === 'SQL') {
-      this.updateSQLQueries('');
+    this.updateSQLQueries('');
+    this.updatePPLQueries('');
+    this.onClear();
+    if (selectedItems[0].label === 'OpenSearch' && this.state.language === 'SQL') {
+      this.updateSQLQueries(OPENSEARCH_SQL_INIT_QUERY);
     }
     this.setState({
       selectedDatasource: selectedItems,

public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap

@@ -574,15 +574,15 @@ Array [
                               min="1"
                               placeholder="Number of primary shards"
                               type="number"
-                              value="1"
+                              value="5"
                             />
                           </div>
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
                           id="some_html_id-help-0"
                         >
-                          Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
+                          Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created.
                         </div>
                       </div>
                     </div>
@@ -627,7 +627,7 @@ Array [
                           class="euiFormHelpText euiFormRow__text"
                           id="some_html_id-help-0"
                         >
-                          Specify the number of replicas each primary shard should have. Default is 1.
+                          Specify the number of replicas each primary shard should have.
                         </div>
                       </div>
                     </div>
@@ -1819,15 +1819,15 @@ Array [
                                 onFocus={[Function]}
                                 placeholder="Number of primary shards"
                                 type="number"
-                                value={1}
+                                value={5}
                               />
                             </div>
                           </div>
                           <div
                             className="euiFormHelpText euiFormRow__text"
                             id="some_html_id-help-0"
                           >
-                            Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
+                            Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created.
                           </div>
                         </div>
                       </div>,
@@ -1875,7 +1875,7 @@ Array [
                             className="euiFormHelpText euiFormRow__text"
                             id="some_html_id-help-0"
                           >
-                            Specify the number of replicas each primary shard should have. Default is 1.
+                            Specify the number of replicas each primary shard should have.
                           </div>
                         </div>
                       </div>,

public/components/acceleration/create/__tests__/utils.test.tsx

@@ -186,6 +186,11 @@ describe('validateCheckpointLocation', () => {
     expect(validCheckpoint).toEqual([]);
   });
 
+  it('should return an empty array when the checkpoint location is a valid S3A URL with just bucket in checkpoint', () => {
+    const validCheckpoint = validateCheckpointLocation('auto', 's3a://valid-s3-bucket');
+    expect(validCheckpoint).toEqual([]);
+  });
+
   it('should return an empty array when using manual refresh with no checkpoint location', () => {
     const validMaterializedCheckpoint = validateCheckpointLocation('manual', '');
     expect(validMaterializedCheckpoint).toEqual([]);

public/components/acceleration/create/create_acceleration.tsx

@@ -61,7 +61,7 @@ export const CreateAcceleration = ({
       },
     },
     accelerationIndexName: ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
-    primaryShardsCount: 1,
+    primaryShardsCount: 5,
     replicaShardsCount: 1,
     refreshType: 'auto',
     checkpointLocation: undefined,

public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap

@@ -277,7 +277,7 @@ Array [
           className="euiFormLabel euiFormControlLayout__prepend"
           htmlFor="some_html_id"
         >
-          flint_{Datasource Name}_{Database Name}_{Table Name}_
+          flint_{Datasource Name}_{Database Name}_
         </label>
         <span
           className="euiToolTipAnchor"

public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap

@@ -196,15 +196,15 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={1}
+            value={5}
           />
         </div>
       </div>
       <div
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
@@ -252,7 +252,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of replicas each primary shard should have. Default is 1.
+        Specify the number of replicas each primary shard should have.
       </div>
     </div>
   </div>,
@@ -604,15 +604,15 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={1}
+            value={5}
           />
         </div>
       </div>
       <div
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
@@ -660,7 +660,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of replicas each primary shard should have. Default is 1.
+        Specify the number of replicas each primary shard should have.
       </div>
     </div>
   </div>,
@@ -1012,15 +1012,15 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={1}
+            value={5}
           />
         </div>
       </div>
       <div
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
@@ -1068,7 +1068,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of replicas each primary shard should have. Default is 1.
+        Specify the number of replicas each primary shard should have.
       </div>
     </div>
   </div>,

public/components/acceleration/selectors/define_index_options.tsx

@@ -72,7 +72,10 @@ export const DefineIndexOptions = ({
       accelerationFormData.database !== '' ? accelerationFormData.database : '{Database Name}';
     const dataTable =
       accelerationFormData.dataTable !== '' ? accelerationFormData.dataTable : '{Table Name}';
-    const prependValue = `flint_${dataSource}_${database}_${dataTable}_`;
+    const prependValue =
+      accelerationFormData.accelerationIndexType === 'materialized'
+        ? `flint_${dataSource}_${database}_`
+        : `flint_${dataSource}_${database}_${dataTable}_`;
     return [
       prependValue,
       <EuiIconTip type="iInCircle" color="subdued" content={prependValue} position="top" />,

public/components/acceleration/selectors/index_setting_options.tsx

@@ -56,7 +56,7 @@ export const IndexSettingOptions = ({
     },
   ];
 
-  const [primaryShards, setPrimaryShards] = useState(1);
+  const [primaryShards, setPrimaryShards] = useState(5);
   const [replicaCount, setReplicaCount] = useState(1);
   const [refreshTypeSelected, setRefreshTypeSelected] = useState(autoRefreshId);
   const [refreshWindow, setRefreshWindow] = useState(1);
@@ -156,7 +156,7 @@ export const IndexSettingOptions = ({
       />
       <EuiFormRow
         label="Number of primary shards"
-        helpText="Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created."
+        helpText="Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created."
         isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         error={accelerationFormData.formErrors.primaryShardsError}
       >
@@ -181,7 +181,7 @@ export const IndexSettingOptions = ({
       </EuiFormRow>
       <EuiFormRow
         label="Number of replicas"
-        helpText="Specify the number of replicas each primary shard should have. Default is 1."
+        helpText="Specify the number of replicas each primary shard should have."
         isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         error={accelerationFormData.formErrors.replicaShardsError}
       >

public/components/acceleration/selectors/index_type_selector.tsx

@@ -18,6 +18,7 @@ import {
   ACCELERATION_INDEX_TYPES,
   ACC_INDEX_TYPE_DOCUMENTATION_URL,
 } from '../../../../common/constants';
+import { useToast } from '../../../../common/toast';
 import {
   AccelerationIndexType,
   CreateAccelerationForm,
@@ -36,6 +37,7 @@ export const IndexTypeSelector = ({
   accelerationFormData,
   setAccelerationFormData,
 }: IndexTypeSelectorProps) => {
+  const { setToast } = useToast();
   const [selectedIndexType, setSelectedIndexType] = useState<EuiComboBoxOptionOption<string>[]>([
     ACCELERATION_INDEX_TYPES[0],
   ]);
@@ -50,7 +52,11 @@ export const IndexTypeSelector = ({
         query: `DESC ${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`,
         datasource: accelerationFormData.dataSource,
       };
+      const errorMessage = 'ERROR: failed to load table columns';
       getJobId(query, http, (id: string) => {
+        if (id === undefined) {
+          setToast(errorMessage, 'danger');
+        }
         pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
           if (data.status === 'SUCCESS') {
             const dataTableFields: DataTableFieldsType[] = data.results
@@ -68,6 +74,7 @@ export const IndexTypeSelector = ({
           }
           if (data.status === 'FAILED') {
             setLoading(false);
+            setToast(errorMessage, 'danger');
           }
         });
       });

public/components/acceleration/selectors/source_selector.tsx

@@ -7,6 +7,7 @@ import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiSpacer, EuiText }
 import producer from 'immer';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../../src/core/public';
+import { useToast } from '../../../../common/toast';
 import { CreateAccelerationForm } from '../../../../common/types';
 import { getJobId, pollQueryStatus } from '../../../../common/utils/async_query_helpers';
 import { hasError, validateDataSource } from '../create/utils';
@@ -24,6 +25,7 @@ export const AccelerationDataSourceSelector = ({
   setAccelerationFormData,
   selectedDatasource,
 }: AccelerationDataSourceSelectorProps) => {
+  const { setToast } = useToast();
   const [dataConnections, setDataConnections] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [selectedDataConnection, setSelectedDataConnection] = useState<
     EuiComboBoxOptionOption<string>[]
@@ -52,6 +54,7 @@ export const AccelerationDataSourceSelector = ({
       })
       .catch((err) => {
         console.error(err);
+        setToast(`ERROR: failed to load datasources`, 'danger');
       });
     setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: false });
   };
@@ -63,7 +66,11 @@ export const AccelerationDataSourceSelector = ({
       query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`,
       datasource: accelerationFormData.dataSource,
     };
+    const errorMessage = `ERROR: failed to load databases`;
     getJobId(query, http, (id: string) => {
+      if (id === undefined) {
+        setToast(errorMessage, 'danger');
+      }
       pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
         if (data.status === 'SUCCESS') {
           let databaseOptions: EuiComboBoxOptionOption<string>[] = [];
@@ -74,6 +81,7 @@ export const AccelerationDataSourceSelector = ({
         }
         if (data.status === 'FAILED') {
           setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
+          setToast(errorMessage, 'danger');
         }
       });
     });
@@ -86,7 +94,11 @@ export const AccelerationDataSourceSelector = ({
       query: `SHOW TABLES IN ${accelerationFormData.dataSource}.${accelerationFormData.database}`,
       datasource: accelerationFormData.dataSource,
     };
+    const errorMessage = `ERROR: failed to load tables`;
     getJobId(query, http, (id: string) => {
+      if (id === undefined) {
+        setToast(errorMessage, 'danger');
+      }
       pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
         if (data.status === 'SUCCESS') {
           let dataTableOptions: EuiComboBoxOptionOption<string>[] = [];
@@ -97,6 +109,7 @@ export const AccelerationDataSourceSelector = ({
         }
         if (data.status === 'FAILED') {
           setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
+          setToast(errorMessage, 'danger');
         }
       });
     });

public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx

@@ -26,7 +26,6 @@ import {
   CreateAccelerationForm,
   MaterializedViewColumn,
 } from '../../../../../common/types';
-import { validateMaterializedViewData } from '../../create/utils';
 
 interface AddColumnPopOverProps {
   isColumnPopOverOpen: boolean;
@@ -82,10 +81,6 @@ export const AddColumnPopOver = ({
     setAccelerationFormData(
       producer((accData) => {
         accData.materializedViewQueryData.columnsValues = newColumnExpresionValue;
-        accData.formErrors.materializedViewError = validateMaterializedViewData(
-          accData.accelerationIndexType,
-          accData.materializedViewQueryData
-        );
       })
     );