Browse Source

[metastore] Improved look'n'feel of create table manually

Enrico Berti 9 years ago
parent
commit
3ba1dcd182
1 changed files with 40 additions and 26 deletions
  1. 40 26
      apps/beeswax/src/beeswax/templates/create_table_manually.mako

+ 40 - 26
apps/beeswax/src/beeswax/templates/create_table_manually.mako

@@ -129,7 +129,7 @@ ${ assist.assistPanel() }
                                   )
                                   )
                                 )}
                                 )}
                                 <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                                 <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                <p class="help-block">
+                                <p class="help-block muted">
                                     ${_('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.')}
                                     ${_('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>
                                 </p>
                             </div>
                             </div>
@@ -141,7 +141,7 @@ ${ assist.assistPanel() }
                                   placeholder=_('Optional'),
                                   placeholder=_('Optional'),
                                   )
                                   )
                                 )}
                                 )}
-                                <p class="help-block">
+                                <p class="help-block muted">
                                     ${_("Use a table comment to describe your table.  For example, note the data's provenance and any caveats users need to know.")}
                                     ${_("Use a table comment to describe your table.  For example, note the data's provenance and any caveats users need to know.")}
                                 </p>
                                 </p>
                             </div>
                             </div>
@@ -167,7 +167,7 @@ ${ assist.assistPanel() }
                                         % endif
                                         % endif
                                             >
                                             >
                                     ${_('Delimited')}
                                     ${_('Delimited')}
-                                    <span class="help-inline">
+                                    <span class="help-block muted">
                                     ${_('(Data files use delimiters, like commas (CSV) or tabs.)')}
                                     ${_('(Data files use delimiters, like commas (CSV) or tabs.)')}
                                     </span>
                                     </span>
                                 </label>
                                 </label>
@@ -178,7 +178,7 @@ ${ assist.assistPanel() }
                                         % endif
                                         % endif
                                             >
                                             >
                                     ${_('SerDe')}
                                     ${_('SerDe')}
-                                    <span class="help-inline">
+                                    <span class="help-block muted">
                                     ${_('(Enter a specialized serialization implementation.)')}
                                     ${_('(Enter a specialized serialization implementation.)')}
                                     </span>
                                     </span>
                                 </label>
                                 </label>
@@ -198,7 +198,7 @@ ${ assist.assistPanel() }
                                 <div class="controls">
                                 <div class="controls">
                                     ${comps.field(table_form["field_terminator"], render_default=True)}
                                     ${comps.field(table_form["field_terminator"], render_default=True)}
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('Enter the column delimiter. Must be a single character. Use syntax like "\\001" or "\\t" for special characters.')}
                                         ${_('Enter the column delimiter. Must be a single character. Use syntax like "\\001" or "\\t" for special characters.')}
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -208,7 +208,7 @@ ${ assist.assistPanel() }
                                 <div class="controls">
                                 <div class="controls">
                                     ${comps.field(table_form["collection_terminator"], render_default=True)}
                                     ${comps.field(table_form["collection_terminator"], render_default=True)}
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('Use for array types.')}
                                         ${_('Use for array types.')}
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -218,7 +218,7 @@ ${ assist.assistPanel() }
                                 <div class="controls">
                                 <div class="controls">
                                     ${comps.field(table_form["map_key_terminator"], render_default=True)}
                                     ${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.')}</span>
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('Use for map types.')}
                                         ${_('Use for map types.')}
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -234,7 +234,7 @@ ${ assist.assistPanel() }
                                     placeholder='com.acme.hive.SerDe',
                                     placeholder='com.acme.hive.SerDe',
                                     )
                                     )
                                     )}
                                     )}
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('The Java class name of your SerDe.')} <em>${_('e.g.')}</em>, org.apache.hadoop.hive.contrib.serde2.RegexSerDe
                                         ${_('The Java class name of your SerDe.')} <em>${_('e.g.')}</em>, org.apache.hadoop.hive.contrib.serde2.RegexSerDe
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -246,7 +246,7 @@ ${ assist.assistPanel() }
                                     placeholder='"prop" = "value", "prop2" = "value2"',
                                     placeholder='"prop" = "value", "prop2" = "value2"',
                                     )
                                     )
                                     )}
                                     )}
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('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"
                                         ${_('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>
                                     </span>
                                 </div>
                                 </div>
@@ -283,7 +283,7 @@ ${ assist.assistPanel() }
                                     )
                                     )
                                     )}
                                     )}
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('Java class used to read data.')}
                                         ${_('Java class used to read data.')}
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -296,7 +296,7 @@ ${ assist.assistPanel() }
                                     )
                                     )
                                     )}
                                     )}
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                                     <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
-                                    <span class="help-block">
+                                    <span class="help-block muted">
                                         ${_('Java class used to write data.')}
                                         ${_('Java class used to write data.')}
                                     </span>
                                     </span>
                                 </div>
                                 </div>
