Merge pull request #263 from Ontotext-AD/GDB-5038-Preview-SQL-Table-Rows

GDB-5038 Preview functionality
Ontotext-AD · Oct 6, 2020 · 435c6b9 · 435c6b9
2 parents 7df4643 + 662b7e3
commit 435c6b9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 5 deletions.
diff --git a/src/js/angular/jdbc/controllers.js b/src/js/angular/jdbc/controllers.js
@@ -63,6 +63,8 @@ function JdbcCreateCtrl($scope, $location, toastr, $repositories, $window, $time
     $scope.noPadding = {paddingRight: 0, paddingLeft: 0};
     $scope.sqlTypes = ['string', 'iri', 'boolean', 'byte', 'short', 'int', 'long', 'float', 'double', 'decimal', 'date', 'time', 'timestamp', 'Get suggestion...'];
     $scope.currentTabConfig = {};
+    // This property is obligatory in order to show YASQUE and YASR properly
+    $scope.orientationViewMode = true;
 
 
     $scope.$watch(function () {
@@ -116,7 +118,10 @@ function JdbcCreateCtrl($scope, $location, toastr, $repositories, $window, $time
             pageSize: 100, // page limit 100 as this is only used for preview
             page: 1,
             allResultsCount: 0,
-            resultsCount: 0
+            resultsCount: 0,
+            // QueryType of currentTabConfig is needed for visualization of YASR.
+            // If not set, YASR is hidden
+            queryType: window.editor.getQueryType()
         };
     };
 
@@ -222,7 +227,9 @@ function JdbcCreateCtrl($scope, $location, toastr, $repositories, $window, $time
 
             $scope.tabsData = $scope.tabs = [defaultTabConfig];
             $scope.currentQuery = angular.copy(defaultTabConfig);
-            $scope.viewMode = 'yasr';
+            // ViewMode should be set to "none" to be
+            // displayed YASQUE and YASR at the same time
+            $scope.viewMode = 'none';
 
             if (window.editor) {
                 $scope.setQuery($scope.currentQuery.query);
@@ -361,4 +368,43 @@ function JdbcCreateCtrl($scope, $location, toastr, $repositories, $window, $time
                 $scope.currentQuery.isPristine = false;
             });
     };
+
+    $scope.getPreview = function () {
+        $scope.executedQueryTab = $scope.currentQuery;
+        if (window.editor.getQueryType() !== 'SELECT') {
+            toastr.error('JDBC works only with SELECT queries.');
+            return;
+        }
+        if (!$scope.queryIsRunning) {
+            $scope.currentQuery.outputType = 'table';
+            $scope.resetCurrentTabConfig();
+
+            setLoader(true, 'Preview of first 100 rows of table ' + $scope.name,
+                'Normally this is a fast operation but it may take longer if a bigger repository needs to be initialised first.');
+            if ($scope.currentQuery.isNewConfiguration) {
+                const sqlView = JSON.stringify({
+                    name: $scope.currentQuery.name,
+                    query: $scope.currentQuery.query,
+                    columns: $scope.currentQuery.columns || []
+                })
+                JdbcRestService.getNewSqlTablePreview(sqlView)
+                    .done(function (data, textStatus, jqXhr) {
+                        setLoader(false);
+                        window.yasr.setResponse(jqXhr, textStatus, null);
+                    }).fail(function (data) {
+                    setLoader(false);
+                    toastr.error('Could not show preview ' + getError(data));
+                });
+            } else {
+                JdbcRestService.getExistingSqlTablePreview($scope.currentQuery.name)
+                    .done(function (data, textStatus, jqXhr) {
+                        setLoader(false);
+                        window.yasr.setResponse(jqXhr, textStatus, null);
+                    }).fail(function (data) {
+                    setLoader(false);
+                    toastr.error('Could not show preview ' + getError(data));
+                });
+            }
+        }
+    }
 }
diff --git a/src/js/angular/rest/jdbc.rest.service.js b/src/js/angular/rest/jdbc.rest.service.js
@@ -15,7 +15,9 @@ function JdbcRestService($http) {
         updateJdbcConfiguration,
         deleteJdbcConfiguration,
         getColumnNames,
-        getColumnsTypeSuggestion
+        getColumnsTypeSuggestion,
+        getExistingSqlTablePreview,
+        getNewSqlTablePreview
     };
 
     function getJdbcConfigurations() {
@@ -78,4 +80,29 @@ function JdbcRestService($http) {
             }
         );
     }
+    function getExistingSqlTablePreview(name, limit) {
+        // Limit in preview is optional. On backend default value is set to 100
+        return $.ajax({
+            method: 'GET',
+            url: `/rest/sql-views/preview/${name}`,
+            params: {
+                limit
+            }
+        })
+    }
+
+    function getNewSqlTablePreview(sqlView, limit) {
+        // Limit in preview is optional. On backend default value is set to 100
+        return $.ajax({
+            method: 'POST',
+            url: "/rest/sql-views/preview",
+            contentType: "application/json; charset=utf-8",
+            dataType: 'json',
+            data: sqlView,
+            params: {
+                limit
+            },
+            headers: {Accept: 'application/sparql-results+json'}
+        })
+    }
 }
diff --git a/src/pages/jdbc-create.html b/src/pages/jdbc-create.html
@@ -102,12 +102,12 @@ <h1>
             <div class="clearfix">
                 <div class="pull-right">
                     <a ng-href="/jdbc" class="btn btn-lg btn-secondary"
-                       popover="Cancel SQL cofiguration"
+                       popover="Cancel SQL configuration"
                        popover-placement="top"
                        popover-trigger="mouseenter">
                         Cancel
                     </a>
-                    <button ng-if="page === 1" class="btn btn-lg preview-btn" ng-click=""
+                    <button ng-if="page === 1" class="btn btn-lg preview-btn" ng-click="getPreview()"
                             popover="Preview SQL configuration table"
                             popover-placement="top"
                             popover-trigger="mouseenter">