mgr/dashboard: carbon initial setup

diff --git a/src/pybind/mgr/dashboard/frontend/.nvmrc b/src/pybind/mgr/dashboard/frontend/.nvmrc
new file mode 100644 (file)
index 0000000..9a2a0e2
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/.nvmrc
@@ -0,0 +1 @@
+v20

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index f3e393d85234568b0d68c3d389630119beffcde7..08726ef00f259d9b42877946031488472ca6ba49 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -19,7 +19,10 @@
         "@angular/platform-browser": "15.2.9",
         "@angular/platform-browser-dynamic": "15.2.9",
         "@angular/router": "15.2.9",
+        "@carbon/icons": "11.41.0",
+        "@carbon/styles": "1.57.0",
         "@circlon/angular-tree-component": "10.0.0",
+        "@ibm/plex": "6.4.0",
         "@ng-bootstrap/ng-bootstrap": "14.2.0",
         "@ngx-formly/bootstrap": "6.1.1",
         "@ngx-formly/core": "6.1.1",
@@ -28,6 +31,7 @@
         "@types/file-saver": "2.0.1",
         "async-mutex": "0.2.4",
         "bootstrap": "5.2.3",
+        "carbon-components-angular": "5.25.1",
         "chart.js": "4.4.0",
         "chartjs-adapter-moment": "1.0.1",
         "detect-browser": "5.2.0",
@@ -3943,6 +3947,128 @@
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz",
       "integrity": "sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w=="
     },
