Explorar o código

HUE-897 Ported Beeswax app to Hue 3

Enrico Berti %!s(int64=12) %!d(string=hai) anos
pai
achega
d3dcd3b

+ 12 - 6
apps/beeswax/src/beeswax/templates/choose_delimiter.mako

@@ -24,10 +24,9 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
 
 <div class="container-fluid">
-    <h1>${_('Create a new table from a file')}</h1>
     <div class="row-fluid">
         <div class="span3">
-            <div class="well sidebar-nav">
+            <div class="sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Actions')}</li>
                     <li><a href="${ url(app_name + ':import_wizard', database=database)}">${_('Create a new table from a file')}</a></li>
@@ -36,12 +35,16 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
             </div>
         </div>
         <div class="span9">
-            <ul class="nav nav-pills">
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('Create a new table from a file')}</h1>
+            <div class="card-body">
+              <p>
+                <ul class="nav nav-pills">
                 <li><a id="step1" href="#">${_('Step 1: Choose File')}</a></li>
                 <li class="active"><a href="#">${_('Step 2: Choose Delimiter')}</a></li>
                 <li><a id="step3" href="#">${_('Step 3: Define Columns')}</a></li>
             </ul>
-            <form id="delimiterForm" action="${action}" method="POST" class="form-horizontal">
+                <form id="delimiterForm" action="${action}" method="POST" class="form-horizontal">
                 <div class="hide">
                     ${util.render_form(file_form)}
                     ${comps.field(delim_form['file_type'])}
@@ -89,11 +92,14 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
                     </div>
                 </fieldset>
 
-                <div class="form-actions">
+                <div class="form-actions" style="padding-left: 10px">
                     <input class="btn" type="submit" value="${_('Previous')}" name="cancel_delim"/>
                     <input class="btn btn-primary" type="submit" name="submit_delim" value="${_('Next')}" />
                 </div>
             </form>
+              </p>
+            </div>
+          </div>
         </div>
     </div>
 </div>
