Răsfoiți Sursa

[useradmin] Ported UI to Hue3
(cherry picked from commit f987fa97012a6c90d72a8f57669c3bdde019bc2f)

Enrico Berti 12 ani în urmă
părinte
comite
4f7214a

+ 56 - 51
apps/useradmin/src/useradmin/templates/edit_group.mako

@@ -31,69 +31,74 @@ ${layout.menubar(section='groups', _=_)}
     <% group_class = len(field.errors) and "error" or "" %>
     <div class="control-group ${group_class}">
       <label class="control-label" for="id_${field.html_name}">${field.label}</label>
-      <div class="controls">
-		${unicode(field) | n}
-        % if len(field.errors):
-          <span class="help-inline">${unicode(field.errors) | n}</span>
-        % endif
-      </div>
+    <div class="controls">
+    ${unicode(field) | n}
+    % if len(field.errors):
+        <span class="help-inline">${unicode(field.errors) | n}</span>
+    % endif
+    </div>
     </div>
   %endif
 </%def>
 
 
 <div class="container-fluid">
-	% if name:
-		<h1>${_('Hue Groups - Edit group: %(name)s') % dict(name=name)}</h1>
-	% else:
-		% if ldap:
-			<h1>${_('Hue Groups - Add/Sync LDAP group')}</h1>
-		% else:
-			<h1>${_('Hue Groups - Create group')}</h1>
-		% endif
-	% endif
+  <div class="card">
+    % if name:
+        <h1 class="card-heading simple">${_('Hue Groups - Edit group: %(name)s') % dict(name=name)}</h1>
+    % else:
+      % if ldap:
+          <h1 class="card-heading simple">${_('Hue Groups - Add/Sync LDAP group')}</h1>
+      % else:
+          <h1 class="card-heading simple">${_('Hue Groups - Create group')}</h1>
+      % endif
+    % endif
 
     <br/>
 
-	<form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal" autocomplete="off">
-		<fieldset>
-		% for field in form:
-			${render_field(field)}
-		% endfor
-        </fieldset>
-		<br/>
-		<div class="form-actions">
-			% if name:
-				<input type="submit" class="btn btn-primary" value="${_('Update group')}"/>
-			% else:
-				% if ldap:
-					<input type="submit" class="btn btn-primary" value="${_('Add/Sync group')}"/>
-				% else:
-					<input type="submit" class="btn btn-primary" value="${_('Add group')}"/>
-				% endif
-			% endif
-			<a href="/useradmin/groups" class="btn">${_('Cancel')}</a>
-		</div>
-	</form>
+    <form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal" autocomplete="off">
+      <fieldset>
+          % for field in form:
+        ${render_field(field)}
+          % endfor
+      </fieldset>
+      <br/>
+
+      <div class="form-actions">
+        % if name:
+            <input type="submit" class="btn btn-primary" value="${_('Update group')}"/>
+        % else:
+          % if ldap:
+              <input type="submit" class="btn btn-primary" value="${_('Add/Sync group')}"/>
+          % else:
+              <input type="submit" class="btn btn-primary" value="${_('Add group')}"/>
+          % endif
+        % endif
+        <a href="/useradmin/groups" class="btn">${_('Cancel')}</a>
+      </div>
+    </form>
+  </div>
 </div>
 
 <script type="text/javascript" charset="utf-8">
-	$(document).ready(function(){
-		$("#id_members").jHueSelector({
-            selectAllLabel: "${_('Select all')}",
-            searchPlaceholder: "${_('Search')}",
-            noChoicesFound: "${_('No users found.')} <a href='${url('useradmin.views.edit_user')}'>${_('Create a new user now')} &raquo;</a>",
-            width:600,
-            height:240
-        });
-		$("#id_permissions").jHueSelector({
-            selectAllLabel: "${_('Select all')}",
-            searchPlaceholder: "${_('Search')}",
-            noChoicesFound: "${_('No permissions found.')}",
-            width:600,
-            height:240
-        });
-	});
+  $(document).ready(function () {
+    $("#id_members").jHueSelector({
+      selectAllLabel: "${_('Select all')}",
+      searchPlaceholder: "${_('Search')}",
+      noChoicesFound: "${_('No users found.')} <a href='${url('useradmin.views.edit_user')}'>${_('Create a new user now')} &raquo;</a>",
+      width: 600,
+      height: 240
+    });
+    $("#id_permissions").jHueSelector({
+      selectAllLabel: "${_('Select all')}",
+      searchPlaceholder: "${_('Search')}",
+      noChoicesFound: "${_('No permissions found.')}",
+      width: 600,
+      height: 240
+    });
+  });
 </script>
 
+${layout.commons()}
+
 ${ commonfooter(messages) | n,unicode }

+ 36 - 28
apps/useradmin/src/useradmin/templates/edit_permissions.mako

@@ -29,41 +29,49 @@ ${layout.menubar(section='permissions', _=_)}
     <% group_class = len(field.errors) and "error" or "" %>
     <div class="control-group ${group_class}">
       <label class="control-label" for="id_${field.html_name}">${field.label}</label>
-      <div class="controls">
-		${unicode(field) | n}
-        % if len(field.errors):
-          <span class="help-inline">${unicode(field.errors) | n}</span>
-        % endif
-      </div>
+    <div class="controls">
+    ${unicode(field) | n}
+    % if len(field.errors):
+        <span class="help-inline">${unicode(field.errors) | n}</span>
+    % endif
+    </div>
     </div>
   %endif
 </%def>
 
 <div class="container-fluid">
-	<h1>${_('Hue Permissions - Edit app: %(app)s') % dict(app=app)}</h1>
-	<form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal">
-		<fieldset>
-			% for field in form:
-				${render_field(field)}
-			% endfor
-		</fieldset>
-		<br/>
-		<div class="form-actions">
-			<input type="submit" class="btn btn-primary" value="${_('Update permission')}"/>
-			<a href="/useradmin/permissions" class="btn">${_('Cancel')}</a>
-		</div>
-	</form>
+  <div class="card">
+    <h1 class="card-heading simple">${_('Hue Permissions - Edit app: %(app)s') % dict(app=app)}</h1>
+    <br/>
+
+    <form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal">
+      <fieldset>
+          % for field in form:
+          ${render_field(field)}
+          % endfor
+      </fieldset>
+      <br/>
+
+      <div class="form-actions">
+        <input type="submit" class="btn btn-primary" value="${_('Update permission')}"/>
+        <a href="/useradmin/permissions" class="btn">${_('Cancel')}</a>
+      </div>
+    </form>
+  </div>
 </div>
 
 <script type="text/javascript" charset="utf-8">
-	$(document).ready(function(){
-		$("#id_groups").jHueSelector({
-            selectAllLabel: "${_('Select all')}",
-            searchPlaceholder: "${_('Search')}",
-            noChoicesFound: "${_('No groups found.')}",
-            width:600,
-            height:240
-        });
-	});
+  $(document).ready(function () {
+    $("#id_groups").jHueSelector({
+      selectAllLabel: "${_('Select all')}",
+      searchPlaceholder: "${_('Search')}",
+      noChoicesFound: "${_('No groups found.')}",
+      width: 600,
+      height: 240
+    });
+  });
 </script>
+
+${layout.commons()}
+
 ${ commonfooter(messages) | n,unicode }

+ 59 - 68
apps/useradmin/src/useradmin/templates/edit_user.mako

@@ -27,84 +27,66 @@ ${ commonheader(_('Hue Users'), "useradmin", user, "100px") | n,unicode }
 % endif
 
 <div class="container-fluid">
+  <div class="card">
     % if username:
-        <h1>${_('Hue Users - Edit user: %(username)s') % dict(username=username)}</h1>
+      <h1 class="card-heading simple">${_('Hue Users - Edit user: %(username)s') % dict(username=username)}</h1>
     % else:
-        <h1>${_('Hue Users - Create user')}</h1>
+      <h1 class="card-heading simple">${_('Hue Users - Create user')}</h1>
     % endif
 
-  <form id="editForm" method="POST" class="form form-horizontal" autocomplete="off">
-
-      <div id="properties" class="section">
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#step1" class="step">${ _('Step 1: Credentials (required)') }</a></li>
-          <li><a href="#step2" class="step">${ user.is_superuser and _('Step 2: Names and Groups') or _('Step 2: Names') }</a></li>
-          % if user.is_superuser:
-          <li><a href="#step3" class="step">${ _('Step 3: Advanced') }</a></li>
-          % endif
-        </ul>
-
-        <div class="steps" >
-          <div id="step1" class="stepDetails">
-            ${layout.render_field(form["username"], extra_attrs={'validate':'true'})}
-            % if "password1" in form.fields:
-              ${layout.render_field(form["password1"], extra_attrs=username is None and {'validate':'true'} or {})}
-              ${layout.render_field(form["password2"], extra_attrs=username is None and {'validate':'true'} or {})}
-            % endif
-            ${layout.render_field(form["ensure_home_directory"])}
-          </div>
-
-          <div id="step2" class="stepDetails hide">
-            % if "first_name" in form.fields:
-              ${layout.render_field(form["first_name"])}
-              ${layout.render_field(form["last_name"])}
-            % endif
-
-            ${layout.render_field(form["email"])}
-            % if user.is_superuser:
-              ${layout.render_field(form["groups"])}
-            % endif
-        </div>
+    <br/>
+    <form id="editForm" method="POST" class="form form-horizontal" autocomplete="off">
+    <div id="properties" class="section">
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#step1" class="step">${ _('Step 1: Credentials (required)') }</a></li>
+        <li><a href="#step2" class="step">${ user.is_superuser and _('Step 2: Names and Groups') or _('Step 2: Names') }</a>
+        </li>
         % if user.is_superuser:
