Displaying service coarse graph

Change-Id: Iee05e9114255a20ebf600337768d180514239299
diff --git a/views/ngXosViews/serviceGrid/src/templates/service-graph.tpl.html b/views/ngXosViews/serviceGrid/src/templates/service-graph.tpl.html
index c61da91..328ea7d 100644
--- a/views/ngXosViews/serviceGrid/src/templates/service-graph.tpl.html
+++ b/views/ngXosViews/serviceGrid/src/templates/service-graph.tpl.html
@@ -1,9 +1,6 @@
 <div class="row">
   <div class="col-sm-10">
     <h1>Graph</h1>
-    <ul>
-      <li>Use D3 to create a service chart based on coarse services?</li>
-    </ul>
   </div>
   <div class="col-sm-2">
     <a href="/admin/core/service/add" class="btn btn-success btn-block">
@@ -14,4 +11,30 @@
       Service List
     </a>
   </div>
-</div>
\ No newline at end of file
+</div>
+<xos-side-panel config="vm.panelConfig" show="vm.panelShow">
+  <h1>
+    {{vm.selectedNode.name}}
+    <small>
+      <i class="glyphicon glyphicon-{{vm.selectedNode.icon}}"></i>
+    </small>
+  </h1>
+  <table class="table">
+    <tr>
+      <td>Kind:</td>
+      <td>{{vm.selectedNode.kind}}</td>
+    </tr>
+    <tr>
+      <td>Enabled:</td>
+      <td>{{vm.selectedNode.enabled}}</td>
+    </tr>
+    <tr>
+      <td>Status:</td>
+      <td>{{vm.selectedNode.backend_status}}</td>
+    </tr>
+  </table>
+  <a ng-click="vm.exportToTosca(vm.selectedNode)" class="btn btn-primary">
+    Export to TOSCA
+    <i class="glyphicon glyphicon-export"></i>
+  </a>
+</xos-side-panel>
\ No newline at end of file