Skip to content

Commit

Permalink
some dashboard layout updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@robscott
robscott committed May 14, 2019
1 parent 0a3c8e9 commit 202e633
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 87 deletions.
119 changes: 94 additions & 25 deletions pkg/dashboard/assets/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
margin-top: 15px;
}

.card.namespace {
padding: 10px 20px;
}

.card h3 {
margin: 0;
font-weight: 300;
font-size: 28px;
padding: 15px 20px 20px;
}

.namespace h3 strong {
margin: 0;
.card.namespace h3 {
padding-bottom: 30px;
}

.card.namespace h3 strong {
font-weight: bold;
}

Expand All @@ -33,22 +32,33 @@
}

.cluster-overview .cluster-score .weather {
font-size: 90px;
font-size: 80px;
color: #444;
margin-bottom: 15px;
margin: 10px 0 5px;
}

.cluster-overview .cluster-score .sailing-message {
.cluster-overview .cluster-score .sailing {
font-size: 16px;
line-height: 28px;
margin-left: 7px;
font-weight: 300;
font-weight: 200;
color: #555;
margin-bottom: 25px;
}

.cluster-overview .cluster-score .scores {
font-size: 16px;
margin-top: 10px;
margin-top: 15px;
}

.cluster-overview .cluster-score .scores span {
width: 70px;
display: inline-block;
color: #555;
font-weight: 200;
}

.cluster-overview .cluster-score .scores strong {
font-size: 24px;
}

.cluster .expandable-table ul.message-list {
Expand All @@ -58,7 +68,7 @@
#clusterScoreChart {
width: 550px;
position: relative;
top: -227px;
top: -270px;
left: 120px;
}

Expand All @@ -67,7 +77,8 @@
display: inline-block;
position: relative;
left: -100px;
top: -45px;
top: -80px;
font-weight: 200;
}

.cluster-overview .result-messages ul {
Expand All @@ -78,16 +89,77 @@
line-height: 35px;
}

.card.cluster .expandable-table {
margin-top: 20px;
.kubernetes-overview ul {
list-style-type: none;
margin: 0;
padding: 0 10px;
text-align: right;
}

.card.cluster .detail-label {
.kubernetes-overview li {
display: inline-block;
min-width: 140px;
margin: 20px 0 0 10px;
font-size: 11px;
color: #777;
}

.kubernetes-overview li span {
margin-right: 3px;
}

.card.category h3 strong {
font-weight: 800;
}

.category-list {
list-style-type: none;
margin: 10px 20px;
padding: 0;
}

.category-list .category-head {
margin: 20px 0 0;
}

.category-list .category-name {
font-size: 20px;
font-weight: 200;
}

.category-list .category-results {
font-size: 13px;
float: right;
}

.category-list .category-info {
font-size: 13px;
line-height: 21px;
color: #777;
margin: 0;
}

.category-list .category-info a {
font-weight: bold;
color: #777;
text-decoration: none;
}

.category-list .category-info a:hover {
color: #23103A;
}

.category-list .status {
margin: 5px 0;
width: 840px;
animation: fadeIn 2s;
}

.category-list .status div {
height: 5px;
border-radius: 3px;
}


.expandable-table {
width: 100%;
border-spacing: 0;
Expand Down Expand Up @@ -186,23 +258,21 @@ a.more-info {

.namespace .status-bar {
vertical-align: top;
padding-top: 18px;
padding-top: 21px;
}

.namespace .status-bar .status {
float: right;
animation: fadeIn 2s;
}

.cluster .status {
width: 280px;
}
.namespace .status {
width: 200px;
}

.status div {
height: 15px;
border-radius: 10px;
height: 12px;
border-radius: 5px;
}

.status .passing {
Expand All @@ -224,4 +294,3 @@ a.more-info {
0% {opacity: 0;}
100% {opacity: 1;}
}

1 change: 1 addition & 0 deletions pkg/dashboard/assets/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ $(function () {
},
options: {
responsive: false,
cutoutPercentage: 60,
legend: {
display: false,
},
Expand Down
18 changes: 9 additions & 9 deletions pkg/dashboard/helpers.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ func getCategoryLink(category string) string {
return strings.Replace(strings.ToLower(category), " ", "-", -1)
}

func getGrade(rs validator.ResultSummary) string {
score := getScore(rs)
func getGrade(counts validator.CountSummary) string {
score := getScore(counts)
if score >= 97 {
return "A+"
} else if score >= 93 {
Expand Down Expand Up @@ -62,13 +62,13 @@ func getGrade(rs validator.ResultSummary) string {
}
}

func getScore(rs validator.ResultSummary) uint {
total := (rs.Totals.Successes * 2) + rs.Totals.Warnings + (rs.Totals.Errors * 2)
return uint((float64(rs.Totals.Successes*2) / float64(total)) * 100)
func getScore(counts validator.CountSummary) uint {
total := (counts.Successes * 2) + counts.Warnings + (counts.Errors * 2)
return uint((float64(counts.Successes*2) / float64(total)) * 100)
}

func getWeatherIcon(rs validator.ResultSummary) string {
score := getScore(rs)
func getWeatherIcon(counts validator.CountSummary) string {
score := getScore(counts)
if score >= 90 {
return "fa-sun"
} else if score >= 80 {
Expand All @@ -82,8 +82,8 @@ func getWeatherIcon(rs validator.ResultSummary) string {
}
}

func getWeatherText(rs validator.ResultSummary) string {
score := getScore(rs)
func getWeatherText(counts validator.CountSummary) string {
score := getScore(counts)
if score >= 90 {
return "Smooth sailing"
} else if score >= 80 {
Expand Down
99 changes: 46 additions & 53 deletions pkg/dashboard/templates/dashboard.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
<h3>Cluster Overview</h3>
<div class="cluster-overview">
<div class="cluster-score">
<div class="weather"><i class="fas {{ getWeatherIcon .AuditData.ClusterSummary.Results }}"></i></div>
<div class="sailing">{{ getWeatherText .AuditData.ClusterSummary.Results }}</div>
<div class="scores">Grade: <strong>{{ getGrade .AuditData.ClusterSummary.Results }}</strong> | Score: <strong>{{ getScore .AuditData.ClusterSummary.Results }}%</strong></div>
<div class="weather"><i class="fas {{ getWeatherIcon .AuditData.ClusterSummary.Results.Totals }}"></i></div>
<div class="sailing">{{ getWeatherText .AuditData.ClusterSummary.Results.Totals }}</div>
<div class="scores"><span>Grade: </span><strong>{{ getGrade .AuditData.ClusterSummary.Results.Totals }}</strong></div>
<div class="scores"><span>Score: </span><strong>{{ getScore .AuditData.ClusterSummary.Results.Totals }}%</strong></div>
</div>
<div class="result-messages">
<ul class="message-list">
Expand All @@ -16,58 +17,50 @@
</div>
<canvas id="clusterScoreChart"></canvas>
</div>
<table class="expandable-table" cellspacing="0">
<tr>
<td class="resource-info">
<div class="name"><span class="caret-expander"></span>Cluster details</div>
<div class="expandable-content">
<ul class="message-list">
<li>
<span class="detail-label">Kubernetes Version:</span>
<span class="detail-value">{{ .AuditData.ClusterSummary.Version }}</span>
</li>
<li>
<span class="detail-label">Nodes:</span>
<span class="detail-value">{{ .AuditData.ClusterSummary.Nodes }}</span>
</li>
<li>
<span class="detail-label">Pods:</span>
<span class="detail-value">{{ .AuditData.ClusterSummary.Pods }}</span>
</li>
<li>
<span class="detail-label">Namespaces:</span>
<span class="detail-value">{{ .AuditData.ClusterSummary.Namespaces }}</span>
</li>
</ul>
<div class="kubernetes-overview">
<ul>
<li>
<span>Kubernetes Version:</span>
<strong>{{.AuditData.ClusterSummary.Version}}</strong>
</li>
<li>
<span>Nodes:</span>
<strong>{{.AuditData.ClusterSummary.Nodes}}</strong>
</li>
<li>
<span>Pods:</span>
<strong>{{.AuditData.ClusterSummary.Pods}}</strong>
</li>
<li>
<span>Namespaces:</span>
<strong>{{.AuditData.ClusterSummary.Namespaces}}</strong>
</li>
</ul>
</div>
</div>

<div class="card category">
<h3>Results by <strong>Category</strong></h3>
<ul class="category-list">
{{ range $category, $summary := .AuditData.ClusterSummary.Results.ByCategory }}
<li>
<div class="category-head">
<span class="category-name">{{ $category }}</span>
<span class="category-results">Score: <strong>{{ getScore $summary }}%</strong></span>
</div>
</td>
</tr>
<tr>
<td class="resource-info">
<div class="name"><span class="caret-expander"></span>Health summary</div>
<div class="expandable-content">
<ul class="message-list">
{{ range $category, $summary := .AuditData.ClusterSummary.Results.ByCategory }}
<li>
<span class="detail-label">{{ $category }}</span>
<span class="detail-value">{{ $summary.Errors }} errors, {{ $summary.Warnings }} warnings</span>
<div class="status-bar">
<div class="status">
<div class="failing">
<div class="warning" style="width: {{ getWarningWidth $summary 280 }}px;">
<div class="passing" style="width: {{ getSuccessWidth $summary 280 }}px;"></div>
</div>
</div>
</div>
</div>
</li>
{{ end }}
</ul>
<div class="status-bar">
<div class="status">
<div class="failing">
<div class="warning" style="width: {{ getWarningWidth $summary 840 }}px;">
<div class="passing" style="width: {{ getSuccessWidth $summary 840 }}px;"></div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>

<p class="category-info">Properly configured health checks can ensure the long term availability and reliability of your application running in Kubernetes. Polaris validates that health checks are configured for each pod running in your cluster. Refer to the <a href="#">Polaris Docs</a> for more information</p>
</li>
{{ end }}
</ul>
</div>

{{ range $namespace, $nsResult := .AuditData.NamespacedResults }}
Expand Down

0 comments on commit 202e633

Please sign in to comment.