+    "node_modules/@carbon/colors": {
+      "version": "11.22.0",
+      "resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.22.0.tgz",
+      "integrity": "sha512-IRbzstMpIhD1ULhfYhZ5ne7kIKdhQhiMeltWRPw+7wlFB5ezFoX+kX3ILqdz20CkcrpLu+TVKLD79Zv/+4RD6w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/feature-flags": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.20.0.tgz",
+      "integrity": "sha512-OEYrazJa0nEEHbBDyarXIz6kjWgqsJggjbNAcVOxx0Nvma1nZBd+SwXKwdbMkBZagSSC816dV12oZJtr+GIZZg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/grid": {
+      "version": "11.23.0",
+      "resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.23.0.tgz",
+      "integrity": "sha512-/8SiXzefUdUeIRzMxKB2+xq65knjkDas2TcZj0NS7dnDIEr5HarWTABh/H5b5BTFEJXos3PfEH6X5OUDuK4qpg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@carbon/layout": "^11.22.0",
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/icon-helpers": {
+      "version": "10.37.0",
+      "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.37.0.tgz",
+      "integrity": "sha512-YXed2JUSCGddp3UnY5OffR3W8Pl+dy9a+vfUtYhSLH9TbIEBR6EvYIfvruFMhA8JIVMCUClUqgyMQXM5oMFQ0g=="
+    },
+    "node_modules/@carbon/icons": {
+      "version": "11.41.0",
+      "resolved": "https://registry.npmjs.org/@carbon/icons/-/icons-11.41.0.tgz",
+      "integrity": "sha512-9RGaOnihPQx74yBQ0UnEr9JJ+e2aa/J+tmTG/sZ203q2hfoeMF2PqipwOhNS1fqCnyW1zvsYQNydUsNIDzCqaA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/layout": {
+      "version": "11.22.0",
+      "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.22.0.tgz",
+      "integrity": "sha512-G9HUJhGW+hNfUKyCLUZior5PDz808prB2Xr3vWF/rqNwLIDKhva/wCXBW2Xl0LavzonuibaCavcSYJGDkpDKhw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/motion": {
+      "version": "11.18.0",
+      "resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.18.0.tgz",
+      "integrity": "sha512-hVTmRxhXCA+xznXZSTd6m0kmuIRrR8mxnDHvrVKFvN3ksTYDni5Mtx4XNylI4u/fmzyUcvrvVeTHqJ8LbPsDvA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/styles": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.57.0.tgz",
+      "integrity": "sha512-1GOJi0AAAOJXz411e9hoA3DTrK6SXsseSl7BDjQ5cO4ljlqCIPW5JS213yaF4MoYiLw5coDeGP7n6mgfWjbymA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@carbon/colors": "^11.22.0",
+        "@carbon/feature-flags": "^0.20.0",
+        "@carbon/grid": "^11.23.0",
+        "@carbon/layout": "^11.22.0",
+        "@carbon/motion": "^11.18.0",
+        "@carbon/themes": "^11.35.0",
+        "@carbon/type": "^11.27.0",
+        "@ibm/plex": "6.0.0-next.6",
+        "@ibm/telemetry-js": "^1.5.0"
+      },
+      "peerDependencies": {
+        "sass": "^1.33.0"
+      },
+      "peerDependenciesMeta": {
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@carbon/styles/node_modules/@ibm/plex": {
+      "version": "6.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/@ibm/plex/-/plex-6.0.0-next.6.tgz",
+      "integrity": "sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@carbon/themes": {
+      "version": "11.35.0",
+      "resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.35.0.tgz",
+      "integrity": "sha512-Sgh8u2JhpOhpfjaj8U2jStmGtLNDGWSLojZdxKl9FnVg1yNe02+IlhnK5bFeCNOGx4dFhrLFIhLtdh9T0Hy8rg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@carbon/colors": "^11.22.0",
+        "@carbon/layout": "^11.22.0",
+        "@carbon/type": "^11.27.0",
+        "@ibm/telemetry-js": "^1.5.0",
+        "color": "^4.0.0"
+      }
+    },
+    "node_modules/@carbon/type": {
+      "version": "11.27.0",
+      "resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.27.0.tgz",
+      "integrity": "sha512-+YsFTKsch8xcdZ7y40K69B+47j86H7u8HEZ9OfymmXfMYAT+73MTfAtwyO3leS9rWGljKIh0h3I+Ga7wxE0Q6w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@carbon/grid": "^11.23.0",
+        "@carbon/layout": "^11.22.0",
+        "@ibm/telemetry-js": "^1.5.0"
+      }
+    },
+    "node_modules/@carbon/utils-position": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@carbon/utils-position/-/utils-position-1.1.4.tgz",
+      "integrity": "sha512-/01kFPKr+wD2pPd5Uck2gElm3K/+eNxX7lEn2j1NKzzE4+eSZXDfQtLR/UHcvOSgkP+Av42LET6B9h9jXGV+HA=="
+    },
     "node_modules/@circlon/angular-tree-component": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@circlon/angular-tree-component/-/angular-tree-component-10.0.0.tgz",
@@ -5011,6 +5137,28 @@
         "node": ">=14"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+      "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@foliojs-fork/fontkit": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz",
@@ -5127,6 +5275,19 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@ibm/plex": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@ibm/plex/-/plex-6.4.0.tgz",
+      "integrity": "sha512-P70hmNoSJhpV6fGG4++JEivoccUVuvkyZoXprsDmPTtv3s6QvL+Q8bK3HFSGmK/VgyLMDptoKPV7b/h/1xaWAw=="
+    },
+    "node_modules/@ibm/telemetry-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@ibm/telemetry-js/-/telemetry-js-1.5.1.tgz",
+      "integrity": "sha512-Hu8iJAy9UGvjWjpMmHTNgekr2+b44nvp37RxSdWogpkSO7bPajR3CbDvb0QWAvJ7KnW+VmB3aDi1rlNsIyrZVw==",
+      "bin": {
+        "ibmtelemetry": "dist/collect.js"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -11076,6 +11237,34 @@
         }
       ]
     },
