From ab91a9b1bcda3d9191b9575ef07d74d1bde8aeec Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Mon, 21 Mar 2016 17:46:34 -0500 Subject: [PATCH 01/14] new card styling directive --- .../application-gallery-card.directive.js | 37 ++++++++++++++----- .../application-gallery-card.html | 34 +++++++++++------ 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js index 3ba39edae8..b52e2d9bdf 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js @@ -2,7 +2,7 @@ 'use strict'; angular - .module('cloud-foundry.view.applications.list') + .module('cloud-foundry.view.applications.gallery') .directive('applicationGalleryCard', applicationGalleryCard); applicationGalleryCard.$inject = []; @@ -15,26 +15,45 @@ controller: ApplicationGalleryCardController, controllerAs: 'applicationGalleryCardCtrl', scope: {}, - templateUrl: 'plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html' + templateUrl: 'plugins/cloud-foundry/view/applications/gallery/application-gallery-card/application-gallery-card.html' }; } - ApplicationGalleryCardController.$inject = ['$state']; + ApplicationGalleryCardController.$inject = [ + '$state', + '$scope', + ]; - function ApplicationGalleryCardController($state) { + function ApplicationGalleryCardController($state, $scope) { + var that = this; this.$state = $state; this.cardData = { title: this.app.entity.name, - status: { - description: this.app.entity.state === 'STARTED' ? '' : this.app.entity.state, - classes: this.app.entity.state === 'STARTED' ? '' : 'warning' - } }; + + var validStates = ['STARTED', 'RUNNING', 'STOPPING']; + $scope.$watch( + function () { + return that.app.entity.state; + }, function (newState) { + if (validStates.indexOf(newState) < 0) { + var icon = newState === 'ERROR' ? 'helion-icon-Critical_L' : 'helion-icon-Warning_L' + that.cardData.status = { + classes: newState === 'ERROR' ? 'danger' : 'warning', + description: newState, + icon: 'helion-icon helion-icon-lg ' + icon + }; + } else { + delete that.cardData.status; + } + } + ); + } angular.extend(ApplicationGalleryCardController.prototype, { goToApp: function () { - this.$state.go('cf.applications.application.summary', { guid: this.app.metadata.guid }); + this.$state.go('cf.applications.summary', { guid: this.app.metadata.guid }); } }); 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 c788a955ca..d4acfb8a4d 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,14 +1,26 @@ - GUID: {{applicationGalleryCardCtrl.app.metadata.guid}} -
- Created: -
- Updated: -
- Allocated Memory: {{applicationGalleryCardCtrl.app.entity.memory}} MB -
- Allocated Disk Space: {{applicationGalleryCardCtrl.app.entity.disk_quota}} MB -
- App Instances: {{applicationGalleryCardCtrl.app.entity.instances}} + + + + + + + + + + + + + + + + + + + + + + +
Memory Utilization{{applicationGalleryCardCtrl.app.entity.memory}} MB
Instances{{applicationGalleryCardCtrl.app.entity.instances}}
Disk Quota{{applicationGalleryCardCtrl.app.entity.disk_quota}}
State{{applicationGalleryCardCtrl.app.entity.state}}
Modified{{applicationGalleryCardCtrl.app.metadata.updated_at | date : 'M/d/yy h:mm:ss a'}}
 From a4526a96643862d39c814db9de32ce2a7ec26d95 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Mon, 21 Mar 2016 17:48:26 -0500 Subject: [PATCH 02/14] styling for new directive --- src/plugins/cloud-foundry/cloud-foundry.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index fabc92242c..bd158f795b 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1 +1,12 @@ // cloud-foundry.scss +application-gallery-card .attribute-name { + text-transform: uppercase; +} + +application-gallery-card .attribute-value { + text-transform: lowercase; +} + +application-gallery-card .attribute-value:first-letter { + text-transform: uppercase;; +} From c2bbb923a90bfa0e6948209e3449c8efbd6d9459 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Tue, 22 Mar 2016 10:40:39 -0500 Subject: [PATCH 03/14] refacatoring for new code structure --- .../application-gallery-card.directive.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js index b52e2d9bdf..f7eb19403f 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js @@ -2,7 +2,7 @@ 'use strict'; angular - .module('cloud-foundry.view.applications.gallery') + .module('cloud-foundry.view.applications.list') .directive('applicationGalleryCard', applicationGalleryCard); applicationGalleryCard.$inject = []; @@ -15,7 +15,7 @@ controller: ApplicationGalleryCardController, controllerAs: 'applicationGalleryCardCtrl', scope: {}, - templateUrl: 'plugins/cloud-foundry/view/applications/gallery/application-gallery-card/application-gallery-card.html' + templateUrl: 'plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html' }; } @@ -53,7 +53,7 @@ angular.extend(ApplicationGalleryCardController.prototype, { goToApp: function () { - this.$state.go('cf.applications.summary', { guid: this.app.metadata.guid }); + this.$state.go('cf.applications.application.summary', { guid: this.app.metadata.guid }); } }); From 132c31a85dd97ac6cd02a61b48024d8f002e6b9a Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Tue, 22 Mar 2016 12:02:02 -0500 Subject: [PATCH 04/14] fixed title colors, size according to spec --- .../cloud-foundry/api/service/service.api.js | 4 ++-- src/plugins/cloud-foundry/cloud-foundry.scss | 8 +++++++ .../model/application/application.model.js | 2 +- .../application-gallery-card.directive.js | 24 +++++++++---------- 4 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/plugins/cloud-foundry/api/service/service.api.js b/src/plugins/cloud-foundry/api/service/service.api.js index 0611339c37..bd24c7bd52 100644 --- a/src/plugins/cloud-foundry/api/service/service.api.js +++ b/src/plugins/cloud-foundry/api/service/service.api.js @@ -38,7 +38,7 @@ * @function all * @memberof cloud-foundry.api.service * @description Retrieve all the services from cloud foundry. - * @returns {promise} + * @returns {promise} a promise object * @public */ all: function () { @@ -50,7 +50,7 @@ * @memberof cloud-foundry.api.service * @description Retrieve summary of service with given app id * @param {string} guid - the service id - * @returns {promise} + * @returns {promise} a promise object * @public */ summary: function (guid) { diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index bd158f795b..968b09928c 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,12 +1,20 @@ // cloud-foundry.scss application-gallery-card .attribute-name { text-transform: uppercase; + font-size: 14pt; + color: #666666; } application-gallery-card .attribute-value { text-transform: lowercase; + font-size: 14pt; + color: #666666; } application-gallery-card .attribute-value:first-letter { text-transform: uppercase;; } + +application-gallery-card .panel-heading{ + color: #666666; +} diff --git a/src/plugins/cloud-foundry/model/application/application.model.js b/src/plugins/cloud-foundry/model/application/application.model.js index 27105e0368..5994ff1dd3 100644 --- a/src/plugins/cloud-foundry/model/application/application.model.js +++ b/src/plugins/cloud-foundry/model/application/application.model.js @@ -95,7 +95,7 @@ * @memberof cloud-foundry.model.application * @description get summary of an application at the model layer * @param {string} guid - the application id - * @returns {promise} + * @returns {promise} a promise object * @public */ summary: function (guid) { diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js index f7eb19403f..e2ad96b56e 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js @@ -21,14 +21,14 @@ ApplicationGalleryCardController.$inject = [ '$state', - '$scope', + '$scope' ]; function ApplicationGalleryCardController($state, $scope) { var that = this; this.$state = $state; this.cardData = { - title: this.app.entity.name, + title: this.app.entity.name }; var validStates = ['STARTED', 'RUNNING', 'STOPPING']; @@ -36,17 +36,17 @@ function () { return that.app.entity.state; }, function (newState) { - if (validStates.indexOf(newState) < 0) { - var icon = newState === 'ERROR' ? 'helion-icon-Critical_L' : 'helion-icon-Warning_L' - that.cardData.status = { - classes: newState === 'ERROR' ? 'danger' : 'warning', - description: newState, - icon: 'helion-icon helion-icon-lg ' + icon - }; - } else { - delete that.cardData.status; - } + if (validStates.indexOf(newState) < 0) { + var icon = newState === 'ERROR' ? 'helion-icon-Critical_L' : 'helion-icon-Warning_L'; + that.cardData.status = { + classes: newState === 'ERROR' ? 'danger' : 'warning', + description: newState, + icon: 'helion-icon helion-icon-lg ' + icon + }; + } else { + delete that.cardData.status; } + } ); } From 3a21f7a9b47424af8bc44ad7a8f801a9463999b1 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Tue, 22 Mar 2016 13:52:13 -0500 Subject: [PATCH 05/14] convert to DL --- src/plugins/cloud-foundry/cloud-foundry.scss | 4 +-- .../application-gallery-card.html | 35 +++++++------------ 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index 968b09928c..f0955d070f 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,18 +1,16 @@ // cloud-foundry.scss application-gallery-card .attribute-name { text-transform: uppercase; - font-size: 14pt; color: #666666; } application-gallery-card .attribute-value { text-transform: lowercase; - font-size: 14pt; color: #666666; } application-gallery-card .attribute-value:first-letter { - text-transform: uppercase;; + text-transform: uppercase; } application-gallery-card .panel-heading{ 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 d4acfb8a4d..d0f79593a1 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,26 +1,15 @@ - - - - - - - - - - - - - - - - - - - - - - -
Memory Utilization{{applicationGalleryCardCtrl.app.entity.memory}} MB
Instances{{applicationGalleryCardCtrl.app.entity.instances}}
Disk Quota{{applicationGalleryCardCtrl.app.entity.disk_quota}}
State{{applicationGalleryCardCtrl.app.entity.state}}
Modified{{applicationGalleryCardCtrl.app.metadata.updated_at | date : 'M/d/yy h:mm:ss a'}}
+
+
Memory Utilization
+
{{applicationGalleryCardCtrl.app.entity.memory}} MB
+
Instances
+
{{applicationGalleryCardCtrl.app.entity.instances}}
+
Disk Quota
+
{{applicationGalleryCardCtrl.app.entity.disk_quota}}
+
State
+
{{applicationGalleryCardCtrl.app.entity.state}}
+
Modified
+
{{applicationGalleryCardCtrl.app.metadata.updated_at | date : 'M/d/yy h:mm:ss a'}}
+
From 8ac443e0f1b94326dee9932e91baa3504f06a14b Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Tue, 22 Mar 2016 13:59:38 -0500 Subject: [PATCH 06/14] fix for blown merge --- src/plugins/cloud-foundry/cloud-foundry.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index 80f80fe4d2..5e7f2011ce 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -9,11 +9,6 @@ application-gallery-card .attribute-value { color: #666666; } -.action-bar { - height: $hpe-unit-space * 3; - line-height: $hpe-unit-space * 3; -} - application-gallery-card .attribute-value:first-letter { text-transform: uppercase; } @@ -21,3 +16,10 @@ application-gallery-card .attribute-value:first-letter { application-gallery-card .panel-heading{ color: #666666; } + +.action-bar { + height: $hpe-unit-space * 3; + line-height: $hpe-unit-space * 3; + vertical-align: middle; + margin-top: $hpe-unit-space; +} From 1fb7dddfbf0f007c76dfb9c888cb1b7a529ebeb3 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Wed, 23 Mar 2016 10:45:06 -0500 Subject: [PATCH 07/14] use default styling for dt/dd elements --- src/plugins/cloud-foundry/cloud-foundry.scss | 18 ----------------- .../application-gallery-card.html | 20 +++++++++---------- 2 files changed, 10 insertions(+), 28 deletions(-) diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index 5e7f2011ce..6e9bac6514 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,22 +1,4 @@ // cloud-foundry.scss -application-gallery-card .attribute-name { - text-transform: uppercase; - color: #666666; -} - -application-gallery-card .attribute-value { - text-transform: lowercase; - color: #666666; -} - -application-gallery-card .attribute-value:first-letter { - text-transform: uppercase; -} - -application-gallery-card .panel-heading{ - color: #666666; -} - .action-bar { height: $hpe-unit-space * 3; line-height: $hpe-unit-space * 3; 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 d0f79593a1..8673b51d10 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,15 +1,15 @@
-
Memory Utilization
-
{{applicationGalleryCardCtrl.app.entity.memory}} MB
-
Instances
-
{{applicationGalleryCardCtrl.app.entity.instances}}
-
Disk Quota
-
{{applicationGalleryCardCtrl.app.entity.disk_quota}}
-
State
-
{{applicationGalleryCardCtrl.app.entity.state}}
-
Modified
-
{{applicationGalleryCardCtrl.app.metadata.updated_at | date : 'M/d/yy h:mm:ss a'}}
+
Memory Utilization
+
{{applicationGalleryCardCtrl.app.entity.memory}} MB
+
Instances
+
{{applicationGalleryCardCtrl.app.entity.instances}}
+
Disk Quota
+
{{applicationGalleryCardCtrl.app.entity.disk_quota}}
+
State
+
{{applicationGalleryCardCtrl.app.entity.state}}
+
Modified
+
{{applicationGalleryCardCtrl.app.metadata.updated_at | date : 'M/d/yy h:mm:ss a'}}
 From d5f3a437d8f6fd1db49dd6222a103005ab2ec126 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Wed, 23 Mar 2016 14:29:26 -0500 Subject: [PATCH 08/14] took out realtime status panel --- .../application-gallery-card.directive.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js index e2ad96b56e..a5ff5ab517 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js @@ -30,25 +30,6 @@ this.cardData = { title: this.app.entity.name }; - - var validStates = ['STARTED', 'RUNNING', 'STOPPING']; - $scope.$watch( - function () { - return that.app.entity.state; - }, function (newState) { - if (validStates.indexOf(newState) < 0) { - var icon = newState === 'ERROR' ? 'helion-icon-Critical_L' : 'helion-icon-Warning_L'; - that.cardData.status = { - classes: newState === 'ERROR' ? 'danger' : 'warning', - description: newState, - icon: 'helion-icon helion-icon-lg ' + icon - }; - } else { - delete that.cardData.status; - } - } - ); - } angular.extend(ApplicationGalleryCardController.prototype, { From 63925fdadadfe56691e1edb1a1aeeb67b744c278 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Wed, 23 Mar 2016 14:47:14 -0500 Subject: [PATCH 09/14] removed scope --- .../application-gallery-card.directive.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js index a5ff5ab517..5296fc8e88 100644 --- a/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js +++ b/src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.directive.js @@ -20,12 +20,10 @@ } ApplicationGalleryCardController.$inject = [ - '$state', - '$scope' + '$state' ]; - function ApplicationGalleryCardController($state, $scope) { - var that = this; + function ApplicationGalleryCardController($state) { this.$state = $state; this.cardData = { title: this.app.entity.name From 2a05aaaf9d86afab15ba4618c2c73cf3198a4905 Mon Sep 17 00:00:00 2001 From: Shaoquan Chen Date: Mon, 21 Mar 2016 21:50:06 -0700 Subject: [PATCH 10/14] 140 - UI Styling for Application details -Summary view --- src/plugins/cloud-foundry/cloud-foundry.scss | 66 +++++++ .../applications/application/application.html | 24 ++- .../application/application.module.js | 12 ++ .../applications/application/application.scss | 1 + .../application/summary/summary.html | 165 +++++++++++++----- .../application/summary/summary.scss | 10 ++ .../view/applications/applications.scss | 1 + 7 files changed, 230 insertions(+), 49 deletions(-) create mode 100644 src/plugins/cloud-foundry/view/applications/application/application.scss create mode 100644 src/plugins/cloud-foundry/view/applications/application/summary/summary.scss create mode 100644 src/plugins/cloud-foundry/view/applications/applications.scss diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index beb3426efe..a669f5e46a 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,7 +1,73 @@ +@import "view/applications/applications"; +// TODO may need to move these rule out to helio-ui-theme .action-bar { height: $hpe-unit-space * 3; line-height: $hpe-unit-space * 3; vertical-align: middle; margin-top: $hpe-unit-space; + padding-left: $hpe-unit-space; + padding-right: $hpe-unit-space; + + .action-target-name { + display: inline-block; + font-size: $hpe-unit-space - 3px; + margin-left: $hpe-unit-space * .75; + } + + .action-target-state { + color: $brand-primary; + display: inline-block; + font-size: $hpe-unit-space + 3px; + } + + .btn { + margin-left: $hpe-unit-space / 3; + } +} + +table.table { + > thead > tr > th, + > tbody > tr:not([table-inline-message]) > td, + > tfoot > tr > td { + + .icon-link { + color: $text-color; + text-decoration: none; + + &:hover, + &:active { + color: $link-color; + text-decoration: none; + } + } + + .helion-icon { + line-height: 0; + font-size: $hpe-unit-space; + vertical-align: middle; + } + } +} + +.action-header { + + &.panel-heading { + line-height: 1; + padding-top: $hpe-unit-space * 1.1; + padding-bottom: $hpe-unit-space * .5; + } + + .btn { + line-height: 1; + text-transform: capitalize; + + * { + line-height: 0; + } + + .helion-icon { + margin-right: $hpe-unit-space / 3 + } + } } diff --git a/src/plugins/cloud-foundry/view/applications/application/application.html b/src/plugins/cloud-foundry/view/applications/application/application.html index 4eb467d029..6baaf078ea 100644 --- a/src/plugins/cloud-foundry/view/applications/application/application.html +++ b/src/plugins/cloud-foundry/view/applications/application/application.html @@ -1,17 +1,25 @@
- {{ appCtrl.model.application.summary.state }} - {{ appCtrl.model.application.summary.name }} + + + + {{ appCtrl.model.application.summary.name }}
- - -
@@ -30,4 +38,8 @@ -
+
+
+ +
+
diff --git a/src/plugins/cloud-foundry/view/applications/application/application.module.js b/src/plugins/cloud-foundry/view/applications/application/application.module.js index 8cc8525357..09348d36df 100644 --- a/src/plugins/cloud-foundry/view/applications/application/application.module.js +++ b/src/plugins/cloud-foundry/view/applications/application/application.module.js @@ -44,6 +44,18 @@ angular.extend(ApplicationController.prototype, { init: function () { this.model.getAppSummary(this.id); + }, + + launch: function () { + this.model.launch(this.id); + }, + + restart: function () { + this.model.restart(this.id); + }, + + stop: function () { + this.model.stop(this.id); } }); diff --git a/src/plugins/cloud-foundry/view/applications/application/application.scss b/src/plugins/cloud-foundry/view/applications/application/application.scss new file mode 100644 index 0000000000..4e4f851a63 --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/application/application.scss @@ -0,0 +1 @@ +@import "summary/summary"; diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html index b9ef2a7390..da1e19a82a 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html @@ -1,50 +1,129 @@ -
-
Summary
-
    -
  • - memory: {{ appCtrl.model.application.summary.memory }} -
    • - -
  • - running_instances: {{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }} -
    • - -
  • - disk_quota: {{ appCtrl.model.application.summary.disk_quota }} -
    • - -
  • - buildpack: {{ appCtrl.model.application.summary.buildpack }} -
    • - -
-
+
+
+ Summary + + + Edit + +
-
-
Services
-
    -
  • - {{ service }} -
    • -
-
+
+
+
+
MEMORY UTILIZATION
+
0 / {{ appCtrl.model.application.summary.memory }}
+ +
INSTANCES
+
{{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }}
+ +
DISK QUOTA
+
0 / {{ appCtrl.model.application.summary.disk_quota }}
+ +
STATE
+
+
MODIFIED
+
+
+
+
+
+
BUILDPACK
+
{{ appCtrl.model.application.summary.buildpack }}
-
-
Routes
-
    -
  • - {{ route }} -
    • -
+
CF TARGET
+
+ +
CF LOGIN
+
+
+
+
+
+ +
+
+ Service Instances + + + Add service + +
+
+ + + + + + + + + + + + + + + + + +
NameServicePlanENV.VARIABLES
{{ service.name }}{{ service.service_plan.service.label }}{{ service.service_plan.name }} + +
+
+
+
+ Routes + + + Add routes + +
+
+ + + + + + + + + + + + + +
RouteActions
{{ route.host + '.' + route.domain.name + '/' + route.path }}
+
+
-
-
Instances
-
    -
  • - {{ instance }} -
    • -
+
+
+ Instances + + + Add instances + +
+
+ + + + + + + + + + + + + + + + +
IndexStatus
{{ $index }}{{ instance.name }}
+
diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss new file mode 100644 index 0000000000..277a92d9e6 --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss @@ -0,0 +1,10 @@ +.application-details .summary .data-body { + padding: $hpe-unit-space * .75 $hpe-unit-space; + + .dl-horizontal > * { + margin-bottom: $hpe-unit-space * .5; + margin-left: auto; + } +} + + diff --git a/src/plugins/cloud-foundry/view/applications/applications.scss b/src/plugins/cloud-foundry/view/applications/applications.scss new file mode 100644 index 0000000000..e91ee0ce6f --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/applications.scss @@ -0,0 +1 @@ +@import "application/application"; From 5e0766a12cc20707fad93faac7084d4cf006c64a Mon Sep 17 00:00:00 2001 From: Shaoquan Chen Date: Wed, 23 Mar 2016 15:52:03 -0700 Subject: [PATCH 11/14] Adding missing `translate` --- .../application/summary/summary.html | 16 ++++++++-------- .../application/summary/summary.scss | 2 -- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html index da1e19a82a..607817bbf0 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html @@ -10,31 +10,31 @@
-
MEMORY UTILIZATION
+
MEMORY UTILIZATION
0 / {{ appCtrl.model.application.summary.memory }}
-
INSTANCES
+
INSTANCES
{{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }}
-
DISK QUOTA
+
DISK QUOTA
0 / {{ appCtrl.model.application.summary.disk_quota }}
-
STATE
+
STATE
-
MODIFIED
+
MODIFIED
-
BUILDPACK
+
BUILDPACK
{{ appCtrl.model.application.summary.buildpack }}
-
CF TARGET
+
CF TARGET
-
CF LOGIN
+
CF LOGIN
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 277a92d9e6..a7c777504d 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss @@ -6,5 +6,3 @@ margin-left: auto; } } - - From 112962e84f43b661966db22355f8ff10dc0dea61 Mon Sep 17 00:00:00 2001 From: Mike Hagedorn Date: Thu, 24 Mar 2016 10:23:27 -0500 Subject: [PATCH 12/14] fix indent --- src/plugins/cloud-foundry/cloud-foundry.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index 6e9bac6514..e74e35e519 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,7 +1,7 @@ // cloud-foundry.scss .action-bar { - height: $hpe-unit-space * 3; - line-height: $hpe-unit-space * 3; - vertical-align: middle; - margin-top: $hpe-unit-space; + height: $hpe-unit-space * 3; + line-height: $hpe-unit-space * 3; + vertical-align: middle; + margin-top: $hpe-unit-space; } From c04d7229c0f0464613d050a49e6c84ffcd2ffdfb Mon Sep 17 00:00:00 2001 From: Shaoquan Chen Date: Mon, 21 Mar 2016 21:50:06 -0700 Subject: [PATCH 13/14] 140 - UI Styling for Application details -Summary view --- src/plugins/cloud-foundry/cloud-foundry.scss | 68 +++++++- .../applications/application/application.html | 24 ++- .../application/application.module.js | 12 ++ .../applications/application/application.scss | 1 + .../application/summary/summary.html | 165 +++++++++++++----- .../application/summary/summary.scss | 10 ++ .../view/applications/applications.scss | 1 + 7 files changed, 231 insertions(+), 50 deletions(-) create mode 100644 src/plugins/cloud-foundry/view/applications/application/application.scss create mode 100644 src/plugins/cloud-foundry/view/applications/application/summary/summary.scss create mode 100644 src/plugins/cloud-foundry/view/applications/applications.scss diff --git a/src/plugins/cloud-foundry/cloud-foundry.scss b/src/plugins/cloud-foundry/cloud-foundry.scss index e74e35e519..a669f5e46a 100644 --- a/src/plugins/cloud-foundry/cloud-foundry.scss +++ b/src/plugins/cloud-foundry/cloud-foundry.scss @@ -1,7 +1,73 @@ -// cloud-foundry.scss +@import "view/applications/applications"; + +// TODO may need to move these rule out to helio-ui-theme .action-bar { height: $hpe-unit-space * 3; line-height: $hpe-unit-space * 3; vertical-align: middle; margin-top: $hpe-unit-space; + padding-left: $hpe-unit-space; + padding-right: $hpe-unit-space; + + .action-target-name { + display: inline-block; + font-size: $hpe-unit-space - 3px; + margin-left: $hpe-unit-space * .75; + } + + .action-target-state { + color: $brand-primary; + display: inline-block; + font-size: $hpe-unit-space + 3px; + } + + .btn { + margin-left: $hpe-unit-space / 3; + } +} + +table.table { + > thead > tr > th, + > tbody > tr:not([table-inline-message]) > td, + > tfoot > tr > td { + + .icon-link { + color: $text-color; + text-decoration: none; + + &:hover, + &:active { + color: $link-color; + text-decoration: none; + } + } + + .helion-icon { + line-height: 0; + font-size: $hpe-unit-space; + vertical-align: middle; + } + } +} + +.action-header { + + &.panel-heading { + line-height: 1; + padding-top: $hpe-unit-space * 1.1; + padding-bottom: $hpe-unit-space * .5; + } + + .btn { + line-height: 1; + text-transform: capitalize; + + * { + line-height: 0; + } + + .helion-icon { + margin-right: $hpe-unit-space / 3 + } + } } diff --git a/src/plugins/cloud-foundry/view/applications/application/application.html b/src/plugins/cloud-foundry/view/applications/application/application.html index 4eb467d029..6baaf078ea 100644 --- a/src/plugins/cloud-foundry/view/applications/application/application.html +++ b/src/plugins/cloud-foundry/view/applications/application/application.html @@ -1,17 +1,25 @@
- {{ appCtrl.model.application.summary.state }} - {{ appCtrl.model.application.summary.name }} + + + + {{ appCtrl.model.application.summary.name }}
- - -
@@ -30,4 +38,8 @@ -
+
+
+ +
+
diff --git a/src/plugins/cloud-foundry/view/applications/application/application.module.js b/src/plugins/cloud-foundry/view/applications/application/application.module.js index 8cc8525357..09348d36df 100644 --- a/src/plugins/cloud-foundry/view/applications/application/application.module.js +++ b/src/plugins/cloud-foundry/view/applications/application/application.module.js @@ -44,6 +44,18 @@ angular.extend(ApplicationController.prototype, { init: function () { this.model.getAppSummary(this.id); + }, + + launch: function () { + this.model.launch(this.id); + }, + + restart: function () { + this.model.restart(this.id); + }, + + stop: function () { + this.model.stop(this.id); } }); diff --git a/src/plugins/cloud-foundry/view/applications/application/application.scss b/src/plugins/cloud-foundry/view/applications/application/application.scss new file mode 100644 index 0000000000..4e4f851a63 --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/application/application.scss @@ -0,0 +1 @@ +@import "summary/summary"; diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html index b9ef2a7390..da1e19a82a 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html @@ -1,50 +1,129 @@ -
-
Summary
-
    -
  • - memory: {{ appCtrl.model.application.summary.memory }} -
    • - -
  • - running_instances: {{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }} -
    • - -
  • - disk_quota: {{ appCtrl.model.application.summary.disk_quota }} -
    • - -
  • - buildpack: {{ appCtrl.model.application.summary.buildpack }} -
    • - -
-
+
+
+ Summary + + + Edit + +
-
-
Services
-
    -
  • - {{ service }} -
    • -
-
+
+
+
+
MEMORY UTILIZATION
+
0 / {{ appCtrl.model.application.summary.memory }}
+ +
INSTANCES
+
{{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }}
+ +
DISK QUOTA
+
0 / {{ appCtrl.model.application.summary.disk_quota }}
+ +
STATE
+
+
MODIFIED
+
+
+
+
+
+
BUILDPACK
+
{{ appCtrl.model.application.summary.buildpack }}
-
-
Routes
-
    -
  • - {{ route }} -
    • -
+
CF TARGET
+
+ +
CF LOGIN
+
+
+
+
+
+ +
+
+ Service Instances + + + Add service + +
+
+ + + + + + + + + + + + + + + + + +
NameServicePlanENV.VARIABLES
{{ service.name }}{{ service.service_plan.service.label }}{{ service.service_plan.name }} + +
+
+
+
+ Routes + + + Add routes + +
+
+ + + + + + + + + + + + + +
RouteActions
{{ route.host + '.' + route.domain.name + '/' + route.path }}
+
+
-
-
Instances
-
    -
  • - {{ instance }} -
    • -
+
+
+ Instances + + + Add instances + +
+
+ + + + + + + + + + + + + + + + +
IndexStatus
{{ $index }}{{ instance.name }}
+
diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss new file mode 100644 index 0000000000..277a92d9e6 --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss @@ -0,0 +1,10 @@ +.application-details .summary .data-body { + padding: $hpe-unit-space * .75 $hpe-unit-space; + + .dl-horizontal > * { + margin-bottom: $hpe-unit-space * .5; + margin-left: auto; + } +} + + diff --git a/src/plugins/cloud-foundry/view/applications/applications.scss b/src/plugins/cloud-foundry/view/applications/applications.scss new file mode 100644 index 0000000000..e91ee0ce6f --- /dev/null +++ b/src/plugins/cloud-foundry/view/applications/applications.scss @@ -0,0 +1 @@ +@import "application/application"; From e6b83281a11875784f58391df390b74aaa84a6c6 Mon Sep 17 00:00:00 2001 From: Shaoquan Chen Date: Wed, 23 Mar 2016 15:52:03 -0700 Subject: [PATCH 14/14] Adding missing `translate` --- .../application/summary/summary.html | 16 ++++++++-------- .../application/summary/summary.scss | 2 -- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html index da1e19a82a..607817bbf0 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.html +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.html @@ -10,31 +10,31 @@
-
MEMORY UTILIZATION
+
MEMORY UTILIZATION
0 / {{ appCtrl.model.application.summary.memory }}
-
INSTANCES
+
INSTANCES
{{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }}
-
DISK QUOTA
+
DISK QUOTA
0 / {{ appCtrl.model.application.summary.disk_quota }}
-
STATE
+
STATE
-
MODIFIED
+
MODIFIED
-
BUILDPACK
+
BUILDPACK
{{ appCtrl.model.application.summary.buildpack }}
-
CF TARGET
+
CF TARGET
-
CF LOGIN
+
CF LOGIN
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 277a92d9e6..a7c777504d 100644 --- a/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss +++ b/src/plugins/cloud-foundry/view/applications/application/summary/summary.scss @@ -6,5 +6,3 @@ margin-left: auto; } } - -