Skip to content

Commit f561df8

Browse files
author
Sergey
committed
dashboard improved
Demo site added
1 parent b84f3f4 commit f561df8

File tree

5 files changed

+121
-89
lines changed

5 files changed

+121
-89
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ packages
99
/Perfon.Core/obj/Release
1010
/TestServer/bin
1111
/TestServer/obj/Debug
12+
/TestServer/obj/Release

‎Perfon.WebApi/UI/PerfCountersUI.html‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
88

99
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"" rel="stylesheet" />-->
10-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"" rel="stylesheet" />
1110
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
1211

1312
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
@@ -30,25 +29,30 @@
3029

3130

3231
<!-- Fixed navbar -->
33-
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
34-
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
35-
<span class="navbar-toggler-icon"></span>
36-
</button>
37-
<a class="navbar-brand" href="#">Perfon.Net</a>
38-
<div class="collapse navbar-collapse" id="navbarCollapse">
39-
<ul class="navbar-nav mr-auto">
40-
<li class="nav-item">
41-
<a class="nav-link" href="https://github.com/magsoft2/Perfon.Net">Help <span class="sr-only">(current)</span></a>
42-
</li>
43-
<li class="nav-item">
44-
<a class="nav-link" href="https://github.com/magsoft2/Perfon.Net">Github</a>
45-
</li>
32+
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
33+
<div class="container-fluid">
34+
<div class="navbar-header">
35+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-1" aria-expanded="false">
36+
<span class="sr-only">Toggle navigation</span>
37+
<span class="icon-bar"></span>
38+
<span class="icon-bar"></span>
39+
<span class="icon-bar"></span>
40+
</button>
41+
<a class="navbar-brand" href="#">Perfon.Net</a>
42+
</div>
43+
<div class="collapse navbar-collapse" id="example-1">
44+
<ul class="nav navbar-nav">
45+
<li><a href="https://github.com/magsoft2/Perfon.Net">Help <span class="sr-only">(current)</span></a></li>
46+
<li><a href="https://github.com/magsoft2/Perfon.Net">Github</a></li>
4647
</ul>
47-
</div>
48+
</div>
49+
50+
</div>
4851
</nav>
4952

53+
5054
<!-- Begin page content -->
51-
<div class="container-fluid" style="padding: 0px 15px 0;">
55+
<div class="container-fluid" style="padding: 60px 15px 0;">
5256
PLACEHOLDER_FOR_PANEL
5357
</div>
5458

‎Perfon.WebApi/UI/PerfCountersUIPanel.html‎

Lines changed: 96 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,68 @@
1-
<nav class="navbar navbar-default">
2-
<div class="">
3-
<form class="navbar-form">
4-
<div class="form-group">
5-
<label for="selected_date">Date </label>
6-
<input class="form-control" type="date" id="date1" name="selected_date" onchange="dateChange()">
7-
</div>
8-
<div class="form-group">
9-
<div class="form-check">
10-
<label class="form-check-label">
11-
<input class="form-check-input" type="checkbox" id="checkPollId" onchange="checkPoll()" value="">
12-
Poll server
13-
</label>
14-
</div>
15-
</div>
16-
<div class="form-group">
17-
<div class="btn btn-default" onclick="addChartBlock()">Add chart</div>
18-
</div>
19-
</form>
20-
</div>
21-
</nav>
22-
23-
<div id="chartsContainer">
1+
<!--<nav class="navbar navbar-default">-->
2+
<div class="pane">
3+
<form class="navbar-form">
4+
<div class="form-group">
5+
<label for="selected_date">Date </label>
6+
<input class="form-control date-inp" type="date" id="date1" name="selected_date" onchange="dateChange()">
7+
</div>
8+
<div class="form-group">
9+
<div class="form-check">
10+
<label class="form-check-label">
11+
<input class="form-check-input" type="checkbox" id="checkPollId" onchange="checkPoll()" value="">
12+
Poll server
13+
</label>
14+
</div>
15+
</div>
16+
<div class="form-group">
17+
<div class="btn btn-default" onclick="addChartBlock()">Add chart</div>
18+
</div>
19+
</form>
20+
<div id="chartsContainer">
2421

2522
</div>
23+
</div>
24+
<!--</nav>-->
25+
26+
2627

