Skip to content

A
apollo
Commit 0b9d2aad authored by kezhenxu94's avatar kezhenxu94 Committed by Jason Song
Browse files
Options

[APOLLO-1966]: diff configurations among clusters. issue #1966 (#1996) 

feature: diff configurations among clusters. issue #1966
parent dfa9f7a9
Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 0 deletions
apollo-portal/src/main/resources/static/config/diff.html 0 → 100644
View file @ 0b9d2aad
<!doctype html>
<html ng-app="diff_item">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="../img/config.png">
<!-- 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 rel="stylesheet" type="text/css" href="../styles/common-style.css">
<title>比较配置</title>
<style>
.comment-toggle {
margin-left: 8px !important;
}
.diff-content {
margin-top: 12px;
}
</style>
</head>
<body>
<apollonav></apollonav>
<div class="container-fluid apollo-container" ng-controller="DiffItemController">
<section class="panel col-md-offset-1 col-md-10">
<header class="panel-heading">
<div class="row">
<div class="col-md-7">
<h4 class="modal-title">比较配置
<small ng-show="syncItemStep == 1">(第一步:选择比较信息)</small>
<small ng-show="syncItemStep == 2">(第二步:查看差异配置)</small>
</h4>
</div>
<div class="col-md-5 text-right">
<button type="button" class="btn btn-primary" ng-show="syncItemStep > 1 && syncItemStep < 3"
ng-click="syncItemNextStep(-1)">上一步
</button>
<button type="button" class="btn btn-primary" ng-show="syncItemStep < 2"
ng-click="diff()">下一步
</button>
<button type="button" class="btn btn-info" data-dismiss="modal"
ng-click="backToAppHomePage()">返回到项目首页
</button>
</div>
</div>
</header>
<div class="panel-body">
<div class="row" ng-show="syncItemStep == 1">
<div class="alert-info alert no-radius">
<strong>Tips:</strong>
<ul>
<li>通过比较配置功能，可以查看多个环境、集群间的配置差异</li>
</ul>
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">要比较的集群</label>
<div class="col-sm-6">
<apolloclusterselector apollo-app-id="pageContext.appId" apollo-default-all-checked="false"
apollo-select="collectSelectedClusters"
apollo-default-checked-env="pageContext.env"
apollo-default-checked-cluster="pageContext.clusterName"></apolloclusterselector>
</div>
</div>
</div>
<hr>
</div>
<!--step 2-->
<div class="row" ng-show="syncItemStep == 2">
<div class="row" style="margin-top: 10px;">
<div class="form-horizontal">
<div class="col-sm-12">
<label class="control-label">
<input type="checkbox"
class="comment-toggle"
ng-checked="showCommentDiff"
ng-click="showCommentDiff=!showCommentDiff">
是否比较注释
</label>
</div>
<div class="col-sm-12 diff-content">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td>Key</td>
<td ng-repeat="cluster in syncData.syncToNamespaces"
ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Value'"
></td>
<td ng-show="showCommentDiff"
ng-repeat="cluster in syncData.syncToNamespaces"
ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Comment'"
></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey">
<td width="15%" ng-bind="key"></td>
<td ng-repeat="cluster in syncData.syncToNamespaces"
ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).value"></td>
<td ng-show="showCommentDiff"
ng-repeat="cluster in syncData.syncToNamespaces"
ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).comment"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<showtextmodal text="text"/>
</div>
<div ng-include="'../views/common/footer.html'"></div>
<!-- jquery.js -->
<script src="../vendor/jquery.min.js" type="text/javascript"></script>
<!--angular-->
<script src="../vendor/angular/angular.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>
<!-- bootstrap.js -->
<script src="../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../vendor/clipboard.min.js" type="text/javascript"></script>
<!--biz-->
<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/services/EnvService.js"></script>
<script type="application/javascript" src="../scripts/services/ConfigService.js"></script>
<script type="application/javascript" src="../scripts/services/UserService.js"></script>
<script type="application/javascript" src="../scripts/services/CommonService.js"></script>
<script type="application/javascript" src="../scripts/services/PermissionService.js"></script>
<script type="application/javascript" src="../scripts/AppUtils.js"></script>
<script type="application/javascript" src="../scripts/controller/config/DiffConfigController.js"></script>
<script type="application/javascript" src="../scripts/PageCommon.js"></script>
<script type="application/javascript" src="../scripts/directive/directive.js"></script>
<script type="application/javascript" src="../scripts/directive/show-text-modal-directive.js"></script>
</body>
</html>
apollo-portal/src/main/resources/static/scripts/app.js
View file @ 0b9d2aad
...@@ -16,6 +16,8 @@ var application_module = angular.module('application', ['app.service', 'apollo.d ...@@ -16,6 +16,8 @@ var application_module = angular.module('application', ['app.service', 'apollo.d
var app_module = angular.module('create_app', ['apollo.directive', 'toastr', 'app.service', 'app.util', 'angular-loading-bar', 'valdr']); var app_module = angular.module('create_app', ['apollo.directive', 'toastr', 'app.service', 'app.util', 'angular-loading-bar', 'valdr']);
//配置同步页面 //配置同步页面
var sync_item_module = angular.module('sync_item', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']); var sync_item_module = angular.module('sync_item', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']);
// 比较页面
var diff_item_module = angular.module('diff_item', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']);
//namespace //namespace
var namespace_module = angular.module('namespace', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar', 'valdr']); var namespace_module = angular.module('namespace', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar', 'valdr']);
//server config //server config
......
apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js 0 → 100644
View file @ 0b9d2aad
diff_item_module.controller("DiffItemController",
['$scope', '$location', '$window', 'toastr', 'AppService', 'AppUtil', 'ConfigService',
function ($scope, $location, $window, toastr, AppService, AppUtil, ConfigService) {
var params = AppUtil.parseParams($location.$$url);
$scope.pageContext = {
appId: params.appid,
env: params.env,
clusterName: params.clusterName,
namespaceName: params.namespaceName
};
var sourceItems = [];
$scope.diff = diff;
$scope.syncBtnDisabled = false;
$scope.showCommentDiff = false;
$scope.collectSelectedClusters = collectSelectedClusters;
$scope.syncItemNextStep = syncItemNextStep;
$scope.backToAppHomePage = backToAppHomePage;
$scope.switchSelect = switchSelect;
$scope.showText = showText;
$scope.itemsKeyedByKey = {};
$scope.syncData = {
syncToNamespaces: [],
syncItems: []
};
function diff() {
$scope.syncData = parseSyncSourceData();
if ($scope.syncData.syncToNamespaces.length < 2) {
toastr.warning("请至少选择两个集群");
return;
}
$scope.syncData.syncToNamespaces.forEach(function (namespace) {
ConfigService.find_items(namespace.appId,
namespace.env,
namespace.clusterName,
namespace.namespaceName).then(function (result) {
result.forEach(function (item) {
var itemsKeyedByClusterName = $scope.itemsKeyedByKey[item.key] || {};
itemsKeyedByClusterName[namespace.env + ':' + namespace.clusterName + ':' + namespace.namespaceName] = item;
$scope.itemsKeyedByKey[item.key] = itemsKeyedByClusterName;
});
});
});
$scope.syncItemNextStep(1);
}
var selectedClusters = [];
function collectSelectedClusters(data) {
selectedClusters = data;
}
function parseSyncSourceData() {
var syncData = {
syncToNamespaces: [],
syncItems: []
};
var namespaceName = $scope.pageContext.namespaceName;
selectedClusters.forEach(function (cluster) {
if (cluster.checked) {
cluster.clusterName = cluster.name;
cluster.namespaceName = namespaceName;
syncData.syncToNamespaces.push(cluster);
}
});
return syncData;
}
////// flow control ///////
$scope.syncItemStep = 1;
function syncItemNextStep(offset) {
$scope.syncItemStep += offset;
}
function backToAppHomePage() {
$window.location.href = '/config.html?#appid=' + $scope.pageContext.appId;
}
function switchSelect(o) {
o.checked = !o.checked;
}
function showText(text) {
$scope.text = text;
AppUtil.showModal('#showTextModal');
}
}]);
apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
View file @ 0b9d2aad
...@@ -51,6 +51,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na ...@@ -51,6 +51,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
scope.loadCommitHistory = loadCommitHistory; scope.loadCommitHistory = loadCommitHistory;
scope.toggleTextEditStatus = toggleTextEditStatus; scope.toggleTextEditStatus = toggleTextEditStatus;
scope.goToSyncPage = goToSyncPage; scope.goToSyncPage = goToSyncPage;
scope.goToDiffPage = goToDiffPage;
scope.modifyByText = modifyByText; scope.modifyByText = modifyByText;
scope.syntaxCheck = syntaxCheck; scope.syntaxCheck = syntaxCheck;
scope.goToParentAppConfigPage = goToParentAppConfigPage; scope.goToParentAppConfigPage = goToParentAppConfigPage;
...@@ -701,6 +702,14 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na ...@@ -701,6 +702,14 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
+ "&namespaceName=" + namespace.baseInfo.namespaceName; + "&namespaceName=" + namespace.baseInfo.namespaceName;
} }
function goToDiffPage(namespace) {
$window.location.href =
"config/diff.html?#/appid=" + scope.appId + "&env="
+ scope.env + "&clusterName="
+ scope.cluster
+ "&namespaceName=" + namespace.baseInfo.namespaceName;
}
function modifyByText(namespace) { function modifyByText(namespace) {
var model = { var model = {
configText: namespace.editText, configText: namespace.editText,
......
apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
View file @ 0b9d2aad
...@@ -189,6 +189,15 @@ ...@@ -189,6 +189,15 @@
同步配置 同步配置
</button> </button>
<button type="button" class="btn btn-default btn-sm J_tableview_btn"
data-tooltip="tooltip" data-placement="bottom" title="比较各环境间配置"
ng-click="goToDiffPage(namespace)"
ng-show="namespace.viewType == 'table' && namespace.displayControl.currentOperateBranch == 'master'
&& namespace.isPropertiesFormat">
<img src="img/diff.png">
比较配置
</button>
<button type="button" class="btn btn-primary btn-sm" <button type="button" class="btn btn-primary btn-sm"
ng-show="!namespace.isLinkedNamespace ng-show="!namespace.isLinkedNamespace
&& namespace.viewType == 'table' && namespace.viewType == 'table'
......
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