+    "node_modules/carbon-components-angular": {
+      "version": "5.25.1",
+      "resolved": "https://registry.npmjs.org/carbon-components-angular/-/carbon-components-angular-5.25.1.tgz",
+      "integrity": "sha512-v49djZmcHs47G7wzaS+SQUTqp+vErlHDc4ohbsx29Q+Jq1m6IJSaTUCN9GuQG/lLa7W1se0vS23TOToKwjIbcw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@carbon/icon-helpers": "10.37.0",
+        "@carbon/icons": "11.14.0",
+        "@carbon/utils-position": "1.1.4",
+        "@floating-ui/dom": "1.6.3",
+        "@ibm/telemetry-js": "^1.5.0",
+        "flatpickr": "4.6.13",
+        "tslib": "2.3.0"
+      },
+      "peerDependencies": {
+        "@carbon/styles": "^1.54.0"
+      }
+    },
+    "node_modules/carbon-components-angular/node_modules/@carbon/icons": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@carbon/icons/-/icons-11.14.0.tgz",
+      "integrity": "sha512-6XaySbscz1ubJ/3GtyXB8qJpcAL8kcIzBA6JZpFCcha43tuB1Kps87ADj/v3yx0sLPxyIzRWgkw2n1bnkAcsNA=="
+    },
+    "node_modules/carbon-components-angular/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -11735,6 +11924,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -11748,6 +11949,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -11757,6 +11967,22 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -15815,6 +16041,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "node_modules/flatted": {
       "version": "3.2.9",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
@@ -30060,6 +30291,19 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/simplebar": {
       "version": "5.3.9",
       "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.3.9.tgz",

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index f72dbdbe4125b865619527dddba737f6f38b8ec1..2856af154fb66d4eaf4994faabd9f7aaca884b59 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -53,7 +53,10 @@
     "@angular/platform-browser": "15.2.9",
     "@angular/platform-browser-dynamic": "15.2.9",
     "@angular/router": "15.2.9",
+    "@carbon/icons": "11.41.0",
+    "@carbon/styles": "1.57.0",
     "@circlon/angular-tree-component": "10.0.0",
+    "@ibm/plex": "6.4.0",
     "@ng-bootstrap/ng-bootstrap": "14.2.0",
     "@ngx-formly/bootstrap": "6.1.1",
     "@ngx-formly/core": "6.1.1",
@@ -62,6 +65,7 @@
     "@types/file-saver": "2.0.1",
     "async-mutex": "0.2.4",
     "bootstrap": "5.2.3",
+    "carbon-components-angular": "5.25.1",
     "chart.js": "4.4.0",
     "chartjs-adapter-moment": "1.0.1",
     "detect-browser": "5.2.0",

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
index eda1e83be546da1f71876a97ba935f039ababacb..e016f6e59ce4c9872864332c3da78850adc8ffd9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@@ -1,4 +1,4 @@
-<div ngbDropdown
+<!-- <div ngbDropdown
      placement="bottom-right"
      *ngIf="userPermission.read">
   <a ngbDropdownToggle
@@ -6,7 +6,7 @@
      i18n-title
      title="Dashboard Settings"
      role="button">
-    <i [ngClass]="[icons.deepCheck]"></i>
+     <svg cdsIcon="settings" size="20" title="settings"></svg>
     <span i18n
           class="d-md-none">Dashboard Settings</span>
   </a>
@@ -20,4 +20,15 @@
             routerLink="/telemetry"
             i18n>Telemetry configuration</button>
   </div>
-</div>
+</div> -->
+
+<cds-overflow-menu [customTrigger]="customTrigger" [offset]="{y:0, x:-80}">
+        <cds-overflow-menu-option *ngIf="userPermission.read" routerLink="/user-management" i18n>User management</cds-overflow-menu-option>
+        <cds-overflow-menu-option *ngIf="configOptPermission.read" routerLink="/telemetry" i18n>Telemetry configuration</cds-overflow-menu-option>
+      </cds-overflow-menu>
+      
+      <ng-template #customTrigger>
+        <svg cdsIcon="settings" size="20" title="user" *ngIf="userPermission.read"></svg>
+        <span i18n
+          class="d-md-none">Dashboard Settings</span>
+      </ng-template>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
index 34ff79a115e8d70515885ab95c3893d221aa703a..0a31a6c132d82533f9dbbe2b877e367328c029c6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -1,10 +1,10 @@
-<div ngbDropdown
+<!-- <div ngbDropdown
      placement="bottom-right">
   <a ngbDropdownToggle
      i18n-title
      title="Help"
      role="button">
