Fix usage of expressions in style attributes

spring-boot-admin-server-ui/modules/applications-details/components/cacheStats.tpl.html

@@ -7,8 +7,8 @@
 	<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 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>

spring-boot-admin-server-ui/modules/applications-details/components/datasourceStats.tpl.html

@@ -7,7 +7,7 @@
 	<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 class="bar" ng-class="$ctrl.getBarClass(datasource.usage)" ng-style="{width: datasource.usage + '%'}">{{datasource.usage}}%</div>
 			</div>
 		</td>
 	</tr>

spring-boot-admin-server-ui/modules/applications-details/components/memoryStats.tpl.html

@@ -2,14 +2,14 @@
 	<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 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)" 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>
 		</td>
 	</tr>
@@ -24,7 +24,7 @@
 	<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 class="bar" ng-class="$ctrl.getBarClass($ctrl.nonheap.percentUsed)" ng-style="{width: $ctrl.nonheap.percentUsed + '%'}">{{$ctrl.nonheap.percentUsed}}%</div>
 			</div>
 		</td>
 	</tr>

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 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" 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 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" 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>
\ 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 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 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="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>