Prechádzať zdrojové kódy

HUE-897 Ported Metastore Manager to Hue 3

Enrico Berti 12 rokov pred
rodič
commit
028e94c

+ 8 - 11
apps/metastore/src/metastore/templates/components.mako

@@ -21,20 +21,17 @@
 <%def name="breadcrumbs(breadcrumbs)">
   <ul class="nav nav-pills hueBreadcrumbBar" id="breadcrumbs">
     <li>
-      <a href="${url('metastore:databases')}"><i class="icon-sitemap"></i> ${_('Databases')}</a>
+      <a href="${url('metastore:databases')}">${_('Databases')} <span class="divider">&gt;</span></a>
     </li>
+    % for crumb in breadcrumbs:
     <li>
-      <ul class="hueBreadcrumb">
-        % for crumb in breadcrumbs:
-          <li>
-            <a href="${ crumb['url'] }">${ crumb['name'] }</a>
-            % if not loop.last:
-              <span class="divider">/</span>
-            % endif
-          </li>
-        % endfor
-      </ul>
+      <a href="${ crumb['url'] }">${ crumb['name'] }
+      % if not loop.last:
+        <span class="divider">&gt;</span>
+      % endif
+      </a>
     </li>
+    % endfor
   </ul>
 </%def>
 

+ 67 - 63
apps/metastore/src/metastore/templates/databases.mako

@@ -23,56 +23,60 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_('Databases'), 'metastore', user) | n,unicode }
 
 <div class="container-fluid" id="databases">
