Skip to content

A
apollo
Commit 4930452c by zhangle
Options

optimize portal ui

parent a0c9e539
Showing with 137 additions and 53 deletions
apollo-portal/src/main/resources/static/config.html
......@@ -101,9 +101,9 @@
<div ng-show="pageContext.clusterName == 'default'">
<strong>注意:</strong>所有不属于
<span ng-bind="envMapClusters[pageContext.env]"></span>
集群的实例会使用default集群（当前页面）的配置，属于
集群的实例会使用default集群（当前页面）的配置，属于
<span ng-bind="envMapClusters[pageContext.env]"></span>
的实例会使用对应集群的配置！
的实例会使用对应集群的配置！
</div>
<!--custom cluster tip-->
......@@ -124,7 +124,7 @@
pre-release-ns="prepareReleaseNamespace"
create-item="createItem" edit-item="editItem"
pre-delete-item="preDeleteItem" commit-change="commitChange"
pre-rollback="preRollback"></apollonspanel>
pre-rollback="preRollback" show-text="showText"></apollonspanel>
</div>
<!-- delete modal-->
......@@ -147,6 +147,25 @@
apollo-detail="'确定要回滚吗?'"
apollo-show-cancel-btn="true" apollo-confirm="rollback"></apolloconfirmdialog>
<div class="modal fade" id="showText" tabindex="-1" role="dialog">
<div class="modal-dialog" style="width: 960px;">
<div class="modal-content no-radius">
<div class="modal-header panel-primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<button class="btn close" data-clipboard-text="{{text}}" data-tooltip="tooltip"
data-placement="bottom" title="复制">
<img class="i-20" src="img/clippy.svg" style="margin-right: 5px;margin-top: -2px;">
</button>
<h4 class="modal-title">查看</h4>
</div>
<pre id="watchText" class="modal-body no-radius" style="margin-bottom: 0" ng-bind="text"></pre>
</div>
</div>
</div>
<!--create release modal-->
<form class="modal fade form-horizontal" name="releaseForm" valdr-type="Release" id="releaseModal"
......@@ -486,6 +505,8 @@
<script src="vendor/diff.min.js" type="text/javascript"></script>
<script src="vendor/clipboard.min.js" type="text/javascript"></script>
<!--valdr-->
<script src="vendor/valdr/valdr.min.js" type="text/javascript"></script>
......
apollo-portal/src/main/resources/static/config/sync.html
......@@ -71,30 +71,48 @@
<label class="control-label">需要同步的配置</label>
</div>
<div class="col-sm-10">
<div class="row text-right" style="margin-bottom: 5px; margin-right: 0px;">
按最后更新时间过滤
开始时间:<input type="date" ng-model="filterBeginTime"> 结束时间: <input type="date" ng-model="filterEndTime">
<button class="btn btn-sm btn-primary" ng-click="filter()">过滤</button>
<button class="btn btn-sm btn-default" ng-click="resetFilter()">重置</button>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td><input type="checkbox" ng-click="toggleItemsCheckedStatus()"></td>
<td>key</td>
<td>value</td>
<td>comment</td>
<td class="hover" ng-click="col='key';desc=!desc;">
Key
<span class="glyphicon glyphicon-sort"></span>
</td>
<td>Value</td>
<td class="hover" ng-click="col='dataChangeCreatedTime';desc=!desc;">
Create Time
<span class="glyphicon glyphicon-sort"></span>
</td>
<td class="hover" ng-click="col='dataChangeLastModifiedTime';desc=!desc;">
Update Time
<span class="glyphicon glyphicon-sort"></span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sourceItems">
<tr ng-repeat="item in viewItems|orderBy:col:desc">
<td width="10%"><input type="checkbox" ng-checked="item.checked"
ng-click="switchSelect(item)"></td>
<td width="20%">
<span ng-bind="item.key | limitTo: 250"></span>
<span ng-bind="item.key.length > 250 ? '...' : ''"></span>
</td>
<td width="50%">
<td width="40%">
<span ng-bind="item.value | limitTo: 250"></span>
<span ng-bind="item.value.length > 250 ? '...' : ''"></span>
</td>
<td width="20%">
<span ng-bind="item.comment | limitTo: 250"></span>
<span ng-bind="item.comment.length > 250 ? '...' :''"></span>
<td width="15%">
<span ng-bind="item.dataChangeCreatedTime | date: 'yyyy-MM-dd HH:mm:ss'"></span>
</td>
<td width="15%">
<span ng-bind="item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'"></span>
</td>
</tr>
</tbody>
......
apollo-portal/src/main/resources/static/img/clippy.svg 0 → 100644
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
</svg>
apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js
......@@ -44,6 +44,8 @@ application_module.controller("ConfigNamespaceController",
$scope.doItem = doItem;
$scope.closeTip = closeTip;
$scope.showText = showText;
$scope.releaseBtnDisabled = false;
$scope.rollbackBtnDisabled = false;
......@@ -376,6 +378,13 @@ application_module.controller("ConfigNamespaceController",
localStorage.setItem("hideTip", JSON.stringify(hideTip));
}
function showText(text) {
$scope.text = text;
$('#showText').modal('show');
}
$('.config-item-container').removeClass('hide');
new Clipboard('.btn');
}]);
apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
......@@ -16,7 +16,8 @@ directive_module.directive('apollonspanel',
createItem: '=',
editItem: '=',
preDeleteItem: '=',
commitChange: '='
commitChange: '=',
showText: '='
},
link: function (scope, element, attrs) {
......@@ -41,7 +42,7 @@ directive_module.directive('apollonspanel',
scope.toggleItemSearchInput = toggleItemSearchInput;
scope.searchItems = searchItems;
scope.loadCommitHistory = loadCommitHistory;
scope.toggleTextEditStatus = toggleTextEditStatus;
......@@ -65,7 +66,7 @@ directive_module.directive('apollonspanel',
function initNamespace(namespace, viewType) {
namespace.showSearchInput = false;
namespace.viewItems = namespace.items;
namespace.viewItems = namespace.items;
namespace.isPropertiesFormat = namespace.format == 'properties';
namespace.isTextEditing = false;
namespace.instanceViewType = namespace_instance_view_type.LATEST_RELEASE;
......@@ -221,10 +222,11 @@ directive_module.directive('apollonspanel',
namespace.latestRelease.id,
namespace.latestReleaseInstancesPage)
.then(function (result) {
if (result && result.content.length){
if (result && result.content.length) {
namespace.latestReleaseInstancesPage++;
result.content.forEach(function (instance) {
namespace.latestReleaseInstances.content.push(instance);
namespace.latestReleaseInstances.content.push(
instance);
})
}
......@@ -271,9 +273,9 @@ directive_module.directive('apollonspanel',
scope.env,
scope.cluster,
namespace.baseInfo.namespaceName,
namespace.allInstancesPage)
namespace.allInstancesPage)
.then(function (result) {
if (result && result.content.length){
if (result && result.content.length) {
namespace.allInstancesPage++;
result.content.forEach(function (instance) {
namespace.allInstances.push(instance);
......@@ -390,7 +392,6 @@ directive_module.directive('apollonspanel',
return result;
}
function toggleItemSearchInput(namespace) {
namespace.showSearchInput = !namespace.showSearchInput;
}
......@@ -400,8 +401,8 @@ directive_module.directive('apollonspanel',
var items = [];
namespace.items.forEach(function (item) {
var key = item.item.key;
if (key && key.toLowerCase().indexOf(searchKey) >= 0){
items.push(item);
if (key && key.toLowerCase().indexOf(searchKey) >= 0) {
items.push(item);
}
});
namespace.viewItems = items;
......@@ -416,6 +417,7 @@ directive_module.directive('apollonspanel',
return true;
}
}
}
});
apollo-portal/src/main/resources/static/styles/common-style.css
......@@ -5,8 +5,8 @@ html, body {
body {
min-width: 960px;
color: #797979;
padding: 0px !important;
margin: 0px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 13px;
background: #f1f2f7;
font-family: 'Open Sans', sans-serif;
......@@ -25,12 +25,25 @@ p, td, span {
word-break: break-all;
}
table {
text-align: center;
}
.no-radius {
border-radius: 0px;
border-radius: 0;
}
.cursor-pointer{
cursor: pointer;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.hover:hover{
background: #f5f5f5;
cursor: pointer
}
.highlight {
......@@ -38,7 +51,7 @@ table {
}
.hide-border-top {
border-top: 0px;
border-top: 0;
}
.logo {
......@@ -242,7 +255,7 @@ table th {
}
.config-item-container .panel {
border-radius: 0px;
border-radius: 0;
}
.config-item-container .panel-heading b {
......@@ -251,7 +264,7 @@ table th {
.config-item-container .form-control[disabled] {
background: #ffffff;
border: 0px;
border: 0;
}
.config-item-container .second-panel-heading .ns_btn {
......@@ -297,9 +310,9 @@ table th {
}
.namespace-attribute-panel {
margin-left: 0px;
margin-left: 0;
color: #fff;
border-top: 0px;
border-top: 0;
background: #f1f2f7;
}
......@@ -310,7 +323,7 @@ table th {
}
.second-panel-heading .nav-tabs {
border-bottom: 0px;
border-bottom: 0;
}
.namespace-view-table td img {
......@@ -419,7 +432,7 @@ table th {
width: 350px;
height: 200px;
position: absolute;
margin-left: 0px;
margin-left: 0;
cursor: pointer;
background: #ffffff;
border: 1px solid #ddd;
......
apollo-portal/src/main/resources/static/vendor/jquery.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
apollo-portal/src/main/resources/static/vendor/lodash.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
apollo-portal/src/main/resources/static/views/component/confirm-dialog.html
......@@ -9,7 +9,7 @@
<div class="modal-body">
{{detail}}
</div>
<div class="modal-footer">
<div class="modal-footer" ng-show="showFooter">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-show="showCancelBtn">取消</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"
ng-click="confirm()">
......
apollo-portal/src/main/resources/static/views/component/namespace-panel.html
......@@ -148,14 +148,19 @@
<!--table view-->
<div class="namespace-view-table" ng-show="namespace.viewType == 'table'">
<div class="col-md-8 col-lg-offset-2" style="padding-top: 15px; padding-bottom: 10px" ng-show="namespace.showSearchInput">
<input type="text" class="form-control" placeholder="输入key过滤" ng-model="namespace.searchKey" ng-change="searchItems(namespace)">
<div class="col-md-8 col-lg-offset-2" style="padding-top: 15px; padding-bottom: 10px"
ng-show="namespace.showSearchInput">
<input type="text" class="form-control" placeholder="输入key过滤" ng-model="namespace.searchKey"
ng-change="searchItems(namespace)">
</div>
<table class="table table-bordered table-striped text-center table-hover">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
Key
<th class="hover" title="排序"
ng-click="col='item.key';desc=!desc;">
Key&nbsp;
<span class="glyphicon glyphicon-sort"></span>
</th>
<th>
Value
......@@ -163,11 +168,16 @@
<th>
备注
</th>
<th>
<th class="hover" title="排序"
ng-click="col='item.dataChangeLastModifiedBy';desc=!desc;">
最后修改人
<span class="glyphicon glyphicon-sort"></span>
</th>
<th>
<th class="hover" title="排序"
ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
最后修改时间
<span class="glyphicon glyphicon-sort"></span>
</th>
<th>
操作
......@@ -176,17 +186,17 @@
</thead>
<tbody>
<tr ng-repeat="config in namespace.viewItems" ng-class="{warning:config.isModified}"
<tr ng-repeat="config in namespace.viewItems |orderBy:col:desc" ng-class="{warning:config.isModified}"
ng-if="config.item.key && !config.isDeleted">
<td width="20%" title="{{config.item.key}}">
<td width="20%">
<span ng-bind="config.item.key | limitTo: 250"></span>
<span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
</td>
<td width="25%" title="{{config.item.value}}">
<td width="30%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.value)">
<span ng-bind="config.item.value | limitTo: 250"></span>
<span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
</td>
<td width="20%" title="{{config.item.comment}}">
<td width="15%" title="{{config.item.comment}}">
<span ng-bind="config.item.comment | limitTo: 250"></span>
<span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
</td>
......@@ -196,7 +206,7 @@
ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
</td>
<td width="10%">
<td width="10%" class="text-center">
<img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
ng-click="editItem(namespace, config.item)"
ng-show="namespace.hasModifyPermission">
......@@ -259,7 +269,7 @@
</td>
<td width="30%">
</td>
<td width="30%" title="{{item.value}}">
<td width="30%" class="cursor-pointer" title="{{item.value}}" ng-click="showText(item.value)">
<span ng-bind="item.value | limitTo: 250"></span>
<span ng-bind="item.value.length > 250 ? '...': ''"></span>
</td>
......@@ -276,11 +286,11 @@
<span ng-bind="item.newItem.key | limitTo: 250"></span>
<span ng-bind="item.newItem.key.length > 250 ? '...' :''"></span>
</td>
<td width="30%" title="{{item.oldItem.value}}">
<td width="30%" class="cursor-pointer" title="{{item.oldItem.value}}" ng-click="showText(item.oldItem.value)">
<span ng-bind="item.oldItem.value | limitTo: 250"></span>
<span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
</td>
<td width="30%" title="{{item.newItem.value}}">
<td width="30%" class="cursor-pointer" title="{{item.newItem.value}}" ng-click="showText(item.newItem.value)">
<span ng-bind="item.newItem.value | limitTo: 250"></span>
<span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span>
</td>
......@@ -397,7 +407,8 @@
</tr>
</tbody>
</table>
<div class="row text-center" ng-show="namespace.latestReleaseInstances.content.length < namespace.latestReleaseInstances.total">
<div class="row text-center"
ng-show="namespace.latestReleaseInstances.content.length < namespace.latestReleaseInstances.total">
<button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>
</div>
......@@ -443,7 +454,7 @@
</div>
</div>
<!--all instances-->
<!--all instances-->
<div class="panel-body" ng-show="namespace.instanceViewType == 'all'">
<div class="panel-default" ng-if="namespace.instancesCount > 0">
<table class="table table-bordered table-striped" ng-if="namespace.allInstances">
......@@ -474,6 +485,5 @@
</div>
</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