Skip to content

S
spring-boot-admin
Commit 846e81ce by Johannes Edmeier
Options

Fix broken coloring in traces view

parent 5e59765b
Showing with 64 additions and 71 deletions
spring-boot-admin-server-ui/modules/applications-metrics/views/metrics.html
<div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="row">
<div class="span12">
<sba-info-panel title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*">
<table class="table" ng-if="counters.length > 0">
<tr ng-repeat="counter in counters">
<td>
<sba-simple-metric-bar for-metric="counter" global-max="countersMax"></sba-simple-metric-bar>
</td>
</tr>
</table>
</sba-info-panel>
<sba-info-panel title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*">
<table class="table" ng-if="gauges.length > 0">
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
<td>
<sba-rich-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-rich-metric-bar>
</td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges">
<td>
<sba-simple-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-simple-metric-bar>
</td>
</tr>
</table>
</sba-info-panel>
</div>
<div class="row">
<div class="span12">
<sba-info-panel title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*">
<table class="table" ng-if="counters.length > 0">
<tr ng-repeat="counter in counters">
<td><sba-simple-metric-bar for-metric="counter" global-max="countersMax" ></simple-metric-bar></td>
</tr>
</table>
</sba-info-panel>
<sba-info-panel title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*">
<table class="table" ng-if="gauges.length > 0">
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
<td><sba-rich-metric-bar for-metric="gauge" global-max="gaugesMax" ></rich-metric-bar></td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges">
<td><sba-simple-metric-bar for-metric="gauge" global-max="gaugesMax" ></simple-metric-bar></td>
</tr>
</table>
</sba-info-panel>
</div>
</div>
</div>
\ No newline at end of file
</div>
</div>
spring-boot-admin-server-ui/modules/applications-trace/components/trace.js
......@@ -22,20 +22,16 @@ module.exports = {
controller: function () {
var ctrl = this;
ctrl.show = false;
ctrl.statusClass = 'unknown';
ctrl.toggle = function () {
ctrl.show = !ctrl.show;
};
ctrl.$onChanges = function () {
ctrl.getStatusClass = function () {
if (ctrl.trace.info.headers.response) {
var status = parseInt(ctrl.trace.info.headers.response.status);
if (Math.floor(status / 500) === 1) {
ctrl.statusClass = 'error';
} else if (Math.floor(status / 400) === 1) {
ctrl.statusClass = 'warn';
} else {
ctrl.statusClass = 'ok';
}
return 'http-' + Math.floor(status / 100) + 'xx';
} else {
return 'unknown';
}
};
},
......
spring-boot-admin-server-ui/modules/applications-trace/components/trace.tpl.html
<div class="event" ng-class="statusClass" ng-click="$ctrl.toggle()">
<div class="time">{{$ctrl.trace.timestamp | date:'HH:mm:ss.sss'}}
<br/><small class="muted">{{$ctrl.trace.timestamp | date:'dd.MM.yyyy'}}</small></div>
<div class="title">
<span class="status">{{$ctrl.trace.info.headers.response.status || '???' }}</span>
<span class="muted"> - {{$ctrl.trace.info.method}}</span> {{$ctrl.trace.info.path}}
</div>
<pre ng-show="$ctrl.show">{{$ctrl.trace.info | json}}</pre>
<div class="event" ng-class="$ctrl.getStatusClass()" ng-click="$ctrl.toggle()">
<div class="time">{{$ctrl.trace.timestamp | date:'HH:mm:ss.sss'}}
<br/><small class="muted">{{$ctrl.trace.timestamp | date:'dd.MM.yyyy'}}</small></div>
<div class="title">
<span class="status">{{$ctrl.trace.info.headers.response.status || '???' }}</span>
<span class="muted"> - {{$ctrl.trace.info.method}}</span> {{$ctrl.trace.info.path}}
</div>
<pre ng-show="$ctrl.show">{{$ctrl.trace.info | json}}</pre>
</div>
spring-boot-admin-server-ui/modules/applications-trace/css/module.css
......@@ -4,7 +4,6 @@
list-style-type: none;
padding-left: 120px;
}
.timeline:before {
position: absolute;
top: 0;
......@@ -13,20 +12,18 @@
width: 6px;
height: 100%;
margin-left: 0;
background: rgb(80,80,80);
background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: -webkit-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
background: rgb(80, 80, 80);
background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -webkit-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
z-index: 5;
}
.timeline li {
padding: 1em 0;
}
.timeline li:after {
content: "";
display: block;
......@@ -34,26 +31,23 @@
clear: both;
visibility: hidden;
}
.timeline .event {
position: relative;
width: 100%;
display: inline-block;
left: 15px;
padding-left: 5px;
cursor:pointer;
cursor: pointer;
}
.timeline .event .time {
position: absolute;
left: -120px;
margin-left: -25px;
display: inline-block;
vertical-align: middle;
text-align:right;
text-align: right;
width: 120px;
}
.timeline .event:before {
box-sizing: border-box;
content: ' ';
......@@ -68,35 +62,34 @@
left: -6px;
margin-left: -15px;
}
.event.warn:before {
.event.http-4xx:before {
border-color: #e0ba2d;
}
.event.warn > .title > .status {
.event.http-4xx > .title > .status {
color: #e0ba2d;
}
.event.error:before {
.event.http-5xx:before {
border-color: #b30000;
}
.event.error > .title > .status {
.event.http-5xx > .title > .status {
color: #b30000;
}
.event.ok:before {
.event.http-1xx:before,
.event.http-2xx:before,
.event.http-3xx:before {
border-color: #6db33f;
}
.event.ok > .title > .status {
.event.http-1xx > .title > .status,
.event.http-2xx > .title > .status,
.event.http-3xx > .title > .status {
color: #6db33f;
}
.event.unknown:before {
border-color: #999999;
}
.event.unknown > .title > .status {
.event.unknown > .title > .status {
color: #999999;
}
.timeline .event:hover:before {
background: #ccc;
}
\ No newline at end of file
}
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