UI fixes for loading state, empty tree, added toast for error, fixed no indicies error

common/toast/index.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ToastInputFields } from '../../../../src/core/public';
+import { coreRefs } from '../../public/framework/core_refs';
+
+type Color = 'success' | 'primary' | 'warning' | 'danger' | undefined;
+
+export const useToast = () => {
+  const toasts = coreRefs.toasts!;
+
+  const setToast = (title: string, color: Color = 'success', text?: string) => {
+    const newToast: ToastInputFields = {
+      id: new Date().toISOString(),
+      title,
+      text,
+    };
+    switch (color) {
+      case 'danger': {
+        toasts.addDanger(newToast);
+        break;
+      }
+      case 'warning': {
+        toasts.addWarning(newToast);
+        break;
+      }
+      default: {
+        toasts.addSuccess(newToast);
+        break;
+      }
+    }
+  };
+
+  return { setToast };
+};

common/utils/async_query_helpers.ts

@@ -50,14 +50,15 @@ export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) =
         callback({ status: status });
         setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
       } else if (status === 'failed') {
-        callback({ status: 'FAILED', results: [] });
+        const results = res.data.resp;
+        callback({ status: 'FAILED', error: results.error });
       } else if (status === 'success') {
         const results = _.get(res.data.resp, 'datarows');
         callback({ status: 'SUCCESS', results: results });
       }
     })
     .catch((err) => {
       console.error(err);
-      callback([]);
+      callback({ status: 'FAILED', error: 'Failed to fetch data' });
     });
 };

public/components/Main/main.tsx

@@ -878,6 +878,7 @@ export class Main extends React.Component<MainProps, MainState> {
           pplQuery={this.state.pplQueriesString}
           pplTranslations={this.state.queryTranslations}
           updatePPLQueries={this.updatePPLQueries}
+          selectedDatasource={this.state.selectedDatasource}
           asyncLoading={this.state.asyncLoading}
         />
       );
@@ -962,33 +963,38 @@ export class Main extends React.Component<MainProps, MainState> {
                 style={{
                   maxWidth: '400px',
                   width: '400px',
-                  maxHeight: '1200px',
-                  overflowY: 'auto',
-                  overflowX: 'hidden',
+                  height: 'calc(100vh - 254px)',
                 }}
               >
-                <EuiFlexGroup direction="column">
-                  <EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFlexGroup direction="row" gutterSize="s">
                     <EuiFlexItem grow={false}>
-                      <EuiFlexGroup direction="row" gutterSize="s">
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonIcon
-                            display="base"
-                            iconType="refresh"
-                            size="m"
-                            aria-label="refresh"
-                            onClick={this.handleReloadTree}
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <CreateButton
-                            updateSQLQueries={this.updateSQLQueries}
-                            selectedDatasource={this.state.selectedDatasource}
-                          />
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
+                      <EuiButtonIcon
+                        display="base"
+                        iconType="refresh"
+                        size="m"
+                        aria-label="refresh"
+                        onClick={this.handleReloadTree}
+                      />
                     </EuiFlexItem>
-                    <EuiSpacer />
+                    <EuiFlexItem grow={false}>
+                      <CreateButton
+                        updateSQLQueries={this.updateSQLQueries}
+                        selectedDatasource={this.state.selectedDatasource}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiSpacer size="l" />
+                <EuiFlexGroup
+                  direction="column"
+                  style={{
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    height: 'calc(100vh - 308px)',
+                  }}
+                >
+                  <EuiFlexItem grow={false}>
                     <TableView
                       http={this.httpClient}
                       selectedItems={this.state.selectedDatasource}

public/components/PPLPage/PPLPage.tsx

@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiCodeBlock,
   EuiCodeEditor,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -29,6 +30,7 @@ interface PPLPageProps {
   updatePPLQueries: (query: string) => void;
   pplQuery: string;
   pplTranslations: ResponseDetail<TranslateResult>[];
+  selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
 }
 
@@ -147,17 +149,31 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               Clear
             </EuiButton>
           </EuiFlexItem>
-          <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
-            <EuiButton
-              className="sql-editor-button"
-              onClick={showModal}
-              isDisabled={this.props.asyncLoading}
+          {this.props.selectedDatasource &&
+          this.props.selectedDatasource[0].label === 'OpenSearch' ? (
+            <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
+              <EuiButton
+                className="sql-editor-button"
+                onClick={showModal}
+                isDisabled={this.props.asyncLoading}
+              >
+                Explain
+              </EuiButton>
+            </EuiFlexItem>
+          ) : (
+            <EuiFlexItem
+              grow={false}
+              onClick={() =>
+                this.props.updatePPLQueries('source = <datasource>.<database>.<table> | head 10')
+              }
             >
-              Explain
-            </EuiButton>
-            {modal}
-          </EuiFlexItem>
+              <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                Sample Query
+              </EuiButton>
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
+        {modal}
       </EuiPanel>
     );
   }

public/components/SQLPage/SQLPage.tsx

@@ -186,20 +186,33 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                   </EuiButton>
                 </EuiFlexItem>
                 {this.props.selectedDatasource &&
-                  this.props.selectedDatasource[0].label === 'OpenSearch' && (
-                    <EuiFlexItem
-                      grow={false}
-                      onClick={() => this.props.onTranslate(this.props.sqlQuery)}
+                this.props.selectedDatasource[0].label === 'OpenSearch' ? (
+                  <EuiFlexItem
+                    grow={false}
+                    onClick={() => this.props.onTranslate(this.props.sqlQuery)}
+                  >
+                    <EuiButton
+                      className="sql-editor-button"
+                      onClick={showModal}
+                      isDisabled={this.props.asyncLoading}
                     >
-                      <EuiButton
-                        className="sql-editor-button"
-                        onClick={showModal}
-                        isDisabled={this.props.asyncLoading}
-                      >
-                        Explain
-                      </EuiButton>
-                    </EuiFlexItem>
-                  )}
+                      Explain
+                    </EuiButton>
+                  </EuiFlexItem>
+                ) : (
+                  <EuiFlexItem
+                    grow={false}
+                    onClick={() =>
+                      this.props.updateSQLQueries(
+                        'select * from <datasource>.<database>.<table> limit 10'
+                      )
+                    }
+                  >
+                    <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                      Sample Query
+                    </EuiButton>
+                  </EuiFlexItem>
+                )}
               </EuiFlexGroup>
             </EuiFlexItem>
             {this.props.selectedDatasource &&