Explorar o código

HUE-979 [oozie] Redesign workflow graph look

Updated UI to be uniform with the editor
Extracted style to stylesheet
Enrico Berti %!s(int64=13) %!d(string=hai) anos
pai
achega
763f4b9

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

@@ -297,6 +297,8 @@ ${ layout.menubar(section='dashboard') }
   </div>
 </div>
 
+<link rel="stylesheet" href="/oozie/static/css/workflow.css">
+
 <script src="/static/ext/js/datatables-paging-0.1.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/codemirror-3.0.js"></script>
 <link rel="stylesheet" href="/static/ext/css/codemirror.css">
@@ -305,6 +307,8 @@ ${ layout.menubar(section='dashboard') }
 <script type="text/javascript">
   $(document).ready(function() {
 
+    $("*[rel=tooltip]").tooltip();
+
     var definitionEditor = $("#definitionEditor")[0];
 
     var codeMirror = CodeMirror(function (elt) {

+ 1 - 150
apps/oozie/src/oozie/templates/editor/edit_workflow.mako

@@ -288,156 +288,6 @@ ${ layout.menubar(section='workflows') }
 
 <div id="modal-window" class="modal hide fade"></div>
 
-<style type="text/css">
-#modal-window .modal-content {
-  height: 300px;
-  overflow: auto;
-}
-
-#node-modal {
-  width: auto;
-}
-
-#node-modal .modal-content {
-  background: white;
-  max-height: 500px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 5px;
-}
-
-.action {
-  border: 1px solid #DDD;
-  padding: 0px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.action h4 {
-  margin-bottom: 1px;
-}
-
-.node-action {
-  background: #FFF url(/oozie/static/art/action.png) no-repeat 10px 10px;
-}
-
-.node-fork {
-  background: #FFF url(/oozie/static/art/fork.png) no-repeat 10px 10px;
-}
-
-.node-join {
-  background: #FFF url(/oozie/static/art/join.png) no-repeat 10px 10px;
-}
-
-.node-decision {
-  background: #FFF url(/oozie/static/art/decision.png) no-repeat 10px 10px;
-}
-
-.node-decisionend {
-  background: #FFF url(/oozie/static/art/decision_end.png) no-repeat 10px 10px;
-}
-
-.node-link {
-  border: 1px dashed #DDD;
-  margin: 10px;
-  background: url(/oozie/static/art/droppable.png) no-repeat 50% 50%;
-}
-
-.node-description {
-  padding-top: 10px;
-}
-
-.node-action-bar {
-  background-color: #EEE;
-  padding-top: 5px;
-  margin-top: 10px;
-  -webkit-box-shadow: inset 0px 3px 5px 0px #DDD;
-  box-shadow: inset 0px 3px 5px 0px #DDD;
-}
-
-#graph {
-  text-align: center;
-}
-
-.node-link-hover {
-  background: #D9EDF7;
-}
-
-.node-action-hover {
-  background: #D9EDF7;
-}
-
-.node-fork-hover {
-  background: #EEE;
-}
-
-.popover {
-  z-index: 2060 !important;
-  margin-left: 166px!important;
-}
-
-.ribbon-wrapper {
-  width: 85px;
-  height: 88px;
-  overflow: hidden;
-  position: fixed;
-  top: 74px;
-  right: -3px;
-  right: 20px\9; /* IE8 */
-  width: 125px\9; /* IE8 */
-}
-
-.ribbon {
-  font: bold 15px sans-serif;
-  text-align: center;
-  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-  -webkit-transform: rotate(45deg);
-  -moz-transform:    rotate(45deg);
-  -ms-transform:     rotate(45deg);
-  -o-transform:      rotate(45deg);
-  position: relative;
-  padding: 7px 0;
-  left: -5px;
-  top: 15px;
-  width: 120px;
-  background-color: #da4f49;
-  *background-color: #bd362f;
-  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
-  background-repeat: repeat-x;
-  color: #ffffff;
-  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
-  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
-}
-
-.ribbon:before, .ribbon:after {
-  content: "";
-  border-top:   3px solid #c09853;
-  border-left:  3px solid transparent;
-  border-right: 3px solid transparent;
-  position:absolute;
-  bottom: -3px;
-}
-
-.ribbon:before {
-  left: 0;
-}
-.ribbon:after {
-  right: 0;
-}
-
-.control-group.error .CodeMirror {
-  border: 1px solid #B94A48;
-}
-
-
-</style>
-
 <script src="/static/ext/js/codemirror-3.0.js"></script>
 <link rel="stylesheet" href="/static/ext/css/codemirror.css">
 <script src="/static/ext/js/codemirror-xml.js"></script>
@@ -588,6 +438,7 @@ ${ controls.decision_form(link_form, default_link_form, 'decision', True) }
   <div class="node-link">&nbsp;</div>
 </script>
 
+<link rel="stylesheet" href="/oozie/static/css/workflow.css">
 <script type="text/javascript" src="/oozie/static/js/workflow.js"></script>
 
 <script type="text/javascript">

+ 39 - 27
apps/oozie/src/oozie/templates/editor/gen/workflow-graph-status.xml.mako

@@ -24,43 +24,55 @@
 <%def name="print_status_node(form)">
   <%
     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(form.instance.__unicode__())
+    box_class = ""
+    if is_fork:
+      box_class = "node-fork"
+    if is_join:
+      box_class = "node-join"
+    if is_decision:
+      box_class = "node-decision"
+    if is_decision_end:
+      box_class = "node-decision-end"
+    if action:
+      box_class = "node-action"
   %>
 
   % if form.instance.get_full_node().is_visible():
-    <div class="row-fluid">
-      <div class="span12 action
-        % if not is_fork and action:
-            action-link
-            ${ utils.get_status(action.status) }
-          " data-edit="${ url('oozie:list_oozie_workflow_action', action=action.id) }
-        % endif
-        ">
-        <div class="span10">
-          <div>
-            % if not is_fork:
-              ${ form.instance.__unicode__() }
+
+      <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 '' }
             % endif
           </div>
-          <div class="row-fluid">
-            ${ form.instance.node_type }<br/>
-            % if not is_fork:
-              ${ form.instance.description }<br/>
-              % if action:
-                ${ action.errorMessage or '' }
-              % endif
+        </div>
+        % if action and action.externalId:
+        <div class="row-fluid node-action-bar">
+          <div class="span2" style="text-align:left;padding-left: 6px">
+            % if not is_fork and action:
+              <span class="label ${ utils.get_status(action.status) }">${ action.status }</span>
             % endif
           </div>
+          <div class="span10" style="text-align:right">
+            % if not is_fork and action:
+            <a href="${ url('oozie:list_oozie_workflow_action', action=action.id) }" class="btn btn-mini" title="${ _('View workflow action') }" rel="tooltip"><i class="icon-eye-open"></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="icon-tasks"></i></a>
+            &nbsp;
+          </div>
         </div>
-        <div class="span2">
-          % if action and action.externalId:
-           <a href="${ url('jobbrowser.views.job_single_logs', job=action.externalId) }" data-row-selector-exclude="true" id="advanced-btn">
-              <i class="icon-tasks"></i> ${ _('View the logs') }
-            </a>
-          % endif
-        </div>
+        % endif
+
       </div>
-    </div>
+
   % endif
 
 </%def>

+ 1 - 1
apps/oozie/src/oozie/templates/editor/gen/workflow-graph.xml.mako

@@ -44,7 +44,7 @@
 
 
 <%def name="display_graph(form, print_node)">
-  <div class="row action2" style="min-height:400px">
+  <div class="row action2" style="min-height:400px;margin-left:1px">
     ${ print_graph(nodes, print_node) }
   </div>
 

+ 146 - 0
apps/oozie/static/css/workflow.css

@@ -0,0 +1,146 @@
+#modal-window .modal-content {
+  height: 300px;
+  overflow: auto;
+}
+
+#node-modal {
+  width: auto;
+}
+
+#node-modal .modal-content {
+  background: white;
+  max-height: 500px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 5px;
+}
+
+.action {
+  border: 1px solid #DDD;
+  padding: 0px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.action h4 {
+  margin-bottom: 1px;
+}
+
+.node-action {
+  background: #FFF url(/oozie/static/art/action.png) no-repeat 10px 10px;
+}
+
+.node-fork {
+  background: #FFF url(/oozie/static/art/fork.png) no-repeat 10px 10px;
+}
+
+.node-join {
+  background: #FFF url(/oozie/static/art/join.png) no-repeat 10px 10px;
+}
+
+.node-decision {
+  background: #FFF url(/oozie/static/art/decision.png) no-repeat 10px 10px;
+}
+
+.node-decisionend {
+  background: #FFF url(/oozie/static/art/decision_end.png) no-repeat 10px 10px;
+}
+
+.node-link {
+  border: 1px dashed #DDD;
+  margin: 10px;
+  background: url(/oozie/static/art/droppable.png) no-repeat 50% 50%;
+}
+
+.node-description {
+  padding-top: 10px;
+}
+
+.node-action-bar {
+  background-color: #EEE;
+  padding-top: 5px;
+  margin-top: 10px;
+  -webkit-box-shadow: inset 0px 3px 5px 0px #DDD;
+  box-shadow: inset 0px 3px 5px 0px #DDD;
+}
+
+#graph {
+  text-align: center;
+}
+
+.node-link-hover {
+  background: #D9EDF7;
+}
+
+.node-action-hover {
+  background: #D9EDF7;
+}
+
+.node-fork-hover {
+  background: #EEE;
+}
+
+.popover {
+  z-index: 2060 !important;
+  margin-left: 166px!important;
+}
+
+.ribbon-wrapper {
+  width: 85px;
+  height: 88px;
+  overflow: hidden;
+  position: fixed;
+  top: 74px;
+  right: -3px;
+  right: 20px\9; /* IE8 */
+  width: 125px\9; /* IE8 */
+}
+
+.ribbon {
+  font: bold 15px sans-serif;
+  text-align: center;
+  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+  position: relative;
+  padding: 7px 0;
+  left: -5px;
+  top: 15px;
+  width: 120px;
+  background-color: #da4f49;
+  *background-color: #bd362f;
+  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
+  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
+  background-repeat: repeat-x;
+  color: #ffffff;
+  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
+  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
+}
+
+.ribbon:before, .ribbon:after {
+  content: "";
+  border-top:   3px solid #c09853;
+  border-left:  3px solid transparent;
+  border-right: 3px solid transparent;
+  position:absolute;
+  bottom: -3px;
+}
+
+.ribbon:before {
+  left: 0;
+}
+.ribbon:after {
+  right: 0;
+}
+
+.control-group.error .CodeMirror {
+  border: 1px solid #B94A48;
+}
+