-    <i [ngClass]="[icons.questionCircle]"></i>
+     <svg cdsIcon="help" size="20" title="help"></svg>
     <span i18n
           class="d-md-none">Help</span>
   </a>
@@ -29,4 +29,27 @@
             (click)="openFeedbackModal()"
             i18n>Report an issue...</button>
   </div>
-</div>
+</div> -->
+
+<cds-overflow-menu [customTrigger]="customTrigger" [offset]="{y:0, x:-80}">
+  <cds-overflow-menu-option [ngClass]="{'disabled': !docsUrl}"
+  href="{{ docsUrl }}"
+  target="_blank"
+  i18n>Documentation<svg cdsIcon="launch" size="16"></svg></cds-overflow-menu-option>
+  <cds-overflow-menu-option routerLink="/api-docs"
+  target="_blank"
+  i18n>API
+  <svg cdsIcon="launch" size="16"></svg></cds-overflow-menu-option>
+  <cds-overflow-menu-option (click)="openAboutModal()"
+  i18n>About</cds-overflow-menu-option>
+  <cds-overflow-menu-option (click)="openFeedbackModal()"
+  i18n>Report an issue...</cds-overflow-menu-option>
+</cds-overflow-menu>
+
+<ng-template #customTrigger>
+  <svg cdsIcon="help" size="20" i18n-title
+     title="Help"
+     role="button"></svg>
+     <span i18n
+     class="d-md-none">Help</span>
+</ng-template>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
index 61e0e0527fe637b57d59fb844f4acb4e60b0fef4..2343e24c82b347954f8a5eb667955d1766f66ba2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
@@ -1,10 +1,10 @@
-<div ngbDropdown
+<!-- <div ngbDropdown
      placement="bottom-right">
   <a ngbDropdownToggle
      i18n-title
      title="Logged in user"
      role="button">
-    <i [ngClass]="[icons.user]"></i>
+     <svg cdsIcon="user--filled" size="20" title="user"></svg>
     <span i18n
           class="d-md-none">Logged in user</span>
   </a>
@@ -25,4 +25,16 @@
       <span i18n>Sign out</span>
     </button>
   </div>
-</div>
+</div> -->
+<cds-overflow-menu [customTrigger]="customTrigger" [offset]="{y:0, x:-80}">
+  <cds-overflow-menu-option i18n>Logged in user</cds-overflow-menu-option>
+  <cds-overflow-menu-option i18n>Signed in as<strong>{{ username }}</strong></cds-overflow-menu-option>
+  <cds-overflow-menu-option *ngIf="!sso"
+  routerLink="/user-profile/edit" i18n>Change password</cds-overflow-menu-option>
+  <cds-overflow-menu-option (click)="logout()" i18n>Sign out</cds-overflow-menu-option>
+</cds-overflow-menu>
+<ng-template #customTrigger>
+  <svg cdsIcon="user--filled" size="20" title="user"></svg>
+  <span i18n
+        class="d-md-none">Logged in user</span>
+</ng-template>
\ No newline at end of file

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 c8d2a9d9caba638c4ea13236efa326d53693c795..f859c23cfa212844120682d5a9f3ee64212c4ca0 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
@@ -4,6 +4,13 @@ import { RouterModule } from '@angular/router';
 
 import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { SimplebarAngularModule } from 'simplebar-angular';
+import {
+  UIShellModule,
+  IconService,
+  IconModule,
+  ThemeModule,
+  DialogModule
+} from 'carbon-components-angular';
 
 import { AppRoutingModule } from '~/app/app-routing.module';
 import { SharedModule } from '~/app/shared/shared.module';
