Commit 05d92d91 authored by yangxiaodong's avatar yangxiaodong

add home page recevied message real-time

parent 20a06c75
...@@ -6,6 +6,7 @@ using Dapper; ...@@ -6,6 +6,7 @@ using Dapper;
using DotNetCore.CAP.Dashboard; using DotNetCore.CAP.Dashboard;
using DotNetCore.CAP.Dashboard.Monitoring; using DotNetCore.CAP.Dashboard.Monitoring;
using DotNetCore.CAP.Infrastructure; using DotNetCore.CAP.Infrastructure;
using DotNetCore.CAP.Models;
using DotNetCore.CAP.Processor.States; using DotNetCore.CAP.Processor.States;
namespace DotNetCore.CAP.SqlServer namespace DotNetCore.CAP.SqlServer
...@@ -58,25 +59,18 @@ _options.Schema); ...@@ -58,25 +59,18 @@ _options.Schema);
return statistics; return statistics;
} }
public IDictionary<DateTime, int> HourlyFailedJobs() public IDictionary<DateTime, int> HourlyFailedJobs(MessageType type)
{ {
var tableName = type == MessageType.Publish ? "Published" : "Received";
return UseConnection(connection => return UseConnection(connection =>
GetHourlyTimelineStats(connection, "Published", FailedState.StateName)); GetHourlyTimelineStats(connection, tableName, FailedState.StateName));
} }
public IDictionary<DateTime, int> HourlySucceededJobs() public IDictionary<DateTime, int> HourlySucceededJobs(MessageType type)
{ {
var tableName = type == MessageType.Publish ? "Published" : "Received";
return UseConnection(connection => return UseConnection(connection =>
GetHourlyTimelineStats(connection, "Published", SucceededState.StateName)); GetHourlyTimelineStats(connection, tableName, SucceededState.StateName));
}
public IDictionary<DateTime, int> SucceededByDatesCount()
{
return new Dictionary<DateTime, int>();
}
public IDictionary<DateTime, int> FailedByDatesCount()
{
return new Dictionary<DateTime, int>();
} }
public IList<MessageDto> Messages(MessageQueryDto queryDto) public IList<MessageDto> Messages(MessageQueryDto queryDto)
...@@ -191,21 +185,6 @@ _options.Schema); ...@@ -191,21 +185,6 @@ _options.Schema);
return GetTimelineStats(connection, tableName, statusName, keyMaps); return GetTimelineStats(connection, tableName, statusName, keyMaps);
} }
//private Dictionary<DateTime, int> GetTimelineStats(IDbConnection connection, string type)
//{
// var endDate = DateTime.UtcNow.Date;
// var dates = new List<DateTime>();
// for (var i = 0; i < 7; i++)
// {
// dates.Add(endDate);
// endDate = endDate.AddDays(-1);
// }
// var keyMaps = dates.ToDictionary(x => $"stats:{type}:{x.ToString("yyyy-MM-dd")}", x => x);
// return GetTimelineStats(connection, keyMaps);
//}
private Dictionary<DateTime, int> GetTimelineStats( private Dictionary<DateTime, int> GetTimelineStats(
IDbConnection connection, IDbConnection connection,
string tableName, string tableName,
......
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
}; };
BaseGraph.prototype._initGraph = function (element, settings, xSettings, ySettings) { BaseGraph.prototype._initGraph = function (element, settings, xSettings, ySettings) {
console.log(1);
var graph = this._graph = new Rickshaw.Graph($.extend({ var graph = this._graph = new Rickshaw.Graph($.extend({
element: element, element: element,
width: $(element).innerWidth(), width: $(element).innerWidth(),
...@@ -93,22 +94,40 @@ ...@@ -93,22 +94,40 @@
} }
cap.RealtimeGraph = (function () { cap.RealtimeGraph = (function () {
function RealtimeGraph(element, succeeded, failed, succeededStr, failedStr) { function RealtimeGraph(element,
this._succeeded = succeeded; pubSucceeded, pubFailed, pubSucceededStr, pubFailedStr,
this._failed = failed; recSucceeded, recFailed, recSucceededStr, recFailedStr
) {
this._pubSucceeded = pubSucceeded;
this._pubSucceededStr = pubSucceededStr;
this._pubFailed = pubFailed;
this._pubFailedStr = pubFailedStr;
this._recSucceeded = recSucceeded;
this._recSucceededStr = recSucceededStr;
this._recFailed = recFailed;
this._recFailedStr = recFailedStr;
this._initGraph(element, { this._initGraph(element, {
renderer: 'bar', renderer: 'bar',
series: new Rickshaw.Series.FixedDuration([ series: new Rickshaw.Series.FixedDuration([
{ {
name: failedStr, name: pubFailedStr,
//color: '#d9534f' color: '#d9534f'
color: 'red' },
{
name: pubSucceededStr,
color: '#6ACD65'
},
{
name: recFailedStr,
color: '#9c27b0'
}, },
{ {
name: succeededStr, name: recSucceededStr,
//color: '#5cb85c' color: '#cddc39'
color: '#cb513a'
} }
], ],
undefined, undefined,
...@@ -120,39 +139,63 @@ ...@@ -120,39 +139,63 @@
RealtimeGraph.prototype = Object.create(BaseGraph.prototype); RealtimeGraph.prototype = Object.create(BaseGraph.prototype);
RealtimeGraph.prototype.appendHistory = function (statistics) { RealtimeGraph.prototype.appendHistory = function (statistics) {
var newSucceeded = parseInt(statistics["published_succeeded:count"].intValue); var newPubSucceeded = parseInt(statistics["published_succeeded:count"].intValue);
var newFailed = parseInt(statistics["published_failed:count"].intValue); var newPubFailed = parseInt(statistics["published_failed:count"].intValue);
var newRecSucceeded = parseInt(statistics["received_succeeded:count"].intValue);
var newRecFailed = parseInt(statistics["received_failed:count"].intValue);
if (this._succeeded !== null && this._failed !== null) { if (this._pubSucceeded !== null && this._pubFailed !== null &&
var succeeded = newSucceeded - this._succeeded; this._recSucceeded !== null && this._recFailed !== null
var failed = newFailed - this._failed; ) {
var pubSucceeded = newPubSucceeded - this._pubSucceeded;
var pubFailed = newPubFailed - this._pubFailed;
this._graph.series.addData({ failed: failed, succeeded: succeeded }); var recSucceeded = newRecSucceeded - this._recSucceeded;
var recFailed = newRecFailed - this._recFailed;
var dataObj = {};
dataObj[this._pubFailedStr] = pubFailed;
dataObj[this._pubSucceededStr] = pubSucceeded;
dataObj[this._recFailedStr] = recFailed;
dataObj[this._recSucceededStr] = recSucceeded;
this._graph.series.addData(dataObj);
this._graph.render(); this._graph.render();
} }
this._succeeded = newSucceeded; this._pubSucceeded = newPubSucceeded;
this._failed = newFailed; this._pubFailed = newPubFailed;
this._recSucceeded = newRecSucceeded;
this._recFailed = newRecFailed;
}; };
return RealtimeGraph; return RealtimeGraph;
})(); })();
cap.HistoryGraph = (function () { cap.HistoryGraph = (function () {
function HistoryGraph(element, succeeded, failed, succeededStr, failedStr) { function HistoryGraph(element, pubSucceeded, pubFailed, pubSucceededStr, pubFailedStr,
recSucceeded, recFailed, recSucceededStr, recFailedStr) {
this._initGraph(element, { this._initGraph(element, {
renderer: 'area', renderer: 'area',
series: [ series: [
{ {
color: '#d9534f', color: '#d9534f',
//color: 'red', data: pubFailed,
data: failed, name: pubFailedStr
name: failedStr
}, { }, {
color: '#6ACD65', color: '#6ACD65',
//color: 'blue', data: pubSucceeded,
data: succeeded, name: pubSucceededStr
name: succeededStr }, {
color: '#9c27b0',
data: recFailed,
name: recFailedStr
}, {
color: '#cddc39',
data: recSucceeded,
name: recSucceededStr
} }
] ]
}, {}, { ticksTreatment: 'glow' }); }, {}, { ticksTreatment: 'glow' });
...@@ -232,12 +275,26 @@ ...@@ -232,12 +275,26 @@
Page.prototype._createRealtimeGraph = function (elementId) { Page.prototype._createRealtimeGraph = function (elementId) {
var realtimeElement = document.getElementById(elementId); var realtimeElement = document.getElementById(elementId);
if (realtimeElement) { if (realtimeElement) {
var succeeded = parseInt($(realtimeElement).data('succeeded')); var pubSucceeded = parseInt($(realtimeElement).data('published-succeeded'));
var failed = parseInt($(realtimeElement).data('failed')); var pubFailed = parseInt($(realtimeElement).data('published-failed'));
var pubSucceededStr = $(realtimeElement).data('published-succeeded-string');
var succeededStr = $(realtimeElement).data('succeeded-string'); var pubFailedStr = $(realtimeElement).data('published-failed-string');
var failedStr = $(realtimeElement).data('failed-string');
var realtimeGraph = new Cap.RealtimeGraph(realtimeElement, succeeded, failed, succeededStr, failedStr); var recSucceeded = parseInt($(realtimeElement).data('received-succeeded'));
var recFailed = parseInt($(realtimeElement).data('received-failed'));
var recSucceededStr = $(realtimeElement).data('received-succeeded-string');
var recFailedStr = $(realtimeElement).data('received-failed-string');
var realtimeGraph = new Cap.RealtimeGraph(realtimeElement,
pubSucceeded,
pubFailed,
pubSucceededStr,
pubFailedStr,
recSucceeded,
recFailed,
recSucceededStr,
recFailedStr
);
this._poller.addListener(function (data) { this._poller.addListener(function (data) {
realtimeGraph.appendHistory(data); realtimeGraph.appendHistory(data);
...@@ -268,13 +325,26 @@ ...@@ -268,13 +325,26 @@
return series; return series;
}; };
var succeeded = createSeries($(historyElement).data("succeeded")); var publishedSucceeded = createSeries($(historyElement).data("published-succeeded"));
var failed = createSeries($(historyElement).data("failed")); var publishedFailed = createSeries($(historyElement).data("published-failed"));
var publishedSucceededStr = $(historyElement).data('published-succeeded-string');
var succeededStr = $(historyElement).data('succeeded-string'); var publishedFailedStr = $(historyElement).data('published-failed-string');
var failedStr = $(historyElement).data('failed-string');
var receivedSucceeded = createSeries($(historyElement).data("received-succeeded"));
var historyGraph = new Cap.HistoryGraph(historyElement, succeeded, failed, succeededStr, failedStr); var receivedFailed = createSeries($(historyElement).data("received-failed"));
var receivedSucceededStr = $(historyElement).data('received-succeeded-string');
var receivedFailedStr = $(historyElement).data('received-failed-string');
var historyGraph = new Cap.HistoryGraph(historyElement,
publishedSucceeded,
publishedFailed,
publishedSucceededStr,
publishedFailedStr,
receivedSucceeded,
receivedFailed,
receivedSucceededStr,
receivedFailedStr,
);
$(window).resize(function () { $(window).resize(function () {
historyGraph.update(); historyGraph.update();
......
This source diff could not be displayed because it is too large. You can view the blob instead.
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using DotNetCore.CAP.Dashboard.Monitoring; using DotNetCore.CAP.Dashboard.Monitoring;
using DotNetCore.CAP.Models;
namespace DotNetCore.CAP.Dashboard namespace DotNetCore.CAP.Dashboard
{ {
...@@ -22,12 +23,8 @@ namespace DotNetCore.CAP.Dashboard ...@@ -22,12 +23,8 @@ namespace DotNetCore.CAP.Dashboard
int ReceivedSucceededCount(); int ReceivedSucceededCount();
IDictionary<DateTime, int> SucceededByDatesCount(); IDictionary<DateTime, int> HourlySucceededJobs(MessageType type);
IDictionary<DateTime, int> FailedByDatesCount(); IDictionary<DateTime, int> HourlyFailedJobs(MessageType type);
IDictionary<DateTime, int> HourlySucceededJobs();
IDictionary<DateTime, int> HourlyFailedJobs();
} }
} }
\ No newline at end of file
@* Generator: Template TypeVisibility: Internal GeneratePrettyNames: True *@ @* Generator: Template TypeVisibility: Internal GeneratePrettyNames: True *@
@using System @using System
@using System.Collections.Generic @using System.Collections.Generic
@using DotNetCore.CAP.Models;
@using DotNetCore.CAP.Dashboard @using DotNetCore.CAP.Dashboard
@using DotNetCore.CAP.Dashboard.Pages @using DotNetCore.CAP.Dashboard.Pages
@using DotNetCore.CAP.Dashboard.Resources @using DotNetCore.CAP.Dashboard.Resources
...@@ -8,22 +9,13 @@ ...@@ -8,22 +9,13 @@
@inherits RazorPage @inherits RazorPage
@{ @{
Layout = new LayoutPage(Strings.HomePage_Title); Layout = new LayoutPage(Strings.HomePage_Title);
IDictionary<DateTime, int> succeeded = null;
IDictionary<DateTime, int> failed = null;
var period = Query("period") ?? "day";
var monitor = Storage.GetMonitoringApi(); var monitor = Storage.GetMonitoringApi();
if ("week".Equals(period, StringComparison.OrdinalIgnoreCase)) IDictionary<DateTime, int> publishedSucceeded = monitor.HourlySucceededJobs(MessageType.Publish);
{ IDictionary<DateTime, int> publishedFailed = monitor.HourlyFailedJobs(MessageType.Publish);
succeeded = monitor.SucceededByDatesCount();
failed = monitor.FailedByDatesCount(); IDictionary<DateTime, int> receivedSucceeded = monitor.HourlySucceededJobs(MessageType.Subscribe);
} IDictionary<DateTime, int> receivedFailed = monitor.HourlyFailedJobs(MessageType.Subscribe);
else if ("day".Equals(period, StringComparison.OrdinalIgnoreCase))
{
succeeded = monitor.HourlySucceededJobs();
failed = monitor.HourlyFailedJobs();
}
} }
<div class="row"> <div class="row">
...@@ -41,30 +33,35 @@ ...@@ -41,30 +33,35 @@
</div> </div>
} }
<h3>@Strings.HomePage_RealtimeGraph</h3> <h3>@Strings.HomePage_RealtimeGraph</h3>
<div id="realtimeGraph" data-succeeded="@Statistics.PublishedSucceeded" data-failed="@Statistics.PublishedFailed" <div id="realtimeGraph"
data-succeeded-string="@Strings.HomePage_GraphHover_Succeeded" data-published-succeeded="@Statistics.PublishedSucceeded"
data-failed-string="@Strings.HomePage_GraphHover_Failed"></div> data-published-failed="@Statistics.PublishedFailed"
data-published-succeeded-string="@Strings.HomePage_GraphHover_Succeeded"
data-published-failed-string="@Strings.HomePage_GraphHover_Failed"
data-received-succeeded="@Statistics.ReceivedSucceeded"
data-received-failed="@Statistics.ReceivedFailed"
data-received-succeeded-string="接收成功"
data-received-failed-string="处理失败"></div>
<div style="display: none;"> <div style="display: none;">
<span data-metric="published_succeeded:count"></span> <span data-metric="published_succeeded:count"></span>
<span data-metric="published_failed:count"></span> <span data-metric="published_failed:count"></span>
<span data-metric="received_succeeded:count"></span>
<span data-metric="received_failed:count"></span>
</div> </div>
<h3> <h3>
<div class="btn-group pull-right" style="margin-top: 2px;">
<a href="?period=day" class="btn btn-sm btn-default @("day".Equals(period, StringComparison.OrdinalIgnoreCase) ? "active" : null)">@Strings.Common_PeriodDay</a>
<a href="?period=week" class="btn btn-sm btn-default @("week".Equals(period, StringComparison.OrdinalIgnoreCase) ? "active" : null)">@Strings.Common_PeriodWeek</a>
</div>
@Strings.HomePage_HistoryGraph @Strings.HomePage_HistoryGraph
</h3> </h3>
@if (succeeded != null && failed != null)
{
<div id="historyGraph" <div id="historyGraph"
data-succeeded="@JsonConvert.SerializeObject(succeeded)" data-published-succeeded="@JsonConvert.SerializeObject(publishedSucceeded)"
data-failed="@JsonConvert.SerializeObject(failed)" data-published-failed="@JsonConvert.SerializeObject(publishedFailed)"
data-succeeded-string="@Strings.HomePage_GraphHover_Succeeded" data-published-succeeded-string="@Strings.HomePage_GraphHover_Succeeded"
data-failed-string="@Strings.HomePage_GraphHover_Failed"> data-published-failed-string="@Strings.HomePage_GraphHover_Failed"
data-received-succeeded="@JsonConvert.SerializeObject(receivedSucceeded)"
data-received-failed="@JsonConvert.SerializeObject(receivedFailed)"
data-received-succeeded-string="接收成功"
data-received-failed-string="处理失败">
</div> </div>
}
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -118,7 +118,7 @@ namespace DotNetCore.CAP.Processor ...@@ -118,7 +118,7 @@ namespace DotNetCore.CAP.Processor
returnedProcessors.Add(_provider.GetRequiredService<PublishQueuer>()); returnedProcessors.Add(_provider.GetRequiredService<PublishQueuer>());
returnedProcessors.Add(_provider.GetRequiredService<SubscribeQueuer>()); returnedProcessors.Add(_provider.GetRequiredService<SubscribeQueuer>());
returnedProcessors.Add(_provider.GetRequiredService<FailedJobProcessor>()); //returnedProcessors.Add(_provider.GetRequiredService<FailedJobProcessor>());
returnedProcessors.Add(_provider.GetRequiredService<IAdditionalProcessor>()); returnedProcessors.Add(_provider.GetRequiredService<IAdditionalProcessor>());
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment