cleans up cluster info page

raintank · Jan 16, 2017 · 0f4bd54 · 0f4bd54
1 parent 693623b
commit 0f4bd54
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 15 deletions.
diff --git a/dist/components/clusters/clusterInfo.js b/dist/components/clusters/clusterInfo.js
diff --git a/dist/components/clusters/clusterInfo.js.map b/dist/components/clusters/clusterInfo.js.map
diff --git a/dist/components/clusters/partials/cluster_config.html b/dist/components/clusters/partials/cluster_config.html
@@ -69,6 +69,7 @@ <h4 class="page-heading">Graphite Write</h4>
     </div>
   </div>
 </form>
+<p>The Deploy button will deploy the <a class="pointer highlight-word" href="https://hub.docker.com/r/raintank/snap_k8s/">Snap Kubernetes Docker image</a> with two metrics collectors that provides summary performance and availability metrics of a Kubernetes Node and its containers. (The manual deployment instructions are at the bottom of the page.)</p>
 <div class="gf-form-group" ng-show="ctrl.isOrgEditor">
   	<button type="submit" class="btn btn-success" ng-click="ctrl.save()" ng-enabled="clusterform.$valid">Save</button>
   	<button type="submit" class="btn btn-success" ng-click="ctrl.deploy()" ng-enabled="clusterform.$valid">{{ctrl.snapDeployed ? 'Update and Deploy' : 'Deploy'}}</button>
@@ -84,7 +85,6 @@ <h4 class="page-heading">Graphite Write</h4>
 
 <div class="grafana-info-box span10" ng-if="ctrl.showHelp">
   <h5>Manual Deploy</h5>
-  <p>The Deploy button will deploy the <a class="pointer highlight-word" href="https://hub.docker.com/r/raintank/snap_k8s/">Snap Kubernetes Docker image</a> that provides summary performance and availability metrics of a Kubernetes Node and its containers.</p>
   <p>If you want to deploy manually or to automate the deployment to Kubernetes, the following files are needed.</p>
   <p>
     <button type="button" class="btn btn-success" ng-click="ctrl.saveConfigMapToFile()">Download Daemonset ConfigMap</button>

diff --git a/dist/components/clusters/partials/cluster_info.html b/dist/components/clusters/partials/cluster_info.html
@@ -1,15 +1,63 @@
 <div class="page-header">
 	<h1>Overview</h1>
-
-	<h3 class="pointer" style="float: right; margin-top: 0.5rem; font-style: italic;" ng-click="ctrl.goToClusterDashboard()">
-     <i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> Cluster: {{ctrl.cluster.name}}</h3>
+  <h3 class="pointer" style="float: right; margin-top: 0.5rem; font-style: italic;" ng-click="ctrl.goToClusterDashboard()">
+     <i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> Cluster: {{ctrl.cluster.name}}
+  </h3>
 </div>
 <br>
 
+<section class="card-section card-list-layout-grid main-dash-links">
+  <ol class="card-list">
+    <li class="card-item-wrapper">
+      <div class="card-item card-item--main-dash-link pointer" ng-click="ctrl.goToClusterDashboard()">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer" ><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> <span>Cluster Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              A high level view of cluster health metrics.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+    <li class="card-item-wrapper">
+      <div class="card-item main-dash-link pointer" ng-click="ctrl.goToNodeDashboard('All', $event)">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Node Metrics dashboard'"></i> <span>Nodes Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              CPU, Memory, Disk Usage and Network metrics per node.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+    <li class="card-item-wrapper">
+      <div class="card-item main-dash-link pointer" ng-click="ctrl.goToPodDashboard()">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Pod Metrics dashboard'"></i> <span>Pod/Container Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              Pod/Container metrics - CPU, Memory or Network stats.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ol>
+</section>
+
+<h2>Browse Details from the Kubernetes API</h2>
 <section class="card-section card-list-layout-grid">
-  <h4 class="page-heading pointer" ng-click="ctrl.goToClusterDashboard()"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> <span class="muted">Go to Cluster Overview Dashboard</span></h4>
+
 	<h3 class="page-heading">
-		Namespaces <span class="muted small">(click on namespace to see pods)</span>
+		Namespaces <span class="muted small">(click on a namespace to see its pods and deployments)</span>
 	</h3>
 	<ol class="card-list">
 		<li class="card-item-wrapper" ng-repeat="ns in ctrl.namespaces">