@@ -109,7 +115,7 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
   $(document).ready(function () {
     $("[rel='tooltip']").tooltip();
 
-    $(".scrollable").width($(".form-actions").width());
+    $(".scrollable").width($(".form-actions").width() - 170);
 
     $("#id_delimiter_1").css("margin-left", "4px").attr("placeholder", "${_('Type your delimiter here')}").hide();
     $("#id_delimiter_0").change(function () {

+ 11 - 5
apps/beeswax/src/beeswax/templates/choose_file.mako

@@ -24,10 +24,9 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
 
 
 <div class="container-fluid">
-    <h1>${_('Create a new table from a file')}</h1>
     <div class="row-fluid">
         <div class="span3">
-            <div class="well sidebar-nav">
+            <div class="sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Actions')}</li>
                     <li><a href="${ url(app_name + ':import_wizard', database=database)}">${_('Create a new table from a file')}</a></li>
@@ -36,12 +35,16 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
             </div>
         </div>
         <div class="span9">
-            <ul class="nav nav-pills">
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('Create a new table from a file')}</h1>
+            <div class="card-body">
+              <p>
+                <ul class="nav nav-pills">
                 <li class="active"><a href="${ url(app_name + ':import_wizard', database=database) }">${_('Step 1: Choose File')}</a></li>
                 <li><a id="step2" href="#">${_('Step 2: Choose Delimiter')}</a></li>
                 <li><a href="#">${_('Step 3: Define Columns')}</a></li>
             </ul>
-            <form action="${action}" method="POST" class="form-horizontal">
+                <form action="${action}" method="POST" class="form-horizontal">
                 <fieldset>
                     <div class="alert alert-info"><h3>${_('Name Your Table and Choose A File')}</h3></div>
                     <div class="control-group">
@@ -96,10 +99,13 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
                         </div>
                     </div>
                 </fieldset>
-                <div class="form-actions">
+                <div class="form-actions" style="padding-left: 10px">
                     <input type="submit" class="btn btn-primary" name="submit_file" value="${_('Next')}" />
                 </div>
             </form>
+              </p>
+            </div>
+          </div>
         </div>
     </div>
 </div>

+ 27 - 26
apps/beeswax/src/beeswax/templates/configuration.mako

@@ -25,32 +25,33 @@ ${ commonheader(_('Settings'), app_name, user, '100px') | n,unicode }
 ${layout.menubar(section='configuration')}
 
 <div class="container-fluid">
-	<h1>${_('Settings')}</h1>
-	<div class="well">
-		<form class="form-search" method="POST">
-		    <span class="pull-left">
-                <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${_('Search for key, value, etc.')}">
-		        <a href="#" id="clearFilterBtn" class="btn">${_('Clear')}</a>
-		    </span>
-		</form>
-	</div>
-	<table class="table table-striped table-condensed datatables">
-		<thead>
-			<tr>
-				<th>${_('Key')}</th>
-				<th>${_('Value')}</th>
-				<th>${_('Description')}</th>
-			</tr>
-		</thead>
-		<tbody>
-    	% for config_value in config_values:
-	    	<tr class="confRow" data-search="${config_value.key or ""}${config_value.value or ""}${config_value.description or ""}">
-	      		<td>${config_value.key or ""}</td><td>${config_value.value or ""}</td><td>${config_value.description or ""}</td>
-	    	</tr>
-	    % endfor
-		</tbody>
-	</table>
-  <br/>
+  <div class="card">
+	  <h1 class="card-heading simple">${_('Settings')}</h1>
+    <div class="card-body">
+      <p>
+        <form class="form-search" method="POST">
+          <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${_('Search for key, value, etc.')}">
+          <a href="#" id="clearFilterBtn" class="btn">${_('Clear')}</a>
+        </form>
+        <table class="table table-striped table-condensed datatables">
+          <thead>
+            <tr>
+              <th>${_('Key')}</th>
+              <th>${_('Value')}</th>
+              <th>${_('Description')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            % for config_value in config_values:
+              <tr class="confRow" data-search="${config_value.key or ""}${config_value.value or ""}${config_value.description or ""}">
+                  <td>${config_value.key or ""}</td><td>${config_value.value or ""}</td><td>${config_value.description or ""}</td>
+              </tr>
+            % endfor
+          </tbody>
+        </table>
+      </p>
+    </div>
+  </div>
 </div>
 
 <script type="text/javascript" charset="utf-8">

+ 10 - 3
apps/beeswax/src/beeswax/templates/create_database.mako

@@ -24,10 +24,9 @@ ${ commonheader(_("Create database"), 'metastore', user) | n,unicode }
 
 
 <div class="container-fluid">
-  <h1>${_('Create a new database')}</h1>
   <div class="row-fluid">
     <div class="span3">
-        <div class="well sidebar-nav">
+        <div class="sidebar-nav">
             <ul class="nav nav-list">
                 <li class="nav-header">${_('Actions')}</li>
                 <li><a href="${ url(app_name + ':create_database')}">${_('Create a new database')}</a></li>
@@ -36,6 +35,11 @@ ${ commonheader(_("Create database"), 'metastore', user) | n,unicode }
     </div>
 
     <div class="span9">
+      <div class="card" style="margin-top: 0">
+        <h1 class="card-heading simple">${_('Create a new database')}</h1>
+        <div class="card-body">
+          <p>
+
       <ul id="step-nav" class="nav nav-pills">
           <li class="active"><a href="#step/1" class="step">${_('Step 1: Name')}</a></li>
           <li><a href="#step/2" class="step">${_('Step 2: Location')}</a></li>
@@ -111,12 +115,15 @@ ${ commonheader(_("Create database"), 'metastore', user) | n,unicode }
             </fieldset>
         </div>
         </div>
-        <div class="form-actions">
+        <div class="form-actions" style="padding-left: 10px">
             <button type="button" id="backBtn" class="btn hide">${_('Back')}</button>
             <button type="button" id="nextBtn" class="btn btn-primary">${_('Next')}</button>
             <input id="submit" type="submit" name="create" class="btn btn-primary hide" value="${_('Create database')}" />
         </div>
       </form>
+      </p>
+      </div>
+    </div>
     </div>
   </div>
 </div>

+ 278 - 272
apps/beeswax/src/beeswax/templates/create_table_manually.mako

@@ -23,10 +23,9 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_("Create table manually"), 'metastore', user) | n,unicode }
 
 <div class="container-fluid">
-<h1>${_('Create a new table manually')}</h1>
 <div class="row-fluid">
 <div class="span3">
-    <div class="well sidebar-nav">
+    <div class="sidebar-nav">
         <ul class="nav nav-list">
             <li class="nav-header">${_('Actions')}</li>
             <li><a href="${ url(app_name + ':import_wizard', database=database)}">${_('Create a new table from a file')}</a></li>
@@ -36,277 +35,284 @@ ${ commonheader(_("Create table manually"), 'metastore', user) | n,unicode }
 </div>
 
 <div class="span9">
-<ul class="nav nav-pills">
-    <li class="active"><a href="#step1" class="step">${_('Step 1: Name')}</a></li>
-    <li><a href="#step2" class="step">${_('Step 2: Record Format')}</a></li>
-    <li><a href="#step3" class="step">${_('Step 3: Serialization')}</a></li>
-    <li><a href="#step4" class="step">${_('Step 4: File Format')}</a></li>
-    <li><a href="#step5" class="step">${_('Step 5: Location')}</a></li>
-    <li><a href="#step6" class="step">${_('Step 6: Columns')}</a></li>
-</ul>
-
-<form action="#" method="POST" id="mainForm" class="form-horizontal">
-<div class="steps">
-
-  <div id="step1" class="stepDetails">
-      <fieldset>
-          <div class="alert alert-info"><h3>${_('Create a table')}</h3>${_("Let's start with a name and description for where we'll store your data.")}</div>
-          <div class="control-group">
-              ${comps.bootstrapLabel(table_form["name"])}
-              <div class="controls">
-                  ${comps.field(table_form["name"], attrs=dict(
-                      placeholder=_('table_name'),
-                    )
-                  )}
-                  <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                  <p class="help-block">
-                      ${_('Name of the new table. Table names must be globally unique. Table names tend to correspond to the directory where the data will be stored.')}
-                  </p>
-              </div>
-          </div>
-          <div class="control-group">
-              ${comps.bootstrapLabel(table_form["comment"])}
-              <div class="controls">
-                  ${comps.field(table_form["comment"], attrs=dict(
-                    placeholder=_('Optional'),
-                    )
-                  )}
-                  <p class="help-block">
-                      ${_("Use a table comment to describe your table.  For example, note the data's provenance and any caveats users need to know.")}
-                  </p>
-              </div>
-          </div>
-      </fieldset>
-  </div>
-
-  <div id="step2" class="stepDetails hide">
-      <fieldset>
-          <div class="alert alert-info"><h3>${_('Choose Your Record Format')}</h3>
-              ${_("Individual records are broken up into columns either with delimiters (e.g., CSV or TSV) or using a specific serialization/deserialization (SerDe) implementation. (One common specialized SerDe is for parsing out columns with a regular expression.)")}
-          </div>
-          <%
-              selected = table_form["row_format"].data or table_form["row_format"].field.initial
-          %>
-          <div class="control-group">
-              <label class="control-label" id="formatRadio">${_('Record format')}</label>
-              <div class="controls">
-                  <label class="radio">
-                      <input type="radio" name="table-row_format" value="Delimited"
-                          % if selected == "Delimited":
-                             checked
-                          % endif
-                              >
-                      ${_('Delimited')}
-                      <span class="help-inline">
-                      ${_('(Data files use delimiters, like commas (CSV) or tabs.)')}
-                      </span>
-                  </label>
-                  <label class="radio">
-                      <input type="radio" name="table-row_format" value="SerDe"
-                          % if selected == "SerDe":
-                             checked
-                          % endif
-                              >
-                      ${_('SerDe')}
-                      <span class="help-inline">
-                      ${_('(Enter a specialized serialization implementation.)')}
-                      </span>
-                  </label>
-              </div>
-          </div>
-      </fieldset>
-  </div>
-
-  <div id="step3" class="stepDetails hide">
-      <fieldset>
-          <div id="step3Delimited" class="stepDetailsInner">
-              <div class="alert alert-info"><h3>${_('Configure Record Serialization')}</h3>
-                  ${_('Only supports single-character delimiters.')}
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["field_terminator"])}
-                  <div class="controls">
-                      ${comps.field(table_form["field_terminator"], render_default=True)}
-                      <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
-                      <span class="help-block">
-                          ${_('Enter the column delimiter. Must be a single character. Use syntax like "\\001" or "\\t" for special characters.')}
-                      </span>
-                  </div>
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["collection_terminator"])}
-                  <div class="controls">
-                      ${comps.field(table_form["collection_terminator"], render_default=True)}
-                      <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
-                      <span class="help-block">
-                          ${_('Use for array types.')}
-                      </span>
-                  </div>
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["map_key_terminator"])}
-                  <div class="controls">
-                      ${comps.field(table_form["map_key_terminator"], render_default=True)}
-                      <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
-                      <span class="help-block">
-                          ${_('Use for map types.')}
-                      </span>
-                  </div>
-              </div>
-          </div>
-          <div id="step3SerDe" class="hide stepDetailsInner">
-              <div class="alert alert-info"><h3>${_('Configure Record Serialization')}</h3>
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["serde_name"])}
-                  <div class="controls">
-                      ${comps.field(table_form["serde_name"], attrs=dict(
-                      placeholder='com.acme.hive.SerDe',
-                      )
-                      )}
-                      <span class="help-block">
-                          ${_('The Java class name of your SerDe.')} <em>${_('e.g.')}</em>, org.apache.hadoop.hive.contrib.serde2.RegexSerDe
-                      </span>
-                  </div>
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["serde_properties"])}
-                  <div class="controls">
-                      ${comps.field(table_form["serde_properties"], attrs=dict(
-                      placeholder='"prop" = "value", "prop2" = "value2"',
-                      )
-                      )}
-                      <span class="help-block">
-                          ${_('Properties to pass to the (de)serialization mechanism.')} <em>${_('e.g.')},</em>, "input.regex" = "([^ ]*) ([^ ]*) ([^ ]*) (-|\\[[^\\]]*\\]) ([^ \"]*|\"[^\"]*\") (-|[0-9]*) (-|[0-9]*)(?: ([^ \"]*|\"[^\"]*\") ([^ \"]*|\"[^\"]*\"))?", "output.format.string" = "%1$s %2$s %3$s %4$s %5$s %6$s %7$s %8$s %9$s"
-                      </span>
-                  </div>
-              </div>
-          </div>
-      </fieldset>
-  </div>
-
-  <div id="step4" class="stepDetails hide">
-      <fieldset>
-          <div class="alert alert-info"><h3>${_('Choose a File Format')}</h3>
-              ${_('Use')} <strong>TextFile</strong> ${_('for newline-delimited text files.')}
-              ${_('Use')} <strong>SequenceFile</strong> ${_("for Hadoop's binary serialization format.")}
-              ${_('Use')} <strong>InputFormat</strong> ${_('to choose a custom implementation.')}
-              <br/>
-          </div>
-
-          <div class="control-group">
-              <label id="fileFormatRadio" class="control-label">${_('File format')}</label>
-              <div class="controls">
-                  ${comps.field(table_form["file_format"],
-                  render_default=True,
-                  klass="bw-file_formats",
-                  notitle=True
-                  )}
-              </div>
-          </div>
-          <div id="inputFormatDetails" class="hide">
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["input_format_class"])}
-                  <div class="controls">
-                      ${comps.field(table_form["input_format_class"], attrs=dict(
-                      placeholder='com.acme.data.MyInputFormat',
-                      )
-                      )}
-                      <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                      <span class="help-block">
-                          ${_('Java class used to read data.')}
-                      </span>
-                  </div>
-              </div>
-              <div class="control-group">
-                  ${comps.bootstrapLabel(table_form["output_format_class"])}
-                  <div class="controls">
-                      ${comps.field(table_form["output_format_class"], attrs=dict(
-                      placeholder='com.acme.data.MyOutputFormat',
-                      )
-                      )}
-                      <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                      <span class="help-block">
-                          ${_('Java class used to write data.')}
-                      </span>
-                  </div>
-              </div>
-          </div>
-      </fieldset>
-  </div>
-
-  <div id="step5" class="stepDetails hide">
-      <fieldset>
-          <div class="alert alert-info"><h3>${_("Choose Where Your Table's Data is Stored")}</h3>
-          </div>
-          <div class="control-group">
-              <label class="control-label">${_('Location')}</label>
-              <div class="controls">
-                  <label class="checkbox">
-                      ${comps.field(table_form["use_default_location"],
-                      render_default=True
-                      )}
-                      ${_('Use default location')}
-                  </label>
-                  <span class="help-block">
-                      ${_('Store your table in the default location (controlled by Hive, and typically')} <em>/user/hive/warehouse/table_name</em>).
-                  </span>
-              </div>
-          </div>
-
-          <div id="location" class="control-group hide">
-              ${comps.bootstrapLabel(table_form["external_location"])}
-              <div class="controls">
-                  ${comps.field(table_form["external_location"],
-                  placeholder="/user/user_name/data_dir",
-                  klass="pathChooser input-xxlarge",
-                  file_chooser=True,
-                  show_errors=False
-                  )}
-                  <span class="help-block">
-                  ${_("Enter the path (on HDFS) to your table's data location")}
-                  </span>
-              </div>
-          </div>
-      </fieldset>
-  </div>
-
-  <div id="step6" class="stepDetails hide">
-      <fieldset>
-          <div class="alert alert-info"><h3>${_('Configure Table Columns')}</h3>
-          </div>
-          % for form in columns_form.forms:
-              ${render_column(form)}
-          %endfor
-          <div class="hide">
-              ${unicode(columns_form.management_form) | n}
-          </div>
-          <button class="btn addColumnBtn" value="True" name="columns-add" type="submit">${_('Add a column')}</button>
-      </fieldset>
-      <br/><br/>
-      <fieldset>
-          <div class="alert alert-info"><h3>${_('Configure Partitions')}</h3>
-              ${_('If your data is naturally partitioned (by date, for example), partitions are a way to tell the query server that data for a specific partition value are stored together.')}
-              ${_('The query server establishes a mapping between directories on disk')}
-              (<em>${_('e.g.')},</em> <code>/user/hive/warehouse/logs/dt=20100101/</code>)
-              ${_('and the data for that day.  Partitions are virtual columns; they are not represented in the data itself, but are determined by the data location. The query server implements query optimizations such that queries that are specific to a single partition need not read the data in other partitions.')}
-          </div>
-          % for form in partitions_form.forms:
-              ${render_column(form, True)}
-          % endfor
-          <div class="hide">
-              ${unicode(partitions_form.management_form) | n}
-          </div>
-          <button class="btn addPartitionBtn" value="True" name="partitions-add" type="submit">${_('Add a partition')}</button>
-      </fieldset>
-  </div>
-</div>
-<div class="form-actions">
-    <button type="button" id="backBtn" class="btn hide">${_('Back')}</button>
-    <button type="button" id="nextBtn" class="btn btn-primary">${_('Next')}</button>
-    <input id="submit" type="submit" name="create" class="btn btn-primary hide" value="${_('Create table')}" />
+  <div class="card" style="margin-top: 0">
+    <h1 class="card-heading simple">${_('Create a new table manually')}</h1>
+    <div class="card-body">
+      <p>
+        <ul class="nav nav-pills">
+          <li class="active"><a href="#step1" class="step">${_('Step 1: Name')}</a></li>
+          <li><a href="#step2" class="step">${_('Step 2: Record Format')}</a></li>
+          <li><a href="#step3" class="step">${_('Step 3: Serialization')}</a></li>
+          <li><a href="#step4" class="step">${_('Step 4: File Format')}</a></li>
+          <li><a href="#step5" class="step">${_('Step 5: Location')}</a></li>
+          <li><a href="#step6" class="step">${_('Step 6: Columns')}</a></li>
+        </ul>
+
+        <form action="#" method="POST" id="mainForm" class="form-horizontal">
+      <div class="steps">
+
+        <div id="step1" class="stepDetails">
+            <fieldset>
+                <div class="alert alert-info"><h3>${_('Create a table')}</h3>${_("Let's start with a name and description for where we'll store your data.")}</div>
+                <div class="control-group">
+                    ${comps.bootstrapLabel(table_form["name"])}
+                    <div class="controls">
+                        ${comps.field(table_form["name"], attrs=dict(
+                            placeholder=_('table_name'),
+                          )
+                        )}
+                        <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
+                        <p class="help-block">
+                            ${_('Name of the new table. Table names must be globally unique. Table names tend to correspond to the directory where the data will be stored.')}
+                        </p>
+                    </div>
+                </div>
+                <div class="control-group">
+                    ${comps.bootstrapLabel(table_form["comment"])}
+                    <div class="controls">
+                        ${comps.field(table_form["comment"], attrs=dict(
+                          placeholder=_('Optional'),
+                          )
+                        )}
+                        <p class="help-block">
+                            ${_("Use a table comment to describe your table.  For example, note the data's provenance and any caveats users need to know.")}
+                        </p>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+        <div id="step2" class="stepDetails hide">
+            <fieldset>
+                <div class="alert alert-info"><h3>${_('Choose Your Record Format')}</h3>
+                    ${_("Individual records are broken up into columns either with delimiters (e.g., CSV or TSV) or using a specific serialization/deserialization (SerDe) implementation. (One common specialized SerDe is for parsing out columns with a regular expression.)")}
+                </div>
+                <%
+                    selected = table_form["row_format"].data or table_form["row_format"].field.initial
+                %>
+                <div class="control-group">
+                    <label class="control-label" id="formatRadio">${_('Record format')}</label>
+                    <div class="controls">
+                        <label class="radio">
+                            <input type="radio" name="table-row_format" value="Delimited"
+                                % if selected == "Delimited":
+                                   checked
+                                % endif
+                                    >
+                            ${_('Delimited')}
+                            <span class="help-inline">
+                            ${_('(Data files use delimiters, like commas (CSV) or tabs.)')}
+                            </span>
+                        </label>
+                        <label class="radio">
+                            <input type="radio" name="table-row_format" value="SerDe"
+                                % if selected == "SerDe":
+                                   checked
+                                % endif
+                                    >
+                            ${_('SerDe')}
+                            <span class="help-inline">
+                            ${_('(Enter a specialized serialization implementation.)')}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+        <div id="step3" class="stepDetails hide">
+            <fieldset>
+                <div id="step3Delimited" class="stepDetailsInner">
+                    <div class="alert alert-info"><h3>${_('Configure Record Serialization')}</h3>
+                        ${_('Only supports single-character delimiters.')}
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["field_terminator"])}
+                        <div class="controls">
+                            ${comps.field(table_form["field_terminator"], render_default=True)}
+                            <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
+                            <span class="help-block">
+                                ${_('Enter the column delimiter. Must be a single character. Use syntax like "\\001" or "\\t" for special characters.')}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["collection_terminator"])}
+                        <div class="controls">
+                            ${comps.field(table_form["collection_terminator"], render_default=True)}
+                            <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
+                            <span class="help-block">
+                                ${_('Use for array types.')}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["map_key_terminator"])}
+                        <div class="controls">
+                            ${comps.field(table_form["map_key_terminator"], render_default=True)}
+                            <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed. Terminator must be exactly one character.')}</span>
+                            <span class="help-block">
+                                ${_('Use for map types.')}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div id="step3SerDe" class="hide stepDetailsInner">
+                    <div class="alert alert-info"><h3>${_('Configure Record Serialization')}</h3>
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["serde_name"])}
+                        <div class="controls">
+                            ${comps.field(table_form["serde_name"], attrs=dict(
+                            placeholder='com.acme.hive.SerDe',
+                            )
+                            )}
+                            <span class="help-block">
+                                ${_('The Java class name of your SerDe.')} <em>${_('e.g.')}</em>, org.apache.hadoop.hive.contrib.serde2.RegexSerDe
+                            </span>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["serde_properties"])}
+                        <div class="controls">
+                            ${comps.field(table_form["serde_properties"], attrs=dict(
+                            placeholder='"prop" = "value", "prop2" = "value2"',
+                            )
+                            )}
+                            <span class="help-block">
+                                ${_('Properties to pass to the (de)serialization mechanism.')} <em>${_('e.g.')},</em>, "input.regex" = "([^ ]*) ([^ ]*) ([^ ]*) (-|\\[[^\\]]*\\]) ([^ \"]*|\"[^\"]*\") (-|[0-9]*) (-|[0-9]*)(?: ([^ \"]*|\"[^\"]*\") ([^ \"]*|\"[^\"]*\"))?", "output.format.string" = "%1$s %2$s %3$s %4$s %5$s %6$s %7$s %8$s %9$s"
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+        <div id="step4" class="stepDetails hide">
+            <fieldset>
+                <div class="alert alert-info"><h3>${_('Choose a File Format')}</h3>
+                    ${_('Use')} <strong>TextFile</strong> ${_('for newline-delimited text files.')}
+                    ${_('Use')} <strong>SequenceFile</strong> ${_("for Hadoop's binary serialization format.")}
+                    ${_('Use')} <strong>InputFormat</strong> ${_('to choose a custom implementation.')}
+                    <br/>
+                </div>
+
+                <div class="control-group">
+                    <label id="fileFormatRadio" class="control-label">${_('File format')}</label>
+                    <div class="controls">
+                        ${comps.field(table_form["file_format"],
+                        render_default=True,
+                        klass="bw-file_formats",
+                        notitle=True
+                        )}
+                    </div>
+                </div>
+                <div id="inputFormatDetails" class="hide">
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["input_format_class"])}
+                        <div class="controls">
+                            ${comps.field(table_form["input_format_class"], attrs=dict(
+                            placeholder='com.acme.data.MyInputFormat',
+                            )
+                            )}
+                            <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
+                            <span class="help-block">
+                                ${_('Java class used to read data.')}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        ${comps.bootstrapLabel(table_form["output_format_class"])}
+                        <div class="controls">
+                            ${comps.field(table_form["output_format_class"], attrs=dict(
+                            placeholder='com.acme.data.MyOutputFormat',
+                            )
+                            )}
+                            <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
+                            <span class="help-block">
+                                ${_('Java class used to write data.')}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+        <div id="step5" class="stepDetails hide">
+            <fieldset>
+                <div class="alert alert-info"><h3>${_("Choose Where Your Table's Data is Stored")}</h3>
+                </div>
+                <div class="control-group">
+                    <label class="control-label">${_('Location')}</label>
+                    <div class="controls">
+                        <label class="checkbox">
+                            ${comps.field(table_form["use_default_location"],
+                            render_default=True
+                            )}
+                            ${_('Use default location')}
+                        </label>
+                        <span class="help-block">
+                            ${_('Store your table in the default location (controlled by Hive, and typically')} <em>/user/hive/warehouse/table_name</em>).
+                        </span>
+                    </div>
+                </div>
+
+                <div id="location" class="control-group hide">
+                    ${comps.bootstrapLabel(table_form["external_location"])}
+                    <div class="controls">
+                        ${comps.field(table_form["external_location"],
+                        placeholder="/user/user_name/data_dir",
+                        klass="pathChooser input-xxlarge",
+                        file_chooser=True,
+                        show_errors=False
+                        )}
+                        <span class="help-block">
+                        ${_("Enter the path (on HDFS) to your table's data location")}
+                        </span>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+        <div id="step6" class="stepDetails hide">
+            <fieldset>
+                <div class="alert alert-info"><h3>${_('Configure Table Columns')}</h3>
+                </div>
+                % for form in columns_form.forms:
+                    ${render_column(form)}
+                %endfor
+                <div class="hide">
+                    ${unicode(columns_form.management_form) | n}
+                </div>
+                <button class="btn addColumnBtn" value="True" name="columns-add" type="submit">${_('Add a column')}</button>
+            </fieldset>
+            <br/><br/>
+            <fieldset>
+                <div class="alert alert-info"><h3>${_('Configure Partitions')}</h3>
+                    ${_('If your data is naturally partitioned (by date, for example), partitions are a way to tell the query server that data for a specific partition value are stored together.')}
+                    ${_('The query server establishes a mapping between directories on disk')}
+                    (<em>${_('e.g.')},</em> <code>/user/hive/warehouse/logs/dt=20100101/</code>)
+                    ${_('and the data for that day.  Partitions are virtual columns; they are not represented in the data itself, but are determined by the data location. The query server implements query optimizations such that queries that are specific to a single partition need not read the data in other partitions.')}
+                </div>
+                % for form in partitions_form.forms:
+                    ${render_column(form, True)}
+                % endfor
+                <div class="hide">
+                    ${unicode(partitions_form.management_form) | n}
+                </div>
+                <button class="btn addPartitionBtn" value="True" name="partitions-add" type="submit">${_('Add a partition')}</button>
+            </fieldset>
+        </div>
+      </div>
+      <div class="form-actions" style="padding-left: 10px">
+          <button type="button" id="backBtn" class="btn hide">${_('Back')}</button>
+          <button type="button" id="nextBtn" class="btn btn-primary">${_('Next')}</button>
+          <input id="submit" type="submit" name="create" class="btn btn-primary hide" value="${_('Create table')}" />
+      </div>
+      </form>
+      </p>
+    </div>
 </div>
