From 8dd3245b1f65ee0eb1e7a9a718c47d673f8d4eae Mon Sep 17 00:00:00 2001
From: karthikjayaraman80
 <48958618+karthikjayaraman80@users.noreply.github.com>
Date: Thu, 10 Sep 2020 21:33:22 -0400
Subject: [PATCH 1/4] Supporting Multiple Deployments in a single build

Consider a job that deploys to multiple environments. The View only shows the details of the first environment. The change enables all the environment deployments for a single build.

Sample Jenkins pipeline that deploys to multiple environments:
pipeline {
    agent any
    stages {
        stage('Deploy to DEV') {
            steps {
                input message: 'Deploy to DEV'
            addDeployToDashboard(env: 'DEV', buildNumber: "$BUILD_NUMBER")
            }

        }

        stage('Deploy to QA') {
            steps {
                input message: 'Deploy to QA'
            addDeployToDashboard(env: 'QA', buildNumber: "$BUILD_NUMBER")
            }

        }

        stage('Deploy to PROD') {
            steps {
                input message: 'Deploy to PROD'
            addDeployToDashboard(env: 'PROD', buildNumber: "$BUILD_NUMBER")
            }

        }
    }
}

Signed-off-by: Karthik Jayaraman <kjayaraman@gmail.com>
---
 .../jenkinsci/plugins/environmentdashboard/DeploymentView.java | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
