disable buttons while running async query (#136)

* disable most buttons Signed-off-by: Paul Sebastian <[email protected]> * code editor read only Signed-off-by: Paul Sebastian <[email protected]> * disabled accelerate button Signed-off-by: Paul Sebastian <[email protected]> --------- Signed-off-by: Paul Sebastian <[email protected]>
opensearch-project · Oct 4, 2023 · 188d57e · 188d57e
1 parent 621b82e
commit 188d57e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 42 deletions.
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -423,7 +423,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 lang: language,
                 query: query,
                 datasource: this.state.selectedDatasource[0].label,
-              }), // TODO: dynamically datasource when accurate
+              }),
             })
             .catch((error: any) => {
               this.setState({
@@ -891,11 +891,16 @@ export class Main extends React.Component<MainProps, MainState> {
               http={this.httpClient}
               onSelect={this.handleDataSelect}
               urlDataSource={this.props.urlDataSource}
+              asyncLoading={this.state.asyncLoading}
             />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <Switch onChange={this.onChange} language={this.state.language} />
+            <Switch
+              onChange={this.onChange}
+              language={this.state.language}
+              asyncLoading={this.state.asyncLoading}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">

diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
@@ -117,6 +117,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             showGutter: false,
           }}
           aria-label="Code Editor"
+          isReadOnly={this.props.asyncLoading}
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">
@@ -140,10 +141,16 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               this.props.onClear();
             }}
           >
-            <EuiButton className="sql-editor-button">Clear</EuiButton>
+            <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+              Clear
+            </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
-            <EuiButton className="sql-editor-button" onClick={showModal}>
+            <EuiButton
+              className="sql-editor-button"
+              onClick={showModal}
+              isDisabled={this.props.asyncLoading}
+            >
               Explain
             </EuiButton>
             {modal}

diff --git a/public/components/QueryLanguageSwitch/Switch.tsx b/public/components/QueryLanguageSwitch/Switch.tsx
@@ -3,53 +3,54 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
-import _ from "lodash";
-import { EuiButtonGroup } from "@elastic/eui";
+import React from 'react';
+import _ from 'lodash';
+import { EuiButtonGroup } from '@elastic/eui';
 // @ts-ignore
-import { htmlIdGenerator } from "@elastic/eui/lib/services";
+import { htmlIdGenerator } from '@elastic/eui/lib/services';
 
 interface SwitchProps {
-    onChange: (id: string, value?: any) => void;
-    language: string;
+  onChange: (id: string, value?: any) => void;
+  language: string;
+  asyncLoading: boolean;
 }
 
 interface SwitchState {
-    // language: string
+  // language: string
 }
 
 const toggleButtons = [
-    {
-        id: 'SQL',
-        label: 'SQL',
-    },
-    {
-        id: 'PPL',
-        label: 'PPL',
-    },
+  {
+    id: 'SQL',
+    label: 'SQL',
+  },
+  {
+    id: 'PPL',
+    label: 'PPL',
+  },
 ];
 
 class Switch extends React.Component<SwitchProps, SwitchState> {
-    constructor(props: SwitchProps) {
-        super(props);
-        this.state = {
-            language: 'SQL'
-        };
-    }
-
-    render() {
-
-        return (
-            <EuiButtonGroup className="query-language-switch"
-                legend="query-language-swtich"
-                options={toggleButtons}
-                onChange={(id) => this.props.onChange(id)}
-                idSelected={this.props.language}
-                buttonSize="m"
-            />
-        )
-    }
+  constructor(props: SwitchProps) {
+    super(props);
+    this.state = {
+      language: 'SQL',
+    };
+  }
+
+  render() {
+    return (
+      <EuiButtonGroup
+        className="query-language-switch"
+        legend="query-language-swtich"
+        options={toggleButtons}
+        onChange={(id) => this.props.onChange(id)}
+        idSelected={this.props.language}
+        buttonSize="m"
+        isDisabled={this.props.asyncLoading}
+      />
+    );
+  }
 }
 
 export default Switch;
diff --git a/public/components/SQLPage/DataSelect.tsx b/public/components/SQLPage/DataSelect.tsx
@@ -11,9 +11,10 @@ interface CustomView {
   http: CoreStart['http'];
   onSelect: (selectedItems: []) => void;
   urlDataSource: string;
+  asyncLoading: boolean;
 }
 
-export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
+export const DataSelect = ({ http, onSelect, urlDataSource, asyncLoading }: CustomView) => {
   const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([
     { label: 'OpenSearch' },
   ]);
@@ -84,6 +85,7 @@ export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
       options={options}
       selectedOptions={selectedOptions}
       onChange={(selectedItems) => handleSelectionChange(selectedItems)}
+      isDisabled={asyncLoading}
     />
   );
 };
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
@@ -141,6 +141,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
               enableLiveAutocompletion: true,
             }}
             aria-label="Code Editor"
+            isReadOnly={this.props.asyncLoading}
           />
           <EuiSpacer />
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -162,13 +163,19 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     this.props.onClear();
                   }}
                 >
-                  <EuiButton className="sql-editor-button">Clear</EuiButton>
+                  <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                    Clear
+                  </EuiButton>
                 </EuiFlexItem>
                 <EuiFlexItem
                   grow={false}
                   onClick={() => this.props.onTranslate(this.props.sqlQuery)}
                 >
-                  <EuiButton className="sql-editor-button" onClick={showModal}>
+                  <EuiButton
+                    className="sql-editor-button"
+                    onClick={showModal}
+                    isDisabled={this.props.asyncLoading}
+                  >
                     Explain
                   </EuiButton>
                 </EuiFlexItem>
@@ -181,6 +188,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     fill={true}
                     className="sql-accelerate-button"
                     onClick={this.setAccelerationFlyout}
+                    isDisabled={this.props.asyncLoading}
                   >
                     Accelerate Table
                   </EuiButton>