Skip to content

S
spring-boot-admin
Commit d59653e2 by Johannes Edmeier
Options

Fix usage of expressions in style attributes

To fix the IE11 css quirks we need to use the ngStyle directive instead of just using expressions inside regular style attributes. fixes #280
parent 933acac5
Showing with 101 additions and 94 deletions
spring-boot-admin-server-ui/modules/applications-details/components/cacheStats.tpl.html
<table class="table">
<tr ng-repeat-start="cache in $ctrl.caches track by cache.name">
<td rowspan="2" ng-bind="cache.name"></td>
<td>size</td>
<td ng-bind="cache.size">
</tr>
<tr ng-repeat-end ng-if="cache.hitRatio || cache.missRatio">
<td colspan="2">
<div class="progress" style="margin-bottom: 0px;">
<div ng-if="cache.hitRatio" class="bar bar-success" style="width:{{cache.hitRatio}}%;">{{cache.hitRatio}}% hits</div>
<div ng-if="cache.missRatio" class="bar bar-danger" style="width:{{cache.missRatio}}%;">{{cache.missRatio}}% misses</div>
</div>
</td>
</tr>
</table>
<tr ng-repeat-start="cache in $ctrl.caches track by cache.name">
<td rowspan="2" ng-bind="cache.name"></td>
<td>size</td>
<td ng-bind="cache.size">
</tr>
<tr ng-repeat-end ng-if="cache.hitRatio || cache.missRatio">
<td colspan="2">
<div class="progress" style="margin-bottom: 0px;">
<div ng-if="cache.hitRatio" class="bar bar-success" ng-style="{width: cache.hitRatio + '%'}">{{cache.hitRatio}}% hits</div>
<div ng-if="cache.missRatio" class="bar bar-danger" ng-style="{width: cache.missRatio + '%'}">{{cache.missRatio}}% misses</div>
</div>
</td>
</tr>
</table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-details/components/datasourceStats.tpl.html
<table class="table">
<tr ng-repeat-start="datasource in $ctrl.datasources track by datasource.name">
<td rowspan="2" ng-bind="datasource.name"></td>
<td>active connections</td>
<td ng-bind="datasource.active"></td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass(datasource.usage)" style="width: {{datasource.usage}}%;">{{datasource.usage}}%</div>
</div>
</td>
</tr>
</table>
<tr ng-repeat-start="datasource in $ctrl.datasources track by datasource.name">
<td rowspan="2" ng-bind="datasource.name"></td>
<td>active connections</td>
<td ng-bind="datasource.active"></td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass(datasource.usage)" ng-style="{width: datasource.usage + '%'}">{{datasource.usage}}%</div>
</div>
</td>
</tr>
</table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-details/components/memoryStats.tpl.html
<table class="table">
<tr>
<td colspan="2"> <span>Memory ({{ $ctrl.memory.used | humanBytes:$ctrl.memory.unit }} / {{ $ctrl.memory.total | humanBytes:$ctrl.memory.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.memory.percentUsed)" style="width: {{$ctrl.memory.percentUsed}}%;">{{$ctrl.memory.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td colspan="2"> <span>Heap Memory ({{ $ctrl.heap.used | humanBytes:$ctrl.heap.unit }} / {{ $ctrl.heap.total | humanBytes:$ctrl.heap.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.heap.percentUsed)" style="width: {{$ctrl.heap.percentUsed}}%;">{{$ctrl.heap.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td>Initial Heap (-Xms)</td>
<td>{{$ctrl.heap.init | humanBytes:$ctrl.heap.unit }}</td>
</tr>
<tr>
<td>Maximum Heap (-Xmx)</td>
<td>{{$ctrl.heap.max | humanBytes:$ctrl.heap.unit }}</td>
</tr>
<tr>
<td colspan="2"> <span>Non-Heap Memory ({{ $ctrl.nonheap.used | humanBytes:$ctrl.nonheap.unit }} / {{ $ctrl.nonheap.total | humanBytes:$ctrl.nonheap.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.nonheap.percentUsed)" style="width: {{$ctrl.nonheap.percentUsed}}%;">{{$ctrl.nonheap.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td>Initial Non-Heap</td>
<td>{{$ctrl.nonheap.init | humanBytes:$ctrl.nonheap.unit }}</td>
</tr>
<tr>
<td>Maximum Non-Heap</td>
<td ng-show="$ctrl.nonheap.max > 0">{{$ctrl.nonheap.max | humanBytes:$ctrl.nonheap.unit }}</td>
<td ng-show="$ctrl.nonheap.max <= 0">unbounded</td>
</tr>
</table>
<tr>
<td colspan="2"> <span>Memory ({{ $ctrl.memory.used | humanBytes:$ctrl.memory.unit }} / {{ $ctrl.memory.total | humanBytes:$ctrl.memory.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.memory.percentUsed)" ng-style="{width: $ctrl.memory.percentUsed + '%'}">{{$ctrl.memory.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td colspan="2"> <span>Heap Memory ({{ $ctrl.heap.used | humanBytes:$ctrl.heap.unit }} / {{ $ctrl.heap.total | humanBytes:$ctrl.heap.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.heap.percentUsed)" ng-style="{width: $ctrl.heap.percentUsed +'%'}">{{$ctrl.heap.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td>Initial Heap (-Xms)</td>
<td>{{$ctrl.heap.init | humanBytes:$ctrl.heap.unit }}</td>
</tr>
<tr>
<td>Maximum Heap (-Xmx)</td>
<td>{{$ctrl.heap.max | humanBytes:$ctrl.heap.unit }}</td>
</tr>
<tr>
<td colspan="2"> <span>Non-Heap Memory ({{ $ctrl.nonheap.used | humanBytes:$ctrl.nonheap.unit }} / {{ $ctrl.nonheap.total | humanBytes:$ctrl.nonheap.unit }})</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass($ctrl.nonheap.percentUsed)" ng-style="{width: $ctrl.nonheap.percentUsed + '%'}">{{$ctrl.nonheap.percentUsed}}%</div>
</div>
</td>
</tr>
<tr>
<td>Initial Non-Heap</td>
<td>{{$ctrl.nonheap.init | humanBytes:$ctrl.nonheap.unit }}</td>
</tr>
<tr>
<td>Maximum Non-Heap</td>
<td ng-show="$ctrl.nonheap.max > 0">{{$ctrl.nonheap.max | humanBytes:$ctrl.nonheap.unit }}</td>
<td ng-show="$ctrl.nonheap.max <= 0">unbounded</td>
</tr>
</table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-metrics/directives/richMetricBar.tpl.html
<div>
{{metric.name}} (count: {{metric.count}})
<div ng-if="metric.count > 1" class="progress with-marks">
<div class="mark-current" style="left: {{valueWidth}}%"></div>
<div class="bar-offset" style="width:{{minWidth}}%"></div>
<div class="bar bar-success" style="width: {{avgWidth - minWidth}}%;"></div>
<div class="bar bar-success" style="width: {{maxWidth - avgWidth}}%"></div>
<div tooltip="value {{metric.value}}" class="value-mark" style="left: {{valueWidth}}%;">{{metric.value}}</div>
</div>
<div ng-if="metric.count > 1" class="bar-scale">
<div tooltip="min {{metric.min}}" class="pitch-line" style="left: {{minWidth}}%;"><small class="muted">{{metric.min}}</small></div>
<div tooltip="max {{metric.max}}" class="pitch-line" style="left: {{maxWidth}}%;"><small class="muted">{{metric.max}}</small></div>
<div tooltip="average {{metric.avg}}" class="pitch-line" style="left: {{avgWidth}}%;">{{metric.avg}}</div>
</div>
<div ng-if="metric.count <= 1" class="progress" style="margin-bottom: 0px;">
<div class="bar bar-success" style="width: {{valueWidth}}%; text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div>
</div>
{{metric.name}} (count: {{metric.count}})
<div ng-if="metric.count > 1" class="progress with-marks">
<div class="mark-current" ng-style="{left: valueWidth + '%'}"></div>
<div class="bar-offset" ng-style="{width: minWidth + '%'}"></div>
<div class="bar bar-success" ng-style="{width: (avgWidth - minWidth) + '%'}"></div>
<div class="bar bar-success" ng-style="{width: (maxWidth - avgWidth) + '%'}"></div>
<div tooltip="value {{metric.value}}" class="value-mark" ng-style="{left: valueWidth + '%'}">{{metric.value}}</div>
</div>
<div ng-if="metric.count > 1" class="bar-scale">
<div tooltip="min {{metric.min}}" class="pitch-line" ng-style="{left: minWidth + '%'}"><small class="muted">{{metric.min}}</small></div>
<div tooltip="max {{metric.max}}" class="pitch-line" ng-style="{left: maxWidth + '%'}"><small class="muted">{{metric.max}}</small></div>
<div tooltip="average {{metric.avg}}" class="pitch-line" ng-style="{left: avgWidth + '%'}">{{metric.avg}}</div>
</div>
<div ng-if="metric.count <= 1" class="progress" style="margin-bottom: 0px;">
<div class="bar bar-success" ng-style="{width: valueWidth + '%'}" style="text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div>
</div>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-metrics/directives/simpleMetricBar.tpl.html
<div>
{{metric.name}}
<div class="progress" style="margin-bottom: 0px;">
<div class="bar bar-success" style="width: {{valueWidth}}%; text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div>
</div>
{{metric.name}}
<div class="progress" style="margin-bottom: 0px;">
<div class="bar bar-success" ng-style="{width: valueWidth + '%'}" style="text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div>
</div>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-threads/components/threadSummary.tpl.html
<div class="progress">
<div ng-repeat="(state, stats) in $ctrl.threadSummary" ng-if="stats.count &gt 0" class="bar" ng-class="stats.cssClass" style="width: {{stats.percentage}}%">{{state}} {{stats.count}}</div>
</div>
<div ng-repeat="(state, stats) in $ctrl.threadSummary" ng-if="stats.count &gt 0" class="bar" ng-class="stats.cssClass" ng-style="{width: stats.percentage +'%'}">{{state}} {{stats.count}}</div>
</div>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications/components/popover.tpl.html
<div class="popover fade bottom" ng-class="{'in' : $popover.isVisible()}" style="display: {{$popover.isVisible() ? 'block' : 'none'}}; top: {{$popover.offset.top}}px; left: {{$popover.offset.left}}px; ">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="$popover.title" ng-if="$popover.title"></h3>
<div class="popover-content" ng-transclude></div>
<div class="popover fade bottom" ng-class="{'in' : $popover.isVisible()}" ng-style="{ display: $popover.isVisible() ? 'block' : 'none', top: $popover.offset.top+'px', left: $popover.offset.left + 'px' } ">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="$popover.title" ng-if="$popover.title"></h3>
<div class="popover-content" ng-transclude></div>
</div>
\ 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