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="container content">
<div class="alert alert-error" ng-if="error"> <div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ 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>
<div class="row"> </div>
<div class="span12"> </div>
<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
spring-boot-admin-server-ui/modules/applications-trace/components/trace.js
...@@ -22,20 +22,16 @@ module.exports = { ...@@ -22,20 +22,16 @@ module.exports = {
controller: function () { controller: function () {
var ctrl = this; var ctrl = this;
ctrl.show = false; ctrl.show = false;
ctrl.statusClass = 'unknown';
ctrl.toggle = function () { ctrl.toggle = function () {
ctrl.show = !ctrl.show; ctrl.show = !ctrl.show;
}; };
ctrl.$onChanges = function () {
ctrl.getStatusClass = function () {
if (ctrl.trace.info.headers.response) { if (ctrl.trace.info.headers.response) {
var status = parseInt(ctrl.trace.info.headers.response.status); var status = parseInt(ctrl.trace.info.headers.response.status);
if (Math.floor(status / 500) === 1) { return 'http-' + Math.floor(status / 100) + 'xx';
ctrl.statusClass = 'error'; } else {
} else if (Math.floor(status / 400) === 1) { return 'unknown';
ctrl.statusClass = 'warn';
} else {
ctrl.statusClass = 'ok';
}
} }
}; };
}, },
......
spring-boot-admin-server-ui/modules/applications-trace/components/trace.tpl.html
<div class="event" ng-class="statusClass" ng-click="$ctrl.toggle()"> <div class="event" ng-class="$ctrl.getStatusClass()" ng-click="$ctrl.toggle()">
<div class="time">{{$ctrl.trace.timestamp | date:'HH:mm:ss.sss'}} <div class="time">{{$ctrl.trace.timestamp | date:'HH:mm:ss.sss'}}
<br/><small class="muted">{{$ctrl.trace.timestamp | date:'dd.MM.yyyy'}}</small></div> <br/><small class="muted">{{$ctrl.trace.timestamp | date:'dd.MM.yyyy'}}</small></div>
<div class="title"> <div class="title">
<span class="status">{{$ctrl.trace.info.headers.response.status || '???' }}</span> <span class="status">{{$ctrl.trace.info.headers.response.status || '???' }}</span>
<span class="muted"> - {{$ctrl.trace.info.method}}</span> {{$ctrl.trace.info.path}} <span class="muted"> - {{$ctrl.trace.info.method}}</span> {{$ctrl.trace.info.path}}
</div> </div>
<pre ng-show="$ctrl.show">{{$ctrl.trace.info | json}}</pre> <pre ng-show="$ctrl.show">{{$ctrl.trace.info | json}}</pre>
</div> </div>
spring-boot-admin-server-ui/modules/applications-trace/css/module.css
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
list-style-type: none; list-style-type: none;
padding-left: 120px; padding-left: 120px;
} }
.timeline:before { .timeline:before {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -13,20 +12,18 @@ ...@@ -13,20 +12,18 @@
width: 6px; width: 6px;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
background: rgb(80,80,80); 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: -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-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: -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: -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: -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: 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; z-index: 5;
} }
.timeline li { .timeline li {
padding: 1em 0; padding: 1em 0;
} }
.timeline li:after { .timeline li:after {
content: ""; content: "";
display: block; display: block;
...@@ -34,26 +31,23 @@ ...@@ -34,26 +31,23 @@
clear: both; clear: both;
visibility: hidden; visibility: hidden;
} }
.timeline .event { .timeline .event {
position: relative; position: relative;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
left: 15px; left: 15px;
padding-left: 5px; padding-left: 5px;
cursor:pointer; cursor: pointer;
} }
.timeline .event .time { .timeline .event .time {
position: absolute; position: absolute;
left: -120px; left: -120px;
margin-left: -25px; margin-left: -25px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align:right; text-align: right;
width: 120px; width: 120px;
} }
.timeline .event:before { .timeline .event:before {
box-sizing: border-box; box-sizing: border-box;
content: ' '; content: ' ';
...@@ -68,35 +62,34 @@ ...@@ -68,35 +62,34 @@
left: -6px; left: -6px;
margin-left: -15px; margin-left: -15px;
} }
.event.http-4xx:before {
.event.warn:before {
border-color: #e0ba2d; border-color: #e0ba2d;
} }
.event.warn > .title > .status { .event.http-4xx > .title > .status {
color: #e0ba2d; color: #e0ba2d;
} }
.event.http-5xx:before {
.event.error:before {
border-color: #b30000; border-color: #b30000;
} }
.event.error > .title > .status { .event.http-5xx > .title > .status {
color: #b30000; color: #b30000;
} }
.event.http-1xx:before,
.event.ok:before { .event.http-2xx:before,
.event.http-3xx:before {
border-color: #6db33f; border-color: #6db33f;
} }
.event.ok > .title > .status { .event.http-1xx > .title > .status,
.event.http-2xx > .title > .status,
.event.http-3xx > .title > .status {
color: #6db33f; color: #6db33f;
} }
.event.unknown:before { .event.unknown:before {
border-color: #999999; border-color: #999999;
} }
.event.unknown > .title > .status { .event.unknown > .title > .status {
color: #999999; color: #999999;
} }
.timeline .event:hover:before { .timeline .event:hover:before {
background: #ccc; 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