@@ -17,6 +24,14 @@ import { IdentityComponent } from './identity/identity.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 
+// Icons
+import UserFilledIcon from '@carbon/icons/es/user--filled/20';
+import SettingsIcon from '@carbon/icons/es/settings/20';
+import HelpIcon from '@carbon/icons/es/help/20';
+import NotificationIcon from '@carbon/icons/es/notification/20';
+import LaunchIcon from '@carbon/icons/es/launch/16';
+import DashboardIcon from '@carbon/icons/es/template/16';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -26,7 +41,11 @@ import { NotificationsComponent } from './notifications/notifications.component'
     AppRoutingModule,
     SharedModule,
     SimplebarAngularModule,
-    RouterModule
+    RouterModule,
+    UIShellModule,
+    IconModule,
+    ThemeModule,
+    DialogModule
   ],
   declarations: [
     AboutComponent,
@@ -40,4 +59,15 @@ import { NotificationsComponent } from './notifications/notifications.component'
   ],
   exports: [NavigationComponent, BreadcrumbsComponent]
 })
-export class NavigationModule {}
+export class NavigationModule {
+  constructor(private iconService: IconService) {
+    this.iconService.registerAll([
+      UserFilledIcon,
+      SettingsIcon,
+      HelpIcon,
+      NotificationIcon,
+      LaunchIcon,
+      DashboardIcon
+    ]);
+  }
+}
\ No newline at end of file

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 2ef529e142fdbe4e49859ee8e798b0fa706d34cd..18a354fbdfb4ef18be2c68d5b585787ef9b7d7b1 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,9 +1,24 @@
 <div class="cd-navbar-main">
+<cds-header name="Ceph Dashboard">
+  <cds-hamburger (click)="showMenuSidebar = !showMenuSidebar"></cds-hamburger>
+  <cds-header-navigation>
+    <cd-language-selector class="cd-navbar"></cd-language-selector>
+  </cds-header-navigation>
+  <cds-header-global>
+    <cds-header-action>
+      <cd-notifications class="cd-navbar" (click)="toggleRightSidebar()"></cd-notifications>
+    </cds-header-action>
+      <cds-header-action><cd-dashboard-help class="cd-navbar"></cd-dashboard-help></cds-header-action>
+    <cds-header-action><cd-administration class="cd-navbar"></cd-administration></cds-header-action>
+    <cds-header-action><cd-identity class="cd-navbar"></cd-identity></cds-header-action>
+  </cds-header-global>
+</cds-header>
+
   <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
   <cd-telemetry-notification></cd-telemetry-notification>
   <cd-motd></cd-motd>
   <cd-notifications-sidebar></cd-notifications-sidebar>
-  <div class="cd-navbar-top">
+  <!-- <div class="cd-navbar-top">
     <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
       <button class="btn btn-link py-0"
               (click)="showMenuSidebar = !showMenuSidebar"
@@ -59,7 +74,7 @@
         </ul>
       </div>
     </nav>
-  </div>
+  </div> -->
 
   <div class="wrapper">
     <!-- Content -->
@@ -98,7 +113,7 @@
     </li>
   </ng-template>
 
-  <ng-template #cd_menu>
+  <ng-template #cd_menu2>
     <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
       <!-- Dashboard -->
       <li routerLinkActive="active"
@@ -416,12 +431,92 @@
           <li routerLinkActive="active"
               class="tc_submenuitem tc_submenuitem_admin_configuration"
               *ngIf="permissions.configOpt.read">
