Use consistent theming for views

.gitignore

@@ -21,3 +21,4 @@ src/main/webapp/js/*dotci.js.map
 _book
 src/main/webapp/webcomponent-imports-vulcanized.html
 src/main/webapp/css/dotci.css
+src/main/webapp/js/homepage.js

bower.json

@@ -21,11 +21,13 @@
   "private": true,
   "dependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#~1.0.5",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.4",
     "iron-icon": "polymerelements/iron-icon#^1.0.0",
     "iron-icons": "polymerelements/iron-icons#^1.0.0",
     "iron-media-query": "polymerelements/iron-media-query#^1.0.2",
     "neon-animation": "polymerelements/neon-animation#^1.0.0",
     "paper-button": "polymerelements/paper-button#^1.0.0",
+    "paper-card": "PolymerElements/paper-card#~1.0.6",
     "paper-dialog": "polymerelements/paper-dialog#^1.0.0",
     "paper-dialog-scrollable": "polymerelements/paper-dialog-scrollable#^1.0.0",
     "paper-drawer-panel": "polymerelements/paper-drawer-panel#^1.0.0",

make-webpack-config.js

@@ -70,11 +70,11 @@ module.exports = function(config){
     },
     devtool: config.debug ? '#inline-source-map' : false,
     plugins: config.debug ? [
-      new ExtractTextPlugin("dotci.css")
+      new ExtractTextPlugin("[name].css")
     ] : [
       new webpack.EnvironmentPlugin('NODE_ENV'),
       new webpack.optimize.DedupePlugin(),
-      new ExtractTextPlugin("./../css/dotci.css"),
+      new ExtractTextPlugin("./../css/[name].css"),
       new webpack.optimize.UglifyJsPlugin(
         {
           compressor: {

package.json

@@ -64,7 +64,7 @@
   },
   "scripts": {
     "build": "npm install && npm run package && npm run vulcanize",
-    "package": "$(npm bin)/webpack --release=true  --colors --progress  src/main/jsx/app.jsx",
+    "package": "$(npm bin)/webpack --release=true  --colors --progress",
     "lint": "eslint src/main/jsx/**/*",
     "watch": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.dev.js --colors --progress --hot --inline  --port  3000",
     "test": "$(npm bin)/karma start",

src/main/java/com/groupon/jenkins/mybuildsview/MyBuildsView.java

@@ -23,20 +23,16 @@ of this software and associated documentation files (the "Software"), to deal
  */
 package com.groupon.jenkins.mybuildsview;
 
-import com.google.common.collect.Lists;
+import com.google.common.base.*;
+import com.google.common.collect.*;
 import com.groupon.jenkins.SetupConfig;
 import com.groupon.jenkins.dynamic.build.DynamicBuild;
+import com.groupon.jenkins.dynamic.build.api.*;
 import com.groupon.jenkins.dynamic.build.repository.DynamicBuildRepository;
 import com.groupon.jenkins.views.AuthenticatedView;
 import hudson.Extension;
-import hudson.model.Computer;
+import hudson.model.*;
 import hudson.model.Descriptor.FormException;
-import hudson.model.Item;
-import hudson.model.ItemGroup;
-import hudson.model.Job;
-import hudson.model.ModifiableItemGroup;
-import hudson.model.TopLevelItem;
-import hudson.model.ViewDescriptor;
 import hudson.util.RunList;
 import java.io.IOException;
 import java.util.Collection;
@@ -48,7 +44,9 @@ of this software and associated documentation files (the "Software"), to deal
 import org.kohsuke.stapler.Stapler;
 import org.kohsuke.stapler.StaplerRequest;
 import org.kohsuke.stapler.StaplerResponse;
+import org.kohsuke.stapler.export.*;
 
