From 3f63dbb00ad597dba141edb05854069b25e89c7a Mon Sep 17 00:00:00 2001 From: Ivo Almeida Date: Wed, 15 May 2024 09:42:47 +0100 Subject: [PATCH] mgr/dashboard: carbon initial setup --- src/pybind/mgr/dashboard/frontend/.nvmrc | 1 + .../mgr/dashboard/frontend/package-lock.json | 244 ++++++++++++++++++ .../mgr/dashboard/frontend/package.json | 4 + .../administration.component.html | 17 +- .../dashboard-help.component.html | 29 ++- .../identity/identity.component.html | 18 +- .../app/core/navigation/navigation.module.ts | 34 ++- .../navigation/navigation.component.html | 117 ++++++++- .../notifications.component.html | 4 +- .../shared/components/components.module.ts | 8 +- .../mgr/dashboard/frontend/src/styles.scss | 14 +- .../mgr/dashboard/frontend/src/typings.d.ts | 2 + 12 files changed, 465 insertions(+), 27 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/.nvmrc diff --git a/src/pybind/mgr/dashboard/frontend/.nvmrc b/src/pybind/mgr/dashboard/frontend/.nvmrc new file mode 100644 index 0000000000000..9a2a0e219c9b2 --- /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 f3e393d852345..08726ef00f259 100644 --- 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 f72dbdbe4125b..2856af154fb66 100644 --- 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 eda1e83be546d..e016f6e59ce4c 100644 --- 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 @@ -
- + Dashboard Settings @@ -20,4 +20,15 @@ routerLink="/telemetry" i18n>Telemetry configuration
- + --> + + + User management + Telemetry configuration + + + + + Dashboard Settings + \ 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 34ff79a115e8d..0a31a6c132d82 100644 --- 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 @@ -
- + Help @@ -29,4 +29,27 @@ (click)="openFeedbackModal()" i18n>Report an issue...
- + --> + + + Documentation + API + + About + Report an issue... + + + + + Help + \ 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 61e0e0527fe63..2343e24c82b34 100644 --- 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 @@ -
- + Logged in user @@ -25,4 +25,16 @@ Sign out
- + --> + + Logged in user + Signed in as{{ username }} + Change password + Sign out + + + + Logged in user + \ 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 c8d2a9d9caba6..f859c23cfa212 100644 --- 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 2ef529e142fdb..18a354fbdfb4e 100644 --- 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 @@
+ + + + + + + + + + + + + + + -
+
@@ -98,7 +113,7 @@ - +
  • - Configuration -
    • - - -     + Configuration + + + + +     + + + +
    + + + + + + Dashboard + + + + + + Multi-Cluster + + + + + Pools + Hosts + OSDs + Physical Disks + CRUSH Map + Monitors + + + + + Images + Mirroring + {{ summaryData?.rbd_mirroring?.warnings }} + {{ summaryData?.rbd_mirroring?.errors }} + + iSCSI + + + + + Overview + Buckets + Users + Multi-site + Gateways + NFS + + + + + File Systems + NFS + + + + + Logs + + Alerts + {{ prometheusAlertService.activeCriticalAlerts }} + {{ prometheusAlertService.activeWarningAlerts }} + + + + + + Services + Upgrade + Ceph Users + Manager Modules + Configuration + + +
    +     - -
    +
    \ 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 f5eae4f890d0a..edadc7a7203c5 100644 --- 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()"> - + Tasks and Notifications - + \ 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 d6943b0c71a7d..dd01f59b45c3a 100644 --- 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 484756d40256c..c580d102a6e95 100644 --- 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 ef5c7bd620579..0ca84068d295d 100644 --- 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/*'; -- 2.39.5