-    <h1>${_('Databases')}</h1>
-    ${ components.breadcrumbs(breadcrumbs) }
-
-    <div class="row-fluid">
-        <div class="span3">
-            <div class="well sidebar-nav">
-              % if has_write_access:
-                <ul class="nav nav-list">
-                    <li><a href="${ url('beeswax:create_database') }">${_('Create a new database')}</a></li>
-                </ul>
-              % endif
-            </div>
-        </div>
-        <div class="span9">
-          <%actionbar:render>
-            <%def name="search()">
-              <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for database name')}">
-            </%def>
-
-            <%def name="actions()">
-              % if has_write_access:
-                <button id="dropBtn" class="btn toolbarBtn" title="${_('Drop the selected databases')}" disabled="disabled"><i class="icon-trash"></i>  ${_('Drop')}</button>
-              % endif
-            </%def>
-          </%actionbar:render>
-            <table class="table table-condensed table-striped datatables">
-                <thead>
-                  <tr>
-                    <th width="1%"><div class="hueCheckbox selectAll" data-selectables="databaseCheck"></div></th>
-                    <th>${_('Database Name')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                % for database in databases:
-                  <tr>
-                    <td data-row-selector-exclude="true" width="1%">
-                      <div class="hueCheckbox databaseCheck"
-                           data-view-url="${ url('metastore:show_tables', database=database) }"
-                           data-drop-name="${ database }"
-                           data-row-selector-exclude="true"></div>
-                    </td>
-                    <td>
-                      <a href="${ url('metastore:show_tables', database=database) }" data-row-selector="true">${ database }</a>
-                    </td>
-                  </tr>
-                % endfor
-                </tbody>
-            </table>
-        </div>
+  <div class="row-fluid">
+  % if has_write_access:
+    <div class="span3">
+      <div class="sidebar-nav">
+        <ul class="nav nav-list">
+          <li class="nav-header">${_('actions')}</li>
+          <li><a href="${ url('beeswax:create_database') }">${_('Create a new database')}</a></li>
+        </ul>
+      </div>
     </div>
+    <div class="span9">
+  %else:
+    <div class="span12">
+  % endif
+      <div class="card">
+        <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
+        <%actionbar:render>
+          <%def name="search()">
+            <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for database name')}">
+          </%def>
+
+          <%def name="actions()">
+            % if has_write_access:
+              <button id="dropBtn" class="btn toolbarBtn" title="${_('Drop the selected databases')}" disabled="disabled"><i class="icon-trash"></i>  ${_('Drop')}</button>
+            % endif
+          </%def>
+        </%actionbar:render>
+
+        <table class="table table-condensed table-striped datatables">
+          <thead>
+            <tr>
+              <th width="1%"><div class="hueCheckbox selectAll" data-selectables="databaseCheck"></div></th>
+              <th>${_('Database Name')}</th>
+            </tr>
+          </thead>
+          <tbody>
+          % for database in databases:
+            <tr>
+              <td data-row-selector-exclude="true" width="1%">
+                <div class="hueCheckbox databaseCheck"
+                   data-view-url="${ url('metastore:show_tables', database=database) }"
+                   data-drop-name="${ database }"
+                   data-row-selector-exclude="true"></div>
+              </td>
+              <td>
+                <a href="${ url('metastore:show_tables', database=database) }" data-row-selector="true">${ database }</a>
+              </td>
+            </tr>
+          % endfor
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div id="dropDatabase" class="modal hide fade">
@@ -98,25 +102,25 @@ ${ commonheader(_('Databases'), 'metastore', user) | n,unicode }
 <script type="text/javascript" charset="utf-8">
   $(document).ready(function () {
     var viewModel = {
-        availableDatabases : ko.observableArray(${ databases_json | n,unicode }),
-        chosenDatabases : ko.observableArray([])
+      availableDatabases: ko.observableArray(${ databases_json | n,unicode }),
+      chosenDatabases: ko.observableArray([])
     };
 
     ko.applyBindings(viewModel);
 
     var databases = $(".datatables").dataTable({
-      "sDom":"<'row'r>t<'row'<'span8'i><''p>>",
-      "bPaginate":false,
-      "bLengthChange":false,
-      "bInfo":false,
-      "bFilter":true,
-      "aoColumns":[
-        {"bSortable":false, "sWidth":"1%" },
+      "sDom": "<'row'r>t<'row'<'span8'i><''p>>",
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": true,
+      "aoColumns": [
+        {"bSortable": false, "sWidth": "1%" },
         null
       ],
-      "oLanguage":{
-        "sEmptyTable":"${_('No data available')}",
-        "sZeroRecords":"${_('No matching records')}",
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
       }
     });
 
@@ -158,11 +162,11 @@ ${ commonheader(_('Databases'), 'metastore', user) | n,unicode }
     }
 
     $("#dropBtn").click(function () {
-      $.getJSON("${ url('metastore:drop_database') }", function(data) {
+      $.getJSON("${ url('metastore:drop_database') }", function (data) {
         $("#dropDatabaseMessage").text(data.title);
       });
       viewModel.chosenDatabases.removeAll();
-      $(".hueCheckbox[checked='checked']").each(function( index ) {
+      $(".hueCheckbox[checked='checked']").each(function (index) {
         viewModel.chosenDatabases.push($(this).data("drop-name"));
       });
       $("#dropDatabase").modal("show");

+ 13 - 11
apps/metastore/src/metastore/templates/describe_partitions.mako

@@ -24,23 +24,20 @@
 ${ commonheader(_('Table Partitions: %(tableName)s') % dict(tableName=table.name), app_name, user) | n,unicode }
 
 <div class="container-fluid">
-  <h1>${_('Partitions')}</h1>
-
-  ${ components.breadcrumbs(breadcrumbs) }
-
   <div class="row-fluid">
-    <div class="span2">
-      <div class="well sidebar-nav">
+    <div class="span3">
+      <div class="sidebar-nav">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Actions')}</li>
           <li><a href="${ url('metastore:describe_table', database=database, table=table.name) }">${_('Show Table')}</a></li>
-          <li style="height: 30px"></li>
         </ul>
       </div>
     </div>
-    <div class="span10">
-      <table class="table table-striped table-condensed datatables">
+    <div class="span9">
+      <div class="card">
+        <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
           % if partitions:
+          <table class="table table-striped table-condensed datatables">
           <tr>
           % for field in table.partition_keys:
               <th>${field.name}</th>
@@ -64,10 +61,15 @@ ${ commonheader(_('Table Partitions: %(tableName)s') % dict(tableName=table.name
             % endif
             </tr>
           % endfor
+          </table>
           % else:
-            <tr><td>${_('Table has no partitions.')}</td></tr>
+            <div class="card-body">
+              <p>
+                <div class="alert">${_('The table %s has no partitions.' % table.name)}</div>
+              </p>
+            </div>
           % endif
-      </table>
+        </div>
     </div>
   </div>
 </div>

+ 140 - 143
apps/metastore/src/metastore/templates/describe_table.mako

@@ -30,197 +30,194 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_("%s : %s") % (view_or_table_noun, table.name), app_name, user) | n,unicode }
 
 <%def name="column_table(cols)">
-    <table class="table table-striped table-condensed datatables">
-      <thead>
+  <table class="table table-striped table-condensed datatables">
+    <thead>
+      <tr>
+        <th>${_('Name')}</th>
+        <th>${_('Type')}</th>
+        <th>${_('Comment')}</th>
+      </tr>
+    </thead>
+    <tbody>
+      % for column in cols:
         <tr>
-          <th>${_('Name')}</th>
-          <th>${_('Type')}</th>
-          <th>${_('Comment')}</th>
+          <td>${ column.name }</td>
+          <td>${ column.type }</td>
+          <td>${ column.comment or "" }</td>
         </tr>
-      </thead>
-      <tbody>
-        % for column in cols:
-          <tr>
-            <td>${ column.name }</td>
-            <td>${ column.type }</td>
-            <td>${ column.comment or "" }</td>
-          </tr>
-        % endfor
-      </tbody>
-    </table>
-
+      % endfor
+    </tbody>
+  </table>
 </%def>
 
 <div class="container-fluid">
-    <h1>${_('Table')} ${table.name}</h1>
-
-    ${ components.breadcrumbs(breadcrumbs) }
-
-    <div class="row-fluid">
-        <div class="span2">
-            <div class="well sidebar-nav">
-                <ul class="nav nav-list">
-                    <li class="nav-header">${_('Actions')}</li>
-                    % if has_write_access:
-                    <li><a href="#" id="import-data-btn">${_('Import Data')}</a></li>
-                    % endif
-                    <li><a href="${ url('metastore:read_table', database=database, table=table.name) }">${_('Browse Data')}</a></li>
-                    % if has_write_access:
-                    <li><a href="#dropTable" data-toggle="modal">${_('Drop')} ${view_or_table_noun}</a></li>
-                    % endif
-                    <li><a href="${ table.hdfs_link }" rel="${ table.path_location }">${_('View File Location')}</a></li>
-                    % if table.partition_keys:
-                      <li><a href="${ url('metastore:describe_partitions', database=database, table=table.name) }">${_('Show Partitions')} (${ len(partitions) })</a></li>
-                    % endif
-                </ul>
-            </div>
-        </div>
-        <div class="span10">
+  <div class="row-fluid">
+    <div class="span3">
+      <div class="sidebar-nav">
+        <ul class="nav nav-list">
+          <li class="nav-header">${_('Actions')}</li>
+          % if has_write_access:
+          <li><a href="#" id="import-data-btn">${_('Import Data')}</a></li>
+          % endif
+          <li><a href="${ url('metastore:read_table', database=database, table=table.name) }">${_('Browse Data')}</a></li>
+          % if has_write_access:
+          <li><a href="#dropTable" data-toggle="modal">${_('Drop')} ${view_or_table_noun}</a></li>
+          % endif
+          <li><a href="${ table.hdfs_link }" rel="${ table.path_location }">${_('View File Location')}</a></li>
+          % if table.partition_keys:
+          <li><a href="${ url('metastore:describe_partitions', database=database, table=table.name) }">${_('Show Partitions')} (${ len(partitions) })</a></li>
+          % endif
+        </ul>
+      </div>
+    </div>
+    <div class="span9">
+      <div class="card">
+        <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
+        <div class="card-body">
+          <p>
             % if table.comment:
-                <div class="alert alert-info">${ _('Comment:') } ${ table.comment }</div>
+            <div class="alert alert-info">${ _('Comment:') } ${ table.comment }</div>
             % endif
 
             <ul class="nav nav-tabs">
-                <li class="active"><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
-                % if table.partition_keys:
-                    <li><a href="#partitionColumns" data-toggle="tab">${_('Partition Columns')}</a></li>
-                % endif
-                % if sample is not None:
-                    <li><a href="#sample" data-toggle="tab">${_('Sample')}</a></li>
-                % endif
+              <li class="active"><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
+              % if table.partition_keys:
+              <li><a href="#partitionColumns" data-toggle="tab">${_('Partition Columns')}</a></li>
+              % endif
+              % if sample is not None:
+              <li><a href="#sample" data-toggle="tab">${_('Sample')}</a></li>
+              % endif
             </ul>
 
             <div class="tab-content">
-                <div class="active tab-pane" id="columns">
-                    ${column_table(table.cols)}
+              <div class="active tab-pane" id="columns">
+                ${column_table(table.cols)}
+              </div>
+
+              % if table.partition_keys:
+              <div class="tab-pane" id="partitionColumns">
+                ${column_table(table.partition_keys)}
+              </div>
+              % endif
+
+              % if sample is not None:
+              <div class="tab-pane" id="sample">
+              % if error_message:
+                <div class="alert alert-error">
+                  <h3>${_('Error!')}</h3>
+                  <pre>${error_message | h}</pre>
                 </div>
-
-                % if table.partition_keys:
-                  <div class="tab-pane" id="partitionColumns">
-                    ${column_table(table.partition_keys)}
-                  </div>
-                % endif
-
-                % if sample is not None:
-                    <div class="tab-pane" id="sample">
-                      % if error_message:
-                        <div class="alert alert-error">
-                          <h3>${_('Error!')}</h3>
-                          <pre>${error_message | h}</pre>
-                        </div>
-                      % else:
-                        <table class="table table-striped table-condensed sampleTable">
-                          <thead>
-                            <tr>
-                              % for col in table.cols:
-                                <th>${col.name}</th>
-                              % endfor
-                            </tr>
-                          </thead>
-                          <tbody>
-                            % for i, row in enumerate(sample):
-                              <tr>
-                                % for item in row:
-                                  <td>${ smart_unicode(item, errors='ignore') }</td>
-                                % endfor
-                              </tr>
-                            % endfor
-                          </tbody>
-                        </table>
-                      % endif
-                    </div>
-                % endif
+              % else:
+                <table class="table table-striped table-condensed sampleTable">
+                  <thead>
+                    <tr>
+                    % for col in table.cols:
+                      <th>${col.name}</th>
+                    % endfor
+                    </tr>
+                  </thead>
+                  <tbody>
+                  % for i, row in enumerate(sample):
+                    <tr>
+                    % for item in row:
+                      <td>${ smart_unicode(item, errors='ignore') }</td>
+                    % endfor
+                    </tr>
+                  % endfor
+                  </tbody>
+                </table>
+              % endif
+              </div>
+              % endif
             </div>
+          </p>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 
-
-
-
 <div id="dropTable" class="modal hide fade">
-    <form id="dropTableForm" method="POST" action="${ url('metastore:drop_table', database=database) }">
+  <form id="dropTableForm" method="POST" action="${ url('metastore:drop_table', database=database) }">
     <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal">&times;</a>
-        <h3>${_('Drop Table')}</h3>
+      <a href="#" class="close" data-dismiss="modal">&times;</a>
+
+      <h3>${_('Drop Table')}</h3>
     </div>
     <div class="modal-body">
       <div id="dropTableMessage">
       </div>
     </div>
     <div class="modal-footer">
-        <input type="button" class="btn" data-dismiss="modal" value="${_('Cancel')}" />
-        <input type="submit" class="btn btn-danger" value="${_('Yes, drop this table')}"/>
+      <input type="button" class="btn" data-dismiss="modal" value="${_('Cancel')}"/>
+      <input type="submit" class="btn btn-danger" value="${_('Yes, drop this table')}"/>
     </div>
     <div class="hide">
       <select name="table_selection">
         <option value="${ table.name }" selected>${ table.name }</option>
       </select>
     </div>
-    </form>
+  </form>
 </div>
 
-
 <div id="import-data-modal" class="modal hide fade"></div>
-
 </div>
 
 <style>
-   .sampleTable td, .sampleTable th {
-     white-space: nowrap;
-   }
+  .sampleTable td, .sampleTable th {
+    white-space: nowrap;
+  }
 </style>
 
 <link rel="stylesheet" href="/metastore/static/css/metastore.css" type="text/css">
 
 <script type="text/javascript" charset="utf-8">
-   $(document).ready(function () {
-     $(".datatables").dataTable({
-       "bPaginate": false,
-       "bLengthChange": false,
-       "bInfo": false,
-       "bFilter": false,
-       "oLanguage": {
-            "sEmptyTable": "${_('No data available')}",
-           "sZeroRecords": "${_('No matching records')}",
-       }
-     });
-
-     % if has_write_access:
-     $.getJSON("${ url('metastore:drop_table', database=database) }", function(data) {
-       $("#dropTableMessage").text(data.title);
-     });
-     % endif
-
-     $('a[data-toggle="tab"]').on('shown', function() {
-       $(".sampleTable").not('.initialized').addClass('initialized').dataTable({
-         "bPaginate": false,
-         "bLengthChange": false,
-         "bInfo": false,
-         "bFilter": false,
-         "fnInitComplete": function () {
-           $(".sampleTable").parent().jHueTableScroller();
-           $(".sampleTable").jHueTableExtender({
-             hintElement: "#jumpToColumnAlert",
-             fixedHeader: true
-           });
-         },
-         "oLanguage": {
-            "sEmptyTable": "${_('No data available')}",
-            "sZeroRecords": "${_('No matching records')}",
-         }
-       });
-     })
+  $(document).ready(function () {
+    $(".datatables").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": false,
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
+    });
+
+    % if has_write_access:
+        $.getJSON("${ url('metastore:drop_table', database=database) }", function (data) {
+          $("#dropTableMessage").text(data.title);
+        });
+    % endif
+
+    $('a[data-toggle="tab"]').on('shown', function () {
+      $(".sampleTable").not('.initialized').addClass('initialized').dataTable({
+        "bPaginate": false,
+        "bLengthChange": false,
+        "bInfo": false,
+        "bFilter": false,
+        "fnInitComplete": function () {
+          $(".sampleTable").parent().jHueTableScroller();
+          $(".sampleTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true
+          });
+        },
+        "oLanguage": {
+          "sEmptyTable": "${_('No data available')}",
+          "sZeroRecords": "${_('No matching records')}",
+        }
+      });
+    })
 
     $("#import-data-btn").click(function () {
       $.get("${ url('metastore:load_table', database=database, table=table.name) }", function (response) {
-          $("#import-data-modal").html(response['data']);
-          $("#import-data-modal").modal("show");
-        }
+            $("#import-data-modal").html(response['data']);
+            $("#import-data-modal").modal("show");
+          }
       );
     });
-
-   });
+  });
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 76 - 76
apps/metastore/src/metastore/templates/tables.mako

@@ -24,68 +24,68 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_('Tables'), 'metastore', user) | n,unicode }
 
 <div class="container-fluid" id="tables">
-    <h1>${_('Database %s') % database}</h1>
-    ${ components.breadcrumbs(breadcrumbs) }
-    <div class="row-fluid">
-        <div class="span3">
-            <div class="well sidebar-nav">
-                <ul class="nav nav-list">
-                    <span>
-                    <li class="nav-header">${_('database')}</li>
-                    <li>
-                       <form action="${ url('metastore:show_tables') }" id="db_form" method="POST">
-                         ${ db_form | n,unicode }
-                       </form>
-                    </li>
-                    </span>
-                    % if has_write_access:
-                    <li class="nav-header">${_('Actions')}</li>
-                    <li><a href="${ url('beeswax:import_wizard', database=database) }">${_('Create a new table from a file')}</a></li>
-                    <li><a href="${ url('beeswax:create_table', database=database) }">${_('Create a new table manually')}</a></li>
-                    % endif
-                </ul>
-            </div>
-        </div>
-        <div class="span9">
-          <%actionbar:render>
-            <%def name="search()">
-              <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for table name')}">
-            </%def>
-
-            <%def name="actions()">
-                <button id="viewBtn" class="btn toolbarBtn" title="${_('Browse the selected table')}" disabled="disabled"><i class="icon-eye-open"></i> ${_('View')}</button>
-                <button id="browseBtn" class="btn toolbarBtn" title="${_('Browse the selected table')}" disabled="disabled"><i class="icon-list"></i> ${_('Browse Data')}</button>
-                % if has_write_access:
-                <button id="dropBtn" class="btn toolbarBtn" title="${_('Delete the selected tables')}" disabled="disabled"><i class="icon-trash"></i>  ${_('Drop')}</button>
-                % endif
-            </%def>
-          </%actionbar:render>
-            <table class="table table-condensed table-striped datatables">
-                <thead>
-                  <tr>
-                    <th width="1%"><div class="hueCheckbox selectAll" data-selectables="tableCheck"></div></th>
-                    <th>${_('Table Name')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                % for table in tables:
-                  <tr>
-                    <td data-row-selector-exclude="true" width="1%">
-                      <div class="hueCheckbox tableCheck"
-                           data-view-url="${ url('metastore:describe_table', database=database, table=table) }"
-                           data-browse-url="${ url('metastore:read_table', database=database, table=table) }"
-                           data-drop-name="${ table }"
-                           data-row-selector-exclude="true"></div>
-                    </td>
-                    <td>
-                      <a href="${ url('metastore:describe_table', database=database, table=table) }" data-row-selector="true">${ table }</a>
-                    </td>
-                  </tr>
-                % endfor
-                </tbody>
-            </table>
-        </div>
+  <div class="row-fluid">
+    <div class="span3">
+      <div class="sidebar-nav">
+        <ul class="nav nav-list">
+          <li class="nav-header">${_('database')}</li>
+          <li class="nav-header">
+            <form action="${ url('metastore:show_tables') }" id="db_form" method="POST" style="margin-bottom: 0">
+              ${ db_form | n,unicode }
+            </form>
+          </li>
+          % if has_write_access:
+          <li class="nav-header">${_('Actions')}</li>
+          <li><a href="${ url('beeswax:import_wizard', database=database) }">${_('Create a new table from a file')}</a></li>
+          <li><a href="${ url('beeswax:create_table', database=database) }">${_('Create a new table manually')}</a></li>
+          % endif
+        </ul>
+      </div>
     </div>
+    <div class="span9">
+      <div class="card">
+        <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
+        <%actionbar:render>
+          <%def name="search()">
+            <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for table name')}">
+          </%def>
+
+          <%def name="actions()">
+            <button id="viewBtn" class="btn toolbarBtn" title="${_('Browse the selected table')}" disabled="disabled"><i class="icon-eye-open"></i> ${_('View')}</button>
+            <button id="browseBtn" class="btn toolbarBtn" title="${_('Browse the selected table')}" disabled="disabled"><i class="icon-list"></i> ${_('Browse Data')}</button>
+            % if has_write_access:
+            <button id="dropBtn" class="btn toolbarBtn" title="${_('Delete the selected tables')}" disabled="disabled"><i class="icon-trash"></i>  ${_('Drop')}</button>
+            % endif
+          </%def>
+        </%actionbar:render>
+
+        <table class="table table-condensed datatables" data-tablescroller-disable="true">
+          <thead>
+            <tr>
+              <th width="1%"><div class="hueCheckbox selectAll" data-selectables="tableCheck"></div></th>
+              <th>${_('Table Name')}</th>
+            </tr>
+          </thead>
+          <tbody>
+          % for table in tables:
+            <tr>
+              <td data-row-selector-exclude="true" width="1%">
+                <div class="hueCheckbox tableCheck"
+                     data-view-url="${ url('metastore:describe_table', database=database, table=table) }"
+                     data-browse-url="${ url('metastore:read_table', database=database, table=table) }"
+                     data-drop-name="${ table }"
+                     data-row-selector-exclude="true"></div>
+              </td>
+              <td>
+                <a href="${ url('metastore:describe_table', database=database, table=table) }" data-row-selector="true">${ table }</a>
+              </td>
+            </tr>
+          % endfor
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div id="dropTable" class="modal hide fade">
@@ -111,25 +111,25 @@ ${ commonheader(_('Tables'), 'metastore', user) | n,unicode }
 <script type="text/javascript" charset="utf-8">
   $(document).ready(function () {
     var viewModel = {
-        availableTables : ko.observableArray(${ tables_json | n }),
-        chosenTables : ko.observableArray([])
+      availableTables: ko.observableArray(${ tables_json | n }),
+      chosenTables: ko.observableArray([])
     };
 
     ko.applyBindings(viewModel);
 
     var tables = $(".datatables").dataTable({
-      "sDom":"<'row'r>t<'row'<'span8'i><''p>>",
-      "bPaginate":false,
-      "bLengthChange":false,
-      "bInfo":false,
-      "bFilter":true,
-      "aoColumns":[
-        {"bSortable":false, "sWidth":"1%" },
+      "sDom": "",
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": true,
+      "aoColumns": [
+        {"bSortable": false, "sWidth": "1%" },
         null
       ],
-      "oLanguage":{
-        "sEmptyTable":"${_('No data available')}",
-        "sZeroRecords":"${_('No matching records')}",
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
       }
     });
 
@@ -140,7 +140,7 @@ ${ commonheader(_('Tables'), 'metastore', user) | n,unicode }
     $("a[data-row-selector='true']").jHueRowSelector();
 
     $("#id_database").change(function () {
-      $.cookie("hueBeeswaxLastDatabase", $(this).val(), {expires:90});
+      $.cookie("hueBeeswaxLastDatabase", $(this).val(), {expires: 90});
       $('#db_form').submit();
     });
 
@@ -188,11 +188,11 @@ ${ commonheader(_('Tables'), 'metastore', user) | n,unicode }
     }
 
     $("#dropBtn").click(function () {
-      $.getJSON("${ url('metastore:drop_table', database=database) }", function(data) {
+      $.getJSON("${ url('metastore:drop_table', database=database) }", function (data) {
         $("#dropTableMessage").text(data.title);
       });
       viewModel.chosenTables.removeAll();
-      $(".hueCheckbox[checked='checked']").each(function( index ) {
+      $(".hueCheckbox[checked='checked']").each(function (index) {
         viewModel.chosenTables.push($(this).data("drop-name"));
       });
       $("#dropTable").modal("show");

+ 15 - 1
apps/metastore/static/css/metastore.css

@@ -17,9 +17,23 @@
 */
 
 .hueBreadcrumb {
-  padding: 7px 14px;
+  padding: 12px 14px;
+}
+
+.hueBreadcrumbBar {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.divider {
+  padding-left: 20px;
 }
 
 .sidebar-nav {
   padding: 9px 0;
 }
+
+.card-heading {
+  padding-left: 6px !important;
+}

+ 3 - 2
desktop/core/static/js/jquery.tablescroller.js

@@ -28,7 +28,8 @@
 
   var pluginName = "jHueTableScroller",
       defaults = {
-        minHeight: 400
+        minHeight: 300,
+        heightAfterCorrection: 40
       };
 
   function Plugin(element, options) {
@@ -69,7 +70,7 @@
 
     function resizeScrollingTable(el) {
       $(el).css("overflow-y", "").css("height", "");
-      var heightAfter = 0;
+      var heightAfter = _this.options.heightAfterCorrection;
       $(el).nextAll(":visible").each(function () {
         heightAfter += $(this).outerHeight(true);
       });