-</form>
 </div>
 </div>
 </div>

+ 13 - 7
apps/beeswax/src/beeswax/templates/define_columns.mako

@@ -24,10 +24,9 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
 
 <div class="container-fluid">
-    <h1>${_('Create a new table from a file')}</h1>
     <div class="row-fluid">
         <div class="span3">
-            <div class="well sidebar-nav">
+            <div class="sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Actions')}</li>
                     <li><a href="${ url(app_name + ':import_wizard', database=database)}">${_('Create a new table from a file')}</a></li>
@@ -36,12 +35,16 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
             </div>
         </div>
         <div class="span9">
-            <ul class="nav nav-pills">
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('Create a new table from a file')}</h1>
+            <div class="card-body">
+              <p>
+                <ul class="nav nav-pills">
                 <li><a id="step1" href="#">${_('Step 1: Choose File')}</a></li>
                 <li><a id="step2" href="#">${_('Step 2: Choose Delimiter')}</a></li>
                 <li class="active"><a href="#">${_('Step 3: Define Columns')}</a></li>
             </ul>
-            <form action="${action}" method="POST" class="form-stacked">
+                <form action="${action}" method="POST" class="form-stacked">
                 <div class="hide">
                     ${util.render_form(file_form)}
                     ${util.render_form(delim_form)}