diff --git a/dist/css/dark.css b/dist/css/dark.css
@@ -3,6 +3,7 @@ tr.dashlist-item:hover {
   cursor: pointer;
 }
 
+/* pod nav panel */
 .podnav-wrapper {
   display: flex;
   flex-direction: row;
@@ -65,3 +66,24 @@ tr.dashlist-item:hover {
   text-decoration: none;
   vertical-align: sub;
 }
+
+/* plugin config */
+
+.pluginconfig-message {
+  margin: 20px;
+}
+
+.k8s-icon-success {
+  color: #10a345;
+  font-size: 24px;
+  text-decoration: none;
+  vertical-align: sub;
+}
+
+/* cluster info */
+.main-dash-links {
+  margin-bottom: 40px;
+}
+.card-item--main-dash-link {
+  padding: 20px;
+}
diff --git a/dist/css/light.css b/dist/css/light.css
@@ -3,6 +3,7 @@ tr.dashlist-item:hover {
   cursor: pointer;
 }
 
+/* pod nav panel */
 .podnav-wrapper {
   display: flex;
   flex-direction: row;
@@ -55,6 +56,8 @@ tr.dashlist-item:hover {
   margin-right: 15px;
 }
 
+/* plugin config */
+
 .pluginconfig-message {
   margin: 20px;
 }
@@ -65,3 +68,11 @@ tr.dashlist-item:hover {
   text-decoration: none;
   vertical-align: sub;
 }
+
+/* cluster info */
+.main-dash-links {
+  margin-bottom: 40px;
+}
+.card-item--main-dash-link {
+  padding: 20px;
+}
diff --git a/src/components/clusters/clusterInfo.js b/src/components/clusters/clusterInfo.js
@@ -68,14 +68,25 @@ export class ClusterInfoCtrl {
       });
   }
 
+  goToPodDashboard() {
+    this.$location.path("dashboard/db/kubernetes-container")
+    .search({
+      "var-datasource": this.cluster.jsonData.ds,
+      "var-cluster": this.cluster.name,
+      "var-node": 'All',
+      "var-namespace": 'All',
+      "var-pod": 'All'
+    });
+  }
+
   goToNodeDashboard(node, evt) {
     var clickTargetIsLinkOrHasLinkParents = $(evt.target).closest('a').length > 0;
     if (clickTargetIsLinkOrHasLinkParents === false) {
       this.$location.path("dashboard/db/kubernetes-node")
       .search({
         "var-datasource": this.cluster.jsonData.ds,
         "var-cluster": this.cluster.name,
-        "var-node": slugify(node.metadata.name)
+        "var-node": node === 'All' ? 'All': slugify(node.metadata.name)
       });
     }
   }

diff --git a/src/components/clusters/partials/cluster_config.html b/src/components/clusters/partials/cluster_config.html
@@ -69,6 +69,7 @@ <h4 class="page-heading">Graphite Write</h4>
     </div>
   </div>
 </form>
+<p>The Deploy button will deploy the <a class="pointer highlight-word" href="https://hub.docker.com/r/raintank/snap_k8s/">Snap Kubernetes Docker image</a> with two metrics collectors that provides summary performance and availability metrics of a Kubernetes Node and its containers. (The manual deployment instructions are at the bottom of the page.)</p>
 <div class="gf-form-group" ng-show="ctrl.isOrgEditor">
   	<button type="submit" class="btn btn-success" ng-click="ctrl.save()" ng-enabled="clusterform.$valid">Save</button>
   	<button type="submit" class="btn btn-success" ng-click="ctrl.deploy()" ng-enabled="clusterform.$valid">{{ctrl.snapDeployed ? 'Update and Deploy' : 'Deploy'}}</button>
@@ -84,7 +85,6 @@ <h4 class="page-heading">Graphite Write</h4>
 
 <div class="grafana-info-box span10" ng-if="ctrl.showHelp">
   <h5>Manual Deploy</h5>
-  <p>The Deploy button will deploy the <a class="pointer highlight-word" href="https://hub.docker.com/r/raintank/snap_k8s/">Snap Kubernetes Docker image</a> that provides summary performance and availability metrics of a Kubernetes Node and its containers.</p>
   <p>If you want to deploy manually or to automate the deployment to Kubernetes, the following files are needed.</p>
   <p>
     <button type="button" class="btn btn-success" ng-click="ctrl.saveConfigMapToFile()">Download Daemonset ConfigMap</button>

