From 7074f6b897a0e703cb96f2da31a6f7b1f24f840b Mon Sep 17 00:00:00 2001
From: jiahuay <jiahua.yan@huawei.com>
Date: Fri, 24 Oct 2014 17:36:09 -0700
Subject: [PATCH] Change treenode popup position. Add IP in the popup div

Change-Id: Ic124f8b99274c2a48755a143b026200778c5d9b8
---
 v2/assets/css/chart.css |  6 ++++++
 v2/src/app/appDev.js    | 16 ++++++++--------
 v2/src/common/charts.js | 19 ++++++++++++++-----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/v2/assets/css/chart.css b/v2/assets/css/chart.css
index 860fbbc..9bda89e 100644
--- a/v2/assets/css/chart.css
+++ b/v2/assets/css/chart.css
@@ -97,6 +97,10 @@ treechart rect {
     fill: none;
     cursor: pointer;
 }
+treechart rect:hover {
+    stroke: #222;
+    stroke-width: 3px;
+}
 treechart rect[data-state='ok'] {
     fill: green;
 }
@@ -114,6 +118,8 @@ treechart text.info {
 }
 treechart .tip {
     border: 2px dashed #aaaaaa;
+    border-radius: 8px;
+    opacity: 0.9;
     padding: 8px 10px;
     background-color: #eeeeee;
 }
diff --git a/v2/src/app/appDev.js b/v2/src/app/appDev.js
index 69992b8..24d6b64 100644
--- a/v2/src/app/appDev.js
+++ b/v2/src/app/appDev.js
@@ -1165,35 +1165,35 @@ compassAppDev.run(function($httpBackend, settings, $http) {
                 "name": "172.29.8.40",
                 "state": "warning",
                 "children": [{
-                    "name": "os-controller",
+                    "name": "os-controller@10.145.89.15",
                     "state": "warning",
                     "children": []
                 }, {
-                    "name": "os-db-node",
+                    "name": "os-db-node@10.145.89.16",
                     "state": "ok",
                     "children": []
                 }, {
-                    "name": "os-keystone",
+                    "name": "os-keystone@10.145.89.17",
                     "state": "ok",
                     "children": []
                 }, {
-                    "name": "os-network",
+                    "name": "os-network@10.145.89.18",
                     "state": "ok",
                     "children": []
                 }, {
-                    "name": "os-image",
+                    "name": "os-image@10.145.89.19",
                     "state": "ok",
                     "children": []
                 }, {
-                    "name": "os-mq",
+                    "name": "os-mq@10.145.89.20",
                     "state": "ok",
                     "children": []
                 }, {
-                    "name": "os-compute1",
+                    "name": "os-compute1@10.145.89.21",
                     "state": "warning",
                     "children": []
                 }, {
-                    "name": "os-compute2",
+                    "name": "os-compute2@10.145.89.22",
                     "state": "ok",
                     "children": []
                 }]
diff --git a/v2/src/common/charts.js b/v2/src/common/charts.js
index 487147d..62f7a03 100644
--- a/v2/src/common/charts.js
+++ b/v2/src/common/charts.js
@@ -300,7 +300,7 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
                         tree = d3.layout.tree();
 
                     var margin = {
-                        top: 0,
+                        top: 20,
                         right: 120,
                         bottom: 0,
                         left: 130
@@ -407,8 +407,8 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
 
                                     var fo = svg.append("foreignObject")
                                         .attr({
-                                            "x": d.y + 100,
-                                            "y": d.x + 25,
+                                            "x": d.y - 330,
+                                            "y": d.x - 37,
                                             "width": foWidth,
                                             "class": "svg-tooltip"
                                         });
@@ -426,7 +426,16 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
                                         .html("Hostname");
                                     tr_hostname.append("td")
                                         .attr("class", "padding-left-15")
-                                        .html(d.name);
+                                        .html(d.name.split("@")[0]);
+
+                                    var tr_ip = table.append("tr");
+                                    tr_ip.append("td")
+                                        .attr("class", "pull-right")
+                                        .style("font-weight", "bold")
+                                        .html("IP");
+                                    tr_ip.append("td")
+                                        .attr("class", "padding-left-15")
+                                        .html(d.name.split("@")[1]);
 
                                     var tr_state = table.append("tr");
                                     tr_state.append("td")
@@ -467,7 +476,7 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
                                 return d.children || d._children ? "end" : "start";
                             })
                             .text(function(d) {
-                                return d.name;
+                                return d.name.split("@")[0];
                             })
                             .style("font-size", "15px");