Rewrite allocation charts (#4619)

* Rewrite allocation charts

* Add translation attributes

* Format files

* Format files

* Add units

* Add units

* Update custom colors getter

i18n/fr/messages.fr.xlf

@@ -371,6 +371,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
           <context context-type="linenumber">87</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
+          <context context-type="linenumber">160</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/workloads/deployment/detail/template.html</context>
           <context context-type="linenumber">247</context>
@@ -2117,18 +2121,6 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html</context>
           <context context-type="linenumber">95</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">157</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">189</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">211</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/persistentvolume/detail/template.html</context>
           <context context-type="linenumber">82</context>
@@ -4219,57 +4211,21 @@
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
           <context context-type="linenumber">128</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">206</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="753027252ba1aa852076b700564511d009b9bdb1" datatype="html">
-        <source>CPU allocation (cores)</source>
-        <target>Allocation de CPU (coeurs)</target>
+      <trans-unit id="43a02cbb549d36c5086109559945a3db29542b1f" datatype="html">
+        <source>CPU</source>
+        <target state="new">CPU</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">140</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5238405b3e8e1b72d2732f0ecbd83be35b98cd5d" datatype="html">
-        <source>Requests</source>
-        <target>Requêtes</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">143</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">175</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="6e4a7fbd08e57c43160b28964d8eefb1164a62d3" datatype="html">
-        <source>Limits</source>
-        <target>Limites</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">150</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">182</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="555a529389b6bb1e6ce44c2fcb3ed41acf43ce96" datatype="html">
-        <source>Memory allocation (bytes)</source>
-        <target>Allocation mémoire (octets)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c8fe438d81a06420cc7c644f80a4c559497dfe5" datatype="html">
-        <source>Pods allocation</source>
-        <target>Allocation de pods</target>
+      <trans-unit id="58d4a9814864741040bc5905b6a368836e683f76" datatype="html">
+        <source>Memory</source>
+        <target state="new">Memory</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">148</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c910633dbd59abefedb3896b45649b1373e31aab" datatype="html">

i18n/ja/messages.ja.xlf

@@ -1373,6 +1373,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
           <context context-type="linenumber">87</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
+          <context context-type="linenumber">160</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/workloads/deployment/detail/template.html</context>
           <context context-type="linenumber">247</context>
@@ -1972,18 +1976,6 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html</context>
           <context context-type="linenumber">95</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">157</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">189</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">211</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/persistentvolume/detail/template.html</context>
           <context context-type="linenumber">82</context>
@@ -4193,57 +4185,21 @@
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
           <context context-type="linenumber">128</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">206</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="753027252ba1aa852076b700564511d009b9bdb1" datatype="html">
-        <source>CPU allocation (cores)</source>
-        <target>CPU 割り当て (コア数)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">140</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5238405b3e8e1b72d2732f0ecbd83be35b98cd5d" datatype="html">
-        <source>Requests</source>
-        <target>要求</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">143</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">175</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="6e4a7fbd08e57c43160b28964d8eefb1164a62d3" datatype="html">
-        <source>Limits</source>
-        <target>上限</target>
+      <trans-unit id="43a02cbb549d36c5086109559945a3db29542b1f" datatype="html">
+        <source>CPU</source>
+        <target state="new">CPU</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">150</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">182</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="555a529389b6bb1e6ce44c2fcb3ed41acf43ce96" datatype="html">
-        <source>Memory allocation (bytes)</source>
-        <target>メモリー割り当て (バイト)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c8fe438d81a06420cc7c644f80a4c559497dfe5" datatype="html">
-        <source>Pods allocation</source>
-        <target>ポッド割り当て</target>
+      <trans-unit id="58d4a9814864741040bc5905b6a368836e683f76" datatype="html">
+        <source>Memory</source>
+        <target state="new">Memory</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">148</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c910633dbd59abefedb3896b45649b1373e31aab" datatype="html">

i18n/ko/messages.ko.xlf

@@ -425,6 +425,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
           <context context-type="linenumber">87</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
+          <context context-type="linenumber">160</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/workloads/deployment/detail/template.html</context>
           <context context-type="linenumber">247</context>
@@ -2087,18 +2091,6 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html</context>
           <context context-type="linenumber">95</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">157</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">189</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">211</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/persistentvolume/detail/template.html</context>
           <context context-type="linenumber">82</context>
@@ -3346,6 +3338,9 @@
         
         
         
+        
+        
+        
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/template.html</context>
           <context context-type="linenumber">54</context>
@@ -4356,57 +4351,21 @@
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
           <context context-type="linenumber">128</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">206</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="753027252ba1aa852076b700564511d009b9bdb1" datatype="html">
-        <source>CPU allocation (cores)</source>
-        <target state="new">CPU 할당(cores)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">140</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5238405b3e8e1b72d2732f0ecbd83be35b98cd5d" datatype="html">
-        <source>Requests</source>
-        <target state="new">요청</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">143</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">175</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="6e4a7fbd08e57c43160b28964d8eefb1164a62d3" datatype="html">
-        <source>Limits</source>
-        <target state="new">상한</target>
+      <trans-unit id="43a02cbb549d36c5086109559945a3db29542b1f" datatype="html">
+        <source>CPU</source>
+        <target state="new">CPU</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">150</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">182</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="555a529389b6bb1e6ce44c2fcb3ed41acf43ce96" datatype="html">
-        <source>Memory allocation (bytes)</source>
-        <target state="new">메모리 할당(bytes)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c8fe438d81a06420cc7c644f80a4c559497dfe5" datatype="html">
-        <source>Pods allocation</source>
-        <target state="new">파드 할당</target>
+      <trans-unit id="58d4a9814864741040bc5905b6a368836e683f76" datatype="html">
+        <source>Memory</source>
+        <target state="new">Memory</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">148</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c910633dbd59abefedb3896b45649b1373e31aab" datatype="html">

i18n/messages.xlf

@@ -368,6 +368,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
           <context context-type="linenumber">87</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
+          <context context-type="linenumber">160</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/workloads/deployment/detail/template.html</context>
           <context context-type="linenumber">247</context>
@@ -1912,18 +1916,6 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html</context>
           <context context-type="linenumber">95</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">157</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">189</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">211</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/persistentvolume/detail/template.html</context>
           <context context-type="linenumber">82</context>
@@ -3779,52 +3771,19 @@
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
           <context context-type="linenumber">128</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">206</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="753027252ba1aa852076b700564511d009b9bdb1" datatype="html">
-        <source>CPU allocation (cores)</source>
+      <trans-unit id="43a02cbb549d36c5086109559945a3db29542b1f" datatype="html">
+        <source>CPU</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">140</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5238405b3e8e1b72d2732f0ecbd83be35b98cd5d" datatype="html">
-        <source>Requests</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">143</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">175</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="6e4a7fbd08e57c43160b28964d8eefb1164a62d3" datatype="html">
-        <source>Limits</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">150</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">182</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="555a529389b6bb1e6ce44c2fcb3ed41acf43ce96" datatype="html">
-        <source>Memory allocation (bytes)</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c8fe438d81a06420cc7c644f80a4c559497dfe5" datatype="html">
-        <source>Pods allocation</source>
+      <trans-unit id="58d4a9814864741040bc5905b6a368836e683f76" datatype="html">
+        <source>Memory</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">148</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c910633dbd59abefedb3896b45649b1373e31aab" datatype="html">

i18n/zh/messages.zh.xlf

@@ -425,6 +425,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
           <context context-type="linenumber">87</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
+          <context context-type="linenumber">160</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/workloads/deployment/detail/template.html</context>
           <context context-type="linenumber">247</context>
@@ -2087,18 +2091,6 @@
           <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html</context>
           <context context-type="linenumber">95</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">157</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">189</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">211</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/persistentvolume/detail/template.html</context>
           <context context-type="linenumber">82</context>
@@ -4327,57 +4319,21 @@
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
           <context context-type="linenumber">128</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">206</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="753027252ba1aa852076b700564511d009b9bdb1" datatype="html">
-        <source>CPU allocation (cores)</source>
-        <target state="new">CPU allocation (cores)</target>
+      <trans-unit id="43a02cbb549d36c5086109559945a3db29542b1f" datatype="html">
+        <source>CPU</source>
+        <target state="new">CPU</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">140</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5238405b3e8e1b72d2732f0ecbd83be35b98cd5d" datatype="html">
-        <source>Requests</source>
-        <target state="new">请求</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">143</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">175</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="6e4a7fbd08e57c43160b28964d8eefb1164a62d3" datatype="html">
-        <source>Limits</source>
-        <target state="new">范围</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">150</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">182</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="555a529389b6bb1e6ce44c2fcb3ed41acf43ce96" datatype="html">
-        <source>Memory allocation (bytes)</source>
-        <target state="new">Memory 分配 (bytes)</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c8fe438d81a06420cc7c644f80a4c559497dfe5" datatype="html">
-        <source>Pods allocation</source>
-        <target state="new">Pods 分配</target>
+      <trans-unit id="58d4a9814864741040bc5905b6a368836e683f76" datatype="html">
+        <source>Memory</source>
+        <target state="new">Memory</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/cluster/node/detail/template.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">148</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c910633dbd59abefedb3896b45649b1373e31aab" datatype="html">

src/app/frontend/common/components/allocationchart/component.ts

-// 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 {Component, Input, OnChanges} from '@angular/core';
-import {ChartAPI, generate} from 'c3';
-import {BaseType, select, Selection} from 'd3';
-
-interface PieChartData {
-  key?: string;
-  value: number;
-  color?: string;
-}
-
-type ChartType = 'pie' | 'donut';
-
-@Component({
-  selector: 'kd-allocation-chart',
-  templateUrl: './template.html',
-})
-export class AllocationChartComponent implements OnChanges {
-  @Input() data: PieChartData[];
-  @Input() colorPalette: string[];
-  @Input() outerPercent: number;
-  @Input() outerColor: string;
-  @Input() innerPercent: number;
-  @Input() innerColor: string;
-  @Input() type: ChartType = 'donut';
-  @Input() enableTooltips = false;
-  @Input() size = 280;
-  @Input() id: string;
-
-  private allocated_: Set<string | number>;
-
-  ngOnChanges(): void {
-    this.allocated_ = new Set();
-    setTimeout(() => this.generateGraph_(), 0);
-  }
-
-  initPieChart_(
-    svg: Selection<BaseType, {}, HTMLElement, HTMLElement>,
-    data: PieChartData[],
-    padding: number,
-    labelFunc: (d: {}, i: number, values: {}) => string | null = this.formatLabel_,
-  ): ChartAPI {
-    const colors: {[key: string]: string} = {};
-    const columns: Array<Array<string | number>> = [];
-
-    data.forEach((x, i) => {
-      if (x.value > 0) {
-        const key = x.key || x.value;
-        colors[key] = x.color || this.colorPalette[i];
-        columns.push([key, x.value]);
-
-        if (i === 0) {
-          this.allocated_.add(key);
-        }
-      }
-    });
-
-    return generate({
-      bindto: svg,
-      size: {
-        width: this.size,
-        height: this.size,
-      },
-      legend: {
-        show: false,
-      },
-      tooltip: {
-        show: this.enableTooltips,
-      },
-      transition: {duration: 350},
-      donut: {
-        label: {
-          format: labelFunc,
-        },
-      },
-      data: {
-        columns,
-        type: this.type,
-        colors,
-      },
-      padding: {top: padding, right: padding, bottom: padding, left: padding},
-    });
-  }
-
-  /**
-   * Generates graph using provided requests and limits bindings.
-   */
-  generateGraph_(): void {
-    let svg = select(`#${this.id}`);
-
-    if (!this.data) {
-      svg = svg
-        .append('svg')
-        .attr('width', this.size)
-        .attr('height', this.size);
-
-      if (this.outerPercent !== undefined) {
-        this.outerColor = this.outerColor ? this.outerColor : '#00c752';
-        this.initPieChart_(
-          svg.append('g'),
-          [
-            {value: this.outerPercent, color: this.outerColor},
-            {value: 100 - this.outerPercent, color: '#ddd'},
-          ],
-          0,
-          this.displayOnlyAllocated_.bind(this),
-        );
-      }
-
-      if (this.innerPercent !== undefined) {
-        this.innerColor = this.innerColor ? this.innerColor : '#326de6';
-        this.initPieChart_(
-          svg.append('g'),
-          [
-            {value: this.innerPercent, color: this.innerColor},
-            {value: 100 - this.innerPercent, color: '#ddd'},
-          ],
-          45,
-          this.displayOnlyAllocated_.bind(this),
-        );
-      }
-    } else {
-      // Initializes a pie chart with multiple entries in a single ring
-      this.initPieChart_(svg, this.data, 0);
-    }
-  }
-
-  /**
-   * Displays label only for allocated resources
-   */
-  private displayOnlyAllocated_(value: number, _: number, id: string | number): string {
-    return this.allocated_.has(id) ? `${Math.round(value)}%` : '';
-  }
-
-  /**
-   * Formats percentage label to display in fixed format.
-   */
-  private formatLabel_(value: number): string {
-    return `${Math.round(value)}%`;
-  }
-}

src/app/frontend/common/components/allocationchart/template.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.
--->
-
-<div [id]="id">
-  <!-- Graph <svg> is inserted in here. -->
-</div>

src/app/frontend/common/components/graph/helper.ts

@@ -58,6 +58,21 @@ export function coresFilter(value: number): string {
   return suffix ? `${formatted} ${suffix}` : formatted;
 }
 
+export function coresFilterDivider(value: number): number {
+  // Convert millicores to cores.
+  value = value / 1000;
+
+  let divider = 1;
+  let power = 0;
+
+  while (value / divider > memoryBase && power < memoryPowerSuffixes.length - 1) {
+    divider *= memoryBase;
+    power += 1;
+  }
+
+  return divider;
+}
+
 /** Base for binary prefixes */
 const memoryBase = 1024;
 
@@ -86,3 +101,15 @@ export function memoryFilter(value: number): string {
   const suffix = memoryPowerSuffixes[power];
   return suffix ? `${formatted} ${suffix}` : formatted;
 }
+
+export function memoryFilterDivider(value: number): number {
+  let divider = 1;
+  let power = 0;
+
+  while (value / divider > memoryBase && power < memoryPowerSuffixes.length - 1) {
+    divider *= memoryBase;
+    power += 1;
+  }
+
+  return divider;
+}

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

@@ -32,7 +32,6 @@ import {LogsScaleDefaultActionbar} from './actionbars/logsscaledefault/component
 import {ScaleDefaultActionbar} from './actionbars/scaledefault/component';
 import {TriggerDefaultActionbar} from './actionbars/triggerdefault/component';
 import {PinDefaultActionbar} from './actionbars/pindefault/component';
-import {AllocationChartComponent} from './allocationchart/component';
 import {BreadcrumbsComponent} from './breadcrumbs/component';
 import {CardComponent} from './card/component';
 import {ChipDialog} from './chips/chipdialog/dialog';
@@ -102,7 +101,6 @@ const components = [
   ActionbarDetailExecComponent,
   ActionbarDetailPinComponent,
   ActionbarComponent,
-  AllocationChartComponent,
   ActionbarDetailTriggerComponent,
 
   BreadcrumbsComponent,

src/app/frontend/common/components/workloadstatus/component.spec.ts

@@ -23,7 +23,6 @@ import {AppConfig} from '@api/backendapi';
 import {ResourcesRatio} from '@api/frontendapi';
 
 import {ConfigService} from '../../services/global/config';
-import {AllocationChartComponent} from '../allocationchart/component';
 import {CardComponent} from '../card/component';
 
 import {WorkloadStatusComponent} from './component';
@@ -67,7 +66,7 @@ describe('WorkloadStatusComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CardComponent, AllocationChartComponent, WorkloadStatusComponent],
+      declarations: [CardComponent, WorkloadStatusComponent],
       imports: [
         MatIconModule,
         MatCardModule,

src/app/frontend/overview/component.spec.ts

@@ -20,7 +20,6 @@ import {MatCardModule, MatDividerModule, MatIconModule, MatTooltipModule} from '
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig, CronJobList, DaemonSetList, PodList} from '@api/backendapi';
 
-import {AllocationChartComponent} from '../common/components/allocationchart/component';
 import {CardComponent} from '../common/components/card/component';
 import {ListGroupIdentifier, ListIdentifier} from '../common/components/resourcelist/groupids';
 import {
@@ -71,7 +70,6 @@ describe('OverviewComponent', () => {
         CardComponent,
         OverviewComponent,
         MockDaemonSetListComponent,
-        AllocationChartComponent,
         WorkloadStatusComponent,
       ],
       imports: [

src/app/frontend/resource/cluster/node/detail/component.ts

@@ -21,11 +21,17 @@ import {ActionbarService, ResourceMeta} from '../../../../common/services/global
 import {NotificationsService} from '../../../../common/services/global/notifications';
 import {EndpointManager, Resource} from '../../../../common/services/resource/endpoint';
 import {ResourceService} from '../../../../common/services/resource/resource';
+import {RatioItem} from '@api/frontendapi';
+import {
+  coresFilter,
+  coresFilterDivider,
+  memoryFilter,
+  memoryFilterDivider,
+} from '../../../../common/components/graph/helper';
 
 @Component({
   selector: 'kd-node-detail',
   templateUrl: './template.html',
-  styleUrls: ['./style.scss'],
 })
 export class NodeDetailComponent implements OnInit, OnDestroy {
   private nodeSubscription_: Subscription;
@@ -34,6 +40,18 @@ export class NodeDetailComponent implements OnInit, OnDestroy {
   isInitialized = false;
   podListEndpoint: string;
   eventListEndpoint: string;
+  cpuLabel = 'Cores';
+  cpuCapacity = 0;
+  cpuAllocation: RatioItem[] = [];
+  memoryLabel = 'B';
+  memoryCapacity = 0;
+  memoryAllocation: RatioItem[] = [];
+  podsAllocation: RatioItem[] = [];
+  customColors = [
+    {name: 'Requests', value: '#00c752'},
+    {name: 'Limits', value: '#ffad20'},
+    {name: 'Allocation', value: '#00c752'},
+  ];
 
   constructor(
     private readonly node_: ResourceService<NodeDetail>,
@@ -52,6 +70,7 @@ export class NodeDetailComponent implements OnInit, OnDestroy {
       .get(this.endpoint_.detail(), resourceName)
       .subscribe((d: NodeDetail) => {
         this.node = d;
+        this._getAllocation();
         this.notifications_.pushErrors(d.errors);
         this.actionbar_.onInit.emit(new ResourceMeta('Node', d.objectMeta, d.typeMeta));
         this.isInitialized = true;
@@ -63,6 +82,36 @@ export class NodeDetailComponent implements OnInit, OnDestroy {
     this.actionbar_.onDetailsLeave.emit();
   }
 
+  private _getAllocation(): void {
+    const minCpu = Math.min(
+      this.node.allocatedResources.cpuRequests,
+      this.node.allocatedResources.cpuLimits,
+    );
+    const minCpuDivider = coresFilterDivider(minCpu) * 1000;
+    const formattedMinCpu = coresFilter(minCpu).split(' ');
+    this.cpuLabel = formattedMinCpu.length > 1 ? `${formattedMinCpu[1]}cores` : 'Cores';
+    this.cpuCapacity = this.node.allocatedResources.cpuCapacity / minCpuDivider;
+    this.cpuAllocation = [
+      {name: 'Requests', value: this.node.allocatedResources.cpuRequests / minCpuDivider},
+      {name: 'Limits', value: this.node.allocatedResources.cpuLimits / minCpuDivider},
+    ];
+
+    const minMemory = Math.min(
+      this.node.allocatedResources.memoryRequests,
+      this.node.allocatedResources.memoryLimits,
+    );
+    const minMemoryDivider = memoryFilterDivider(minMemory);
+    const formattedMinMemory = memoryFilter(minMemory).split(' ');
+    this.memoryLabel = formattedMinMemory.length > 1 ? `${formattedMinMemory[1]}B` : 'B';
+    this.memoryCapacity = this.node.allocatedResources.memoryCapacity / minMemoryDivider;
+    this.memoryAllocation = [
+      {name: 'Requests', value: this.node.allocatedResources.memoryRequests / minMemoryDivider},
+      {name: 'Limits', value: this.node.allocatedResources.memoryLimits / minMemoryDivider},
+    ];
+
+    this.podsAllocation = [{name: 'Allocation', value: this.node.allocatedResources.allocatedPods}];
+  }
+
   getAddresses(): string[] {
     return this.node.addresses.map((address: NodeAddress) => `${address.type}: ${address.address}`);
   }

src/app/frontend/resource/cluster/node/detail/style.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.
-
-@import '../../../../variables';
-
-.kd-allocated-resources {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-.kd-graph-container {
-  flex: auto;
-  text-align: center;
-}
-
-.kd-graph-legend {
-  padding-bottom: 2 * $baseline-grid;
-}
-
-.kd-graph-legend-title {
-  font-size: $subhead-font-size-base-lg;
-  padding-bottom: $baseline-grid;
-  text-align: center;
-}
-
-.kd-graph-legend-entry {
-  display: flex;
-  margin: 0 auto;
-  padding: $baseline-grid;
-  text-align: left;
-  width: 30 * $baseline-grid;
-}
-
-.kd-graph-legend-placeholder {
-  width: 2.75 * $baseline-grid;
-}
-
-.kd-graph-legend-value {
-  flex: 1 auto;
-  text-align: right;
-}
-
-.kd-graph-title {
-  font-size: $subhead-font-size-base;
-  padding-bottom: 2 * $baseline-grid;
-}

src/app/frontend/resource/cluster/node/detail/template.html

@@ -129,91 +129,42 @@ limitations under the License.
   <div content
        *ngIf="isInitialized">
     <div class="kd-allocated-resources">
-      <div class="kd-graph-container"
+      <div fxLayoutAlign="center center"
+           fxLayout="column"
            fxFlex>
-        <kd-allocation-chart [outerPercent]="node?.allocatedResources.cpuRequestsFraction"
-                             [innerPercent]="node?.allocatedResources.cpuLimitsFraction"
-                             id="cpu">
-        </kd-allocation-chart>
-        <div class="kd-graph-legend">
-          <div class="kd-graph-legend-title"
-               i18n>CPU allocation (cores)</div>
-          <div class="kd-graph-legend-entry">
-            <mat-icon class="kd-chart-green">stop</mat-icon>
-            <span i18n>Requests</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.cpuRequests | kdCores}}
-            </span>
-          </div>
-          <div class="kd-graph-legend-entry">
-            <mat-icon class="kd-chart-blue">stop</mat-icon>
-            <span i18n>Limits</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.cpuLimits | kdCores}}
-            </span>
-          </div>
-          <div class="kd-graph-legend-entry">
-            <div class="kd-graph-legend-placeholder"></div>
-            <span i18n>Capacity</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.cpuCapacity | kdCores}}
-            </span>
-          </div>
-        </div>
+        <div class="kd-h1"
+             i18n>CPU</div>
+        <ngx-charts-pie-grid [results]="cpuAllocation"
+                             [designatedTotal]="cpuCapacity"
+                             [customColors]="customColors"
+                             [view]="[500,250]"
+                             [label]="cpuLabel">
+        </ngx-charts-pie-grid>
       </div>
-      <div class="kd-graph-container"
+      <div fxLayoutAlign="center center"
+           fxLayout="column"
            fxFlex>
-        <kd-allocation-chart [outerPercent]="node?.allocatedResources.memoryRequestsFraction"
-                             [innerPercent]="node?.allocatedResources.memoryLimitsFraction"
-                             id="memory">
-        </kd-allocation-chart>
-        <div class="kd-graph-legend">
-          <div class="kd-graph-legend-title"
-               i18n>Memory allocation (bytes)</div>
-          <div class="kd-graph-legend-entry">
-            <mat-icon class="kd-chart-green">stop</mat-icon>
-            <span i18n>Requests</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.memoryRequests | kdMemory}}
-            </span>
-          </div>
-          <div class="kd-graph-legend-entry">
-            <mat-icon class="kd-chart-blue">stop</mat-icon>
-            <span i18n>Limits</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.memoryLimits | kdMemory}}
-            </span>
-          </div>
-          <div class="kd-graph-legend-entry">
-            <div class="kd-graph-legend-placeholder"></div>
-            <span i18n>Capacity</span>
-            <span class="kd-graph-legend-value">
-              {{node?.allocatedResources.memoryCapacity | kdMemory}}
-            </span>
-          </div>
-        </div>
+        <div class="kd-h1"
+             i18n>Memory</div>
+        <ngx-charts-pie-grid [results]="memoryAllocation"
+                             [designatedTotal]="memoryCapacity"
+                             [customColors]="customColors"
+                             [view]="[500,250]"
+                             [label]="memoryLabel">
+        </ngx-charts-pie-grid>
       </div>
-      <div class="kd-graph-container"
+      <div fxLayoutAlign="center center"
+           fxLayout="column"
            fxFlex>
-        <kd-allocation-chart [outerPercent]="node?.allocatedResources.podFraction"
-                             id="pods">
-        </kd-allocation-chart>
-        <div class="kd-graph-legend">
-          <div class="kd-graph-legend-title"
-               i18n>Pods allocation</div>
-          <div class="kd-graph-legend-entry">
-            <mat-icon class="kd-chart-green">stop</mat-icon>
-            <span i18n>Allocation</span>
-            <span class="kd-graph-legend-value">{{node?.allocatedResources.allocatedPods}}</span>
-          </div>
-          <div class="kd-graph-legend-entry">
-            <div class="kd-graph-legend-placeholder"></div>
-            <span i18n>Capacity</span>
-            <span class="kd-graph-legend-value">{{node?.allocatedResources.podCapacity}}</span>
-          </div>
-        </div>
+        <div class="kd-h1"
+             i18n>Pods</div>
+        <ngx-charts-pie-grid [results]="podsAllocation"
+                             [designatedTotal]="node?.allocatedResources.podCapacity"
+                             [customColors]="customColors"
+                             [view]="[250,250]"
+                             label="Pods">
+        </ngx-charts-pie-grid>
       </div>
-
     </div>
   </div>
 </kd-card>