mgr/dashboard: Add vertical menu

Fixes: https://tracker.ceph.com/issues/41155
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/.babelrc b/src/pybind/mgr/dashboard/frontend/.babelrc
deleted file mode 100644 (file)
index 002b4aa..0000000
--- a/src/pybind/mgr/dashboard/frontend/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["env"]
-}

diff --git a/src/pybind/mgr/dashboard/frontend/babel.config.js b/src/pybind/mgr/dashboard/frontend/babel.config.js
new file mode 100644 (file)
index 0000000..4512a85
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = ['@babel/preset-env'];
+  const plugins = [];
+
+  return {
+    presets,
+    plugins
+  };
+};

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index 36130f23bf158820c0e6c0636c9789e38eed3f00..b58b0a4c108abc293b6ba09d0c80817aa85d070c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -89,6 +89,12 @@
         "worker-plugin": "3.2.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
+          "integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==",
+          "dev": true
+        },
         "glob": {
           "version": "7.1.4",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
@@ -2090,6 +2096,16 @@
         "regenerator-runtime": "^0.13.2"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.7.4.tgz",
+      "integrity": "sha512-BBIEhzk8McXDcB3IbOi8zQPzzINUp4zcLesVlBSOcyGhzPUU8Xezk5GAG7Sy5GVhGmAO0zGd2qRSeY2g4Obqxw==",
+      "dev": true,
+      "requires": {
+        "core-js-pure": "^3.0.0",
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
     "@babel/template": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz",
@@ -2674,9 +2690,9 @@
       }
     },
     "@types/chart.js": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.2.tgz",
-      "integrity": "sha512-jgSW2LSsrgLLzfxDhJfDLst4ifH3IhHqbE1qXrqigHyhDz1zGHL3PSvIxwcoQvCAcq8kMeVcTkpiODChAy/QaA=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-R5F39GIQ54fZJ04pmgbLrx0/dOEhyS8LRQNdlAmZd5zWZiFJ0v9zNNSBJ9WOTBRrMjeV53s0qhnRRvhcs6dfyQ=="
     },
     "@types/events": {
       "version": "3.0.0",
@@ -3041,9 +3057,9 @@
       }
     },
     "acorn": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
+      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
       "dev": true
     },
     "acorn-globals": {
@@ -3231,9 +3247,9 @@
       "dev": true
     },
     "arg": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.1.tgz",
-      "integrity": "sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.2.tgz",
+      "integrity": "sha512-+ytCkGcBtHZ3V2r2Z06AncYO8jz46UEamcspGoU8lHcEbpn6J77QK0vdWvChsclg/tM5XIJC5tnjmPp7Eq6Obg==",
       "dev": true
     },
     "argparse": {
@@ -3532,18 +3548,19 @@
       "dev": true
     },
     "aws4": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz",
+      "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==",
       "dev": true
     },
     "axobject-query": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
-      "integrity": "sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz",
+      "integrity": "sha512-lF98xa/yvy6j3fBHAgQXIYl+J4eZadOSqsPojemUqClzNbBV38wWGpUbQbVEyf4eUF5yF7eHmGgGA2JiHyjeqw==",
       "dev": true,
       "requires": {
-        "ast-types-flow": "0.0.7"
+        "@babel/runtime": "^7.7.4",
+        "@babel/runtime-corejs3": "^7.7.4"
       }
     },
     "babel-code-frame": {
@@ -3979,9 +3996,9 @@
       }
     },
     "bluebird": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz",
-      "integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
     "bn.js": {
@@ -4436,6 +4453,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
     },
+    "can-use-dom": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
+      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+    },
     "caniuse-lite": {
       "version": "1.0.30000989",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz",
@@ -5088,40 +5110,45 @@
       }
     },
     "core-js": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
-      "integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==",
-      "dev": true
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.7.tgz",
+      "integrity": "sha512-qaPVGw30J1wQ0GR3GvoPqlGf9GZfKKF4kFC7kiHlcsPTqH3txrs9crCp3ZiMAXuSenhz89Jnl4GZs/67S5VOSg=="
     },
     "core-js-compat": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.4.2.tgz",
-      "integrity": "sha512-W0Aj+LM3EAxxjD0Kp2o4be8UlnxIZHNupBv2znqrheR4aY2nOn91794k/xoSp+SxqqriiZpTsSwBtZr60cbkwQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.4.7.tgz",
+      "integrity": "sha512-57+mgz/P/xsGdjwQYkwtBZR3LuISaxD1dEwVDtbk8xJMqAmwqaxLOvnNT7kdJ7jYE/NjNptyzXi+IQFMi/2fCw==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.7.3",
+        "browserslist": "^4.8.0",
         "semver": "^6.3.0"
       },
       "dependencies": {
         "browserslist": {
-          "version": "4.7.3",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.3.tgz",
-          "integrity": "sha512-jWvmhqYpx+9EZm/FxcZSbUZyDEvDTLDi3nSAKbzEkyWvtI0mNSmUosey+5awDW1RUlrgXbQb5A6qY1xQH9U6MQ==",
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.0.tgz",
+          "integrity": "sha512-HYnxc/oLRWvJ3TsGegR0SRL/UDnknGq2s/a8dYYEO+kOQ9m9apKoS5oiathLKZdh/e9uE+/J3j92qPlGD/vTqA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001010",
-            "electron-to-chromium": "^1.3.306",
-            "node-releases": "^1.1.40"
+            "caniuse-lite": "^1.0.30001012",
+            "electron-to-chromium": "^1.3.317",
+            "node-releases": "^1.1.41"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001012",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz",
-          "integrity": "sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==",
+          "version": "1.0.30001015",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz",
+          "integrity": "sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==",
           "dev": true
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.4.7.tgz",
+      "integrity": "sha512-Am3uRS8WCdTFA3lP7LtKR0PxgqYzjAMGKXaZKSNSC/8sqU0Wfq8R/YzoRs2rqtOVEunfgH+0q3O0BKOg0AvjPw==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -5819,9 +5846,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.314",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.314.tgz",
-      "integrity": "sha512-IKDR/xCxKFhPts7h+VaSXS02Z1mznP3fli1BbXWXeN89i2gCzKraU8qLpEid8YzKcmZdZD3Mly3cn5/lY9xsBQ==",
+      "version": "1.3.322",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz",
+      "integrity": "sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==",
       "dev": true
     },
     "elliptic": {
@@ -6343,9 +6370,9 @@
       }
     },
     "ext": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/ext/-/ext-1.2.0.tgz",
-      "integrity": "sha512-0ccUQK/9e3NreLFg6K6np8aPyRgwycx+oFGtfx1dSp7Wj00Ozw9r05FgBRlzjf2XBM7LAzwgLyDscRrtSU91hA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
       "dev": true,
       "requires": {
         "type": "^2.0.0"
@@ -6588,9 +6615,9 @@
       },
       "dependencies": {
         "schema-utils": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.5.0.tgz",
-          "integrity": "sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==",
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz",
+          "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==",
           "dev": true,
           "requires": {
             "ajv": "^6.10.2",
@@ -8467,9 +8494,15 @@
       "integrity": "sha1-5dguaimiX2YsZA5MMnDC+acTh+c=",
       "dev": true,
       "requires": {
-        "lodash": "4.17.15"
+        "lodash": "3.10.0"
       },
       "dependencies": {
+        "lodash": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz",
+          "integrity": "sha1-k9UcZygopEFqEq9XIguoqHN+L7s=",
+          "dev": true
+        }
       }
     },
     "jasmine-spec-reporter": {
@@ -8823,9 +8856,9 @@
       }
     },
     "jest-environment-jsdom-fifteen": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.0.tgz",