@@ -318,7 +318,7 @@ ${ assist.assistPanel() }
                                     )}
                                     )}
                                     ${_('Use default location')}
                                     ${_('Use default location')}
                                 </label>
                                 </label>
-                                <span class="help-block">
+                                <span class="help-block muted">
                                     ${_('Store your table in the default location (controlled by Hive, and typically')} <em>/user/hive/warehouse/table_name</em>).
                                     ${_('Store your table in the default location (controlled by Hive, and typically')} <em>/user/hive/warehouse/table_name</em>).
                                 </span>
                                 </span>
                             </div>
                             </div>
@@ -333,7 +333,7 @@ ${ assist.assistPanel() }
                                 file_chooser=True,
                                 file_chooser=True,
                                 show_errors=False
                                 show_errors=False
                                 )}
                                 )}
-                                <span class="help-block">
+                                <span class="help-block muted">
                                 ${_("Enter the path (on HDFS) to your table's data location")}
                                 ${_("Enter the path (on HDFS) to your table's data location")}
                                 </span>
                                 </span>
                             </div>
                             </div>
@@ -371,7 +371,7 @@ ${ assist.assistPanel() }
                     </fieldset>
                     </fieldset>
                 </div>
                 </div>
               </div>
               </div>
-              <div class="form-actions" style="padding-left: 10px">
+              <div class="form-actions" style="padding-left: 0">
                   <button type="button" id="backBtn" class="btn hide">${_('Back')}</button>
                   <button type="button" id="backBtn" class="btn hide">${_('Back')}</button>
                   <button type="button" id="nextBtn" class="btn btn-primary">${_('Next')}</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')}" />
                   <input id="submit" type="submit" name="create" class="btn btn-primary hide" value="${_('Create table')}" />
@@ -394,16 +394,16 @@ ${ assist.assistPanel() }
         ${comps.field(form['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
         ${comps.field(form['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
         type="submit",
         type="submit",
         title=_("Delete this column"),
         title=_("Delete this column"),
-        klass="btn btn-mini removeBtn"
+        klass="btn btn-small removeBtn"
         ), value=True)}
         ), value=True)}
         </div>
         </div>
         <div class="control-group">
         <div class="control-group">
             <label class="control-label">${_('Column name')}</label>
             <label class="control-label">${_('Column name')}</label>
             <div class="controls">
             <div class="controls">
-                <input class="column" name="${form["column_name"].html_name | n}" value="${form["column_name"].data or ''}" placeholder="${_('Column Name')}"/>
+                <input class="column input input-large" name="${form["column_name"].html_name | n}" value="${form["column_name"].data or ''}" placeholder="${_('Column Name')}"/>
                 <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                 <span  class="help-inline error-inline hide">${_('This field is required. Spaces are not allowed.')}</span>
                 <span  class="help-inline error-inline error-inline-bis hide">${_('There is another field with the same name.')}</span>
                 <span  class="help-inline error-inline error-inline-bis hide">${_('There is another field with the same name.')}</span>
-                <span class="help-block">
+                <span class="help-block muted">
                 ${_('Column name must be single words that start with a letter or a digit.')}
                 ${_('Column name must be single words that start with a letter or a digit.')}
                 </span>
                 </span>
             </div>
             </div>
@@ -414,7 +414,7 @@ ${ assist.assistPanel() }
             ${comps.field(form["column_type"],
             ${comps.field(form["column_type"],
             render_default=True
             render_default=True
             )}
             )}
-            <span class="help-block">
+            <span class="help-block muted">
             ${_('Type for this column. Certain advanced types (namely, structs) are not exposed in this interface.')}
             ${_('Type for this column. Certain advanced types (namely, structs) are not exposed in this interface.')}
             </span>
             </span>
             </div>
             </div>
@@ -425,7 +425,7 @@ ${ assist.assistPanel() }
                         <label class="control-label">${_('Array value type')}</label>
                         <label class="control-label">${_('Array value type')}</label>
                         <div class="controls">
                         <div class="controls">
                         ${comps.field(form["array_type"], render_default=True)}
                         ${comps.field(form["array_type"], render_default=True)}
-                            <span class="help-block">
+                            <span class="help-block muted">
                             ${_('Type of the array values.')}
                             ${_('Type of the array values.')}
                             </span>
                             </span>
                         </div>
                         </div>