diff --git a/src/components/clusters/partials/cluster_info.html b/src/components/clusters/partials/cluster_info.html
@@ -1,15 +1,63 @@
 <div class="page-header">
 	<h1>Overview</h1>
-
-	<h3 class="pointer" style="float: right; margin-top: 0.5rem; font-style: italic;" ng-click="ctrl.goToClusterDashboard()">
-     <i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> Cluster: {{ctrl.cluster.name}}</h3>
+  <h3 class="pointer" style="float: right; margin-top: 0.5rem; font-style: italic;" ng-click="ctrl.goToClusterDashboard()">
+     <i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> Cluster: {{ctrl.cluster.name}}
+  </h3>
 </div>
 <br>
 
+<section class="card-section card-list-layout-grid main-dash-links">
+  <ol class="card-list">
+    <li class="card-item-wrapper">
+      <div class="card-item card-item--main-dash-link pointer" ng-click="ctrl.goToClusterDashboard()">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer" ><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> <span>Cluster Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              A high level view of cluster health metrics.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+    <li class="card-item-wrapper">
+      <div class="card-item main-dash-link pointer" ng-click="ctrl.goToNodeDashboard('All', $event)">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Node Metrics dashboard'"></i> <span>Nodes Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              CPU, Memory, Disk Usage and Network metrics per node.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+    <li class="card-item-wrapper">
+      <div class="card-item main-dash-link pointer" ng-click="ctrl.goToPodDashboard()">
+        <div class="card-item-body">
+          <div class="card-item-details">
+            <div class="card-item-name">
+              <h2 class="page-heading pointer"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Pod Metrics dashboard'"></i> <span>Pod/Container Dashboard</span></h2>
+            </div>
+            <div class="card-item-sub-name">
+              Pod/Container metrics - CPU, Memory or Network stats.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ol>
+</section>
+
+<h2>Browse Details from the Kubernetes API</h2>
 <section class="card-section card-list-layout-grid">
-  <h4 class="page-heading pointer" ng-click="ctrl.goToClusterDashboard()"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Cluster Overview dashboard'"></i> <span class="muted">Go to Cluster Overview Dashboard</span></h4>
+
 	<h3 class="page-heading">
-		Namespaces <span class="muted small">(click on namespace to see pods)</span>
+		Namespaces <span class="muted small">(click on a namespace to see its pods and deployments)</span>
 	</h3>
 	<ol class="card-list">
 		<li class="card-item-wrapper" ng-repeat="ns in ctrl.namespaces">

diff --git a/src/css/dark.css b/src/css/dark.css
@@ -3,6 +3,7 @@ tr.dashlist-item:hover {
   cursor: pointer;
 }
 
+/* pod nav panel */
 .podnav-wrapper {
   display: flex;
   flex-direction: row;
@@ -65,3 +66,24 @@ tr.dashlist-item:hover {
   text-decoration: none;
   vertical-align: sub;
 }
+
+/* plugin config */
+
+.pluginconfig-message {
+  margin: 20px;
+}
+
+.k8s-icon-success {
+  color: #10a345;
+  font-size: 24px;
+  text-decoration: none;
+  vertical-align: sub;
+}
+
+/* cluster info */
+.main-dash-links {
+  margin-bottom: 40px;
+}
+.card-item--main-dash-link {
+  padding: 20px;
+}
diff --git a/src/css/light.css b/src/css/light.css
@@ -3,6 +3,7 @@ tr.dashlist-item:hover {
   cursor: pointer;
 }
 
+/* pod nav panel */
 .podnav-wrapper {
   display: flex;
   flex-direction: row;
@@ -55,6 +56,8 @@ tr.dashlist-item:hover {
   margin-right: 15px;
 }
 
+/* plugin config */
+
 .pluginconfig-message {
   margin: 20px;
 }
@@ -65,3 +68,11 @@ tr.dashlist-item:hover {
   text-decoration: none;
   vertical-align: sub;
 }
+
+/* cluster info */
+.main-dash-links {
+  margin-bottom: 40px;
+}
+.card-item--main-dash-link {
+  padding: 20px;
+}