-            <a i18n
-               routerLink="/configuration">Configuration</a>
-          </li>
-        </ul>
-      </li>
-    </ng-container>
+              <a i18n
+              routerLink="/configuration">Configuration</a>
+            </li>
+          </ul>
+        </li>
+      </ng-container>
+    </ng-template>
+    
+  <ng-template #cd_menu>
+    <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
+    <div cdsTheme="theme">
+      <cds-sidenav>
+        <!-- Dashboard -->
+        <cds-sidenav-item routerLinkActive="active" routerLink="/dashboard">
+          <span i18n>
+            <svg cdsIcon="template" icon size="16"></svg>
+            Dashboard</span>
+        </cds-sidenav-item>
+        <!-- Multi-cluster Dashboard -->
+        <cds-sidenav-item routerLinkActive="active" (click)="toggleSubMenu('multiCluster')">
+          <span i18n>
+            <svg cdsIcon="template" icon size="16"></svg>
+            Multi-Cluster</span>
+        </cds-sidenav-item>
+        <!-- Cluster -->
+        <cds-sidenav-menu title="Cluster" *ngIf="permissions.hosts.read || permissions.monitor.read ||
+        permissions.osd.read || permissions.pool.read">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/pool" [useRouter]="true" *ngIf="permissions.pool.read"><span i18n >Pools</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/hosts" [useRouter]="true" *ngIf="permissions.hosts.read"><span i18n >Hosts</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/osd" [useRouter]="true" *ngIf="permissions.osd.read"><span i18n >OSDs</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/inventory" [useRouter]="true" *ngIf="permissions.hosts.read"><span i18n >Physical Disks</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/crush-map" [useRouter]="true" *ngIf="permissions.osd.read"><span i18n>CRUSH Map</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/monitor" [useRouter]="true" *ngIf="permissions.monitor.read"><span i18n >Monitors</span></cds-sidenav-item>
+        </cds-sidenav-menu>
+        <!-- Block Storage -->
+        <cds-sidenav-menu title="Block" *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read|| permissions.iscsi.read) && (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/block/rbd" [useRouter]="true" *ngIf="permissions.rbdImage.read && enabledFeature.rbd"><span i18n>Images</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/block/mirroring" [useRouter]="true" *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring"><span i18n>Mirroring
+            <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
+                      class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
+              <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
+                      class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
+          </span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/block/iscsi" [useRouter]="true" *ngIf="permissions.iscsi.read && enabledFeature.iscsi"><span i18n>iSCSI</span></cds-sidenav-item>
+        </cds-sidenav-menu>
+        <!-- Object Storage -->
+        <cds-sidenav-menu title="Object" *ngIf="permissions.rgw.read && enabledFeature.rgw">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/rgw/overview" [userouter]="true"><span i18n>Overview</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/rgw/bucket" [userouter]="true"><span i18n>Buckets</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/rgw/user" [userouter]="true"><span i18n>Users</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/rgw/multisite" [userouter]="true"><span i18n>Multi-site</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/rgw/daemon" [userouter]="true"><span i18n>Gateways</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/nfs" [useRouter]="true" *ngIf="permissions.nfs.read && enabledFeature.nfs"><span i18n>NFS</span></cds-sidenav-item>
+        </cds-sidenav-menu>
+        <!-- Filesystem -->
+        <cds-sidenav-menu title="File" *ngIf="permissions.nfs.read && enabledFeature.nfs || permissions.cephfs.read && enabledFeature.cephfs">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/cephfs" [useRouter]="true" *ngIf="permissions.cephfs.read && enabledFeature.cephfs"><span i18n>File Systems</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/nfs" [useRouter]="true" *ngIf="permissions.nfs.read && enabledFeature.nfs"><span i18n>NFS</span></cds-sidenav-item>
+        </cds-sidenav-menu>
+        <!-- Observability -->
+        <cds-sidenav-menu title="Observability" *ngIf="permissions.log.read || permissions.prometheus.read">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/logs" [useRouter]="true" *ngIf="permissions.log.read"><span i18n>Logs</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/monitoring" [useRouter]="true" *ngIf="permissions.log.read"><span i18n>
+            <ng-container>Alerts</ng-container>
+                <small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
+                      class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
+                <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
+                      class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small>
+          </span></cds-sidenav-item>
+        </cds-sidenav-menu>
+        <!-- Administration -->
+        <cds-sidenav-menu title="Administration" *ngIf="permissions.configOpt.read || permissions.hosts.read">
+          <svg cdsIcon="fade" icon size="16"></svg>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/services/" [useRouter]="true" *ngIf="permissions.hosts.read"><span i18n>Services</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/upgrade" [useRouter]="true" *ngIf="permissions.configOpt.read"><span i18n>Upgrade</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/ceph-users" [useRouter]="true" *ngIf="permissions.configOpt.read"><span i18n>Ceph Users</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/mgr-modules" [useRouter]="true" *ngIf="permissions.configOpt.read"><span i18n>Manager Modules</span></cds-sidenav-item>
+          <cds-sidenav-item routerLinkActive="active" routerLink="/configuration" [useRouter]="true" *ngIf="permissions.configOpt.read"><span i18n>Configuration</span></cds-sidenav-item>
+        </cds-sidenav-menu>
+      </cds-sidenav>      
+    </div>
+  </ng-container>
   </ng-template>
-
-</div>
+</div>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
index f5eae4f890d0a7173d6c751f2748496128ffbc8c..edadc7a7203c5e7e13bf033a848574f516db5e76 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
@@ -2,10 +2,10 @@
    title="Tasks and Notifications"
    [ngClass]="{ 'running': hasRunningTasks }"
    (click)="toggleSidebar()">
-  <i [ngClass]="[icons.bell]"></i>
+   <svg cdsIcon="notification" size="20" title="notification"></svg>
   <span class="dot"
         *ngIf="hasNotifications">
   </span>
   <span class="d-md-none"
         i18n>Tasks and Notifications</span>
-</a>
+</a>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index d6943b0c71a7d62fee002f2852354064cdc59262..dd01f59b45c3a67b568700f05ce0d19eca47ebf4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -15,6 +15,7 @@ import {
 import { ClickOutsideModule } from 'ng-click-outside';
 import { NgChartsModule } from 'ng2-charts';
 import { SimplebarAngularModule } from 'simplebar-angular';
+import { DropdownModule, UIShellModule, ButtonModule } from 'carbon-components-angular';
 
 import { MotdComponent } from '~/app/shared/components/motd/motd.component';
 import { DirectivesModule } from '../directives/directives.module';
@@ -76,7 +77,10 @@ import { UpgradableComponent } from './upgradable/upgradable.component';
     SimplebarAngularModule,
     RouterModule,
     NgbDatepickerModule,
-    NgbTimepickerModule
+    NgbTimepickerModule,
+    DropdownModule,
+    UIShellModule,
+    ButtonModule
   ],
   declarations: [
     SparklineComponent,
@@ -158,4 +162,4 @@ import { UpgradableComponent } from './upgradable/upgradable.component';
     UpgradableComponent
   ]
 })
-export class ComponentsModule {}
+export class ComponentsModule {}
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 484756d40256c07480b5a9f4db2e0e7c73067ec6..c580d102a6e95f69bd33ee3adf4308084c12731a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -1,4 +1,16 @@
 /* You can add global styles to this file, and also import other style files */
+/*** CARBON START ****/
+
+@use "@carbon/styles/scss/config" with ($font-path: "~@ibm/plex",
+  $flex-grid-columns: 16);
+@use '@carbon/themes/scss/themes' as t;
+@use "@carbon/styles";
+@use '@carbon/themes';
+// :root {
+//   @include themes.theme(t.$g90);
+// }
+
+/*** CARBON START ****/
 @use './src/styles/defaults' as *;
 
 // Angular2-Tree Component
@@ -243,4 +255,4 @@ formly-form {
 // Overriding legend css due to change in bootstrap v5 and setting it to none;
 legend {
   float: none;
-}
+}
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/typings.d.ts b/src/pybind/mgr/dashboard/frontend/src/typings.d.ts
index ef5c7bd620579296a1290b1a0b04c96d72e57bc6..0ca84068d295d6a1cc6ccc7e02e01fd663286d59 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/typings.d.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/typings.d.ts
@@ -3,3 +3,5 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+
+declare module '@carbon/icons/*';