A better welcome page

caravel/assets/javascripts/welcome.js

@@ -4,12 +4,13 @@ var jQuery = window.jQuery = $;
 require('../stylesheets/caravel.css');
 require('../stylesheets/welcome.css');
 require('bootstrap');
-require('datatables');
+require('datatables.net-bs');
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 require('../node_modules/cal-heatmap/cal-heatmap.css');
 
 var CalHeatMap = require('cal-heatmap');
 
-function modelViewTable(selector, modelEndpoint, ordering) {
+function modelViewTable(selector, modelEndpoint) {
   // Builds a dataTable from a flask appbuilder api endpoint
   $.getJSON(modelEndpoint + '/api/read', function (data) {
     var tableData = jQuery.map(data.result, function (el, i) {
@@ -21,13 +22,24 @@ function modelViewTable(selector, modelEndpoint, ordering) {
     var cols = jQuery.map(data.list_columns, function (col, i) {
       return { sTitle: data.label_columns[col] };
     });
+    var panel = $(selector).parents('.panel');
+    panel.find("img.loading").remove();
     $(selector).DataTable({
       aaData: tableData,
       aoColumns: cols,
-      bPaginate: false,
-      order: ordering,
-      searching: false
+      bPaginate: true,
+      pageLength: 10,
+      bLengthChange: false,
+      aaSorting: [],
+      searching: true
     });
+
+    var search = panel.find(".dataTables_filter input");
+    search.addClass('form-control').detach();
+    search.appendTo(panel.find(".search"));
+    panel.find('.dataTables_filter').remove();
+
+    $(selector).slideDown();
     $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
   });
 }

caravel/assets/package.json

@@ -51,7 +51,7 @@
     "d3-tip": "^0.6.7",
     "datamaps": "^0.4.4",
     "datatables-bootstrap3-plugin": "^0.4.0",
-    "datatables.net": "^1.10.11",
+    "datatables.net-bs": "^1.10.11",
     "exports-loader": "^0.6.3",
     "font-awesome": "^4.5.0",
     "gridster": "^0.5.6",

caravel/assets/stylesheets/welcome.css

@@ -1,21 +1,17 @@
-.welcome .widget{
-  border-radius: 0;
-  border: 1px solid #ccc;
-  box-shadow: 2px 1px 5px -2px #aaa;
-  background-color: #fff;
+.table i {
+  padding-top: 6px;
 }
 
-.welcome .widget .header {
-  background-color: #f1f1f1;
-  text-align: center;
+img.loading {
+    width: 25px;
 }
 
-.welcome .widget>div {
-  padding: 3px;
-  overflow: auto;
-  max-height: 500px;
+.welcome table {
+    display: none;
+    width: 100%;
 }
 
-.table i {
-  padding-top: 6px;
+input {
+    margin-left: 5px;
+    margin-top: 8px;
 }

caravel/assets/visualizations/pivot_table.js

@@ -1,7 +1,7 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 
-require('datatables');
+require('datatables.net-bs');
 require('./pivot_table.css');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 

caravel/assets/visualizations/table.js

@@ -3,7 +3,7 @@ var jQuery = window.jQuery = $;
 var d3 = require('d3');
 
 require('./table.css');
-require('datatables');
+require('datatables.net-bs');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 
 function tableVis(slice) {

caravel/templates/caravel/base.html

@@ -1,7 +1,7 @@
 {% extends "appbuilder/baselayout.html" %}
 
   {% block head_css %}
-    <link rel="icon" type="image/png" href="/static/img/favicon.png">
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
     <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/caravel.css" />
     {{super()}}
   {% endblock %}

caravel/templates/caravel/basic.html

@@ -8,7 +8,7 @@
     {% block head_meta %}{% endblock %}
     {% block head_css %}
       <link rel="stylesheet" type="text/css" href="/static/assets/node_modules/font-awesome/css/font-awesome.min.css" />
-      <link rel="icon" type="image/png" href="/static/img/favicon.png">
+      <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
     {% endblock %}
     {% block head_js %}
       <script src="/static/assets/javascripts/dist/css-theme.entry.js"></script>

caravel/templates/caravel/welcome.html

@@ -17,18 +17,44 @@ <h3>Welcome!</h3>
   <hr/>
   <div class="row">
     <div class="col-md-6">
-      <div class="widget">
-        <div class="header"><h4><i class="fa fa-dashboard"></i> Dashboards</h4></div>
-        <div>
-          <table id="dash_table" class="table"></table>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="row">
+            <div class="col-md-12">
+              <span class="pull-left">
+                <h5><i class="fa fa-dashboard"></i> Dashboards</h5>
+              </span>
+              <span class="search pull-right"></span>
+              <span class="pull-right">
+                <h5><i class="fa fa-search"></i></h5>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-body">
+          <img class="loading" src="/static/assets/images/loading.gif"/>
+          <table id="dash_table" class="table table-condensed" width="100%"></table>
         </div>
       </div>
     </div>
     <div class="col-md-6">
-      <div class="widget">
-        <div class="header"><h4><i class="fa fa-bar-chart"></i> Slices</h4></div>
-        <div>
-          <table id="slice_table" class="table"></table>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="row">
+            <div class="col-md-12">
+              <span class="pull-left">
+                <h5><i class="fa fa-bar-chart"></i> Slices</h5>
+              </span>
+              <span class="search pull-right"></span>
+              <span class="pull-right">
+                <h5><i class="fa fa-search"></i></h5>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-body">
+          <img class="loading" src="/static/assets/images/loading.gif"/>
+          <table id="slice_table" class="table table-condensed" width="100%"></table>
         </div>
       </div>
     </div>

caravel/views.py

@@ -248,6 +248,9 @@ class SliceAsync(SliceModelView):  # noqa
         'created_by_', 'modified', 'icons']
     label_columns = {
         'icons': ' ',
+        'created_by_': 'Creator',
+        'viz_type': 'Type',
+        'slice_link': 'Slice',
     }
 
 appbuilder.add_view_no_menu(SliceAsync)
@@ -298,6 +301,10 @@ def pre_update(self, obj):
 
 class DashboardModelViewAsync(DashboardModelView):  # noqa
     list_columns = ['dashboard_link', 'created_by_', 'modified']
+    label_columns = {
+        'created_by_': 'Creator',
+        'dashboard_link': 'Dashboard',
+    }
 
 appbuilder.add_view_no_menu(DashboardModelViewAsync)