added button next to the table for query to be added

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
opensearch-project · Oct 30, 2023 · d799af7 · d799af7
1 parent 1fa6076
commit d799af7
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 63 deletions.
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -237,7 +237,7 @@ exports[`<Main /> spec click clear button 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"
@@ -2297,7 +2297,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -2860,7 +2860,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -2904,7 +2904,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"
@@ -4964,7 +4964,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -5008,7 +5008,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"
@@ -5598,7 +5598,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -5642,7 +5642,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"
@@ -6231,7 +6231,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -6275,7 +6275,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"
@@ -8326,7 +8326,7 @@ exports[`<Main /> spec renders the component 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; height: calc(100vh - 254px);"
+        style="max-width: 400px; width: 400px; height: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -8366,7 +8366,7 @@ exports[`<Main /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
             >
               <div
                 class="euiText euiText--medium euiTreeView__wrapper"

diff --git a/public/components/SQLPage/__tests__/__snapshots__/table_view.test.tsx.snap b/public/components/SQLPage/__tests__/__snapshots__/table_view.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`Render databases in tree fetches and displays database nodes when datas
 exports[`Render databases in tree fetches and displays indicies when datasource is OpenSearch 1`] = `
 <div>
   <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
+    class="euiFlexItem euiFlexItem--flexGrowZero workbench-tree"
   >
     <div
       class="euiText euiText--medium euiTreeView__wrapper"

diff --git a/public/components/SQLPage/table_view.tsx b/public/components/SQLPage/table_view.tsx
@@ -470,6 +470,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
       }
     });
   };
+  const handleQuery = (e: MouseEvent, parentName: string, tableName: string) => {
+    e.stopPropagation();
+    updateSQLQueries(`select * from ${selectedItems[0].label}.${parentName}.${tableName} limit 10`);
+  };
 
   const iconCreation = (node: TreeItem) => {
     if (node.type === TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME) {
@@ -510,10 +514,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
         return (
           <div key={node.name}>
             <EuiFlexGroup direction="row">
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiBadge color="hollow">Load Materialized View</EuiBadge>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiText>{node.isLoading && <EuiLoadingSpinner size="m" />}</EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -525,10 +529,16 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
           <div key={node.name}>
             <EuiToolTip position="right" content={node.name} delay="long">
               <EuiFlexGroup direction="row">
-                <EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiText>
                     {_.truncate(node.name, { length: 50 })}{' '}
                     {node.isLoading && <EuiLoadingSpinner size="m" />}
+                    {node.type === TREE_ITEM_TABLE_NAME_DEFAULT_NAME && !node.isLoading && (
+                      <EuiIcon
+                        type="play"
+                        onClick={(e) => handleQuery(e,parentName,node.name)}
+                      ></EuiIcon>
+                    )}
                   </EuiText>
                 </EuiFlexItem>
               </EuiFlexGroup>

diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -56,27 +56,28 @@ export const IndexTypeSelector = ({
       getJobId(query, http, (id: string) => {
         if (id === undefined) {
           setToast(errorMessage, 'danger');
+        } else {
+          pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
+            if (data.status === 'SUCCESS') {
+              const dataTableFields: DataTableFieldsType[] = data.results
+                .filter((row) => !row[0].startsWith('#'))
+                .map((row, index) => ({
+                  id: `${idPrefix}${index + 1}`,
+                  fieldName: row[0],
+                  dataType: row[1],
+                }));
+              setAccelerationFormData({
+                ...accelerationFormData,
+                dataTableFields: dataTableFields,
+              });
+              setLoading(false);
+            }
+            if (data.status === 'FAILED') {
+              setLoading(false);
+              setToast(errorMessage, 'danger');
+            }
+          });
         }
-        pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
-          if (data.status === 'SUCCESS') {
-            const dataTableFields: DataTableFieldsType[] = data.results
-              .filter((row) => !row[0].startsWith('#'))
-              .map((row, index) => ({
-                id: `${idPrefix}${index + 1}`,
-                fieldName: row[0],
-                dataType: row[1],
-              }));
-            setAccelerationFormData({
-              ...accelerationFormData,
-              dataTableFields: dataTableFields,
-            });
-            setLoading(false);
-          }
-          if (data.status === 'FAILED') {
-            setLoading(false);
-            setToast(errorMessage, 'danger');
-          }
-        });
       });
     }
   }, [accelerationFormData.dataTable]);

diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
@@ -70,20 +70,21 @@ export const AccelerationDataSourceSelector = ({
     getJobId(query, http, (id: string) => {
       if (id === undefined) {
         setToast(errorMessage, 'danger');
+      } else {
+        pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
+          if (data.status === 'SUCCESS') {
+            let databaseOptions: EuiComboBoxOptionOption<string>[] = [];
+            if (data.results.length > 0)
+              databaseOptions = data.results.map((subArray: any[]) => ({ label: subArray[0] }));
+            setDatabases(databaseOptions);
+            setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
+          }
+          if (data.status === 'FAILED') {
+            setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
+            setToast(errorMessage, 'danger');
+          }
+        });
       }
-      pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
-        if (data.status === 'SUCCESS') {
-          let databaseOptions: EuiComboBoxOptionOption<string>[] = [];
-          if (data.results.length > 0)
-            databaseOptions = data.results.map((subArray: any[]) => ({ label: subArray[0] }));
-          setDatabases(databaseOptions);
-          setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
-        }
-        if (data.status === 'FAILED') {
-          setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
-          setToast(errorMessage, 'danger');
-        }
-      });
     });
   };
 
@@ -98,20 +99,21 @@ export const AccelerationDataSourceSelector = ({
     getJobId(query, http, (id: string) => {
       if (id === undefined) {
         setToast(errorMessage, 'danger');
+      } else {
+        pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
+          if (data.status === 'SUCCESS') {
+            let dataTableOptions: EuiComboBoxOptionOption<string>[] = [];
+            if (data.results.length > 0)
+              dataTableOptions = data.results.map((subArray) => ({ label: subArray[1] }));
+            setTables(dataTableOptions);
+            setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
+          }
+          if (data.status === 'FAILED') {
+            setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
+            setToast(errorMessage, 'danger');
+          }
+        });
       }
-      pollQueryStatus(id, http, (data: { status: string; results: any[] }) => {
-        if (data.status === 'SUCCESS') {
-          let dataTableOptions: EuiComboBoxOptionOption<string>[] = [];
-          if (data.results.length > 0)
-            dataTableOptions = data.results.map((subArray) => ({ label: subArray[1] }));
-          setTables(dataTableOptions);
-          setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
-        }
-        if (data.status === 'FAILED') {
-          setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
-          setToast(errorMessage, 'danger');
-        }
-      });
     });
   };