fix: 5297 subqueries not being parsed in UI (#5341)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced error handling and logic improvements in SQL query parsing
for the `useLogs` composable.
- Improved functionality of the search bar component, including better
handling of SQL queries and user notifications.

- **Bug Fixes**
- Refined logic for managing selected streams and improved feedback for
download attempts in the search bar.

- **Style**
- Adjusted button classes and added scoped styles to improve the visual
layout of the search bar component.

- **Chores**
- Updated GitHub Actions workflow configuration for Playwright UI tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

web/src/composables/useLogs.ts

@@ -4171,12 +4171,25 @@ const useLogs = () => {
         throw new Error("Invalid SQL syntax");
       }
 
-      let newSelectedStreams: string[] = [];
+      const newSelectedStreams: string[] = [];
 
       //for simple query get the table name from the parsedSQL object
       // this will handle joins as well
       if (parsedSQL?.from) {
-        newSelectedStreams = parsedSQL.from.map((stream: any) => stream.table);
+        parsedSQL.from.map((stream: any) => {
+          // Check if 'expr' and 'ast' exist, then access 'from' to get the table
+          if (stream.expr?.ast?.from) {
+            stream.expr.ast.from.forEach((subStream: any) => {
+              if (subStream.table != undefined) {
+                newSelectedStreams.push(subStream.table);
+              }
+            });
+          }
+          // Otherwise, return the table name directly
+          if (stream.table != undefined) {
+            newSelectedStreams.push(stream.table);
+          }
+        });
       }
 
       // additionally, if union is there then it will have _next object which will have the table name it should check recursuvely as user can write multiple union

web/src/plugins/logs/SearchBar.vue

@@ -1253,7 +1253,7 @@ export default defineComponent({
         }
       }
 
-      if(parsedSQL?._next) {
+      if (parsedSQL?._next) {
         columnNames = getColumnNames(parsedSQL._next);
       }
       return columnNames;
@@ -1315,7 +1315,10 @@ export default defineComponent({
 
       if (value != "" && searchObj.meta.sqlMode === true) {
         const parsedSQL = fnParsedSQL();
-        if (Object.hasOwn(parsedSQL, "from")) {
+        if (
+          Object.hasOwn(parsedSQL, "from") ||
+          Object.hasOwn(parsedSQL, "select")
+        ) {
           setSelectedStreams(value);
           // onStreamChange(value);
         }
@@ -1326,18 +1329,19 @@ export default defineComponent({
         if (searchObj.meta.sqlMode === true) {
           searchObj.data.parsedQuery = parser.astify(value);
           if (searchObj.data.parsedQuery?.from?.length > 0) {
+            const tableName: string =
+              searchObj.data.parsedQuery.from[0].table ||
+              searchObj.data.parsedQuery.from[0].expr?.ast?.from?.[0]?.table;
             if (
-              !searchObj.data.stream.selectedStream.includes(
-                searchObj.data.parsedQuery.from[0].table,
-              ) &&
-              searchObj.data.parsedQuery.from[0].table !== streamName
+              !searchObj.data.stream.selectedStream.includes(tableName) &&
+              tableName !== streamName
             ) {
               let streamFound = false;
               searchObj.data.stream.selectedStream = [];
 
-              streamName = searchObj.data.parsedQuery.from[0].table;
+              streamName = tableName;
               searchObj.data.streamResults.list.forEach((stream) => {
-                if (stream.name == searchObj.data.parsedQuery.from[0].table) {
+                if (stream.name == streamName) {
                   streamFound = true;
                   let itemObj = {
                     label: stream.name,