From 947de1f2ae01cdc3666304725d2be436426ea535 Mon Sep 17 00:00:00 2001
From: George Cheng <Gerhut@GMail.com>
Date: Tue, 12 Feb 2019 11:17:54 +0800
Subject: [PATCH] Web portal: add "My jobs" filter button. (#2111)

* Web portal: add "My jobs" filter button.

* reorder buttons in jobs page

* save my-jobs state to cookie, default show all jobs
---
 .../app/job/job-view/job-view.component.js    | 43 ++++++++++++++++++-
 .../user/user-logout/user-logout.component.js |  1 +
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/webportal/src/app/job/job-view/job-view.component.js b/src/webportal/src/app/job/job-view/job-view.component.js
index 63baf7f199..bae45ab7d2 100644
--- a/src/webportal/src/app/job/job-view/job-view.component.js
+++ b/src/webportal/src/app/job/job-view/job-view.component.js
@@ -256,7 +256,7 @@ const loadJobs = (specifiedVc) => {
           return `<a class="table-job-name" href="view.html?username=${namespace || username}&jobName=${name}"><div class="table-job-name">${name}</div></a>`;
         }
       }},
-      {title: 'User', data: 'username', responsivePriority: 2},
+      {title: 'User', name: 'user', data: 'username', responsivePriority: 2},
       {title: 'Virtual Cluster', data: 'virtualCluster', responsivePriority: 3, render(virtualCluster) {
         let vcName = virtualCluster || 'default';
         return '<a href="virtual-clusters.html?vcName=' + vcName + '">' + vcName + '</a>';
@@ -297,6 +297,46 @@ const loadJobs = (specifiedVc) => {
       '<\'row\'<\'col-sm-12\'tr>>' +
       '<\'row\'<\'col-sm-5\'i><\'col-sm-7\'p>>',
     'buttons': [
+      {
+        // Show my jobs
+        text: 'My jobs',
+        enabled: (function() {
+          let token;
+          userAuth.checkToken(function(t) {
+            token = t;
+          }, false);
+          return Boolean(token);
+        }()),
+        init(dt, node) {
+          if (cookies.get('my-jobs')) {
+            if (!cookies.get('user')) {
+              cookies.remove('my-jobs');
+            } else {
+              dt.button(node).active(true);
+              dt.column('user:name').search(cookies.get('user'));
+              setTimeout(function() {
+                dt.draw();
+              }, 0);
+            }
+          }
+        },
+        action(e, dt, node) {
+          const button = dt.button(node);
+          if (button.active()) {
+            cookies.remove('my-jobs');
+            button.active(false);
+            dt.column('user:name').search('');
+          } else {
+            cookies.set('my-jobs', '1');
+            button.active(true);
+            dt.column('user:name').search(cookies.get('user'));
+          }
+          setTimeout(function() {
+            dt.draw();
+          }, 0);
+        },
+      },
+      'pageLength',
       {
         text: 'Select displayed jobs',
         action: function(e, dt) {
@@ -320,7 +360,6 @@ const loadJobs = (specifiedVc) => {
           }
         },
       },
-      'pageLength',
     ],
     'select': {
       style: 'multi',
diff --git a/src/webportal/src/app/user/user-logout/user-logout.component.js b/src/webportal/src/app/user/user-logout/user-logout.component.js
index 1a50c454d1..18d19967ee 100644
--- a/src/webportal/src/app/user/user-logout/user-logout.component.js
+++ b/src/webportal/src/app/user/user-logout/user-logout.component.js
@@ -21,6 +21,7 @@ const userLogout = () => {
   cookies.remove('token');
   cookies.remove('admin');
   cookies.remove('hasGitHubPAT');
+  cookies.remove('my-jobs');
   window.location.replace('/login.html');
 };