Fix workload statuses (#4582)

* Change chart library used for workload statuses * Adjust colors * Fix package.json * Fix the styling * Fix tests

Fix workload statuses (#4582)
* Change chart library used for workload statuses * Adjust colors * Fix package.json * Fix the styling * Fix tests
94615eaf · Marcin Maciaszczyk · Kubernetes Prow Robot · dad31da4 · 94615eaf · 94615eaf
15 changed file
--- a/i18n/fr/messages.fr.xlf
+++ b/i18n/fr/messages.fr.xlf
@@ -289,7 +289,7 @@
        <target>Cron Jobs</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">32</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/cronjob/template.html</context>
@@ -301,7 +301,7 @@
        <target>Daemon Sets</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">44</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/daemonset/template.html</context>
@@ -313,7 +313,7 @@
        <target>Déploiements</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">56</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/deployment/template.html</context>
@@ -325,7 +325,7 @@
        <target>Jobs</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">68</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/job/template.html</context>
@@ -337,7 +337,7 @@
        <target>Pods</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">81</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/creator/template.html</context>
@@ -395,7 +395,7 @@
        <target>Replica Sets</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">93</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/replicaset/template.html</context>
@@ -407,7 +407,7 @@
        <target>Contrôleurs de réplication</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">105</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0756fdca226249dcff9d05651d50b7acdade2aba" datatype="html">
@@ -415,7 +415,7 @@
        <target>Stateful Sets</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">141</context>
+          <context context-type="linenumber">117</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
@@ -503,7 +503,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">48</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -515,7 +515,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="01269ce8051398188d50367ead1831407e77d504" datatype="html">

--- a/i18n/ja/messages.ja.xlf
+++ b/i18n/ja/messages.ja.xlf
@@ -531,7 +531,7 @@
        <target>Cron ジョブ</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">32</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/cronjob/template.html</context>
@@ -1339,7 +1339,7 @@
        <target>ポッド</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">81</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/creator/template.html</context>
@@ -1520,7 +1520,7 @@
        <target>デーモンセット</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">44</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/daemonset/template.html</context>
@@ -1532,7 +1532,7 @@
        <target>デプロイメント</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">56</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/deployment/template.html</context>
@@ -1656,7 +1656,7 @@
        <target>ジョブ</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">68</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/job/template.html</context>
@@ -2166,7 +2166,7 @@
        <target>レプリカセット</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">93</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/replicaset/template.html</context>
@@ -2214,7 +2214,7 @@
        <target>ステートフルセット</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">141</context>
+          <context context-type="linenumber">117</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
@@ -2711,7 +2711,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">48</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -2723,7 +2723,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="bef0c68b6a7d96b56a8879ecfb9de80a83c151a2" datatype="html">
@@ -4055,7 +4055,7 @@
        <target>レプリケーションコントローラー</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">105</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8a3abe0df530103020a480befe1757e3b1776e7b" datatype="html">

--- a/i18n/ko/messages.ko.xlf
+++ b/i18n/ko/messages.ko.xlf
@@ -343,7 +343,7 @@
        <target state="new">크론 잡</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">32</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/cronjob/template.html</context>
@@ -355,7 +355,7 @@
        <target state="new">데몬 셋</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">44</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/daemonset/template.html</context>
@@ -367,7 +367,7 @@
        <target state="new">디플로이먼트</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">56</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/deployment/template.html</context>
@@ -379,7 +379,7 @@
        <target state="new">잡</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">68</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/job/template.html</context>
@@ -391,7 +391,7 @@
        <target state="new">파드</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">81</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/creator/template.html</context>
@@ -435,7 +435,7 @@
        <target state="new">레플리카 셋</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">93</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/replicaset/template.html</context>
@@ -447,7 +447,7 @@
        <target state="new">레플리케이션 컨트롤러</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">105</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0756fdca226249dcff9d05651d50b7acdade2aba" datatype="html">
@@ -455,7 +455,7 @@
        <target state="new">스테이트풀 셋</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">141</context>
+          <context context-type="linenumber">117</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
@@ -2769,7 +2769,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">48</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -2781,7 +2781,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="bef0c68b6a7d96b56a8879ecfb9de80a83c151a2" datatype="html">
@@ -3342,6 +3342,10 @@
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/create/from/form/template.html</context>
          <context context-type="linenumber">54</context>

--- a/i18n/messages.xlf
+++ b/i18n/messages.xlf
@@ -290,7 +290,7 @@
        <source>Cron Jobs</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">32</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/cronjob/template.html</context>
@@ -301,7 +301,7 @@
        <source>Daemon Sets</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">44</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/daemonset/template.html</context>
@@ -312,7 +312,7 @@
        <source>Deployments</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">56</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/deployment/template.html</context>
@@ -323,7 +323,7 @@
        <source>Jobs</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">68</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/job/template.html</context>
@@ -334,7 +334,7 @@
        <source>Pods</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">81</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/creator/template.html</context>
@@ -377,7 +377,7 @@
        <source>Replica Sets</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">93</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/replicaset/template.html</context>
@@ -388,14 +388,14 @@
        <source>Replication Controllers</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">105</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0756fdca226249dcff9d05651d50b7acdade2aba" datatype="html">
        <source>Stateful Sets</source>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">141</context>
+          <context context-type="linenumber">117</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
@@ -2489,7 +2489,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">48</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -2500,7 +2500,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="bef0c68b6a7d96b56a8879ecfb9de80a83c151a2" datatype="html">

--- a/i18n/zh/messages.zh.xlf
+++ b/i18n/zh/messages.zh.xlf
@@ -343,7 +343,7 @@
        <target state="new">Cron 工作</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">32</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/cronjob/template.html</context>
@@ -355,7 +355,7 @@
        <target state="new">守护进程设置</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">44</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/daemonset/template.html</context>
@@ -367,7 +367,7 @@
        <target state="new">部署</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">56</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/deployment/template.html</context>
@@ -379,7 +379,7 @@
        <target state="new">工作</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">68</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/job/template.html</context>
@@ -391,7 +391,7 @@
        <target state="new">Pods</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">81</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/creator/template.html</context>
@@ -435,7 +435,7 @@
        <target state="new">Replica 设置</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">93</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/replicaset/template.html</context>
@@ -447,7 +447,7 @@
        <target state="new">Replication 控制器</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">105</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0756fdca226249dcff9d05651d50b7acdade2aba" datatype="html">
@@ -455,7 +455,7 @@
        <target state="new">Stateful Sets</target>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/workloadstatus/template.html</context>
-          <context context-type="linenumber">141</context>
+          <context context-type="linenumber">117</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/common/components/resourcelist/statefulset/template.html</context>
@@ -2769,7 +2769,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">48</context>
        </context-group>
      </trans-unit>
      <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -2781,7 +2781,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">../src/app/frontend/overview/template.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="bef0c68b6a7d96b56a8879ecfb9de80a83c151a2" datatype="html">

--- a/package-lock.json
+++ b/package-lock.json
@@ -3285,6 +3285,268 @@
      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
      "dev": true
    },
+    "@swimlane/ngx-charts": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-12.1.0.tgz",
+      "integrity": "sha512-M3H3S/JejG4wKOYwuuwfJrC28XhU3LWhVWKDaZcgA+goRxfEbVbnH7IYcIep5JgFLv17qg7lxhJHtkaySr7Fxg==",
+      "requires": {
+        "d3": "^4.10.2",
+        "d3-array": "^1.2.1",
+        "d3-brush": "^1.0.4",
+        "d3-color": "^1.0.3",
+        "d3-force": "^1.1.0",
+        "d3-format": "^1.2.0",
+        "d3-hierarchy": "^1.1.5",
+        "d3-interpolate": "^1.1.5",
+        "d3-scale": "^1.0.6",
+        "d3-selection": "^1.1.0",
+        "d3-shape": "^1.2.0",
+        "d3-time-format": "^2.1.0"
+      },
+      "dependencies": {
+        "d3": {
+          "version": "4.13.0",
+          "resolved": "https://registry.npmjs.org/d3/-/d3-4.13.0.tgz",
+          "integrity": "sha512-l8c4+0SldjVKLaE2WG++EQlqD7mh/dmQjvi2L2lKPadAVC+TbJC4ci7Uk9bRi+To0+ansgsS0iWfPjD7DBy+FQ==",
+          "requires": {
+            "d3-array": "1.2.1",
+            "d3-axis": "1.0.8",
+            "d3-brush": "1.0.4",
+            "d3-chord": "1.0.4",
+            "d3-collection": "1.0.4",
+            "d3-color": "1.0.3",
+            "d3-dispatch": "1.0.3",
+            "d3-drag": "1.2.1",
+            "d3-dsv": "1.0.8",
+            "d3-ease": "1.0.3",
+            "d3-force": "1.1.0",
+            "d3-format": "1.2.2",
+            "d3-geo": "1.9.1",
+            "d3-hierarchy": "1.1.5",
+            "d3-interpolate": "1.1.6",
+            "d3-path": "1.0.5",
+            "d3-polygon": "1.0.3",
+            "d3-quadtree": "1.0.3",
+            "d3-queue": "3.0.7",
+            "d3-random": "1.1.0",
+            "d3-request": "1.0.6",
+            "d3-scale": "1.0.7",
+            "d3-selection": "1.3.0",
+            "d3-shape": "1.2.0",
+            "d3-time": "1.0.8",
+            "d3-time-format": "2.1.1",
+            "d3-timer": "1.0.7",
+            "d3-transition": "1.1.1",
+            "d3-voronoi": "1.1.2",
+            "d3-zoom": "1.7.1"
+          },
+          "dependencies": {
+            "d3-array": {
+              "version": "1.2.1",
+              "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+              "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+            },
+            "d3-brush": {
+              "version": "1.0.4",
+              "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+              "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
+              "requires": {
+                "d3-dispatch": "1",
+                "d3-drag": "1",
+                "d3-interpolate": "1",
+                "d3-selection": "1",
+                "d3-transition": "1"
+              }
+            },
+            "d3-color": {
+              "version": "1.0.3",
+              "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+              "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+            },
+            "d3-force": {
+              "version": "1.1.0",
+              "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+              "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+              "requires": {
+                "d3-collection": "1",
+                "d3-dispatch": "1",
+                "d3-quadtree": "1",
+                "d3-timer": "1"
+              }
+            },
+            "d3-format": {
+              "version": "1.2.2",
+              "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+              "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
+            },
+            "d3-hierarchy": {
+              "version": "1.1.5",
+              "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz",
+              "integrity": "sha1-ochFxC+Eoga88cAcAQmOpN2qeiY="
+            },
+            "d3-interpolate": {
+              "version": "1.1.6",
+              "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+              "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+              "requires": {
+                "d3-color": "1"
+              }
+            },
+            "d3-selection": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+              "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
+            },
+            "d3-shape": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+              "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
+              "requires": {
+                "d3-path": "1"
+              }
+            },
+            "d3-time-format": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+              "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+              "requires": {
+                "d3-time": "1"
+              }
+            }
+          }
+        },
+        "d3-axis": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+          "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+        },
+        "d3-chord": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+          "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
+          "requires": {
+            "d3-array": "1",
+            "d3-path": "1"
+          }
+        },
+        "d3-collection": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+          "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
+        },
+        "d3-dispatch": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+          "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
+        },
+        "d3-drag": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+          "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+          "requires": {
+            "d3-dispatch": "1",
+            "d3-selection": "1"
+          }
+        },
+        "d3-dsv": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+          "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+          "requires": {
+            "commander": "2",
+            "iconv-lite": "0.4",
+            "rw": "1"
+          }
+        },
+        "d3-ease": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+          "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
+        },
+        "d3-geo": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz",
+          "integrity": "sha512-l9wL/cEQkyZQYXw3xbmLsH3eQ5ij+icNfo4r0GrLa5rOCZR/e/3am45IQ0FvQ5uMsv+77zBRunLc9ufTWSQYFA==",
+          "requires": {
+            "d3-array": "1"
+          }
+        },
+        "d3-path": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+          "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
+        },
+        "d3-polygon": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+          "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
+        },
+        "d3-quadtree": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+          "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
+        },
+        "d3-random": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+          "integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
+        },
+        "d3-scale": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+          "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+          "requires": {
+            "d3-array": "^1.2.0",
+            "d3-collection": "1",
+            "d3-color": "1",
+            "d3-format": "1",
+            "d3-interpolate": "1",
+            "d3-time": "1",
+            "d3-time-format": "2"
+          }
+        },
+        "d3-time": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+          "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
+        },
+        "d3-timer": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+          "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
+        },
+        "d3-transition": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+          "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+          "requires": {
+            "d3-color": "1",
+            "d3-dispatch": "1",
+            "d3-ease": "1",
+            "d3-interpolate": "1",
+            "d3-selection": "^1.1.0",
+            "d3-timer": "1"
+          }
+        },
+        "d3-voronoi": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+          "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
+        },
+        "d3-zoom": {
+          "version": "1.7.1",
+          "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+          "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+          "requires": {
+            "d3-dispatch": "1",
+            "d3-drag": "1",
+            "d3-interpolate": "1",
+            "d3-selection": "1",
+            "d3-transition": "1"
+          }
+        }
+      }
+    },
    "@szmarczak/http-timer": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -8514,11 +8776,27 @@
      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
    },
