diff --git a/src/app/utils/utils.service.js b/src/app/utils/utils.service.js index 2508746d08..8880bba61c 100644 --- a/src/app/utils/utils.service.js +++ b/src/app/utils/utils.service.js @@ -3,7 +3,8 @@ angular .module('app.utils') - .factory('app.utils.utilsService', utilsServiceFactory); + .factory('app.utils.utilsService', utilsServiceFactory) + .filter('mbToHumanSize', mbToHumanSizeFilter); utilsServiceFactory.$inject = [ '$log' @@ -46,10 +47,10 @@ if (sizeMb === -1) { return '∞'; } - if (sizeMb > 1048576) { + if (sizeMb >= 1048576) { return precisionIfUseful(sizeMb / 1048576) + ' TB'; } - if (sizeMb > 1024) { + if (sizeMb >= 1024) { return precisionIfUseful(sizeMb / 1024) + ' GB'; } return precisionIfUseful(sizeMb) + ' MB'; @@ -114,4 +115,14 @@ } + mbToHumanSizeFilter.$inject = [ + 'app.utils.utilsService' + ]; + + function mbToHumanSizeFilter(utilsService) { + return function (input) { + return utilsService.mbToHumanSize(input); + }; + } + })(); diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss index e6824054a0..17ed6a3b0c 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss @@ -1,30 +1,38 @@ @import "edit-app/edit-app"; -.application-details .summary .data-body { - padding: $hpe-unit-space * .75 $hpe-unit-space; - - .dl-horizontal > * { - margin-bottom: $hpe-unit-space * .5; - margin-left: auto; +.application-details { + .action-header { + color: $dove-gray2; + font-size: 18px; + padding-left: 0; + padding-right: 0; } + .summary .data-body { + padding: $hpe-unit-space * .75 $hpe-unit-space; + + .dl-horizontal > * { + margin-bottom: $hpe-unit-space * .5; + margin-left: auto; + } - dd.nowrap { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + dd.nowrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; - &.align-right { - clear: right; - text-align: right; + &.align-right { + clear: right; + text-align: right; + } } - } - .app-status-block { - line-height: 0; + .app-status-block { + line-height: 0; - .app-status { - margin-left: 0; - margin-right: 2px; + .app-status { + margin-left: 0; + margin-right: 2px; + } } } } diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html index 4f93339a90..1366db320b 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html @@ -1,16 +1,16 @@
-
App State
-
+
+ {{applicationGalleryCardCtrl.app.state.label | lowercase}} - - -
Instance Quota
-
{{applicationGalleryCardCtrl.app.entity.instances}}
+ +
+
Instances
+
{{ applicationGalleryCardCtrl.app.entity.instances }}
Disk Quota
-
{{applicationGalleryCardCtrl.app.entity.disk_quota}}
-
Memory Quota
-
{{applicationGalleryCardCtrl.app.entity.memory}} MB
+
{{ applicationGalleryCardCtrl.app.entity.disk_quota | mbToHumanSize }}
+
Memory
+
{{ applicationGalleryCardCtrl.app.entity.memory | mbToHumanSize }}
diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/gallery-view.scss b/src/plugins/cloud-foundry/view/applications/list/gallery-view/gallery-view.scss index cdf518ca6c..6fa08fab52 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/gallery-view.scss +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/gallery-view.scss @@ -15,6 +15,33 @@ $gallery-card-layout-steps: 4; vertical-align: middle; } +.app-gallery-card { + // Gives a heading of 60px with minimal changes + .card.panel .panel-heading { + color: $dove-gray2; + padding-top: 19px; + padding-bottom: 18px; + } + .dl-horizontal dt.app-status-wrapper { + display: flex; + flex-flow: row nowrap; + align-items: center; + font-size: 18px; + font-weight: 500; + color: $dove-gray2; + &>span { + text-transform: capitalize; + } + app-state-icon { + display: flex; + .app-status { + margin-left: 0; + } + margin-right: 6px; + } + } +} + // Tweak the card width slightly when samller to stop application state name over-running @media (min-width: 768px) { gallery-card { @@ -22,4 +49,4 @@ $gallery-card-layout-steps: 4; margin-left: 170px; } } -} \ No newline at end of file +}