2728
<style>
2829
.graph-block
2930
{
30-
border:1px solid lightgray;
31+
border:1px solid #8f9aab;
3132
padding:5px;
3233
}
33-
select.form-control:not([size]):not([multiple])
34-
{
35-
padding-top: 2px;
36-
}
3734
@media (min-width: 1600px){
3835
.col-lg-xl-3
3936
{
4037
width:25%;
4138
}
4239
}
40+
select.input-sm {
41+
height: 21px;
42+
padding: 0px;
43+
background-color: #A0AEC1;
44+
}
45+
.date-inp
46+
{
47+
background-color: #A0AEC1;
48+
}
49+
body,.pane
50+
{
51+
background-color: #A0AEC1;
52+
}
53+
.labelsDiv
54+
{
55+
font-size:14px;
56+
}
57+
4358
</style>
4459
<script type="text/javascript">
4560

46-
var uri = 'perfcounters';
61+
var uri = 'api/perfcounters';
62+
if(window !== undefined)
63+
{
64+
uri = window.location.origin+ '/'+uri;
65+
}
4766
var globalChartBlockId = 0;
4867

4968
var graphBlocks = [];
@@ -54,11 +73,20 @@
5473

5574
$("#date1").val(new Date().toISOString().split('T')[0]);
5675

57-
var num = 6;
76+
var num = 8;
5877
for(let i=0;i<num;i++)
5978
{
6079
addChartBlock();
6180
}
81+
graphBlocks[0].selectCounter('RequestsCount, num/sec');
82+
graphBlocks[1].selectCounter('RequestProcessTime, ms');
83+
graphBlocks[2].selectCounter('RequestMaxProcessTime, ms');
84+
graphBlocks[3].selectCounter('CPU, %');
85+
graphBlocks[4].selectCounter('KBytes req. transmitted, kb/sec');
86+
graphBlocks[5].selectCounter('KBytes resp. transmitted, kb/sec');
87+
graphBlocks[6].selectCounter('GC 0-gen collections, num');
88+
graphBlocks[7].selectCounter('GC 1-gen collections, num');
89+
//graphBlocks[8].selectCounter('BadStatusResponsesCount, num/sec');
6290
});
6391

6492
function addChartBlock()
@@ -116,6 +144,8 @@
116144
this.graphDyg = undefined;
117145
this.graphBlockDOM = undefined;
118146
this.idx = idx;
147+
this.counterNames = [];
148+
this.selectedName = undefined;
119149

120150
this.resetGraph = function(){
121151
this.dataArray = [[0,0]];
@@ -133,7 +163,10 @@
133163
showRangeSelector: true,
134164
drawPoints: true,
135165
labelsDiv: lbl,
136-
fillGraph : true
166+
fillGraph : true,
167+
colors:["#336699"],
168+
fillAlpha : 0.3,
169+
rangeSelectorAlpha: 0.4
137170
//showRoller: true
138171
}
139172
);
@@ -144,13 +177,16 @@
144177

145178
getPerfCountersList().then(function(data)
146179
{
180+
self.counterNames.length=0;
147181
var ctrl = $(self.graphBlockDOM).find(".perfcounter-name").first();
148182
ctrl.find('option').remove();
149183
ctrl.append('<option value=""></option>');
150184
for(let i=0;i<data.length;i++)
151185
{
152186
ctrl.append('<option value="'+data[i]+'">'+data[i]+'</option>');
187+
self.counterNames.push(data[i]);
153188
}
189+
self.selectCounter(self.selectedName);
154190
});
155191
};
156192
this.resetData = function(){
@@ -165,25 +201,29 @@
165201
{
166202
return;
167203
}
204+
self.selectedName = name;
168205
getPerfCounterTrack(name, date).then(function(data)
169206
{
170-
if(self.dataArray === undefined)
171-
{
172-
self.dataArray = [];
173-
}
174-
self.dataArray.length = 0;
175-
var lastTime = new Date();
176-
for(let i=self.dataArray.length;i<data.length;i++)
207+
if(data !== undefined && data instanceof Array && data.length > 0)
177208
{
178-
lastTime = new Date(data[i].Timestamp);
179-
self.dataArray.push([lastTime, data[i].Value]);
180-
}
209+
if(self.dataArray === undefined)
210+
{
211+
self.dataArray = [];
212+
}
213+
self.dataArray.length = 0;
214+
var lastTime = new Date();
215+
for(let i=self.dataArray.length;i<data.length;i++)
216+
{
217+
lastTime = new Date(data[i].Timestamp);
218+
self.dataArray.push([lastTime, data[i].Value]);
219+
}
181220

182-
graph.updateOptions({
183-
//title: name,
184-
dateWindow:[lastTime-1000*60*15, lastTime],
185-
'file': self.dataArray
186-
});
221+
graph.updateOptions({
222+
//title: name,
223+
dateWindow:[lastTime-1000*60*15, lastTime],
224+
'file': self.dataArray
225+
});
226+
}
187227
});
188228
}
189229

