Show details for health metric.

client/ts/modules/metric-page/health.ts

@@ -119,6 +119,7 @@ export class HealthMetricPage extends MetricPage<Metric<HealthDataPoint>> {
 				<tr>
 					<th>Timestamp</th>
 					<th>Health</th>
+					<th>Details</th>
 				</tr>
 			`;
 
@@ -134,6 +135,25 @@ export class HealthMetricPage extends MetricPage<Metric<HealthDataPoint>> {
 						<tr>
 							<td>${dp.timestamp}</td>
 							<td>${dp.health}%</td>
+							<td>
+								<div style="display: none;" id="${dp.timestamp.getTime()}">
+									${JSON.stringify(dp.data)}
+								</div>
+								<a onclick="
+									var data = JSON.parse(document.getElementById('${dp.timestamp.getTime()}').textContent);
+									var timestamp = new Date(${dp.timestamp.getTime()});
+									var event = new CustomEvent(
+										'showDetails', { 
+											detail: {
+												data: data,
+												health: ${dp.health},
+												timestamp: timestamp
+											}
+										}
+									);
+									document.dispatchEvent(event);
+								">Details</a>
+							</td>
 						</tr>
 					`
 					)
@@ -148,6 +168,91 @@ export class HealthMetricPage extends MetricPage<Metric<HealthDataPoint>> {
 			});
 		}
 
+		// Listen for the event.
+		document.addEventListener(
+			'showDetails',
+			(e: CustomEvent) => {
+
+				let data : any[] = e.detail.data;
+				let timestamp : Date = e.detail.timestamp;
+
+				let code = `
+					<div 
+						class="modal fade"
+						id="modal-details" 
+						tabindex="-1" 
+						role="dialog" 
+						aria-hidden="true" 
+						style="display: none;"
+					>
+						<div class="modal-dialog modal-lg">
+							<div class="modal-content">
+
+								<div class="modal-header">
+									<h4 class="modal-title">
+										Health report details | Health ${e.detail.health}% | ${timestamp}
+										<small>
+											Inspect metric labels at the moment report was generated
+										</small>
+									</h4>
+								</div>
+
+								<div class="modal-body">
+
+									<div class="row">
+										<div class="col-md-12">
+											<table id="details-table" class="table table-striped">
+												<thead>
+													<tr>
+														<th>Type</th>
+														<th>Source</th>
+														<th>Label</th>
+													</tr>
+												</thead>
+												<tbody>
+													${
+														data
+															.sortByProperty(el => el.Source)
+															.map(el => `
+																<tr>
+																	<th>${el.Type}</th>
+																	<th>${el.Source}</th>
+																	<th>${el.Label}</th>
+																</tr>
+															`)
+															.join("")
+													}
+												</tbody>
+											</table>
+										</div>										
+									</div>
+								</div>
+
+
+								<div class="modal-footer">
+									<button type="button" class="btn btn-link waves-effect" data-dismiss="modal">
+										Close
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				`;
+
+				$("#modal").html(code);
+
+				$('#details-table').DataTable({
+					"order": [[0, "desc"]],
+					lengthChange: false,
+					searching: false,
+					pageLength: 10
+				});
+
+				$("#modal-details").modal();
+			},
+			false);
+
+
 		this.dataTablesRendered = true;
 	};
 }

client/ts/modules/metrics/health.ts

@@ -8,6 +8,13 @@ import "../../vendor/jquery.flot.tooltip.js";
 type JsonHealthDataPoint = {
 	Timestamp: string;
 	Health: number;
+	Data: HealthReportDataPoint[];
+}
+
+export class HealthReportDataPoint {
+	public label: string;
+	public source: string;
+	public type: string;
 }
 
 /**
@@ -27,6 +34,8 @@ export class HealthDataPoint extends DataPoint {
 	 */
 	public health: number;
 
+	public data: HealthReportDataPoint[];
+
 
 	/**
 	 * Creates an instance of HealthDataPoint.
@@ -39,6 +48,7 @@ export class HealthDataPoint extends DataPoint {
 
 		this.timestamp = Utility.toDate(json.Timestamp);
 		this.health = json.Health;
+		this.data = json.Data;
 	}
 }
 

src/shared/Models/Entities/Helth.cs

@@ -70,7 +70,6 @@ namespace StatusMonitor.Shared.Models.Entities
 			}
 		}
 
-		[JsonProperty("Label")]
 		/// <summary>
 		/// String alias of the metric's label
 		/// Should not be used directly
@@ -157,7 +156,8 @@ namespace StatusMonitor.Shared.Models.Entities
 		{
 			return new {
 				Timestamp,
-				Health
+				Health,
+				Data
 			};
 		}
 	}

src/web/Views/Home/Metric.cshtml

@@ -175,6 +175,8 @@
 
 </div>
 
+<div id="modal"></div>
+
 @section scripts {
 
     <script>