@@ -91,11 +94,14 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
                         </div>
                     </div>
                 </fieldset>
-                <div class="form-actions">
+                <div class="form-actions" style="padding-left: 10px">
                     <input class="btn" type="submit" name="cancel_create" value="${_('Previous')}" />
                     <input class="btn btn-primary" type="submit" name="submit_create" value="${_('Create Table')}" />
                 </div>
             </form>
+              </p>
+            </div>
+          </div>
         </div>
     </div>
 </div>
@@ -114,7 +120,7 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
                   <input type="text" class="span8" style="padding-right: 24px;" placeholder="${ _('e.g. id, name, salary') }">
                 </div>
                 <div class="editable-buttons">
-                  <button type="button" class="btn btn-primary editable-submit"><i class="icon-ok icon-white"></i></button>
+                  <button type="button" class="btn btn-primary editable-submit"><i class="icon-ok"></i></button>
                   <button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>
                 </div>
               </div>
@@ -143,7 +149,7 @@ ${ commonheader(_('Create table from file'), 'metastore', user) | n,unicode }
   $(document).ready(function () {
     $("[rel='tooltip']").tooltip();
 
-    $(".scrollable").width($(".form-actions").width());
+    $(".scrollable").width($(".form-actions").width() - 10);
 
     $("#step1").click(function (e) {
       e.preventDefault();

+ 208 - 197
apps/beeswax/src/beeswax/templates/execute.mako

@@ -60,207 +60,208 @@ ${ commonheader(_('Query'), app_name, user, '100px') | n,unicode }
 ${layout.menubar(section='query')}
 
 <div class="container-fluid">
-    <div class="row-fluid">
-        <div class="span3">
-            <div class="well sidebar-nav">
-                <form id="advancedSettingsForm" action="${action}" method="POST" class="form form-horizontal noPadding">
-                    <ul class="nav nav-list">
-                        <li class="nav-header">${_('database')}</li>
-                        <li>
-                          ${ form.query['database'] | n,unicode }
-                        </li>
-                        <li class="nav-header">${_('settings')}</li>
-                        <li>
-                            % for i, f in enumerate(form.settings.forms):
-                            <div class="param">
-                                <div class="remove">
-                                    ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
-                                        type="submit",
-                                        title=_("Delete this setting"),
-                                        klass="btn btn-mini settingsDelete"
-                                    ), value=True)}
-                                </div>
-
-                                <div class="control-group">
-                                    ${comps.label(f['key'])}
-                                    ${comps.field(f['key'], attrs=dict(placeholder=app_name == 'impala' and "ABORT_ON_ERROR" or "mapred.reduce.tasks",
-                                        klass="settingsField span8",
-                                        autocomplete="off"
-                                    ))}
-                                </div>
-
-                                <div class="control-group">
-                                    ${comps.label(f['value'])}
-                                    ${comps.field(f['value'], attrs=dict(
-                                        placeholder="1",
-                                        klass="span8"
-                                    ))}
-                                </div>
-                            </div>
-                            ${comps.field(f['_exists'], hidden=True)}
-
-                            % endfor
-                            <div class="control-group">
-                                <a class="btn btn-small" data-form-prefix="settings">${_('Add')}</a>
-                            </div>
-                        </li>
-                        <li class="nav-header
-                        % if app_name == 'impala':
-                            hide
-                        % endif
-                        ">
-                            ${_('File Resources')}
-                        </li>
-                        <li
-                        % if app_name == 'impala':
-                            class="hide"
-                        % endif
-                        >
-                            % for i, f in enumerate(form.file_resources.forms):
-                            <div class="param">
-                                <div class="remove">
-                                    ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
-                                        type="submit",
-                                        title=_("Delete this setting"),
-                                        klass="btn btn-mini file_resourcesDelete"
-                                    ), value=True)}
-                                </div>
-
-                                <div class="control-group">
-                                    ${comps.label(f['type'])}
-                                    ${comps.field(f['type'], render_default=True, attrs=dict(
-                                        klass="span8"
-                                    ))}
-                                </div>
-
-                                <div class="control-group">
-                                    ${comps.label(f['path'])}
-                                    ${comps.field(f['path'], attrs=dict(
-                                        placeholder="/user/foo/udf.jar",
-                                        klass="input-small file_resourcesField span8",
-                                        data_filters=f['path'].html_name
-                                    ))}
-                                </div>
-                            </div>
-                            ${comps.field(f['_exists'], hidden=True)}
-
-                            % endfor
-                            <div class="control-group">
-                                <a class="btn btn-small" data-form-prefix="file_resources">${_('Add')}</a>
-                            </div>
-                        </li>
-                        <li class="nav-header
-                        % if app_name == 'impala':
-                            hide
-                        % endif
-                        ">
-                            ${_('User-defined Functions')}
-                        </li>
-                        <li
-                        % if app_name == 'impala':
-                            class="hide"
-                        % endif
-                        >
-                            % for i, f in enumerate(form.functions.forms):
-                                <div class="param">
-                                    <div class="remove">
-                                        ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
-                                            type="submit",
-                                            title=_("Delete this setting"),
-                                            klass="btn btn-mini file_resourcesDelete"
-                                        ), value=True)}
-                                    </div>
-
-                                    <div class="control-group">
-                                        ${comps.label(f['name'])}
-                                        ${comps.field(f['name'], attrs=dict(
-                                            placeholder=_("myFunction"),
-                                            klass="span8 functionsField"
-                                        ))}
-                                    </div>
-
-                                    <div class="control-group">
-                                        ${comps.label(f['class_name'])}
-                                        ${comps.field(f['class_name'], attrs=dict(
-                                            placeholder="com.acme.example",
-                                            klass="span8"
-                                        ))}
-                                    </div>
-                                </div>
-
-                              ${comps.field(f['_exists'], hidden=True)}
-                            % endfor
-                            <div class="control-group">
-                                <a class="btn btn-small" data-form-prefix="functions">${_('Add')}</a>
-                            </div>
-                        </li>
-                        <li class="nav-header">${_('Parameterization')}</li>
-                        <li>
-                            <label class="checkbox" rel="tooltip" data-original-title="${_("If checked (the default), you can include parameters like $parameter_name in your query, and users will be prompted for a value when the query is run.")}">
-                                <input type="checkbox" id="id_${form.query["is_parameterized"].html_name | n}" name="${form.query["is_parameterized"].html_name | n}" ${extract_field_data(form.query["is_parameterized"]) and "CHECKED" or ""}/>
-                                ${_("Enable Parameterization")}
-                            </label>
-                        </li>
-                          <li class="nav-header
-                            % if app_name == 'impala':
-                                hide
-                            % endif
-                          ">${_('Email Notification')}</li>
-                          <li
-                            % if app_name == 'impala':
-                                class="hide"
-                            % endif
-                          >
-                            <label class="checkbox" rel="tooltip" data-original-title="${_("If checked, you will receive an email notification when the query completes.")}">
-                                <input type="checkbox" id="id_${form.query["email_notify"].html_name | n}" name="${form.query["email_notify"].html_name | n}" ${extract_field_data(form.query["email_notify"]) and "CHECKED" or ""}/>
-                                ${_("Email me on completion.")}
-                            </label>
-                          </li>
-                        % if app_name == 'impala':
-                          <li class="nav-header">
-                            ${_('Metastore Catalog')}
-                          </li>
-                          <li>
-                            <div class="control-group">
-                              <span id="refresh-dyk">
-                                <i class="icon-refresh"></i>
-                                ${ _('Sync tables tips') }
-                              </span>
-                              <div id="refresh-content" class="hide">
-                                <ul style="text-align: left;">
-                                  <li>"invalidate metadata" ${ _("invalidates the entire catalog metadata. All table metadata will be reloaded on the next access.") }</li>
-                                  <li>"invalidate metadata &lt;table&gt;" ${ _("invalidates the metadata, load on the next access") }</li>
-                                  <li>"refresh &lt;table&gt;" ${ _("refreshes the metadata immediately. It is a faster, incremental refresh.") }</li>
-                                </ul>
-                              </div>
-                            </div>
-                          </li>
-                        % endif
-                          <li class="nav-header"></li>
-                          <li>
-                            <div class="control-group">
-                              <i class="icon-question-sign" id="help"></i>
-                              <div id="help-content" class="hide">
-                                <ul style="text-align: left;">
-                                  <li>${ _('Press CTRL + Space to autocomplete') }</li>
-                                  <li>${ _("You can execute queries with multiple SQL statements delimited by a semicolon ';'") }</li>
-                                  <li>${ _('You can highlight and run a fragment of a query') }</li>
-                                </ul>
-                              </div>
-                            </div>
-                          </li>
-                       </ul>
-                    <input type="hidden" name="${form.query["query"].html_name | n}" class="query" value="" />
-                </form>
+  <div class="row-fluid">
+    <div class="span3">
+      <form id="advancedSettingsForm" action="${action}" method="POST" class="form form-horizontal">
+        <div class="sidebar-nav">
+          <ul class="nav nav-list">
+            <li class="nav-header">${_('database')}</li>
+            <li class="white">
+              ${ form.query['database'] | n,unicode }
+            </li>
+            <li class="nav-header">${_('settings')}</li>
+            <li class="white">
+            % for i, f in enumerate(form.settings.forms):
+            <div class="param">
+                <div class="remove">
+                    ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+                        type="submit",
+                        title=_("Delete this setting"),
+                        klass="btn btn-mini settingsDelete"
+                    ), value=True)}
+                </div>
+
+                <div class="control-group">
+                    ${comps.label(f['key'])}
+                    ${comps.field(f['key'], attrs=dict(placeholder=app_name == 'impala' and "ABORT_ON_ERROR" or "mapred.reduce.tasks",
+                        klass="settingsField span8",
+                        autocomplete="off"
+                    ))}
+                </div>
+
+                <div class="control-group">
+                    ${comps.label(f['value'])}
+                    ${comps.field(f['value'], attrs=dict(
+                        placeholder="1",
+                        klass="span8"
+                    ))}
+                </div>
             </div>
