From d2cab625322882afc73d1ba5829f551fdb058493 Mon Sep 17 00:00:00 2001
From: Kejia-Wang <wangkejia.fd@gmail.com>
Date: Wed, 3 Dec 2014 12:46:37 +0800
Subject: [PATCH 1/2] Job status multiple checkbox

---
 webapp/app/js/controllers/job.js        | 32 ++++++++++----
 webapp/app/partials/jobs/job_steps.html |  6 +--
 webapp/app/partials/jobs/jobs.html      | 77 +++++++++++++++++++--------------
 3 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/webapp/app/js/controllers/job.js b/webapp/app/js/controllers/job.js
index 68b1f37..7c768dc 100644
--- a/webapp/app/js/controllers/job.js
+++ b/webapp/app/js/controllers/job.js
@@ -6,13 +6,13 @@ KylinApp
         $scope.jobs = {};
         $scope.projects = [];
         $scope.action = {};
-        $scope.allStatus = [
-            {name: 'new', value: 0},
-            {name: 'pending', value: 1},
-            {name: 'running', value: 2},
-            {name: 'finished', value: 4},
-            {name: 'error', value: 8},
-            {name: 'discarded', value: 16}
+        $scope.allStatus = [  //[$scope.allStatus[0], $scope.allStatus[1], $scope.allStatus[2], $scope.allStatus[3], $scope.allStatus[4], $scope.allStatus[5]]
+            {name: 'NEW', value: 0},
+            {name: 'PENDING', value: 1},
+            {name: 'RUNNING', value: 2},
+            {name: 'FINISHED', value: 4},
+            {name: 'ERROR', value: 8},
+            {name: 'DISCARDED', value: 16}
         ];
         $scope.theaditems = [
             {attr: 'name', name: 'Job Name'},
@@ -21,7 +21,23 @@ KylinApp
             {attr: 'last_modified', name: 'Last Modified Time'},
             {attr: 'duration', name: 'Duration'}
         ];
-        $scope.status = [$scope.allStatus[0], $scope.allStatus[1], $scope.allStatus[2], $scope.allStatus[3], $scope.allStatus[4], $scope.allStatus[5]];
+        $scope.status = [];
+        $scope.isAll = null;
+        $scope.toggleSelection = function toggleSelection(current) {
+            if(current == 'ALL'){
+              $scope.status = $scope.isAll ? [] : $scope.allStatus.slice(0);
+            }else{
+                var idx = $scope.status.indexOf(current);
+                if (idx > -1) {
+                  $scope.status.splice(idx, 1);
+                }else {
+                  $scope.status.push(current);
+                }
+            }
+            $scope.jobs={};
+            $scope.reload();
+        };
+
         // projectName from page ctrl
         $scope.state = {loading: false, refreshing: false, filterAttr: 'last_modified', filterReverse: true, reverseColumn: 'last_modified', projectName:$scope.project.selectedProject};
 
diff --git a/webapp/app/partials/jobs/job_steps.html b/webapp/app/partials/jobs/job_steps.html
index 3d1b521..bd7320d 100644
--- a/webapp/app/partials/jobs/job_steps.html
+++ b/webapp/app/partials/jobs/job_steps.html
@@ -29,10 +29,10 @@
                                     <span class="label"
                                             ng-class="{
                                             'label-default' : state.selectedJob.job_status=='PENDING',
-                                            'label-warning' : state.selectedJob.job_status=='RUNNING',
+                                            'label bg-aqua' : state.selectedJob.job_status=='RUNNING',
                                             'label-success' : state.selectedJob.job_status=='FINISHED',
                                             'label-danger' : state.selectedJob.job_status=='ERROR',
-                                            'label-inverse' : state.selectedJob.job_status=='DISCARDED'}"
+                                            'label bg-navy' : state.selectedJob.job_status=='DISCARDED'}"
                                     >{{state.selectedJob.job_status}}</span>
                                 </td>
                             </tr>
@@ -70,7 +70,7 @@
                         {{step.info.mr_job_id ? ('MR Job: <br>' + step.info.mr_job_id + '<br>') :''}}</div>"
                     ng-class="{
                         'fa fa-ellipsis-h bg-gray' : step.step_status=='PENDING',
