Преглед на файлове

HUE-1737 [oozie] Bigger view log icon

Graph page remake
Enrico Berti преди 12 години
родител
ревизия
f2b78e15d9

+ 22 - 0
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow.mako

@@ -358,6 +358,28 @@ ${ layout.menubar(section='workflows', dashboard=True) }
   ko.applyBindings(viewModel);
 
   $(document).ready(function() {
+    var CURRENT_ZOOM = 1;
+    $(document).keydown(function(e) {
+      if (e.ctrlKey){
+        if (e.which == 173 || e.which == 189) {
+          CURRENT_ZOOM -= 0.1;
+          zoom();
+        }
+        if (e.which == 61 || e.which == 187) {
+          CURRENT_ZOOM += 0.1;
+          zoom();
+        }
+        if (e.which == 48) {
+          CURRENT_ZOOM = 1;
+          zoom();
+        }
+      }
+    });
+
+    function zoom(){
+      $("#graph").css("zoom", CURRENT_ZOOM);
+      $("#graph").css("-moz-transform", "scale("+CURRENT_ZOOM+")");
+    }
 
     $("*[rel=tooltip]").tooltip();
 

+ 70 - 45
apps/oozie/src/oozie/templates/editor/gen/workflow-graph-status.xml.mako

@@ -22,69 +22,94 @@
   from django.utils.translation import ugettext as _
 %>
 
+<%def name="get_tab(form, action, control, css_box_class)">
+  <ul style="margin-bottom:0" class="nav nav-tabs">
+    <li class="active"><a style="line-height:10px
+    % if not action:
+          ;background-color: #F9F9F9;
+    % endif
+    " data-toggle="tab"><i class="fa ${css_box_class}" style="color:#DDD"></i> &nbsp; <strong style="color:#999">
+      % if action and action.externalId:
+        ${ form.instance.node_type }
+      % else:
+        ${ form.instance.__unicode__() }
+      % endif
+    </strong> &nbsp;&nbsp;
+      % if action and action.externalId:
+        <span class="label ${ utils.get_status(action.status) }">${ action.status }</span>
+      % elif control:
+        <span class="label ${ utils.get_status(control.status) }">${ control.status }</span>
+      % endif
+    </a>
+    </li>
+  </ul>
+</%def>
+
+<%def name="get_content(form, action, control, inverse=False)">
+  <div class="row-fluid">
+    % if action and action.externalId:
+      <div style="text-align:left; padding:10px;border:1px solid #DDD; border-top:0" class="span12">
+          <div style="font-size: 30px; margin-top:14px" class="pull-right"><a href="${ url('jobbrowser.views.job_single_logs', job=action.externalId) }" title="${ _('View the logs') }" rel="tooltip" data-row-selector-exclude="true"><i class="fa fa-tasks"></i></a></div>
+          <h4><a href="${ action.get_absolute_url() }" title="${ _('View workflow action') }" rel="tooltip">${ form.instance.__unicode__() }</a></h4>
+          <span class="muted">${ form.instance.description }&nbsp;</span>
+          % if action:
+            ${ action.errorMessage or '' }
+          % elif control:
+            ${ control.errorMessage or '' }
+          % endif
+      </div>
+    % else:
+      <div style="border:0;" class="span12
+      %if inverse:
+      inverse_gradient
+      %else:
+      gradient
+      %endif
+      ">
+      </div>
+    % endif
+  </div>
+</%def>
+
+
 <%def name="print_status_node(form)">
   <%
+    is_start = form.instance.get_full_node().node_type == 'start'
+    is_end = form.instance.get_full_node().node_type == 'end'
     is_fork = form.instance.get_full_node().node_type == 'fork'
     is_join = form.instance.get_full_node().node_type == 'join'
     is_decision = form.instance.get_full_node().node_type == 'decision'
     is_decision_end = form.instance.get_full_node().node_type == 'decisionend'
     action = actions.get(unicode(form.instance))
     control = controls.get(unicode(form.instance))
-    box_class = ""
+    css_box_class = ""
+    if is_start:
+      css_box_class = "fa-thumbs-up"
+    if is_end:
+      css_box_class = "fa-dot-circle-o"
     if is_fork:
-      box_class = "node-fork"
+      css_box_class = "fa-sitemap"
     if is_join:
-      box_class = "node-join"
+      css_box_class = "fa-sitemap fa-rotate-180"
     if is_decision:
-      box_class = "node-decision"
+      css_box_class = "fa-magic"
     if is_decision_end:
-      box_class = "node-decision-end"
+      css_box_class = "fa-magic"
     if action:
-      box_class = "node-action"
+      css_box_class = "fa-cogs"
   %>
 
   % if form.instance.get_full_node().is_visible():
-      <div class="span12 action ${ box_class }">
-        <div class="row-fluid">
-          <div class="span12">
-            <h4>${ form.instance.__unicode__() }</h4>
-            <span class="muted">${ form.instance.node_type }</span>
-            <div class="node-description">${ form.instance.description }</div>
-            % if action:
-              ${ action.errorMessage or '' }
-            % elif control:
-              ${ control.errorMessage or '' }
-            % endif
-          </div>
-        </div>
-        % if action and action.externalId:
-        <div class="row-fluid node-action-bar">
-          <div class="span2" style="text-align:left;padding-left: 6px">
-            % if action:
-              <span class="label ${ utils.get_status(action.status) }">${ action.status }</span>
-            % endif
-          </div>
-          <div class="span10" style="text-align:right">
-            % if action:
-              <a href="${ action.get_absolute_url() }" class="btn btn-mini" title="${ _('View workflow action') }" rel="tooltip"><i class="fa fa-eye"></i></a>
-            % endif
-            <a href="${ url('jobbrowser.views.job_single_logs', job=action.externalId) }" class="btn btn-mini" title="${ _('View the logs') }" rel="tooltip" data-row-selector-exclude="true" id="advanced-btn"><i class="fa fa-tasks"></i></a>
-            &nbsp;
+      <div class="span12 action" style="margin-top:0">
+        % if is_end or is_join:
+          ${get_content(form, action, control, True)}
+          <div class="tabbable tabs-below">
+          ${get_tab(form, action, control, css_box_class)}
           </div>
-        </div>
-        % elif control:
-        <div class="row-fluid node-action-bar">
-          <div class="span2" style="text-align:left;padding-left: 6px">
-            % if control:
-              <span class="label ${ utils.get_status(control.status) }">${ control.status }</span>
-            % endif
-          </div>
-          <div class="span10" style="text-align:right">
-            &nbsp;
-          </div>
-        </div>
+        % else:
+          ${get_tab(form, action, control, css_box_class)}
+          ${get_content(form, action, control)}
         % endif
-
       </div>
   % endif
 

+ 38 - 1
apps/oozie/static/css/workflow.css

@@ -42,7 +42,7 @@ ul {
 }
 
 .action {
-  border: 1px solid #DDD;
+  border: 0!important;
   padding: 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -172,3 +172,40 @@ ul {
 #importAction .action-row, #importOozieAction .action-row {
   cursor: pointer;
 }
+
+#graph .nav-tabs > li, .nav-pills > li {
+    float:none;
+    display:inline-block;
+    *display:inline; /* ie7 fix */
+     zoom:1; /* hasLayout ie7 trigger */
+}
+
+#graph .nav-tabs, .nav-pills {
+    text-align:center;
+}
+
+.gradient {
+  background: #f9f9f9; /* Old browsers */
+  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+  background: -moz-linear-gradient(top,  #f9f9f9 0%, #ffffff 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #f9f9f9 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #f9f9f9 0%,#ffffff 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #f9f9f9 0%,#ffffff 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #f9f9f9 0%,#ffffff 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
+}
+
+.inverse_gradient {
+  background: #ffffff; /* Old browsers */
+  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+  background: -moz-linear-gradient(top,  #ffffff 0%, #f9f9f9 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #ffffff 0%,#f9f9f9 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-8 */
+}