Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Mar 3, 2019
153 changes: 153 additions & 0 deletions apollo-portal/src/main/resources/static/config/diff.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!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="col-sm-2 control-label">是否比较注释</label>
kezhenxu94 marked this conversation as resolved.
Show resolved Hide resolved
<div class="col-sm-6">
<input type="checkbox"
class="comment-toggle"
ng-checked="showCommentDiff"
ng-click="showCommentDiff=!showCommentDiff">
</div>
</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>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions apollo-portal/src/main/resources/static/scripts/app.js
Original file line number Diff line number Diff line change
@@ -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 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
var namespace_module = angular.module('namespace', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar', 'valdr']);
//server config
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
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');
}
}]);
Original file line number Diff line number Diff line change
@@ -51,6 +51,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
scope.loadCommitHistory = loadCommitHistory;
scope.toggleTextEditStatus = toggleTextEditStatus;
scope.goToSyncPage = goToSyncPage;
scope.goToDiffPage = goToDiffPage;
scope.modifyByText = modifyByText;
scope.syntaxCheck = syntaxCheck;
scope.goToParentAppConfigPage = goToParentAppConfigPage;
@@ -701,6 +702,14 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
+ "&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) {
var model = {
configText: namespace.editText,
Original file line number Diff line number Diff line change
@@ -189,6 +189,15 @@
同步配置
</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"
ng-show="!namespace.isLinkedNamespace
&& namespace.viewType == 'table'