@@ -436,7 +436,7 @@ ${ assist.assistPanel() }
                         <label class="control-label">${_('Map Key type')}</label>
                         <label class="control-label">${_('Map Key type')}</label>
                         <div class="controls">
                         <div class="controls">
                         ${comps.field(form["map_key_type"], render_default=True)}
                         ${comps.field(form["map_key_type"], render_default=True)}
-                            <span class="help-inline">
+                            <span class="help-block muted">
                             ${_('Type of the map keys.')}
                             ${_('Type of the map keys.')}
                             </span>
                             </span>
                         </div>
                         </div>
@@ -445,7 +445,7 @@ ${ assist.assistPanel() }
                         <label class="control-label">${_('Map Value type')}</label>
                         <label class="control-label">${_('Map Value type')}</label>
                         <div class="controls">
                         <div class="controls">
                         ${comps.field(form["map_value_type"], render_default=True)}
                         ${comps.field(form["map_value_type"], render_default=True)}
-                            <span class="help-inline">
+                            <span class="help-block muted">
                             ${_('Type of the map values.')}
                             ${_('Type of the map values.')}
                             </span>
                             </span>
                         </div>
                         </div>
@@ -457,7 +457,7 @@ ${ assist.assistPanel() }
                 <label class="control-label">${_('Size')}</label>
                 <label class="control-label">${_('Size')}</label>
                 <div class="controls">
                 <div class="controls">
                 ${comps.field(form["char_length"], render_default=True)}
                 ${comps.field(form["char_length"], render_default=True)}
-                    <span class="help-block">
+                    <span class="help-block muted">
                     ${_("Length of char value (1~255)")}
                     ${_("Length of char value (1~255)")}
                     </span>
                     </span>
                 </div>
                 </div>
@@ -468,7 +468,7 @@ ${ assist.assistPanel() }
                 <label class="control-label">${_('Size')}</label>
                 <label class="control-label">${_('Size')}</label>
                 <div class="controls">
                 <div class="controls">
                 ${comps.field(form["varchar_length"], render_default=True)}
                 ${comps.field(form["varchar_length"], render_default=True)}
-                    <span class="help-block">
+                    <span class="help-block muted">
                     ${_("Length of varchar value (1~65355)")}
                     ${_("Length of varchar value (1~65355)")}
                     </span>
                     </span>
                 </div>
                 </div>
@@ -527,6 +527,18 @@ ${ assist.assistPanel() }
   div .alert {
   div .alert {
     margin-bottom: 30px;
     margin-bottom: 30px;
   }
   }
+
+  .cnt.well {
+    border: none;
+  }
+
+  .cnt.well:hover {
+    background-color: #F0F0F0;
+  }
+
+  .help-block.muted, .help-inline.muted  {
+    color: #999;
+  }
 </style>
 </style>
 
 
 </div>
 </div>
@@ -749,7 +761,7 @@ ${ assist.assistPanel() }
           if (!isValid($.trim(_field.val()))) {
           if (!isValid($.trim(_field.val()))) {
             showFieldError(_field);
             showFieldError(_field);
             if (scrollTo == 0) {
             if (scrollTo == 0) {
-              scrollTo = $(this).position().top - $(this).closest(".well").height();
+              scrollTo = $(this).offset().top + $('.right-panel').scrollTop() - 150;
             }
             }
             step6Valid = false;
             step6Valid = false;
           }
           }
@@ -761,7 +773,7 @@ ${ assist.assistPanel() }
             if ($.trim($(this).val()) != "" && $.trim($(this).val()) == $.trim(_field.val())) {
             if ($.trim($(this).val()) != "" && $.trim($(this).val()) == $.trim(_field.val())) {
               _lastSecondErrorField = $(this);
               _lastSecondErrorField = $(this);
               if (scrollTo == 0) {
               if (scrollTo == 0) {
-                scrollTo = _field.position().top - _field.closest(".well").height();
+                scrollTo = _field.offset().top + $('.right-panel').scrollTop() - 150;
               }
               }
               step6Valid = false;
               step6Valid = false;
             }
             }
@@ -774,7 +786,9 @@ ${ assist.assistPanel() }
           }
           }
         });
         });
         if (!step6Valid && scrollTo > 0) {
         if (!step6Valid && scrollTo > 0) {
-          $(window).scrollTop(scrollTo);
+          $('.right-panel').animate({
+            'scrollTop' : scrollTo
+          }, 500);
         }
         }
         return step6Valid;
         return step6Valid;
       }
       }