+            ${comps.field(f['_exists'], hidden=True)}
+
+            % endfor
+            <div class="control-group">
+              <a class="btn btn-small" data-form-prefix="settings">${_('Add')}</a>
+            </div>
+            </li>
+            <li class="nav-header
+              % if app_name == 'impala':
+                  hide
+              % endif
+              ">
+            ${_('File Resources')}
+            </li>
+            <li class="white
+              % if app_name == 'impala':
+                  hide
+              % endif
+              ">
+            % for i, f in enumerate(form.file_resources.forms):
+            <div class="param">
+                <div class="remove">
+                    ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+                        type="submit",
+                        title=_("Delete this setting"),
+                        klass="btn btn-mini file_resourcesDelete"
+                    ), value=True)}
+                </div>
+
+                <div class="control-group">
+                    ${comps.label(f['type'])}
+                    ${comps.field(f['type'], render_default=True, attrs=dict(
+                        klass="span8"
+                    ))}
+                </div>
+
+                <div class="control-group">
+                    ${comps.label(f['path'])}
+                    ${comps.field(f['path'], attrs=dict(
+                        placeholder="/user/foo/udf.jar",
+                        klass="input-small file_resourcesField span8",
+                        data_filters=f['path'].html_name
+                    ))}
+                </div>
+            </div>
+            ${comps.field(f['_exists'], hidden=True)}
+
+            % endfor
+                <div class="control-group">
+                    <a class="btn btn-small" data-form-prefix="file_resources">${_('Add')}</a>
+                </div>
+            </li>
+            <li class="nav-header
+            % if app_name == 'impala':
+                hide
+            % endif
+            ">
+                ${_('User-defined Functions')}
+            </li>
+            <li class="white
+            % if app_name == 'impala':
+                hide
+            % endif
+            ">
+                % for i, f in enumerate(form.functions.forms):
+                    <div class="param">
+                        <div class="remove">
+                            ${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+                                type="submit",
+                                title=_("Delete this setting"),
+                                klass="btn btn-mini file_resourcesDelete"
+                            ), value=True)}
+                        </div>
+
+                        <div class="control-group">
+                            ${comps.label(f['name'])}
+                            ${comps.field(f['name'], attrs=dict(
+                                placeholder=_("myFunction"),
+                                klass="span8 functionsField"
+                            ))}
+                        </div>
+
+                        <div class="control-group">
+                            ${comps.label(f['class_name'])}
+                            ${comps.field(f['class_name'], attrs=dict(
+                                placeholder="com.acme.example",
+                                klass="span8"
+                            ))}
+                        </div>
+                    </div>
+
+                  ${comps.field(f['_exists'], hidden=True)}
+                % endfor
+                <div class="control-group">
+                    <a class="btn btn-small" data-form-prefix="functions">${_('Add')}</a>
+                </div>
+            </li>
+            <li class="nav-header">${_('Parameterization')}</li>
+            <li class="white">
+                <label class="checkbox" rel="tooltip" data-original-title="${_("If checked (the default), you can include parameters like $parameter_name in your query, and users will be prompted for a value when the query is run.")}">
+                    <input type="checkbox" id="id_${form.query["is_parameterized"].html_name | n}" name="${form.query["is_parameterized"].html_name | n}" ${extract_field_data(form.query["is_parameterized"]) and "CHECKED" or ""}/>
+                    ${_("Enable Parameterization")}
+                </label>
+            </li>
+              <li class="nav-header
+                % if app_name == 'impala':
+                    hide
+                % endif
+              ">${_('Email Notification')}</li>
+              <li class="white
+                % if app_name == 'impala':
+                    hide
+                % endif
+              ">
+                <label class="checkbox" rel="tooltip" data-original-title="${_("If checked, you will receive an email notification when the query completes.")}">
+                    <input type="checkbox" id="id_${form.query["email_notify"].html_name | n}" name="${form.query["email_notify"].html_name | n}" ${extract_field_data(form.query["email_notify"]) and "CHECKED" or ""}/>
+                    ${_("Email me on completion.")}
+                </label>
+              </li>
+            % if app_name == 'impala':
+              <li class="nav-header">
+                ${_('Metastore Catalog')}
+              </li>
+              <li class="white">
+                <div class="control-group">
+                  <span id="refresh-dyk">
+                    <i class="icon-refresh"></i>
+                    ${ _('Sync tables tips') }
+                  </span>
+                  <div id="refresh-content" class="hide">
+                    <ul style="text-align: left;">
+                      <li>"invalidate metadata" ${ _("invalidates the entire catalog metadata. All table metadata will be reloaded on the next access.") }</li>
+                      <li>"invalidate metadata &lt;table&gt;" ${ _("invalidates the metadata, load on the next access") }</li>
+                      <li>"refresh &lt;table&gt;" ${ _("refreshes the metadata immediately. It is a faster, incremental refresh.") }</li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+            % endif
+              <li class="nav-header"></li>
+              <li class="white">
+                <div class="control-group">
+                  <i class="icon-question-sign" id="help"></i>
+                  <div id="help-content" class="hide">
+                    <ul style="text-align: left;">
+                      <li>${ _('Press CTRL + Space to autocomplete') }</li>
+                      <li>${ _("You can execute queries with multiple SQL statements delimited by a semicolon ';'") }</li>
+                      <li>${ _('You can highlight and run a fragment of a query') }</li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+           </ul>
+            <input type="hidden" name="${form.query["query"].html_name | n}" class="query" value="" />
+            </div>
+                </form>
         </div>
 
         <div id="querySide" class="span9">
+          <div class="card" style="margin-top: 0">
             % if on_success_url:
               <input type="hidden" name="on_success_url" value="${on_success_url}"/>
             % endif
             <div style="margin-bottom: 30px">
