AMBARI-7322. Admin View: update landing page content.(xiwang)

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js

@@ -18,7 +18,7 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('MainCtrl',['$scope', 'Auth', 'uiAlert', '$modal', function($scope, Auth, uiAlert, $modal) {
+.controller('MainCtrl',['$scope', 'Auth', 'uiAlert', '$modal', 'Cluster', function($scope, Auth, uiAlert, $modal, Cluster) {
   $scope.signOut = function() {
     Auth.signout().then(function() {
      window.location.pathname = ''; // Change location hard, because Angular works only with relative urls
@@ -39,4 +39,15 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.currentUser = Auth.getCurrentUser();
+
+  $scope.cluster = null;
+  $scope.isLoaded = null;
+
+  Cluster.getStatus().then(function(cluster) {
+    $scope.cluster = cluster;
+    $scope.isLoaded = true;
+  }).catch(function(data) {
+      uiAlert.danger(data.status, data.message);
+  });
+
 }]);

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -211,12 +211,49 @@
 }
 .mainpage .panel-body{
   padding: 20px;
-  height: 560px;
+  height: 620px;
 }
 .mainpage h1{
   font-size: 24px;
   margin-top: 10px;
 }
+.mainpage .panel-body #main-operations-boxes {
+  padding: 10px;
+}
+.mainpage .panel-body #main-operations-boxes .thumbnail{
+  display: block;
+  height: 230px;
+  padding: 8px;
+  background-color: #eeeeee;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 10px;
+  border: none;
+  border-radius: 0px;
+}
+.mainpage .panel-body #main-operations-boxes .thumbnail .title,
+.mainpage .panel-body #main-operations-boxes .thumbnail .description,
+.mainpage .panel-body #main-operations-boxes .thumbnail .buttons {
+  text-align: center;
+  line-height: 1.5;
+}
+.mainpage .panel-body #main-operations-boxes .thumbnail .buttons .btn{
+  width: 200px;
+  margin: 5px;
+}
+.mainpage .panel-body #main-operations-boxes .thumbnail .buttons .btn.userslist-button,
+.mainpage .panel-body #main-operations-boxes .thumbnail .buttons .btn.groupslist-button {
+  width: 100px;
+}
+.mainpage .panel-body #main-operations-boxes .thumbnail .glyphicon {
+  font-size: 50px;
+  text-align: center;
+  display: block;
+  line-height: 1.5;
+}
+.mainpage .panel-body #main-operations-boxes .col-sm-5 {
+  width: 43.5%;
+}
 
 .views-list-table .panel{
   border-radius: 0;
@@ -488,6 +525,9 @@
   .container{
     width: 1170px;
   }
+  .mainpage .panel-body #main-operations-boxes .col-sm-5 {
+    width: 44%;
+  }
 }
 
 ul.nav li > a{

ambari-admin/src/main/resources/ui/admin-web/app/views/main.html

@@ -18,7 +18,44 @@
 <div class="panel panel-default mainpage">
   <div class="panel-body">
     <h1>Welcome to Apache Ambari</h1>
-    <p>Use the controls to the left to provision a cluster, manage who can access the cluster, and customize views for Ambari users.</p>
+    <div ng-if="isLoaded" id="main-operations-boxes" class="row thumbnails">
+      <p ng-hide="cluster">Provision a cluster, manage who can access the cluster, and customize views for Ambari users.</p>
+      <p ng-show="cluster">Monitor your cluster resources, manage who can access the cluster, and customize views for Ambari users.</p>
+        <!--Clusters-->
+      <div ng-show="cluster" class="col-sm-11 thumbnail">
+        <h4 class="title">Operate Your Cluster</h4>
+        <div class="description">Manage the configuration of your cluster and monitor the health of your services</div>
+        <div class="glyphicon glyphicon-cloud"></div>
+        <div class="buttons">
+          <span ng-class="{active: isActive('clusters.manageAccess')}"><a href="#/clusters/{{cluster.Clusters.cluster_name}}/manageAccess" class="btn btn-primary permission-button">Manage Permissions</a></span>
+          <span><a href="/#/main/dashboard" class="btn btn-primary go-dashboard-button" target="{{cluster.Clusters.cluster_name}}">Go to Dashboard</a></span>
+        </div>
+      </div>
+      <div ng-hide="cluster" class="col-sm-11 thumbnail">
+        <h4 class="title">Create a Cluster</h4>
+        <div class="description">Use the Install Wizard to select services and configure your cluster</div>
+        <div class="glyphicon glyphicon-cloud"></div>
+        <div class="buttons"> <a href="/#/installer/step0" class="btn btn-primary create-cluster-button">Install Cluster</a></div>
+      </div>
+
+        <!--Manage Users and groups-->
+      <div class="col-sm-5 thumbnail">
+        <h4 class="title">Manage Users + Groups</h4>
+        <div class="description">Manage the users and groups that can access Ambari</div>
+        <div class="glyphicon glyphicon-user"></div>
+        <div class="buttons">
+          <span ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="btn btn-primary userslist-button">Users</link-to></span>
+          <span ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="btn btn-primary groupslist-button">Groups</link-to></span>
+        </div>
+      </div>
+
+        <!--Deploy Views-->
+      <div class="col-sm-5 thumbnail">
+        <h4 class="title">Deploy Views</h4>
+        <div class="description">Create view instances and grant permissions</div>
+        <div class="glyphicon glyphicon-th"></div>
+        <div ng-class="{active: isActive('views.list')}" class="buttons"><link-to route="views.list" class="btn btn-primary viewslist-button">Views</link-to></div>
+        </div>
+      </div>
   </div>
-    
 </div>