cpu-load.ts 3.27 KB
Newer Older
Dmytro Bogatov's avatar
Dmytro Bogatov committed
1 2 3 4 5
import { CpuLoadMetric, CpuLoadDataPoint } from "../metrics/cpu-load";
import { MetricPage } from "./abstract";
import { Metric, DataPoint, MetricType } from "../metrics/abstract";
import { Utility } from "../utility";
import "../extensions";
Dmytro Bogatov's avatar
Dmytro Bogatov committed
6 7 8

import "flot";
import "datatables.net"
Dmytro Bogatov's avatar
Dmytro Bogatov committed
9 10 11 12
import "../../vendor/jquery.flot.time.js";
import "../../vendor/jquery.flot.selection.js";
import "../../vendor/jquery.flot.threshold.js";
import "../../vendor/jquery.flot.tooltip.js";
Dmytro Bogatov's avatar
Dmytro Bogatov committed
13 14 15


/**
Dmytro Bogatov's avatar
Dmytro Bogatov committed
16
 * 
Dmytro Bogatov's avatar
Dmytro Bogatov committed
17 18
 * 
 * @export
Dmytro Bogatov's avatar
Dmytro Bogatov committed
19 20
 * @class CpuLoadMetricPage
 * @extends {MetricPage<Metric<CpuLoadDataPoint>>}
Dmytro Bogatov's avatar
Dmytro Bogatov committed
21
 */
Dmytro Bogatov's avatar
Dmytro Bogatov committed
22
export class CpuLoadMetricPage extends MetricPage<Metric<CpuLoadDataPoint>> {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
23

Dmytro Bogatov's avatar
Dmytro Bogatov committed
24 25
	constructor(source: string, min: number, max: number) {
		super(min, max);
Dmytro Bogatov's avatar
Dmytro Bogatov committed
26 27 28 29

		this.metric = new CpuLoadMetric(source);
	}

Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
30
	protected configurePlot(): void {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
31 32

		var data = [];
Dmytro Bogatov's avatar
Dmytro Bogatov committed
33 34
		this
			.metric
Dmytro Bogatov's avatar
Dmytro Bogatov committed
35 36 37 38 39
			.data
			.sortByProperty(dp => dp.timestamp.getTime())
			.reverse()
			.forEach((value, index, array) => data.push([value.timestamp.getTime(), value.value]));

Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
40 41
		this.minData = data[data.length - 1][0];
		this.maxData = data[0][0];
Dmytro Bogatov's avatar
Dmytro Bogatov committed
42

Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
43
		this.detailedPlotOptions = {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
44
			yaxis: {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
45 46
				max: this.max,
				min: this.min
Dmytro Bogatov's avatar
Dmytro Bogatov committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
			},
			xaxis: {
				mode: "time",
				tickLength: 5,
				timezone: "browser"
			},
			grid: {
				borderWidth: 0,
				labelMargin: 10,
				hoverable: true,
				clickable: true,
				mouseActiveRadius: 6
			},
			tooltip: {
				show: true,
				content: "%x: %y%",
				defaultTheme: false,
				cssClass: "flot-tooltip"
			},
			selection: {
				mode: "x"
			}
		};

Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
71
		this.formattedData = [
Dmytro Bogatov's avatar
Dmytro Bogatov committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85
			{
				data: data,
				lines: {
					show: true,
					fill: 0.50
				},
				color: 'rgb(200, 20, 30)',
				threshold: {
					below: 90,
					color: "#FFC107"
				}
			}
		];

Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
86
		this.overviewPlotOptions = {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
			series: {
				lines: {
					show: true,
					lineWidth: 1
				},
				shadowSize: 0
			},
			xaxis: {
				ticks: [],
				mode: "time"
			},
			yaxis: {
				ticks: [],
				min: 0,
				autoscaleMargin: 0.1
			},
			selection: {
				mode: "x"
			}
		};
	};

109
	protected renderTable(redraw: boolean, start: Date, end: Date): void {
Dmytro Bogatov's avatar
Dmytro Bogatov committed
110

111 112 113 114 115
		if (!this.dataTablesRendered || redraw) {

			if (this.dataTablesRendered) {
				this.dataTable.destroy();
			}
Dmytro Bogatov's avatar
Dmytro Bogatov committed
116

Dmytro Bogatov's avatar
Dmytro Bogatov committed
117 118 119 120
			let header = `
				<tr>
					<th>Timestamp</th>
					<th>Value</th>
Dmytro Bogatov's avatar
Hotfix.  
Dmytro Bogatov committed
121
					<th>Zoom plot</th>
Dmytro Bogatov's avatar
Dmytro Bogatov committed
122 123 124 125 126 127
				</tr>
			`;

			$("#metric-data thead").html(header);
			$("#metric-data tfoot").html(header);

Dmytro Bogatov's avatar
Dmytro Bogatov committed
128
			$("#metric-data tbody").html(
Dmytro Bogatov's avatar
Dmytro Bogatov committed
129
				this.metric
Dmytro Bogatov's avatar
Dmytro Bogatov committed
130
					.data
Dmytro Bogatov's avatar
Dmytro Bogatov committed
131
					.map(dp => <CpuLoadDataPoint>dp)
132 133 134 135 136 137 138 139 140 141 142
					.filter((value, index, array) => {
						if (start != null && value.timestamp < start) {
							return false;
						}

						if (end != null && value.timestamp > end) {
							return false;
						}

						return true;
					})
Dmytro Bogatov's avatar
Dmytro Bogatov committed
143 144 145 146
					.map(
					dp => `
						<tr>
							<td>${dp.timestamp}</td>
Dmytro Bogatov's avatar
Fixes.  
Dmytro Bogatov committed
147
							<td>${dp.value}%</td>
Dmytro Bogatov's avatar
Hotfix.  
Dmytro Bogatov committed
148 149 150 151 152
							<td>
								<a href="/home/metric/${MetricType[this.metric.metricType]}/${this.metric.source}/${new Date(dp.timestamp.getTime() - 2 * 60 * 1000).getTime()}/${new Date(dp.timestamp.getTime() + 2 * 60 * 1000).getTime()}">
									Zoom plot
								</a>
							</td>
Dmytro Bogatov's avatar
Dmytro Bogatov committed
153 154 155 156 157 158
						</tr>
					`
					)
					.join()
			);

159
			this.dataTable = $('#metric-data').DataTable({
Dmytro Bogatov's avatar
Dmytro Bogatov committed
160 161 162 163 164 165 166 167 168 169
				"order": [[0, "desc"]],
				lengthChange: false,
				searching: false,
				pageLength: 10
			});
		}

		this.dataTablesRendered = true;
	};
}