Pamper pod list view: a few usability fixes (#1479)

* Pamper pod list view: a few usability fixes 1. Removed cluster IP colum - it is little useful there 2. Made status column ellipsable 3. Adjusted default widths and scaling factors for all columns - now age and restarts are small and no grow, others grow as needed 4. Made sparklines 80px wide - we don't need anything more for 15 points of data anyway
kubernetes · Nov 25, 2016 · a67af3e · a67af3e
1 parent db42226
commit a67af3e
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 20 deletions.
diff --git a/src/app/backend/resource/pod/podcommon.go b/src/app/backend/resource/pod/podcommon.go
@@ -49,7 +49,6 @@ func ToPod(pod *api.Pod, metrics *common.MetricsByPod) Pod {
 		ObjectMeta:   common.NewObjectMeta(pod.ObjectMeta),
 		TypeMeta:     common.NewTypeMeta(common.ResourceKindPod),
 		PodStatus:    getPodStatus(*pod),
-		PodIP:        pod.Status.PodIP,
 		RestartCount: getRestartCount(*pod),
 	}
 

diff --git a/src/app/backend/resource/pod/podlist.go b/src/app/backend/resource/pod/podlist.go
@@ -53,9 +53,6 @@ type Pod struct {
 	// More info on pod status
 	PodStatus PodStatus `json:"podStatus"`
 
-	// IP address of the Pod.
-	PodIP string `json:"podIP"`
-
 	// Count of containers restarts.
 	RestartCount int32 `json:"restartCount"`
 

diff --git a/src/app/frontend/common/components/resourcecard/resourcecardcolumn.scss b/src/app/frontend/common/components/resourcecard/resourcecardcolumn.scss
@@ -29,6 +29,7 @@ kd-resource-card-column {
       align-items: center;
       display: flex;
       flex-direction: row;
+      word-break: break-all;
     }
   }
 

diff --git a/src/app/frontend/common/components/sparkline/sparkline.scss b/src/app/frontend/common/components/sparkline/sparkline.scss
@@ -18,7 +18,7 @@
   background-color: $body;
   height: 2.5 * $baseline-grid;
   vertical-align: -$baseline-grid / 2; // 20% below baseline, to flow with text
-  width: 12.5 * $baseline-grid;
+  width: 8 * $baseline-grid;
 }
 
 .kd-sparkline-series {

diff --git a/src/app/frontend/podlist/podcard.html b/src/app/frontend/podlist/podcard.html
@@ -47,7 +47,12 @@
         </kd-middle-ellipsis>
       </div>
     </kd-resource-card-column>
-    <kd-resource-card-column>{{::$ctrl.getDisplayStatus()}}</kd-resource-card-column>
+    <kd-resource-card-column>
+      <div>
+        <kd-middle-ellipsis display-string="{{::$ctrl.getDisplayStatus()}}">
+        </kd-middle-ellipsis>
+      </div>
+    </kd-resource-card-column>
     <kd-resource-card-column>{{::$ctrl.pod.restartCount}}</kd-resource-card-column>
     <kd-resource-card-column>
       <div ng-if="::$ctrl.pod.objectMeta.creationTimestamp">
@@ -58,10 +63,6 @@
       </div>
       <div ng-if="::!$ctrl.pod.objectMeta.creationTimestamp">-</div>
     </kd-resource-card-column>
-    <kd-resource-card-column>
-      <div ng-if="::$ctrl.pod.podIP">{{::$ctrl.pod.podIP}}</div>
-      <div ng-if="::!$ctrl.pod.podIP">-</div>
-    </kd-resource-card-column>
     <kd-resource-card-column ng-if="::$ctrl.showMetrics">
       <div ng-if="::$ctrl.hasCpuUsage(pod)">
         <kd-sparkline timeseries="::$ctrl.pod.metrics.cpuUsageHistory"

diff --git a/src/app/frontend/podlist/podcardlist.html b/src/app/frontend/podlist/podcardlist.html
@@ -29,24 +29,22 @@
     <kd-resource-card-header-column size="small" grow="2">
       [[Name|Title of a column]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column size="small" grow="2"
-                                    ng-if="::$ctrl.areMultipleNamespacesSelected()">
+    <kd-resource-card-header-column size="small" grow="1" ng-if="$ctrl.areMultipleNamespacesSelected()">
       [[Namespace|Title of a column]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column size="small" grow="1">[[Status|Title of a pod status column]]
-    </kd-resource-card-header-column>
     <kd-resource-card-header-column size="small" grow="1">
-      [[Restarts|Title of a restarts column for a pod]]
+      [[Status|Title of a pod status column]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column size="small" grow="1">[[Age|Title of a column for the age of a
-      pod]]
+    <kd-resource-card-header-column size="small" grow="nogrow">
+      [[Restarts|Title of a restarts column for a pod]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column size="small" grow="1">[[Cluster IP|Title of a column]]
+    <kd-resource-card-header-column size="small" grow="nogrow">
+      [[Age|Title of a column for the age of a pod]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column ng-if="::$ctrl.showMetrics()">
+    <kd-resource-card-header-column size="small" grow="1" ng-if="::$ctrl.showMetrics()">
       [[CPU (cores)|Title of a column]]
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column ng-if="::$ctrl.showMetrics()">
+    <kd-resource-card-header-column size="small" grow="1" ng-if="::$ctrl.showMetrics()">
       [[Memory (bytes)|Title of a column]]
     </kd-resource-card-header-column>
     <kd-resource-card-header-column size="small" grow="nogrow">