Working embeds & renamed frontend to client

frontend/app/pages/queries/index.js → client/app/pages/queries/index.js

@@ -7,6 +7,7 @@ import registerEmbedCodeDialog from './embed-code-dialog';
 import registerScheduleDialog from './schedule-dialog';
 import registerAlertUnsavedChanges from './alert-unsaved-changes';
 import registerQuerySearchResultsPage from './queries-search-results-page';
+import registerVisualizationEmbed from './visualization-embed';
 
 export default function (ngModule) {
   registerQueryResultsLink(ngModule);
@@ -15,6 +16,7 @@ export default function (ngModule) {
   registerEmbedCodeDialog(ngModule);
   registerScheduleDialog(ngModule);
   registerAlertUnsavedChanges(ngModule);
+  registerVisualizationEmbed(ngModule);
 
   return Object.assign({}, registerQuerySearchResultsPage(ngModule),
                            registerSourceView(ngModule),

client/app/pages/queries/visualization-embed.html

@@ -0,0 +1,48 @@
+<div class="tile m-10">
+  <div class="t-heading p-10">
+    <h3 class="th-title">
+      <p>
+        <img src="{{$ctrl.logoUrl}}" style="height: 24px;"/>
+        {{$ctrl.query.name}}
+        <small><visualization-name visualization="$ctrl.visualization"/></small>
+      </p>
+      <small ng-if="$ctrl.showQueryDescription">
+        <div class="text-muted" ng-bind-html="$ctrl.query.description | markdown"></div>
+      </small>
+    </h3>
+  </div>
+
+  <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult" class="t-body">
+  </visualization-renderer>
+
+  <div class="bg-ace clearfix p-10">
+    <div class="col-sm-6">
+      <span class="label label-default hidden-print">Updated: <span am-time-ago="$ctrl.queryResult.getUpdatedAt()"></span></span>
+      <span class="label label-default visible-print">Updated: {{$ctrl.queryResult.getUpdatedAt() | dateTime}}</span>
+    </div>
+    <div class="col-sm-6 text-right hidden-print">
+      <a class="btn btn-default btn-xs" ng-href="queries/{{$ctrl.query.id}}#{{$ctrl.visualization.id}}" target="_blank" tooltip="Open in Redash">
+        <span class="zmdi zmdi-link"></span>
+      </a>
+
+      <div class="btn-group" uib-dropdown>
+        <button type="button" class="btn btn-default btn-xs dropdown-toggle" aria-haspopup="true" uib-dropdown-toggle
+                aria-expanded="false">
+          Download Dataset <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu pull-right" uib-dropdown-menu>
+          <li>
+            <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'csv', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'csv')}}" target="_self">
+              <span class="fa fa-file-o"></span> Download as CSV File
+            </a>
+          </li>
+          <li>
+            <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'xlsx', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'xlsx')}}"  target="_self">
+              <span class="fa fa-file-excel-o"></span> Download as Excel File
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

client/app/pages/queries/visualization-embed.js

@@ -0,0 +1,49 @@
+import { find } from 'underscore';
+import template from './visualization-embed.html';
+import logoUrl from '../../assets/images/redash_icon_small.png';
+
+const VisualizationEmbed = {
+  template,
+  bindings: {
+    data: '<',
+  },
+  controller($routeParams, Query, QueryResult) {
+    document.querySelector('body').classList.add('headless');
+    const visualizationId = parseInt($routeParams.visualizationId, 10);
+    this.showQueryDescription = $routeParams.showDescription;
+    this.apiKey = $routeParams.api_key;
+    this.logoUrl = logoUrl;
+    this.query = new Query(this.data[0]);
+    this.queryResult = new QueryResult(this.data[1]);
+    this.visualization =
+      find(this.query.visualizations, visualization => visualization.id === visualizationId);
+  },
+};
+
+export default function (ngModule) {
+  ngModule.component('visualizationEmbed', VisualizationEmbed);
+
+  function session($http, $route, Auth) {
+    const apiKey = $route.current.params.api_key;
+    Auth.setApiKey(apiKey);
+    return Auth.loadSession();
+  }
+
+  function loadData($http, $route, $q, Auth) {
+    return session($http, $route, Auth).then(() => {
+      const queryId = $route.current.params.queryId;
+      const query = $http.get(`/api/queries/${queryId}`).then(response => response.data);
+      const queryResult = $http.get(`/api/queries/${queryId}/results.json`).then(response => response.data);
+      return $q.all([query, queryResult]);
+    });
+  }
+
+  ngModule.config(($routeProvider) => {
+    $routeProvider.when('/embed/query/:queryId/visualization/:visualizationId', {
+      template: '<visualization-embed data="$resolve.data"></visualization-embed>',
+      resolve: {
+        data: loadData,
+      },
+    });
+  });
+}

