Skip to content

Commit

Permalink
Merge pull request #1799 from denzelsN/master
Browse files Browse the repository at this point in the history 
update inspector page ui
  • Loading branch information
@denzelsN
denzelsN committed May 25, 2016
2 parents 1875262 + 32effcd commit b474860
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 38 deletions.
52 changes: 29 additions & 23 deletions web/src/main/webapp/features/agentInfo/agentInfoMain.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,25 @@
<div ng-include=" 'warning' "></div>
<div ng-include=" 'info' "></div>
<div ng-include=" 'loading' "></div>
<div style="padding-top:20px;">
<div>
<div>
<div class="datetimepicker input-group input-group-sm date" style="float:left;width:189px;margin-right:4px;">
<input id="target-picker" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default btn-success" ng-click="selectTime()">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()" style="float:left;margin-right:4px"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()" style="float:left;margin-right:4px"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
<div class="slider">
<div class="slider-command">
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()" style="margin-right:22px;"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>

<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()" style="margin-right:4px;"><span class="glyphicon glyphicon-minus"></span></button>
<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>

<div class="datetimepicker input-group input-group-sm date" style="width:189px;margin-right:4px;float:right">
<input id="target-picker" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default btn-success" ng-click="selectTime()">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<span>Timeline</span>
<svg id="timeSlider" class="timeSlider" width="100%" height="90px" style="margin-top:6px"></svg>
</div>
<div class="panel panel-info" ng-show="showEventInfo">
Expand All @@ -44,12 +48,14 @@ <h3 class="panel-title">{{eventInfo.eventTypeDesc}} - Event <span class="glyphic
</div>
</div>
<div>
<h3>Information <span style="float:right;font-size:16px;" class="label label-default">{{formatDate(selectTime)}}</span></h3>

<h3 style="text-align:right"><span style="font-size:16px;" class="label label-default">{{formatDate(selectTime)}}</span></h3>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-condensed" style="font-size:12px;">
<table class="table table-condensed" style="font-size:12px;margin-bottom:0px">
<tbody>
<tr>
<td colspan="4"><h4>Information</h4></td>
</tr>
<tr>
<td class="col-md-2 text-right"><strong>Application Name</strong></td>
<td class="col-md-3 text-left" ng-show="isSameApplication()">{{agent.applicationName}}</td>
Expand Down Expand Up @@ -101,11 +107,11 @@ <h3>Information <span style="float:right;font-size:16px;" class="label label-def
</table>
</div>
</div>
<div ng-show="showDetail">
<h3>Detail</h3>
<div ng-show="showDetail" style="margin-top:4px;">
<div style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-bordered" style="font-size:12px;">
<table class="table table-condensed table-bordered" style="font-size:12px;margin-bottom:20px;">
<tbody>
<tr class="active">
<td class="col-md-2 text-right"><strong>Server Info</strong></td>
Expand All @@ -114,7 +120,7 @@ <h3>Detail</h3>
<span ng-hide="agent.serverMetaData.serverInfo.length">N/A</span>
</td>
</tr>
<tr>
<tr style="background-color:#FFF;">
<td class="text-right"><strong>JVM Arguments</strong></td>
<td class="text-left">
<div style="overflow:auto;max-height:200px;" ng-show="agent.serverMetaData.vmArgs.length">
Expand Down Expand Up @@ -153,7 +159,7 @@ <h3>Detail</h3>
</div>
</div>
</div>
<div>
<div class="chart-collection">
<div class="row">
<div class="col-md-6">
<h4><span class="glyphicon glyphicon-question-sign heapTooltip" style="cursor:pointer;float:right;"></span> {{memoryGroup[0].title}}</h4>
Expand Down
7 changes: 4 additions & 3 deletions web/src/main/webapp/features/agentList/agentList.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="agent-list-directive">
<div class="control-group" ng-class="{success: searchAgents.name}">
<input type="text" ng-model="searchAgents.name" class="searchbox" placeholder="Search Agents"><span class="glyphicon glyphicon-question-sign agentListTooltip" style="position:absolute;right:2px;top:5px;cursor:pointer;font-size:14px;"></span>
</div>
<div class="searchbox">
<input type="text" ng-model="searchAgents.name" placeholder="Search Agents"/>
<span class="glyphicon glyphicon-question-sign agentListTooltip"></span>
</div>
<ul class="nav nav-list">
<li ng-repeat="(key, group) in agentGroup">
<h5 class="nav-header" tooltip="{{key}}" tooltip-placement="bottom">
Expand Down
66 changes: 60 additions & 6 deletions web/src/main/webapp/lib/css/pinpoint.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
66 changes: 60 additions & 6 deletions web/src/main/webapp/styles/inspector.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.inspector-container {
width:95%;
position:relative;
margin-left: 12px;
margin-right: 22px;
}
.sidebar-spy {
position: absolute;
Expand All @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit b474860

Please # to comment.