Improve guidance when there are no pipelines to show

Fixes #932

Author: jwforres

app/scripts/constants.js

@@ -73,6 +73,11 @@ window.OPENSHIFT_CONSTANTS = {
     pipelines: true
   },
 
+  SAMPLE_PIPELINE_TEMPLATE: {
+    name: "jenkins-pipeline-example",
+    namespace: "openshift"
+  },
+
   // href's will be prefixed with /project/{{projectName}} unless they are absolute URLs
   PROJECT_NAVIGATION: [
     {

app/scripts/controllers/pipelines.js

@@ -11,6 +11,7 @@ angular.module('openshiftConsole')
   .controller('PipelinesController', function ($filter,
                                                $routeParams,
                                                $scope,
+                                               Constants,
                                                AlertMessageService,
                                                BuildsService,
                                                DataService,
@@ -106,11 +107,21 @@ angular.module('openshiftConsole')
           update();
         }));
 
+        var checkedForSampleTemplate = false;
         watches.push(DataService.watch("buildconfigs", context, function(buildConfigData) {
           $scope.buildConfigsLoaded = true;
           // Filter on the client until the server supports fieldSelector on spec.strategy.type.
           // Use _.pick instead of _.filter to keep $scope.buildConfigs a map
           $scope.buildConfigs = _.pick(buildConfigData.by("metadata.name"), isPipeline);
+          if (_.isEmpty($scope.buildConfigs) && !checkedForSampleTemplate) {
+            checkedForSampleTemplate = true;
+            var sampleName = Constants.SAMPLE_PIPELINE_TEMPLATE.name;
+            var sampleNamespace = Constants.SAMPLE_PIPELINE_TEMPLATE.namespace;
+            DataService.get("templates", sampleName, {namespace: sampleNamespace}, {errorNotification: false}).then(
+              function() {
+                $scope.deploySampleURL = "project/" + $scope.projectName + "/create/fromtemplate?name=" + encodeURIComponent(sampleName) + "&namespace=" + encodeURIComponent(sampleNamespace);
+              });
+          }
           update();
         }));
 

app/views/pipelines.html

@@ -27,10 +27,15 @@ <h2>No pipelines.</h2>
                 <div ng-if="project.metadata.name | canIAddToProject">
                   <p>
                     No pipelines have been added to project {{projectName}}.
+                    <br>
+                    Learn more about
+                    <a ng-href="{{ 'pipeline-builds' | helpLink}}" target="_blank">Pipeline Builds</a>
+                    and the
+                    <a ng-href="{{ 'pipeline-plugin' | helpLink}}" target="_blank">OpenShift Pipeline Plugin</a>.
                   </p>
-                  <p ng-if="project.metadata.name | canIAddToProject">
-                    <a ng-href="project/{{projectName}}/create" class="btn btn-lg btn-primary">
-                      Add to Project
+                  <p ng-if="(project.metadata.name | canIAddToProject) && deploySampleURL">
+                    <a ng-href="{{deploySampleURL}}" class="btn btn-lg btn-primary">
+                      Deploy Sample Pipeline
                     </a>
                   </p>
                 </div>

dist/scripts/scripts.js

@@ -50,6 +50,10 @@ AVAILABLE_KINDS_BLACKLIST:[ "Binding", "Ingress", "DeploymentConfigRollback" ],
 ENABLE_TECH_PREVIEW_FEATURE:{
 pipelines:!0
 },
+SAMPLE_PIPELINE_TEMPLATE:{
+name:"jenkins-pipeline-example",
+namespace:"openshift"
+},
 PROJECT_NAVIGATION:[ {
 label:"Overview",
 iconClass:"fa fa-dashboard",
@@ -5200,47 +5204,60 @@ b.buildConfigs = a.select(b.unfilteredBuildConfigs), j(), m();
 d.unwatchAll(l);
 });
 }));
