Add Empty State Tables for Builds & Routes

-Builds page is without a button because there was not a button previously
-Routes page has a button because there was a button previously

Author: MarkDeMaria

app/views/browse/routes.html

@@ -24,7 +24,22 @@ <h1>Routes</h1>
         <div class="container-fluid">
           <div class="row">
             <div class="col-md-12 gutter-top">
-              <table class="table table-bordered table-hover table-mobile">
+              <div ng-if="(routes | hashSize) == 0" class="blank-slate-pf">
+                <div class="blank-slate-pf-icon">
+                  <span class="pficon pficon pficon-route"></span>
+                </div>
+                <h1>{{emptyMessage}}</h1>
+                <p>
+                  To create your project's first route select the 'Create Route' button below and follow the on-screen prompts.
+                </p>
+                <p>
+                  For more information or to find out why you might be seeing this message, please visit our <a href="#">Openshift Help Center</a>.
+                </p>
+                <div class="blank-slate-pf-main-action">
+                  <a ng-href="project/{{project.metadata.name}}/create-route"><button class="btn btn-primary btn-lg"> Create Route </button></a>
+                </div>
+              </div>
+              <table ng-if="(routes | hashSize) !== 0" class="table table-bordered table-hover table-mobile">
                 <thead>
                   <tr>
                     <th>Name</th>

app/views/builds.html

@@ -21,7 +21,16 @@ <h1>Builds</h1>
         <div class="container-fluid">
           <div class="row">
             <div class="col-md-12 gutter-top">
-              <table class="table table-bordered table-hover table-mobile">
+              <div ng-if="((buildsByBuildConfig | hashSize) == 0)" class="blank-slate-pf">
+                <div class="blank-slate-pf-icon">
+                  <span class="pficon pficon pficon-build"></span>
+                </div>
+                <h1>{{emptyMessage}}</h1>
+                <p>
+                  To create your project's first build, please visit our <a href="#">Build Configuration Wizard</a>.
+                </p>
+              </div>
+              <table ng-if="((buildsByBuildConfig | hashSize) !== 0)" class="table table-bordered table-hover table-mobile">
                 <thead>
                   <tr>
                     <th>Name</th>
@@ -32,9 +41,6 @@ <h1>Builds</h1>
                     <th>Source</th>
                   </tr>
                 </thead>
-                <tbody ng-if="((buildsByBuildConfig | hashSize) == 0)">
-                  <tr><td colspan="6"><em>{{emptyMessage}}</em></td></tr>
-                </tbody>
                 <tbody ng-repeat="(buildConfigName, buildConfigBuilds) in buildsByBuildConfig">
                   <!-- Build config with no builds-->
                   <tr ng-if="(buildConfigBuilds | hashSize) == 0">

dist/scripts/templates.js

@@ -2760,7 +2760,22 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"container-fluid\">\n" +
     "<div class=\"row\">\n" +
     "<div class=\"col-md-12 gutter-top\">\n" +
-    "<table class=\"table table-bordered table-hover table-mobile\">\n" +
+    "<div ng-if=\"(routes | hashSize) == 0\" class=\"blank-slate-pf\">\n" +
+    "<div class=\"blank-slate-pf-icon\">\n" +
+    "<span class=\"pficon pficon pficon-route\"></span>\n" +
+    "</div>\n" +
+    "<h1>{{emptyMessage}}</h1>\n" +
+    "<p>\n" +
+    "To create your project's first route select the 'Create Route' button below and follow the on-screen prompts.\n" +
+    "</p>\n" +
+    "<p>\n" +
+    "For more information or to find out why you might be seeing this message, please visit our <a href=\"#\">Openshift Help Center</a>.\n" +
+    "</p>\n" +
+    "<div class=\"blank-slate-pf-main-action\">\n" +
+    "<a ng-href=\"project/{{project.metadata.name}}/create-route\"><button class=\"btn btn-primary btn-lg\"> Create Route </button></a>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<table ng-if=\"(routes | hashSize) !== 0\" class=\"table table-bordered table-hover table-mobile\">\n" +
     "<thead>\n" +
     "<tr>\n" +
     "<th>Name</th>\n" +
