Add catalog to web console

app/index.html

@@ -211,6 +211,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/services/apps.js"></script>
         <script src="scripts/services/resourceAlerts.js"></script>
         <script src="scripts/services/listRowUtils.js"></script>
+        <script src="scripts/controllers/landingPage.js"></script>
         <script src="scripts/controllers/projects.js"></script>
         <script src="scripts/controllers/pods.js"></script>
         <script src="scripts/controllers/pod.js"></script>

app/scripts/app.js

@@ -52,11 +52,26 @@ angular
       };
     }
 
+    var landingPageRoute;
+    var projectsPageRoute = {
+      templateUrl: 'views/projects.html',
+      controller: 'ProjectsController'
+    };
+    if (_.get(window, 'OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page')) {
+      landingPageRoute = {
+        templateUrl: 'views/landing-page.html',
+        controller: 'LandingPageController'
+      };
+      $routeProvider.when('/projects', projectsPageRoute);
+    } else {
+      landingPageRoute = projectsPageRoute;
+      $routeProvider.when('/projects', {
+        redirectTo: '/'
+      });
+    }
+
     $routeProvider
-      .when('/', {
-        templateUrl: 'views/projects.html',
-        controller: 'ProjectsController'
-      })
+      .when('/', landingPageRoute)
       .when('/create-project', {
         templateUrl: 'views/create-project.html',
         controller: 'CreateProjectController'

app/scripts/constants.js

@@ -436,5 +436,11 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
         }
       ]
     }
+  ],
+  SAAS_OFFERINGS: [
+    {id: 1, title:  'Microservices Application', icon: 'fa fa-cubes',  url: 'https://www.redhat.com/en/technologies/virtualization', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.'},
+    {id: 2, title:  'Mobile Application', icon: 'fa fa-mobile',  url: 'https://www.redhat.com/en/technologies/mobile', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.'},
+    {id: 3, title:  'Integration Application', icon: 'fa fa-plug',  url: 'https://www.redhat.com/en/technologies/cloud-computing', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.'},
+    {id: 4, title:  'Business Process Application', icon: 'fa fa-cubes',  url: 'https://www.redhat.com/en/technologies/management', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.'},
   ]
 });

app/scripts/controllers/landingPage.js

@@ -0,0 +1,32 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .controller('LandingPageController',
+              function($scope,
+                       AuthService,
+                       Constants,
+                       DataService,
+                       Navigate) {
+    $scope.saasOfferings = Constants.SAAS_OFFERINGS;
+
+    $scope.navToProject = function(project) {
+      Navigate.toProjectOverview(project.metadata.name);
+    };
+
+    $scope.navToProjectList = function() {
+      Navigate.toProjectList();
+    };
+
+    AuthService.withUser().then(function() {
+      DataService.list({
+        group: 'servicecatalog.k8s.io',
+        resource: 'serviceclasses'
+      }, $scope).then(function(resp) {
+        $scope.serviceClasses = resp.by('metadata.name');
+      });
+
+      DataService.list('imagestreams', { namespace: 'openshift' }).then(function(resp) {
+        $scope.imageStreams = resp.by('metadata.name');
+      });
+    });
+  });

app/scripts/services/navigate.js

@@ -70,6 +70,10 @@ angular.module("openshiftConsole")
         return "project/" + encodeURIComponent(projectName) + "/overview";
       },
 
+      toProjectList: function(){
+        $location.path('projects');
+      },
+
       quotaURL: function(projectName) {
         return "project/" + encodeURIComponent(projectName) + "/quota";
       },

app/styles/_catalog.less

@@ -0,0 +1,29 @@
+@landing-side-bar-top-offset: @navbar-os-header-height-desktop;
+@landing-side-bar-width-lg: 425px;
+@landing-side-bar-width-md: 375px;
+@landing-side-bar-width-sm: 325px;
+
+.console-os .wrap.no-sidebar .middle.landing-page {
+  background: @panel-shaded;
+  flex: none;
+  h1, .nav-tabs {
+    margin-bottom: 0;
+  }
+  @media(min-width: @screen-sm-min){
+    overflow-y: auto;
+    width: calc(100% ~"-" @landing-side-bar-width-sm);
+  }
+  @media(min-width: @screen-md-min) {
+    width: calc(100% ~"-" @landing-side-bar-width-md);
+  }
+
+  @media(min-width: @screen-lg-min) {
+    width: calc(100% ~"-" @landing-side-bar-width-lg);
+  }
+}
+
+@media(min-width: @screen-sm-min) {
+  .landing-side-bar {
+    top: @landing-side-bar-top-offset;
+  }
+}

app/styles/main.less

@@ -12,6 +12,7 @@
 @import "_buttons.less";
 @import "_forms.less";
 @import "_cards.less";
+@import "_catalog.less";
 @import "_component-animations.less";
 @import "_components.less";
 @import "_core.less";

app/views/landing-page.html

@@ -0,0 +1,28 @@
+<default-header class="top-header"></default-header>
+<div class="wrap no-sidebar">
+  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
+    <navbar-utility-mobile></navbar-utility-mobile>
+  </div>
+  <div class="middle landing-page">
+    <!-- Middle section -->
+    <div class="middle-section">
+      <div class="middle-container">
+        <div class="middle-content">
+          <landing-page service-classes="serviceClasses" image-streams="imageStreams">
+            <landingheader>
+              <div class="build-applications-view">
+                <saas-list saas-offerings="saasOfferings"></saas-list>
+              </div>
+            </landingheader>
+            <landingbody>
+              <services-view base-project-url="project" service-classes="serviceClasses" image-streams="imageStreams"></services-view>
+            </landingbody>
+            <landingside>
+              <projects-summary base-project-url="project" projects-url="projects"></projects-summary>
+            </landingside>
+          </landing-page>
+        </div><!-- /middle-content -->
+      </div><!-- /middle-container -->
+    </div><!-- /middle-section -->
+  </div><!-- /middle -->
+</div><!-- /wrap -->

bower.json

@@ -48,7 +48,7 @@
     "file-saver": "1.3.3",
     "bootstrap-switch": "3.3.3",
     "origin-web-common": "0.0.12",
-    "origin-web-catalog": "0.0.4"
+    "origin-web-catalog": "0.0.6"
   },
   "devDependencies": {
     "angular-mocks": "1.5.11",
@@ -63,8 +63,7 @@
     "patternfly-bootstrap-treeview": "2.1.1",
     "angular": "1.5.11",
     "kubernetes-object-describer": "1.0.4",
-    "angular-sanitize": "1.5.11",
-    "origin-web-common": "0.0.12"
+    "angular-sanitize": "1.5.11"
   },
   "overrides": {
     "angular": {

dist/scripts/scripts.js

@@ -1267,6 +1267,31 @@ id:"",
 label:"Uncategorized",
 description:""
 } ]