-} ]), angular.module("openshiftConsole").controller("PipelinesController", [ "$filter", "$routeParams", "$scope", "AlertMessageService", "BuildsService", "DataService", "Logger", "ProjectsService", function(a, b, c, d, e, f, g, h) {
-c.projectName = b.project, c.alerts = c.alerts || {}, c.buildConfigs = {}, d.getAlerts().forEach(function(a) {
+} ]), angular.module("openshiftConsole").controller("PipelinesController", [ "$filter", "$routeParams", "$scope", "Constants", "AlertMessageService", "BuildsService", "DataService", "Logger", "ProjectsService", function(a, b, c, d, e, f, g, h, i) {
+c.projectName = b.project, c.alerts = c.alerts || {}, c.buildConfigs = {}, e.getAlerts().forEach(function(a) {
 c.alerts[a.name] = a.data;
-}), d.clearAlerts();
-var i = [];
-h.get(b.project).then(_.spread(function(b, d) {
+}), e.clearAlerts();
+var j = [];
+i.get(b.project).then(_.spread(function(b, e) {
 c.project = b;
-var g = {}, h = a("buildConfigForBuild"), j = a("isIncompleteBuild"), k = a("isJenkinsPipelineStrategy"), l = a("isNewerResource"), m = function(a, b) {
-if (!j(b)) {
+var h = {}, i = a("buildConfigForBuild"), k = a("isIncompleteBuild"), l = a("isJenkinsPipelineStrategy"), m = a("isNewerResource"), n = function(a, b) {
+if (!k(b)) {
 c.statsByConfig[a] || (c.statsByConfig[a] = {
 count:0,
 totalDuration:0
 });
 var d = c.statsByConfig[a];
-d.count++, d.totalDuration += e.getDuration(b), d.avgDuration = _.round(d.totalDuration / d.count);
+d.count++, d.totalDuration += f.getDuration(b), d.avgDuration = _.round(d.totalDuration / d.count);
 }
-}, n = function() {
+}, o = function() {
 var a = {}, b = {};
-c.statsByConfig = {}, _.each(g, function(d) {
-if (k(d)) {
-var e = h(d) || "";
-c.buildConfigs[e] || (c.buildConfigs[e] = null), j(d) ? _.set(a, [ e, d.metadata.name ], d) :l(d, b[e]) && (b[e] = d), m(e, d);
+c.statsByConfig = {}, _.each(h, function(d) {
+if (l(d)) {
+var e = i(d) || "";
+c.buildConfigs[e] || (c.buildConfigs[e] = null), k(d) ? _.set(a, [ e, d.metadata.name ], d) :m(d, b[e]) && (b[e] = d), n(e, d);
 }
 }), _.each(b, function(b, c) {
 _.set(a, [ c, b.metadata.name ], b);
 }), c.interestingBuildsByConfig = a;
 };
-i.push(f.watch("builds", d, function(a) {
-c.buildsLoaded = !0, g = a.by("metadata.name"), n();
-})), i.push(f.watch("buildconfigs", d, function(a) {
-c.buildConfigsLoaded = !0, c.buildConfigs = _.pick(a.by("metadata.name"), k), n();
+j.push(g.watch("builds", e, function(a) {
+c.buildsLoaded = !0, h = a.by("metadata.name"), o();
+}));
+var p = !1;
+j.push(g.watch("buildconfigs", e, function(a) {
+if (c.buildConfigsLoaded = !0, c.buildConfigs = _.pick(a.by("metadata.name"), l), _.isEmpty(c.buildConfigs) && !p) {
+p = !0;
+var b = d.SAMPLE_PIPELINE_TEMPLATE.name, e = d.SAMPLE_PIPELINE_TEMPLATE.namespace;
+g.get("templates", b, {
+namespace:e
+}, {
+errorNotification:!1
+}).then(function() {
+c.deploySampleURL = "project/" + c.projectName + "/create/fromtemplate?name=" + encodeURIComponent(b) + "&namespace=" + encodeURIComponent(e);
+});
+}
+o();
 })), c.startBuild = function(b) {
-e.startBuild(b, d).then(_.noop, function(b) {
+f.startBuild(b, e).then(_.noop, function(b) {
 c.alerts["start-build"] = {
 type:"error",
 message:"An error occurred while starting the build.",
 details:a("getErrorDetails")(b)
 };
 });
 }, c.$on("$destroy", function() {
-f.unwatchAll(i);
+g.unwatchAll(j);
 });
 }));
 } ]), angular.module("openshiftConsole").controller("BuildConfigController", [ "$scope", "$filter", "$routeParams", "AlertMessageService", "APIService", "BuildsService", "ImagesService", "DataService", "LabelFilter", "ModalsService", "ProjectsService", "keyValueEditorUtils", function(a, b, c, d, e, f, g, h, i, j, k, l) {

dist/scripts/templates.js

@@ -10614,10 +10614,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div ng-if=\"project.metadata.name | canIAddToProject\">\n" +
     "<p>\n" +
     "No pipelines have been added to project {{projectName}}.\n" +
+    "<br>\n" +
+    "Learn more about\n" +
+    "<a ng-href=\"{{ 'pipeline-builds' | helpLink}}\" target=\"_blank\">Pipeline Builds</a>\n" +
+    "and the\n" +
+    "<a ng-href=\"{{ 'pipeline-plugin' | helpLink}}\" target=\"_blank\">OpenShift Pipeline Plugin</a>.\n" +
     "</p>\n" +
-    "<p ng-if=\"project.metadata.name | canIAddToProject\">\n" +
-    "<a ng-href=\"project/{{projectName}}/create\" class=\"btn btn-lg btn-primary\">\n" +
-    "Add to Project\n" +
+    "<p ng-if=\"(project.metadata.name | canIAddToProject) && deploySampleURL\">\n" +
+    "<a ng-href=\"{{deploySampleURL}}\" class=\"btn btn-lg btn-primary\">\n" +
+    "Deploy Sample Pipeline\n" +
     "</a>\n" +
     "</p>\n" +
     "</div>\n" +