Skip to content

A
apollo
Commit 8c54b3a7 by lepdou
Options

format json & config.html adapt small screen

parent 3ddf3e6b
Showing with 133 additions and 24 deletions
apollo-portal/src/main/resources/static/config.html
......@@ -16,12 +16,8 @@
<apollonav></apollonav>
<div id="config-info" class="container-fluid apollo-container app">
<!--具体配置信息-->
<div class="config-info-container row">
<div id="config-info" class="apollo-container app">
<div ng-controller="ConfigBaseInfoController">
<div class="J_appNotFound hidden row text-center app-not-found" ng-show="notFoundApp">
<img src="img/404.png">
<br>
......@@ -30,7 +26,12 @@
</p>
</div>
<div class="J_appFound hidden col-md-2 col-xs-2 col-sm-2" ng-show="!notFoundApp">
<div class="side-bar"
ng-class="{'position-absolute': viewMode == 1, 'position-fixed': viewMode == 2}">
<div class="J_appFound hidden"
ng-show="!notFoundApp && (viewMode == 1 || (viewMode == 2 && showSideBar))">
<!--env list-->
<section class="panel">
<header class="panel-heading">
<img src="img/env.png" class="i-20">&nbsp;环境列表
......@@ -98,6 +99,8 @@
</div>
</section>
<!--operation entrance-->
<section>
<a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()">
<div class="row icon-text icon-plus-orange">
<p class="btn-title ng-binding">补缺环境</p>
......@@ -107,36 +110,43 @@
<apolloentrance apollo-title="'添加集群'" apollo-img-src="'plus-orange'"
apollo-href="'cluster.html?#/appid=' + pageContext.appId"
ng-show="hasCreateClusterPermission"></apolloentrance>
<span class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
<div class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
ng-show="!hasCreateClusterPermission">
<div class="row icon-text icon-plus-orange">
<p class="btn-title">添加集群</p>
</div>
</span>
</div>
<apolloentrance apollo-title="'添加Namespace'" apollo-img-src="'plus-orange'"
apollo-href="'namespace.html?#/appid=' + pageContext.appId"
ng-show="hasCreateNamespacePermission"></apolloentrance>
<span class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
<div class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
ng-show="!hasCreateNamespacePermission">
<div class="row icon-text icon-plus-orange">
<p class="btn-title">添加Namespace</p>
</div>
</span>
</div>
<apolloentrance apollo-title="'项目权限'" apollo-img-src="'user-manage'"
apollo-href="'/app/role.html?#/appid=' + pageContext.appId"
ng-show="hasAssignUserPermission"></apolloentrance>
</section>
</div>
</div>
</div>
<!--具体配置信息-->
<!--namespaces-->
<div class="col-md-10 col-xs-10 col-sm-10 config-item-container hide"
<div class="config-item-container hide"
ng-class="{'view-mode-1': viewMode == 1, 'view-mode-2': viewMode == 2}"
ng-controller="ConfigNamespaceController">
<h4 class="text-center" ng-show="viewMode == 2">
当前操作环境:{{pageContext.env}}， 集群:{{pageContext.clusterName}}
</h4>
<div class="alert alert-info alert-dismissible" role="alert"
ng-show="(!hideTip || !hideTip[pageContext.appId][pageContext.clusterName]) && envMapClusters[pageContext.env]">
......@@ -167,7 +177,9 @@
<div class="alert alert-info"
ng-if="hasNotPublishNamespace">
<p><b>注意:</b>以下环境/集群有未发布的配置，客户端获取不到未发布的配置，请及时发布。</p>
<p><mark ng-bind="namespacePublishInfo.join('，')"></mark></p>
<p>
<mark ng-bind="namespacePublishInfo.join('，')"></mark>
</p>
</div>
<apollonspanel ng-repeat="namespace in namespaces"
......@@ -294,7 +306,6 @@
</div>
</div>
</div>
</div>
</div>
......
apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js
......@@ -208,6 +208,7 @@ function ConfigBaseInfoController($rootScope, $scope, $location, toastr, EventMa
}));
EventManager.emit(EventManager.EventType.REFRESH_NAMESPACE);
$rootScope.showSideBar = false;
}
});
......@@ -298,5 +299,30 @@ function ConfigBaseInfoController($rootScope, $scope, $location, toastr, EventMa
};
}
var VIEW_MODE_SWITCH_WIDTH = 1156;
if (window.innerWidth <= VIEW_MODE_SWITCH_WIDTH) {
$rootScope.viewMode = 2;
$rootScope.showSideBar = false;
} else {
$rootScope.viewMode = 1;
}
$rootScope.adaptScreenSize = function () {
if (window.innerWidth <= VIEW_MODE_SWITCH_WIDTH) {
$rootScope.viewMode = 2;
} else {
$rootScope.viewMode = 1;
$rootScope.showSideBar = false;
}
};
$(window).resize(function(){
$scope.$apply(function(){
$rootScope.adaptScreenSize();
});
});
}
apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js
......@@ -313,6 +313,7 @@ function controller($rootScope, $scope, toastr, AppUtil, EventManager, ConfigSer
}
new Clipboard('.clipboard');
}
apollo-portal/src/main/resources/static/scripts/directive/directive.js
......@@ -8,6 +8,7 @@ directive_module.directive('apollonav',
replace: true,
link: function (scope, element, attrs) {
scope.sourceApps = [];
scope.copyedApps = [];
......
apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
......@@ -416,6 +416,8 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
namespace.baseInfo.clusterName,
namespace.baseInfo.namespaceName)
.then(function (result) {
namespace.isLatestReleaseLoaded = true;
if (!result) {
namespace.latestReleaseInstances = {};
namespace.latestReleaseInstances.total = 0;
......@@ -430,8 +432,6 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
namespace.latestReleaseInstances = result;
namespace.latestReleaseInstancesPage++;
})
namespace.isLatestReleaseLoaded = true;
});
} else {
InstanceService.findInstancesByRelease(scope.env,
......
apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
......@@ -10,7 +10,23 @@ function showTextModalDirective() {
text: '='
},
link: function (scope) {
scope.$watch('text', init);
function init() {
scope.jsonObject = undefined;
if (isJsonText(scope.text)) {
scope.jsonObject = JSON.parse(scope.text);
}
}
function isJsonText(text) {
try {
JSON.parse(text);
} catch (e) {
return false;
}
return true;
}
}
}
}
......
apollo-portal/src/main/resources/static/styles/common-style.css
......@@ -207,6 +207,38 @@ table th {
margin-top: 20px;
}
.side-bar {
position: absolute;
width: 195px;
top: 85px;
left: 15px;
margin-bottom: 25px;
background: #f1f2f7;
z-index: 2;
}
.position-absolute {
position: absolute;
}
.position-fix {
position: fixed;
}
.view-mode-1 {
margin-left: 235px;
padding-right: 15px;
}
.view-mode-2 {
padding: 0 15px;
}
.side-bar-switch {
padding: 10px 10px;
margin-right: 30px;
}
.node-treeview {
color: #797979;
}
......@@ -241,7 +273,6 @@ table th {
}
.panel-heading .header-buttons {
/*float: right;*/
min-width: 405px;
}
......@@ -744,3 +775,4 @@ table th {
.search-focus {
background: #fff;
}
apollo-portal/src/main/resources/static/views/common/nav.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img class="navbar-brand side-bar-switch cursor-pointer" src="../../img/show_sidebar.png"
onMouseOver="this.style.background='#f1f2f7'"
onMouseOut="this.style.background='#fff'"
data-tooltip="tooltip" data-placement="bottom" title="显示导航栏"
ng-show="viewMode == 2 && !showSideBar"
ng-click="showSideBar = !showSideBar">
<img class="navbar-brand side-bar-switch cursor-pointer" src="../../img/hide_sidebar.png"
onMouseOver="this.style.background='#f1f2f7'"
onMouseOut="this.style.background='#fff'"
data-tooltip="tooltip" data-placement="bottom" title="隐藏导航栏"
ng-show="viewMode == 2 && showSideBar"
ng-click="showSideBar = !showSideBar">
<a class="navbar-brand logo" href="/">
<b>Apollo 配置中心</b>
</a>
......@@ -18,7 +29,8 @@
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"><span class="glyphicon glyphicon-user"></span>{{userName}} <span class="caret"></span></a>
aria-expanded="false"><span class="glyphicon glyphicon-user"></span>{{userName}} <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/user/logout">退出</a></li>
</ul>
......@@ -27,7 +39,8 @@
<div class="navbar-form navbar-right form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control search-input" placeholder="搜索项目(项目ID、项目名)" style="width: 350px"
<input type="text" class="form-control search-input" placeholder="搜索项目(项目ID、项目名)"
style="width: 350px"
ng-model="searchKey" ng-change="changeSearchKey()" ng-focus="changeSearchKey()">
<div class="row app-list" ng-show="shouldShowAppList">
......
apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
......@@ -736,8 +736,12 @@
<!--instance view-->
<div class="panel panel-default instance-view" ng-show="namespace.viewType == 'instance'">
<div class="panel-heading">
<div class="row text-right" style="padding-right: 15px;">
<div class="row">
<div class="col-md-5">
<small>实例说明:只展示最近一天访问过Apollo的实例</small>
</div>
<div class="col-md-7 text-right">
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default"
ng-class="{'btn-primary':namespace.instanceViewType == 'latest_release'}"
......@@ -762,6 +766,8 @@
<img src="../../img/refresh.png"/>
</button>
</div>
</div>
</div>
<!--latest release instances-->
......
apollo-portal/src/main/resources/static/views/component/show-text-modal.html
......@@ -7,8 +7,11 @@
<h4 class="modal-title">查看</h4>
</div>
<pre id="watchText" class="modal-body no-radius" style="margin-bottom: 0"
ng-bind="text">
<pre class="modal-body no-radius" style="margin-bottom: 0"
ng-show="!jsonObject" ng-bind="text">
</pre>
<pre class="modal-body no-radius" style="margin-bottom: 0"
ng-show="jsonObject" ng-bind="jsonObject | json:4">
</pre>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment