Explorar el Código

HUE-6325 [jb] Styled schedule page filter

Enrico Berti hace 8 años
padre
commit
64c9b86c34

+ 1 - 1
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css

@@ -14,4 +14,4 @@ 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.
- */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}.jobbrowser-components #jobsTable tr{border-left:3px solid #DCDCDC}
+ */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}

+ 0 - 6
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -53,10 +53,4 @@
   .app-icon {
     vertical-align: text-top;
   }
-
-  #jobsTable {
-    tr {
-      border-left: 3px solid @cui-gray-300;
-    }
-  }
 }

+ 36 - 33
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -156,7 +156,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
               <!-- ko hueSpinner: { spin: jobs.loadingJobs(), center: true, size: 'xlarge' } --><!-- /ko -->
               <!-- ko ifnot: jobs.loadingJobs() -->
                 <!-- ko if: $root.isMini -->
-                <ul class="unstyled" id="jobsTable" data-bind="foreach: jobs.apps">
+                <ul class="unstyled status-border-container" id="jobsTable" data-bind="foreach: jobs.apps">
                   <li class="status-border pointer" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, click: fetchJob">
                     <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span><span data-bind="text: status"></span></td>
                     <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
@@ -172,7 +172,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 </ul>
                 <!-- /ko -->
                 <!-- ko ifnot: $root.isMini -->
-                <table id="jobsTable" class="datatables table table-condensed">
+                <table id="jobsTable" class="datatables table table-condensed status-border-container">
                   <thead>
                   <tr>
                     <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.apps, selectedValues: jobs.selectedJobs }"></div></th>
@@ -471,22 +471,24 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         </div>
 
         <div class="tab-pane" id="job-mapreduce-page-tasks">
-          ${_('Filter')}
-          <input data-bind="textFilter: textFilter, clearable: {value: textFilter}" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
-
-          <span data-bind="foreach: statesValuesFilter">
-            <label class="checkbox">
-              <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
-              <span data-bind="text: name, attr: {for: name}"></span>
-            </label>
-          </span>
-
-          <span data-bind="foreach: typesValuesFilter">
-            <label class="checkbox">
-              <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
-              <span data-bind="text: name, attr: {for: name}"></span>
-            </label>
-          </span>
+          <form class="form-inline">
+            ${_('Filter')}
+            <input data-bind="textFilter: textFilter, clearable: {value: textFilter}" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
+
+            <span data-bind="foreach: jobs.statesValuesFilter">
+              <label class="checkbox">
+                <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
+                <div class="inline-block" data-bind="text: name, toggle: checked"></div>
+              </label>
+            </span>
+
+            <span data-bind="foreach: typesValuesFilter">
+              <label class="checkbox">
+                <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
+                <span data-bind="text: name, attr: {for: name}"></span>
+              </label>
+            </span>
+          </form>
 
           <table class="table table-condensed">
             <thead>
@@ -1048,19 +1050,20 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="tab-content">
         <div class="tab-pane active" id="schedule-page-calendar">
           <!-- ko with: coordinatorActions() -->
-          <div data-bind="template: { name: 'job-actions' }"></div>
-
-          ${_('Filter')}
-          <input data-bind="value: textFilter" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
-
-          <span data-bind="foreach: statesValuesFilter">
-            <label class="checkbox">
-              <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
-              <span data-bind="text: name, attr: {for: name}"></span>
-            </label>
-          </span>
-
-          <table id="schedulesTable" class="datatables table table-condensed">
+          <form class="form-inline">
+            ${_('Filter')}
+            <input data-bind="value: textFilter" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
+
+            <span data-bind="foreach: statesValuesFilter">
+              <label class="checkbox">
+                <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
+                <div class="inline-block" data-bind="text: name, toggle: checked"></div>
+              </label>
+            </span>
+            <div data-bind="template: { name: 'job-actions' }" class="pull-right"></div>
+          </form>
+
+          <table id="schedulesTable" class="datatables table table-condensed status-border-container">
             <thead>
             <tr>
               <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
@@ -1077,7 +1080,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
             </tr>
             </thead>
             <tbody data-bind="foreach: apps">
-              <tr data-bind="click: function() {  if (properties.externalId()) { $root.job().id(properties.externalId()); $root.job().fetchJob();} }">
+              <tr class="status-border pointer" data-bind="css: {'completed': properties.status() == 'SUCCEEDED', 'running': properties.status() !== 'SUCCEEDED' && properties.status() !== 'FAILED', 'failed': properties.status() == 'FAILED'}, click: function() {  if (properties.externalId()) { $root.job().id(properties.externalId()); $root.job().fetchJob();} }">
                 <td>
                   <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#schedulesTable', value: $data, hueChecked: $parent.selectedJobs"></div>
                 </td>
@@ -1964,7 +1967,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         window.clearInterval(updateJobsInterval);
         if (self.interface() && self.interface() !== 'slas' && self.interface() !== 'oozie-info'){
           if (val) {
-            updateJobInterval = setInterval(val.updateJob, 5000, 'jobbrowser');
+            updateJobInterval = setInterval(val.updateJob, 50000, 'jobbrowser');
           }
           else {
             updateJobsInterval = setInterval(self.jobs.updateJobs, 20000, 'jobbrowser');

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 6 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -302,6 +302,12 @@ input[type='password']::-ms-reveal {
   }
 }
 
+.status-border-container {
+  tr {
+    border-left: 3px solid @cui-gray-300;
+  }
+}
+
 .status-border {
   &.completed {
     border-color: @cui-green!important;

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio