浏览代码

HUE-6325 [jb] Styled schedule page filter

Enrico Berti 8 年之前
父节点
当前提交
64c9b86

+ 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');

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 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;

部分文件因为文件数量过多而无法显示