-      "integrity": "sha512-TNGpp8HUzpvrpweantzipQo6M2YbvmKkj1WGsdf29xpU0fgSa8nrL2fQgZDxpvrh77AexXtuXuwee0cl2iiLvg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.2.tgz",
+      "integrity": "sha512-nfrnAfwklE1872LIB31HcjM65cWTh1wzvMSp10IYtPJjLDUbTTvDpajZgIxUnhRmzGvogdHDayCIlerLK0OBBg==",
       "dev": true,
       "requires": {
         "@jest/environment": "^24.3.0",
@@ -8833,7 +8866,7 @@
         "@jest/types": "^24.3.0",
         "jest-mock": "^24.0.0",
         "jest-util": "^24.0.0",
-        "jsdom": "^15.1.0"
+        "jsdom": "^15.2.1"
       },
       "dependencies": {
         "acorn": {
@@ -11259,6 +11292,11 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -11272,8 +11310,7 @@
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
-      "dev": true
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -11291,6 +11328,11 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "loglevel": {
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz",
@@ -12101,9 +12143,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.41",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.41.tgz",
-      "integrity": "sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==",
+      "version": "1.1.42",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.42.tgz",
+      "integrity": "sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==",
       "dev": true,
       "requires": {
         "semver": "^6.3.0"
@@ -13676,9 +13718,9 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.4.0.tgz",
-      "integrity": "sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.5.0.tgz",
+      "integrity": "sha512-4vqUjKi2huMu1OJiLhi3jN6jeeKvMZdI1tYgi/njW5zV52jNLgSAZSdN16m9bJFe61/cT8ulmw4qFitV9QRsEA==",
       "dev": true
     },
     "public-encrypt": {
@@ -13839,9 +13881,9 @@
       },
       "dependencies": {
         "schema-utils": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.5.0.tgz",
-          "integrity": "sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==",
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz",
+          "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==",
           "dev": true,
           "requires": {
             "ajv": "^6.10.2",
@@ -14382,10 +14424,15 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.2.tgz",
-      "integrity": "sha512-cAVTI2VLHWYsGOirfeYVVQ7ZDejtQ9fp4YhYckWDEkFfqbVjaT11iM8k6xSAfGFMM+gDpZjMnFssPu8we+mqFw==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.13.1.tgz",
+      "integrity": "sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==",
       "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
@@ -15011,6 +15058,28 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "simplebar": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.0.7.tgz",
+      "integrity": "sha512-Bp/s94+3hHBXkhi8VBkuXiNHePMGLDVjMwUEJckC3uIBwLUmJbYnT6jqoETal46l+zXbEklffLRr/TtsQwjw0A==",
+      "requires": {
+        "can-use-dom": "^0.1.0",
+        "core-js": "^3.0.1",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "simplebar-angular": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/simplebar-angular/-/simplebar-angular-2.0.1.tgz",
+      "integrity": "sha512-NLOkEhtBG/YmYSNlKJQhWQR1fdcgPwITqLL2fVPCWGrrdVcyIbq7LAkr6N/UpvspPJOfxdElk/NRuOom3E8Lpg==",
+      "requires": {
+        "simplebar": "^5.0.7",
+        "tslib": "^1.9.0"
+      }
+    },
     "sisteransi": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.4.tgz",
@@ -15732,9 +15801,9 @@
       },
       "dependencies": {
         "schema-utils": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.5.0.tgz",
-          "integrity": "sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==",
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz",
+          "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==",
           "dev": true,
           "requires": {
             "ajv": "^6.10.2",
@@ -16374,9 +16443,9 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.6.9",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.9.tgz",
-      "integrity": "sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.1.tgz",
+      "integrity": "sha512-pnOF7jY82wdIhATVn87uUY/FHU+MDUdPLkmGFvGoclQmeu229eTkbG5gjGGBi3R7UuYYSEeYXY/TTY5j2aym2g==",
       "dev": true,
       "optional": true,
       "requires": {

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index e8fd9fad964485727c23da5c5ddb17da993aa7c6..b686ce7b7794960c89622d9b3311a5ec614cdc2c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -56,10 +56,11 @@
       "<rootDir>/src/setupJest.ts"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!@ngrx|ngx-bootstrap|@progress)"
+      "node_modules/(?!@ngrx|ngx-bootstrap|@progress|simplebar)"
     ],
     "transform": {
-      "^.+\\.(ts|js|html)$": "ts-jest"
+      "^.+\\.(ts|html)$": "ts-jest",
+      "^.+\\.(js)$": "babel-jest"
     },
     "setupFiles": [
       "jest-canvas-mock"
@@ -105,6 +106,7 @@
     "ngx-toastr": "11.0.0",
     "rxjs": "6.5.3",
     "rxjs-compat": "6.5.3",
+    "simplebar-angular": "2.0.1",
     "swagger-ui-dist": "3.23.11",
     "tslib": "1.10.0",
     "zone.js": "0.9.1"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.html b/src/pybind/mgr/dashboard/frontend/src/app/app.component.html
index 6cfd22b4164369029c836bb49cd124670b167608..9643a7f3329f99aea48a98d00f99bdb3e773337c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.html
@@ -8,20 +8,26 @@
               position="end"
               mode="over"
               autoFocus="false"
-              closeOnClickOutside="true">
+              closeOnClickOutside="true"
+              [ngClass]="{'isPwdDisplayed': isPwdDisplayed}">
     <cd-notifications-sidebar *ngIf="!isLoginActive()"></cd-notifications-sidebar>
   </ng-sidebar>
 
   <!-- Page content -->
   <div ng-sidebar-content>
     <block-ui>
-      <cd-pwd-expiration-notification *ngIf="!isLoginActive()"></cd-pwd-expiration-notification>
-      <cd-navigation *ngIf="!isLoginActive()"></cd-navigation>
-      <div class="container-fluid"
-           [ngClass]="{'full-height':isLoginActive(), 'dashboard':isDashboardPage()} ">
-        <cd-breadcrumbs></cd-breadcrumbs>
+      <div *ngIf="isLoginActive()"
+           class="container-fluid full-height">
         <router-outlet></router-outlet>
       </div>
+
+      <cd-navigation *ngIf="!isLoginActive()">
+        <div class="container-fluid"
+             [ngClass]="{'dashboard':isDashboardPage()} ">
+          <cd-breadcrumbs></cd-breadcrumbs>
+          <router-outlet></router-outlet>
+        </div>
+      </cd-navigation>
     </block-ui>
   </div>
 </ng-sidebar-container>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
index 238524b866d23301e9fdd8b0fd3d2b293d76ae41..9892d3048f0486c2fa74005e3018707a0a801363 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
@@ -4,6 +4,8 @@
   background-color: $color-whitesmoke-gray;
   margin: 0;
   padding: 0;
+  height: 100%;
+  overflow: overlay;
 }
 
 ::ng-deep #toast-container {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
index c3d9430e2947035cf3714ad6edd936014c593415..216042dea461ea98ee146a1aa18af5701bb8f16f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
@@ -32,6 +32,8 @@ export class AppComponent {
   // when the page is first loaded. This prevents that.
   sidebarAnimate = false;
 
+  isPwdDisplayed = false;
+
   constructor(
     private authStorageService: AuthStorageService,
     private router: Router,
@@ -45,6 +47,10 @@ export class AppComponent {
         this.sidebarOpened = !this.sidebarOpened;
       }
     });
+
+    this.authStorageService.isPwdDisplayed$.subscribe((isDisplayed) => {
+      this.isPwdDisplayed = isDisplayed;
+    });
   }
 
   isLoginActive() {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
index f14ac7494c9d0c0cb45e7774dade0f35c9d4c0f4..da02057afae90c13b959a39f20cc3e3a6da7777c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
@@ -4,6 +4,7 @@
   padding: 8px 0;
   background-color: transparent;
   border-radius: 0;
+  margin-top: 8px;
 }
 
 .breadcrumb > li + li:before {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 088d28b9ada267a3f8de5ad422f74e250aa69e8f..15f9f8969c9fca6306ed41b04c85ed91389d147c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -1,11 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { SimplebarAngularModule } from 'simplebar-angular';
 
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
@@ -23,12 +25,14 @@ import { NotificationsComponent } from './notifications/notifications.component'
   imports: [
     CommonModule,
     AuthModule,
+    BrowserAnimationsModule,
     CollapseModule.forRoot(),
     BsDropdownModule.forRoot(),
     PopoverModule.forRoot(),
     TooltipModule.forRoot(),
     AppRoutingModule,
     SharedModule,
+    SimplebarAngularModule,
     RouterModule
   ],
   declarations: [

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index 21360dd11a53c28e0a41e1312264993d4c81e01d..7ef562d4f8576526dcf201c7f6fc8b07b8510f18 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -1,6 +1,14 @@
+<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
 <div class="cd-navbar-top">
-  <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
-    <a class="navbar-brand mt-3 mb-2 ml-2"
+  <nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand"
+       [ngClass]="{'isPwdDisplayed': isPwdDisplayed}">
+    <button class="btn btn-link py-0"
+            (click)="showMenuSidebar = !showMenuSidebar">
+      <i class="fa fa-bars fa-2x"
+         aria-hidden="true"></i>
+    </button>
+
+    <a class="navbar-brand ml-2"
        href="#">
       <img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
            alt="Ceph" />
@@ -18,22 +26,29 @@
 
     <div class="collapse navbar-collapse"
          [collapse]="isCollapsed">
-      <ul class="navbar-nav mt-2 cd-navbar-primary d-block d-md-none">
-        <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
-      </ul>
-
       <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
         <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
       </ul>
-
     </div>
   </nav>
+</div>
 
-  <nav class="navbar navbar-expand-md navbar-dark cd-navbar-main pb-0 pl-0 d-none d-md-flex">
-    <ul class="navbar-nav mr-auto my-0 cd-navbar-primary ">
-      <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
-    </ul>
+<div class="wrapper">
+  <!-- Content -->
+  <nav id="sidebar"
+       [ngClass]="{'active': !showMenuSidebar, 'isPwdDisplayed': isPwdDisplayed}">
+    <ngx-simplebar [options]="simplebar">
+      <ul class="list-unstyled components cd-navbar-primary">
+        <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
+      </ul>
+    </ngx-simplebar>
   </nav>
+
+  <!-- Page Content -->
+  <div id="content"
+       [ngClass]="{'active': !showMenuSidebar, 'isPwdDisplayed': isPwdDisplayed}">
+    <ng-content></ng-content>
+  </div>
 </div>
 
 <ng-template #cd_utilities>
@@ -60,96 +75,83 @@
       class="nav-item tc_menuitem_dashboard">
     <a routerLink="/dashboard"
        class="nav-link">
+      <span i18n>Dashboard</span>&nbsp;
       <i [ngClass]="[icons.health]"
          [ngStyle]="summaryData?.health_status | healthColor"></i>
-      <span i18n>Dashboard</span>
     </a>
   </li>
 
   <!-- Cluster -->
-  <li dropdown
-      routerLinkActive="active"
-      class="nav-item dropdown tc_menuitem_cluster"
-      *ngIf="
-      permissions.hosts.read ||
-      permissions.monitor.read ||
-      permissions.osd.read ||
-      permissions.configOpt.read">
-    <a dropdownToggle
+  <li routerLinkActive="active"
+      class="nav-item tc_menuitem_cluster"
+      *ngIf="permissions.hosts.read ||permissions.monitor.read || permissions.osd.read || permissions.configOpt.read">
+    <a (click)="toggleSubMenu('cluster')"
        class="nav-link dropdown-toggle"
-       data-toggle="dropdown">
+       [attr.aria-expanded]="displayedSubMenu == 'cluster'"
+       aria-controls="collapseBasic">
       <ng-container i18n>Cluster</ng-container>
     </a>
-    <ul *dropdownMenu
-        class="dropdown-menu">
+    <ul class="list-unstyled"
+        [collapse]="displayedSubMenu !== 'cluster'"
+        [isAnimated]="true">
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_hosts"
           *ngIf="permissions.hosts.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/hosts">Hosts</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_cluster_inventory"
           *ngIf="permissions.hosts.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/inventory">Inventory</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_cluster_monitor"
           *ngIf="permissions.monitor.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/monitor/">Monitors</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_cluster_services"
           *ngIf="permissions.hosts.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/services/">Services</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_hosts"
           *ngIf="permissions.osd.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/osd">OSDs</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_configuration"
           *ngIf="permissions.configOpt.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/configuration">Configuration</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_crush"
           *ngIf="permissions.hosts.read && permissions.osd.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/crush-map">CRUSH map</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_modules"
           *ngIf="permissions.configOpt.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/mgr-modules">Manager modules</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_log"
           *ngIf="permissions.log.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/logs">Logs</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_monitoring"
           *ngIf="(isAlertmanagerConfigured || isPrometheusConfigured) && permissions.prometheus.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/monitoring">Monitoring</a>
       </li>
     </ul>
@@ -165,31 +167,30 @@
   </li>
 
   <!-- Block -->
-  <li dropdown
-      routerLinkActive="active"
-      class="nav-item dropdown tc_menuitem_block"
+  <li routerLinkActive="active"
+      class="nav-item tc_menuitem_block"
       *ngIf="permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read">
-    <a dropdownToggle
-       class="nav-link dropdown-toggle"
-       data-toggle="dropdown"
+    <a class="nav-link dropdown-toggle"
+       (click)="toggleSubMenu('block')"
+       [attr.aria-expanded]="displayedSubMenu == 'block'"
+       aria-controls="collapseBasic"
        [ngStyle]="blockHealthColor()">
       <ng-container i18n>Block</ng-container>
     </a>
 
-    <ul *dropdownMenu
-        class="dropdown-menu">
+    <ul class="list-unstyled"
+        [collapse]="displayedSubMenu !== 'block'"
+        [isAnimated]="true">
       <li routerLinkActive="active"
           *ngIf="permissions.rbdImage.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/block/rbd">Images</a>
       </li>
 
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_block_mirroring"
           *ngIf="permissions.rbdMirroring.read">
-        <a class="dropdown-item"
-           routerLink="/block/mirroring">
+        <a routerLink="/block/mirroring">
           <ng-container i18n>Mirroring</ng-container>
           <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
                  class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
@@ -201,7 +202,6 @@
       <li routerLinkActive="active"
           *ngIf="permissions.iscsi.read">
         <a i18n
-           class="dropdown-item"
            routerLink="/block/iscsi">iSCSI</a>
       </li>
     </ul>
@@ -226,33 +226,31 @@
   </li>
 
   <!-- Object Gateway -->
-  <li dropdown
-      routerLinkActive="active"
-      class="nav-item dropdown tc_menuitem_rgw"
+  <li routerLinkActive="active"
+      class="nav-item tc_menuitem_rgw"
       *ngIf="permissions.rgw.read">
-    <a dropdownToggle
-       class="nav-link dropdown-toggle"
-       data-toggle="dropdown">
+    <a class="nav-link dropdown-toggle"
+       (click)="toggleSubMenu('rgw')"
+       [attr.aria-expanded]="displayedSubMenu == 'rgw'"
+       aria-controls="collapseBasic">
       <ng-container i18n>Object Gateway</ng-container>
     </a>
-    <ul *dropdownMenu
-        class="dropdown-menu">
+    <ul class="list-unstyled"
+        [collapse]="displayedSubMenu !== 'rgw'"
+        [isAnimated]="true">
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_rgw_daemons">
         <a i18n
-           class="dropdown-item"
            routerLink="/rgw/daemon">Daemons</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_rgw_users">
         <a i18n
-           class="dropdown-item"
            routerLink="/rgw/user">Users</a>
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_rgw_buckets">
         <a i18n
-           class="dropdown-item"
            routerLink="/rgw/bucket">Buckets</a>
       </li>
     </ul>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index c264712b08c47deb069c3a3a55c48f431984264f..7357b3ee49ff8bfeb41bce3f7030af83c92c21ac 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -1,15 +1,20 @@
 @import 'defaults';
 
-/* Navbar */
-::ng-deep .cd-navbar-top {
-  margin-bottom: 0;
-  background: $color-navbar-bg;
-  border: 0;
-  border-radius: 0;
+$pwd-exp-height: 37.6px;
+
+/* ---------------------------------------------------
+    NAVBAR STYLE
+--------------------------------------------------- */
 
+::ng-deep .cd-navbar-top {
   .cd-navbar-brand {
+    background: $color-navbar-bg;
     border-top: 4px solid $color-nav-top-bar;
 
+    &.isPwdDisplayed {
+      top: $pwd-exp-height;
+    }
+
     .navbar-brand,
     .navbar-brand:hover {
       color: $color-navbar-brand;
@@ -57,7 +62,7 @@
   .navbar-nav > li > a {
     color: $color-nav-links;
     line-height: 1;
-    padding: 10px 18px !important;
+    padding: 13.5px 18px !important;
     position: relative;
     display: block;
     text-decoration: none;
@@ -90,34 +95,7 @@
     background-color: transparent;
   }
 
-  .cd-navbar-primary {
-    font-size: 1.2em;
-  }
-
-  .cd-navbar-primary > li > a {
-    border: 0;
-  }
-
-  .cd-navbar-primary > .active > a,
-  .cd-navbar-primary > .active > a:focus,
-  .cd-navbar-primary > .active > a:hover {
-    color: $color-nav-links;
-    background-color: $color-nav-links-hover;
-    border: 0;
-  }
-
   @media (min-width: $screen-md-min) {
-    .navbar-primary > li > a {
-      border-bottom: 4px solid transparent;
-    }
-
-    .cd-navbar-primary > .active > a,
-    .cd-navbar-primary > .active > a:focus,
-    .cd-navbar-primary > .active > a:hover {
-      background-color: transparent;
-      border-bottom: 4px solid $color-nav-bottom-bar;
-    }
-
     .cd-navbar-utility {
       border-bottom: 0;
       position: absolute;
@@ -155,25 +133,131 @@
         background-color: $color-nav-active-link-bg;
       }
     }
+  }
+}
+
+/* ---------------------------------------------------
+    SIDEBAR STYLE
+--------------------------------------------------- */
 
-    .cd-navbar-primary {
-      margin-top: 5px;
-      border-top: 1px solid $color-nav-border-top-collapse;
+$sidebar-width: 200px;
+$navbar-height: 43px;
+
+.cd-navbar-primary .active > a,
+.cd-navbar-primary > .active > a:focus,
+.cd-navbar-primary > .active > a:hover {
+  color: $color-nav-links !important;
+  background-color: $color-nav-links-hover !important;
+  border: 0 !important;
+}
+
+.wrapper {
+  display: flex;
+  width: 100%;
+
+  #sidebar {
+    width: $sidebar-width;
+    top: $navbar-height;
+    background: $color-navbar-bg;
+    overflow-y: auto;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    color: #fff;
+    transition: all 0.3s;
+
+    &.active {
+      margin-left: -$sidebar-width;
     }
 
-    .cd-navbar-utility {
-      border-top: 1px solid $color-nav-border-top-collapse;
-      font-size: 1.2em;
+    &.isPwdDisplayed {
+      top: $navbar-height + $pwd-exp-height;
+    }
 
-      .btn-group {
+    ul {
+      &.component {
+        padding: 20px 0;
+        margin: 0;
+      }
+
+      p {
+        color: #fff;
+        padding: 10px;
+      }
+
+      li a {
+        padding: 10px;
+        font-size: 1.1em;
         display: block;
+        color: #fff;
+
+        &:hover {
+          color: #fff;
+          background: $color-primary;
+        }
+
+        text-decoration: none;
+      }
+
+      li.active > a,
+      li > a a[aria-expanded='true'] {
+        color: #fff;
       }
     }
+  }
+
+  a.dropdown-toggle {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      right: 20px;
+      content: '\f054';
+      font-family: 'ForkAwesome';
+      border: 0;
+      font-size: 1rem;
+      transition: transform 0.3s ease-in-out;
+    }
 
-    .cd-navbar-primary > .active > a,
-    .cd-navbar-primary > .active > a:focus,
-    .cd-navbar-primary > .active > a:hover {
-      background-color: $color-nav-active-link-bg;
+    &[aria-expanded='true']::after {
+      transform: rotate(90deg);
     }
   }
+
+  ul ul a {
+    font-size: 0.9em !important;
+    padding-left: 30px !important;
+    background: lighten($color-navbar-bg, 10);
+  }
+
+  .cd-navbar-primary a:focus {
+    outline: none;
+  }
+
+  ngx-simplebar {
+    height: 100%;
+  }
+}
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+--------------------------------------------------- */
+
+#content {
+  width: calc(100% - #{$sidebar-width});
+  transition: all 0.3s;
+  position: absolute;
+  top: $navbar-height;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+
+  &.active {
+    width: 100vw;
+  }
+
+  &.isPwdDisplayed {
+    top: $navbar-height + $pwd-exp-height;
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index 83c8690f4b9c6795039281344e210f629289f56e..98538fe7e583cd7d12ec88851c72bc7797f4cca9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
@@ -19,11 +19,20 @@ export class NavigationComponent implements OnInit {
   permissions: Permissions;
   summaryData: any;
   icons = Icons;
-  isCollapsed = true;
+
   isAlertmanagerConfigured = false;
   isPrometheusConfigured = false;
   enabledFeature$: FeatureTogglesMap$;
 
+  isCollapsed = true;
+  showMenuSidebar = true;
+  displayedSubMenu = '';
+  isPwdDisplayed = false;
+
+  simplebar = {
+    autoHide: false
+  };
+
   constructor(
     private authStorageService: AuthStorageService,
     private prometheusService: PrometheusService,
@@ -31,10 +40,10 @@ export class NavigationComponent implements OnInit {
     private featureToggles: FeatureTogglesService
   ) {
     this.permissions = this.authStorageService.getPermissions();
-    this.enabledFeature$ = this.featureToggles.get();
   }
 
   ngOnInit() {
+    this.enabledFeature$ = this.featureToggles.get();
     this.summaryService.subscribe((data: any) => {
       if (!data) {
         return;
@@ -47,6 +56,10 @@ export class NavigationComponent implements OnInit {
     this.prometheusService.ifPrometheusConfigured(() => {
       this.isPrometheusConfigured = true;
     });
+
+    this.authStorageService.isPwdDisplayed$.subscribe((isDisplayed) => {
+      this.isPwdDisplayed = isDisplayed;
+    });
   }
 
   blockHealthColor() {
@@ -58,4 +71,12 @@ export class NavigationComponent implements OnInit {
       }
     }
   }
+
+  toggleSubMenu(menu: string) {
+    if (this.displayedSubMenu === menu) {
+      this.displayedSubMenu = '';
+    } else {
+      this.displayedSubMenu = menu;
+    }
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index ac5c8f8e7165e3c8876cab36cfaed7477021ab04..a22a6e4d6cb6356829480b1ffe6b8bfc32f7c1e1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -1,5 +1,13 @@
 @import 'defaults';
 
+::ng-deep .ng-sidebar__content {
+  overflow: hidden !important;
+}
+
+::ng-deep .isPwdDisplayed .ng-sidebar {
+  top: 92px !important;
+}
+
 // sidebar
 ::ng-deep .ng-sidebar {
   &.ng-sidebar--opened {
@@ -10,8 +18,8 @@
   max-width: 90vw;
   z-index: 9 !important;
 
-  top: 6vh !important;
-  height: 92vh;
+  top: 54px !important;
+  bottom: 10px !important;
 
   .card {
     height: 100%;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
index d524a900573cbe06b6a444f20d23ceea8048cfb5..36615164bd62f1c2e40393f5babc1cba6e664239 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
@@ -1,7 +1,8 @@
 <alert class="no-margin-bottom"
        type="{{ alertType }}"
        *ngIf="expirationDays != null && expirationDays <= pwdExpirationSettings.pwdExpirationWarning1"
-       [dismissible]="true">
+       [dismissible]="true"
+       (onClose)="close($event)">
   <div *ngIf="expirationDays === 0"
        i18n>Your password will expire in <strong>less than 1</strong> day. Click
   <a routerLink="/user-profile/edit"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
index b8b1ce79d511602b688b58ec7213cc30587574e2..94e64b5ecf62a65a02a7028dda43941347f36fc8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
@@ -30,6 +30,8 @@ export class PwdExpirationNotificationComponent implements OnInit {
         } else {
           this.alertType = 'warning';
         }
+
+        this.authStorageService.isPwdDisplayedSource.next(true);
       }
     });
   }
@@ -41,4 +43,8 @@ export class PwdExpirationNotificationComponent implements OnInit {
       return Math.floor((expiration.valueOf() - current.valueOf()) / (1000 * 3600 * 24));
     }
   }
+
+  close() {
+    this.authStorageService.isPwdDisplayedSource.next(false);
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-storage.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-storage.service.ts
index dabcc5675871e60493e69b48edc5e07345b55220..79e11cda1a52e9a80f3a3e0c240d984284e72700 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-storage.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-storage.service.ts
@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 
+import { BehaviorSubject } from 'rxjs';
+
 import { Permissions } from '../models/permissions';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthStorageService {
+  isPwdDisplayedSource = new BehaviorSubject(false);
+  isPwdDisplayed$ = this.isPwdDisplayedSource.asObservable();
+
   constructor() {}
 
   set(