-              <h1>
+              <h1 class="card-heading simple">
                 ${ _('Query Editor') }
                 % if can_edit_name:
                   :
@@ -274,7 +275,7 @@ ${layout.menubar(section='query')}
                 %endif
               </h1>
               % if can_edit_name:
-                <p>
+                <p style="margin-left: 20px">
                   <a href="#" id="query-description" data-type="textarea" data-pk="${ design.id }"
                      data-name="description"
                      data-url="${ url(app_name + ':save_design_properties') }"
@@ -285,6 +286,10 @@ ${layout.menubar(section='query')}
                 </p>
               % endif
             </div>
+            <div class="card-body">
+              <p>
+
+
             % if error_messages or log:
                 <ul class="nav nav-tabs">
                     <li class="active">
@@ -322,9 +327,11 @@ ${layout.menubar(section='query')}
                 </div>
               </div>
             % endif
-            <br/>
+              </p>
+            </div>
         </div>
     </div>
+  </div>
 </div>
 
 
@@ -392,6 +399,10 @@ ${layout.menubar(section='query')}
     overflow-y: scroll;
   }
 
+  .control-group {
+    margin-bottom: 0!important;
+  }
+
   .control-group label {
     float: left;
     padding-top: 5px;
@@ -399,8 +410,8 @@ ${layout.menubar(section='query')}
     width: 40px;
   }
 