index 7a26624..4859925 100644
--- a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
@@ -48,7 +48,8 @@ private List<Unit.Environment> getEnvs(TopLevelItem item) {
 
         return runs
                 .stream()
-                .map(run -> run.getAction(DeploymentAction.class))
+                .map(run -> run.getActions(DeploymentAction.class))
+                .flatMap(List::stream)
                 .filter(Objects::nonNull)
                 .collect(Collectors.groupingBy(DeploymentAction::getEnv))
                 .entrySet()

From 9ec3c3a60df2e67681174370df1a7b7a617a8c85 Mon Sep 17 00:00:00 2001
From: Karthik Jayaraman <kjayaraman@gmail.com>
Date: Fri, 11 Sep 2020 13:54:33 -0400
Subject: [PATCH 2/4] Adding user/group level permissions

Signed-off-by: Karthik Jayaraman <kjayaraman@gmail.com>
---
 .../environmentdashboard/BuildAddUrl.java     | 67 +++++++++++++++++--
 1 file changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/BuildAddUrl.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/BuildAddUrl.java
index e33849f..899a083 100644
--- a/src/main/java/org/jenkinsci/plugins/environmentdashboard/BuildAddUrl.java
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/BuildAddUrl.java
@@ -8,20 +8,37 @@
 import jenkins.tasks.SimpleBuildStep;
 import org.jenkinsci.Symbol;
 import org.kohsuke.stapler.DataBoundConstructor;
+import org.kohsuke.stapler.DataBoundSetter;
 
 import javax.annotation.Nonnull;
 import java.io.IOException;
 
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Arrays;
+
 public class BuildAddUrl extends Builder implements SimpleBuildStep {
 
     private final String title;
     private final String url;
-
+    private String users;
+    private String groups;
+    
     @DataBoundConstructor
     public BuildAddUrl(String title, String url) {
         this.url = url;
         this.title = title;
     }
+    
+    @DataBoundSetter
+    public void setUsers(String users) {
+        this.users = users;
+    }
+
+    @DataBoundSetter
+    public void setGroups(String groups) {
+        this.groups = groups;
+    }
 
     public String getTitle() {
         return title;
@@ -31,6 +48,14 @@ public String getUrl() {
         return url;
     }
 
+    public String getUsers() {
+        return users;
+    }
+
+    public String getGroups() {
+        return groups;
+    }
+
     @Override
     public BuildStepMonitor getRequiredMonitorService() {
         return BuildStepMonitor.NONE;
@@ -43,7 +68,7 @@ public void perform(
             @Nonnull Launcher launcher,
             @Nonnull TaskListener listener
     ) throws InterruptedException, IOException {
-        run.addAction(new BuildUrlAction(title, url));
+        run.addAction(new BuildUrlAction(title, url, users, groups));
     }
 
     @Extension
@@ -64,15 +89,49 @@ public boolean isApplicable(Class<? extends AbstractProject> t) {
     public static class BuildUrlAction implements Action {
         private final String title;
         private final String url;
+        private final ArrayList<String> userList = new ArrayList<String>();
+        private final ArrayList<String> groupList = new ArrayList<String>();
 
-        BuildUrlAction(String title, String url) {
+        BuildUrlAction(String title, String url, String users, String groups) {
             this.title = title;
             this.url = url;
+            if (users != null && !"".equals(users)) {
+                this.userList.addAll(Arrays.asList(users.split(",")));
+            } 
+            if (groups != null && !"".equals(groups)) {
+                this.groupList.addAll(Arrays.asList(groups.split(",")));
+            }
         }
 
         @Override
         public String getIconFileName() {
-            return String.format("/plugin/%s/deploy.png", getClass().getPackage().getImplementationTitle());
+            String iconFileName = String.format("/plugin/%s/deploy.png", getClass().getPackage().getImplementationTitle());
+
+            User currentUser = User.current();
+            if (currentUser == null) return null;
+
+            String currentUserId = currentUser.getId();
+            List<String> currentUserGroups = currentUser.getAuthorities();
+
+            if (!checkPermissions() || isUserInList(currentUserId) || isUserInGroup(currentUserGroups)) 
+                return iconFileName;
+
+            return null;
+        }
+
+        private boolean checkPermissions() {
+            return userList.size() > 0 || groupList.size() > 0;
+        }
+
+        private boolean isUserInList(String userId) {
+            return userList.contains(userId);
+        }
+
+        private boolean isUserInGroup(List<String> userGroups) {
+            for(String userGroup: userGroups) 
+                if (groupList.contains(userGroup))
+                    return true;
+            return false;
         }
 
         @Override

From 6aaca8b222df2ff02bce2d57858efc6eb3c2066d Mon Sep 17 00:00:00 2001
From: Karthik Jayaraman <kjayaraman@gmail.com>
Date: Fri, 11 Sep 2020 13:58:12 -0400
Subject: [PATCH 3/4] Cleanup

Signed-off-by: Karthik Jayaraman <kjayaraman@gmail.com>
---
 .../jenkinsci/plugins/environmentdashboard/DeploymentView.java | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
index 4859925..7a26624 100644
--- a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
@@ -48,8 +48,7 @@ private List<Unit.Environment> getEnvs(TopLevelItem item) {
 
         return runs
                 .stream()
-                .map(run -> run.getActions(DeploymentAction.class))
-                .flatMap(List::stream)
+                .map(run -> run.getAction(DeploymentAction.class))
                 .filter(Objects::nonNull)
                 .collect(Collectors.groupingBy(DeploymentAction::getEnv))
                 .entrySet()

From dc13cf18db1456d8d8150bc3d474dd30b4f060ab Mon Sep 17 00:00:00 2001
From: Karthik Jayaraman <kjayaraman@gmail.com>
Date: Sun, 13 Sep 2020 14:04:00 -0400
Subject: [PATCH 4/4] Using Data Tables

Signed-off-by: Karthik Jayaraman <kjayaraman@gmail.com>
---
 pom.xml                                       |  10 +
 .../DeploymentTableConfiguration.java         |  34 +++
 .../DeploymentTableModel.java                 | 151 ++++++++++
 .../DeploymentTableRow.java                   |  22 ++
 .../environmentdashboard/DeploymentView.java  | 132 ++++----
 .../DeploymentView/main.jelly                 | 102 ++-----
 src/main/webapp/js/dataTables.rowsGroup.js    | 285 ++++++++++++++++++
 7 files changed, 585 insertions(+), 151 deletions(-)
 create mode 100644 src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableConfiguration.java
 create mode 100644 src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableModel.java
 create mode 100644 src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableRow.java
 create mode 100644 src/main/webapp/js/dataTables.rowsGroup.js

diff --git a/pom.xml b/pom.xml
index 49139ec..1913af8 100644
--- a/pom.xml
+++ b/pom.xml
@@ -35,6 +35,16 @@
             <artifactId>workflow-multibranch</artifactId>
             <version>2.21</version>
         </dependency>
+        <dependency>
+            <groupId>io.jenkins.plugins</groupId>
+            <artifactId>data-tables-api</artifactId>
+            <version>1.10.20-12</version>
+        </dependency>
+        <dependency>
+            <groupId>com.github.spotbugs</groupId>
+            <artifactId>spotbugs-annotations</artifactId>
+            <version>4.0.0</version>
+        </dependency>
     </dependencies>
 
     <licenses>
diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableConfiguration.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableConfiguration.java
new file mode 100644
index 0000000..b39aee7
--- /dev/null
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableConfiguration.java
@@ -0,0 +1,34 @@
+package org.jenkinsci.plugins.environmentdashboard;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.Map;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import io.jenkins.plugins.datatables.TableConfiguration;
+
+public class DeploymentTableConfiguration extends TableConfiguration{
+
+    private final Map<String, Object> configuration = new HashMap<>();
+
+    DeploymentTableConfiguration() {
+        super();
+        
+        this.configuration.put("rowsGroup", new int[]{0});
+        this.configuration.put("pagingType", "full_numbers");
+        this.configuration.put("stateSave", true);
+    }
+
+    @Override
+    public String getConfiguration() {
+        try {
+            return new ObjectMapper().writeValueAsString(configuration);
+        }
+        catch (JsonProcessingException exception) {
+            throw new IllegalArgumentException(
+                    String.format("Can't convert table configuration '%s' to JSON object", configuration), exception);
+        }
+    }
+}
diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableModel.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableModel.java
new file mode 100644
index 0000000..c5a7265
--- /dev/null
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableModel.java
@@ -0,0 +1,151 @@
+package org.jenkinsci.plugins.environmentdashboard;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.List;
+import java.util.Objects;
+import java.util.stream.Collectors;
+
+import org.jenkinsci.plugins.environmentdashboard.Deployment.DeploymentAction;
+import org.jenkinsci.plugins.workflow.job.WorkflowJob;
+import org.jenkinsci.plugins.workflow.job.WorkflowRun;
+import org.jenkinsci.plugins.workflow.multibranch.WorkflowMultiBranchProject;
+
+import hudson.model.Job;
+import hudson.model.Run;
+import hudson.model.TopLevelItem;
+import io.jenkins.plugins.datatables.TableColumn;
+import io.jenkins.plugins.datatables.TableConfiguration;
+import io.jenkins.plugins.datatables.TableModel;
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+public class DeploymentTableModel extends TableModel {
+    private String id;
+    List<? extends TopLevelItem> items;
+    
+    DeploymentTableModel(String id) {
+        this.id = id;
+    }
+
+    public TableModel populate(List<? extends TopLevelItem> items) {
+        this.items = items;
+        return this;
+    }
+
+    private String getStatusHTML(String altText, String imageUrl, String href) {
+        // Issue with URL
+        href = href.substring(href.indexOf("/job"));
+        return new StringBuffer().append("<a href=\"")
+            .append(href)
+            .append("\"><img alt=\"")
+            .append(altText)
+            .append("\" src=\"")
+            .append(imageUrl)
+            .append("\" /></a>")
+            .toString();
+    }
+    
+    private String getPopupHTML(int row, int col, String envName) {
+        return new StringBuffer().append("<a href=\"javascript:toggle('")
+            .append(row).append("_").append(col)
+            .append("');\">").append(envName).append("</a>")
+            .toString();
+    }
+
+    @Override
+    public String getId() {
+        return id;
+    }
+
+    @Override
+    public TableConfiguration getTableConfiguration() {
+        return new DeploymentTableConfiguration();
+    }
+
+    @Override
+    public List<TableColumn> getColumns() {
+        List<TableColumn> columns = new ArrayList<TableColumn>();
+        columns.add(new TableColumn("Job", "job"));
+        columns.add(new TableColumn("Environment", "environment"));
+        columns.add(new TableColumn("Release", "release"));
+        columns.add(new TableColumn("Result", "result"));
+        columns.add(new TableColumn("Completed", "completed"));
+        return columns;
+    }
+
+    @Override
+    public List<Object> getRows() {
+        List<Object> rows = new ArrayList<Object>();
+
+        int i=0;
+        for (Unit unit: getUnits(items)) {
+            int j=0;
+            for (Unit.Environment env: unit.environments) {
+                DeploymentAction action = env.getCurrentAction();
+                Run run = action.getRun();
+                rows.add(new DeploymentTableRow(unit.job.getName(), 
+                    getPopupHTML(i, j, env.name), 
+                    action.getBuildNumber(), 
+                    getStatusHTML(run.getDescription(), 
+                        run.getIconColor().getImageOf("32x32"), 
+                        run.getUrl()),
+                    run.getTimestampString() + " ago"));
+                ++j;
+            } 
+            ++i;
+        }
+        return rows;
+    }
+
+    private List<Unit.Environment> getEnvs(TopLevelItem item) {
+        List<WorkflowRun> runs = Collections.emptyList();
+        if (item instanceof WorkflowMultiBranchProject) {
+            runs = ((WorkflowMultiBranchProject) item)
+                    .getItems()
+                    .stream()
+                    .map(Job::getBuilds)
+                    .flatMap(Collection::stream)
+                    .collect(Collectors.toList());
+        } else if (item instanceof WorkflowJob) {
+            runs = ((WorkflowJob) item).getBuilds();
+        }
+
+        return runs
+                .stream()
+                .map(run -> run.getActions(DeploymentAction.class))
+                .flatMap(List::stream)
+                .filter(Objects::nonNull)
+                .collect(Collectors.groupingBy(DeploymentAction::getEnv))
+                .entrySet()
+                .stream()
+                .map(e -> new Unit.Environment(e.getKey(), e.getValue()))
+                .collect(Collectors.toList());
+    }
+
+    public List<Unit> getUnits(List<? extends TopLevelItem> items) {
+        return items.stream()
+                    .map(item -> new Unit(item, getEnvs(item)))
+                    .filter(unit -> !unit.getEnvironments().isEmpty())
+                    .collect(Collectors.toList());
+    }
+
+    @Getter
+    @RequiredArgsConstructor
+    public static class Unit {
+        private final TopLevelItem job;
+        private final List<Environment> environments;
+
+        @Getter
+        @RequiredArgsConstructor
+        public static class Environment {
+            private final String name;
+            private final List<DeploymentAction> actions;
+
+            public DeploymentAction getCurrentAction() {
+                return actions.get(0);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableRow.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableRow.java
new file mode 100644
index 0000000..23f3877
--- /dev/null
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentTableRow.java
@@ -0,0 +1,22 @@
+package org.jenkinsci.plugins.environmentdashboard;
+
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+@Getter
+@RequiredArgsConstructor
+public class DeploymentTableRow {
+    private String job;
+    private String environment;
+    private String release;
+    private String result;
+    private String completed;
+
+    DeploymentTableRow(String job, String environment, String release, String result, String completed) {
+        this.job = job;
+        this.environment = environment;
+        this.release = release;
+        this.result = result;
+        this.completed = completed;
+    }
+}
diff --git a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
index 7a26624..0cc4adb 100644
--- a/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
+++ b/src/main/java/org/jenkinsci/plugins/environmentdashboard/DeploymentView.java
@@ -1,88 +1,37 @@
 package org.jenkinsci.plugins.environmentdashboard;
 
+import java.util.List;
+import java.util.regex.Pattern;
+import java.util.regex.PatternSyntaxException;
+
+import javax.annotation.Nonnull;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import org.kohsuke.stapler.DataBoundConstructor;
+import org.kohsuke.stapler.QueryParameter;
+import org.kohsuke.stapler.StaplerRequest;
+import org.kohsuke.stapler.bind.JavaScriptMethod;
+
 import hudson.Extension;
 import hudson.Util;
-import hudson.model.Job;
 import hudson.model.ListView;
 import hudson.model.TopLevelItem;
 import hudson.model.ViewDescriptor;
 import hudson.util.FormValidation;
-import lombok.Getter;
-import lombok.RequiredArgsConstructor;
+import io.jenkins.plugins.datatables.AsyncTableContentProvider;
+import io.jenkins.plugins.datatables.TableModel;
 import net.sf.json.JSONObject;
-import org.jenkinsci.plugins.environmentdashboard.Deployment.DeploymentAction;
-import org.jenkinsci.plugins.workflow.job.WorkflowJob;
-import org.jenkinsci.plugins.workflow.job.WorkflowRun;
-import org.jenkinsci.plugins.workflow.multibranch.WorkflowMultiBranchProject;
-import org.kohsuke.stapler.DataBoundConstructor;
-import org.kohsuke.stapler.QueryParameter;
-import org.kohsuke.stapler.StaplerRequest;
 
-import javax.annotation.Nonnull;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.List;
-import java.util.Objects;
-import java.util.regex.Pattern;
-import java.util.regex.PatternSyntaxException;
-import java.util.stream.Collectors;
+public class DeploymentView extends ListView implements AsyncTableContentProvider{
+    private DeploymentTableModel model;
 
-public class DeploymentView extends ListView {
     @DataBoundConstructor
-    public DeploymentView(String name) {
+    public DeploymentView(final String name) {
         super(name);
     }
 
-    private List<Unit.Environment> getEnvs(TopLevelItem item) {
-        List<WorkflowRun> runs = Collections.emptyList();
-        if (item instanceof WorkflowMultiBranchProject) {
-            runs = ((WorkflowMultiBranchProject) item)
-                    .getItems()
-                    .stream()
-                    .map(Job::getBuilds)
-                    .flatMap(Collection::stream)
-                    .collect(Collectors.toList());
-        } else if (item instanceof WorkflowJob) {
-            runs = ((WorkflowJob) item).getBuilds();
-        }
-
-        return runs
-                .stream()
-                .map(run -> run.getAction(DeploymentAction.class))
-                .filter(Objects::nonNull)
-                .collect(Collectors.groupingBy(DeploymentAction::getEnv))
-                .entrySet()
-                .stream()
-                .map(e -> new Unit.Environment(e.getKey(), e.getValue()))
-                .collect(Collectors.toList());
-    }
-
-    public List<Unit> getUnits(List<? extends TopLevelItem> items) {
-        return items
-                .stream()
-                .map(item -> new Unit(item, getEnvs(item)))
-                .filter(unit -> !unit.getEnvironments().isEmpty())
-                .collect(Collectors.toList());
-    }
-
-    @Getter
-    @RequiredArgsConstructor
-    public static class Unit {
-        private final TopLevelItem job;
-        private final List<Environment> environments;
-
-        @Getter
-        @RequiredArgsConstructor
-        public static class Environment {
-            private final String name;
-            private final List<DeploymentAction> actions;
-
-            public DeploymentAction getCurrentAction() {
-                return actions.get(0);
-            }
-        }
-    }
-
     @Extension
     public static class DeploymentViewDescriptor extends ViewDescriptor {
         public DeploymentViewDescriptor() {
@@ -96,13 +45,14 @@ public String getDisplayName() {
             return "Deployment View";
         }
 
-        // Copy-n-paste from ListView$Descriptor as sadly we cannot inherit from that class
-        public FormValidation doCheckIncludeRegex(@QueryParameter String value) {
-            String v = Util.fixEmpty(value);
+        // Copy-n-paste from ListView$Descriptor as sadly we cannot inherit from that
+        // class
+        public FormValidation doCheckIncludeRegex(@QueryParameter final String value) {
+            final String v = Util.fixEmpty(value);
             if (v != null) {
                 try {
                     Pattern.compile(v);
-                } catch (PatternSyntaxException pse) {
+                } catch (final PatternSyntaxException pse) {
                     return FormValidation.error(pse.getMessage());
                 }
             }
@@ -110,10 +60,42 @@ public FormValidation doCheckIncludeRegex(@QueryParameter String value) {
         }
 
         @Override
-        public boolean configure(StaplerRequest req, JSONObject json) throws FormException {
+        public boolean configure(final StaplerRequest req, final JSONObject json) throws FormException {
             save();
 
             return true;
         }
     }
+
+    
+    @Override
+    public TableModel getTableModel(String id) {
+        if (model == null) {
+            model = new DeploymentTableModel(id);
+        }
+        return model;
+    }
+     
+    public TableModel getTableModel(String id, List<? extends TopLevelItem> items) {
+        if (model == null) {
+            model = new DeploymentTableModel(id);
+        }
+        return model.populate(items);
+    }
+
+    @Override
+    @JavaScriptMethod
+    public String getTableRows(final String id) {
+        return toJsonArray(getTableModel(id).getRows());
+    }
+
+    private String toJsonArray(final List<Object> rows) {
+        try {
+            return new ObjectMapper().writeValueAsString(rows);
+        }
+        catch (JsonProcessingException exception) {
+            throw new IllegalArgumentException(
+                    String.format("Can't convert table rows '%s' to JSON object", rows), exception);
+        }
+    }
 }
diff --git a/src/main/resources/org/jenkinsci/plugins/environmentdashboard/DeploymentView/main.jelly b/src/main/resources/org/jenkinsci/plugins/environmentdashboard/DeploymentView/main.jelly
index 01b762b..8997d57 100644
--- a/src/main/resources/org/jenkinsci/plugins/environmentdashboard/DeploymentView/main.jelly
+++ b/src/main/resources/org/jenkinsci/plugins/environmentdashboard/DeploymentView/main.jelly
@@ -1,9 +1,9 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout"
-         xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
+         xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:dt="/data-tables">
 
     <link href="${rootURL}/plugin/${it.getClass().getPackage().getImplementationTitle()}/css/blink.css" type="text/css" rel="stylesheet"/>
-
+    <st:adjunct includes="io.jenkins.plugins.data-tables"/>
     <j:set var="views" value="${it.owner.views}"/>
     <j:set var="currentView" value="${it}"/>
     <j:choose>
@@ -15,77 +15,22 @@
         </j:when>
         <j:otherwise>
             <st:include page="viewTabs.jelly" it="${it.owner.viewsTabBar}"/>
-            <j:set var="units" value="${it.getUnits(it.items)}"/>
-            <div class="pane-frame">
-                <table id="projectstatus" class="pane bigtable stripped-odd">
-                    <tbody>
-                        <tr class="header">
-                            <th>
-                                <span style="margin-left: 1em">
-                                    Job
-                                </span>
-                            </th>
-                            <th>
-                                <span>
-                                    Environment
-                                </span>
-                            </th>
-                            <th>
-                                <span>
-                                    Release
-                                </span>
-                            </th>
-                            <th>
-                                <span>
-                                    Result
-                                </span>
-                            </th>
-                            <th>
-                                <span>
-                                    Completed
-                                </span>
-                            </th>
-                        </tr>
-                        <j:forEach var="unit" indexVar="i" items="${units}">
-                            <j:forEach var="environment" indexVar="j" items="${unit.getEnvironments()}">
-                                <tr id="job_build">
-                                    <td>
-                                        <j:if test="${j == 0}">
-                                            <a href="${unit.getJob().getAbsoluteUrl()}" style="margin-left: .5em">${unit.getJob().name}</a>
-                                        </j:if>
-                                    </td>
-                                    <td>
-                                        <a href="javascript:toggle('${i}_${j}');">
-                                            ${environment.getName()}
-                                        </a>
-                                    </td>
-                                    <td>
-                                        <a href="${environment.getCurrentAction().run.getAbsoluteUrl()}">
-                                            ${environment.getCurrentAction().buildNumber}
-                                        </a>
-                                    </td>
-                                    <td>
-                                        <l:icon alt="${environment.getCurrentAction().run.description}"
-                                                class="${environment.getCurrentAction().run.buildStatusIconClassName} icon-lg"/>
-                                    </td>
-                                    <td>
-                                        ${environment.getCurrentAction().run.timestampString}
-                                    </td>
-                                </tr>
-                            </j:forEach>
-                        </j:forEach>
-                    </tbody>
-                </table>
-            </div>
-
+            <j:set var="tableModel" value="${it.getTableModel('projectstatus',it.items)}"/>
+            
+            <script src="${rootURL}/plugin/${it.getClass().getPackage().getImplementationTitle()}/js/dataTables.rowsGroup.js"></script>
+            <dt:table model="${tableModel}" onLoad="javascript:enableRowSpan();"/>
+            
+            <j:set var="units" value="${tableModel.getUnits(it.items)}"/>
             <j:forEach var="unit" indexVar="i" items="${units}">
                 <j:forEach var="environment" indexVar="j" items="${unit.getEnvironments()}">
-                    <div id="popup_${i}_${j}" class="modal">
+                    <div id="popup_${i}_${j}" class="modal" role="dialog">
                         <!-- Modal content -->
                         <div class="modal-content">
                             <div class="modal-header">
-                                <span class="close"></span>
-                                <h2>${unit.getJob().name} | ${environment.getName()}</h2>
+                                <h3 class="modal-title">${unit.getJob().name} | ${environment.getName()}</h3>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true"></span>
+                                </button>
                             </div>
                             <div class="modal-body">
                                 <div class="pane-frame">
@@ -111,16 +56,22 @@
                                             <j:forEach var="deployment" items="${environment.getActions()}">
                                                 <tr id="job_build">
                                                     <td>
-                                                        <a href="${deployment.run.getAbsoluteUrl()}">
-                                                            ${deployment.buildNumber}
-                                                        </a>
+                                                        ${deployment.buildNumber}
+                                                        [<a href="${deployment.run.getAbsoluteUrl()}/changes">
+                                                            changes
+                                                        </a>]
                                                     </td>
                                                     <td>
-                                                        <l:icon alt="${deployment.run.description}"
+                                                        <a href="${deployment.run.getAbsoluteUrl()}">
+                                                            <l:icon alt="${deployment.run.description}"
                                                                 class="${deployment.run.buildStatusIconClassName} icon-lg"/>
+                                                        </a>
+                                                        [<a href="${deployment.run.getAbsoluteUrl()}/console">
+                                                            console log
+                                                        </a>]
                                                     </td>
                                                     <td>
-                                                        ${deployment.run.timestampString}
+                                                        ${deployment.run.timestampString} ago
                                                     </td>
                                                 </tr>
                                             </j:forEach>
@@ -132,8 +83,7 @@
                     </div>
                 </j:forEach>
             </j:forEach>
-
-
+            
             <script language="javascript">
                 function toggle(id) {
                     var modal = document.getElementById('popup_' + id);
@@ -151,11 +101,11 @@
                             close()
                         }
                     }
-
                     window.addEventListener('click', windowClose);
                     span.addEventListener('click', close);
                 }
             </script>
+            
         </j:otherwise>
     </j:choose>
 </j:jelly>
\ No newline at end of file
diff --git a/src/main/webapp/js/dataTables.rowsGroup.js b/src/main/webapp/js/dataTables.rowsGroup.js
new file mode 100644
index 0000000..2dc3868
--- /dev/null
+++ b/src/main/webapp/js/dataTables.rowsGroup.js
@@ -0,0 +1,285 @@
+/*! RowsGroup for DataTables v2.0.0
+ * 2015-2016 Alexey Shildyakov ashl1future@gmail.com
+ * 2016 Tibor Wekerle
+ */
+
+/**
+ * @summary     RowsGroup
+ * @description Group rows by specified columns
+ * @version     2.0.0
+ * @file        dataTables.rowsGroup.js
+ * @author      Alexey Shildyakov (ashl1future@gmail.com)
+ * @contact     ashl1future@gmail.com
+ * @copyright   Alexey Shildyakov
+ * 
+ * License      MIT - http://datatables.net/license/mit
+ *
+ * This feature plug-in for DataTables automatically merges columns cells
+ * based on it's values equality. It supports multi-column row grouping
+ * in according to the requested order with dependency from each previous 
+ * requested columns. Now it supports ordering and searching. 
+ * Please see the example.html for details.
+ * 
+ * Rows grouping in DataTables can be enabled by using any one of the following
+ * options:
+ *
+ * * Setting the `rowsGroup` parameter in the DataTables initialisation
+ *   to array which containes columns selectors
+ *   (https://datatables.net/reference/type/column-selector) used for grouping. i.e.
+ *    rowsGroup = [1, 'columnName:name', ]
+ * * Setting the `rowsGroup` parameter in the DataTables defaults
+ *   (thus causing all tables to have this feature) - i.e.
+ *   `$.fn.dataTable.defaults.RowsGroup = [0]`.
+ * * Creating a new instance: `new $.fn.dataTable.RowsGroup( table, columnsForGrouping );`
+ *   where `table` is a DataTable's API instance and `columnsForGrouping` is the array
+ *   described above.
+ *
+ * For more detailed information please see:
+ *     
+ */
+
+(function($){
+
+ShowedDataSelectorModifier = {
+	order: 'current',
+	page: 'current',
+	search: 'applied',
+}
+
+GroupedColumnsOrderDir = 'asc';
+
+
+/*
+ * columnsForGrouping: array of DTAPI:cell-selector for columns for which rows grouping is applied
+ */
+var RowsGroup = function ( dt, columnsForGrouping )
+{
+	this.table = dt.table();
+	this.columnsForGrouping = columnsForGrouping;
+	 // set to True when new reorder is applied by RowsGroup to prevent order() looping
+	this.orderOverrideNow = false;
+	this.mergeCellsNeeded = false; // merge after init
+	this.order = []
+	
+	var self = this;
+	dt.on('order.dt', function ( e, settings) {
+		if (!self.orderOverrideNow) {
+			self.orderOverrideNow = true;
+			self._updateOrderAndDraw()
+		} else {
+			self.orderOverrideNow = false;
+		}
+	})
+	
+	dt.on('preDraw.dt', function ( e, settings) {
+		if (self.mergeCellsNeeded) {
+			self.mergeCellsNeeded = false;
+			self._mergeCells()
+		}
+	})
+	
+	dt.on('column-visibility.dt', function ( e, settings) {
+		self.mergeCellsNeeded = true;
+	})
+
+	dt.on('search.dt', function ( e, settings) {
+		// This might to increase the time to redraw while searching on tables
+		//   with huge shown columns
+		self.mergeCellsNeeded = true;
+	})
+
+	dt.on('page.dt', function ( e, settings) {
+		self.mergeCellsNeeded = true;
+	})
+
+	dt.on('length.dt', function ( e, settings) {
+		self.mergeCellsNeeded = true;
+	})
+
+	dt.on('xhr.dt', function ( e, settings) {
+		self.mergeCellsNeeded = true;
+	})
+
+	this._updateOrderAndDraw();
+	
+/* Events sequence while Add row (also through Editor)
+ * addRow() function
+ *   draw() function
+ *     preDraw() event
+ *       mergeCells() - point 1
+ *     Appended new row breaks visible elements because the mergeCells() on previous step doesn't apllied to already processing data
+ *   order() event
+ *     _updateOrderAndDraw()
+ *       preDraw() event
+ *         mergeCells()
+ *       Appended new row now has properly visibility as on current level it has already applied changes from first mergeCells() call (point 1)
+ *   draw() event
+ */
+};
+
+
+RowsGroup.prototype = {
+	setMergeCells: function(){
+		this.mergeCellsNeeded = true;
+	},
+
+	mergeCells: function()
+	{
+		this.setMergeCells();
+		this.table.draw('page');
+	},
+
+	_getOrderWithGroupColumns: function (order, groupedColumnsOrderDir)
+	{
+		if (groupedColumnsOrderDir === undefined)
+			groupedColumnsOrderDir = GroupedColumnsOrderDir
+			
+		var self = this;
+		var groupedColumnsIndexes = this.columnsForGrouping.map(function(columnSelector){
+			return self.table.column(columnSelector).index()
+		})
+		var groupedColumnsKnownOrder = order.filter(function(columnOrder){
+			return groupedColumnsIndexes.indexOf(columnOrder[0]) >= 0
+		})
+		var nongroupedColumnsOrder = order.filter(function(columnOrder){
+			return groupedColumnsIndexes.indexOf(columnOrder[0]) < 0
+		})
+		var groupedColumnsKnownOrderIndexes = groupedColumnsKnownOrder.map(function(columnOrder){
+			return columnOrder[0]
+		})
+		var groupedColumnsOrder = groupedColumnsIndexes.map(function(iColumn){
+			var iInOrderIndexes = groupedColumnsKnownOrderIndexes.indexOf(iColumn)
+			if (iInOrderIndexes >= 0)
+				return [iColumn, groupedColumnsKnownOrder[iInOrderIndexes][1]]
+			else
+				return [iColumn, groupedColumnsOrderDir]
+		})
+		
+		groupedColumnsOrder.push.apply(groupedColumnsOrder, nongroupedColumnsOrder)
+		return groupedColumnsOrder;
+	},
+ 
+	// Workaround: the DT reset ordering to 'asc' from multi-ordering if user order on one column (without shift)
+	//   but because we always has multi-ordering due to grouped rows this happens every time
+	_getInjectedMonoSelectWorkaround: function(order)
+	{
+		if (order.length === 1) {
+			// got mono order - workaround here
+			var orderingColumn = order[0][0]
+			var previousOrder = this.order.map(function(val){
+				return val[0]
+			})
+			var iColumn = previousOrder.indexOf(orderingColumn);
+			if (iColumn >= 0) {
+				// assume change the direction, because we already has that in previos order
+				return [[orderingColumn, this._toogleDirection(this.order[iColumn][1])]]
+			} // else This is the new ordering column. Proceed as is.
+		} // else got milti order - work normal
+		return order;
+	},
+	
+	_mergeCells: function()
+	{
+		var columnsIndexes = this.table.columns(this.columnsForGrouping, ShowedDataSelectorModifier).indexes().toArray()
+		var showedRowsCount = this.table.rows(ShowedDataSelectorModifier)[0].length 
+		this._mergeColumn(0, showedRowsCount - 1, columnsIndexes)
+	},
+	
+	// the index is relative to the showed data
+	//    (selector-modifier = {order: 'current', page: 'current', search: 'applied'}) index
+	_mergeColumn: function(iStartRow, iFinishRow, columnsIndexes)
+	{
+		var columnsIndexesCopy = columnsIndexes.slice()
+		currentColumn = columnsIndexesCopy.shift()
+		currentColumn = this.table.column(currentColumn, ShowedDataSelectorModifier)
+		
+		var columnNodes = currentColumn.nodes()
+		var columnValues = currentColumn.data()
+		
+		var newSequenceRow = iStartRow,
+			iRow;
+		for (iRow = iStartRow + 1; iRow <= iFinishRow; ++iRow) {
+			
+			if (columnValues[iRow] === columnValues[newSequenceRow]) {
+				$(columnNodes[iRow]).hide()
+			} else {
+				$(columnNodes[newSequenceRow]).show()
+				$(columnNodes[newSequenceRow]).attr('rowspan', (iRow-1) - newSequenceRow + 1)
+				
+				if (columnsIndexesCopy.length > 0)
+					this._mergeColumn(newSequenceRow, (iRow-1), columnsIndexesCopy)
+				
+				newSequenceRow = iRow;
+			}
+			
+		}
+		$(columnNodes[newSequenceRow]).show()
+		$(columnNodes[newSequenceRow]).attr('rowspan', (iRow-1)- newSequenceRow + 1)
+		if (columnsIndexesCopy.length > 0)
+			this._mergeColumn(newSequenceRow, (iRow-1), columnsIndexesCopy)
+	},
+	
+	_toogleDirection: function(dir)
+	{
+		return dir == 'asc'? 'desc': 'asc';
+	},
+ 
+	_updateOrderAndDraw: function()
+	{
+		this.mergeCellsNeeded = true;
+		
+		var currentOrder = this.table.order();
+		currentOrder = this._getInjectedMonoSelectWorkaround(currentOrder);
+		this.order = this._getOrderWithGroupColumns(currentOrder)
+		this.table.order($.extend(true, Array(), this.order))
+		this.table.draw('page')
+	},
+};
+
+
+$.fn.dataTable.RowsGroup = RowsGroup;
+$.fn.DataTable.RowsGroup = RowsGroup;
+
+// Automatic initialisation listener
+$(document).on( 'init.dt', function ( e, settings ) {
+	if ( e.namespace !== 'dt' ) {
+		return;
+	}
+
+	var api = new $.fn.dataTable.Api( settings );
+	
+	if ( settings.oInit.rowsGroup ||
+		 $.fn.dataTable.defaults.rowsGroup )
+	{
+		options = settings.oInit.rowsGroup?
+			settings.oInit.rowsGroup:
+			$.fn.dataTable.defaults.rowsGroup;
+		var rowsGroup = new RowsGroup( api, options );
+		$.fn.dataTable.Api.register( 'rowsgroup.update()', function () {
+			rowsGroup.mergeCells();
+			return this;
+		} );
+		$.fn.dataTable.Api.register( 'rowsgroup.updateNextDraw()', function () {
+			rowsGroup.setMergeCells();
+			return this;
+		} );
+	}
+} );
+
+}(jQuery));
+
+/*
+
+TODO: Provide function which determines the all <tr>s and <td>s with "rowspan" html-attribute is parent (groupped) for the specified <tr> or <td>. To use in selections, editing or hover styles.
+
+TODO: Feature
+Use saved order direction for grouped columns
+	Split the columns into grouped and ungrouped.
+	
+	user = grouped+ungrouped
+	grouped = grouped
+	saved = grouped+ungrouped
+	
+	For grouped uses following order: user -> saved (because 'saved' include 'grouped' after first initialisation). This should be done with saving order like for 'groupedColumns'
+	For ungrouped: uses only 'user' input ordering
+*/