+} ],
+SAAS_OFFERINGS:[ {
+id:1,
+title:"Microservices Application",
+icon:"fa fa-cubes",
+url:"https://www.redhat.com/en/technologies/virtualization",
+description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
+}, {
+id:2,
+title:"Mobile Application",
+icon:"fa fa-mobile",
+url:"https://www.redhat.com/en/technologies/mobile",
+description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
+}, {
+id:3,
+title:"Integration Application",
+icon:"fa fa-plug",
+url:"https://www.redhat.com/en/technologies/cloud-computing",
+description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
+}, {
+id:4,
+title:"Business Process Application",
+icon:"fa fa-cubes",
+url:"https://www.redhat.com/en/technologies/management",
+description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
 } ]
 }), angular.module("openshiftConsole", [ "ngAnimate", "ngCookies", "ngResource", "ngRoute", "ngSanitize", "openshiftUI", "kubernetesUI", "registryUI.images", "ui.bootstrap", "patternfly.charts", "patternfly.sort", "openshiftConsoleTemplates", "ui.ace", "extension-registry", "as.sortable", "ui.select", "angular-inview", "angularMoment", "ab-base64", "openshiftCommonServices", "openshiftCommonUI", "webCatalog" ]).config([ "$routeProvider", function(a) {
 var b;
@@ -1278,10 +1303,17 @@ templateUrl:"views/new-overview.html",
 controller:"NewOverviewController",
 controllerAs:"overview",
 reloadOnSearch:!1
-}, a.when("/", {
+};
+var c, d = {
 templateUrl:"views/projects.html",
 controller:"ProjectsController"
-}).when("/create-project", {
+};
+_.get(window, "OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page") ? (c = {
+templateUrl:"views/landing-page.html",
+controller:"LandingPageController"
+}, a.when("/projects", d)) :(c = d, a.when("/projects", {
+redirectTo:"/"
+})), a.when("/", c).when("/create-project", {
 templateUrl:"views/create-project.html",
 controller:"CreateProjectController"
 }).when("/project/:project", {
@@ -1893,6 +1925,9 @@ a.path(this.projectOverviewURL(b));
 projectOverviewURL:function(a) {
 return "project/" + encodeURIComponent(a) + "/overview";
 },
+toProjectList:function() {
+a.path("projects");
+},
 quotaURL:function(a) {
 return "project/" + encodeURIComponent(a) + "/quota";
 },
@@ -4337,7 +4372,24 @@ _.set(this, "selectedTab.networking", !0), b(this);
 }
 }
 };
-}), angular.module("openshiftConsole").controller("ProjectsController", [ "$scope", "$filter", "$location", "$route", "$timeout", "AlertMessageService", "AuthService", "DataService", "KeywordService", "Logger", "ProjectsService", function(a, b, c, d, e, f, g, h, i, j, k) {
+}), angular.module("openshiftConsole").controller("LandingPageController", [ "$scope", "AuthService", "Constants", "DataService", "Navigate", function(a, b, c, d, e) {
+a.saasOfferings = c.SAAS_OFFERINGS, a.navToProject = function(a) {
+e.toProjectOverview(a.metadata.name);
+}, a.navToProjectList = function() {
+e.toProjectList();
+}, b.withUser().then(function() {
+d.list({
+group:"servicecatalog.k8s.io",
+resource:"serviceclasses"
+}, a).then(function(b) {
+a.serviceClasses = b.by("metadata.name");
+}), d.list("imagestreams", {
+namespace:"openshift"
+}).then(function(b) {
+a.imageStreams = b.by("metadata.name");
+});
+});
+} ]), angular.module("openshiftConsole").controller("ProjectsController", [ "$scope", "$filter", "$location", "$route", "$timeout", "AlertMessageService", "AuthService", "DataService", "KeywordService", "Logger", "ProjectsService", function(a, b, c, d, e, f, g, h, i, j, k) {
 var l, m, n = [], o = [];
 a.alerts = a.alerts || {}, a.loading = !0, a.showGetStarted = !1, a.canCreate = void 0, a.search = {
 text:""

dist/scripts/templates.js

@@ -10237,6 +10237,38 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   );
 
 
+  $templateCache.put('views/landing-page.html',
+    "<default-header class=\"top-header\"></default-header>\n" +
+    "<div class=\"wrap no-sidebar\">\n" +
+    "<div class=\"sidebar-left collapse navbar-collapse navbar-collapse-2\">\n" +
+    "<navbar-utility-mobile></navbar-utility-mobile>\n" +
+    "</div>\n" +
+    "<div class=\"middle landing-page\">\n" +
+    "\n" +
+    "<div class=\"middle-section\">\n" +
+    "<div class=\"middle-container\">\n" +
+    "<div class=\"middle-content\">\n" +
+    "<landing-page service-classes=\"serviceClasses\" image-streams=\"imageStreams\">\n" +
+    "<landingheader>\n" +
+    "<div class=\"build-applications-view\">\n" +
+    "<saas-list saas-offerings=\"saasOfferings\"></saas-list>\n" +
+    "</div>\n" +
+    "</landingheader>\n" +
+    "<landingbody>\n" +
+    "<services-view base-project-url=\"project\" service-classes=\"serviceClasses\" image-streams=\"imageStreams\"></services-view>\n" +
+    "</landingbody>\n" +
+    "<landingside>\n" +
+    "<projects-summary base-project-url=\"project\" projects-url=\"projects\"></projects-summary>\n" +
+    "</landingside>\n" +
+    "</landing-page>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>"
+  );
+
+
   $templateCache.put('views/logs/chromeless-build-log.html',
     "<default-header class=\"top-header\"></default-header>\n" +
     "<div class=\"sidebar-left collapse navbar-collapse navbar-collapse-2\">\n" +