feat: 健康检查页面增加明细数据

Bootstrap.Admin/HealthChecks/GCHealthCheck.cs

@@ -28,11 +28,7 @@ namespace Bootstrap.Admin.HealthChecks
                 { "Gen1Collections", GC.CollectionCount(1) },
                 { "Gen2Collections", GC.CollectionCount(2) },
             };
-
-            var status = (allocated < 100000) ?
-                HealthStatus.Healthy : HealthStatus.Unhealthy;
-
-            return Task.FromResult(new HealthCheckResult(status, data: data));
+            return Task.FromResult(HealthCheckResult.Healthy("OK", data));
         }
     }
 }

Bootstrap.Admin/HealthChecks/HealthChecksAppBuilderExtensions.cs

@@ -24,7 +24,7 @@ namespace Microsoft.AspNetCore.Builder
                 ResponseWriter = (context, report) =>
                 {
                     context.Response.ContentType = "application/json";
-                    return context.Response.WriteAsync(JsonConvert.SerializeObject(report));
+                    return context.Response.WriteAsync(JsonConvert.SerializeObject(new { report.Entries.Keys, Report = report }));
                 },
                 ResultStatusCodes =
                 {

Bootstrap.Admin/Views/Admin/Healths.cshtml

@@ -26,7 +26,7 @@
         健康检查结果
     </div>
     <div class="card-body">
-        <div>耗时：<span>0.01</span></div>
+        <div>耗时：<span id="checkTotalEplsed">--</span></div>
         <table></table>
     </div>
 </div>

Bootstrap.Admin/wwwroot/css/theme.css

@@ -709,11 +709,19 @@ input.pending {
     min-width: unset;
 }
 
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
+    border-bottom: 0;
+}
+
 .popover {
     max-width: 320px;
     padding: 0;
 }
 
+.popover-body .bootstrap-table {
+    margin: 0.25rem 0;
+}
+
 .popover-content {
     max-height: 240px;
     overflow-y: auto;

Bootstrap.Admin/wwwroot/js/healths.js

@@ -1,23 +1,60 @@
 $(function () {
+    var healthStatus = ["不健康", "亚健康", "健康"];
+    var StatusFormatter = function (value) {
+        return healthStatus[value];
+    };
+
+    var cate = { "db": "数据库", "file": "组件文件", "mem": "内存", "Gitee": "Gitee 接口", "gc": "垃圾回收器" };
+    var CategoryFormatter = function (value) {
+        return cate[value];
+    };
+
     var $table = $('table').smartTable({
         sidePagination: "client",
         showToggle: false,
         showRefresh: false,
         showColumns: false,
         columns: [
-            { title: "分类", field: "name", sortable: true },
-            { title: "描述", field: "Description", sortable: true },
-            { title: "异常信息", field: "Exception", sortable: true },
-            { title: "明细数据", field: "Data", sortable: true },
-            { title: "检查结果", field: "Status", sortable: false },
-            { title: "耗时", field: "Duration", sortable: true }
+            { title: "分类", field: "Name", formatter: CategoryFormatter },
+            { title: "描述", field: "Description" },
+            { title: "异常信息", field: "Exception" },
+            { title: "耗时", field: "Duration" },
+            { title: "检查结果", field: "Status", formatter: StatusFormatter },
+            {
+                title: "明细数据", field: "Data", formatter: function (value, row, index) {
+                    return '<button class="detail btn btn-info" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="left"><i class="fa fa-info"></i><span>明细</span></button>';
+                },
+                events: {
+                    'click .detail': function (e, value, row, index) {
+                        if ($.isEmptyObject(row.Data)) return;
+
+                        var $button = $(e.currentTarget);
+                        if (!$button.data($.fn.popover.Constructor.DATA_KEY)) {
+                            var content = $.map(row.Data, function (v, name) {
+                                return $.format("<tr><td>{0}</td><td>{1}</td></tr>", name, v);
+                            }).join("");
+                            content = $.format('<div class="bootstrap-table"><div class="fixed-table-container"><div class="fixed-table-body"><table class="table table-bordered table-hover table-sm"><thead><tr><th><div class="th-inner"><b>检查项</b><div></th><th><div class="th-inner"><b>检查值</b></div></th></tr></thead><tbody>{0}</tbody></table></div></div></div>', content);
+                            $button.popover({ title: cate[row.Name], html: true, content: content, placement: $(window).width() < 768 ? "bottom" : "left" });
+                        }
+                        $button.popover('show');
+                    }
+                }
+            }
         ]
     });
 
+    $table.bootstrapTable('showLoading');
+    $('#checkTotalEplsed').text('--');
     $.bc({
         url: 'healths',
         callback: function (result) {
-            console.log(result);
+            var data = $.map(result.Keys, function (name) {
+                return { Name: name, Duration: result.Report.Entries[name].Duration, Status: result.Report.Entries[name].Status, Exception: result.Report.Entries[name].Exception, Description: result.Report.Entries[name].Description, Data: result.Report.Entries[name].Data };
+            });
+            $table.bootstrapTable('hideLoading');
+            $table.bootstrapTable('load', data);
+            $('#checkTotalEplsed').text(result.Report.TotalDuration);
+            $.footer();
         }
     });
 });