-                        'fa fa-spinner fa-spin btn-yellow' : step.step_status=='WAITING' || step.step_status=='RUNNING',
+                        'fa fa-spinner fa-spin bg-aqua' : step.step_status=='WAITING' || step.step_status=='RUNNING',
                         'fa fa-check bg-green' : step.step_status=='FINISHED',
                         'fa fa-warning bg-red' : step.step_status=='ERROR',
                         'fa fa-ban bg-navy' : step.step_status=='DISCARDED'
diff --git a/webapp/app/partials/jobs/jobs.html b/webapp/app/partials/jobs/jobs.html
index faf02e0..95dd57d 100644
--- a/webapp/app/partials/jobs/jobs.html
+++ b/webapp/app/partials/jobs/jobs.html
@@ -1,43 +1,56 @@
-<div class="page-header">
-    <!--Project-->
-    <form class="navbar-form navbar-left" style="margin-top: 0px !important;" ng-if="userService.isAuthorized()">
-        <div class="form-group">
-            <span><b>Project: </b></span>
-            <select chosen ng-model="project.selectedProject" ng-init="newAccess.permission=permissions.READ.value;project.selectedProject=project.selectedProject!=null?project.selectedProject:project.projects[0]"
-                    ng-options="project as project for project in project.projects"
-                    style="width: 150px"
-                    data-placeholder="select a project"
-                    class="chosen-select">
-            </select>
-            <!--Project-->
-            <a class="btn btn-xs btn-info" href="/projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
-            <a class="btn btn-xs btn-primary" style="width: 29px"  ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
-                <i class="fa fa-plus"></i>
-            </a>
-        </div>
-    </form>
-    <!--Cube Name-->
-    <span style="padding-left: 40px" >
+<div class="page-header row">
+    <!--Project: -->
+    <div class="col-xs-3">
+        <form ng-if="userService.isAuthorized()">
+            <div class="form-group">
+                <span><b>Project: </b></span>
+                <select chosen ng-model="project.selectedProject" ng-init="newAccess.permission=permissions.READ.value;project.selectedProject=project.selectedProject!=null?project.selectedProject:project.projects[0]"
+                        ng-options="project as project for project in project.projects"
+                        style="width: 150px"
+                        data-placeholder="select a project"
+                        class="chosen-select">
+                </select>
+                <!--Project-->
+                <a class="btn btn-xs btn-info" href="/projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
+                <a class="btn btn-xs btn-primary" style="width: 29px"  ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
+                    <i class="fa fa-plus"></i>
+                </a>
+            </div>
+        </form>
+    </div>
+    <!--Cube Name: -->
+    <div class="col-xs-3">
         <form ng-submit="jobs={};reload()" style="display: inline" >
             <span class="input-icon input-icon-right nav-search"><b>Cube Name:</b>
                 <input type="text" placeholder="Filter ..." class="nav-search-input" ng-model="cubeName" />
                 <i class="ace-icon fa fa-search blue" ng-click="jobs={};reload()"></i>
             </span>
         </form>
-    </span>
-    <div class="pull-right">
-        <!--Job Status-->
-        <span>
-            Job Status:
-            <select chosen multiple style="min-width: 500px"
-                    ng-model="status" ng-change="jobs={};reload();"
-                    ng-options="s as s.name for s in allStatus">
-                <option value="">ALL</option>
-            </select>
-        </span>
+  </div>
+  <!--Job Status: -->
+    <span >
+        <span><b>Job Status: </b></span>
+          <!--ALL-->
+          <label class="checkbox-inline">
+            <input
+              type="checkbox"
+              ng-model="isAll"
+              ng-click="toggleSelection('ALL');"
+              >ALL
+          </label>
+          <!--STATUS-->
+          <label ng-repeat="s in allStatus" class="checkbox-inline disabled" >
+            <input  ng-disabled="isAll"
+              type="checkbox"
+              name="selectedStatus[]"
+              value="{{s.name}}"
+              ng-checked="status.indexOf(s) > -1"
+              ng-click="toggleSelection(s);"
+            >{{s.name}}
+          </label>
         <!--Refresh Jobs-->
         <button class="btn btn-success btn-xs" ng-click="jobs={};reload();"><i class="fa fa-refresh"></i></button>
-    </div>
+    </span>
 </div>
 
 <!--Jobs Table-->

From 6da8d4d18b7ce65a28660bc2dae2c5e74ee420b8 Mon Sep 17 00:00:00 2001
From: Kejia-Wang <wangkejia.fd@gmail.com>
Date: Wed, 3 Dec 2014 16:28:14 +0800
Subject: [PATCH 2/2] Move job status filter to jobs table header

---
 webapp/app/js/controllers/job.js     | 19 ++++-------
 webapp/app/partials/cubes/cubes.html | 40 ++++++++++++-----------
 webapp/app/partials/jobs/jobs.html   | 63 ++++++++++++++++--------------------
 3 files changed, 55 insertions(+), 67 deletions(-)

diff --git a/webapp/app/js/controllers/job.js b/webapp/app/js/controllers/job.js
index 7c768dc..e72e33f 100644
--- a/webapp/app/js/controllers/job.js
+++ b/webapp/app/js/controllers/job.js
@@ -6,7 +6,7 @@ KylinApp
         $scope.jobs = {};
         $scope.projects = [];
         $scope.action = {};
-        $scope.allStatus = [  //[$scope.allStatus[0], $scope.allStatus[1], $scope.allStatus[2], $scope.allStatus[3], $scope.allStatus[4], $scope.allStatus[5]]
+        $scope.allStatus = [
             {name: 'NEW', value: 0},
             {name: 'PENDING', value: 1},
             {name: 'RUNNING', value: 2},
@@ -22,20 +22,13 @@ KylinApp
             {attr: 'duration', name: 'Duration'}
         ];
         $scope.status = [];
-        $scope.isAll = null;
         $scope.toggleSelection = function toggleSelection(current) {
-            if(current == 'ALL'){
-              $scope.status = $scope.isAll ? [] : $scope.allStatus.slice(0);
-            }else{
-                var idx = $scope.status.indexOf(current);
-                if (idx > -1) {
-                  $scope.status.splice(idx, 1);
-                }else {
-                  $scope.status.push(current);
-                }
+            var idx = $scope.status.indexOf(current);
+            if (idx > -1) {
+              $scope.status.splice(idx, 1);
+            }else {
+              $scope.status.push(current);
             }
-            $scope.jobs={};
-            $scope.reload();
         };
 
         // projectName from page ctrl
diff --git a/webapp/app/partials/cubes/cubes.html b/webapp/app/partials/cubes/cubes.html
index aff17d5..1e973e1 100644
--- a/webapp/app/partials/cubes/cubes.html
+++ b/webapp/app/partials/cubes/cubes.html
@@ -1,30 +1,32 @@
-<div class="page-header">
+<div class="page-header row">
     <!--Project-->
-    <form class="navbar-form navbar-left" style="margin-top: 0px !important;" ng-if="userService.isAuthorized()">
-        <div class="form-group">
-            <span><b>Project: </b></span>
-            <select chosen ng-model="project.selectedProject" ng-init="newAccess.permission=permissions.READ.value;project.selectedProject=project.selectedProject!=null?project.selectedProject:project.projects[0]"
-                    ng-options="project as project for project in project.projects"
-                    style="width: 150px"
-                    data-placeholder="select a project"
-                    class="chosen-select">
-            </select>
-            <!--Project-->
-            <a class="btn btn-xs btn-info" href="/projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
-            <a class="btn btn-xs btn-primary" style="width: 29px" ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
-                <i class="fa fa-plus"></i>
-            </a>
-        </div>
-    </form>
+    <div class="col-xs-3">
+        <form ng-if="userService.isAuthorized()">
+            <div class="form-group">
+                <span><b>Project: </b></span>
+                <select chosen ng-model="project.selectedProject" ng-init="newAccess.permission=permissions.READ.value;project.selectedProject=project.selectedProject!=null?project.selectedProject:project.projects[0]"
+                        ng-options="project as project for project in project.projects"
+                        style="width: 150px"
+                        data-placeholder="select a project"
+                        class="chosen-select">
+                </select>
+                <!--Project-->
+                <a class="btn btn-xs btn-info" href="/projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
+                <a class="btn btn-xs btn-primary" style="width: 29px" ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
+                    <i class="fa fa-plus"></i>
+                </a>
+            </div>
+        </form>
+    </div>
     <!--Cube Name-->
-    <span style="padding-left: 40px" >
+    <div class="col-xs-3">
         <form ng-submit="cubes=[];list()" style="display: inline" >
             <span class="input-icon input-icon-right nav-search"><b>Cube Name:</b>
                 <input type="text" placeholder="Filter ..." class="nav-search-input" ng-model="listParams.cubeName" />
                 <i class="ace-icon fa fa-search blue" ng-click="cubes=[];list()"></i>
             </span>
         </form>
-    </span>
+    </div>
     <div class="pull-right">
         <a class="btn btn-primary btn-sm" href="/cubes/add/json" ng-if="userService.hasRole('ROLE_ADMIN')"><i class="fa fa-pencil-square-o"></i> Json Editor</a>
         <a class="btn btn-primary btn-sm" href="/cubes/add"  ng-if="userService.hasRole('ROLE_MODELER')" id="addCubeButton"><i class="fa fa-plus"></i> Cube</a>
diff --git a/webapp/app/partials/jobs/jobs.html b/webapp/app/partials/jobs/jobs.html
index 95dd57d..d3b6416 100644
--- a/webapp/app/partials/jobs/jobs.html
+++ b/webapp/app/partials/jobs/jobs.html
@@ -12,7 +12,7 @@
                 </select>
                 <!--Project-->
                 <a class="btn btn-xs btn-info" href="/projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
-                <a class="btn btn-xs btn-primary" style="width: 29px"  ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
+                <a class="btn btn-xs btn-primary" style="width: 29px" ng-if="userService.hasRole('ROLE_MODELER')"  tooltip="Add Project" ng-click="toCreateProj()">
                     <i class="fa fa-plus"></i>
                 </a>
             </div>
@@ -26,47 +26,40 @@
                 <i class="ace-icon fa fa-search blue" ng-click="jobs={};reload()"></i>
             </span>
         </form>
-  </div>
-  <!--Job Status: -->
-    <span >
-        <span><b>Job Status: </b></span>
-          <!--ALL-->
-          <label class="checkbox-inline">
-            <input
-              type="checkbox"
-              ng-model="isAll"
-              ng-click="toggleSelection('ALL');"
-              >ALL
-          </label>
-          <!--STATUS-->
-          <label ng-repeat="s in allStatus" class="checkbox-inline disabled" >
-            <input  ng-disabled="isAll"
-              type="checkbox"
-              name="selectedStatus[]"
-              value="{{s.name}}"
-              ng-checked="status.indexOf(s) > -1"
-              ng-click="toggleSelection(s);"
-            >{{s.name}}
-          </label>
-        <!--Refresh Jobs-->
-        <button class="btn btn-success btn-xs" ng-click="jobs={};reload();"><i class="fa fa-refresh"></i></button>
-    </span>
+    </div>
 </div>
 
 <!--Jobs Table-->
 <div class="row">
     <div ng-class="{'col-xs-8': state.showSteps, 'col-xs-12': !state.showSteps}" ng-animate="{enter: 'animated fadeInLeft'}">
-        <div ng-if="!state.loading && getLength(jobs)==0">
-            <div no-result text="No Job."></div>
-        </div>
-        <div ng-if="state.loading">
-            <loading text="Loading Jobs ..."></loading>
-        </div>
-        <div ng-if="getLength(jobs)>0" class="dataTables_wrapper form-inline no-footer" >
+        <div  class="dataTables_wrapper form-inline no-footer" >
+            <!--Jobs Table Header-->
             <div class="row">
-                <div class="col-xs-12"><label class="table-header-text">Jobs</label></div>
+                <div class="col-xs-2"><label class="table-header-text">Jobs</label></div>
+                <div class="col-xs-10">
+                    <!--STATUS-->
+                    <div class="pull-right">
+                      <label ng-repeat="s in allStatus" class="checkbox-inline" >
+                        <input  type="checkbox"
+                                value="{{s.name}}"
+                                ng-checked="status.indexOf(s) > -1"
+                                ng-click="toggleSelection(s);" />{{s.name}}
+                      </label>
+                      <!--Refresh Jobs-->
+                      <button class="btn btn-success btn-xs" style="margin-left: 10px" ng-click="jobs={};reload();"><i class="fa fa-refresh"></i></button>
+                    </div>
+                </div>
+            </div>
+            <!--No Job-->
+            <div ng-if="!state.loading && getLength(jobs)==0">
+              <div no-result text="No Job."></div>
+            </div>
+            <!--Loading Jobs-->
+            <div ng-if="state.loading">
+              <loading text="Loading Jobs ..."></loading>
             </div>
-            <table class="table table-striped table-bordered table-hover dataTable no-footer">
+            <!--Jobs Table Content-->
+            <table ng-if="getLength(jobs)>0" class="table table-striped table-bordered table-hover dataTable no-footer">
                 <thead>
                     <tr style="cursor: pointer">
                         <th ng-repeat="theaditem in theaditems"