+    "d3-queue": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
+      "integrity": "sha1-yTouVLQXwJWRKdfXP2z31Ckudhg="
+    },
    "d3-random": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
    },
+    "d3-request": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz",
+      "integrity": "sha512-FJj8ySY6GYuAJHZMaCQ83xEYE4KbkPkmxZ3Hu6zA1xxG2GD+z6P+Lyp+zjdsHf0xEbp2xcluDI50rCS855EQ6w==",
+      "requires": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-dsv": "1",
+        "xmlhttprequest": "1"
+      }
+    },
    "d3-scale": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
@@ -24181,6 +24459,11 @@
      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=",
      "dev": true
    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
    "xmlhttprequest-ssl": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",

--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
    "@angular/platform-browser": "8.0.3",
    "@angular/platform-browser-dynamic": "8.0.3",
    "@angular/router": "8.0.3",
+    "@swimlane/ngx-charts": "12.1.0",
    "@types/c3": "0.7.1",
    "@types/d3": "5.7.2",
    "@types/d3-scale": "2.1.1",
@@ -123,10 +124,10 @@
    "ngx-filter-pipe": "2.1.2",
    "normalize.css": "8.0.1",
    "roboto-fontface": "0.10.0",
-    "systemjs": "6.1.5",
    "rxjs": "6.5.3",
    "rxjs-compat": "6.5.3",
    "sockjs-client": "1.4.0",
+    "systemjs": "6.1.5",
    "tslib": "^1.9.0",
    "web-animations-js": "2.3.2",
    "xterm": "3.14.5",

--- a/src/app/frontend/common/components/allocationchart/component.ts
+++ b/src/app/frontend/common/components/allocationchart/component.ts
@@ -142,10 +142,7 @@ export class AllocationChartComponent implements OnChanges {
   * Displays label only for allocated resources
   */
  private displayOnlyAllocated_(value: number, _: number, id: string | number): string {
-    if (this.allocated_.has(id)) {
+    return this.allocated_.has(id) ? `${Math.round(value)}%` : '';
-      return `${Math.round(value)}%`;
-    }
-    return '';
  }
  /**

--- a/src/app/frontend/common/components/workloadstatus/component.spec.ts
+++ b/src/app/frontend/common/components/workloadstatus/component.spec.ts
@@ -31,31 +31,31 @@ import {WorkloadStatusComponent} from './component';
 const testResourcesRatio: ResourcesRatio = {
  cronJobRatio: [],
  daemonSetRatio: [
-    {key: 'Running: 1', value: 100},
+    {name: 'Running: 1', value: 100},
-    {key: 'Failed: 0', value: 0},
+    {name: 'Failed: 0', value: 0},
-    {key: 'Pending: 0', value: 0},
+    {name: 'Pending: 0', value: 0},
  ],
  deploymentRatio: [
-    {key: 'Running: 1', value: 50},
+    {name: 'Running: 1', value: 50},
-    {key: 'Failed: 1', value: 50},
+    {name: 'Failed: 1', value: 50},
-    {key: 'Pending: 0', value: 0},
+    {name: 'Pending: 0', value: 0},
  ],
  jobRatio: [],
  podRatio: [
-    {key: 'Running: 10', value: 83.33333333333334},
+    {name: 'Running: 10', value: 83.33333333333334},
-    {key: 'Failed: 2', value: 16.666666666666664},
+    {name: 'Failed: 2', value: 16.666666666666664},
-    {key: 'Pending: 0', value: 0},
+    {name: 'Pending: 0', value: 0},
-    {key: 'Succeeded: 0', value: 0},
+    {name: 'Succeeded: 0', value: 0},
  ],
  replicaSetRatio: [
-    {key: 'Running: 1', value: 50},
+    {name: 'Running: 1', value: 50},
-    {key: 'Failed: 1', value: 50},
+    {name: 'Failed: 1', value: 50},
-    {key: 'Pending: 0', value: 0},
+    {name: 'Pending: 0', value: 0},
  ],
  replicationControllerRatio: [
-    {key: 'Running: 2', value: 100},
+    {name: 'Running: 2', value: 100},
-    {key: 'Failed: 0', value: 0},
+    {name: 'Failed: 0', value: 0},
-    {key: 'Pending: 0', value: 0},
+    {name: 'Pending: 0', value: 0},
  ],
  statefulSetRatio: [],
 };
@@ -124,11 +124,7 @@ describe('WorkloadStatusComponent', () => {
    component.resourcesRatio = testResourcesRatio;
    testHostFixture.detectChanges();
-    const debugElement = testHostFixture.debugElement.query(
+    const debugElement = testHostFixture.debugElement.query(By.css('#kd-graph-pods'));
-      By.css('kd-card mat-card div mat-card-content kd-allocation-chart #pods'),
-    );
    expect(debugElement).toBeTruthy();
-    expect(debugElement.context.data === testResourcesRatio.podRatio).toBeTruthy();
  });
 });
--- a/src/app/frontend/common/components/workloadstatus/component.ts
+++ b/src/app/frontend/common/components/workloadstatus/component.ts
@@ -32,12 +32,20 @@ export const emptyResourcesRatio: ResourcesRatio = {
  styleUrls: ['./style.scss'],
 })
 export class WorkloadStatusComponent {
-  @Input() resourcesRatio: ResourcesRatio;
+  @Input() resourcesRatio = emptyResourcesRatio;
-  colors: string[] = ['#00c752', '#f00', '#ffad20', '#006028'];
+  colors: string[] = [];
-  constructor() {
+  getCustomColor(label: string): string {
-    if (!this.resourcesRatio) {
+    if (label.includes('Running')) {
-      this.resourcesRatio = emptyResourcesRatio;
+      return '#00c752';
+    } else if (label.includes('Succeeded')) {
+      return '#006028';
+    } else if (label.includes('Pending')) {
+      return '#ffad20';
+    } else if (label.includes('Failed')) {
+      return '#f00';
+    } else {
+      return '';
    }
  }
 }
--- a/src/app/frontend/common/components/workloadstatus/template.html
+++ b/src/app/frontend/common/components/workloadstatus/template.html
@@ -18,19 +18,15 @@ limitations under the License.
  <div title
       fxLayout="row"
       i18n>Workload Status</div>
  <div content
       fxLayout="row wrap">
    <div class="kd-graph-container"
         *ngIf="resourcesRatio.cronJobRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="cronJobs"
+        <ngx-charts-pie-chart [results]="resourcesRatio.cronJobRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.cronJobRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Cron Jobs</div>
@@ -40,12 +36,9 @@ limitations under the License.
         *ngIf="resourcesRatio.daemonSetRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="daemonSets"
+        <ngx-charts-pie-chart [results]="resourcesRatio.daemonSetRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.daemonSetRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Daemon Sets</div>
@@ -55,12 +48,9 @@ limitations under the License.
         *ngIf="resourcesRatio.deploymentRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="deployments"
+        <ngx-charts-pie-chart [results]="resourcesRatio.deploymentRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.deploymentRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Deployments</div>
@@ -70,12 +60,9 @@ limitations under the License.
         *ngIf="resourcesRatio.jobRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="jobs"
+        <ngx-charts-pie-chart [results]="resourcesRatio.jobRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.jobRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Jobs</div>
@@ -85,12 +72,10 @@ limitations under the License.
         *ngIf="resourcesRatio.podRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="pods"
+        <ngx-charts-pie-chart [results]="resourcesRatio.podRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.podRatio"
+                              [customColors]="getCustomColor"
-                             type="pie"
+                              id="kd-graph-pods"></ngx-charts-pie-chart>
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Pods</div>
@@ -100,12 +85,9 @@ limitations under the License.
         *ngIf="resourcesRatio.replicaSetRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="replicaSets"
+        <ngx-charts-pie-chart [results]="resourcesRatio.replicaSetRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.replicaSetRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Replica Sets</div>
@@ -115,12 +97,9 @@ limitations under the License.
         *ngIf="resourcesRatio.replicationControllerRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="replicationControllers"
+        <ngx-charts-pie-chart [results]="resourcesRatio.replicationControllerRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.replicationControllerRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Replication Controllers</div>
@@ -130,16 +109,12 @@ limitations under the License.
         *ngIf="resourcesRatio.statefulSetRatio.length">
      <div fxLayout="column"
           fxLayoutAlign="center center">
-        <kd-allocation-chart id="statefulSets"
+        <ngx-charts-pie-chart [results]="resourcesRatio.statefulSetRatio"
-                             [colorPalette]="colors"
+                              [view]="[200,200]"
-                             [data]="resourcesRatio.statefulSetRatio"
+                              [customColors]="getCustomColor"></ngx-charts-pie-chart>
-                             type="pie"
-                             [enableTooltips]="true"
-                             [size]="140"></kd-allocation-chart>
      </div>
      <div class="kd-graph-title"
           i18n>Stateful Sets</div>
    </div>
  </div>
 </kd-card>
--- a/src/app/frontend/overview/helper.ts
+++ b/src/app/frontend/overview/helper.ts
@@ -33,7 +33,7 @@ export class Helper {
    let items = [
      {
-        key: `Running: ${status.running}`,
+        name: `Running: ${status.running}`,
        value: (status.running / totalItems) * 100,
      },
    ];
@@ -41,22 +41,22 @@ export class Helper {
    switch (mode) {
      case ResourceRatioModes.Suspendable:
        items.push({
-          key: `Suspended: ${status.failed}`,
+          name: `Suspended: ${status.failed}`,
          value: (status.failed / totalItems) * 100,
        });
        break;
      case ResourceRatioModes.Completable:
        items = items.concat([
          {
-            key: `Failed: ${status.failed}`,
+            name: `Failed: ${status.failed}`,
            value: (status.failed / totalItems) * 100,
          },
          {
-            key: `Pending: ${status.pending}`,
+            name: `Pending: ${status.pending}`,
            value: (status.pending / totalItems) * 100,
          },
          {
-            key: `Succeeded: ${status.succeeded}`,
+            name: `Succeeded: ${status.succeeded}`,
            value: (status.succeeded / totalItems) * 100,
          },
        ]);
@@ -64,11 +64,11 @@ export class Helper {
      default:
        items = items.concat([
          {
-            key: `Failed: ${status.failed}`,
+            name: `Failed: ${status.failed}`,
            value: (status.failed / totalItems) * 100,
          },
          {
-            key: `Pending: ${status.pending}`,
+            name: `Pending: ${status.pending}`,
            value: (status.pending / totalItems) * 100,
          },
        ]);

--- a/src/app/frontend/overview/template.html
+++ b/src/app/frontend/overview/template.html
@@ -22,8 +22,7 @@ limitations under the License.
  <div>
    <kd-graph-metrics [metrics]="cumulativeMetrics"></kd-graph-metrics>
-    <!-- TODO: Workload statuses cause a memory leak. Has to be fixed before enabling it back. -->
+    <kd-workload-statuses *ngIf="showWorkloadStatuses()"
-    <kd-workload-statuses *ngIf="false"
                          [resourcesRatio]="resourcesRatio"></kd-workload-statuses>
    <kd-cron-job-list (onchange)="onListUpdate($event)"

--- a/src/app/frontend/shared.module.ts
+++ b/src/app/frontend/shared.module.ts
@@ -51,6 +51,7 @@ import {FilterPipeModule} from 'ngx-filter-pipe';
 import {PipesModule} from './common/pipes/module';
 import {KD_TOOLTIP_DEFAULT_OPTIONS} from './index.config';
+import {NgxChartsModule} from '@swimlane/ngx-charts';
 const SHARED_DEPENDENCIES = [
  // Angular imports
@@ -91,6 +92,7 @@ const SHARED_DEPENDENCIES = [
  RouterModule,
  AceEditorModule,
  FilterPipeModule,
+  NgxChartsModule,
  // Custom application modules
  PipesModule,

--- a/src/app/frontend/typings/frontendapi.ts
+++ b/src/app/frontend/typings/frontendapi.ts
@@ -103,7 +103,7 @@ export interface SemverInfoOptions {
 }
 export interface RatioItem {
-  key: string;
+  name: string;
  value: number;
 }