Merge pull request #1617 from 44px/refresh-schema-button

Add "Refresh Schema" button to the datasource

client/app/assets/css/redash.css

@@ -415,6 +415,16 @@ counter-renderer counter-name {
   background-color: white;
 }
 
+.schema-control {
+  display: flex;
+  padding: 5px 0;
+}
+
+.schema-control .form-control {
+  height: 30px;
+  margin-right: 5px;
+}
+
 .schema-browser {
   height: calc(100% - 45px);
   overflow-y: auto;

client/app/pages/queries/query.html

@@ -81,7 +81,11 @@
   <!-- editor -->
   <div class="container">
       <div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
-        <schema-browser schema="schema" class="col-md-3 hidden-sm hidden-xs schema-container" ng-show="hasSchema"></schema-browser>
+        <schema-browser class="col-md-3 hidden-sm hidden-xs schema-container"
+                        schema="schema"
+                        on-refresh="refreshSchema()"
+                        ng-show="hasSchema">
+        </schema-browser>
 
         <div ng-class="editorSize" style="height:100%;">
             <div class="p-5">

client/app/pages/queries/schema-browser.html

@@ -1,13 +1,21 @@
 <div class="schema-container">
-  <div class="p-t-5 p-b-5">
-    <input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
+  <div class="schema-control">
+    <input type="text" placeholder="Search schema..." class="form-control" ng-model="$ctrl.schemaFilter">
+    <button class="btn btn-default"
+            title="Refresh Schema"
+            ng-click="$ctrl.onRefresh()">
+      <span class="zmdi zmdi-refresh"></span>
+    </button>
   </div>
 
-  <div class="schema-browser" vs-repeat vs-size="getSize(table)">
-    <div ng-repeat="table in schema | filter:schemaFilter track by table.name">
-      <div class="table-name" ng-click="showTable(table)">
-        <i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span>
-        <span ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
+  <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
+    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilter track by table.name">
+      <div class="table-name" ng-click="$ctrl.showTable(table)">
+        <i class="fa fa-table"></i>
+        <strong>
+          <span title="{{table.name}}">{{table.name}}</span>
+          <span ng-if="table.size !== undefined"> ({{table.size}})</span>
+        </strong>
       </div>
       <div uib-collapse="table.collapsed">
         <div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>

client/app/pages/queries/schema-browser.js

@@ -1,31 +1,31 @@
 import template from './schema-browser.html';
 
-function schemaBrowser() {
-  return {
-    restrict: 'E',
-    scope: {
-      schema: '=',
-    },
-    template,
-    link($scope) {
-      $scope.showTable = (table) => {
-        table.collapsed = !table.collapsed;
-        $scope.$broadcast('vsRepeatTrigger');
-      };
+function SchemaBrowserCtrl($scope) {
+  this.showTable = (table) => {
+    table.collapsed = !table.collapsed;
+    $scope.$broadcast('vsRepeatTrigger');
+  };
 
-      $scope.getSize = (table) => {
-        let size = 18;
+  this.getSize = (table) => {
+    let size = 18;
 
-        if (!table.collapsed) {
-          size += 18 * table.columns.length;
-        }
+    if (!table.collapsed) {
+      size += 18 * table.columns.length;
+    }
 
-        return size;
-      };
-    },
+    return size;
   };
 }
 
+const SchemaBrowser = {
+  bindings: {
+    schema: '<',
+    onRefresh: '&',
+  },
+  controller: SchemaBrowserCtrl,
+  template,
+};
+
 export default function (ngModule) {
-  ngModule.directive('schemaBrowser', schemaBrowser);
+  ngModule.component('schemaBrowser', SchemaBrowser);
 }

client/app/pages/queries/view.js

@@ -43,26 +43,36 @@ function QueryViewCtrl($scope, Events, $route, $routeParams, $location, $window,
     return dataSourceId;
   }
 
-  function updateSchema() {
-    $scope.hasSchema = false;
-    $scope.editorSize = 'col-md-12';
-    DataSource.getSchema({ id: $scope.query.data_source_id }, (data) => {
-      if (data && data.length > 0) {
+  function toggleSchemaBrowser(hasSchema) {
+    $scope.hasSchema = hasSchema;
+    $scope.editorSize = hasSchema ? 'col-md-9' : 'col-md-12';
+  }
+
+  function getSchema(refresh = undefined) {
+    DataSource.getSchema({ id: $scope.query.data_source_id, refresh }, (data) => {
+      const hasPrevSchema = refresh ? ($scope.schema && ($scope.schema.length > 0)) : false;
+      const hasSchema = data && (data.length > 0);
+
+      if (hasSchema) {
         $scope.schema = data;
         data.forEach((table) => {
           table.collapsed = true;
         });
-
-        $scope.editorSize = 'col-md-9';
-        $scope.hasSchema = true;
-      } else {
-        $scope.schema = undefined;
-        $scope.hasSchema = false;
-        $scope.editorSize = 'col-md-12';
+      } else if (hasPrevSchema) {
+        toastr.error('Schema refresh failed. Please try again later.');
       }
+
+      toggleSchemaBrowser(hasSchema || hasPrevSchema);
     });
   }
 
+  function updateSchema() {
+    toggleSchemaBrowser(false);
+    getSchema();
+  }
+
+  $scope.refreshSchema = () => getSchema(true);
+
   function updateDataSources(dataSources) {
     // Filter out data sources the user can't query (or used by current query):
     $scope.dataSources = dataSources.filter(dataSource =>

client/app/services/data-source.js

@@ -3,7 +3,7 @@ function DataSource($resource) {
     get: { method: 'GET', cache: false, isArray: false },
     query: { method: 'GET', cache: false, isArray: true },
     test: { method: 'POST', cache: false, isArray: false, url: 'api/data_sources/:id/test' },
-    getSchema: { method: 'GET', cache: true, isArray: true, url: 'api/data_sources/:id/schema' },
+    getSchema: { method: 'GET', cache: false, isArray: true, url: 'api/data_sources/:id/schema' },
   };
 
   const DataSourceResource = $resource('api/data_sources/:id', { id: '@id' }, actions);