+            <li><a href="#step3" class="step">${ _('Step 3: Advanced') }</a></li>
+        % endif
+      </ul>
+
+    <div class="steps">
+      <div id="step1" class="stepDetails">
+        ${layout.render_field(form["username"], extra_attrs={'validate':'true'})}
+        % if "password1" in form.fields:
+        ${layout.render_field(form["password1"], extra_attrs=username is None and {'validate':'true'} or {})}
+        ${layout.render_field(form["password2"], extra_attrs=username is None and {'validate':'true'} or {})}
+        % endif
+        ${layout.render_field(form["ensure_home_directory"])}
+        </div>
+        <div id="step2" class="stepDetails hide">
+        % if "first_name" in form.fields:
+                  ${layout.render_field(form["first_name"])}
+                  ${layout.render_field(form["last_name"])}
+                % endif
+
+                ${layout.render_field(form["email"])}
+                % if user.is_superuser:
+                  ${layout.render_field(form["groups"])}
+                % endif
+        </div>
+      % if user.is_superuser:
         <div id="step3" class="stepDetails hide">
-            ${layout.render_field(form["is_active"])}
-            ${'is_superuser' in form.fields and layout.render_field(form["is_superuser"])}
+        ${layout.render_field(form["is_active"])}
+                ${'is_superuser' in form.fields and layout.render_field(form["is_superuser"])}
         </div>
-        % endif
+      % endif
       </div>
-
-        <div class="form-actions">
-          <a id="backBtn" class="btn disabled">${ _('Back') }</a>
-          <a id="nextBtn" class="btn btn-primary disable-feedback">${ _('Next') }</a>
-
-          % if username:
-            <input type="submit" class="btn btn-primary" value="${_('Update user')}"/>
-          % else:
-            <input type="submit" class="btn btn-primary" value="${_('Add user')}"/>
-          % endif
-        </div>
-  </form>
+      <div class="form-actions">
+        <a id="backBtn" class="btn disabled">${ _('Back') }</a>
+        <a id="nextBtn" class="btn btn-primary disable-feedback">${ _('Next') }</a>
+
+      % if username:
+        <input type="submit" class="btn btn-primary" value="${_('Update user')}"/>
+      % else:
+        <input type="submit" class="btn btn-primary" value="${_('Add user')}"/>
+      % endif
+      </div>
+    </form>
+  </div>
 </div>
 
-<style type="text/css">
-  .steps {
-    padding-top: 20px;
-    margin-bottom: 100px;
-  }
-
-  input[type=submit] {
-    margin-left: 50px;
-  }
-
-  .form-actions {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-  }
-</style>
-
 <script src="/static/ext/js/routie-0.3.0.min.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">
@@ -188,7 +170,16 @@ $(document).ready(function(){
     $(this).parents(".control-group").removeClass("error");
     $(this).parent().find(".help-inline").remove();
   });
+
+  $("#editForm").on("submit", function(){
+    if (validateStep("step1") && validateStep("step2")) {
+      return true;
+    }
+    return false;
+  })
 });
 </script>
 
+${layout.commons()}
+
 ${ commonfooter(messages) | n,unicode }

+ 22 - 38
apps/useradmin/src/useradmin/templates/layout.mako

@@ -57,44 +57,28 @@ def is_selected(section, matcher):
 </%def>
 
 <%def name="commons()">