@@ -196,7 +236,7 @@
196236
$('<form class="form-inline"></form>').appendTo(block);
197237
$('<div class="form-group" style="width: 100%;"></div>').appendTo($(block).find('.form-inline'));
198238
//$('<div>Select perf counter</div>').appendTo($(block).find('.form-group'));
199-
$('<select class="form-control perfcounter-name" style="width: auto"></select>').appendTo(block.find('.form-group'));
239+
$('<select class="form-control perfcounter-name input-sm"></select>').appendTo(block.find('.form-group'));
200240
$('<span class="glyphicon glyphicon-trash pull-right" aria-hidden="true" data-toggle="tooltip" title="Delete chart block"></span>').appendTo(block.find('.form-group'));
201241
$('<div class="labelsDiv pull-right"></div>').appendTo(block);
202242
$('<div class="chart" style="width: 100%; height: 250px;"></div>').appendTo(block);
@@ -208,6 +248,15 @@
208248

209249
return block;
210250
};
251+
252+
this.selectCounter = function(name)
253+
{
254+
if(this.counterNames.indexOf(name) >=0)
255+
{
256+
$(self.graphBlockDOM).find(".perfcounter-name").first().val(name).change();
257+
}
258+
this.selectedName = name;
259+
}
211260
}
212261

213262
function pollServer()

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Built-in REST API and UI dashboard.
55
[See Demo page](http://perfon.1gb.ru/api/perfcountersui "Demo page")
66

77
### Perfon.Core
8-
Core library, that monitors performance metrics of ypur application.
8+
Core library, that monitors performance metrics of your application.
99
It does not uses windows perfomance counters, so it could used with non-privileged rights.
1010
It has three Storage Drivers, allowing to save counters data to CSV file, in embedded LightDB database (www.litedb.org, Analog of SQLite)
1111
or in in-memory cache.

‎TestServer/Web.config‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,7 @@
3939
</providers>
4040
</sessionState>
4141
</system.web>
42-
<system.web.extensions>
43-
<scripting>
44-
<scriptResourceHandler enableCompression="true" enableCaching="true" />
45-
</scripting>
46-
</system.web.extensions>
47-
<system.webServer>
42+
<system.webServer>
4843
<validation validateIntegratedModeConfiguration="false" />
4944
<urlCompression doStaticCompression="true" />
5045
<handlers>
@@ -70,26 +65,9 @@
7065
<remove name="AnonymousIdentification" />
7166
<remove name="RoleManager" />
7267
</modules>
73-
<staticContent>
68+
<!-- <staticContent>
7469
<mimeMap fileExtension=".json" mimeType="application/json" />
75-
</staticContent>
76-
<!-- <httpCompression > directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files"
77-
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" staticCompressionLevel="9" />
78-
<dynamicTypes>
79-
<add mimeType="text/*" enabled="true" />
80-
<add mimeType="message/*" enabled="true" />
81-
<add mimeType="application/x-javascript" enabled="true" />
82-
<add mimeType="application/json" enabled="true" />
83-
<add mimeType="*/*" enabled="false" />
84-
</dynamicTypes>
85-
<staticTypes>
86-
<add mimeType="text/*" enabled="true" />
87-
<add mimeType="application/x-javascript" enabled="true" />
88-
<add mimeType="application/*" enabled="true" />
89-
<add mimeType="*/css" enabled="true" />
90-
<add mimeType="*/*" enabled="false" />
91-
</staticTypes>
92-
</httpCompression> -->
70+
</staticContent> -->
9371
</system.webServer>
9472
<runtime>
9573
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

0 commit comments

Comments
 (0)