-  .nav-list {
-    padding: 0;
+  .sidebar-nav {
+    margin-bottom: 90px !important;
   }
 
   .param {

+ 21 - 17
apps/beeswax/src/beeswax/templates/explain.mako

@@ -26,25 +26,29 @@ ${ commonheader(_('Query Explanation'), app_name, user, '100px') | n,unicode }
 ${layout.menubar(section='saved queries')}
 
 <div class="container-fluid" style="margin-bottom: 14px">
-    <h1>${_('Query Explanation:')} ${util.render_query_context(query_context)}</h1>
-
-    <ul class="nav nav-tabs">
-        <li class="active"><a href="#explanation" data-toggle="tab">${_('Explanation')}</a></li>
-        <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
-    </ul>
-
-    <div class="tab-content">
-        <div class="tab-pane active" id="explanation">
-            <pre>${explanation | h}</pre>
-        </div>
-        <div class="tab-pane" id="query">
-            <pre>${query.hql_query | h}</pre>
+  <div class="card">
+    <h1 class="card-heading simple">${_('Query Explanation:')} ${util.render_query_context(query_context)}</h1>
+    <div class="card-body">
+      <p>
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#explanation" data-toggle="tab">${_('Explanation')}</a></li>
+          <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane active" id="explanation">
+              <pre>${explanation | h}</pre>
+          </div>
+          <div class="tab-pane" id="query">
+              <pre>${query.hql_query | h}</pre>
+          </div>
         </div>
-    </div>
-
-  <br/>
-  ${util.render_query_context(query_context, _('Back'), 'btn')}
 
+        <br/>
+        ${util.render_query_context(query_context, _('Back'), 'btn')}
+      </p>
+    </div>
+  </div>
 </div>
 
 ${ commonfooter(messages) | n,unicode }

+ 40 - 34
apps/beeswax/src/beeswax/templates/list_designs.mako

@@ -29,40 +29,41 @@ ${ commonheader(_('Saved Queries'), app_name, user, '100px') | n,unicode }
 ${layout.menubar(section='saved queries')}
 
 <div class="container-fluid">
-  <h1>${_('Saved Queries')}</h1>
-
-  <%actionbar:render>
-    <%def name="search()">
-      <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
-    </%def>
-
-    <%def name="actions()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <button id="editBtn" class="btn toolbarBtn" title="${_('Edit the selected query')}" disabled="disabled"><i class="icon-edit"></i> ${_('Edit')}</button>
-        <button id="cloneBtn" class="btn toolbarBtn" title="${_('Copy the selected query')}" disabled="disabled"><i class="icon-copy"></i> ${_('Copy')}</button>
-        <button id="historyBtn" class="btn toolbarBtn" title="${_('View the usage history of the selected query')}" disabled="disabled"><i class="icon-tasks"></i> ${_('Usage history')}</button>
-
-        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle">
-          <button id="trashQueryBtn" class="btn toolbarBtn" disabled="disabled"><i class="icon-remove"></i> ${_('Move to trash')}</button>
-          <button id="trashQueryCaretBtn" class="btn toolbarBtn dropdown-toggle" data-toggle="dropdown" disabled="disabled">
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a href="#" id="deleteQueryBtn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
-          </ul>
+  <div class="card">
+    <h1 class="card-heading simple">${_('Saved Queries')}</h1>
+
+    <%actionbar:render>
+      <%def name="search()">
+        <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
+      </%def>
+
+      <%def name="actions()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <button id="editBtn" class="btn toolbarBtn" title="${_('Edit the selected query')}" disabled="disabled"><i class="icon-edit"></i> ${_('Edit')}</button>
+          <button id="cloneBtn" class="btn toolbarBtn" title="${_('Copy the selected query')}" disabled="disabled"><i class="icon-copy"></i> ${_('Copy')}</button>
+          <button id="historyBtn" class="btn toolbarBtn" title="${_('View the usage history of the selected query')}" disabled="disabled"><i class="icon-tasks"></i> ${_('Usage history')}</button>
+
+          <div id="delete-dropdown" class="btn-group" style="vertical-align: middle">
+            <button id="trashQueryBtn" class="btn toolbarBtn" disabled="disabled"><i class="icon-remove"></i> ${_('Move to trash')}</button>
+            <button id="trashQueryCaretBtn" class="btn toolbarBtn dropdown-toggle" data-toggle="dropdown" disabled="disabled">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="#" id="deleteQueryBtn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </%def>
-
-    <%def name="creation()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <a class="btn" href="${ url(app_name + ':list_trashed_designs') }" title="${_('Go to the trash')}"><i class="icon-trash"></i> ${_('View trash')}</a>
-        <a class="btn" href="${ url(app_name + ':execute_query') }" title="${_('Create new query')}"><i class="icon-plus-sign"></i> ${_('New query')}</a>
-      </div>
-    </%def>
-  </%actionbar:render>
-
-  <table class="table table-striped table-condensed datatables">
+      </%def>
+
+      <%def name="creation()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <a class="btn" href="${ url(app_name + ':list_trashed_designs') }" title="${_('Go to the trash')}"><i class="icon-trash"></i> ${_('View trash')}</a>
+          <a class="btn" href="${ url(app_name + ':execute_query') }" title="${_('Create new query')}"><i class="icon-plus-sign"></i> ${_('New query')}</a>
+        </div>
+      </%def>
+    </%actionbar:render>
+
+    <table class="table table-condensed datatables">
     <thead>
       <tr>
         <th width="1%"><div class="hueCheckbox selectAll" data-selectables="savedCheck"></div></th>
@@ -105,7 +106,12 @@ ${layout.menubar(section='saved queries')}
       % endfor
     </tbody>
   </table>
-  ${comps.pagination(page)}
+    <div class="card-body">
+      <p>
+        ${comps.pagination(page)}
+      </p>
+    </div>
+  </div>
 </div>
 
 <div id="deleteQuery" class="modal hide fade">

+ 18 - 10
apps/beeswax/src/beeswax/templates/list_history.mako

@@ -52,7 +52,7 @@ ${ layout.menubar(section='history') }
 <div class="container-fluid">
     <div class="row-fluid">
         <div class="span2">
-            <div class="well sidebar-nav">
+            <div class="sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Actions')}</li>
                     % if share_queries:
@@ -96,17 +96,21 @@ ${ layout.menubar(section='history') }
             </div>
         </div>
         <div class="span10">
-        <h1>${_('History')}</h1>
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('History')}</h1>
 
-        <%actionbar:render>
-          <%def name="search()">
-            <input id="filter" type="text" class="input-xxlarge search-query" placeholder="${_('Search for name, query, etc.')}" value="${ filter }">
-          </%def>
-        </%actionbar:render>
+            <%actionbar:render>
+              <%def name="search()">
+                <input id="filter" type="text" class="input-xxlarge search-query" placeholder="${_('Search for name, query, etc.')}" value="${ filter }">
+              </%def>
+            </%actionbar:render>
 
-        <img id="spinner" src="/static/art/spinner.gif" class="hide" />
+            <div class="card-body">
+              <p>
 
-        <table class="table table-striped table-condensed datatables">
+            <img id="spinner" src="/static/art/spinner.gif" class="hide" />
+
+            <table class="table table-striped table-condensed datatables" style="padding-left: 0;">
             <thead>
               <tr>
                 <th width="10%">${_('Time')}</th>
@@ -145,7 +149,11 @@ ${ layout.menubar(section='history') }
             % endfor
             </tbody>
           </table>
-         ${comps.pagination(page)}
+
+                ${comps.pagination(page)}
+              </p>
+            </div>
+          </div>
         </div>
     </div>
 </div>

+ 38 - 32
apps/beeswax/src/beeswax/templates/list_trashed_designs.mako

@@ -29,37 +29,38 @@ ${ commonheader(_('Saved Queries'), app_name, user, '100px') | n,unicode }
 ${layout.menubar(section='saved queries')}
 
 <div class="container-fluid">
-  <h1>${_('Trashed Queries')}</h1>
-
-  <%actionbar:render>
-    <%def name="search()">
-      <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
-    </%def>
-
-    <%def name="actions()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <button id="deleteQueryBtn" class="btn toolbarBtn" title="${_('Delete forever')}" disabled="disabled">
-          <i class="icon-bolt"></i> ${_('Delete forever')}
-        </button>
-        <button id="restoreQueryBtn" class="btn toolbarBtn" title="${_('Restore from trash')}" disabled="disabled">
-          <i class="icon-cloud-upload"></i> ${_('Restore')}
-        </button>
-      </div>
-    </%def>
-
-    <%def name="creation()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <button id="viewQueriesBtn" class="btn" title="${_('View queries')}">
-          <i class="icon-home"></i> ${_('View queries')}
-        </button>
-        <button id="emptyTrashBtn" class="btn" title="${_('Empty trash')}" data-bind="enabled: availableSavedQueries().length > 0">
-          <i class="icon-fire"></i> ${_('Empty trash')}
-        </button>
-      </div>
-    </%def>
-  </%actionbar:render>
-
-  <table class="table table-striped table-condensed datatables">
+  <div class="card">
+    <h1 class="card-heading simple">${_('Trashed Queries')}</h1>
+
+    <%actionbar:render>
+      <%def name="search()">
+        <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
+      </%def>
+
+      <%def name="actions()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <button id="deleteQueryBtn" class="btn toolbarBtn" title="${_('Delete forever')}" disabled="disabled">
+            <i class="icon-bolt"></i> ${_('Delete forever')}
+          </button>
+          <button id="restoreQueryBtn" class="btn toolbarBtn" title="${_('Restore from trash')}" disabled="disabled">
+            <i class="icon-cloud-upload"></i> ${_('Restore')}
+          </button>
+        </div>
+      </%def>
+
+      <%def name="creation()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <button id="viewQueriesBtn" class="btn" title="${_('View queries')}">
+            <i class="icon-home"></i> ${_('View queries')}
+          </button>
+          <button id="emptyTrashBtn" class="btn" title="${_('Empty trash')}" data-bind="enabled: availableSavedQueries().length > 0">
+            <i class="icon-fire"></i> ${_('Empty trash')}
+          </button>
+        </div>
+      </%def>
+    </%actionbar:render>
+
+    <table class="table table-condensed datatables">
     <thead>
       <tr>
         <th width="1%"><div class="hueCheckbox selectAll" data-selectables="savedCheck"></div></th>
@@ -97,7 +98,12 @@ ${layout.menubar(section='saved queries')}
       % endfor
     </tbody>
   </table>
-  ${comps.pagination(page)}
+    <div class="card-body">
+      <p>
+        ${comps.pagination(page)}
+      </p>
+    </div>
+  </div>
 </div>
 
 <div id="deleteQuery" class="modal hide fade">

+ 37 - 35
apps/beeswax/src/beeswax/templates/my_queries.mako

@@ -36,47 +36,48 @@ ${layout.menubar(section='my queries')}
 </style>
 
 <div class="container-fluid">
-  <h1>${_('My Queries')}</h1>
-
-  <%actionbar:render>
-    <%def name="search()">
-      <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
-    </%def>
-
-    <%def name="actions()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <button id="viewBtn" class="btn toolbarBtn" title="${_('View the result of the selected')}" disabled="disabled"><i class="icon-eye-open"></i> ${_('View result')}</button>
-        <button id="editBtn" class="btn toolbarBtn" title="${_('Edit the selected query')}" disabled="disabled"><i class="icon-edit"></i> ${_('Edit')}</button>
-        <button id="cloneBtn" class="btn toolbarBtn" title="${_('Copy the selected query')}" disabled="disabled"><i class="icon-copy"></i> ${_('Copy')}</button>
-        <button id="historyBtn" class="btn toolbarBtn" title="${_('View the usage history of the selected query')}" disabled="disabled"><i class="icon-tasks"></i> ${_('Usage history')}</button>
-        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle">
-          <button id="trashQueryBtn" class="btn toolbarBtn" disabled="disabled"><i class="icon-remove"></i> ${_('Move to trash')}</button>
-          <button id="trashQueryCaretBtn" class="btn toolbarBtn dropdown-toggle" data-toggle="dropdown" disabled="disabled">
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a href="#" id="deleteQueryBtn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
-          </ul>
+  <div class="card">
+    <h1 class="card-heading simple">${_('My Queries')}</h1>
+
+    <%actionbar:render>
+      <%def name="search()">
+        <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for query')}">
+      </%def>
+
+      <%def name="actions()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <button id="viewBtn" class="btn toolbarBtn" title="${_('View the result of the selected')}" disabled="disabled"><i class="icon-eye-open"></i> ${_('View result')}</button>
+          <button id="editBtn" class="btn toolbarBtn" title="${_('Edit the selected query')}" disabled="disabled"><i class="icon-edit"></i> ${_('Edit')}</button>
+          <button id="cloneBtn" class="btn toolbarBtn" title="${_('Copy the selected query')}" disabled="disabled"><i class="icon-copy"></i> ${_('Copy')}</button>
+          <button id="historyBtn" class="btn toolbarBtn" title="${_('View the usage history of the selected query')}" disabled="disabled"><i class="icon-tasks"></i> ${_('Usage history')}</button>
+          <div id="delete-dropdown" class="btn-group" style="vertical-align: middle">
+            <button id="trashQueryBtn" class="btn toolbarBtn" disabled="disabled"><i class="icon-remove"></i> ${_('Move to trash')}</button>
+            <button id="trashQueryCaretBtn" class="btn toolbarBtn dropdown-toggle" data-toggle="dropdown" disabled="disabled">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="#" id="deleteQueryBtn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </%def>
-
-    <%def name="creation()">
-      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-        <a class="btn" href="${ url(app_name + ':list_trashed_designs') }" title="${_('Go to the trash')}"><i class="icon-trash"></i> ${_('View trash')}</a>
-        <a class="btn" href="${ url(app_name + ':execute_query') }" title="${_('Create new query')}"><i class="icon-plus-sign"></i> ${_('New query')}</a>
-      </div>
-    </%def>
-  </%actionbar:render>
-
-  <ul class="nav nav-tabs">
+      </%def>
+
+      <%def name="creation()">
+        <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+          <a class="btn" href="${ url(app_name + ':list_trashed_designs') }" title="${_('Go to the trash')}"><i class="icon-trash"></i> ${_('View trash')}</a>
+          <a class="btn" href="${ url(app_name + ':execute_query') }" title="${_('Create new query')}"><i class="icon-plus-sign"></i> ${_('New query')}</a>
+        </div>
+      </%def>
+    </%actionbar:render>
+
+    <ul class="nav nav-tabs">
     <li class="active"><a href="#recentSavedQueries" data-toggle="tab">${_('Recent Saved Queries')} &nbsp;<span id="recentSavedQueriesFilterCnt" class="badge badge-info"></span></a></li>
     <li><a href="#recentRunQueries" data-toggle="tab">${_('Recent Run Queries')}  &nbsp;<span id="recentRunQueriesFilterCnt" class="badge badge-info"></span></a></li>
   </ul>
 
-  <div class="tab-content">
+    <div class="tab-content">
     <div class="active tab-pane" id="recentSavedQueries">
-      <table id="recentSavedQueriesTable" class="table table-striped table-condensed datatables">
+      <table id="recentSavedQueriesTable" class="table table-condensed datatables">
         <thead>
           <tr>
             <th width="1%"><div class="hueCheckbox selectAll" data-selectables="savedCheck"></div></th>
@@ -158,6 +159,7 @@ ${layout.menubar(section='my queries')}
       % endif
     </div>
   </div>
+  </div>
 </div>
 
 <div id="deleteQuery" class="modal hide fade">

+ 29 - 14
apps/beeswax/src/beeswax/templates/parameterization.mako

@@ -25,7 +25,17 @@ ${ commonheader(_('Parameterize Query'), app_name, user, '100px') | n,unicode }
 
 ${layout.menubar()}
 
+<style class="text/css">
+  .form-horizontal .controls {
+    margin-left: 100px!important;
+  }
+  .control-label {
+    width: 80px!important;
+  }
+</style>
+
 <div class="container-fluid">
+   <div class="card">
     <%
         if explain:
             action = url(app_name + ':explain_parameterized_query', design.id)
@@ -34,23 +44,28 @@ ${layout.menubar()}
             action = url(app_name + ':execute_parameterized_query', design.id)
             btn = _("Execute query")
     %>
-    <form method="POST" action="${action}" class="form-horizontal">
-        <fieldset>
-            <legend>${_('Please specify parameters for this query:')}</legend>
-            % for field in form:
-                <div class="control-group">
-                    <label class="control-label">${comps.bootstrapLabel(field)}</label>
-                    <div class="controls">
-                    ${comps.field(field)}
-                    </div>
+     <h1 class="card-heading simple">${_('Please specify parameters for this query')}</h1>
+     <div class="card-body">
+       <p>
+          <form method="POST" action="${action}" class="form-horizontal">
+            <fieldset>
+              % for field in form:
+              <div class="control-group">
+                <label class="control-label">${comps.bootstrapLabel(field)}</label>
+                <div class="controls">
+                ${comps.field(field)}
                 </div>
-            % endfor
-            <div class="form-actions">
+              </div>
+              % endfor
+              <div class="form-actions" style="padding-left: 10px">
                 <a class="btn" href="javascript:history.go(-1);">${_('Cancel')}</a>
                 <button type="submit" class="btn btn-primary">${btn}</button>
-            </div>
-        </fieldset>
-    </form>
+              </div>
+            </fieldset>
+          </form>
+       </p>
+     </div>
+  </div>
 </div>
 
 ${ commonfooter(messages) | n,unicode }

+ 39 - 34
apps/beeswax/src/beeswax/templates/save_results.mako

@@ -33,41 +33,46 @@ ${layout.menubar(section='query')}
 % if error_msg:
   <h4>${error_msg}</h4>
 % endif
-  <h1>${_('Save Query Results')}</h1>
-
-  <form id="saveForm" action="${action}" method="POST" class="form form-inline">
-    <fieldset>
-      <div class="control-group">
-        <div class="controls">
-          <label class="radio">
-            <input id="id_save_target_0" type="radio" name="save_target" value="${ form.SAVE_TYPE_TBL }" data-bind="checked: toWhere"/>
-            &nbsp;${ _('In a new table') }
-          </label>
-          <span data-bind="visible: toWhere() == 'to a new table'">
-            ${ comps.field(form['target_table'], notitle=True, placeholder='Table Name') }
-          </span>
-        </div>
-      </div>
-      <div class="control-group">
-        <div class="controls">
-          <label class="radio">
-            <input id="id_save_target_1" type="radio" name="save_target" value="${ form.SAVE_TYPE_DIR }" data-bind="checked: toWhere">
-            &nbsp;${ _('In an HDFS directory') }
-          </label>
-          <span data-bind="visible: toWhere() == 'to HDFS directory'">
-            ${ comps.field(form['target_dir'], notitle=True, placeholder=_('Results location'), klass='pathChooser') }
-          </span>
-        </div>
-      </div>
-      <div id="fileChooserModal" class="smallModal well hide">
-        <a href="#" class="close" data-dismiss="modal">&times;</a>
-      </div>
-    </fieldset>
-    <div class="form-actions">
-      <input type="submit" name="save" value="${_('Save')}" class="btn btn-primary"/>
-      <input type="submit" name="cancel" value="${_('Cancel')}" class="btn"/>
+  <div class="card">
+    <h1 class="card-heading simple">${_('Save Query Results')}</h1>
+    <div class="card-body">
+      <p>
+        <form id="saveForm" action="${action}" method="POST" class="form form-inline">
+          <fieldset>
+            <div class="control-group">
+              <div class="controls">
+                <label class="radio">
+                  <input id="id_save_target_0" type="radio" name="save_target" value="${ form.SAVE_TYPE_TBL }" data-bind="checked: toWhere"/>
+                  &nbsp;${ _('In a new table') }
+                </label>
+                <span data-bind="visible: toWhere() == 'to a new table'">
+                  ${ comps.field(form['target_table'], notitle=True, placeholder='Table Name') }
+                </span>
+              </div>
+            </div>
+            <div class="control-group">
+              <div class="controls">
+                <label class="radio">
+                  <input id="id_save_target_1" type="radio" name="save_target" value="${ form.SAVE_TYPE_DIR }" data-bind="checked: toWhere">
+                  &nbsp;${ _('In an HDFS directory') }
+                </label>
+                <span data-bind="visible: toWhere() == 'to HDFS directory'">
+                  ${ comps.field(form['target_dir'], notitle=True, placeholder=_('Results location'), klass='pathChooser') }
+                </span>
+              </div>
+            </div>
+            <div id="fileChooserModal" class="smallModal well hide">
+              <a href="#" class="close" data-dismiss="modal">&times;</a>
+            </div>
+          </fieldset>
+          <div class="form-actions" style="padding-left:10px">
+            <input type="submit" name="save" value="${_('Save')}" class="btn btn-primary"/>
+            <input type="submit" name="cancel" value="${_('Cancel')}" class="btn"/>
+          </div>
+        </form>
+      </p>
     </div>
-  </form>
+  </div>
 </div>
 
 <script type="text/javascript" charset="utf-8">

+ 27 - 23
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -29,8 +29,7 @@ ${layout.menubar(section='query')}
 
 <style type="text/css">
   #collapse {
-    float: right;
-    cursor: pointer;
+    padding: 4px 0 0;
   }
 
   #expand {