+import javax.annotation.*;
 import javax.servlet.ServletException;
 
 public class MyBuildsView extends AuthenticatedView {
@@ -72,6 +70,17 @@ public RunList getBuilds() {
         Iterable<DynamicBuild> builds = makeDynamicBuildRepository().getLastBuildsForUser(getCurrentUser(), 20);
         return RunList.fromRuns(Lists.newArrayList(builds));
     }
+    @Exported
+    public Iterable<ProcessedBuild> getUserBuilds(){
+        Iterable<DynamicBuild> builds = makeDynamicBuildRepository().getLastBuildsForUser(getCurrentUser(), 20);
+        Iterable<ProcessedBuild> processedBuilds = Iterables.transform(builds, new Function<DynamicBuild, ProcessedBuild>() {
+            @Override
+            public ProcessedBuild apply(DynamicBuild input) {
+                return new ProcessedBuild(input);
+            }
+        });
+        return Lists.newArrayList(processedBuilds);
+    }
 
     private String getCurrentUser() {
         return Jenkins.getAuthentication().getName();
@@ -142,4 +151,9 @@ public String getViewType() {
     public boolean isEditable() {
         return false;
     }
+
+    @Override
+    public Api getApi() {
+        return super.getApi();
+    }
 }

src/main/jsx/colors.css

@@ -1,7 +1,22 @@
 :root {
---success:   #038035;
---failure:   #c00;
---aborted:   #666;
---in_progress:   #E7D100;
-}
+  --success:   #038035;
+  --failure:   #c00;
+  --aborted:   #666;
+  --in_progress:   #E7D100;
+
+  --paper-teal-50: #e0f2f1;
+  --paper-teal-100: #b2dfdb;
+  --paper-teal-200: #80cbc4;
+  --paper-teal-300: #4db6ac;
+  --paper-teal-400: #26a69a;
+  --paper-teal-500: #009688;
+  --paper-teal-600: #00897b;
+  --paper-teal-700: #00796b;
+  --paper-teal-800: #00695c;
+  --paper-teal-900: #004d40;
+  --paper-teal-a100: #a7ffeb;
+  --paper-teal-a200: #64ffda;
+  --paper-teal-a400: #1de9b6;
+  --paper-teal-a700: #00bfa5;
 
+}

src/main/jsx/homepage/homepage.css

@@ -0,0 +1,33 @@
+@import './../colors.css';
+#cards {
+  @apply(--layout-vertical);
+  @apply(--center-justified);
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+paper-card {
+  width: 100%;
+  margin-bottom: 16px;
+}
+.fancy .title {
+  position: absolute;
+  top: 30px;
+  left: 100px;
+  color: var(--paper-teal-700);
+}
+.fancy img {
+  width: 100%;
+}
+.fancy .big {
+  font-size: 22px;
+  padding: 8px 0 16px;
+  color: var(--google-grey-500);
+}
+.fancy .medium {
+  font-size: 16px;
+  padding-bottom: 8px;
+}
+.pink {
+  --paper-card-header-color: var(--paper-pink-500);
+}

src/main/jsx/homepage/homepage.js

@@ -0,0 +1,31 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import qwest from 'qwest';
+import {stringify} from 'qs';
+require('./homepage.css');
+var Build = ({build}) => {
+  return <paper-card  class="fancy">
+  <div className="card-content">
+  <div className="title"> title </div>
+  <div className="medium">Title</div>
+  <div className="small">subtitle</div>
+  </div>
+
+  <div className="card-actions">
+  <paper-button>Some action</paper-button>
+  </div>
+  </paper-card>;
+}
+var HomePage = ({builds}) => {
+  return <div className="layout horizontal wrap">
+  {builds.map(build => <Build key={build.number} build={build}/>)}
+  </div>;
+};
+window.addEventListener('WebComponentsReady', ()=>{
+  const params = {tree:'*,userBuilds[*,commit[*]]'};
+  const fetchUrl = `${rootURL}/${viewUrl}/api/json?${stringify(params)}`;
+  qwest.get(fetchUrl,{},{responseType: 'json'}).then((res)=>{
+    ReactDOM.render(<HomePage builds={res.userBuilds}/>, document.getElementById("homepage"));
+  });
+  // ReactDOM.render(<HomePage/>, document.getElementById("homepage"));
+});

src/main/resources/com/groupon/jenkins/mybuildsview/MyBuildsView/main.jelly

@@ -21,10 +21,39 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
-<?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">
- <div class="main">
-        <h3>Recent Builds </h3>
-        <t:buildListTable builds="${it.builds}" jobBaseUrl="${rootURL}/" />
-   </div>
-</j:jelly>
+<!DOCTYPE html>
+<html lang="en">
+    <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:p="/lib/hudson/project">
+            <st:setHeader name="Expires" value="0" />
+            <st:contentType value="text/html;charset=UTF-8" />
+            <j:new var="h" className="hudson.Functions" /><!-- instead of JSP functions -->
+            <j:invokeStatic var="developmentMode" className="java.lang.Boolean" method="getBoolean">
+                <j:arg type="java.lang.String" value="hudson.hpi.run"/>
+            </j:invokeStatic>
+            ${h.initPageVariables(context)}
+            <title>${it.displayName}${not empty it.parent.fullDisplayName?' ['+it.parent.fullDisplayName+']':''}</title>
+            <meta charset="utf-8"/>
+            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+            <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"/>
+
+            <script src="${resURL}/plugin/DotCi/js/webcomponentsjs/webcomponents-lite.min.js"></script>
+            <link rel="icon" href="${resURL}/plugin/DotCi/favicons/default.ico" type="image/vnd.microsoft.icon" />
+            <j:if test='${developmentMode}'>
+                <script src="http://localhost:3000/assets/homepage.js"/>
+                <link rel="import" href="${resURL}/plugin/DotCi/webcomponent-imports.html"/>
+               <link rel="stylesheet"  is="custom-style" type="text/css" href="http://localhost:3000/assets/homepage.css"/>
+            </j:if>
+            <j:if test='${!developmentMode}'>
+                <script src="${resURL}/plugin/DotCi/js/homepage.js"/>
+                <link rel="import" href="${resURL}/plugin/DotCi/webcomponent-imports-vulcanized.html"/>
+                <link rel="stylesheet" is="custom-style" type="text/css" href="${resURL}/plugin/DotCi/css/homepage.css"/>
+            </j:if>
+        <script>
+            viewUrl = '${it.viewUrl}';
+            rootURL = '${rootURL}';
+            resURL= '${resURL}/plugin/DotCi/';
+        </script>
+        <div id="homepage"/>
+
+    </j:jelly>
+</html>

src/main/webapp/webcomponent-imports.html

@@ -22,6 +22,8 @@
 <link rel="import" href="./bower_components/neon-animation/animations/scale-up-animation.html">
 <link rel="import" href="./bower_components/neon-animation/animations/fade-out-animation.html">
 <link rel="import" href="./bower_components/paper-progress/paper-progress.html">
+<link rel="import" href="./bower_components/paper-card/paper-card.html">
+<link rel="import" href="./bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./github-icons.html">
 <link rel="import" href="./dotci-icons.html">
 

webpack.config.dev.js

@@ -27,14 +27,20 @@ module.exports = require('./make-webpack-config.js')(
   { 
     debug: true ,
     entry:{
-       dotci:  [
-           'webpack-dev-server/client?http://localhost:3000',
-           'webpack/hot/only-dev-server',
+      dotci:  [
+        'webpack-dev-server/client?http://localhost:3000',
+        'webpack/hot/only-dev-server',
         "./src/main/jsx/app.jsx"
-    ]},
+      ],
+      homepage:  [
+        'webpack-dev-server/client?http://localhost:3000',
+        'webpack/hot/only-dev-server',
+        "./src/main/jsx/homepage/homepage.js"
+      ]
+    },
     output: {
-        filename: "dotci.js",
-        publicPath: "http://localhost:3000/assets/"
+      filename: "[name].js",
+      publicPath: "http://localhost:3000/assets/"
     }
   }
 );

webpack.config.js

@@ -25,10 +25,13 @@
 module.exports = require('./make-webpack-config.js')(
   { 
     debug: false ,
-    entry:"./src/main/jsx/app.jsx",
+    entry:{
+      "dotci": "./src/main/jsx/app.jsx",
+      "homepage": "./src/main/jsx/homepage/homepage.js"
+    },
     output: {
-        path: "src/main/webapp/js",
-        filename: "dotci.js"
+      path: "src/main/webapp/js",
+      filename: "[name].js"
     }
   }
 );