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 @@ ...@@ -101,9 +101,9 @@
<div ng-show="pageContext.clusterName == 'default'"> <div ng-show="pageContext.clusterName == 'default'">
<strong>注意:</strong>所有不属于 <strong>注意:</strong>所有不属于
<span ng-bind="envMapClusters[pageContext.env]"></span> <span ng-bind="envMapClusters[pageContext.env]"></span>
集群的实例会使用default集群（当前页面）的配置，属于 集群的实例会使用default集群（当前页面）的配置，属于
<span ng-bind="envMapClusters[pageContext.env]"></span> <span ng-bind="envMapClusters[pageContext.env]"></span>
的实例会使用对应集群的配置！ 的实例会使用对应集群的配置！
</div> </div>
<!--custom cluster tip--> <!--custom cluster tip-->
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
pre-release-ns="prepareReleaseNamespace" pre-release-ns="prepareReleaseNamespace"
create-item="createItem" edit-item="editItem" create-item="createItem" edit-item="editItem"
pre-delete-item="preDeleteItem" commit-change="commitChange" pre-delete-item="preDeleteItem" commit-change="commitChange"
pre-rollback="preRollback"></apollonspanel> pre-rollback="preRollback" show-text="showText"></apollonspanel>
</div> </div>
<!-- delete modal--> <!-- delete modal-->
...@@ -147,6 +147,25 @@ ...@@ -147,6 +147,25 @@
apollo-detail="'确定要回滚吗?'" apollo-detail="'确定要回滚吗?'"
apollo-show-cancel-btn="true" apollo-confirm="rollback"></apolloconfirmdialog> 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--> <!--create release modal-->
<form class="modal fade form-horizontal" name="releaseForm" valdr-type="Release" id="releaseModal" <form class="modal fade form-horizontal" name="releaseForm" valdr-type="Release" id="releaseModal"
...@@ -486,6 +505,8 @@ ...@@ -486,6 +505,8 @@
<script src="vendor/diff.min.js" type="text/javascript"></script> <script src="vendor/diff.min.js" type="text/javascript"></script>
<script src="vendor/clipboard.min.js" type="text/javascript"></script>
<!--valdr--> <!--valdr-->
<script src="vendor/valdr/valdr.min.js" type="text/javascript"></script> <script src="vendor/valdr/valdr.min.js" type="text/javascript"></script>
......
apollo-portal/src/main/resources/static/config/sync.html
...@@ -71,30 +71,48 @@ ...@@ -71,30 +71,48 @@
<label class="control-label">需要同步的配置</label> <label class="control-label">需要同步的配置</label>
</div> </div>
<div class="col-sm-10"> <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"> <table class="table table-bordered table-striped table-hover">
<thead> <thead>
<tr> <tr>
<td><input type="checkbox" ng-click="toggleItemsCheckedStatus()"></td> <td><input type="checkbox" ng-click="toggleItemsCheckedStatus()"></td>
<td>key</td> <td class="hover" ng-click="col='key';desc=!desc;">
<td>value</td> Key
<td>comment</td> <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> </tr>
</thead> </thead>
<tbody> <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" <td width="10%"><input type="checkbox" ng-checked="item.checked"
ng-click="switchSelect(item)"></td> ng-click="switchSelect(item)"></td>
<td width="20%"> <td width="20%">
<span ng-bind="item.key | limitTo: 250"></span> <span ng-bind="item.key | limitTo: 250"></span>
<span ng-bind="item.key.length > 250 ? '...' : ''"></span> <span ng-bind="item.key.length > 250 ? '...' : ''"></span>
</td> </td>
<td width="50%"> <td width="40%">
<span ng-bind="item.value | limitTo: 250"></span> <span ng-bind="item.value | limitTo: 250"></span>
<span ng-bind="item.value.length > 250 ? '...' : ''"></span> <span ng-bind="item.value.length > 250 ? '...' : ''"></span>
</td> </td>
<td width="20%"> <td width="15%">
<span ng-bind="item.comment | limitTo: 250"></span> <span ng-bind="item.dataChangeCreatedTime | date: 'yyyy-MM-dd HH:mm:ss'"></span>
<span ng-bind="item.comment.length > 250 ? '...' :''"></span> </td>
<td width="15%">
<span ng-bind="item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'"></span>
</td> </td>
</tr> </tr>
</tbody> </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", ...@@ -44,6 +44,8 @@ application_module.controller("ConfigNamespaceController",
$scope.doItem = doItem; $scope.doItem = doItem;
$scope.closeTip = closeTip; $scope.closeTip = closeTip;
$scope.showText = showText;
$scope.releaseBtnDisabled = false; $scope.releaseBtnDisabled = false;
$scope.rollbackBtnDisabled = false; $scope.rollbackBtnDisabled = false;
...@@ -376,6 +378,13 @@ application_module.controller("ConfigNamespaceController", ...@@ -376,6 +378,13 @@ application_module.controller("ConfigNamespaceController",
localStorage.setItem("hideTip", JSON.stringify(hideTip)); localStorage.setItem("hideTip", JSON.stringify(hideTip));
} }
function showText(text) {
$scope.text = text;
$('#showText').modal('show');
}
$('.config-item-container').removeClass('hide'); $('.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', ...@@ -16,7 +16,8 @@ directive_module.directive('apollonspanel',
createItem: '=', createItem: '=',
editItem: '=', editItem: '=',
preDeleteItem: '=', preDeleteItem: '=',
commitChange: '=' commitChange: '=',
showText: '='
}, },
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
...@@ -41,7 +42,7 @@ directive_module.directive('apollonspanel', ...@@ -41,7 +42,7 @@ directive_module.directive('apollonspanel',
scope.toggleItemSearchInput = toggleItemSearchInput; scope.toggleItemSearchInput = toggleItemSearchInput;
scope.searchItems = searchItems; scope.searchItems = searchItems;
scope.loadCommitHistory = loadCommitHistory; scope.loadCommitHistory = loadCommitHistory;
scope.toggleTextEditStatus = toggleTextEditStatus; scope.toggleTextEditStatus = toggleTextEditStatus;
...@@ -65,7 +66,7 @@ directive_module.directive('apollonspanel', ...@@ -65,7 +66,7 @@ directive_module.directive('apollonspanel',
function initNamespace(namespace, viewType) { function initNamespace(namespace, viewType) {
namespace.showSearchInput = false; namespace.showSearchInput = false;
namespace.viewItems = namespace.items; namespace.viewItems = namespace.items;
namespace.isPropertiesFormat = namespace.format == 'properties'; namespace.isPropertiesFormat = namespace.format == 'properties';
namespace.isTextEditing = false; namespace.isTextEditing = false;
namespace.instanceViewType = namespace_instance_view_type.LATEST_RELEASE; namespace.instanceViewType = namespace_instance_view_type.LATEST_RELEASE;
...@@ -221,10 +222,11 @@ directive_module.directive('apollonspanel', ...@@ -221,10 +222,11 @@ directive_module.directive('apollonspanel',
namespace.latestRelease.id, namespace.latestRelease.id,
namespace.latestReleaseInstancesPage) namespace.latestReleaseInstancesPage)
.then(function (result) { .then(function (result) {
if (result && result.content.length){ if (result && result.content.length) {
namespace.latestReleaseInstancesPage++; namespace.latestReleaseInstancesPage++;
result.content.forEach(function (instance) { result.content.forEach(function (instance) {
namespace.latestReleaseInstances.content.push(instance); namespace.latestReleaseInstances.content.push(
instance);
}) })
} }
...@@ -271,9 +273,9 @@ directive_module.directive('apollonspanel', ...@@ -271,9 +273,9 @@ directive_module.directive('apollonspanel',
scope.env, scope.env,
scope.cluster, scope.cluster,
namespace.baseInfo.namespaceName, namespace.baseInfo.namespaceName,
namespace.allInstancesPage) namespace.allInstancesPage)
.then(function (result) { .then(function (result) {
if (result && result.content.length){ if (result && result.content.length) {
namespace.allInstancesPage++; namespace.allInstancesPage++;
result.content.forEach(function (instance) { result.content.forEach(function (instance) {
namespace.allInstances.push(instance); namespace.allInstances.push(instance);
...@@ -390,7 +392,6 @@ directive_module.directive('apollonspanel', ...@@ -390,7 +392,6 @@ directive_module.directive('apollonspanel',
return result; return result;
} }
function toggleItemSearchInput(namespace) { function toggleItemSearchInput(namespace) {
namespace.showSearchInput = !namespace.showSearchInput; namespace.showSearchInput = !namespace.showSearchInput;
} }
...@@ -400,8 +401,8 @@ directive_module.directive('apollonspanel', ...@@ -400,8 +401,8 @@ directive_module.directive('apollonspanel',
var items = []; var items = [];
namespace.items.forEach(function (item) { namespace.items.forEach(function (item) {
var key = item.item.key; var key = item.item.key;
if (key && key.toLowerCase().indexOf(searchKey) >= 0){ if (key && key.toLowerCase().indexOf(searchKey) >= 0) {
items.push(item); items.push(item);
} }
}); });
namespace.viewItems = items; namespace.viewItems = items;
...@@ -416,6 +417,7 @@ directive_module.directive('apollonspanel', ...@@ -416,6 +417,7 @@ directive_module.directive('apollonspanel',
return true; return true;
} }
} }
} }
}); });
apollo-portal/src/main/resources/static/styles/common-style.css
...@@ -5,8 +5,8 @@ html, body { ...@@ -5,8 +5,8 @@ html, body {
body { body {
min-width: 960px; min-width: 960px;
color: #797979; color: #797979;
padding: 0px !important; padding: 0 !important;
margin: 0px !important; margin: 0 !important;
font-size: 13px; font-size: 13px;
background: #f1f2f7; background: #f1f2f7;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
...@@ -25,12 +25,25 @@ p, td, span { ...@@ -25,12 +25,25 @@ p, td, span {
word-break: break-all; word-break: break-all;
} }
table {
text-align: center;
}
.no-radius { .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 { .highlight {
...@@ -38,7 +51,7 @@ table { ...@@ -38,7 +51,7 @@ table {
} }
.hide-border-top { .hide-border-top {
border-top: 0px; border-top: 0;
} }
.logo { .logo {
...@@ -242,7 +255,7 @@ table th { ...@@ -242,7 +255,7 @@ table th {
} }
.config-item-container .panel { .config-item-container .panel {
border-radius: 0px; border-radius: 0;
} }
.config-item-container .panel-heading b { .config-item-container .panel-heading b {
...@@ -251,7 +264,7 @@ table th { ...@@ -251,7 +264,7 @@ table th {
.config-item-container .form-control[disabled] { .config-item-container .form-control[disabled] {
background: #ffffff; background: #ffffff;
border: 0px; border: 0;
} }
.config-item-container .second-panel-heading .ns_btn { .config-item-container .second-panel-heading .ns_btn {
...@@ -297,9 +310,9 @@ table th { ...@@ -297,9 +310,9 @@ table th {
} }
.namespace-attribute-panel { .namespace-attribute-panel {
margin-left: 0px; margin-left: 0;
color: #fff; color: #fff;
border-top: 0px; border-top: 0;
background: #f1f2f7; background: #f1f2f7;
} }
...@@ -310,7 +323,7 @@ table th { ...@@ -310,7 +323,7 @@ table th {
} }
.second-panel-heading .nav-tabs { .second-panel-heading .nav-tabs {
border-bottom: 0px; border-bottom: 0;
} }
.namespace-view-table td img { .namespace-view-table td img {
...@@ -419,7 +432,7 @@ table th { ...@@ -419,7 +432,7 @@ table th {
width: 350px; width: 350px;
height: 200px; height: 200px;
position: absolute; position: absolute;
margin-left: 0px; margin-left: 0;
cursor: pointer; cursor: pointer;
background: #ffffff; background: #ffffff;
border: 1px solid #ddd; 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 @@ ...@@ -9,7 +9,7 @@
<div class="modal-body"> <div class="modal-body">
{{detail}} {{detail}}
</div> </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-default" data-dismiss="modal" ng-show="showCancelBtn">取消</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" <button type="button" class="btn btn-danger" data-dismiss="modal"
ng-click="confirm()"> ng-click="confirm()">
......
apollo-portal/src/main/resources/static/views/component/namespace-panel.html
...@@ -148,14 +148,19 @@ ...@@ -148,14 +148,19 @@
<!--table view--> <!--table view-->
<div class="namespace-view-table" ng-show="namespace.viewType == 'table'"> <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"> <div class="col-md-8 col-lg-offset-2" style="padding-top: 15px; padding-bottom: 10px"
<input type="text" class="form-control" placeholder="输入key过滤" ng-model="namespace.searchKey" ng-change="searchItems(namespace)"> ng-show="namespace.showSearchInput">
<input type="text" class="form-control" placeholder="输入key过滤" ng-model="namespace.searchKey"
ng-change="searchItems(namespace)">
</div> </div>
<table class="table table-bordered table-striped text-center table-hover"> <table class="table table-bordered table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th> <th class="hover" title="排序"
Key ng-click="col='item.key';desc=!desc;">
Key&nbsp;
<span class="glyphicon glyphicon-sort"></span>
</th> </th>
<th> <th>
Value Value
...@@ -163,11 +168,16 @@ ...@@ -163,11 +168,16 @@
<th> <th>
备注 备注
</th> </th>
<th> <th class="hover" title="排序"
ng-click="col='item.dataChangeLastModifiedBy';desc=!desc;">
最后修改人 最后修改人
<span class="glyphicon glyphicon-sort"></span>
</th> </th>
<th> <th class="hover" title="排序"
ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
最后修改时间 最后修改时间
<span class="glyphicon glyphicon-sort"></span>
</th> </th>
<th> <th>
操作 操作
...@@ -176,17 +186,17 @@ ...@@ -176,17 +186,17 @@
</thead> </thead>
<tbody> <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"> 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 | limitTo: 250"></span>
<span ng-bind="config.item.key.length > 250 ? '...' :''"></span> <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
</td> </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 | limitTo: 250"></span>
<span ng-bind="config.item.value.length > 250 ? '...': ''"></span> <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
</td> </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 | limitTo: 250"></span>
<span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span> <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
</td> </td>
...@@ -196,7 +206,7 @@ ...@@ -196,7 +206,7 @@
ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'"> ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
</td> </td>
<td width="10%"> <td width="10%" class="text-center">
<img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改" <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
ng-click="editItem(namespace, config.item)" ng-click="editItem(namespace, config.item)"
ng-show="namespace.hasModifyPermission"> ng-show="namespace.hasModifyPermission">
...@@ -259,7 +269,7 @@ ...@@ -259,7 +269,7 @@
</td> </td>
<td width="30%"> <td width="30%">
</td> </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 | limitTo: 250"></span>
<span ng-bind="item.value.length > 250 ? '...': ''"></span> <span ng-bind="item.value.length > 250 ? '...': ''"></span>
</td> </td>
...@@ -276,11 +286,11 @@ ...@@ -276,11 +286,11 @@
<span ng-bind="item.newItem.key | limitTo: 250"></span> <span ng-bind="item.newItem.key | limitTo: 250"></span>
<span ng-bind="item.newItem.key.length > 250 ? '...' :''"></span> <span ng-bind="item.newItem.key.length > 250 ? '...' :''"></span>
</td> </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 | limitTo: 250"></span>
<span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span> <span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
</td> </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 | limitTo: 250"></span>
<span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span> <span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span>
</td> </td>
...@@ -397,7 +407,8 @@ ...@@ -397,7 +407,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </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> <button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>
</div> </div>
...@@ -443,7 +454,7 @@ ...@@ -443,7 +454,7 @@
</div> </div>
</div> </div>
<!--all instances--> <!--all instances-->
<div class="panel-body" ng-show="namespace.instanceViewType == 'all'"> <div class="panel-body" ng-show="namespace.instanceViewType == 'all'">
<div class="panel-default" ng-if="namespace.instancesCount > 0"> <div class="panel-default" ng-if="namespace.instancesCount > 0">
<table class="table table-bordered table-striped" ng-if="namespace.allInstances"> <table class="table table-bordered table-striped" ng-if="namespace.allInstances">
...@@ -474,6 +485,5 @@ ...@@ -474,6 +485,5 @@
</div> </div>
</div> </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