Skip to content

Commit

Permalink
Beautify Portal TraceLog UI interface (#5149)
Browse files Browse the repository at this point in the history 
* beautify ui

* reformat code
  • Loading branch information
@BlackBear2003
BlackBear2003 authored May 25, 2024
1 parent 3d14e6f commit 39cd381
Show file tree
Hide file tree
Showing 4 changed files with 324 additions and 270 deletions.
24 changes: 7 additions & 17 deletions apollo-portal/src/main/resources/static/audit_log_trace_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,7 @@ <h2>{{ 'ApolloAuditLog.TraceDetailTips' | translate }}</h2>
{{'ApolloAuditLog.TraceAuditLogTips' | translate }}</span>
</div>
<div class="panel-body">
<div class="media hover" ng-repeat="detail in traceDetails">
<h4 class="media-heading word-break" data-toggle="collapse" data-target="#detail{{ detail.logDTO.id }}"
ng-click="setShowingDetail(detail);removeInClassFromLogDropDownExceptId(detail.logDTO.id)">
{{detail.logDTO.opName}}
<span class="glyphicon glyphicon-menu-down"></span>
</h4>
<div id="detail{{ detail.logDTO.id }}" class="panel-collapse collapse">
<div class="word-break">{{'ApolloAuditLog.SpanIdTips' | translate }}:{{detail.logDTO.spanId.substr(0,5)+'...'}}</div>
<div class="word-break">{{'ApolloAuditLog.ParentSpan' | translate }}:{{findOpNameBySpanId(detail.logDTO.parentSpanId)}}</div>
<div class="word-break">{{'ApolloAuditLog.FollowsFromSpan' | translate }}:{{findOpNameBySpanId(detail.logDTO.followsFromSpanId)}}</div>
</div>
</div>
<div id="treeview" class="treeview"></div>
</div>
</div>
<!--properties mode info-->
Expand All @@ -89,7 +78,7 @@ <h4 style="margin: 8px 0px">{{'ApolloAuditLog.OpType' | translate}}:{{showingDet
<div style="font-size: 12pt; word-break: break-all">
{{'ApolloAuditLog.Description' | translate}}:{{showingDetail.logDTO.description}}
</div>
<hr style="margin: 5px"/>
<hr style="margin: 5px 0px"/>
<h4 style="word-break: break-all;">
{{'ApolloAuditLog.InfluenceEntity' | translate}}:
</h4>
Expand Down Expand Up @@ -153,7 +142,7 @@ <h4 ng-show="relatedDataInfluences && relatedDataInfluences.length > 0"
</h4>
<div class="table-responsive">
<table ng-show="relatedDataInfluences && relatedDataInfluences.length > 0"
class="no-margin table table-striped table-hover table-bordered">
class="no-margin table table-striped table-hover table-bordered">
<thead>
<tr>
<th style="width: 50%">{{'ApolloAuditLog.DataInfluence.FieldNewValue' | translate }}</th>
Expand Down Expand Up @@ -181,7 +170,7 @@ <h5>{{'ApolloAuditLog.NoDataInfluence' | translate }}</h5>
</div>
</div>

<div class="panel-body" ng-show="!traceDetails || traceDetails == 0">
<div class="panel-body" ng-show="!traceDetailsTree || traceDetailsTree.length == 0">
<h4 class="text-center empty-container">
{{'ApolloAuditLog.NoTraceDetail' | translate }}</h4>
</div>
Expand All @@ -206,12 +195,13 @@ <h4 class="text-center empty-container">

<script src="vendor/angular/angular-translate.2.18.1/angular-translate.min.js"></script>
<script
src="vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
src="vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
<script
src="vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>
src="vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>

<!-- bootstrap.js -->
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap-treeview.min.js" type="text/javascript"></script>

<script src="vendor/diff.min.js" type="text/javascript"></script>

Expand Down
248 changes: 124 additions & 124 deletions apollo-portal/src/main/resources/static/scripts/controller/AuditLogMenuController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,160 +16,160 @@
*/
audit_log_menu_module.controller('AuditLogMenuController',
['$scope', '$window', '$translate', '$document', 'toastr', 'AppService', 'AppUtil', 'EventManager', 'AuditLogService',
auditLogMenuController]
auditLogMenuController]
);

function auditLogMenuController($scope, $window, $translate, $document, toastr, AppService, AppUtil, EventManager, AuditLogService) {

$scope.auditEnabled = false;
$scope.auditEnabled = false;

$scope.auditLogList = [];
$scope.goToTraceDetailsPage = goToTraceDetailsPage;
$scope.searchByOpNameAndDate = searchByOpNameAndDate;
$scope.getMoreAuditLogs = getMoreAuditLogs;
$scope.auditLogList = [];
$scope.goToTraceDetailsPage = goToTraceDetailsPage;
$scope.searchByOpNameAndDate = searchByOpNameAndDate;
$scope.getMoreAuditLogs = getMoreAuditLogs;

$scope.page = 0;
var PAGE_SIZE = 10;
$scope.page = 0;
var PAGE_SIZE = 10;

$scope.opName = '';
$scope.startDate = null;
$scope.endDate = null;
$scope.startDateFmt = null;
$scope.endDateFmt = null;
$scope.opName = '';
$scope.startDate = null;
$scope.endDate = null;
$scope.startDateFmt = null;
$scope.endDateFmt = null;

$scope.hasLoadAll = false;
$scope.hasLoadAll = false;

$scope.options = [];
$scope.showSearchDropdown = false;
$scope.options = [];
$scope.showSearchDropdown = false;

$scope.showOptions = function(query) {
$scope.options = [];
searchAuditLogs(query);
};
$scope.showOptions = function (query) {
$scope.options = [];
searchAuditLogs(query);
};

$scope.selectOption = function(option) {
$scope.opName = option.opName;
$scope.showSearchDropdown = false;
};
$scope.selectOption = function (option) {
$scope.opName = option.opName;
$scope.showSearchDropdown = false;
};

init();
init();

function init() {
getAuditProperties();
initSearchingMenu();
}
function init() {
getAuditProperties();
initSearchingMenu();
}

function getAuditProperties() {
AuditLogService.get_properties().then(function (result) {
$scope.auditEnabled = result.enabled;
});
}

function initSearchingMenu() {
AuditLogService.find_all_logs($scope.page, PAGE_SIZE).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}
function getAuditProperties() {
AuditLogService.get_properties().then(function (result) {
$scope.auditEnabled = result.enabled;
});
}

function searchByOpNameAndDate(opName, startDate, endDate) {
if (startDate !== null) {
$scope.startDateFmt = new Date(startDate).Format("yyyy-MM-dd hh:mm:ss.S");
function initSearchingMenu() {
AuditLogService.find_all_logs($scope.page, PAGE_SIZE).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (endDate !== null) {
$scope.endDateFmt = new Date(endDate).Format("yyyy-MM-dd hh:mm:ss.S");
if (result.length === 0) {
return;
}
$scope.auditLogList = [];
$scope.page = 0;
$scope.opName = opName;
$scope.startDate = startDate;
$scope.endDate = endDate;
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}

function searchByOpNameAndDate(opName, startDate, endDate) {
if (startDate !== null) {
$scope.startDateFmt = new Date(startDate).Format("yyyy-MM-dd hh:mm:ss.S");
}
if (endDate !== null) {
$scope.endDateFmt = new Date(endDate).Format("yyyy-MM-dd hh:mm:ss.S");
}
$scope.auditLogList = [];
$scope.page = 0;
$scope.opName = opName;
$scope.startDate = startDate;
$scope.endDate = endDate;
AuditLogService.find_logs_by_opName(
$scope.opName,
$scope.startDateFmt,
$scope.endDateFmt,
$scope.page,
PAGE_SIZE
).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}

function getMoreAuditLogs() {
$scope.page = $scope.page + 1;
if ($scope.opName === '') {
AuditLogService.find_all_logs($scope.page, PAGE_SIZE).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
} else {
AuditLogService.find_logs_by_opName(
$scope.opName,
$scope.startDateFmt,
$scope.endDateFmt,
$scope.page,
PAGE_SIZE
).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}

function getMoreAuditLogs() {
$scope.page = $scope.page + 1;
if($scope.opName === '') {
AuditLogService.find_all_logs($scope.page, PAGE_SIZE).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}else {
AuditLogService.find_logs_by_opName(
$scope.opName,
$scope.startDateFmt,
$scope.endDateFmt,
$scope.page,
PAGE_SIZE
).then(function (result) {
if (!result || result.length < PAGE_SIZE) {
$scope.hasLoadAll = true;
}
if (result.length === 0) {
return;
}
$scope.auditLogList = $scope.auditLogList.concat(result);
});
}
}

function searchAuditLogs(query) {
AuditLogService.search_by_name_or_type_or_operator(query, 0, 20).then(function (result) {
result.forEach(function (log) {
var optionDisplay = log.opName + '-(' + log.opType + ').by:' + log.operator;
var option = {
id: log.id,
display: optionDisplay,
opName: log.opName
};
$scope.options.push(option);
});
$scope.showSearchDropdown = $scope.options.length > 0;
}
}

function searchAuditLogs(query) {
AuditLogService.search_by_name_or_type_or_operator(query, 0, 20).then(function (result) {
result.forEach(function (log) {
var optionDisplay = log.opName + '-(' + log.opType + ').by:' + log.operator;
var option = {
id: log.id,
display: optionDisplay,
opName: log.opName
};
$scope.options.push(option);
});
}
$scope.showSearchDropdown = $scope.options.length > 0;
});
}

function goToTraceDetailsPage(traceId) {
$window.location.href = AppUtil.prefixPath() + "/audit_log_trace_detail.html?#traceId=" + traceId;
}
function goToTraceDetailsPage(traceId) {
$window.location.href = AppUtil.prefixPath() + "/audit_log_trace_detail.html?#traceId=" + traceId;
}

$document.on('click', function(event) {
if (!$scope.showSearchDropdown) {
return;
}
$document.on('click', function (event) {
if (!$scope.showSearchDropdown) {
return;
}

var target = angular.element(event.target);
var target = angular.element(event.target);

// 检查点击的目标是否是输入框或下拉栏，如果不是，则隐藏下拉栏
if (!target.hasClass('form-control') && !target.hasClass('options-container')) {
$scope.$apply(function() {
$scope.showSearchDropdown = false;
});
}
});
// 检查点击的目标是否是输入框或下拉栏，如果不是，则隐藏下拉栏
if (!target.hasClass('form-control') && !target.hasClass('options-container')) {
$scope.$apply(function () {
$scope.showSearchDropdown = false;
});
}
});
}


Expand Down
Loading

0 comments on commit 39cd381

Please sign in to comment.