frontend/app/services/query-result.js → client/app/services/query-result.js

@@ -378,6 +378,18 @@ function QueryResultService($resource, $timeout, $q) {
       });
     }
 
+    getLink(queryId, fileType, apiKey) {
+      let link = `/api/queries/${queryId}/results/${this.getId()}.${fileType}`;
+      if (apiKey) {
+        link = `${link}?api_key=${apiKey}`;
+      }
+      return link;
+    }
+
+    getName(queryName, fileType) {
+      return `${queryName.replace(' ', '_') + moment(this.getUpdatedAt()).format('_YYYY_MM_DD')}.${fileType}`;
+    }
+
     static get(dataSourceId, query, maxAge, queryId) {
       const queryResult = new QueryResult();
 

redash/handlers/embed.py

@@ -69,35 +69,6 @@ def run_query_sync(data_source, parameter_values, query_text, max_age=0):
 @routes.route(org_scoped_rule('/embed/query/<query_id>/visualization/<visualization_id>'), methods=['GET'])
 @login_required
 def embed(query_id, visualization_id, org_slug=None):
-    query = models.Query.get_by_id_and_org(query_id, current_org)
-    require_access(query.groups, current_user, view_only)
-    vis = query.visualizations.where(models.Visualization.id == visualization_id).first()
-    qr = {}
-
-    parameter_values = collect_parameters_from_request(request.args)
-
-    if vis is not None:
-        vis = vis.to_dict()
-        qr = query.latest_query_data
-        if settings.ALLOW_PARAMETERS_IN_EMBEDS == True and len(parameter_values) > 0:
-            # run parameterized query
-            #
-            # WARNING: Note that the external query parameters
-            #          are a potential risk of SQL injections.
-            #
-            max_age = int(request.args.get('maxAge', 0))
-            results = run_query_sync(query.data_source, parameter_values, query.query, max_age=max_age)
-            if results is None:
-                abort(400, message="Unable to get results for this query")
-            else:
-                qr = {"data": json.loads(results)}
-        elif qr is None:
-            abort(400, message="No Results for this query")
-        else:
-            qr = qr.to_dict()
-    else:
-        abort(404, message="Visualization not found.")
-
     record_event(current_org, current_user, {
         'action': 'view',
         'object_id': visualization_id,
@@ -107,21 +78,22 @@ def embed(query_id, visualization_id, org_slug=None):
         'referer': request.headers.get('Referer')
     })
 
-    client_config = {}
-    client_config.update(settings.COMMON_CLIENT_CONFIG)
-
-    qr = project(qr, ('data', 'id', 'retrieved_at'))
-    vis = project(vis, ('description', 'name', 'id', 'options', 'query', 'type', 'updated_at'))
-    vis['query'] = project(vis['query'], ('created_at', 'description', 'name', 'id', 'latest_query_data_id', 'name', 'updated_at'))
-
-    return render_template("embed.html",
-                           client_config=json_dumps(client_config),
-                           visualization=json_dumps(vis),
-                           query_result=json_dumps(qr))
+    full_path = safe_join(settings.STATIC_ASSETS_PATHS[-2], 'index.html')
+    return send_file(full_path, **dict(cache_timeout=0, conditional=True))
 
 
 @routes.route(org_scoped_rule('/public/dashboards/<token>'), methods=['GET'])
 @login_required
 def public_dashboard(token, org_slug=None):
+    # TODO: bring this back.
+    # record_event(current_org, current_user, {
+    #     'action': 'view',
+    #     'object_id': dashboard.id,
+    #     'object_type': 'dashboard',
+    #     'public': True,
+    #     'headless': 'embed' in request.args,
+    #     'referer': request.headers.get('Referer')
+    # })
+
     full_path = safe_join(settings.STATIC_ASSETS_PATHS[-2], 'index.html')
     return send_file(full_path, **dict(cache_timeout=0, conditional=True))