mirror of
https://github.com/FairwindsOps/polaris.git
synced 2026-05-09 18:56:57 +00:00
moving to expandable category info
This commit is contained in:
Rob Scott
@@ -107,59 +107,42 @@
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.card.category h3 strong {
|
||||
font-weight: 800;
|
||||
.category .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
.category .category-score {
|
||||
font-size: 13px;
|
||||
margin-left: 5px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.category-list .category-results {
|
||||
font-size: 13px;
|
||||
float: right;
|
||||
.category .category-score strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.category-list .category-info {
|
||||
font-size: 13px;
|
||||
|
||||
.category .category-info {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #777;
|
||||
margin: 0;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.category-list .category-info a {
|
||||
.category .category-info a {
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.category-list .category-info a:hover {
|
||||
.category .category-info a:hover {
|
||||
color: #23103A;
|
||||
}
|
||||
|
||||
.category-list .status {
|
||||
margin: 5px 0;
|
||||
width: 840px;
|
||||
.category .status {
|
||||
width: 200px;
|
||||
animation: fadeIn 2s;
|
||||
}
|
||||
|
||||
.category-list .status div {
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.expandable-table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
@@ -170,7 +153,7 @@
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.expandable-table td {
|
||||
.expandable-table .resource-info {
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
@@ -256,17 +239,17 @@ a.more-info {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.namespace .status-bar {
|
||||
vertical-align: top;
|
||||
padding-top: 21px;
|
||||
.card .status-bar {
|
||||
padding-top: 7px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.namespace .status-bar .status {
|
||||
.card .status-bar .status {
|
||||
float: right;
|
||||
animation: fadeIn 2s;
|
||||
}
|
||||
|
||||
.namespace .status {
|
||||
.card .status {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
@@ -40,70 +40,35 @@
|
||||
</div>
|
||||
|
||||
<div class="card category">
|
||||
<h3>Results by <strong>Category</strong></h3>
|
||||
<ul class="category-list">
|
||||
<h3>Results by Category</h3>
|
||||
<div class="expandable-table">
|
||||
{{ 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>
|
||||
<div class="resource-info">
|
||||
<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 class="warning" style="width: {{ getWarningWidth $summary 200 }}px;">
|
||||
<div class="passing" style="width: {{ getSuccessWidth $summary 200 }}px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="name"><span class="caret-expander"></span>{{ $category }}<span class="category-score">Score: <strong>{{ getScore $summary }}%</strong></span></div>
|
||||
<div class="result-messages expandable-content">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }} {{/* end range categories */}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ range $namespace, $nsResult := .AuditData.NamespacedResults }}
|
||||
<div class="card namespace">
|
||||
<h3>Namespace: <strong>{{ $namespace }}</strong></h3>
|
||||
<table class="expandable-table" cellspacing="0">
|
||||
<div class="expandable-table">
|
||||
{{ range .DeploymentResults }}
|
||||
<tr>
|
||||
<td class="resource-info">
|
||||
<div class="name"><span class="caret-expander"></span>Deployment: <strong>{{ .Name }}</strong></div>
|
||||
<div class="result-messages expandable-content">
|
||||
<h4>Pod Spec:</h4>
|
||||
<ul class="message-list">
|
||||
{{ range $message := .PodResult.Messages}}
|
||||
<li class="{{ .Type }}">
|
||||
<i class="message-icon {{ getIcon $message }}"></i>
|
||||
<a class="more-info" href="/details/{{ getCategoryLink .Category }}">
|
||||
<i class="far fa-question-circle"></i>
|
||||
</a>
|
||||
<span class="message">{{ .Message }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ range .PodResult.ContainerResults}}
|
||||
<div class="result-messages expandable-content">
|
||||
<h4>Container: {{ .Name }}</h4>
|
||||
<ul class="message-list">
|
||||
{{ range $message := .Messages}}
|
||||
<li class="{{ .Type }}">
|
||||
<i class="message-icon {{ getIcon $message }}"></i>
|
||||
<a class="more-info" href="/details/{{ getCategoryLink .Category }}">
|
||||
<i class="far fa-question-circle"></i>
|
||||
</a>
|
||||
<span class="message">{{ .Message }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }} {{/* end range .PodResult.ContainerResults */}}
|
||||
</div>
|
||||
</td>
|
||||
<td class="status-bar">
|
||||
<div class="resource-info">
|
||||
<div class="status-bar">
|
||||
<div class="status">
|
||||
<div class="failing">
|
||||
<div class="warning" style="width: {{ getWarningWidth .PodResult.Summary.Totals 200 }}px;">
|
||||
@@ -111,10 +76,42 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
|
||||
<div class="name"><span class="caret-expander"></span>Deployment: <strong>{{ .Name }}</strong></div>
|
||||
<div class="result-messages expandable-content">
|
||||
<h4>Pod Spec:</h4>
|
||||
<ul class="message-list">
|
||||
{{ range $message := .PodResult.Messages}}
|
||||
<li class="{{ .Type }}">
|
||||
<i class="message-icon {{ getIcon $message }}"></i>
|
||||
<a class="more-info" href="/details/{{ getCategoryLink .Category }}">
|
||||
<i class="far fa-question-circle"></i>
|
||||
</a>
|
||||
<span class="message">{{ .Message }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ range .PodResult.ContainerResults}}
|
||||
<div class="result-messages expandable-content">
|
||||
<h4>Container: {{ .Name }}</h4>
|
||||
<ul class="message-list">
|
||||
{{ range $message := .Messages}}
|
||||
<li class="{{ .Type }}">
|
||||
<i class="message-icon {{ getIcon $message }}"></i>
|
||||
<a class="more-info" href="/details/{{ getCategoryLink .Category }}">
|
||||
<i class="far fa-question-circle"></i>
|
||||
</a>
|
||||
<span class="message">{{ .Message }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }} {{/* end range .PodResult.ContainerResults */}}
|
||||
</div>
|
||||
{{ end }} {{/* end range .DeploymentResults */}}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }} {{/* end range .AuditData.NamespacedResults */}}
|
||||
<script src="/static/js/charts.js">
|
||||
|
||||
Reference in New Issue
Block a user