Add materlized views, manual refresh option and minor fixes (#159) (#161

) * enable materialized views, update acc btn fill * update acceleration links * add manual refresh option, update tests * update copy for datasources * fix redirection issue --------- (cherry picked from commit 43b085b) 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>
opensearch-project · Oct 18, 2023 · 88970fb · 88970fb
1 parent 70f97ef
commit 88970fb
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 77 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 SKIPPING_INDEX = `skipping_index`;
 export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
@@ -37,7 +39,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,10 +73,10 @@ 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' | 'CANCELED';
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -109,6 +109,7 @@ interface MainState {
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
   asyncJobId: string;
+  isAccelerationFlyoutOpened: boolean;
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -246,6 +247,7 @@ export class Main extends React.Component<MainProps, MainState> {
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
       asyncJobId: '',
+      isAccelerationFlyoutOpened: false,
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -789,7 +791,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('');
     }
@@ -798,6 +800,12 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   };
 
+  setIsAccelerationFlyoutOpened = (value: boolean) => {
+    this.setState({
+      isAccelerationFlyoutOpened: value,
+    });
+  };
+
   render() {
     let page;
     let link;
@@ -819,6 +827,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/';

diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
@@ -37,6 +37,8 @@ interface SQLPageProps {
   sqlTranslations: ResponseDetail<TranslateResult>[];
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
+  openAccelerationFlyout: boolean;
+  setIsAccelerationFlyoutOpened: (value: boolean) => void;
 }
 
 interface SQLPageState {
@@ -80,6 +82,21 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     });
   };
 
+  componentDidUpdate(prevProps: SQLPageProps) {
+    const { selectedDatasource, openAccelerationFlyout } = this.props;
+    const prevDataSource = prevProps.selectedDatasource[0].label;
+    const currentDataSource = selectedDatasource[0].label;
+
+    if (
+      currentDataSource !== prevDataSource &&
+      currentDataSource !== 'OpenSearch' &&
+      openAccelerationFlyout
+    ) {
+      this.setAccelerationFlyout();
+      this.props.setIsAccelerationFlyoutOpened(true);
+    }
+  }
+
   render() {
     const closeModal = () => this.setIsModalVisible(false);
     const showModal = () => this.setIsModalVisible(true);
@@ -187,7 +204,6 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
               this.props.selectedDatasource[0].label !== 'OpenSearch' && (
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    fill={true}
                     className="sql-accelerate-button"
                     onClick={this.setAccelerationFlyout}
                     isDisabled={this.props.asyncLoading}

diff --git a/.../components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/.../components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
@@ -72,7 +72,7 @@ Array [
                      
                     <a
                       class="euiLink euiLink--primary"
-                      href="https://opensearch.org/docs/latest"
+                      href="https://opensearch.org/docs/latest/dashboards/management/accelerate-external-data/"
                       rel="noopener noreferrer"
                       target="_blank"
                     >
@@ -132,7 +132,7 @@ Array [
                       <div
                         class="euiTextColor euiTextColor--subdued"
                       >
-                        Select data connection where the data you want to accelerate resides.
+                        Select the data source to accelerate data from. External data sources may take time to load.
                       </div>
                     </div>
                     <div
@@ -441,7 +441,7 @@ Array [
                         >
                           <a
                             class="euiLink euiLink--primary"
-                            href="https://opensearch.org/docs/latest"
+                            href="https://github.com/opensearch-project/opensearch-spark/blob/main/docs/index.md"
                             rel="noopener noreferrer"
                             target="_blank"
                           >
@@ -670,7 +670,7 @@ Array [
                               class="euiRadio__label"
                               for="refresh-option-1"
                             >
-                              Auto Refresh
+                              Auto refresh
                             </label>
                           </div>
                           <div
@@ -690,15 +690,35 @@ Array [
                               class="euiRadio__label"
                               for="refresh-option-2"
                             >
-                              Refresh by interval
+                              Auto refresh by interval
+                            </label>
+                          </div>
+                          <div
+                            class="euiRadio euiRadioGroup__item"
+                          >
+                            <input
+                              class="euiRadio__input"
+                              id="refresh-option-3"
+                              name="refresh type radio group"
+                              type="radio"
+                              value=""
+                            />
+                            <div
+                              class="euiRadio__circle"
+                            />
+                            <label
+                              class="euiRadio__label"
+                              for="refresh-option-3"
+                            >
+                              Manual refresh
                             </label>
                           </div>
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
                           id="some_html_id-help-0"
                         >
-                          Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+                          Specify how often the index should refresh, which publishes the most recent changes and make them available for search.
                         </div>
                       </div>
                     </div>
@@ -1181,7 +1201,7 @@ Array [
                      
                     <a
                       className="euiLink euiLink--primary"
-                      href="https://opensearch.org/docs/latest"
+                      href="https://opensearch.org/docs/latest/dashboards/management/accelerate-external-data/"
                       rel="noopener noreferrer"
                       target="_blank"
                     >
@@ -1243,7 +1263,7 @@ Array [
                         <div
                           className="euiTextColor euiTextColor--subdued"
                         >
-                          Select data connection where the data you want to accelerate resides.
+                          Select the data source to accelerate data from. External data sources may take time to load.
                         </div>
                       </div>,
                       <div
@@ -1635,7 +1655,7 @@ Array [
                           >
                             <a
                               className="euiLink euiLink--primary"
-                              href="https://opensearch.org/docs/latest"
+                              href="https://github.com/opensearch-project/opensearch-spark/blob/main/docs/index.md"
                               rel="noopener noreferrer"
                               target="_blank"
                             >
@@ -1900,7 +1920,7 @@ Array [
                                 className="euiRadio__label"
                                 htmlFor="refresh-option-1"
                               >
-                                Auto Refresh
+                                Auto refresh
                               </label>
                             </div>
                             <div
@@ -1921,15 +1941,36 @@ Array [
                                 className="euiRadio__label"
                                 htmlFor="refresh-option-2"
                               >
-                                Refresh by interval
+                                Auto refresh by interval
+                              </label>
+                            </div>
+                            <div
+                              className="euiRadio euiRadioGroup__item"
+                            >
+                              <input
+                                checked={false}
+                                className="euiRadio__input"
+                                id="refresh-option-3"
+                                name="refresh type radio group"
+                                onChange={[Function]}
+                                type="radio"
+                              />
+                              <div
+                                className="euiRadio__circle"
+                              />
+                              <label
+                                className="euiRadio__label"
+                                htmlFor="refresh-option-3"
+                              >
+                                Manual refresh
                               </label>
                             </div>
                           </div>
                           <div
                             className="euiFormHelpText euiFormRow__text"
                             id="some_html_id-help-0"
                           >
-                            Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+                            Specify how often the index should refresh, which publishes the most recent changes and make them available for search.
                           </div>
                         </div>
                       </div>,

diff --git a/...ents/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap b/...ents/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`Acceleration header renders acceleration flyout header 1`] = `
        
       <a
         className="euiLink euiLink--primary"
-        href="https://opensearch.org/docs/latest"
+        href="https://opensearch.org/docs/latest/dashboards/management/accelerate-external-data/"
         rel="noopener noreferrer"
         target="_blank"
       >