Update PV and PVC capacity display (#2481)

* Update PV and PVC capacity display

* Update translations and remove capacity from PV details

* Update translations

* Use CSS text capitalize

* Add zerostate to capacity list

* Adjust update page

i18n/messages-en.xtb

@@ -88,6 +88,9 @@
   <translation id="1417978160910275828" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_1" desc="Text on the button to show fewer annotations.">show fewer annotations</translation>
   <translation id="6884163988875905686" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_2" desc="Text on the button to show all the annotations.">show all annotations</translation>
   <translation id="6935188165410090417" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_LASTAPPLIEDCONFIGURATION_0" desc="Label for the kubectl.kubernetes.io/last-applied-configuration annotation">last applied configuration</translation>
+  <translation id="6113138181366048141" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_0" desc="Persistent volume claim\'s capacity list.">Capacity</translation>
+  <translation id="5435782630213904388" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_1" desc="Persistent volume claim\'s resource name displayed on capacity list.">Resource name</translation>
+  <translation id="2148969238321481833" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_2" desc="Persistent volume claim\'s quantity displayed on capacity list.">Quantity</translation>
   <translation id="6456481460873145449" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_0" desc="Label \'Conditions\' for the conditions section.">Conditions</translation>
   <translation id="8993677465322195935" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_1" desc="Label \'Type\' for the condition table header.">Type</translation>
   <translation id="286975103376271553" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_10" desc="Label when there is no data.">-</translation>
@@ -561,7 +564,6 @@
   <translation id="1482471968556330090" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_0" desc="Header in a detail view">Details</translation>
   <translation id="6385503627780441862" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_1" desc="Persistent volume claim info details section status entry.">Status</translation>
   <translation id="2412371468817393973" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_2" desc="Persistent volume claim info details section volume entry.">Volume</translation>
-  <translation id="6740597941261077457" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_3" desc="Persistent volume claim info details section capacity entry.">Capacity</translation>
   <translation id="297809042910539610" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_4" desc="Persistent volume claim info details section access modes entry.">Access modes</translation>
   <translation id="4416635686473158703" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_5" desc="Persistent volume claim info details section storage class entry.">Storage class</translation>
   <translation id="29404782164326270" key="MSG_PERSISTENTVOLUMECLAIM_LIST_CARDLIST_0" desc="Label which appears above the list of such objects.">Persistent Volume Claims</translation>
@@ -585,11 +587,10 @@
   <translation id="1183014090355571191" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_2" desc="Persistent volume info details section claim entry.">Claim</translation>
   <translation id="8253469971637153606" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_3" desc="Persistent volume info details section reclaim policy entry.">Reclaim policy</translation>
   <translation id="1048037683065603923" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_4" desc="Persistent volume info details section access modes entry.">Access modes</translation>
-  <translation id="489198110526224081" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_5" desc="Persistent volume info details section capacity entry.">Capacity</translation>
   <translation id="7193098873360233228" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_6" desc="Persistent volume info details section message entry.">Message</translation>
   <translation id="8677793784230574410" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_7" desc="Persistent volume info details section storage class entry.">Storage class</translation>
   <translation id="4472860153979076217" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_8" desc="Persistent volume info details section reason entry.">Reason</translation>
-  <translation id="3344267084925697004" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">Persistent volume source</translation>
+  <translation id="2194822468753418857" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">Source</translation>
   <translation id="4229851576634547217" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_1" desc="Persistent volume source info host path title.">Host path</translation>
   <translation id="2012274989896397034" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_10" desc="Persistent volume source info AWS block storage section FS type entry.">FS type</translation>
   <translation id="1159922307397938960" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_11" desc="Persistent volume source info AWS block storage section partition entry.">Partition</translation>

i18n/messages-ja.xtb

@@ -92,6 +92,9 @@
   <translation id="1417978160910275828" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_1" desc="Text on the button to show fewer annotations.">注釈を隠す</translation>
   <translation id="6884163988875905686" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_2" desc="Text on the button to show all the annotations">注釈をすべて表示</translation>
   <translation id="6935188165410090417" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_LASTAPPLIEDCONFIGURATION_0" desc="Label for the kubectl.kubernetes.io/last-applied-configuration annotation">最終適用構成</translation>
+  <translation id="6113138181366048141" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_0" desc="Persistent volume claim\'s capacity list.">Capacity</translation>
+  <translation id="5435782630213904388" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_1" desc="Persistent volume claim\'s resource name displayed on capacity list.">Resource name</translation>
+  <translation id="2148969238321481833" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_2" desc="Persistent volume claim\'s quantity displayed on capacity list.">Quantity</translation>
   <translation id="6456481460873145449" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_0" desc="Label \'Conditions\' for the conditions section.">コンディション</translation>
   <translation id="8993677465322195935" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_1" desc="Label \'Type\' for the condition table header.">種別</translation>
   <translation id="286975103376271553" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_10" desc="Label when there is no data.">-</translation>
@@ -567,7 +570,6 @@
   <translation id="1482471968556330090" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_0" desc="Header in a detail view">詳細</translation>
   <translation id="6385503627780441862" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_1" desc="Persistent volume claim info details section status entry.">状態</translation>
   <translation id="2412371468817393973" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_2" desc="Persistent volume claim info details section volume entry.">ボリューム</translation>
-  <translation id="6740597941261077457" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_3" desc="Persistent volume claim info details section capacity entry.">容量</translation>
   <translation id="297809042910539610" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_4" desc="Persistent volume claim info details section access modes entry.">アクセスモード</translation>
   <translation id="4416635686473158703" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_5" desc="Persistent volume claim info details section storage class entry.">ストレージクラス</translation>
   <translation id="29404782164326270" key="MSG_PERSISTENTVOLUMECLAIM_LIST_CARDLIST_0" desc="Label which appears above the list of such objects.">永続ボリューム要求</translation>
@@ -591,11 +593,10 @@
   <translation id="1183014090355571191" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_2" desc="Persistent volume info details section claim entry.">要求</translation>
   <translation id="8253469971637153606" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_3" desc="Persistent volume info details section reclaim policy entry.">再要求ポリシー</translation>
   <translation id="1048037683065603923" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_4" desc="Persistent volume info details section access modes entry.">アクセスモード</translation>
-  <translation id="489198110526224081" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_5" desc="Persistent volume info details section capacity entry.">容量</translation>
   <translation id="7193098873360233228" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_6" desc="Persistent volume info details section message entry.">メッセージ</translation>
   <translation id="8677793784230574410" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_7" desc="Persistent volume info details section storage class entry.">ストレージクラス</translation>
   <translation id="4472860153979076217" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_8" desc="Persistent volume info details section reason entry.">理由</translation>
-  <translation id="3344267084925697004" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">永続ボリュームソース</translation>
+  <translation id="2194822468753418857" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">Source</translation>
   <translation id="4229851576634547217" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_1" desc="Persistent volume source info host path title.">ホストパス</translation>
   <translation id="2012274989896397034" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_10" desc="Persistent volume source info AWS block storage section FS type entry.">FS 種別</translation>
   <translation id="1159922307397938960" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_11" desc="Persistent volume source info AWS block storage section partition entry.">パーティション</translation>

i18n/messages-zh-tw.xtb

@@ -88,6 +88,9 @@
   <translation id="1417978160910275828" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_1" desc="Text on the button to show fewer annotations.">顯示簡要註釋</translation>
   <translation id="6884163988875905686" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_2" desc="Text on the button to show all the annotations.">顯示全部註釋</translation>
   <translation id="6935188165410090417" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_LASTAPPLIEDCONFIGURATION_0" desc="Label for the kubectl.kubernetes.io/last-applied-configuration annotation">最近應用組態</translation>
+  <translation id="6113138181366048141" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_0" desc="Persistent volume claim\'s capacity list.">Capacity</translation>
+  <translation id="5435782630213904388" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_1" desc="Persistent volume claim\'s resource name displayed on capacity list.">Resource name</translation>
+  <translation id="2148969238321481833" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_2" desc="Persistent volume claim\'s quantity displayed on capacity list.">Quantity</translation>
   <translation id="6456481460873145449" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_0" desc="Label \'Conditions\' for the conditions section.">現況</translation>
   <translation id="8993677465322195935" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_1" desc="Label \'Type\' for the condition table header.">類型</translation>
   <translation id="286975103376271553" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_10" desc="Label when there is no data.">-</translation>
@@ -559,7 +562,6 @@
   <translation id="1482471968556330090" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_0" desc="Header in a detail view">詳細資訊</translation>
   <translation id="6385503627780441862" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_1" desc="Persistent volume claim info details section status entry.">狀態</translation>
   <translation id="2412371468817393973" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_2" desc="Persistent volume claim info details section volume entry.">Volume</translation>
-  <translation id="6740597941261077457" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_3" desc="Persistent volume claim info details section capacity entry.">容量</translation>
   <translation id="297809042910539610" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_4" desc="Persistent volume claim info details section access modes entry.">存取模式</translation>
   <translation id="4416635686473158703" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_5" desc="Persistent volume claim info details section storage class entry.">儲存類別</translation>
   <translation id="29404782164326270" key="MSG_PERSISTENTVOLUMECLAIM_LIST_CARDLIST_0" desc="Label which appears above the list of such objects.">Persistent Volume Claims</translation>
@@ -583,11 +585,10 @@
   <translation id="1183014090355571191" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_2" desc="Persistent volume info details section claim entry.">索取</translation>
   <translation id="8253469971637153606" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_3" desc="Persistent volume info details section reclaim policy entry.">回收策略</translation>
   <translation id="1048037683065603923" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_4" desc="Persistent volume info details section access modes entry.">存取模式</translation>
-  <translation id="489198110526224081" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_5" desc="Persistent volume info details section capacity entry.">容量</translation>
   <translation id="7193098873360233228" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_6" desc="Persistent volume info details section message entry.">訊息</translation>
   <translation id="8677793784230574410" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_7" desc="Persistent volume info details section storage class entry.">儲存類別</translation>
   <translation id="4472860153979076217" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_8" desc="Persistent volume info details section reason entry.">原因</translation>
-  <translation id="3344267084925697004" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">持久性雲硬碟來源</translation>
+  <translation id="2194822468753418857" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">Source</translation>
   <translation id="4229851576634547217" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_1" desc="Persistent volume source info host path title.">宿主機路徑</translation>
   <translation id="2012274989896397034" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_10" desc="Persistent volume source info AWS block storage section FS type entry.">檔案系統類型</translation>
   <translation id="1159922307397938960" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_11" desc="Persistent volume source info AWS block storage section partition entry.">分區</translation>

i18n/messages-zh.xtb

@@ -88,6 +88,9 @@
   <translation id="1417978160910275828" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_1" desc="Text on the button to show fewer annotations.">显示简要注释</translation>
   <translation id="6884163988875905686" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_ANNOTATIONS_2" desc="Text on the button to show all the annotations.">显示所有注释</translation>
   <translation id="6935188165410090417" key="MSG_COMMON_COMPONENTS_ANNOTATIONS_LASTAPPLIEDCONFIGURATION_0" desc="Label for the kubectl.kubernetes.io/last-applied-configuration annotation">最近应用配置</translation>
+  <translation id="6113138181366048141" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_0" desc="Persistent volume claim\'s capacity list.">Capacity</translation>
+  <translation id="5435782630213904388" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_1" desc="Persistent volume claim\'s resource name displayed on capacity list.">Resource name</translation>
+  <translation id="2148969238321481833" key="MSG_COMMON_COMPONENTS_CAPACITY_CAPACITY_2" desc="Persistent volume claim\'s quantity displayed on capacity list.">Quantity</translation>
   <translation id="6456481460873145449" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_0" desc="Label \'Conditions\' for the conditions section.">现状</translation>
   <translation id="8993677465322195935" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_1" desc="Label \'Type\' for the condition table header.">类型</translation>
   <translation id="286975103376271553" key="MSG_COMMON_COMPONENTS_CONDITIONS_CONDITIONSLIST_10" desc="Label when there is no data.">-</translation>
@@ -561,7 +564,6 @@
   <translation id="1482471968556330090" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_0" desc="Header in a detail view">详情</translation>
   <translation id="6385503627780441862" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_1" desc="Persistent volume claim info details section status entry.">状态</translation>
   <translation id="2412371468817393973" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_2" desc="Persistent volume claim info details section volume entry.">存储卷</translation>
-  <translation id="6740597941261077457" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_3" desc="Persistent volume claim info details section capacity entry.">总量</translation>
   <translation id="297809042910539610" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_4" desc="Persistent volume claim info details section access modes entry.">访问模式</translation>
   <translation id="4416635686473158703" key="MSG_PERSISTENTVOLUMECLAIM_DETAIL_INFO_5" desc="Persistent volume claim info details section storage class entry.">存储类型</translation>
   <translation id="29404782164326270" key="MSG_PERSISTENTVOLUMECLAIM_LIST_CARDLIST_0" desc="Label which appears above the list of such objects.">持久化存储卷索取</translation>
@@ -585,11 +587,10 @@
   <translation id="1183014090355571191" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_2" desc="Persistent volume info details section claim entry.">索取</translation>
   <translation id="8253469971637153606" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_3" desc="Persistent volume info details section reclaim policy entry.">回收策略</translation>
   <translation id="1048037683065603923" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_4" desc="Persistent volume info details section access modes entry.">访问模式</translation>
-  <translation id="489198110526224081" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_5" desc="Persistent volume info details section capacity entry.">总量</translation>
   <translation id="7193098873360233228" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_6" desc="Persistent volume info details section message entry.">消息</translation>
   <translation id="8677793784230574410" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_7" desc="Persistent volume info details section storage class entry.">存储类型</translation>
   <translation id="4472860153979076217" key="MSG_PERSISTENTVOLUME_DETAIL_INFO_8" desc="Persistent volume info details section reason entry.">原因</translation>
-  <translation id="3344267084925697004" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">持久化存储卷来源</translation>
+  <translation id="2194822468753418857" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_0" desc="Persistent volume source info title.">Source</translation>
   <translation id="4229851576634547217" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_1" desc="Persistent volume source info host path title.">宿主机路径</translation>
   <translation id="2012274989896397034" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_10" desc="Persistent volume source info AWS block storage section FS type entry.">文件系统类型</translation>
   <translation id="1159922307397938960" key="MSG_PERSISTENTVOLUME_DETAIL_SOURCEINFO_11" desc="Persistent volume source info AWS block storage section partition entry.">分区</translation>

src/app/frontend/about/about.html

@@ -44,10 +44,12 @@ limitations under the License.
                         ng-if="::$ctrl.gitCommit">
       {{$ctrl.gitCommit}}
     </kd-info-card-entry>
-    <div class="kd-footer kd-copyright-title">[[Copyright 2015-{{$ctrl.latestCopyrightYear}} The Kubernetes Authors.| This is the copyright statement displayed on the about page]]</div>
-    <div class="kd-footer">
-      [[ Kubernetes Dashboard is made possible by the Dashboard
-      <a href="https://github.com/kubernetes/dashboard/graphs/contributors">community</a> as an <a href="https://github.com/kubernetes/dashboard">open source project</a>. | This is the creator reference on the footer of the about page]]
+    <div class="kd-about-footer-container">
+      <div class="kd-footer kd-copyright-title">[[Copyright 2015-{{$ctrl.latestCopyrightYear}} The Kubernetes Authors.| This is the copyright statement displayed on the about page]]</div>
+      <div class="kd-footer">
+        [[ Kubernetes Dashboard is made possible by the Dashboard
+        <a href="https://github.com/kubernetes/dashboard/graphs/contributors">community</a> as an <a href="https://github.com/kubernetes/dashboard">open source project</a>. | This is the creator reference on the footer of the about page]]
+      </div>
     </div>
   </kd-info-card-section>
 </kd-info-card>

src/app/frontend/about/about.scss

@@ -14,6 +14,9 @@
 
 @import '../variables';
 
+.kd-about-footer-container {
+  padding-bottom: $baseline-grid;
+}
 
 .kd-about-kubernetes-logo {
   height: $logo-height;

src/app/frontend/common/components/breadcrumbs/component.js

@@ -17,7 +17,7 @@ import Breadcrumb from './breadcrumb';
 /**
  * @final
  */
-export default class BreadcrumbsController {
+class BreadcrumbsController {
   /**
    * Constructs breadcrumbs controller.
    *

src/app/frontend/common/components/capacity/capacity.html

+<!--
+Copyright 2017 The Kubernetes Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<kd-content-card>
+  <kd-content>
+    <kd-resource-card-list selectable="false"
+                           with-statuses="false">
+      <kd-resource-card-list-header>
+        <kd-resource-card-list-title>
+          [[Capacity|Persistent volume claim's capacity list.]]
+        </kd-resource-card-list-title>
+      </kd-resource-card-list-header>
+
+      <kd-zero-state ng-if="!$ctrl.capacity">
+        <kd-zero-state-text>
+          [[No capacity has been assigned to this resource.|Text for pods card list zerostate.]]
+        </kd-zero-state-text>
+      </kd-zero-state>
+      <kd-resource-card-header-columns ng-show="$ctrl.capacity">
+        <kd-resource-card-header-column size="small"
+                                        grow="2">
+          [[Resource name|Persistent volume claim's resource name displayed on capacity list.]]
+        </kd-resource-card-header-column>
+        <kd-resource-card-header-column size="small"
+                                        grow="2">
+          [[Quantity|Persistent volume claim's quantity displayed on capacity list.]]
+        </kd-resource-card-header-column>
+      </kd-resource-card-header-columns>
+
+      <kd-resource-card-columns ng-repeat="(key, value) in ::$ctrl.capacity">
+        <kd-resource-card-column class="kd-capitalize">{{key}}</kd-resource-card-column>
+        <kd-resource-card-column>{{value}}</kd-resource-card-column>
+      </kd-resource-card-columns>
+    </kd-resource-card-list>
+  </kd-content>
+</kd-content-card>

src/app/frontend/common/components/capacity/capacity.scss

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.kd-capitalize {
+  text-transform: capitalize;
+}

src/app/frontend/common/components/capacity/component.js

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const capacityComponent = {
+  bindings: {
+    'capacity': '<',
+  },
+  templateUrl: 'common/components/capacity/capacity.html',
+};

src/app/frontend/common/components/infocard/infocardsection.scss

@@ -14,6 +14,14 @@
 
 @import '../../../variables';
 
+.kd-info-card-section {
+  padding-bottom: 0;
+
+  kd-info-card-section {
+    padding: 0 $baseline-grid;
+  }
+}
+
 .kd-info-card-section-container {
   display: flex;
   flex-grow: 1;
@@ -21,5 +29,5 @@
 }
 
 .kd-info-card-section-name {
-  padding-bottom: 2 * $baseline-grid;
+  padding-bottom: $baseline-grid;
 }

src/app/frontend/common/components/module.js

@@ -12,14 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import dataSelectModule from '../dataselect/module';
 import filtersModule from '../filters/module';
+import namespaceModule from '../namespace/module';
 import stateModule from '../state/module';
 
-import dataSelectModule from './../dataselect/module';
-import namespaceModule from './../namespace/module';
 import actionbarModule from './actionbar/module';
 import allocatedResourcesChartModule from './allocatedresourceschart/module';
 import annotationsModule from './annotations/module';
+import {capacityComponent} from './capacity/component';
 import {conditionListComponent} from './conditions/component';
 import {contentCardComponent} from './contentcard/component';
 import endpointModule from './endpoint/module';
@@ -72,5 +73,6 @@ export default angular
     .component('kdConditionList', conditionListComponent)
     .component('kdScaleButton', scaleButtonComponent)
     .component('kdPodWarnings', podWarningsComponent)
+    .component('kdCapacity', capacityComponent)
     .directive('kdWarnThreshold', warnThresholdDirective)
     .directive('kdUploadFile', uploadFileDirective);

src/app/frontend/persistentvolume/detail/detail.html

@@ -18,3 +18,5 @@ limitations under the License.
   <kd-persistent-volume-info persistent-volume="::$ctrl.persistentVolumeDetail"></kd-persistent-volume-info>
   <kd-persistent-volume-source-info persistent-volume-source="::$ctrl.persistentVolumeDetail.persistentVolumeSource"></kd-persistent-volume-source-info>
 </div>
+
+<kd-capacity capacity="::$ctrl.persistentVolumeDetail.capacity"></kd-capacity>

src/app/frontend/persistentvolume/detail/info.html

@@ -45,12 +45,6 @@ limitations under the License.
       </kd-middle-ellipsis>
       <div ng-hide="::$ctrl.persistentVolume.storageClass">-</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="[[Reason|Persistent volume info details section reason entry.]]">
       <kd-middle-ellipsis display-string="{{::$ctrl.persistentVolume.reason}}">
       </kd-middle-ellipsis>

src/app/frontend/persistentvolume/detail/sourceinfo.html

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <kd-info-card>
-  <kd-info-card-header>[[Persistent volume source|Persistent volume source info title.]]</kd-info-card-header>
+  <kd-info-card-header>[[Source|Persistent volume source info title.]]</kd-info-card-header>
   <!--Host Path-->
   <kd-info-card-section ng-if="::$ctrl.persistentVolumeSource.hostPath"
                         name="[[Host path|Persistent volume source info host path title.]]">

src/app/frontend/persistentvolumeclaim/detail/detail.html

@@ -17,3 +17,5 @@ limitations under the License.
 <div layout="column">
   <kd-persistent-volume-claim-info persistent-volume-claim="::$ctrl.persistentVolumeClaimDetail"></kd-persistent-volume-claim-info>
 </div>
+
+<kd-capacity capacity="::$ctrl.persistentVolumeClaimDetail.capacity"></kd-capacity>

src/app/frontend/persistentvolumeclaim/detail/info.html

@@ -26,10 +26,6 @@ limitations under the License.
       <div ng-show="::$ctrl.persistentVolumeClaim.volume">{{::$ctrl.persistentVolumeClaim.volume}}</div>
       <div ng-hide="::$ctrl.persistentVolumeClaim.volume">-</div>
     </kd-info-card-entry>
-    <kd-info-card-entry title="[[Capacity|Persistent volume claim info details section capacity entry.]]">
-      <div ng-show="::$ctrl.persistentVolumeClaim.capacity">{{::$ctrl.persistentVolumeClaim.capacity}}</div>
-      <div ng-hide="::$ctrl.persistentVolumeClaim.capacity">-</div>
-    </kd-info-card-entry>
     <kd-info-card-entry title="[[Access modes|Persistent volume claim info details section access modes entry.]]">
       <div ng-repeat="mode in $ctrl.persistentVolumeClaim.accessModes">
         <kd-middle-ellipsis display-string="{{::mode}}"></kd-middle-ellipsis>

src/app/frontend/persistentvolumeclaim/detail/info_component.js

@@ -15,7 +15,7 @@
 /**
  * @final
  */
-export default class PersistentVolumeClaimInfoController {
+class PersistentVolumeClaimInfoController {
   /**
    * Constructs persistent volume claim controller info object.
    */

src/test/frontend/common/components/capacity/component_test.js

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import module from 'common/components/module';
+
+describe('capacity component', () => {
+  /** @type {!CapacityController} */
+  let ctrl;
+
+  beforeEach(() => {
+    angular.mock.module(module.name);
+
+    angular.mock.inject(($componentController) => {
+      ctrl = $componentController('kdCapacity');
+    });
+  });
+
+  it('should initialize controller', () => {
+    expect(ctrl).not.toBeNull();
+  });
+});