@@ -64,13 +63,12 @@ ${layout.menubar(section='query')}
 </style>
 
 <div class="container-fluid">
-  <h1>${_('Query Results:')} ${ util.render_query_context(query_context) }</h1>
-  <div id="expand"><i class="icon-chevron-right icon-white"></i></div>
+  <div id="expand"><i class="icon-chevron-right" style="color: #FFFFFF"></i></div>
     <div class="row-fluid">
         <div class="span3">
-            <div class="well sidebar-nav">
-        <a id="collapse" class="btn btn-small"><i class="icon-chevron-left" rel="tooltip" title="${_('Collapse this panel')}"></i></a>
+            <div class="sidebar-nav">
                 <ul class="nav nav-list">
+                    <li><a id="collapse" class="btn btn-small"><i class="icon-chevron-left" rel="tooltip" title="${_('Collapse this panel')}"></i></a></li>
                     % if download_urls:
                     <li class="nav-header">${_('Downloads')}</li>
                     <li><a target="_blank" href="${download_urls["csv"]}">${_('Download as CSV')}</a></li>
@@ -91,7 +89,7 @@ ${layout.menubar(section='query')}
                         % endfor
                     % else:
                         <li class="nav-header">${mr_jobs}</li>
-                        <li>${_('No Hadoop jobs were launched in running this query.')}</li>
+                        <li class="white">${_('No Hadoop jobs were launched in running this query.')}</li>
                     % endif
                     % endif
                 </ul>
@@ -121,22 +119,26 @@ ${layout.menubar(section='query')}
         </div>
 
         <div class="span9">
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#results" data-toggle="tab">
-            %if error:
-                  ${_('Error')}
-            %else:
-                  ${_('Results')}
-            %endif
-        </a></li>
-        <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
-        <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
-        % if not error:
-        <li><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
-        % endif
-      </ul>
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('Query Results:')} ${ util.render_query_context(query_context) }</h1>
+            <div class="card-body">
+            <p>
+            <ul class="nav nav-tabs">
+              <li class="active"><a href="#results" data-toggle="tab">
+                  %if error:
+                        ${_('Error')}
+                  %else:
+                        ${_('Results')}
+                  %endif
+              </a></li>
+              <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
+              <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
+              % if not error:
+              <li><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
+              % endif
+            </ul>
 
-      <div class="tab-content">
+            <div class="tab-content">
         <div class="active tab-pane" id="results">
             % if error:
               <div class="alert alert-error">
@@ -207,7 +209,9 @@ ${layout.menubar(section='query')}
         </div>
         % endif
       </div>
-
+            </p>
+            </div>
+          </div>
         </div>
     </div>
 </div>

+ 19 - 13
apps/beeswax/src/beeswax/templates/watch_wait.mako

@@ -29,7 +29,6 @@ ${layout.menubar(section='query')}
 <!-- <meta http-equiv="refresh" content="3;${url(app_name + ':watch_query', query.id)}?${fwd_params}" /> -->
 
 <div class="container-fluid">
-    <h1>${_('Waiting for query...')} ${util.render_query_context(query_context)}</h1>
     <div class="row-fluid">
         <div class="span3">
             % if app_name == 'impala':
@@ -41,7 +40,7 @@ ${layout.menubar(section='query')}
                 </div>
               </li>
             % endif
-            <div class="well sidebar-nav
+            <div class="sidebar-nav
                 % if app_name == 'impala':
                   hide
                 % endif
@@ -58,25 +57,32 @@ ${layout.menubar(section='query')}
                         % endfor
                     % else:
                         <li id="jobsHeader" class="nav-header">${mr_jobs}</li>
-                        <li class="jobLink">${_('No Hadoop jobs were launched in running this query.')}</li>
+                        <li class="white jobLink">${_('No Hadoop jobs were launched in running this query.')}</li>
                     % endif
                 </ul>
             </div>
         </div>
         <div class="span9">
-            <ul class="nav nav-tabs">
-                <li class="active"><a href="#log" data-toggle="tab">${_('Log')}</a></li>
-                <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
-            </ul>
+          <div class="card" style="margin-top: 0">
+            <h1 class="card-heading simple">${_('Waiting for query...')} ${util.render_query_context(query_context)}</h1>
+            <div class="card-body">
+              <p>
+                <ul class="nav nav-tabs">
+                    <li class="active"><a href="#log" data-toggle="tab">${_('Log')}</a></li>
+                    <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
+                </ul>
 
-               <div class="tab-content">
-                <div class="active tab-pane" id="log">
-                    <pre>${ force_unicode(log) }</pre>
-                </div>
-                <div class="tab-pane" id="query">
-                    <pre>${ query.get_current_statement() }</pre>
+                <div class="tab-content">
+                    <div class="active tab-pane" id="log">
+                        <pre>${ force_unicode(log) }</pre>
+                    </div>
+                    <div class="tab-pane" id="query">
+                        <pre>${ query.get_current_statement() }</pre>
+                    </div>
                 </div>
+              </p>
             </div>
+          </div>
         </div>
     </div>
 </div>