mirror of
https://github.com/FairwindsOps/polaris.git
synced 2026-05-20 08:04:58 +00:00
195 lines
6.3 KiB
HTML
195 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Fairwinds</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>
|
|
<img class="logo" src="images/logo.png" alt="Fairwinds" />
|
|
<span class="alt-logo">Fairwinds</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="dashboard-content">
|
|
<div class="charts">
|
|
<div class="cluster-score chart-section">
|
|
<h3>Overall Score:</h3>
|
|
<div style="width:510px; height: 400px; left: -100px; position: relative;">
|
|
<canvas id="clusterScoreChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="namespace-score chart-section">
|
|
<h3>Scores By Namespace:</h3>
|
|
<canvas id="namespaceScoreChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="namespace">
|
|
<h3>Namespace: <strong>kube-system</strong></h3>
|
|
|
|
<table class="namespace-content" cellspacing="0">
|
|
<tr>
|
|
<td>
|
|
<div class="name"><span class="caret-expander"></span>DaemonSet: <strong>datadog-agent</strong></div>
|
|
</td>
|
|
<td class="status-bar">
|
|
<div class="status">
|
|
<div class="failing">
|
|
<div class="warning" style="width: 124px;">
|
|
<div class="passing" style="width: 82px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="name"><span class="caret-expander expanded"></span>Deployment: <strong>tiller-deployment</strong></div>
|
|
<ul class="extra">
|
|
<li class="success"><span>☑</span> Image Tag Specified</li>
|
|
<li class="success"><span>☑</span> Resource Limits</li>
|
|
<li class="success"><span>☑</span> Resource Requests</li>
|
|
<li class="warning"><span>⚠</span> Run As Non Root User</li>
|
|
<li class="failure"><span>☒</span> Liveness Probe</li>
|
|
<li class="failure"><span>☒</span> Readiness Probe</li>
|
|
</ul>
|
|
</td>
|
|
<td class="status-bar">
|
|
<div class="status">
|
|
<div class="failing">
|
|
<div class="warning" style="width: 150px;">
|
|
<div class="passing" style="width: 106px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function renderCharts() {
|
|
Chart.pluginService.register({
|
|
beforeDraw: function (chart) {
|
|
if (chart.config.options.elements.center) {
|
|
//Get ctx from string
|
|
var ctx = chart.chart.ctx;
|
|
|
|
//Get options from the center object in options
|
|
var centerConfig = chart.config.options.elements.center;
|
|
var fontStyle = centerConfig.fontStyle || 'Arial';
|
|
var txt = centerConfig.text;
|
|
var color = centerConfig.color || '#000';
|
|
var sidePadding = centerConfig.sidePadding || 20;
|
|
var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
|
|
//Start with a base font of 30px
|
|
ctx.font = "30px " + fontStyle;
|
|
|
|
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
|
|
var stringWidth = ctx.measureText(txt).width;
|
|
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
|
|
|
|
// Find out how much the font can grow in width.
|
|
var widthRatio = elementWidth / stringWidth;
|
|
var newFontSize = Math.floor(30 * widthRatio);
|
|
var elementHeight = (chart.innerRadius * 2);
|
|
|
|
// Pick a new font size so it will not be larger than the height of label.
|
|
var fontSizeToUse = Math.min(newFontSize, elementHeight);
|
|
|
|
//Set font settings to draw it correctly.
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
|
|
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
|
|
ctx.font = "bold " + fontSizeToUse + "px " + fontStyle;
|
|
ctx.fillStyle = color;
|
|
|
|
//Draw text in center
|
|
ctx.fillText(txt, centerX, centerY);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
var namespaceChart = new Chart("namespaceScoreChart", {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["kube-system", "development", "staging", "infra", "default"],
|
|
datasets: [{
|
|
label: 'Passing',
|
|
data: [118, 78, 65, 56, 43],
|
|
backgroundColor: '#230f39',
|
|
}, {
|
|
label: 'Warning',
|
|
data: [85, 54, 28, 23, 21],
|
|
backgroundColor: '#f26c21',
|
|
}, {
|
|
label: 'Failing',
|
|
data: [38, 24, 18, 15, 12],
|
|
backgroundColor: '#a11f4c',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
stacked: true,
|
|
}],
|
|
yAxes: [{
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
var clusterChart = new Chart("clusterScoreChart", {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ["Passing", "Warning", "Failing"],
|
|
datasets: [{
|
|
data: [118, 34, 28],
|
|
backgroundColor: ['#230f39', '#f26c21', '#a11f4c'],
|
|
}]
|
|
},
|
|
options: {
|
|
// responsive: false,
|
|
cutoutPercentage: 75,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
elements: {
|
|
center: {
|
|
text: '64%',
|
|
color: '#333', //Default black
|
|
fontStyle: 'Helvetica', //Default Arial
|
|
sidePadding: 30 //Default 20 (as a percentage)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |