Skip to content

Commit

Permalink
Merge pull request #104 from hycomsa/84
Browse files Browse the repository at this point in the history 
84: 'Log' page improvements
  • Loading branch information
@kulasekp
kulasekp authored Feb 18, 2020
2 parents 6ca76ac + 300b0ee commit 9cef147
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 48 deletions.
40 changes: 36 additions & 4 deletions src/mokka/src/main/resources/static/css/log/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,51 @@ md-list-item {
margin-bottom: 10px;
}

.log-details button.md-icon-button {
.log-details button.md-icon-button {
margin-left: -10px;
}

.log-details h4 {
.log-details h4 {
display: inline-block;
margin: 0;
}

.log-details svg {
.log-details svg {
vertical-align: -5px;
}

.log-search-form .md-errors-spacer {
display: none;
}
}

.icons-inline{
display: flex;
align-items: center;
justify-content: space-between;
}

.log-info {
display: flex;
align-items: center;
}

.ng-expand-button{
margin-top: 12px;
}

md-list.md-dense md-list-item .material-icons-md-24 {
font-size: 24px;
height: 24px;
width: 24px;
margin: -3px 0 0 0;
}

.expand-log-button{
margin-left: auto;
}

.log .date-ip-log{
padding-top: 8px;
font-size: 0.85rem;
text-transform: none;
}
55 changes: 50 additions & 5 deletions src/mokka/src/main/resources/static/js/configuration/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,8 @@ app.controller('ConfigurationController', function($rootScope, $scope, $mdToast,
self.activateFilter = function() {
self.activeSearch = {};
self.search.update = false;
$location.search('mockId', null);

angular.extend(self.activeSearch, self.search);
self.mocks = [];
self.paths = [];
Expand All @@ -186,6 +188,14 @@ app.controller('ConfigurationController', function($rootScope, $scope, $mdToast,
};

self.fetchMocks = function(initParams){

mockId = $location.search().mockId;
if(mockId != null){
self.search.enabled = "";
self.search.id = mockId;
}

angular.extend(self.activeSearch, self.search);
self.loading = true;
var params = {
'from': (self.pagination),
Expand All @@ -205,14 +215,49 @@ app.controller('ConfigurationController', function($rootScope, $scope, $mdToast,
}

ConfigurationService.fetchMocks(params).then(function(d) {
self.paginationHasNext = d.hasNext;
self.mocks = d.mocks;
self.loading = false;
$location.hash('');
$anchorScroll();
if(mockId!=null && Array.isArray(d.mocks) && d.mocks.length){
self.showConfiguration(d.mocks[0]);
d.mocks[0].editMode = true;
}
self.paginationHasNext = d.hasNext;
self.mocks = d.mocks;
self.loading = false;
$location.hash('');
$anchorScroll();
});

};

$scope.init = function(initParams) {
self.search.enabled = true;
if($location.search().mockId != null){

var params = {
'from': (self.pagination),
// 'from': (self.pagination * self.mocksPerPage),
'perPage': (1),
// 'perPage': (self.mocksPerPage + 1),
};

angular.extend(params, initParams);

var mockId = parseInt($location.search().mockId);
if(isFinite(mockId)){

self.search.id = mockId;
ConfigurationService.getMock(params,mockId).then(function(m){
self.search.path = m.path;
self.search.description = m.description;
self.search.pattern = m.pattern;
self.search.name = m.name;
self.search.enabled = "";
self.paths = [m.path];
});
}
}
};


self.paginationPrevious = function() {
self.pagination = self.pagination - 1;
self.mocks = [];
Expand Down
22 changes: 22 additions & 0 deletions src/mokka/src/main/resources/static/js/configuration/service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,28 @@ app.factory('ConfigurationService',function($http, $q){
});
},

getMock: function(params, mockId) {
return $http.get('/configuration/' + mockId, {
'params': params
}).then(function(response){

if (!response.data.configurationContent) {
e.configurationContent = {};
}

if (response.data.configurationContent.groovy) {
response.data.type='groovy';
} else if (response.data.configurationContent.xml) {
response.data.type='xml';
} else {
response.data.type='string';
}


return response.data;
});
},

getStatuses: function(mock) {
return $http.post('/configuration/statuses').then(function(response){
console.debug(response);
Expand Down
22 changes: 21 additions & 1 deletion src/mokka/src/main/resources/static/js/log/controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
app.controller('LogsController', function($rootScope, $mdToast, LogsService){
app.controller('LogsController', function($rootScope, $scope, $mdToast, LogsService){
var self = this;
self.logs=[];
self.fetchingLogs = false;
Expand Down Expand Up @@ -85,4 +85,24 @@ app.controller('LogsController', function($rootScope, $mdToast, LogsService){
self.setOfLogs=response;
});
};

self.showLogDetails = function(log) {
if (log.showLogDetails) {
log.showLogDetails = false;
log["request"]=null;
log["response"]=null;
} else {
log.configurationLoading = true;
log.showLogDetails = true;
self.showDetails(log, "request");
self.showDetails(log, "response");
log.configurationLoading = false;
}
};

$scope.aceLoaded = function(_editor){
_editor.setOptions({
maxLines: 20
})
};
});
4 changes: 2 additions & 2 deletions src/mokka/src/main/resources/templates/configuration/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div th:fragment="main">

<div class="generic-container" ng-controller="ConfigurationController as ctrl">
<div class="generic-container" ng-controller="ConfigurationController as ctrl" ng-init="init()">

<md-fab-speed-dial md-direction="left" class="md-fling md-fab-bottom-right"
sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_EDITOR')">
Expand Down Expand Up @@ -35,7 +35,7 @@
</md-fab-actions>
</md-fab-speed-dial>

<md-card>
<md-card ng-init="initController()">
<md-card-content ng-filter="ctrl.activateFilter();ctrl.getPaths()">
<md-content layout-padding="" layout="column">
<div layout="row">
Expand Down
87 changes: 51 additions & 36 deletions src/mokka/src/main/resources/templates/log/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,45 +80,60 @@
<md-divider ></md-divider>
<div ng-repeat="log in ctrl.logs" class="log">
<md-list-item>
<ng-md-icon icon="{{ log.status == 'OK' ? 'check_circle' : 'error' }}" class="md-avatar" style="{{ log.status == 'OK' ? 'fill: #DFF2BF' : 'fill: #FFBABA' }}" size="48"></ng-md-icon>

<div class="md-list-item-text" layout="column" flex="100">
<h4>{{ log.httpMethod }} /{{ log.uri }}</h4>
<p>{{ log.date | date:"yyyy.MM.dd HH:mm:ss" }} from {{ log.from }}</p>

<div id="log-{{log.id}}-details" class="log-details">
<div flex="">
<h4>Request</h4>
<md-button class="md-icon-button md-ink-ripple" type="button" ng-click="ctrl.showDetails(log, 'request')">
<md-tooltip md-direction="top">{{log.request == null ? 'show' : 'hide'}} request</md-tooltip>
<ng-md-icon ng-show="log.request == null" class="request-expand-more-icon" style="fill: #000000" icon="expand_more"></ng-md-icon>
<ng-md-icon ng-show="log.request != null" class="request-expand-less-icon" style="fill: #000000" icon="expand_less"></ng-md-icon>
</md-button>
</div>
<div layout="row" layout-align="center center" ng-show="log.request == null &amp;&amp; log.requestLoading">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div class="ui-ace" ng-readonly="true" ui-ace="{mode: 'xml'}" ng-model="log.request" ng-if="log.request"></div>

<div flex="">
<h4>Response</h4>
<md-button class="md-icon-button md-ink-ripple" type="button" ng-click="ctrl.showDetails(log, 'response')">
<md-tooltip md-direction="top">{{log.response == null ? 'show' : 'hide'}} response</md-tooltip>
<ng-md-icon ng-show="log.response == null" class="response-expand-more-icon" style="fill: #000000" icon="expand_more"></ng-md-icon>
<ng-md-icon ng-show="log.response != null" class="response-expand-less-icon" style="fill: #000000" icon="expand_less"></ng-md-icon>
</md-button>
</div>
<div layout="row" layout-align="center center" ng-show="log.response == null &amp;&amp; log.responseLoading">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div class="ui-ace" ng-readonly="true" ui-ace="{mode: 'xml'}" ng-model="log.response" ng-if="log.response"></div>
<div class="icons-inline">
<div class="log-info">
<ng-md-icon icon="{{ log.status == 'OK' ? 'check_circle' : 'error' }}" class="md-avatar material-icons-md-24" style="{{ log.status == 'OK' ? 'fill: #DFF2BF' : 'fill: #FFBABA' }};" size="24">
<md-tooltip md-direction="top">Request {{log.status == 'OK' ? 'matched' : 'umatched'}}</md-tooltip>
</ng-md-icon>
<h4>{{ log.httpMethod }} /{{ log.uri }}</h4>
</div>
<md-button class="md-ink-ripple icons-inline log-info expand-log-button" type="button"
ng-click="ctrl.showLogDetails(log)" >

<md-tooltip md-direction="top">{{log.showLogDetails ? 'hide' : 'show'}} logs details</md-tooltip>

<ng-md-icon class="ng-expand-button" ng-show="!log.showLogDetails" style="fill: #000000"
icon="expand_more"></ng-md-icon>
<ng-md-icon class="ng-expand-button" ng-show="log.showLogDetails" style="fill: #000000"
icon="expand_less"></ng-md-icon>

<p class="date-ip-log">{{ log.date | date:"yyyy.MM.dd HH:mm:ss" }} from {{ log.from }}</p>


</md-button>




<md-button class="md-icon-button md-primary md-button md-ink-ripple menu-item-link" type="button" href="/configurations?mockId={{log.configurationId}}" ng-if="log.configurationId">
<md-tooltip md-direction="top">Edit configuration</md-tooltip>
<ng-md-icon style="fill: #9a9a9a" icon="arrow_forward"></ng-md-icon>
</md-button>
</div>

<div layout="row" layout-align="center center" ng-show="log.configurationLoading">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>


<div ng-show="log.showLogDetails" >
<div id="log-{{log.id}}-details" class="log-details">
<h4>Request:</h4>
<div layout="row" layout-align="center center" ng-show="log.request == null &amp;&amp; log.requestLoading">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div class="ui-ace" ng-readonly="true" ng-model="log.request" ng-if="log.request" ui-ace="{mode: 'xml', onLoad : aceLoaded }"></div>
<h4>Response:</h4>
<div layout="row" layout-align="center center" ng-show="log.response == null &amp;&amp; log.responseLoading">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div class="ui-ace" ng-readonly="true" ng-model="log.response" ng-if="log.response" ui-ace="{mode: 'xml', onLoad : aceLoaded }"></div>
</div>
</div>
</div>
</div>

<md-button class="md-icon-button md-primary md-button md-ink-ripple" type="button" href="/configurations#mock-{{log.configurationId}}" ng-if="log.configurationId">
<md-tooltip md-direction="top">Edit configuration</md-tooltip>
<ng-md-icon style="fill: #9a9a9a" icon="edit"></ng-md-icon>
</md-button>

</md-list-item>
<md-divider ></md-divider>
</div>
Expand Down

0 comments on commit 9cef147

Please sign in to comment.