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"> <table class="table">
<tr ng-repeat-start="cache in $ctrl.caches track by cache.name"> <tr ng-repeat-start="cache in $ctrl.caches track by cache.name">
<td rowspan="2" ng-bind="cache.name"></td> <td rowspan="2" ng-bind="cache.name"></td>
<td>size</td> <td>size</td>
<td ng-bind="cache.size"> <td ng-bind="cache.size">
</tr> </tr>
<tr ng-repeat-end ng-if="cache.hitRatio || cache.missRatio"> <tr ng-repeat-end ng-if="cache.hitRatio || cache.missRatio">
<td colspan="2"> <td colspan="2">
<div class="progress" style="margin-bottom: 0px;"> <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.hitRatio" class="bar bar-success" ng-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 ng-if="cache.missRatio" class="bar bar-danger" ng-style="{width: cache.missRatio + '%'}">{{cache.missRatio}}% misses</div>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-details/components/datasourceStats.tpl.html
<table class="table"> <table class="table">
<tr ng-repeat-start="datasource in $ctrl.datasources track by datasource.name"> <tr ng-repeat-start="datasource in $ctrl.datasources track by datasource.name">
<td rowspan="2" ng-bind="datasource.name"></td> <td rowspan="2" ng-bind="datasource.name"></td>
<td>active connections</td> <td>active connections</td>
<td ng-bind="datasource.active"></td> <td ng-bind="datasource.active"></td>
</tr> </tr>
<tr ng-repeat-end> <tr ng-repeat-end>
<td colspan="2"> <td colspan="2">
<div class="progress" style="margin-bottom: 0px;"> <div class="progress" style="margin-bottom: 0px;">
<div class="bar" ng-class="$ctrl.getBarClass(datasource.usage)" style="width: {{datasource.usage}}%;">{{datasource.usage}}%</div> <div class="bar" ng-class="$ctrl.getBarClass(datasource.usage)" ng-style="{width: datasource.usage + '%'}">{{datasource.usage}}%</div>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-details/components/memoryStats.tpl.html
<table class="table"> <table class="table">
<tr> <tr>
<td colspan="2"> <span>Memory ({{ $ctrl.memory.used | humanBytes:$ctrl.memory.unit }} / {{ $ctrl.memory.total | humanBytes:$ctrl.memory.unit }})</span> <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="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 class="bar" ng-class="$ctrl.getBarClass($ctrl.memory.percentUsed)" ng-style="{width: $ctrl.memory.percentUsed + '%'}">{{$ctrl.memory.percentUsed}}%</div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <span>Heap Memory ({{ $ctrl.heap.used | humanBytes:$ctrl.heap.unit }} / {{ $ctrl.heap.total | humanBytes:$ctrl.heap.unit }})</span> <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="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 class="bar" ng-class="$ctrl.getBarClass($ctrl.heap.percentUsed)" ng-style="{width: $ctrl.heap.percentUsed +'%'}">{{$ctrl.heap.percentUsed}}%</div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Initial Heap (-Xms)</td> <td>Initial Heap (-Xms)</td>
<td>{{$ctrl.heap.init | humanBytes:$ctrl.heap.unit }}</td> <td>{{$ctrl.heap.init | humanBytes:$ctrl.heap.unit }}</td>
</tr> </tr>
<tr> <tr>
<td>Maximum Heap (-Xmx)</td> <td>Maximum Heap (-Xmx)</td>
<td>{{$ctrl.heap.max | humanBytes:$ctrl.heap.unit }}</td> <td>{{$ctrl.heap.max | humanBytes:$ctrl.heap.unit }}</td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <span>Non-Heap Memory ({{ $ctrl.nonheap.used | humanBytes:$ctrl.nonheap.unit }} / {{ $ctrl.nonheap.total | humanBytes:$ctrl.nonheap.unit }})</span> <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="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 class="bar" ng-class="$ctrl.getBarClass($ctrl.nonheap.percentUsed)" ng-style="{width: $ctrl.nonheap.percentUsed + '%'}">{{$ctrl.nonheap.percentUsed}}%</div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Initial Non-Heap</td> <td>Initial Non-Heap</td>
<td>{{$ctrl.nonheap.init | humanBytes:$ctrl.nonheap.unit }}</td> <td>{{$ctrl.nonheap.init | humanBytes:$ctrl.nonheap.unit }}</td>
</tr> </tr>
<tr> <tr>
<td>Maximum Non-Heap</td> <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">{{$ctrl.nonheap.max | humanBytes:$ctrl.nonheap.unit }}</td>
<td ng-show="$ctrl.nonheap.max <= 0">unbounded</td> <td ng-show="$ctrl.nonheap.max <= 0">unbounded</td>
</tr> </tr>
</table> </table>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-metrics/directives/richMetricBar.tpl.html
<div> <div>
{{metric.name}} (count: {{metric.count}}) {{metric.name}} (count: {{metric.count}})
<div ng-if="metric.count > 1" class="progress with-marks"> <div ng-if="metric.count > 1" class="progress with-marks">
<div class="mark-current" style="left: {{valueWidth}}%"></div> <div class="mark-current" ng-style="{left: valueWidth + '%'}"></div>
<div class="bar-offset" style="width:{{minWidth}}%"></div> <div class="bar-offset" ng-style="{width: minWidth + '%'}"></div>
<div class="bar bar-success" style="width: {{avgWidth - minWidth}}%;"></div> <div class="bar bar-success" ng-style="{width: (avgWidth - minWidth) + '%'}"></div>
<div class="bar bar-success" style="width: {{maxWidth - avgWidth}}%"></div> <div class="bar bar-success" ng-style="{width: (maxWidth - avgWidth) + '%'}"></div>
<div tooltip="value {{metric.value}}" class="value-mark" style="left: {{valueWidth}}%;">{{metric.value}}</div> <div tooltip="value {{metric.value}}" class="value-mark" ng-style="{left: valueWidth + '%'}">{{metric.value}}</div>
</div> </div>
<div ng-if="metric.count > 1" class="bar-scale"> <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="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" style="left: {{maxWidth}}%;"><small class="muted">{{metric.max}}</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" style="left: {{avgWidth}}%;">{{metric.avg}}</div> <div tooltip="average {{metric.avg}}" class="pitch-line" ng-style="{left: avgWidth + '%'}">{{metric.avg}}</div>
</div> </div>
<div ng-if="metric.count <= 1" class="progress" style="margin-bottom: 0px;"> <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 class="bar bar-success" ng-style="{width: valueWidth + '%'}" style="text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div> </div>
</div> </div>
\ No newline at end of file
spring-boot-admin-server-ui/modules/applications-metrics/directives/simpleMetricBar.tpl.html
<div> <div>
{{metric.name}} {{metric.name}}
<div class="progress" style="margin-bottom: 0px;"> <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 class="bar bar-success" ng-style="{width: valueWidth + '%'}" style="text-align:right; padding-right: 5px;">{{metric.value}}</div>
</div> </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 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 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> </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="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> <div class="arrow"></div>
<h3 class="popover-title" ng-bind="$popover.title" ng-if="$popover.title"></h3> <h3 class="popover-title" ng-bind="$popover.title" ng-if="$popover.title"></h3>
<div class="popover-content" ng-transclude></div> <div class="popover-content" ng-transclude></div>
</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