From d001825935c4644908b2b5524da45498eb435a6f Mon Sep 17 00:00:00 2001
From: Kelly Domico <kelly.domico@hpe.com>
Date: Thu, 24 Mar 2016 15:22:26 -0700
Subject: [PATCH] Styling of services tab

---
 .../applications/application/application.scss |  1 +
 .../application/services/services.html        | 44 ++++++++++++---
 .../application/services/services.module.js   | 23 +++++++-
 .../application/services/services.scss        | 55 +++++++++++++++++++
 4 files changed, 112 insertions(+), 11 deletions(-)
 create mode 100644 src/plugins/cloud-foundry/view/applications/application/services/services.scss

diff --git a/src/plugins/cloud-foundry/view/applications/application/application.scss b/src/plugins/cloud-foundry/view/applications/application/application.scss
index 4e4f851a63..cf276e3fa9 100644
--- a/src/plugins/cloud-foundry/view/applications/application/application.scss
+++ b/src/plugins/cloud-foundry/view/applications/application/application.scss
@@ -1 +1,2 @@
+@import "services/services";
 @import "summary/summary";
diff --git a/src/plugins/cloud-foundry/view/applications/application/services/services.html b/src/plugins/cloud-foundry/view/applications/application/services/services.html
index 62c47ae230..60e64c083b 100644
--- a/src/plugins/cloud-foundry/view/applications/application/services/services.html
+++ b/src/plugins/cloud-foundry/view/applications/application/services/services.html
@@ -1,8 +1,36 @@
-<h1 ui-view="title">Application Services for {{ applicationServicesCtrl.appModel.application.summary.name }}</h1>
-
-<ul ng-repeat="service in applicationServicesCtrl.model.data.resources track by service.metadata.guid">
-  <li><strong>{{service.entity.label}} (v{{service.entity.version}}):</strong> {{service.entity.description}}</li>
-  
-</ul>
-
-
+<div class="panel panel-default"
+  ng-repeat="service in applicationServicesCtrl.model.data.resources track by service.metadata.guid">
+  <div class="panel-body service-panel">
+    <div class="col-md-6 service-text">
+      <i class="helion-icon helion-icon-4x helion-icon-Service_business service-icon"></i>
+      <div>
+        <h4 class="font-semi-bold">{{ ::service.entity.label }}</h4>
+        <p>
+          {{ ::service.entity.description }}. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat.
+        </p>
+      </div>
+    </div>
+    <div class="col-md-6 service-metadata">
+      <dl>
+        <dt>Version</dt>
+        <dd>{{ ::service.entity.version }}</dd>
+        <dt>Category</dt>
+        <dd>Data and Analytics / Graph</dd>
+        <dt class="service-attached">1 Attached</dt>
+      </dl>
+      <div class="service-actions">
+        <actions-menu actions="applicationServicesCtrl.serviceActions"
+          action-target="service" menu-icon="helion-icon helion-icon-More"
+          menu-position="actions-menu-right">
+        </actions-menu>
+        <button class="btn btn-sm btn-link">
+          Add Service
+          <i class="helion-icon helion-icon-Plus"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/plugins/cloud-foundry/view/applications/application/services/services.module.js b/src/plugins/cloud-foundry/view/applications/application/services/services.module.js
index a1889062bf..1981c6e7d3 100644
--- a/src/plugins/cloud-foundry/view/applications/application/services/services.module.js
+++ b/src/plugins/cloud-foundry/view/applications/application/services/services.module.js
@@ -18,7 +18,6 @@
     });
   }
 
-
   ApplicationServicesController.$inject = [
     'app.model.modelManager',
     '$stateParams'
@@ -34,9 +33,27 @@
    */
   function ApplicationServicesController(modelManager, $stateParams) {
     this.model = modelManager.retrieve('cloud-foundry.model.service');
-    this.id = $stateParams.guid;
-    this.model.all()
     this.appModel = modelManager.retrieve('cloud-foundry.model.application');
+    this.id = $stateParams.guid;
+    this.model.all();
+    this.serviceActions = [
+      {
+        name: 'Detach',
+        execute: function (target) {
+          /* eslint-disable */
+          alert('Detach ' + target.entity.label);
+          /* eslint-enable */
+        }
+      },
+      {
+        name: 'Manage Services',
+        execute: function (target) {
+          /* eslint-disable */
+          alert('Manage services for ' + target.entity.label);
+          /* eslint-enable */
+        }
+      }
+    ];
   }
 
   angular.extend(ApplicationServicesController.prototype, {
diff --git a/src/plugins/cloud-foundry/view/applications/application/services/services.scss b/src/plugins/cloud-foundry/view/applications/application/services/services.scss
new file mode 100644
index 0000000000..861812f0fc
--- /dev/null
+++ b/src/plugins/cloud-foundry/view/applications/application/services/services.scss
@@ -0,0 +1,55 @@
+.service-panel {
+  display: flex;
+  align-items: stretch;
+}
+
+.service-text {
+  display: flex;
+}
+
+.service-icon {
+  display: block;
+  padding: $hpe-unit-space * 1.5;
+  padding-left: 0;
+}
+
+.service-metadata {
+  display: flex;
+  padding-left: $hpe-unit-space;
+
+  dt {
+    text-transform: uppercase;
+
+    &:not(:first-of-type) {
+      margin-top: $hpe-unit-space / 2;
+    }
+  }
+
+  .service-actions {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    text-align: right;
+
+    .btn-link {
+      margin-top: auto;
+      padding-right: 0;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+
+      .helion-icon {
+        font-weight: $hpe-font-weight-semibold;
+      }
+    }
+  }
+
+  .service-attached:before {
+    font-family: 'helion-icons';
+    content: '\e916';
+    margin-right: 5px;
+  }
+}