portal index page

2fb37008 · lepdou · 5b6e8bc8 · 2fb37008 · 2fb37008 · 2fb37008
7 changed file
--- a/apollo-portal/src/main/java/com/ctrip/apollo/portal/controller/AppController.java
+++ b/apollo-portal/src/main/java/com/ctrip/apollo/portal/controller/AppController.java
@@ -8,11 +8,14 @@ import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;

 import com.ctrip.apollo.core.dto.AppDTO;
+import com.ctrip.apollo.core.enums.Env;
 import com.ctrip.apollo.core.exception.BadRequestException;
 import com.ctrip.apollo.core.utils.StringUtils;
 import com.ctrip.apollo.portal.entity.ClusterNavTree;
 import com.ctrip.apollo.portal.service.AppService;

+import java.util.List;
+
 @RestController
 @RequestMapping("/apps")
 public class AppController {
@@ -20,6 +23,12 @@ public class AppController {
  @Autowired
  private AppService appService;

+
+  @RequestMapping("/env/{env}")
+  public List<AppDTO> findAllApp(@PathVariable String env){
+    return appService.findAll(Env.valueOf(env));
+  }
+
  @RequestMapping("/{appId}/navtree")
  public ClusterNavTree nav(@PathVariable String appId) {
    if (StringUtils.isEmpty(appId)) {

--- a/apollo-portal/src/main/java/com/ctrip/apollo/portal/service/AppService.java
+++ b/apollo-portal/src/main/java/com/ctrip/apollo/portal/service/AppService.java
@@ -29,6 +29,10 @@ public class AppService {
  @Autowired
  private AdminServiceAPI.AppAPI appAPI;

+  public List<AppDTO> findAll(Env env){
+    return appAPI.getApps(env);
+  }
+
  public ClusterNavTree buildClusterNavTree(String appId) {
    ClusterNavTree tree = new ClusterNavTree();


--- a/apollo-portal/src/main/resources/static/index.html
+++ b/apollo-portal/src/main/resources/static/index.html
 <!doctype html>
-<html ng-app="create_app">
+<html ng-app="index">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- styles -->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/angular/angular-toastr-1.4.1.min.css">
    <link rel="stylesheet" type="text/css" media='all' href="vendor/angular/loading-bar.min.css">
+    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/common-style.css">
    <title>apollo</title>
 </head>

-<body>
+<body ng-controller="IndexController">

-<div ng-include="'views/common/nav.html'"></div>
+<!--<div ng-include="'views/common/nav.html'"></div>-->

+<header class="site-header jumbotron">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12"><h1>Apollo</h1>
+                <p>携程统一配置中心<br><span class="package-amount">共收录了 <strong>8888</strong> 个项目</span></p>
+                <form class="" role="search">
+                    <div class="form-group"><input type="text" class="form-control search clearable"
+                                                   placeholder="搜索App, 例如:900088" ng-model="searchKey" ng-change="search()"></div>
+                </form>
+            </div>
+
+        </div>
+    </div>
+</header>
 <div class="container-fluid apollo-container">
+    <div class="list-group apps">
+        <a class="package list-group-item" target="_blank" href="/views/app.html?#/appid={{app.appId}}" ng-repeat="app in apps ">
+            <div class="row">
+                <div class="col-md-3"><h4 class="apps-name">{{app.appId}}</h4></div>
+                <div class="col-md-7 hidden-xs">
+                    <p class="apps-description">{{app.name}}</p>
+                </div>
+                <div class="col-md-2">
+                    <p class="apps-description">
+                        {{app.ownerName}}
+                        <br>
+                        {{app.ownerEmail}}
+                    </p>

-    <div class="row">
-        <div class="col-lg-12 text-center">
-            <h1>welcome to apollo!~~</h1>
+                </div>
+                <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12"><span><i
+                        class="glyphicon glyphicon-fire"></i> 92793</span>
+                </div>
+            </div>
+        </a>
+        <!--<a href="/bootstrap/" class="package list-group-item" data-library-name="bootstrap" target="_blank"-->
+           <!--onclick="_hmt.push(['_trackEvent', 'packages', 'click', 'bootstrap'])" style="display: block;">-->
+            <!--<div class="row">-->
+                <!--<div class="col-md-3"><h4 class="apps-name">{{app.appId}}</h4></div>-->
+                <!--<div class="col-md-7 hidden-xs">-->
+                    <!--<p class="apps-description">{{app.name}}</p>-->
+                <!--</div>-->
+                <!--<div class="col-md-2">-->
+                    <!--<p class="apps-description">-->
+                        <!--{{app.ownerName}}-->
+                    <!--<br>-->
+                        <!--{{app.ownerEmail}}-->
+                    <!--</p>-->

-            <img src="img/dolphin.jpg" style="width: 100px; height: 130px;"/>
-            <a class="btn btn-primary btn-lg" href="views/create-app.html" role="button">create app</a>
-        </div>
+                <!--</div>-->
+                <!--<div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12"><span><i-->
+                        <!--class="glyphicon glyphicon-fire"></i> 92793</span>-->
+                <!--</div>-->
+            <!--</div>-->
+        <!--</a>-->
+        <!--<a href="/bootstrap/" class="package list-group-item" data-library-name="bootstrap" target="_blank"-->
+           <!--onclick="_hmt.push(['_trackEvent', 'packages', 'click', 'bootstrap'])" style="display: block;">-->
+            <!--<div class="row">-->
+                <!--<div class="col-md-3"><h4 class="package-name">2222</h4></div>-->
+                <!--<div class="col-md-9 hidden-xs"><p class="package-description">The most popular front-end framework for-->
+                    <!--developing responsive, mobile first projects on the web.</p></div>-->
+                <!--<div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12"><span><i class="fa fa-star"></i> 92793</span>-->
+                <!--</div>-->
+            <!--</div>-->
+        <!--</a>-->
    </div>
 </div>

@@ -30,7 +87,6 @@

 <!--angular-->
 <script src="vendor/angular/angular.min.js"></script>
-<script src="vendor/angular/angular-route.min.js"></script>
 <script src="vendor/angular/angular-resource.min.js"></script>
 <script src="vendor/angular/angular-toastr-1.4.1.tpls.min.js"></script>
 <script src="vendor/angular/loading-bar.min.js"></script>
@@ -43,6 +99,6 @@

 <script type="application/javascript" src="scripts/app.js"></script>
 <script type="application/javascript" src="scripts/services/AppService.js"></script>
-<script type="application/javascript" src="scripts/controller/CreateAppController.js"></script>
+<script type="application/javascript" src="scripts/controller/IndexController.js"></script>
 </body>
 </html>
--- a/apollo-portal/src/main/resources/static/scripts/app.js
+++ b/apollo-portal/src/main/resources/static/scripts/app.js
@@ -2,8 +2,10 @@
 var appService = angular.module('app.service', ['ngResource']);

 /** page module 定义*/
+// 首页
+var index_module = angular.module('index', ['toastr', 'app.service', 'angular-loading-bar']);
 //项目主页
-var application_module = angular.module('application', ['ngResource','ui.router', 'app.service', 'toastr', 'angular-loading-bar']);
+var application_module = angular.module('application', ['app.service', 'toastr', 'angular-loading-bar']);
 //创建项目页面
 var create_app_module = angular.module('create_app', ['ngResource', 'toastr', 'app.service', 'angular-loading-bar']);


--- a/apollo-portal/src/main/resources/static/scripts/controller/IndexController.js
+++ b/apollo-portal/src/main/resources/static/scripts/controller/IndexController.js
+index_module.controller('IndexController', ['$scope', '$window', 'toastr', 'AppService',
+        function ($scope, $window, toastr, AppService) {
+
+                $scope.env = 'LOCAL';
+
+                var apps = [];
+                AppService.find_all_app($scope.env).then(function (result) {
+                        apps = result;
+                        $scope.apps = apps;
+                });
+
+                $scope.search = function () {
+                        var key = $scope.searchKey;
+                        if (key == '') {
+                                $scope.apps = apps;
+                                return;
+                        }
+                        var result = [];
+                        apps.forEach(function (item) {
+                                if (item.appId.indexOf(key) >= 0 || item.name.indexOf(key) >= 0) {
+                                        result.push(item);
+                                }
+                        });
+
+                        $scope.apps = result;
+                };
+
+        }]);
--- a/apollo-portal/src/main/resources/static/scripts/services/AppService.js
+++ b/apollo-portal/src/main/resources/static/scripts/services/AppService.js
 appService.service('AppService', ['$resource', '$q', function ($resource, $q) {
    var app_resource = $resource('/apps/:appId', {}, {
+        find_all_app:{
+            method: 'GET',
+            isArray: true,
+            url:'/apps/env/:env'
+        },
        load_navtree:{
            methode: 'GET',
            isArray:false,
@@ -15,7 +20,18 @@ appService.service('AppService', ['$resource', '$q', function ($resource, $q) {
        }
    });
    return {
-        load_nav_tree: function loadNavTree(appId){
+        find_all_app: function (env) {
+            var d = $q.defer();
+            app_resource.find_all_app({
+                                          env: env
+                                      }, function (result) {
+                d.resolve(result);
+            }, function (result) {
+                d.reject(result);
+            });
+            return d.promise;
+        },
+        load_nav_tree: function (appId){
            var d = $q.defer();
            app_resource.load_navtree({
                appId: appId
@@ -26,7 +42,7 @@ appService.service('AppService', ['$resource', '$q', function ($resource, $q) {
            });
            return d.promise;
        },
-        add: function add(app) {
+        add: function (app) {
            var d = $q.defer();
            app_resource.add_app({}, app, function (result) {
                d.resolve(result);
@@ -35,7 +51,7 @@ appService.service('AppService', ['$resource', '$q', function ($resource, $q) {
            });
            return d.promise;
        },
-        load: function load(appId) {
+        load: function (appId) {
            var d = $q.defer();
            app_resource.load_app({
                appId: appId

--- a/apollo-portal/src/main/resources/static/styles/common-style.css
+++ b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -39,6 +39,36 @@ table th {
    text-align: center;
 }

+/*首页*/
+.site-header{
+    position: relative;
+    text-align: center;
+    background-color: #27AE60;
+    color: #fff;
+    margin-bottom: 0;
+}
+
+.site-header .search{
+    border: 2px solid #27AE60;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-size: 16px;
+    padding: 13px 30px;
+    border-radius: 0;
+    height: auto;
+    text-align: center;
+}
+
+.list-group{
+    margin-top: 20px;
+}
+
+.apps .apps-description{
+    color: gray;
+    font-family: "Apple Color Emoji";
+    font-size: 16px;
+}
+
 .app {
    background-color: #f5f5f5;
 }