Merge pull request #821 from getredash/fix/embed

Fix embed URL & move logic into a directive
getredash · Feb 10, 2016 · 253c4fd · 253c4fd
2 parents 32b928d + cda1068
commit 253c4fd
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
@@ -183,6 +183,7 @@ <h1><span class="glyphicon glyphicon-lock"></span></h1>
 <script>
     // TODO: move currentUser & features to be an Angular service
     var clientConfig = {{ client_config|safe }};
+    var basePath = "{{base_href}}";
     var currentUser = {{ user|safe }};
     var currentOrgSlug = "{{ org_slug }}";
 

diff --git a/rd_ui/app/scripts/visualizations/base.js b/rd_ui/app/scripts/visualizations/base.js
@@ -186,12 +186,40 @@
     }
   };
 
+  var EmbedCode = function ($location) {
+    return {
+      restrict: 'E',
+      scope: {
+        visualization: '=',
+        query: '='
+      },
+      template:
+        '<div class="col-lg-8 embed-code">' +
+            '<i class="fa fa-code" ng-click="showCode = showCode==true ? false : true;"></i>' +
+            '<div ng-show="showCode">' +
+                '<span class="text-muted">Embed code for this visualization: <small>(height should be adjusted)</small></span>' +
+                '<code>&lt;iframe src="{{ embedUrl }}"<br/>' +
+                          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
+                          'width="720" height="391"&gt;&lt;/iframe&gt;</code>' +
+            '</div>' +
+        '</div>',
+      replace: true,
+      link: function (scope) {
+        scope.$watch('visualization', function(visualization) {
+          if (visualization) {
+            scope.embedUrl = basePath + 'embed/query/' + scope.query.id + '/visualization/' + scope.visualization.id + '?api_key=' + scope.query.api_key;
+          }
+        });
+      }
+    };
+  };
 
   angular.module('redash.visualization', [])
       .provider('Visualization', VisualizationProvider)
       .directive('visualizationRenderer', ['$location', 'Visualization', VisualizationRenderer])
       .directive('visualizationOptionsEditor', ['Visualization', VisualizationOptionsEditor])
       .directive('visualizationName', ['Visualization', VisualizationName])
+      .directive('embedCode', ['$location', EmbedCode])
       .directive('filters', Filters)
-      .directive('editVisulatizationForm', ['Events', 'Visualization', 'growl', EditVisualizationForm])
+      .directive('editVisulatizationForm', ['Events', 'Visualization', 'growl', EditVisualizationForm]);
 })();
diff --git a/rd_ui/app/views/query.html b/rd_ui/app/views/query.html
@@ -236,15 +236,7 @@ <h4 class="modal-title">Query Archive</h4>
                             <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
 
                             <div class="row" ng-if="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
-                                <div class="col-lg-8 embed-code">
-                                    <i class="fa fa-code" ng-click="show_code = show_code==true ? false : true;"></i>
-                                    <div ng-show="show_code">
-                                        <span class="text-muted">Embed code for this table: <small>(height should be adjusted)</small></span>
-                                        <code>&lt;iframe src="{{ base_url }}/embed/query/{{query.id}}/visualization/{{ vis.id }}?api_key={{query.api_key}}"<br/>
-                                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                                  width="720" height="1650"&gt;&lt;/iframe&gt;</code>
-                                    </div>
-                                </div>
+                                <embed-code visualization="vis" query="query"/>
                             </div>
                         </div>
 
@@ -254,15 +246,7 @@ <h4 class="modal-title">Query Archive</h4>
                             <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
 
                             <div class="row">
-                                <div class="col-lg-8 embed-code">
-                                    <i class="fa fa-code" ng-click="show_code = show_code==true ? false : true;"></i>
-                                    <div ng-show="show_code">
-                                        <span class="text-muted">Embed code for this chart: <small>(height should be adjusted)</small></span>
-                                        <code>&lt;iframe src="{{ base_url }}/embed/query/{{query.id}}/visualization/{{ vis.id }}?api_key={{query.api_key}}"<br/>
-                                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                                  width="720" height="391"&gt;&lt;/iframe&gt;</code>
-                                    </div>
-                                </div>
+                                <embed-code visualization="vis" query="query"/>
                             </div>
 
                             <edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="canEdit"></edit-visulatization-form>

diff --git a/rd_ui/app/views/visualization-embed.html b/rd_ui/app/views/visualization-embed.html
@@ -6,6 +6,7 @@
                 <div class="panel-heading">
                     <h3 class="panel-title">
                         <p>
+                            <img src="/images/redash_icon_small.png" style="height: 24px;"/>
                             <visualization-name visualization="visualization"/>
                         </p>
                         <div class="text-muted" ng-bind-html="query.description | markdown"></div>
@@ -18,10 +19,6 @@ <h3 class="panel-title">
                 <div class="panel-footer">
                     <span class="label label-default">Updated: <span am-time-ago="queryResult.getUpdatedAt()"></span></span>
 
-                    <span class="pull-right">
-                        <a class="btn btn-default btn-xs" ng-href="queries/{{query.id}}#{{widget.visualization.id}}"  target="_blank"><span class="glyphicon glyphicon-link"></span></a>
-                    </span>
-
                     <span class="pull-right">
                         <a class="btn btn-default btn-xs" ng-disabled="!queryResult.getData()" query-result-link target="_self">
                             <span class="glyphicon glyphicon-cloud-download"></span>

diff --git a/redash/handlers/embed.py b/redash/handlers/embed.py
@@ -1,6 +1,6 @@
+from funcy import project
 from flask import render_template, url_for
 from flask.ext.restful import abort
-
 from flask_login import login_required
 
 from redash import models, settings
@@ -31,6 +31,10 @@ def embed(query_id, visualization_id, org_slug=None):
     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, ('created_at', 'description', 'name', 'id', 'latest_query_data_id', 'name', 'updated_at'))
+
     if settings.MULTI_ORG:
         base_href = url_for('index', _external=True, org_slug=current_org.slug)
     else: