#41 add tooltip (#88)

hjacobs · May 30, 2019 · b44770e · b44770e
1 parent 081f8f0
commit b44770e
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ __pycache__/
 output/
 .pytest_cache/
 .coverage
+.idea/
+venv/
diff --git a/kube_resource_report/templates/application.html b/kube_resource_report/templates/application.html
@@ -117,7 +117,7 @@ <h2 class="title is-5">Pods</h2>
                 <div class="resource-labels">
                     <span>{{ row.pod.usage.cpu|round(2) }}</span> <span>{{ row.pod.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ row.pod.requests.cpu }}" max="{{ row.pod.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if row.pod.usage.cpu > row.pod.requests.cpu else 'is-primary' }}" value="{{ row.pod.usage.cpu }}" max="{{ row.pod.requests.cpu }}"></progress>
                 </div>
@@ -126,7 +126,7 @@ <h2 class="title is-5">Pods</h2>
                 <div class="resource-labels">
                     <span>{{ row.pod.usage.memory|memory('MiB') }}</span> <span>{{ row.pod.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ row.pod.requests.memory }}" max="{{ row.pod.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if row.pod.usage.memory > row.pod.requests.memory else 'is-primary' }}" value="{{ row.pod.usage.memory }}" max="{{ row.pod.requests.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/applications.html b/kube_resource_report/templates/applications.html
@@ -56,7 +56,7 @@ <h1 class="title">All Applications
                 <div class="resource-labels">
                     <span>{{ app.usage.cpu|round(2) }}</span> <span>{{ app.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ app.requests.cpu }}" max="{{ app.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if app.usage.cpu > app.requests.cpu else 'is-primary' }}" value="{{ app.usage.cpu }}" max="{{ app.requests.cpu }}"></progress>
                 </div>
@@ -65,7 +65,7 @@ <h1 class="title">All Applications
                 <div class="resource-labels">
                     <span>{{ app.usage.memory|memory('MiB') }}</span> <span>{{ app.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ app.requests.memory }}" max="{{ app.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if app.usage.memory > app.requests.memory else 'is-primary' }}" value="{{ app.usage.memory }}" max="{{ app.requests.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/cluster.html b/kube_resource_report/templates/cluster.html
@@ -92,18 +92,22 @@ <h2 class="title is-5">Nodes</h2>
 
             <td style="font-size: 0.75rem" data-value="{{ node.usage.cpu }}">
                 <div class="resource-labels">
-                    <span>{{ node.usage.cpu|round(1) }}</span> <span>{{ node.requests.cpu|round(1) }}</span> <span>{{ node.allocatable.cpu|round(1) }}</span>
+                    <span>{{ node.usage.cpu|round(1) }}</span>
+                    <span>{{ node.requests.cpu|round(1) }}</span>
+                    <span>{{ node.allocatable.cpu|round(1) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ node.requests.cpu }}" max="{{ node.allocatable.cpu }}"></progress>
                     <progress class="progress is-primary" value="{{ node.usage.cpu }}" max="{{ node.allocatable.cpu }}"></progress>
                 </div>
             </td>
             <td style="font-size: 0.75rem" data-value="{{ node.usage.memory }}">
                 <div class="resource-labels">
-                    <span>{{ node.usage.memory|memory('GiB') }}</span> <span>{{ node.requests.memory|memory('GiB') }}</span> <span>{{ node.allocatable.memory|memory('GiB') }}</span>
+                    <span>{{ node.usage.memory|memory('GiB') }}</span>
+                    <span>{{ node.requests.memory|memory('GiB') }}</span>
+                    <span>{{ node.allocatable.memory|memory('GiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ node.requests.memory }}" max="{{ node.allocatable.memory }}"></progress>
                     <progress class="progress is-primary" value="{{ node.usage.memory }}" max="{{ node.allocatable.memory }}"></progress>
                 </div>
@@ -189,7 +193,7 @@ <h2 class="title is-5">Namespaces</h2>
                 <div class="resource-labels">
                     <span>{{ namespace_data.usage.cpu|round(2) }}</span> <span>{{ namespace_data.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ namespace_data.requests.cpu }}" max="{{ namespace_data.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if namespace_data.usage.cpu > namespace_data.requests.cpu else 'is-primary' }}" value="{{ namespace_data.usage.cpu }}" max="{{ namespace_data.requests.cpu }}"></progress>
                 </div>
@@ -198,7 +202,7 @@ <h2 class="title is-5">Namespaces</h2>
                 <div class="resource-labels">
                     <span>{{ namespace_data.usage.memory|memory('MiB') }}</span> <span>{{ namespace_data.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ namespace_data.requests.memory }}" max="{{ namespace_data.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if namespace_data.usage.memory > namespace_data.requests.memory else 'is-primary' }}" value="{{ namespace_data.usage.memory }}" max="{{ namespace_data.requests.memory }}"></progress>
                 </div>
@@ -246,16 +250,16 @@ <h2 class="title is-5">Pods</h2>
                 <div class="resource-labels">
                     <span>{{ pod.usage.cpu|round(2) }}</span> <span>{{ pod.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ pod.requests.cpu }}" max="{{ pod.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if pod.usage.cpu > pod.requests.cpu else 'is-primary' }}" value="{{ pod.usage.cpu }}" max="{{ pod.requests.cpu }}"></progress>
                 </div>
             </td>
             <td style="font-size: 0.75rem" data-value="{{ pod.usage.memory }}">
-                <div class="resource-labels">
+                <div class="resource-labels" title="Usage in green; requested in black; usage > requested in red.">
                     <span>{{ pod.usage.memory|memory('MiB') }}</span> <span>{{ pod.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ pod.requests.memory }}" max="{{ pod.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if pod.usage.memory > pod.requests.memory else 'is-primary' }}" value="{{ pod.usage.memory }}" max="{{ pod.requests.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/clusters.html b/kube_resource_report/templates/clusters.html
@@ -52,7 +52,7 @@ <h1 class="title">All Clusters
                 <div class="resource-labels">
                     <span>{{ summary.usage.cpu|cpu }}</span> <span>{{ summary.requests.cpu|cpu }}</span> <span>{{ summary.allocatable.cpu|cpu }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ summary.requests.cpu }}" max="{{ summary.allocatable.cpu }}"></progress>
                     <progress class="progress is-primary" value="{{ summary.usage.cpu }}" max="{{ summary.allocatable.cpu }}"></progress>
                 </div>
@@ -61,7 +61,7 @@ <h1 class="title">All Clusters
                 <div class="resource-labels">
                     <span>{{ summary.usage.memory|memory('GiB') }}</span> <span>{{ summary.requests.memory|memory('GiB') }}</span> <span>{{ summary.allocatable.memory|memory('GiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ summary.requests.memory }}" max="{{ summary.allocatable.memory }}"></progress>
                     <progress class="progress is-primary" value="{{ summary.usage.memory }}" max="{{ summary.allocatable.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/index.html b/kube_resource_report/templates/index.html
@@ -51,7 +51,7 @@ <h2 class="title is-5">CPU</h2>
     <span>{{ total_requests['cpu']|cpu }} requested</span>
     <span>{{ total_allocatable['cpu']|cpu }} allocatable</span>
 </div>
-<div class="resource-bar">
+<div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
     <progress class="progress" value="{{ total_requests['cpu'] }}" max="{{ total_allocatable['cpu'] }}"></progress>
     <progress class="progress is-primary" value="{{ total_usage['cpu'] }}" max="{{ total_allocatable['cpu'] }}"></progress>
 </div>
@@ -62,7 +62,7 @@ <h2 class="title is-5">Memory</h2>
     <span>{{ total_requests['memory']|filesizeformat(True) }} requested</span>
     <span>{{ total_allocatable['memory']|filesizeformat(True) }} allocatable</span>
 </div>
-<div class="resource-bar">
+<div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
     <progress class="progress" value="{{ total_requests['memory'] }}" max="{{ total_allocatable['memory'] }}"></progress>
     <progress class="progress is-primary" value="{{ total_usage['memory'] }}" max="{{ total_allocatable['memory'] }}"></progress>
 </div>

diff --git a/kube_resource_report/templates/namespaces.html b/kube_resource_report/templates/namespaces.html
@@ -51,7 +51,7 @@ <h1 class="title">All Namespaces
                 <div class="resource-labels">
                     <span>{{ namespace_data.usage.cpu|round(2) }}</span> <span>{{ namespace_data.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ namespace_data.requests.cpu }}" max="{{ namespace_data.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if namespace_data.usage.cpu > namespace_data.requests.cpu else 'is-primary' }}" value="{{ namespace_data.usage.cpu }}" max="{{ namespace_data.requests.cpu }}"></progress>
                 </div>
@@ -60,7 +60,7 @@ <h1 class="title">All Namespaces
                 <div class="resource-labels">
                     <span>{{ namespace_data.usage.memory|memory('MiB') }}</span> <span>{{ namespace_data.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ namespace_data.requests.memory }}" max="{{ namespace_data.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if namespace_data.usage.memory > namespace_data.requests.memory else 'is-primary' }}" value="{{ namespace_data.usage.memory }}" max="{{ namespace_data.requests.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/pods.html b/kube_resource_report/templates/pods.html
@@ -44,7 +44,7 @@ <h1 class="title">All Pods
                 <div class="resource-labels">
                     <span>{{ pod.usage.cpu|round(2) }}</span> <span>{{ pod.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ pod.requests.cpu }}" max="{{ pod.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if pod.usage.cpu > pod.requests.cpu else 'is-primary' }}" value="{{ pod.usage.cpu }}" max="{{ pod.requests.cpu }}"></progress>
                 </div>
@@ -53,7 +53,7 @@ <h1 class="title">All Pods
                 <div class="resource-labels">
                     <span>{{ pod.usage.memory|memory('MiB') }}</span> <span>{{ pod.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ pod.requests.memory }}" max="{{ pod.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if pod.usage.memory > pod.requests.memory else 'is-primary' }}" value="{{ pod.usage.memory }}" max="{{ pod.requests.memory }}"></progress>
                 </div>

diff --git a/kube_resource_report/templates/team.html b/kube_resource_report/templates/team.html
@@ -85,7 +85,7 @@ <h2 class="title is-5">Clusters</h2>
                 <div class="resource-labels">
                     <span>{{ summary.usage.cpu|cpu }}</span> <span>{{ summary.requests.cpu|cpu }}</span> <span>{{ summary.allocatable.cpu|cpu }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ summary.requests.cpu }}" max="{{ summary.allocatable.cpu }}"></progress>
                     <progress class="progress is-primary" value="{{ summary.usage.cpu }}" max="{{ summary.allocatable.cpu }}"></progress>
                 </div>
@@ -94,7 +94,7 @@ <h2 class="title is-5">Clusters</h2>
                 <div class="resource-labels">
                     <span>{{ summary.usage.memory|memory('GiB') }}</span> <span>{{ summary.requests.memory|memory('GiB') }}</span> <span>{{ summary.allocatable.memory|memory('GiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; allocatable in grey.">
                     <progress class="progress" value="{{ summary.requests.memory }}" max="{{ summary.allocatable.memory }}"></progress>
                     <progress class="progress is-primary" value="{{ summary.usage.memory }}" max="{{ summary.allocatable.memory }}"></progress>
                 </div>
@@ -165,7 +165,7 @@ <h2 class="title is-5">Applications</h2>
                 <div class="resource-labels">
                     <span>{{ app.usage.cpu|round(2) }}</span> <span>{{ app.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ app.requests.cpu }}" max="{{ app.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if app.usage.cpu > app.requests.cpu else 'is-primary' }}" value="{{ app.usage.cpu }}" max="{{ app.requests.cpu }}"></progress>
                 </div>
@@ -174,7 +174,7 @@ <h2 class="title is-5">Applications</h2>
                 <div class="resource-labels">
                     <span>{{ app.usage.memory|memory('MiB') }}</span> <span>{{ app.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ app.requests.memory }}" max="{{ app.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if app.usage.memory > app.requests.memory else 'is-primary' }}" value="{{ app.usage.memory }}" max="{{ app.requests.memory }}"></progress>
                 </div>
@@ -189,7 +189,7 @@ <h2 class="title is-5">Applications</h2>
                 <div class="resource-labels">
                     <span>{{ percentage|round(0)|int }}%</span> <span></span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Percentage of application cost divided by team cost">
                     <progress class="progress" value="100" max="100"></progress>
                     <progress class="progress is-primary" value="{{ percentage|round(3) }}" max="100"></progress>
                 </div>

diff --git a/kube_resource_report/templates/teams.html b/kube_resource_report/templates/teams.html
@@ -44,7 +44,7 @@ <h1 class="title">All Teams
                 <div class="resource-labels">
                     <span>{{ team.usage.cpu|round(2) }}</span> <span>{{ team.requests.cpu|round(2) }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ team.requests.cpu }}" max="{{ team.requests.cpu }}"></progress>
                     <progress class="progress {{ 'is-danger' if team.usage.cpu > team.requests.cpu else 'is-primary' }}" value="{{ team.usage.cpu }}" max="{{ team.requests.cpu }}"></progress>
                 </div>
@@ -53,7 +53,7 @@ <h1 class="title">All Teams
                 <div class="resource-labels">
                     <span>{{ team.usage.memory|memory('MiB') }}</span> <span>{{ team.requests.memory|memory('MiB') }}</span>
                 </div>
-                <div class="resource-bar">
+                <div class="resource-bar" title="Usage in green; requested in black; usage > requested in red.">
                     <progress class="progress" value="{{ team.requests.memory }}" max="{{ team.requests.memory }}"></progress>
                     <progress class="progress {{ 'is-danger' if team.usage.memory > team.requests.memory else 'is-primary' }}" value="{{ team.usage.memory }}" max="{{ team.requests.memory }}"></progress>
                 </div>