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

…no indicies error (opensearch-project#176) (opensearch-project#178)

* sample query button



* added toasts for failure cases



* added changes for error loading message, fixed initial loading screen, added badge for no indicies



* ui changes to curb sidebar



* added fix for error from async query



* updated snapshots



* added changes for for mocking toasts, changed table test



* pr requested changes



* fix main.tsx tests



---------






(cherry picked from commit 015cab8)

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
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>
Co-authored-by: Paul Sebastian <paulstn@amazon.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>

common/constants/index.ts

@@ -95,3 +95,6 @@ export const POLL_INTERVAL_MS = 2000;
 export const ASYNC_QUERY_ENDPOINT = '/api/spark_sql_console';
 export const ASYNC_QUERY_JOB_ENDPOINT = ASYNC_QUERY_ENDPOINT + '/job/';
 export const ASYNC_QUERY_SESSION_ID = 'async-query-session-id';
+
+export const SAMPLE_PPL_QUERY = 'source = <datasource>.<database>.<table> | head 10';
+export const SAMPLE_SQL_QUERY = 'select * from <datasource>.<database>.<table> limit 10';

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' });
     });
 };