api, common, cypress, webui: Execute SQL page can now do SELECT queries

The server logs show people are commonly trying to run SELECT
queries from the Execute SQL page.  This commit allows that to
work, though there's no visualisation of the resulting data.

We might want to merge the Visualise and Execute SQL pages at some
point, as we can clearly do both from one page.  And it'd reduce
the backend code a little bit too.  eg no need to save both exec and
vis queries seperately, etc

Author: justinclift

api/handlers.go

@@ -931,7 +931,7 @@ func queryHandler(w http.ResponseWriter, r *http.Request) {
 		}
 	} else {
 		// Send the query to the appropriate backend live node
-		data, err = com.LiveQueryDB(com.AmqpChan, liveNode, loggedInUser, dbOwner, dbName, query)
+		data, err = com.LiveQuery(liveNode, loggedInUser, dbOwner, dbName, query)
 		if err != nil {
 			log.Println(err)
 			jsonErr(w, err.Error(), http.StatusInternalServerError)

common/live.go

@@ -226,11 +226,11 @@ func LiveExecute(liveNode, loggedInUser, dbOwner, dbName, sql string) (rowsChang
 	return
 }
 
-// LiveQueryDB sends a SQLite query to a live database on its hosting node
-func LiveQueryDB(channel *amqp.Channel, nodeName, requestingUser, dbOwner, dbName, query string) (rows SQLiteRecordSet, err error) {
+// LiveQuery sends a SQLite query to a live database on its hosting node
+func LiveQuery(nodeName, requestingUser, dbOwner, dbName, query string) (rows SQLiteRecordSet, err error) {
 	// Send the query request to our AMQP backend
 	var rawResponse []byte
-	rawResponse, err = MQRequest(channel, nodeName, "query", requestingUser, dbOwner, dbName, query)
+	rawResponse, err = MQRequest(AmqpChan, nodeName, "query", requestingUser, dbOwner, dbName, query)
 	if err != nil {
 		return
 	}

cypress/e2e/1-webui/bugs/002-visualisation-base64url-padding-bug.cy.js

@@ -16,6 +16,6 @@ describe('002-visualisation-base64url-padding-bug', () => {
       'LIMIT 10')
     cy.get('[data-cy="runsqlbtn"]').click()
     cy.wait(150) // Needs a bit of a delay here, otherwise any error status message may be missed
-    cy.get('[data-cy="statusmsg"]').should('contain.text', 'SQL run successful')
+    cy.get('[data-cy="statusmsg"]').should('contain.text', 'SQL query ran successfully')
   })
 })

webui/execute.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"log"
 	"net/http"
+	"strings"
 
 	"github.com/gorilla/sessions"
 	com "github.com/sqlitebrowser/dbhub.io/common"
@@ -283,16 +284,29 @@ func execLiveSQL(w http.ResponseWriter, r *http.Request) {
 
 	// Send the SQL execution request to our AMQP backend
 	var rowsChanged int
+	var z interface{}
 	rowsChanged, err = com.LiveExecute(liveNode, loggedInUser, dbOwner, dbName, sql)
 	if err != nil {
-		log.Println(err)
-		w.WriteHeader(http.StatusInternalServerError)
-		fmt.Fprint(w, err)
-		return
+		if !strings.HasPrefix(err.Error(), "don't use exec with") {
+			log.Println(err)
+			w.WriteHeader(http.StatusInternalServerError)
+			fmt.Fprint(w, err)
+			return
+		}
+
+		// The user tried to run a SELECT query.  Let's just run with it...
+		z, err = com.LiveQuery(liveNode, loggedInUser, dbOwner, dbName, sql)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			fmt.Fprint(w, err.Error())
+			return
+		}
+	} else {
+		// The SQL statement execution succeeded, so pass along the # of rows changed
+		z = com.ExecuteResponseContainer{RowsChanged: rowsChanged, Status: "OK"}
 	}
 
-	// The SQL statement execution succeeded, so pass along the # of rows changed
-	z := com.ExecuteResponseContainer{RowsChanged: rowsChanged, Status: "OK"}
+	// Return the success message
 	jsonData, err := json.Marshal(z)
 	if err != nil {
 		log.Println(err)

webui/templates/execute.html

@@ -37,6 +37,23 @@
                 <uib-tab index="0" data-cy="sqltab">
                     <uib-tab-heading><span style="color: #555;">SQL</span></uib-tab-heading>
                     <textarea id="usersql" rows="8" onchange="updateSQL()" ng-attr-placeholder="Your SQL statement here..." data-cy="usersqltext">[[ .SQL ]]</textarea>
+
+                    <button type="button" class="btn btn-default" ng-if="db.Records.length > 0" ng-click="toggleResultTable()" data-cy="resultsbtn">{{ toggleLabel }}</button>
+                    <div uib-collapse="isCollapsed">
+                        <div style="max-width: 100%; overflow: auto; border: 1px solid #DDD; border-radius: 7px 7px 0 0;">
+                            <table class="table table-bordered table-striped table-responsive" style="margin-bottom: 0; padding-bottom: 0;" data-cy="resultstbl">
+                                <thead>
+                                <tr>
+                                    <th ng-repeat="col in db.ColNames" style="padding: 7px 0 6px 6px;">{{ col }}</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr ng-repeat="row in db.Records">
+                                    <td ng-repeat="val in row" dir="auto"><pre style="background-color: transparent; border: none; padding: 0px; margin: 0px;" ng-bind-html="val.Value | fixSpaces"></pre></td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
                 </uib-tab>
             </uib-tabset>
         </div>
@@ -115,6 +132,24 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
         // Initialise things with safe defaults (these are potentially filled out further down the page)
         $scope.selectedName = "[[ .SelectedName ]]";
         $scope.execNames = [[ .ExecNames ]];
+        $scope.toggleLabel = "Show result table"
+        $scope.isCollapsed = true;
+
+        // Create empty stub to hold returned query data
+        $scope.db = {"ColCount":0,"ColNames":[],"Offset":0,"Records":[],"RowCount":0,"SortCol":"","SortDir":"","Tablename":"","TotalRows":0};
+
+        // Functions for toggling on/off various display elements
+        $scope.toggleResultTable = function() {
+            $scope.isCollapsed = !$scope.isCollapsed;
+            if ($scope.isCollapsed) {
+                $scope.toggleLabel = "Show result table"
+            } else {
+                $scope.toggleLabel = "Hide result table"
+            }
+
+            // Clear any existing status message
+            $scope.statusMessage = "";
+        }
 
         // Ensure the SQL statement name field isn't blank
         // Returns true if a name is present, false if it's missing
@@ -178,6 +213,12 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
             )
         }
 
