From 580e734e3e3ed1f47d10b22a9dad36ed396e8591 Mon Sep 17 00:00:00 2001 From: theocerutti Date: Thu, 26 Aug 2021 14:31:52 +0200 Subject: [PATCH] ARTESCA-1828: Add global health bar Refs: #3471 --- ui/package-lock.json | 198 +++++++++--------- ui/package.json | 4 +- .../.well-known/runtime-app-configuration | 1 + ui/public/config.json | 1 + ui/src/components/DashboardGlobalHealth.js | 5 +- ui/src/components/DashboardHealthBar.js | 122 +++++++++++ ui/src/constants.js | 7 +- ui/src/containers/AlertProvider.js | 4 +- ui/src/translations/en.json | 1 + ui/src/translations/fr.json | 1 + ui/webpack.common.js | 6 +- 11 files changed, 235 insertions(+), 115 deletions(-) create mode 100644 ui/src/components/DashboardHealthBar.js diff --git a/ui/package-lock.json b/ui/package-lock.json index ec62b4ae8e..7973aacbf0 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -3004,8 +3004,8 @@ } }, "@scality/core-ui": { - "version": "github:scality/core-ui#d2c02f9cd9c24fe46a364f64d53b4984017c3199", - "from": "github:scality/core-ui#v0.19.3" + "version": "github:scality/core-ui#dc1ce60c7686b6654dda5dfae33d308e738e2a23", + "from": "github:scality/core-ui#bugfix/update-the-color-of-global-health-component-with-the-design" }, "@scality/module-federation": { "version": "github:scality/module-federation#a4f1cf882646c8d859b9081dc8b66e5647962456", @@ -3295,9 +3295,9 @@ "integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==" }, "@types/clone": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@types/clone/-/clone-2.1.0.tgz", - "integrity": "sha512-d/aS/lPOnUSruPhgNtT8jW39fHRVTLQy9sodysP1kkG8EdAtdZu1vt8NJaYA8w/6Z9j8izkAsx1A/yJhcYR1CA==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/clone/-/clone-2.1.1.tgz", + "integrity": "sha512-BZIU34bSYye0j/BFcPraiDZ5ka6MJADjcDVELGf7glr9K+iE8NYVjFslJFVWzskSxkLLyCrSPScE82/UUoBSvg==" }, "@types/cookie": { "version": "0.4.0", @@ -3332,9 +3332,12 @@ "dev": true }, "@types/fast-json-stable-stringify": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@types/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha512-mky/O83TXmGY39P1H9YbUpjV6l6voRYlufqfFCvel8l1phuy8HRjdWc1rrPuN53ITBJlbyMSV6z3niOySO5pgQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-IyNhGHu71jH1jCXTHmafuoAAdsbBON3kDh7u/UUhLmjYgN5TYB54e1R8ckTCiIevl2UuZaCsi9XRxineY5yUjw==", + "requires": { + "fast-json-stable-stringify": "*" + } }, "@types/graceful-fs": { "version": "4.1.5", @@ -7410,9 +7413,9 @@ } }, "d3-array": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.0.tgz", - "integrity": "sha512-T6H/qNldyD/1OlRkJbonb3u3MPhNwju8OPxYv0YSjDb/B2RUeeBEHzIpNrYiinwpmz8+am+puMrpcrDWgY9wRg==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", "requires": { "internmap": "^1.0.0" } @@ -7471,11 +7474,11 @@ "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==" }, "d3-geo": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.1.tgz", - "integrity": "sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz", + "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==", "requires": { - "d3-array": ">=2.5" + "d3-array": "^2.5.0" } }, "d3-geo-projection": { @@ -7513,14 +7516,14 @@ "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==" }, "d3-scale": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz", - "integrity": "sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", + "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==", "requires": { "d3-array": "^2.3.0", "d3-format": "1 - 2", "d3-interpolate": "1.2.0 - 2", - "d3-time": "1 - 2", + "d3-time": "^2.1.1", "d3-time-format": "2 - 3" } }, @@ -7533,9 +7536,12 @@ } }, "d3-time": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz", - "integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "requires": { + "d3-array": "2" + } }, "d3-time-format": { "version": "3.0.0", @@ -9530,9 +9536,9 @@ } }, "fast-json-patch": { - "version": "3.0.0-1", - "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.0.0-1.tgz", - "integrity": "sha512-6pdFb07cknxvPzCeLsFHStEy+MysPJPgZQ9LbQ/2O67unQF93SNqfdSqnPPl71YMHX+AD8gbl7iuoGFzHEdDuw==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.0.tgz", + "integrity": "sha512-IhpytlsVTRndz0hU5t0/MGzS/etxLlfrpG5V5M9mVbuj9TrJLWaMfsox9REM5rkuGX0T+5qjpe8XA1o0gZ42nA==" }, "fast-json-stable-stringify": { "version": "2.1.0", @@ -18088,7 +18094,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dev": true, "requires": { "ansi-regex": "^5.0.0" } @@ -19079,12 +19084,12 @@ "dev": true }, "vega": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/vega/-/vega-5.20.0.tgz", - "integrity": "sha512-L2hDaTH2gz9DFbu7l1B8fR637HzctViuosFCo/Db5aBe93fCJ/w/oJu+vQNfQELzfm9sntkS/+A4u+39xrDCNA==", + "version": "5.20.2", + "resolved": "https://registry.npmjs.org/vega/-/vega-5.20.2.tgz", + "integrity": "sha512-qmH7aD9GGPpssVdxL1xgcdxTbQzyRUeRR16Os385ymvQhiwCYQNA6+eXUPAZDTVLfk0RXu6Jzj6kUE5jQ80EVw==", "requires": { "vega-crossfilter": "~4.0.5", - "vega-dataflow": "~5.7.3", + "vega-dataflow": "~5.7.4", "vega-encode": "~4.8.3", "vega-event-selector": "~2.0.6", "vega-expression": "~4.0.1", @@ -19103,10 +19108,10 @@ "vega-scenegraph": "~4.9.4", "vega-statistics": "~1.7.9", "vega-time": "~2.0.4", - "vega-transforms": "~4.9.3", - "vega-typings": "~0.20.0", + "vega-transforms": "~4.9.4", + "vega-typings": "~0.21.0", "vega-util": "~1.16.1", - "vega-view": "~5.10.0", + "vega-view": "~5.10.1", "vega-view-transforms": "~4.5.8", "vega-voronoi": "~4.1.5", "vega-wordcloud": "~4.1.3" @@ -19128,35 +19133,41 @@ } }, "vega-dataflow": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/vega-dataflow/-/vega-dataflow-5.7.3.tgz", - "integrity": "sha512-2ipzKgQUmbSXcQBH+9XF0BYbXyZrHvjlbJ8ifyRWYQk78w8kMvE6wy/rcdXYK6iVZ6aAbEDDT7jTI+rFt3tGLA==", + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/vega-dataflow/-/vega-dataflow-5.7.4.tgz", + "integrity": "sha512-JGHTpUo8XGETH3b1V892we6hdjzCWB977ybycIu8DPqRoyrZuj6t1fCVImazfMgQD1LAfJlQybWP+alwKDpKig==", "requires": { "vega-format": "^1.0.4", "vega-loader": "^4.3.2", - "vega-util": "^1.15.2" + "vega-util": "^1.16.1" } }, "vega-embed": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.16.0.tgz", - "integrity": "sha512-9lbSGqES6a8zHNM5TV4pJAWq1lH0E3bzmgjT1K7PaONcl8N7Xy1Sg6RjBeyKTF4zNNi+0SwrjjqXxbr3YYIxFw==", + "version": "6.18.2", + "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.18.2.tgz", + "integrity": "sha512-wcDyQPE4J5aiCDc3/suH5RQDvrKkjuLkhzUcbOLwEkNF8/+pp17tS0JghzEvAPNRg+5aG1/N2ydixq8Lk3dOlg==", "requires": { "fast-json-patch": "^3.0.0-1", "json-stringify-pretty-compact": "^3.0.0", - "semver": "^7.3.4", - "vega-schema-url-parser": "^2.1.0", + "semver": "^7.3.5", + "tslib": "^2.2.0", + "vega-schema-url-parser": "^2.2.0", "vega-themes": "^2.10.0", "vega-tooltip": "^0.25.1" }, "dependencies": { "semver": { - "version": "7.3.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", - "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", "requires": { "lru-cache": "^6.0.0" } + }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" } } }, @@ -19262,9 +19273,9 @@ } }, "vega-lite": { - "version": "4.17.0", - "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-4.17.0.tgz", - "integrity": "sha512-MO2XsaVZqx6iWWmVA5vwYFamvhRUsKfVp7n0pNlkZ2/21cuxelSl92EePZ2YGmzL6z4/3K7r/45zaG8p+qNHeg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-5.1.0.tgz", + "integrity": "sha512-HEyf0iHnCNmWkWFIbEmMphcJwZpcBnfnU8v+Ojrndr7ihDueojHMOSikoyz/GNpdkai+QFxLboA6DDCTtFv9iQ==", "requires": { "@types/clone": "~2.1.0", "@types/fast-json-stable-stringify": "^2.0.0", @@ -19272,12 +19283,12 @@ "clone": "~2.1.2", "fast-deep-equal": "~3.1.3", "fast-json-stable-stringify": "~2.1.0", - "json-stringify-pretty-compact": "~2.0.0", - "tslib": "~2.0.3", + "json-stringify-pretty-compact": "~3.0.0", + "tslib": "~2.2.0", "vega-event-selector": "~2.0.6", - "vega-expression": "~3.0.0", - "vega-util": "~1.16.0", - "yargs": "~16.0.3" + "vega-expression": "~4.0.1", + "vega-util": "~1.16.1", + "yargs": "~16.2.0" }, "dependencies": { "cliui": { @@ -19290,31 +19301,10 @@ "wrap-ansi": "^7.0.0" } }, - "json-stringify-pretty-compact": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz", - "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==" - }, - "strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "requires": { - "ansi-regex": "^5.0.0" - } - }, "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" - }, - "vega-expression": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-3.0.1.tgz", - "integrity": "sha512-+UwOFEkBnAWo8Zud6i8O4Pd2W6QqmPUOaAhjNtj0OxRL+d+Duoy7M4edUDZ+YuoUcMnjjBFfDQu7oRAA1fIMEQ==", - "requires": { - "vega-util": "^1.15.2" - } + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" }, "wrap-ansi": { "version": "7.0.0", @@ -19327,28 +19317,28 @@ } }, "y18n": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz", - "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==" + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==" }, "yargs": { - "version": "16.0.3", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.0.3.tgz", - "integrity": "sha512-6+nLw8xa9uK1BOEOykaiYAJVh6/CjxWXK/q9b5FpRgNslt8s22F2xMBqVIKgCRjNgGvGPBy8Vog7WN7yh4amtA==", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", "requires": { - "cliui": "^7.0.0", - "escalade": "^3.0.2", + "cliui": "^7.0.2", + "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.0", - "y18n": "^5.0.1", - "yargs-parser": "^20.0.0" + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" } }, "yargs-parser": { - "version": "20.2.7", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", - "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==" + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" } } }, @@ -19438,9 +19428,9 @@ } }, "vega-schema-url-parser": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-2.1.0.tgz", - "integrity": "sha512-JHT1PfOyVzOohj89uNunLPirs05Nf59isPT5gnwIkJph96rRgTIBJE7l7yLqndd7fLjr3P8JXHGAryRp74sCaQ==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-2.2.0.tgz", + "integrity": "sha512-yAtdBnfYOhECv9YC70H2gEiqfIbVkq09aaE4y/9V/ovEFmH9gPKaEgzIZqgT7PSPQjKhsNkb6jk6XvSoboxOBw==" }, "vega-selections": { "version": "5.3.0", @@ -19483,21 +19473,21 @@ } }, "vega-transforms": { - "version": "4.9.3", - "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.9.3.tgz", - "integrity": "sha512-PdqQd5oPlRyD405M2w+Sz9Bo+i7Rwi8o03SVK7RaeQsJC2FffKGJ6acIaSEgOq+yD1Q2k/1SePmCXcmLUlIiEA==", + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.9.4.tgz", + "integrity": "sha512-JGBhm5Bf6fiGTUSB5Qr5ckw/KU9FJcSV5xIe/y4IobM/i/KNwI1i1fP45LzP4F4yZc0DMTwJod2UvFHGk9plKA==", "requires": { "d3-array": "^2.7.1", - "vega-dataflow": "^5.7.3", + "vega-dataflow": "^5.7.4", "vega-statistics": "^1.7.9", "vega-time": "^2.0.4", - "vega-util": "^1.15.2" + "vega-util": "^1.16.1" } }, "vega-typings": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.20.0.tgz", - "integrity": "sha512-S+HIRN/3WYiS5zrQjJ4FDEOlvFVHLxPXMJerrnN3YZ6bxCDYo7tEvQUUuByGZ3d19GuKjgejczWS7XHvF3WjDw==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.21.0.tgz", + "integrity": "sha512-dG0RtnJUn3+BQMO4NjjTdcp5UTBR56yQsLXPPCAFUHeLuycEVKlyhBa/kbvAZv2r+QxdeEYwKUNYy9CQotF5KA==", "requires": { "vega-util": "^1.15.2" } @@ -19508,9 +19498,9 @@ "integrity": "sha512-FdgD72fmZMPJE99FxvFXth0IL4BbLA93WmBg/lvcJmfkK4Uf90WIlvGwaIUdSePIsdpkZjBPyQcHMQ8OcS8Smg==" }, "vega-view": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.10.0.tgz", - "integrity": "sha512-HuqTVimMqlgqe64EQkTEnt0+yDkt29/q1szg/m9QwCrSc5QMXI8Mkt58O/F7OD3QyVr7xrKHyPTk9I9gCaZ6sw==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.10.1.tgz", + "integrity": "sha512-4xvQ5KZcgKdZx1Z7jjenCUumvlyr/j4XcHLRf9gyeFrFvvS596dVpL92V8twhV6O++DmS2+fj+rHagO8Di4nMg==", "requires": { "d3-array": "^2.7.1", "d3-timer": "^2.0.0", diff --git a/ui/package.json b/ui/package.json index 3524637fd0..834201828c 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,7 +10,7 @@ "@fortawesome/react-fontawesome": "^0.1.14", "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.2-63-g579d066", "@scality/module-federation": "github:scality/module-federation.git#1.0.0", - "@scality/core-ui": "github:scality/core-ui.git#v0.19.3", + "@scality/core-ui": "github:scality/core-ui.git#bugfix/update-the-color-of-global-health-component-with-the-design", "axios": "^0.21.1", "formik": "2.2.5", "jest-environment-jsdom-sixteen": "^1.0.3", @@ -39,7 +39,7 @@ "uuid": "3.3.2", "vega": "^5.17.3", "vega-embed": "^6.0.0", - "vega-lite": "^4.17.0", + "vega-lite": "^5.0.0", "yup": "^0.32.9" }, "scripts": { diff --git a/ui/public/.well-known/runtime-app-configuration b/ui/public/.well-known/runtime-app-configuration index 71da3e1157..2f7f1ff517 100644 --- a/ui/public/.well-known/runtime-app-configuration +++ b/ui/public/.well-known/runtime-app-configuration @@ -14,6 +14,7 @@ "url_grafana": "/grafana", "url_doc": "/docs", "url_alertmanager": "/api/alertmanager", + "url_loki": "/api/loki", "flags": [], "ui_base_path":"/", "url_support": "https://github.com/scality/metalk8s/discussions/new" diff --git a/ui/public/config.json b/ui/public/config.json index fec759bad3..0e4834f66c 100644 --- a/ui/public/config.json +++ b/ui/public/config.json @@ -5,6 +5,7 @@ "url_grafana": "/grafana", "url_doc": "/docs", "url_alertmanager": "/api/alertmanager", + "url_loki": "/api/loki", "flags": [], "url_navbar": "/shell/solution-ui-navbar.1.0.0.js", "url_alerts": "/shell/alerts.1.0.0.js", diff --git a/ui/src/components/DashboardGlobalHealth.js b/ui/src/components/DashboardGlobalHealth.js index 91d75122f4..f3da206d43 100644 --- a/ui/src/components/DashboardGlobalHealth.js +++ b/ui/src/components/DashboardGlobalHealth.js @@ -2,6 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { spacing } from '@scality/core-ui/dist/style/theme'; import DashboardAlerts from './DashboardAlerts'; +import DashboardHealthBar from './DashboardHealthBar'; const GlobalHealthContainer = styled.div` display: flex; @@ -31,7 +32,9 @@ const GlobalHealthContainer = styled.div` const DashboardGlobalHealth = () => { return ( -
GlobalHealth
+
+ +
diff --git a/ui/src/components/DashboardHealthBar.js b/ui/src/components/DashboardHealthBar.js new file mode 100644 index 0000000000..4a3ddef781 --- /dev/null +++ b/ui/src/components/DashboardHealthBar.js @@ -0,0 +1,122 @@ +import React, { useCallback } from 'react'; +import { GlobalHealthBar, Tooltip, Loader } from '@scality/core-ui'; +import styled from 'styled-components'; +import { useIntl } from 'react-intl'; +import { spacing } from '@scality/core-ui/dist/style/theme'; +import { getAlertsLoki, isLokiReady } from '../services/loki/api'; +import { useQuery } from 'react-query'; +import { REFRESH_GLOBAL_HEALTH_BAR } from '../constants'; +import { useMetricsTimeSpan } from '../hooks'; +import { + highestAlertToStatus, + useAlertLibrary, + useHighestSeverityAlerts, +} from '../containers/AlertProvider'; + +const GlobalHealthContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const TitleContainer = styled.div` + display: flex; + & > div { + margin-right: ${spacing.sp16}; + } + i { + color: ${(props) => props.theme.buttonSecondary}; + } +`; + +const HealthCircle = styled.div` + height: ${(props) => props.size}; + width: ${(props) => props.size}; + background-color: ${(props) => + props.theme[ + 'status' + props.variant.replace(/^\w/, (c) => c.toUpperCase()) + ]}; + border-radius: 50%; + display: inline-block; +`; + +const DashboardHealthBar = () => { + const intl = useIntl(); + const alertsLibrary = useAlertLibrary(); + const platformAlerts = useHighestSeverityAlerts( + alertsLibrary.getPlatformAlertSelectors(), + ); + const [metricsTimeSpan] = useMetricsTimeSpan(); + const start = new Date( + new Date().getTime() - metricsTimeSpan * 1000, + ).toISOString(); + const end = new Date().toISOString(); + + const { data, isLoading } = useQuery( + ['dashboardHealthBar', metricsTimeSpan], + useCallback(async () => { + if (await isLokiReady()) return getAlertsLoki(start, end); + else return []; + // Can't add start/end to dependencies because these dates are modified on every render + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [metricsTimeSpan]), + { + refetchOnMount: false, + refetchOnWindowFocus: false, + refetchInterval: REFRESH_GLOBAL_HEALTH_BAR, + refetchIntervalInBackground: true, + }, + ); + + return ( + + +
{intl.formatMessage({ id: 'global_health' })}
+ + The Global Health is the overall status of your Platform over a + specific period. +
+
+ The statuses of the Volumes and Nodes, the Network and the + Services are monitored. +
+
+ OK, the + Platform is healthy. +
+ Warning, the + Platform is degraded but not at risk. +
+ Critical + status, the Platform is degraded and at risk. +
+
+ Hover or click on an alert segment on the Global Health bar for + more details. + + } + placement="bottom" + > + + + + + {isLoading && !data ? ( + + ) : ( + + )} + + ); +}; + +export default DashboardHealthBar; diff --git a/ui/src/constants.js b/ui/src/constants.js index 9db4daa42a..26f0cbd5c8 100644 --- a/ui/src/constants.js +++ b/ui/src/constants.js @@ -1,6 +1,7 @@ //@flow export const REFRESH_TIMEOUT = 15000; export const REFRESH_METRICS_GRAPH = 60000; +export const REFRESH_GLOBAL_HEALTH_BAR = 300000; export const FR_LANG = 'FR'; export const EN_LANG = 'EN'; export const LANGUAGE = 'language'; @@ -127,7 +128,7 @@ export const lineColor4 = '#C6B38A'; // Grafana dashboard UIDs (for stable links) export const GRAFANA_DASHBOARDS = { - logs: "a7e130cb82be229d6f3edbfd0a438001", - nodes: "node-exporter-full", - volumes: "919b92a8e8041bd567af9edab12c840c", + logs: 'a7e130cb82be229d6f3edbfd0a438001', + nodes: 'node-exporter-full', + volumes: '919b92a8e8041bd567af9edab12c840c', }; diff --git a/ui/src/containers/AlertProvider.js b/ui/src/containers/AlertProvider.js index cfd6b0eddf..9bb22801db 100644 --- a/ui/src/containers/AlertProvider.js +++ b/ui/src/containers/AlertProvider.js @@ -9,9 +9,9 @@ import { ComponentWithFederatedImports, FederatedComponent, } from '@scality/module-federation'; -import { STATUS_HEALTH } from '../constants'; +import { STATUS_HEALTH, STATUS_WARNING, STATUS_CRITICAL } from '../constants'; -export type Status = 'healthy' | 'warning' | 'critical'; +export type Status = STATUS_HEALTH | STATUS_WARNING | STATUS_CRITICAL; const alertGlobal = {}; export const useAlerts = (filters: FilterLabels) => { diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json index 27dbf7ff4c..1f99f957c8 100644 --- a/ui/src/translations/en.json +++ b/ui/src/translations/en.json @@ -58,6 +58,7 @@ "prometheus_unavailable": "Prometheus is unavailable", "down": "Down", "alerts": "Alerts", + "global_health": "Global Health", "node_creation": "Node creation", "node_creation_success": "Node {name} has been created successfully.", "node_creation_failed": "Node {name} creation has failed.", diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json index 5026c70baa..3828493765 100644 --- a/ui/src/translations/fr.json +++ b/ui/src/translations/fr.json @@ -58,6 +58,7 @@ "prometheus_unavailable": "Prometheus n'est pas disponible", "down": "H.S", "alerts": "Alertes", + "global_health": "Santé Globale", "node_creation": "Création du nœud", "node_creation_success": "Le nœud {name} a été créé avec succèss", "node_creation_failed": "La création du nœud {name} a échoué.", diff --git a/ui/webpack.common.js b/ui/webpack.common.js index 6660e8a586..a07dfd4eac 100644 --- a/ui/webpack.common.js +++ b/ui/webpack.common.js @@ -27,9 +27,9 @@ module.exports = (env) => ({ */ performance: { hints: 'error', - // ~732 KiB for production - // ~4.06 MiB for development because flow increase the size of assets. - maxAssetSize: process.env.NODE_ENV === 'production' ? 750000 : 5000000, + // ~3,24 MiB for production + // ~10,49 MiB for development because flow increase the size of assets. + maxAssetSize: process.env.NODE_ENV === 'production' ? 3400000 : 11000000, assetFilter: (assetFilename) => { return ( !assetFilename.endsWith('.map.gz') && assetFilename.endsWith('.gz')