From 30ecfae8f3c0062909052ba5e0d330b24ee3ccd7 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Wed, 24 Feb 2016 16:48:15 -0800
Subject: [PATCH] Tackling Featured Datasets

---
 panoramix/assets/html/featured.html           | 45 ++++++++++++++++
 panoramix/assets/javascripts/featured.js      | 14 +++++
 panoramix/assets/javascripts/sql.js           |  1 +
 panoramix/assets/package.json                 |  1 +
 panoramix/assets/webpack.config.js            |  1 +
 .../panoramix/featured_datasets.html          | 54 -------------------
 panoramix/views.py                            |  6 +--
 7 files changed, 65 insertions(+), 57 deletions(-)
 create mode 100644 panoramix/assets/html/featured.html
 create mode 100644 panoramix/assets/javascripts/featured.js
 delete mode 100644 panoramix/templates/panoramix/featured_datasets.html

diff --git a/panoramix/assets/html/featured.html b/panoramix/assets/html/featured.html
new file mode 100644
index 0000000000000..cd8b034a385ac
--- /dev/null
+++ b/panoramix/assets/html/featured.html
@@ -0,0 +1,45 @@
+{% extends "refactor/basic.html" %}
+{% block body %}
+<div class="container">
+  <div class="header">
+    <h3><i class='fa fa-star'></i> Featured Datasets </h3>
+  </div>
+  <hr/>
+  <table class="table table-hover dataTable table-bordered" id="dataset-table" style="display:None">
+      <thead>
+          <tr>
+              <th>Table</th>
+              <th>Database</th>
+              <th>Owner</th>
+              <th></th>
+          </tr>
+      </thead>
+      <tbody>
+      {% for dataset in featured_datasets %}
+          <tr>
+              <td>
+                <div class="intable-longtext">
+                  <h4>{{ dataset.table_name }}</h4>
+                  <p>{{ utils.markdown(dataset.description) | safe }}</p>
+                </div>
+              </td>
+              <td class="small_table">{{ dataset.database }}</td>
+              <td class="small_table">{{ dataset.owner }}</td>
+              <td class="small_table"><a class="btn btn-default" href="{{ dataset.default_endpoint }}"><i class='fa fa-line-chart'/></a></td>
+         </tr>
+      {% endfor %}
+      </tbody>
+  </table>
+  <hr/>
+</div>
+{% endblock %}
+
+{% block head_css %}
+{{ super() }}
+<link rel="stylesheet" type="text/css" href="/static/assets/node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css" />
+{% endblock %}
+
+{% block tail_js %}
+  {{ super() }}
+  <script src="/static/assets/javascripts/dist/featured.entry.js"></script>
+{% endblock %}
diff --git a/panoramix/assets/javascripts/featured.js b/panoramix/assets/javascripts/featured.js
new file mode 100644
index 0000000000000..c8e542c2076f6
--- /dev/null
+++ b/panoramix/assets/javascripts/featured.js
@@ -0,0 +1,14 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+require('datatables');
+require('datatables-bootstrap3-plugin');
+require('bootstrap');
+
+$(document).ready(function() {
+    $('#dataset-table').DataTable({
+        "bPaginate": false,
+        "order": [[ 1, "asc" ]]
+    });
+    $('#dataset-table_info').remove();
+    $('#dataset-table').show();
+} );
diff --git a/panoramix/assets/javascripts/sql.js b/panoramix/assets/javascripts/sql.js
index 508163fdf4faa..ab2386629484c 100644
--- a/panoramix/assets/javascripts/sql.js
+++ b/panoramix/assets/javascripts/sql.js
@@ -2,6 +2,7 @@ var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 require('select2');
 require('datatables');
+require('bootstrap');
 
 var ace = require('brace');
 require('brace/mode/sql');