-    <style type="text/css">
-        .fixed {
-            position: fixed;
-            top: 80px;
-            filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
-            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-        }
-        .pull-right {
-            margin: 4px;
-        }
-        .sortable {
-            cursor: pointer;
-        }
-        .file-row {
-            height:37px;
-        }
-    </style>
-    <script type="text/javascript">
-        $(document).ready(function(){
-            $("#filterInput").keyup(function(){
-                var shown = 0;
-                $(".datatables tfoot").hide();
-                $.each($(".tableRow"), function(index, value) {
-                    if($(value).data("search").toLowerCase().indexOf($("#filterInput").val().toLowerCase()) == -1 && $("#filterInput").val() != ""){
-                        $(value).hide();
-                    }
-                    else{
-                        $(value).show();
-                        shown++;
-                    }
-                });
-                if (shown == 0){
-                    $(".datatables tfoot").show();
-                }
-            });
+
+  <link href="/useradmin/static/css/useradmin.css" rel="stylesheet">
+
+  <script type="text/javascript">
+    $(document).ready(function () {
+      $("#filterInput").keyup(function () {
+        var shown = 0;
+        $(".datatables tfoot").hide();
+        $.each($(".tableRow"), function (index, value) {
+          if ($(value).data("search").toLowerCase().indexOf($("#filterInput").val().toLowerCase()) == -1 && $("#filterInput").val() != "") {
+            $(value).hide();
+          }
+          else {
+            $(value).show();
+            shown++;
+          }
         });
-    </script>
+        if (shown == 0) {
+          $(".datatables tfoot").show();
+        }
+      });
+    });
+  </script>
 </%def>
 

+ 74 - 0
apps/useradmin/static/css/useradmin.css

@@ -0,0 +1,74 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.fixed {
+  position: fixed;
+  top: 80px;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+}
+
+.pull-right {
+  margin: 4px;
+}
+
+.sortable {
+  cursor: pointer;
+}
+
+.file-row {
+  height: 37px;
+}
+
+.steps {
+  padding-top: 20px;
+  margin-bottom: 100px;
+  border: 1px solid #DDDDDD;
+  border-top: transparent;
+}
+
+.section {
+  margin: 20px;
+}
+
+input[type=submit] {
+  margin-left: 50px;
+}
+
+.form-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+}
+
+.nav {
+  margin-bottom: 0;
+  margin-top: 20px;
+}
+
+.nav-tabs .active {
+  font-weight: bold;
+}
+
+.form-actions {
+  padding-left: 20px !important;
+}

+ 24 - 20
desktop/core/src/desktop/templates/home.mako

@@ -35,20 +35,22 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
 
 <div class="container-fluid">
   <div class="row-fluid">
-  <div class="span12">
-    <h1>${_('Welcome Home.')}</h1>
-    <p>
-      ${ _('Hue is a Web UI for Apache Hadoop. Select an application below.') }
-    </p>
+    <div class="span12">
+      <h1>${_('Welcome Home.')}</h1>
+
+      <p>
+        ${ _('Hue is a Web UI for Apache Hadoop. Select an application below.') }
+      </p>
+    </div>
   </div>
-</div>
   <div class="row-fluid" style="margin-top: 30px">
 
     <div class="span4">
-      <div class="card">
-         <h2 class="card-heading simple">${_('Query')}</h2>
-      <div class="card-body">
-        <p>
+      <div class="card card-home">
+        <h2 class="card-heading simple">${_('Query')}</h2>
+
+        <div class="card-body">
+          <p>
           <ul>
             ${ app_link("beeswax", "Hive") }
             ${ app_link("impala", "Impala") }
@@ -57,16 +59,17 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
             ${ app_link("hbase", _('HBase')) }
             ${ app_link("shell", _('Shell')) }
           </ul>
-        </p>
+          </p>
+        </div>
       </div>
-       </div>
-     </div>
+    </div>
 
     <div class="span4">
-      <div class="card">
+      <div class="card card-home">
         <h2 class="card-heading simple">${_('Hadoop')}</h2>
+
         <div class="card-body">
-        <p>
+          <p>
           <ul>
             ${ app_link("filebrowser", _('Files')) }
             ${ app_link("jobbrowser", _('Jobs')) }
@@ -74,24 +77,25 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
             ${ app_link("sqoop", _('Sqoop 2')) }
             ${ app_link("jobsub", _('Designs')) }
           </ul>
-        </p>
+          </p>
+        </div>
       </div>
     </div>
-      </div>
 
     <div class="span4">
-      <div class="card">
+      <div class="card card-home">
         <h2 class="card-heading simple">${_('Workflow')}</h2>
+
         <div class="card-body">
-        <p>
+          <p>
           <ul>
             ${ app_link("oozie", _('Dashboard')) }
             ${ app_link("oozie", _('Editor'), "list_workflows/") }
           </ul>
         </div>
       </div>
-     </div>
     </div>
+  </div>
 </div>
 
 <script type="text/javascript" charset="utf-8">

+ 36 - 1
desktop/core/static/css/hue3.css

@@ -1227,4 +1227,39 @@ a#advanced-btn:hover {
 .brand {
   padding: 10px 20px!important;
   margin-top: 4px!important;
-}
+}
+
+.card-home {
+  padding-top: 4px;
+}
+
+.card-home ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.card-home ul li {
+  margin: 0;
+  padding: 0;
+}
+
+.card-home a {
+  padding: 5px 15px;
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.card-home a i {
+  color: #999999;
+}
+
+.card-home a:hover {
+  background-color: #EEEEEE;
+  text-decoration: none;
+}
+
+.card-home a:hover i {
+  color: #333333;
+}