@@ -2968,7 +2983,16 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"container-fluid\">\n" +
     "<div class=\"row\">\n" +
     "<div class=\"col-md-12 gutter-top\">\n" +
-    "<table class=\"table table-bordered table-hover table-mobile\">\n" +
+    "<div ng-if=\"((buildsByBuildConfig | hashSize) == 0)\" class=\"blank-slate-pf\">\n" +
+    "<div class=\"blank-slate-pf-icon\">\n" +
+    "<span class=\"pficon pficon pficon-build\"></span>\n" +
+    "</div>\n" +
+    "<h1>{{emptyMessage}}</h1>\n" +
+    "<p>\n" +
+    "To create your project's first build, please visit our <a href=\"#\">Build Configuration Wizard</a>.\n" +
+    "</p>\n" +
+    "</div>\n" +
+    "<table ng-if=\"((buildsByBuildConfig | hashSize) !== 0)\" class=\"table table-bordered table-hover table-mobile\">\n" +
     "<thead>\n" +
     "<tr>\n" +
     "<th>Name</th>\n" +
@@ -2979,9 +3003,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<th>Source</th>\n" +
     "</tr>\n" +
     "</thead>\n" +
-    "<tbody ng-if=\"((buildsByBuildConfig | hashSize) == 0)\">\n" +
-    "<tr><td colspan=\"6\"><em>{{emptyMessage}}</em></td></tr>\n" +
-    "</tbody>\n" +
     "<tbody ng-repeat=\"(buildConfigName, buildConfigBuilds) in buildsByBuildConfig\">\n" +
     "\n" +
     "<tr ng-if=\"(buildConfigBuilds | hashSize) == 0\">\n" +

dist/scripts/vendor.js

@@ -39719,12 +39719,13 @@ prevent:"=",
 rows:"=",
 cols:"=",
 screenKeys:"=",
-autofocus:"=?"
+autofocus:"=?",
+status:"="
 },
 link:function(g, h, i) {
 function j() {
 function a(a) {
-!a && j && (a = "Could not connect to the container. Do you have sufficient privileges?"), a || (a = "disconnected"), j || (a = "\r\n" + a), q.write("" + a + "\r\n"), g.$apply(k);
+!a && j && (a = "Could not connect to the container. Do you have sufficient privileges?"), a || (a = "disconnected"), j || (a = "\r\n" + a), q.write("" + a + "\r\n"), g.status = "disconnected", g.$apply(k);
 }
 k(), q.reset();
 var b = "", c = g.pod();
@@ -39751,15 +39752,16 @@ q.write(d(b));
 }
 j && (j = !1, m.addClass("hidden"), n.addClass("hidden"), q.cursorHidden = !1, q.showCursor(), q.refresh(q.y, q.y), g.autofocus && q.element && q.element.focus());
 }, p.onclose = function(b) {
-a(b.reason);
+g.status = "disconnected", a(b.reason);
 };
 }, function(b) {
 a(b.message);
-});
+}), g.status = "connected";
 }
 function k() {
-m.addClass("hidden"), n.removeClass("hidden"), q && (q.cursorHidden = !0, q.refresh(q.x, q.y)), p && (p.onopen = p.onmessage = p.onerror = p.onclose = null, p.readyState < 2 && p.close(), p = null), window.clearInterval(o), o = null;
+g.status = "disconnected", m.addClass("hidden"), n.removeClass("hidden"), q && (q.cursorHidden = !0, q.refresh(q.x, q.y)), p && (p.onopen = p.onmessage = p.onerror = p.onclose = null, p.readyState < 2 && p.close(), p = null), window.clearInterval(o), o = null;
 }
+g.status = "disconnected";
 var l = a.element("<div class='terminal-wrapper'>");
 h.append(l);
 var m = a.element("<div class='spinner spinner-white hidden'>"), n = a.element("<button class='btn btn-default fa fa-refresh'>");