From 32effcd72631bef926b8592fee5e5cfaa7190472 Mon Sep 17 00:00:00 2001 From: denz Date: Wed, 25 May 2016 10:40:48 +0900 Subject: [PATCH] update inspector page ui --- .../features/agentInfo/agentInfoMain.html | 52 ++++++++------- .../webapp/features/agentList/agentList.html | 7 +- web/src/main/webapp/lib/css/pinpoint.css | 66 +++++++++++++++++-- web/src/main/webapp/styles/inspector.css | 66 +++++++++++++++++-- 4 files changed, 153 insertions(+), 38 deletions(-) diff --git a/web/src/main/webapp/features/agentInfo/agentInfoMain.html b/web/src/main/webapp/features/agentInfo/agentInfoMain.html index a46b7625c851..1601ee681f2e 100644 --- a/web/src/main/webapp/features/agentInfo/agentInfoMain.html +++ b/web/src/main/webapp/features/agentInfo/agentInfoMain.html @@ -3,21 +3,25 @@
-
-
-
-
- - - - -
- - -
-
+
+
+ + + + + + + +
+ + + + +
+
+ Timeline
@@ -44,12 +48,14 @@

{{eventInfo.eventTypeDesc}} - Event {{formatDate(selectTime)}}

- +

{{formatDate(selectTime)}}

- +
+ + + @@ -101,11 +107,11 @@

Information -

Detail

+
+
-

Information

Application Name {{agent.applicationName}}
+
@@ -114,7 +120,7 @@

Detail

N/A - +
Server Info
JVM Arguments
@@ -153,7 +159,7 @@

Detail

-
+

{{memoryGroup[0].title}}

diff --git a/web/src/main/webapp/features/agentList/agentList.html b/web/src/main/webapp/features/agentList/agentList.html index 139bd212eeb6..4538b9c8affd 100644 --- a/web/src/main/webapp/features/agentList/agentList.html +++ b/web/src/main/webapp/features/agentList/agentList.html @@ -1,7 +1,8 @@
-
- -
+
+ + +
  • diff --git a/web/src/main/webapp/lib/css/pinpoint.css b/web/src/main/webapp/lib/css/pinpoint.css index 7861f3c57a19..56fb2bb16f45 100644 --- a/web/src/main/webapp/lib/css/pinpoint.css +++ b/web/src/main/webapp/lib/css/pinpoint.css @@ -239,8 +239,8 @@ canvas {outline:none} padding-left: 20px; } .inspector-container { - width:95%; - position:relative; + margin-left: 12px; + margin-right: 22px; } .sidebar-spy { position: absolute; @@ -257,18 +257,54 @@ canvas {outline:none} -moz-border-radius: 0; border-radius: 0; } +.inspector-container table tr:nth-child(odd) { + background-color: #F3F3F3; +} +.inspector-container table tr:nth-child(even) { + background-color: #EDEDED; +} +.inspector-container table { + border: 1px solid #ECECEC; +} +.inspector-container table td { + border-top: none !important; +} +.inspector-container h4 { + color: #55B951 !important; + font-size: 12px !important; + margin: 2px !important; +} +.inspector-container .chart-collection { + border: 1px solid #ECECEC; + padding: 8px; + margin-top: 20px; +} .main-spy { - margin-left: 250px; + margin-left: 238px; height: 100%; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; } .inspector-datepicker { width: 190px !important; } .agent-list-directive .searchbox { - width: 100%; + height: 38px; + border-bottom: 1px solid #EDEDED; + background-color: #F5F5F5; +} +.agent-list-directive .searchbox input { + width: 200px; + margin: 5px 0px 0px 8px; +} +.agent-list-directive .searchbox span { + top: 11px; + right: 6px; + cursor:pointer; + position: absolute; + font-size: 14px; } .agent-list-directive .nav li > a:hover, @@ -291,7 +327,7 @@ canvas {outline:none} overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - -o-text-overow: ellipsis; + border-radius: 0px; } .agent-list-directive .nav-list li > a { @@ -352,6 +388,24 @@ canvas {outline:none} border-top-right-radius: 0px; border-top-left-radius: 0px; } +.inspector-container .slider-command { + height: 38px; + padding: 4px 0px 4px 12px; + text-align: right; + margin-left:-12px; + margin-right:-22px; + margin-bottom: 20px; + background-color: #F5F5F5; +} +.inspector-container .slider-command > button { + float:right; +} +.inspector-container .slider > span { + float: left; + font-size: 12px; + line-height: 2; + margin-bottom:-26px; +} .timeSlider .hide { display: none; } diff --git a/web/src/main/webapp/styles/inspector.css b/web/src/main/webapp/styles/inspector.css index dded1d82fd1b..26821730dd86 100644 --- a/web/src/main/webapp/styles/inspector.css +++ b/web/src/main/webapp/styles/inspector.css @@ -1,6 +1,6 @@ .inspector-container { - width:95%; - position:relative; + margin-left: 12px; + margin-right: 22px; } .sidebar-spy { position: absolute; @@ -17,18 +17,54 @@ -moz-border-radius: 0; border-radius: 0; } +.inspector-container table tr:nth-child(odd) { + background-color: #F3F3F3; +} +.inspector-container table tr:nth-child(even) { + background-color: #EDEDED; +} +.inspector-container table { + border: 1px solid #ECECEC; +} +.inspector-container table td { + border-top: none !important; +} +.inspector-container h4 { + color: #55B951 !important; + font-size: 12px !important; + margin: 2px !important; +} +.inspector-container .chart-collection { + border: 1px solid #ECECEC; + padding: 8px; + margin-top: 20px; +} .main-spy { - margin-left: 250px; + margin-left: 238px; height: 100%; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; } .inspector-datepicker { width: 190px !important; } .agent-list-directive .searchbox { - width: 100%; + height: 38px; + border-bottom: 1px solid #EDEDED; + background-color: #F5F5F5; +} +.agent-list-directive .searchbox input { + width: 200px; + margin: 5px 0px 0px 8px; +} +.agent-list-directive .searchbox span { + top: 11px; + right: 6px; + cursor:pointer; + position: absolute; + font-size: 14px; } .agent-list-directive .nav li > a:hover, @@ -51,7 +87,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - -o-text-overow: ellipsis; + border-radius: 0px; } .agent-list-directive .nav-list li > a { @@ -112,6 +148,24 @@ border-top-right-radius: 0px; border-top-left-radius: 0px; } +.inspector-container .slider-command { + height: 38px; + padding: 4px 0px 4px 12px; + text-align: right; + margin-left:-12px; + margin-right:-22px; + margin-bottom: 20px; + background-color: #F5F5F5; +} +.inspector-container .slider-command > button { + float:right; +} +.inspector-container .slider > span { + float: left; + font-size: 12px; + line-height: 2; + margin-bottom:-26px; +} .timeSlider .hide { display: none; }