diff --git a/panoramix/assets/package.json b/panoramix/assets/package.json
index 627fec4bf5240..6596847757e9a 100644
--- a/panoramix/assets/package.json
+++ b/panoramix/assets/package.json
@@ -46,6 +46,7 @@
     "d3-tip": "^0.6.7",
     "d3.layout.cloud": "^1.2.0",
     "datatables": "^1.10.9",
+    "datatables-bootstrap3-plugin": "^0.4.0",
     "exports-loader": "^0.6.3",
     "font-awesome": "^4.5.0",
     "gridster": "^0.5.6",
diff --git a/panoramix/assets/webpack.config.js b/panoramix/assets/webpack.config.js
index a2d97f51efab0..5aff4c3797e8e 100644
--- a/panoramix/assets/webpack.config.js
+++ b/panoramix/assets/webpack.config.js
@@ -10,6 +10,7 @@ var config = {
     //dashboard: APP_DIR + '/javascripts/dist/dashboard.js',
     explore: APP_DIR + '/javascripts/explore.js',
     sql: APP_DIR + '/javascripts/sql.js',
+    featured: APP_DIR + '/javascripts/featured.js',
   },
   output: {
     path: BUILD_DIR,
diff --git a/panoramix/templates/panoramix/featured_datasets.html b/panoramix/templates/panoramix/featured_datasets.html
deleted file mode 100644
index 8473106277535..0000000000000
--- a/panoramix/templates/panoramix/featured_datasets.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "panoramix/base.html" %}
-{% block content %}
-<div class="header">
-  <h3><i class='fa fa-star'></i> Featured Datasets </h3>
-</div>
-<hr/>
-<table class="table table-hover dataTable table-bordered" id="dataset-table" style="display:None">
-    <thead>
-        <tr>
-            <th>Table</th>
-            <th>Database</th>
-            <th>Owner</th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-    {% for dataset in featured_datasets %}
-        <tr>
-            <td>
-              <div class="intable-longtext">
-                <h4>{{ dataset.table_name }}</h4>
-                <p>{{ utils.markdown(dataset.description) | safe }}</p>
-              </div>
-            </td>
-            <td class="small_table">{{ dataset.database }}</td>
-            <td class="small_table">{{ dataset.owner }}</td>
-            <td class="small_table"><a class="btn btn-default" href="{{ dataset.default_endpoint }}"><i class='fa fa-line-chart'/></a></td>
-       </tr>
-    {% endfor %}
-    </tbody>
-</table>
-<hr/>
-{% endblock %}
-
-{% block head_css %}
-{{ super() }}
-<link rel="stylesheet" type="text/css" href="/static/assets/vendor/dataTables/dataTables.bootstrap.css" />
-{% endblock %}
-
-{% block tail_js %}
-{{ super() }}
-<script src="/static/assets/vendor/dataTables/jquery.dataTables.min.js"></script>
-<script src="/static/assets/vendor/dataTables/dataTables.bootstrap.js"></script>
-<script>
-    $(document).ready(function() {
-        $('#dataset-table').DataTable({
-            "bPaginate": false,
-            "order": [[ 1, "asc" ]]
-        });
-        $('#dataset-table_info').remove();
-        $('#dataset-table').show();
-    } );
-</script>
-{% endblock %}
diff --git a/panoramix/views.py b/panoramix/views.py
index 5c3d5764f3309..8d52142cc0471 100644
--- a/panoramix/views.py
+++ b/panoramix/views.py
@@ -703,8 +703,8 @@ def show_traceback(self):
             art=ascii_art.error), 500
 
     @has_access
-    @expose("/featured_datasets", methods=['GET'])
-    def featured_datasets(self):
+    @expose("/featured", methods=['GET'])
+    def featured(self):
         session = db.session()
         datasets_sqla = (
             session.query(models.SqlaTable)
@@ -718,7 +718,7 @@ def featured_datasets(self):
         )
         featured_datasets = datasets_sqla + datasets_druid
         return self.render_template(
-            'panoramix/featured_datasets.html',
+            'refactor/featured.html',
             featured_datasets=featured_datasets,
             utils=utils)