AMBARI-7322. Admin View: update landing page content.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/4770717d Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/4770717d Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/4770717d Branch: refs/heads/branch-alerts-dev Commit: 4770717db7e11d904aa59c7acbdaead2060720d4 Parents: f92c28e Author: Xi Wang <xiw...@apache.org> Authored: Mon Sep 15 18:18:55 2014 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Tue Sep 16 10:43:02 2014 -0700 ---------------------------------------------------------------------- .../app/scripts/controllers/mainCtrl.js | 13 +++++- .../resources/ui/admin-web/app/styles/main.css | 42 +++++++++++++++++++- .../resources/ui/admin-web/app/views/main.html | 41 ++++++++++++++++++- 3 files changed, 92 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/4770717d/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js index 6f68831..797ecb2 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js +++ b/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); + }); + }]); http://git-wip-us.apache.org/repos/asf/ambari/blob/4770717d/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css index 3d5628a..9b41f63 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css +++ b/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{ http://git-wip-us.apache.org/repos/asf/ambari/blob/4770717d/ambari-admin/src/main/resources/ui/admin-web/app/views/main.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/main.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/main.html index a66eaf4..7785d2f 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/main.html +++ b/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> \ No newline at end of file
