Make card titles consistent across the UI

Fixes kubernetes#1451
bryk · Nov 21, 2016 · 7605cb5 · 7605cb5
1 parent 76bb6ee
commit 7605cb5
Show file tree

Hide file tree

Showing 21 changed files with 387 additions and 821 deletions.
diff --git a/i18n/messages-en.xtb b/i18n/messages-en.xtb
diff --git a/i18n/messages-ja.xtb b/i18n/messages-ja.xtb
diff --git a/src/app/frontend/common/components/infocard/infocardsection.html b/src/app/frontend/common/components/infocard/infocardsection.html
@@ -15,6 +15,6 @@
 -->
 
 <div layout="column" class="kd-info-card-section-container">
-  <div class="kd-info-card-section-name">{{$ctrl.name}}</div>
+  <div class="kd-info-card-section-name" ng-if="::$ctrl.name">{{$ctrl.name}}</div>
   <div flex="auto" ng-transclude></div>
 </div>
diff --git a/src/app/frontend/common/components/resourcecard/resourcecardlist.html b/src/app/frontend/common/components/resourcecard/resourcecardlist.html
@@ -16,7 +16,7 @@
 
 <div class="kd-resource-card-list-wrapper">
   <div class="kd-resource-card-list-header-wrapper">
-    <div ng-transclude="header" class="kd-resource-card-list-header md-title"></div>
+    <div ng-transclude="header" class="kd-resource-card-list-header md-title" ng-if="::$ctrl.hasHeader()"></div>
     <div ng-transclude="pagination" class="kd-resource-card-list-pagination"></div>
   </div>
   <div class="kd-resource-card-list"

diff --git a/src/app/frontend/common/components/resourcecard/resourcecardlist_component.js b/src/app/frontend/common/components/resourcecard/resourcecardlist_component.js
@@ -12,14 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+const HEADER_SLOT = 'header';
+
 /**
  * @final
  */
 export class ResourceCardListController {
   /**
+   * @param {!angular.$transclude} $transclude
    * @ngInject
    */
-  constructor() {
+  constructor($transclude) {
     /**
      * Whether this list is in a pending async state (e.g., loading new page);
      * @export {boolean}
@@ -44,6 +47,9 @@ export class ResourceCardListController {
      * @private {!./resourcecardheadercolumns_component.ResourceCardHeaderColumnsController}
      */
     this.headerColumns_;
+
+    /** @private {!angular.$transclude} */
+    this.transclude_ = $transclude;
   }
 
   /**
@@ -71,6 +77,14 @@ export class ResourceCardListController {
   setPending(pending) {
     this.pending = pending;
   }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  hasHeader() {
+    return this.transclude_.isSlotFilled(HEADER_SLOT);
+  }
 }
 
 /**
@@ -118,7 +132,7 @@ export const resourceCardListComponent = {
   templateUrl: 'common/components/resourcecard/resourcecardlist.html',
   transclude: {
     'pagination': '?kdResourceCardListPagination',
-    'header': '?kdResourceCardListHeader',
+    [HEADER_SLOT]: '?kdResourceCardListHeader',
   },
   controller: ResourceCardListController,
   bindings: {

diff --git a/src/app/frontend/daemonsetdetail/daemonsetinfo.html b/src/app/frontend/daemonsetdetail/daemonsetinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a daemon set on the daemonset details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-info-card-entry title="[[Name|Label 'Name' for the daemon set name on the details page.]]">
       <kd-middle-ellipsis
               display-string="{{::$ctrl.daemonSet.objectMeta.name}}">

diff --git a/src/app/frontend/deploymentdetail/deploymentinfo.html b/src/app/frontend/deploymentdetail/deploymentinfo.html
@@ -1,5 +1,6 @@
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a deployment on the deployment details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-info-card-entry title="[[Name|Label 'Name' for the deployment name on the deployment details page.]]">
       <kd-middle-ellipsis
               display-string="{{::$ctrl.deployment.objectMeta.name}}">

diff --git a/src/app/frontend/ingressdetail/info.html b/src/app/frontend/ingressdetail/info.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Resource info details section name.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-info-card-entry title="[[Name|Resource info details section name entry.]]">
       <kd-middle-ellipsis
               display-string="{{::$ctrl.ingress.objectMeta.name}}">

diff --git a/src/app/frontend/jobdetail/jobinfo.html b/src/app/frontend/jobdetail/jobinfo.html
@@ -15,7 +15,7 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-header>[[Resource details|Resource details header. Appears on top of the page.]]</kd-info-card-header>
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
   <kd-info-card-section name="[[Details|Details section header. Appears below main header.]]">
     <kd-info-card-entry title="[[Name|Job name. Appears in details section.]]">
       <kd-middle-ellipsis

diff --git a/src/app/frontend/namespacedetail/namespaceinfo.html b/src/app/frontend/namespacedetail/namespaceinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a namespace on the namespace details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.namespace.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Status|Label 'Status' for the namespace namespace on the namespace details page.]]"

diff --git a/src/app/frontend/nodedetail/nodeinfo.html b/src/app/frontend/nodedetail/nodeinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a node on the node details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.node.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Phase|Label 'Phase' for the node namespace on the node details page.]]"

diff --git a/src/app/frontend/persistentvolumeclaimdetail/persistentvolumeclaiminfo.html b/src/app/frontend/persistentvolumeclaimdetail/persistentvolumeclaiminfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Persistent volume claim info details section name.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.persistentVolumeClaim.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Status|Persistent volume claim info details section status entry.]]">

diff --git a/src/app/frontend/persistentvolumedetail/persistentvolumeinfo.html b/src/app/frontend/persistentvolumedetail/persistentvolumeinfo.html
@@ -15,44 +15,45 @@
 -->
 
 <kd-info-card>
-    <kd-info-card-section name="[[Details|Persistent volume info details section name.]]">
-        <kd-object-meta-info-card object-meta="::$ctrl.statefulSet.objectMeta">
-        </kd-object-meta-info-card>
-        <kd-info-card-entry title="[[Status|Persistent volume info details section status entry.]]">
-            <kd-middle-ellipsis
-                    display-string="{{::$ctrl.persistentVolume.status}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.status">-</div>
-        </kd-info-card-entry>
-        <kd-info-card-entry title="[[Claim|Persistent volume info details section claim entry.]]">
-            <kd-middle-ellipsis
-                    display-string="{{::$ctrl.persistentVolume.claim}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.claim">-</div>
-        </kd-info-card-entry>
-        <kd-info-card-entry title="[[Reclaim policy|Persistent volume info details section reclaim policy entry.]]">
-            <kd-middle-ellipsis
-                    display-string="{{::$ctrl.persistentVolume.reclaimPolicy}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.reclaimPolicy">-</div>
-        </kd-info-card-entry>
-        <kd-info-card-entry title="[[Access modes|Persistent volume info details section access modes entry.]]">
-            <kd-middle-ellipsis ng-repeat="(key, value) in ::$ctrl.persistentVolume.accessModes"
-                    display-string="{{::value}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.accessModes">-</div>
-        </kd-info-card-entry>
-        <kd-info-card-entry title="[[Capacity|Persistent volume info details section capacity entry.]]">
-            <kd-middle-ellipsis ng-repeat="(key, value) in ::$ctrl.persistentVolume.capacity"
-                                display-string="{{::value}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.capacity">-</div>
-        </kd-info-card-entry>
-        <kd-info-card-entry title="[[Message|Persistent volume info details section message entry.]]">
-            <kd-middle-ellipsis
-                    display-string="{{::$ctrl.persistentVolume.message}}">
-            </kd-middle-ellipsis>
-            <div ng-hide="::$ctrl.persistentVolume.message">-</div>
-        </kd-info-card-entry>
-    </kd-info-card-section>
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
+    <kd-object-meta-info-card object-meta="::$ctrl.statefulSet.objectMeta">
+    </kd-object-meta-info-card>
+    <kd-info-card-entry title="[[Status|Persistent volume info details section status entry.]]">
+        <kd-middle-ellipsis
+                display-string="{{::$ctrl.persistentVolume.status}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.status">-</div>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="[[Claim|Persistent volume info details section claim entry.]]">
+        <kd-middle-ellipsis
+                display-string="{{::$ctrl.persistentVolume.claim}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.claim">-</div>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="[[Reclaim policy|Persistent volume info details section reclaim policy entry.]]">
+        <kd-middle-ellipsis
+                display-string="{{::$ctrl.persistentVolume.reclaimPolicy}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.reclaimPolicy">-</div>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="[[Access modes|Persistent volume info details section access modes entry.]]">
+        <kd-middle-ellipsis ng-repeat="(key, value) in ::$ctrl.persistentVolume.accessModes"
+                display-string="{{::value}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.accessModes">-</div>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="[[Capacity|Persistent volume info details section capacity entry.]]">
+        <kd-middle-ellipsis ng-repeat="(key, value) in ::$ctrl.persistentVolume.capacity"
+                            display-string="{{::value}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.capacity">-</div>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="[[Message|Persistent volume info details section message entry.]]">
+        <kd-middle-ellipsis
+                display-string="{{::$ctrl.persistentVolume.message}}">
+        </kd-middle-ellipsis>
+        <div ng-hide="::$ctrl.persistentVolume.message">-</div>
+    </kd-info-card-entry>
+  </kd-info-card-section>
 </kd-info-card>
diff --git a/src/app/frontend/poddetail/podinfo.html b/src/app/frontend/poddetail/podinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Pod|Subtitle 'Details' at the top of the resource details column at the pod detail view.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.pod.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Status|Label 'Status' for the pod status in details part (left) of the pod details view.]]">

diff --git a/src/app/frontend/replicasetdetail/replicasetinfo.html b/src/app/frontend/replicasetdetail/replicasetinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a replica set on the replica set details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.replicaSet.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Selector|Label 'selector' for replica sets.]]">

diff --git a/src/app/frontend/replicationcontrollerdetail/replicationcontrollerinfo.html b/src/app/frontend/replicationcontrollerdetail/replicationcontrollerinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' for the left section with general information about a replication controller on the replication controller details page.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.replicationController.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Label selector|Label 'Label selector' for the replication controller's selector on the replication controller details page.]]">

diff --git a/src/app/frontend/secretdetail/info.html b/src/app/frontend/secretdetail/info.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Secret info details section name.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.secret.objectMeta">
     </kd-object-meta-info-card>
   </kd-info-card-section>

diff --git a/src/app/frontend/servicedetail/servicedetailinfo.html b/src/app/frontend/servicedetail/servicedetailinfo.html
@@ -15,8 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-header>[[Resource Details|Title 'Resource details' at the top service details view.]]</kd-info-card-header>
-  <kd-info-card-section name="[[Details|Subtitle 'Details' at the top of the resource details column at the service detail view.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.service.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Label selector|Label 'Label selector' for the service's label selector in the details part (left) of the service details view.]]">

diff --git a/src/app/frontend/statefulsetdetail/statefulsetinfo.html b/src/app/frontend/statefulsetdetail/statefulsetinfo.html
@@ -15,7 +15,8 @@
 -->
 
 <kd-info-card>
-  <kd-info-card-section name="[[Details|Stateful set info details section name.]]">
+  <kd-info-card-header>[[Details|Header in a detail view]]</kd-info-card-header>
+  <kd-info-card-section>
     <kd-object-meta-info-card object-meta="::$ctrl.statefulSet.objectMeta">
     </kd-object-meta-info-card>
     <kd-info-card-entry title="[[Labels|Stateful set info details section labels entry.]]">

diff --git a/src/test/frontend/common/components/resourcecard/resourcecardlist_component_test.js b/src/test/frontend/common/components/resourcecard/resourcecardlist_component_test.js
@@ -32,6 +32,7 @@ describe('Resource card list', () => {
   it('should fill the card layout', () => {
     let compileFn = compile(`
       <kd-resource-card-list selectable="selectable" with-statuses="withStatuses">
+        <kd-resource-card-list-header>Foo</kd-resource-card-list-header>
         <kd-resource-card-header-columns>
           <kd-resource-card-header-column size="small" grow="nogrow">
             NAME_COLUMN
@@ -91,6 +92,7 @@ describe('Resource card list', () => {
     expect(elem.html()).not.toContain('STATUS');
     expect(elem.html()).toContain('FOOTER');
     expect(elem.html()).not.toContain('md-checkbox');
+    expect(elem.html()).toContain('kd-resource-card-list-header');
 
     scope.withStatuses = true;
     scope.$digest();

diff --git a/...test/frontend/common/components/resourcecard/resourcecardlistpagination_component_test.js b/...test/frontend/common/components/resourcecard/resourcecardlistpagination_component_test.js
@@ -51,7 +51,7 @@ describe('Resource card list pagination', () => {
 
           errDialog = errorDialog;
           httpBackend = $httpBackend;
-          resourceCardListCtrl = $componentController('kdResourceCardList');
+          resourceCardListCtrl = $componentController('kdResourceCardList', {$transclude: {}});
           scope = $rootScope;
           ctrl = $componentController(
               'kdResourceCardListPagination', {