[WIP] Add catalog to web console

Author: spadgett

app/index.html

@@ -210,6 +210,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/services/fullscreen.js"></script>
         <script src="scripts/services/apps.js"></script>
         <script src="scripts/services/resourceAlerts.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

@@ -31,7 +31,8 @@ angular
     'angularMoment',
     'ab-base64',
     'openshiftCommonServices',
-    'openshiftCommonUI'
+    'openshiftCommonUI',
+    'webCatalog'
   ])
   .config(function ($routeProvider) {
     var overviewRoute;
@@ -51,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

@@ -435,5 +435,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,27 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .controller('LandingPageController', function ($scope, Constants, DataService, Navigate) {
+
+    $scope.saasOfferingsTitle = "What Do You Want to Build?";
+    $scope.saasOfferings = Constants.SAAS_OFFERINGS;
+
+    $scope.navToProject = function(project) {
+      Navigate.toProjectOverview(project.metadata.name);
+    };
+
+    $scope.navToProjectList = function() {
+      Navigate.toProjectList();
+    };
+
+    DataService.list({
+      group: 'servicecatalog.k8s.io',
+      resource: 'serviceclasses'
+    }, $scope).then(function(serviceClasses) {
+      $scope.serviceClasses = serviceClasses.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/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 surface-shaded">
+    <!-- Middle section -->
+    <div class="middle-section">
+      <div class="middle-container">
+        <div class="middle-content">
+          <landing-page search-placeholder="Search Catalog">
+            <landingheader>
+              <div class="build-applications-view">
+                <saas-list saas-title="saasOfferingsTitle" saas-offerings="saasOfferings"></saas-list>
+              </div>
+            </landingheader>
+            <landingbody>
+              <services-view service-classes="serviceClasses" image-streams="imageStreams"></services-view>
+            </landingbody>
+            <landingside>
+              <projects-summary project-select="navToProject" show-projects="navToProjectList"></projects-summary>
+            </landingside>
+          </landing-page>
+        </div><!-- /middle-content -->
+      </div><!-- /middle-container -->
+    </div><!-- /middle-section -->
+  </div><!-- /middle -->
+</div><!-- /wrap -->