Эх сурвалжийг харах

HUE-6325 [jb] Styled schedule page filter

Enrico Berti 8 жил өмнө
parent
commit
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;

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно