From 94615eaf5392547b6fe5106109c607871398f4c4 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 28 Nov 2019 13:05:04 +0100 Subject: [PATCH] Fix workload statuses (#4582) * Change chart library used for workload statuses * Adjust colors * Fix package.json * Fix the styling * Fix tests --- i18n/fr/messages.fr.xlf | 20 +- i18n/ja/messages.ja.xlf | 20 +- i18n/ko/messages.ko.xlf | 24 +- i18n/messages.xlf | 20 +- i18n/zh/messages.zh.xlf | 20 +- package-lock.json | 283 ++++++++++++++++++ package.json | 3 +- .../components/allocationchart/component.ts | 5 +- .../workloadstatus/component.spec.ts | 38 ++- .../components/workloadstatus/component.ts | 18 +- .../components/workloadstatus/template.html | 75 ++--- src/app/frontend/overview/helper.ts | 14 +- src/app/frontend/overview/template.html | 3 +- src/app/frontend/shared.module.ts | 2 + src/app/frontend/typings/frontendapi.ts | 2 +- 15 files changed, 406 insertions(+), 141 deletions(-) diff --git a/i18n/fr/messages.fr.xlf b/i18n/fr/messages.fr.xlf index c86f28855..3a87ce84d 100644 --- a/i18n/fr/messages.fr.xlf +++ b/i18n/fr/messages.fr.xlf @@ -289,7 +289,7 @@ Cron Jobs ../src/app/frontend/common/components/workloadstatus/template.html - 36 + 32 ../src/app/frontend/common/components/resourcelist/cronjob/template.html @@ -301,7 +301,7 @@ Daemon Sets ../src/app/frontend/common/components/workloadstatus/template.html - 51 + 44 ../src/app/frontend/common/components/resourcelist/daemonset/template.html @@ -313,7 +313,7 @@ Déploiements ../src/app/frontend/common/components/workloadstatus/template.html - 66 + 56 ../src/app/frontend/common/components/resourcelist/deployment/template.html @@ -325,7 +325,7 @@ Jobs ../src/app/frontend/common/components/workloadstatus/template.html - 81 + 68 ../src/app/frontend/common/components/resourcelist/job/template.html @@ -337,7 +337,7 @@ Pods ../src/app/frontend/common/components/workloadstatus/template.html - 96 + 81 ../src/app/frontend/common/components/creator/template.html @@ -395,7 +395,7 @@ Replica Sets ../src/app/frontend/common/components/workloadstatus/template.html - 111 + 93 ../src/app/frontend/common/components/resourcelist/replicaset/template.html @@ -407,7 +407,7 @@ Contrôleurs de réplication ../src/app/frontend/common/components/workloadstatus/template.html - 126 + 105 @@ -415,7 +415,7 @@ Stateful Sets ../src/app/frontend/common/components/workloadstatus/template.html - 141 + 117 ../src/app/frontend/common/components/resourcelist/statefulset/template.html @@ -503,7 +503,7 @@ ../src/app/frontend/overview/template.html - 49 + 48 @@ -515,7 +515,7 @@ ../src/app/frontend/overview/template.html - 59 + 58 diff --git a/i18n/ja/messages.ja.xlf b/i18n/ja/messages.ja.xlf index fb8687e97..b44350ddf 100644 --- a/i18n/ja/messages.ja.xlf +++ b/i18n/ja/messages.ja.xlf @@ -531,7 +531,7 @@ Cron ジョブ ../src/app/frontend/common/components/workloadstatus/template.html - 36 + 32 ../src/app/frontend/common/components/resourcelist/cronjob/template.html @@ -1339,7 +1339,7 @@ ポッド ../src/app/frontend/common/components/workloadstatus/template.html - 96 + 81 ../src/app/frontend/common/components/creator/template.html @@ -1520,7 +1520,7 @@ デーモンセット ../src/app/frontend/common/components/workloadstatus/template.html - 51 + 44 ../src/app/frontend/common/components/resourcelist/daemonset/template.html @@ -1532,7 +1532,7 @@ デプロイメント ../src/app/frontend/common/components/workloadstatus/template.html - 66 + 56 ../src/app/frontend/common/components/resourcelist/deployment/template.html @@ -1656,7 +1656,7 @@ ジョブ ../src/app/frontend/common/components/workloadstatus/template.html - 81 + 68 ../src/app/frontend/common/components/resourcelist/job/template.html @@ -2166,7 +2166,7 @@ レプリカセット ../src/app/frontend/common/components/workloadstatus/template.html - 111 + 93 ../src/app/frontend/common/components/resourcelist/replicaset/template.html @@ -2214,7 +2214,7 @@ ステートフルセット ../src/app/frontend/common/components/workloadstatus/template.html - 141 + 117 ../src/app/frontend/common/components/resourcelist/statefulset/template.html @@ -2711,7 +2711,7 @@ ../src/app/frontend/overview/template.html - 49 + 48 @@ -2723,7 +2723,7 @@ ../src/app/frontend/overview/template.html - 59 + 58 @@ -4055,7 +4055,7 @@ レプリケーションコントローラー ../src/app/frontend/common/components/workloadstatus/template.html - 126 + 105 diff --git a/i18n/ko/messages.ko.xlf b/i18n/ko/messages.ko.xlf index ce9efe6ee..3fc77b7fb 100644 --- a/i18n/ko/messages.ko.xlf +++ b/i18n/ko/messages.ko.xlf @@ -343,7 +343,7 @@ 크론 잡 ../src/app/frontend/common/components/workloadstatus/template.html - 36 + 32 ../src/app/frontend/common/components/resourcelist/cronjob/template.html @@ -355,7 +355,7 @@ 데몬 셋 ../src/app/frontend/common/components/workloadstatus/template.html - 51 + 44 ../src/app/frontend/common/components/resourcelist/daemonset/template.html @@ -367,7 +367,7 @@ 디플로이먼트 ../src/app/frontend/common/components/workloadstatus/template.html - 66 + 56 ../src/app/frontend/common/components/resourcelist/deployment/template.html @@ -379,7 +379,7 @@ 잡 ../src/app/frontend/common/components/workloadstatus/template.html - 81 + 68 ../src/app/frontend/common/components/resourcelist/job/template.html @@ -391,7 +391,7 @@ 파드 ../src/app/frontend/common/components/workloadstatus/template.html - 96 + 81 ../src/app/frontend/common/components/creator/template.html @@ -435,7 +435,7 @@ 레플리카 셋 ../src/app/frontend/common/components/workloadstatus/template.html - 111 + 93 ../src/app/frontend/common/components/resourcelist/replicaset/template.html @@ -447,7 +447,7 @@ 레플리케이션 컨트롤러 ../src/app/frontend/common/components/workloadstatus/template.html - 126 + 105 @@ -455,7 +455,7 @@ 스테이트풀 셋 ../src/app/frontend/common/components/workloadstatus/template.html - 141 + 117 ../src/app/frontend/common/components/resourcelist/statefulset/template.html @@ -2769,7 +2769,7 @@ ../src/app/frontend/overview/template.html - 49 + 48 @@ -2781,7 +2781,7 @@ ../src/app/frontend/overview/template.html - 59 + 58 @@ -3342,6 +3342,10 @@ + + + + ../src/app/frontend/create/from/form/template.html 54 diff --git a/i18n/messages.xlf b/i18n/messages.xlf index 18cae7dc8..c575ae921 100644 --- a/i18n/messages.xlf +++ b/i18n/messages.xlf @@ -290,7 +290,7 @@ Cron Jobs ../src/app/frontend/common/components/workloadstatus/template.html - 36 + 32 ../src/app/frontend/common/components/resourcelist/cronjob/template.html @@ -301,7 +301,7 @@ Daemon Sets ../src/app/frontend/common/components/workloadstatus/template.html - 51 + 44 ../src/app/frontend/common/components/resourcelist/daemonset/template.html @@ -312,7 +312,7 @@ Deployments ../src/app/frontend/common/components/workloadstatus/template.html - 66 + 56 ../src/app/frontend/common/components/resourcelist/deployment/template.html @@ -323,7 +323,7 @@ Jobs ../src/app/frontend/common/components/workloadstatus/template.html - 81 + 68 ../src/app/frontend/common/components/resourcelist/job/template.html @@ -334,7 +334,7 @@ Pods ../src/app/frontend/common/components/workloadstatus/template.html - 96 + 81 ../src/app/frontend/common/components/creator/template.html @@ -377,7 +377,7 @@ Replica Sets ../src/app/frontend/common/components/workloadstatus/template.html - 111 + 93 ../src/app/frontend/common/components/resourcelist/replicaset/template.html @@ -388,14 +388,14 @@ Replication Controllers ../src/app/frontend/common/components/workloadstatus/template.html - 126 + 105 Stateful Sets ../src/app/frontend/common/components/workloadstatus/template.html - 141 + 117 ../src/app/frontend/common/components/resourcelist/statefulset/template.html @@ -2489,7 +2489,7 @@ ../src/app/frontend/overview/template.html - 49 + 48 @@ -2500,7 +2500,7 @@ ../src/app/frontend/overview/template.html - 59 + 58 diff --git a/i18n/zh/messages.zh.xlf b/i18n/zh/messages.zh.xlf index 98f2bcf3d..168cbc353 100644 --- a/i18n/zh/messages.zh.xlf +++ b/i18n/zh/messages.zh.xlf @@ -343,7 +343,7 @@ Cron 工作 ../src/app/frontend/common/components/workloadstatus/template.html - 36 + 32 ../src/app/frontend/common/components/resourcelist/cronjob/template.html @@ -355,7 +355,7 @@ 守护进程设置 ../src/app/frontend/common/components/workloadstatus/template.html - 51 + 44 ../src/app/frontend/common/components/resourcelist/daemonset/template.html @@ -367,7 +367,7 @@ 部署 ../src/app/frontend/common/components/workloadstatus/template.html - 66 + 56 ../src/app/frontend/common/components/resourcelist/deployment/template.html @@ -379,7 +379,7 @@ 工作 ../src/app/frontend/common/components/workloadstatus/template.html - 81 + 68 ../src/app/frontend/common/components/resourcelist/job/template.html @@ -391,7 +391,7 @@ Pods ../src/app/frontend/common/components/workloadstatus/template.html - 96 + 81 ../src/app/frontend/common/components/creator/template.html @@ -435,7 +435,7 @@ Replica 设置 ../src/app/frontend/common/components/workloadstatus/template.html - 111 + 93 ../src/app/frontend/common/components/resourcelist/replicaset/template.html @@ -447,7 +447,7 @@ Replication 控制器 ../src/app/frontend/common/components/workloadstatus/template.html - 126 + 105 @@ -455,7 +455,7 @@ Stateful Sets ../src/app/frontend/common/components/workloadstatus/template.html - 141 + 117 ../src/app/frontend/common/components/resourcelist/statefulset/template.html @@ -2769,7 +2769,7 @@ ../src/app/frontend/overview/template.html - 49 + 48 @@ -2781,7 +2781,7 @@ ../src/app/frontend/overview/template.html - 59 + 58 diff --git a/package-lock.json b/package-lock.json index 958bb8cfe..4c34cd423 100644 --- 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", diff --git a/package.json b/package.json index f12fcc10a..1f06f6003 100644 --- 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", diff --git a/src/app/frontend/common/components/allocationchart/component.ts b/src/app/frontend/common/components/allocationchart/component.ts index c6a97d50f..9d8d2838c 100644 --- 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 `${Math.round(value)}%`; - } - return ''; + return this.allocated_.has(id) ? `${Math.round(value)}%` : ''; } /** diff --git a/src/app/frontend/common/components/workloadstatus/component.spec.ts b/src/app/frontend/common/components/workloadstatus/component.spec.ts index 6f70f980a..744b38bbc 100644 --- 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}, - {key: 'Failed: 0', value: 0}, - {key: 'Pending: 0', value: 0}, + {name: 'Running: 1', value: 100}, + {name: 'Failed: 0', value: 0}, + {name: 'Pending: 0', value: 0}, ], deploymentRatio: [ - {key: 'Running: 1', value: 50}, - {key: 'Failed: 1', value: 50}, - {key: 'Pending: 0', value: 0}, + {name: 'Running: 1', value: 50}, + {name: 'Failed: 1', value: 50}, + {name: 'Pending: 0', value: 0}, ], jobRatio: [], podRatio: [ - {key: 'Running: 10', value: 83.33333333333334}, - {key: 'Failed: 2', value: 16.666666666666664}, - {key: 'Pending: 0', value: 0}, - {key: 'Succeeded: 0', value: 0}, + {name: 'Running: 10', value: 83.33333333333334}, + {name: 'Failed: 2', value: 16.666666666666664}, + {name: 'Pending: 0', value: 0}, + {name: 'Succeeded: 0', value: 0}, ], replicaSetRatio: [ - {key: 'Running: 1', value: 50}, - {key: 'Failed: 1', value: 50}, - {key: 'Pending: 0', value: 0}, + {name: 'Running: 1', value: 50}, + {name: 'Failed: 1', value: 50}, + {name: 'Pending: 0', value: 0}, ], replicationControllerRatio: [ - {key: 'Running: 2', value: 100}, - {key: 'Failed: 0', value: 0}, - {key: 'Pending: 0', value: 0}, + {name: 'Running: 2', value: 100}, + {name: 'Failed: 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( - By.css('kd-card mat-card div mat-card-content kd-allocation-chart #pods'), - ); + const debugElement = testHostFixture.debugElement.query(By.css('#kd-graph-pods')); expect(debugElement).toBeTruthy(); - - expect(debugElement.context.data === testResourcesRatio.podRatio).toBeTruthy(); }); }); diff --git a/src/app/frontend/common/components/workloadstatus/component.ts b/src/app/frontend/common/components/workloadstatus/component.ts index b01b4428d..1920e5449 100644 --- 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; - colors: string[] = ['#00c752', '#f00', '#ffad20', '#006028']; + @Input() resourcesRatio = emptyResourcesRatio; + colors: string[] = []; - constructor() { - if (!this.resourcesRatio) { - this.resourcesRatio = emptyResourcesRatio; + getCustomColor(label: string): string { + if (label.includes('Running')) { + 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 ''; } } } diff --git a/src/app/frontend/common/components/workloadstatus/template.html b/src/app/frontend/common/components/workloadstatus/template.html index 691c59453..42eba71d1 100644 --- 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.
Workload Status
-
- +
Cron Jobs
@@ -40,12 +36,9 @@ limitations under the License. *ngIf="resourcesRatio.daemonSetRatio.length">
- +
Daemon Sets
@@ -55,12 +48,9 @@ limitations under the License. *ngIf="resourcesRatio.deploymentRatio.length">
- +
Deployments
@@ -70,12 +60,9 @@ limitations under the License. *ngIf="resourcesRatio.jobRatio.length">
- +
Jobs
@@ -85,12 +72,10 @@ limitations under the License. *ngIf="resourcesRatio.podRatio.length">
- +
Pods
@@ -100,12 +85,9 @@ limitations under the License. *ngIf="resourcesRatio.replicaSetRatio.length">
- +
Replica Sets
@@ -115,12 +97,9 @@ limitations under the License. *ngIf="resourcesRatio.replicationControllerRatio.length">
- +
Replication Controllers
@@ -130,16 +109,12 @@ limitations under the License. *ngIf="resourcesRatio.statefulSetRatio.length">
- +
Stateful Sets
-
diff --git a/src/app/frontend/overview/helper.ts b/src/app/frontend/overview/helper.ts index 840ed7634..90038927a 100644 --- 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, }, ]); diff --git a/src/app/frontend/overview/template.html b/src/app/frontend/overview/template.html index 1b21c8eee..80c02bc45 100644 --- a/src/app/frontend/overview/template.html +++ b/src/app/frontend/overview/template.html @@ -22,8 +22,7 @@ limitations under the License.
- -