Merge branch 'main' into treeview_mod

Signed-off-by: sumukhswamy <[email protected]>
opensearch-project · Oct 20, 2023 · 49e1883 · 49e1883
2 parents 49d86e7 + 55d6352
commit 49e1883
Show file tree

Hide file tree

Showing 20 changed files with 897 additions and 170 deletions.
diff --git a/common/constants/index.ts b/common/constants/index.ts
@@ -5,8 +5,10 @@
 
 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 OPENSEARCH_ACC_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/dashboards/management/accelerate-external-data/';
+export const ACC_INDEX_TYPE_DOCUMENTATION_URL =
+  'https://github.com/opensearch-project/opensearch-spark/blob/main/docs/index.md';
 
 export const TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME = `skipping_index`;
 export const TREE_ITEM_COVERING_INDEX_DEFAULT_NAME = `covering_index`;
@@ -43,7 +45,7 @@ OPTIONS (
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
   { label: 'Covering Index', value: 'covering' },
-  // { label: 'Materialized View', value: 'materialized' }, Hidden Option -> Until opensearch-spark feature is ready
+  { label: 'Materialized View', value: 'materialized' },
 ];
 
 export const ACCELERATION_AGGREGRATION_FUNCTIONS = [

diff --git a/common/types/index.ts b/common/types/index.ts
@@ -59,6 +59,8 @@ export interface FormErrorsType {
   checkpointLocationError: string[];
 }
 
+export type AccelerationRefreshType = 'auto' | 'interval' | 'manual';
+
 export interface CreateAccelerationForm {
   dataSource: string;
   database: string;
@@ -71,13 +73,13 @@ export interface CreateAccelerationForm {
   accelerationIndexName: string;
   primaryShardsCount: number;
   replicaShardsCount: number;
-  refreshType: 'interval' | 'auto';
+  refreshType: AccelerationRefreshType;
   checkpointLocation: string | undefined;
   refreshIntervalOptions: RefreshIntervalType;
   formErrors: FormErrorsType;
 }
 
-export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELED';
+export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED';
 export type TreeItemType = 'covering_index' | 'skipping_index' | 'table' | 'database' | 'materialized_view' | 'Load Materialized View' | 'badge'
 
 export interface TreeItem {

diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -16,6 +16,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiCallOut,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -109,8 +110,11 @@ interface MainState {
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
+  asyncQueryError: string;
   asyncJobId: string;
   refreshTree: boolean;
+  isAccelerationFlyoutOpened: boolean;
+  isCallOutVisible: boolean;
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -247,8 +251,11 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
+      asyncQueryError: '',
       asyncJobId: '',
       refreshTree: false,
+      isAccelerationFlyoutOpened: false,
+      isCallOutVisible: false,
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -404,6 +411,9 @@ export class Main extends React.Component<MainProps, MainState> {
             queryResultsCSV: [],
             queryResultsTEXT: [],
             searchQuery: '',
+            asyncLoading: false,
+            asyncLoadingStatus: 'SUCCESS',
+            isCallOutVisible: false,
           },
           () => console.log('Successfully updated the states')
         ); // added callback function to handle async issues
@@ -475,6 +485,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 asyncLoading: true,
                 asyncLoadingStatus: 'SCHEDULED',
                 asyncJobId: queryId,
+                isCallOutVisible: false,
               });
               this.callGetStartPolling(queries);
               const interval = setInterval(() => {
@@ -514,7 +525,7 @@ export class Main extends React.Component<MainProps, MainState> {
         this.setState({
           queries: queries,
           queryResults: [result],
-          queryResultsTable: resultTable,
+          queryResultsTable: result.data['schema'].length > 0 ? resultTable : [],
           selectedTabId: getDefaultTabId([result]),
           selectedTabName: getDefaultTabLabel([result], queries[0]),
           messages: this.getMessage(resultTable),
@@ -525,6 +536,7 @@ export class Main extends React.Component<MainProps, MainState> {
           searchQuery: '',
           asyncLoading: false,
           asyncLoadingStatus: status,
+          isCallOutVisible: !(result.data['schema'].length > 0),
         });
       } else if (_.isEqual(status, 'FAILED') || _.isEqual(status, 'CANCELLED')) {
         this.setState({
@@ -536,6 +548,7 @@ export class Main extends React.Component<MainProps, MainState> {
               className: 'error-message',
             },
           ],
+          asyncQueryError: result.data['error'],
         });
       } else {
         this.setState({
@@ -761,6 +774,9 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedTabId: MESSAGE_TAB_LABEL,
       selectedTabName: MESSAGE_TAB_LABEL,
       itemIdToExpandedRowMap: {},
+      asyncLoading: false,
+      asyncLoadingStatus: 'SUCCESS',
+      isCallOutVisible: false,
     });
   };
 
@@ -792,7 +808,7 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
-  handleDataSelect = (selectedItems: []) => {
+  handleDataSelect = (selectedItems: EuiComboBoxOptionOption[]) => {
     if (selectedItems[0].label !== 'OpenSearch' && this.state.language === 'SQL') {
       this.updateSQLQueries('');
     }
@@ -806,6 +822,12 @@ export class Main extends React.Component<MainProps, MainState> {
       refreshTree: !this.state.refreshTree,
     });
   };
+
+  setIsAccelerationFlyoutOpened = (value: boolean) => {
+    this.setState({
+      isAccelerationFlyoutOpened: value,
+    });
+  };
 
   render() {
     let page;
@@ -828,6 +850,10 @@ export class Main extends React.Component<MainProps, MainState> {
           updateSQLQueries={this.updateSQLQueries}
           selectedDatasource={this.state.selectedDatasource}
           asyncLoading={this.state.asyncLoading}
+          openAccelerationFlyout={
+            this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened
+          }
+          setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened}
         />
       );
       link = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
@@ -887,8 +913,8 @@ export class Main extends React.Component<MainProps, MainState> {
             getText={this.getText}
             isResultFullScreen={this.state.isResultFullScreen}
             setIsResultFullScreen={this.setIsResultFullScreen}
-            asyncLoading={this.state.asyncLoading}
             asyncLoadingStatus={this.state.asyncLoadingStatus}
+            asyncQueryError={this.state.asyncQueryError}
             cancelAsyncQuery={this.cancelAsyncQuery}
             selectedDatasource={this.state.selectedDatasource}
           />
@@ -967,6 +993,23 @@ export class Main extends React.Component<MainProps, MainState> {
               <EuiSpacer size="l" />
               <div>{page}</div>
               <EuiSpacer size="l" />
+              {this.state.isCallOutVisible && (
+                <>
+                  <EuiCallOut
+                    size="s"
+                    title="Query Submitted Successfully"
+                    color="success"
+                    iconType="check"
+                    dismissible
+                    onDismiss={() =>
+                      this.setState({
+                        isCallOutVisible: false,
+                      })
+                    }
+                  />
+                  <EuiSpacer size="l" />
+                </>
+              )}
               <div className="sql-console-query-result">
                 <QueryResults
                   language={this.state.language}
@@ -1003,8 +1046,8 @@ export class Main extends React.Component<MainProps, MainState> {
                   getText={this.getText}
                   isResultFullScreen={this.state.isResultFullScreen}
                   setIsResultFullScreen={this.setIsResultFullScreen}
-                  asyncLoading={this.state.asyncLoading}
                   asyncLoadingStatus={this.state.asyncLoadingStatus}
+                  asyncQueryError={this.state.asyncQueryError}
                   cancelAsyncQuery={this.cancelAsyncQuery}
                   selectedDatasource={this.state.selectedDatasource}
                 />

diff --git a/public/components/QueryResults/AsyncQueryBody.tsx b/public/components/QueryResults/AsyncQueryBody.tsx