+        // Clear out any existing table data
+        $scope.clearData = function() {
+            $scope.db.ColNames = [];
+            $scope.db.Records = [];
+        }
+
         // If there are saved SQL statements but none of them is named "default", then change the Saved SQL drop down
         // selector to use the first one
         if (($scope.execNames.length > 0) && (!$scope.execNames.includes("default"))) {
@@ -218,15 +259,24 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
                         // Display a success message
                         $scope.statusMessageColour = "green";
                         $scope.statusMessage = nowString() + "SQL statement '" + name + "' deleted";
+
+                        // Clear out any existing table data
+                        $scope.clearData();
                     }, function failure(response) {
                         // The deletion failed, so display the returned error message
                         $scope.statusMessageColour = "red";
                         $scope.statusMessage = nowString() + "Deleting '" + name + "' failed: " + response.data;
+
+                        // Clear out any existing table data
+                        $scope.clearData();
                     }
                 )
             } else {
                 $scope.statusMessageColour = "red";
                 $scope.statusMessage = nowString() + "Unknown SQL statement";
+
+                // Clear out any existing table data
+                $scope.clearData();
             }
         };
 
@@ -239,18 +289,38 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
             let encoded = base64url(userSQL);
             $http.get("/x/execlivesql/[[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]]?commit=[[ .DB.Info.CommitID ]]&sql="+encoded).then(
                 function success(response) {
-                    $scope.statusMessageColour = "green";
-                    if (response.data["rows_changed"] === 0) {
-                        $scope.statusMessage = nowString() + "Execution succeeded";
-                    } else if (response.data["rows_changed"] === 1) {
-                        $scope.statusMessage = nowString() + "Execution success: " + response.data["rows_changed"] + " row changed";
+                    // We can potentially receive either "Execute SQL" or Query responses here
+                    if ("rows_changed" in response.data) {
+                        // Handle the response as for Execute SQL
+                        $scope.statusMessageColour = "green";
+                        if (response.data["rows_changed"] === 0) {
+                            $scope.statusMessage = nowString() + "Execution succeeded";
+                        } else if (response.data["rows_changed"] === 1) {
+                            $scope.statusMessage = nowString() + "Execution success: " + response.data["rows_changed"] + " row changed";
+                        } else {
+                            $scope.statusMessage = nowString() + "Execution success: " + response.data["rows_changed"] + " rows changed";
+                        }
+
+                        // Clear out any existing table data
+                        $scope.clearData();
                     } else {
-                        $scope.statusMessage = nowString() + "Execution success: " + response.data["rows_changed"] + " rows changed";
+                        // Give a useful "success" status message
+                        $scope.statusMessageColour = "green";
+                        if (response.data["RowCount"] === 0) {
+                            $scope.statusMessage = nowString() + "SQL query ran without error, but returned no records";
+                            $scope.clearData();
+                        } else {
+                            $scope.statusMessage = nowString() + "SQL query ran successfully";
+                            $scope.db = response.data;
+                        }
                     }
                 }, function failure(response) {
                     // Retrieving data failed, so display the returned error message and hide the graph
                     $scope.statusMessageColour = "red";
                     $scope.statusMessage = nowString() + "Executing SQL statement failed: " + response.data;
+
+                    // Clear out any existing table data
+                    $scope.clearData();
                 }
             )
         };