From: Volker Theile Date: Fri, 16 Jul 2021 12:50:58 +0000 (+0200) Subject: mgr/dashboard: Downstream branding X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=e332b446f273ba9bcb65b261e009e0ced7611301;p=ceph.git mgr/dashboard: Downstream branding Adds the downstream branding to the ceph dashboard. - New sign in page - New about dialog - Changed color scheme - Replaced logos Update on 04.09.2020 - Fixed bz:1175169, bz:1175161 Update on 25.09.2020 - Fixed bz:1175120 Signed-off-by: Sebastian Krah (cherry picked from commit 7563f3305a12f155c5d171e93434f1372b977ae9) Conflicts: src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss --- diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json index 3a3dac350ac..4b71dbe910d 100644 --- a/src/pybind/mgr/dashboard/frontend/angular.json +++ b/src/pybind/mgr/dashboard/frontend/angular.json @@ -81,10 +81,30 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, + "index": { + "input": "src/index.brand.html", + "output": "index.html" + }, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" + }, + { + "replace": "src/app/core/layouts/login-layout/login-layout.component.html", + "with": "src/app/core/layouts/login-layout/login-layout.component.brand.html" + }, + { + "replace": "src/app/core/auth/login/login.component.html", + "with": "src/app/core/auth/login/login.component.brand.html" + }, + { + "replace": "src/app/core/navigation/navigation/navigation.component.html", + "with": "src/app/core/navigation/navigation/navigation.component.brand.html" + }, + { + "replace": "src/app/core/navigation/about/about.component.html", + "with": "src/app/core/navigation/about/about.component.brand.html" } ] }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html new file mode 100644 index 00000000000..5e160b4ffd8 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html @@ -0,0 +1,52 @@ +

Login

+ +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html new file mode 100644 index 00000000000..1c0914f96d7 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html @@ -0,0 +1,54 @@ +

+ +

SUSE Enterprise Storage

+ + AN INTELLIGENT SOFTWARE-DEFINED STORAGE SOLUTION, POWERED BY CEPH TECHNOLOGY, + WHICH ENABLES YOU TO TRANSFORM YOUR ENTERPRISE STORAGE INFRASTRUCTURE. + + + + Providing IT organizations with a simple to manage, agile infrastructure with increased speed of delivery, + durability and reliability. Accelerate innovation, reduce costs and alleviate proprietary hardware lock-in + by transforming your enterprise storage infrastructure with a truly open, and unified intelligent + software-defined storage solution. + + +

+ +

+ + +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html new file mode 100644 index 00000000000..0a21d4599eb --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html @@ -0,0 +1,60 @@ + + + + +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html new file mode 100644 index 00000000000..06ce35387b9 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html @@ -0,0 +1,270 @@ + + + + + + +

+ + + + +

+ +

+ + +

+ +

+ + + + + +

+ + Dashboard + + +

+ + +

+ +

+ Hosts +
+ Inventory +
+ Monitors +
+ Services +
+ OSDs +
+ Configuration +
+ CRUSH map +
+ Manager modules +
+ Logs +
+ + Monitoring + {{ prometheusAlertService.alerts.length }} + +

+ + +

+ Pools +

+ + +

+ Images +
+ + Mirroring + {{ summaryData?.rbd_mirroring?.warnings }} + {{ summaryData?.rbd_mirroring?.errors }} + +
+ iSCSI +

+ + +

+ NFS +

+ + +

+ Filesystems +

+ + +

+ +

+ Daemons +
+ Users +
+ Buckets +

+ + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts index 7c3bf24dd5d..1198fdeb3fe 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts @@ -22,13 +22,13 @@ describe('DocService', () => { it('should return full URL', () => { expect(service.urlGenerator('iscsi', 'foo')).toBe( - 'https://docs.ceph.com/en/foo/mgr/dashboard/#enabling-iscsi-management' + 'https://documentation.suse.com/ses/foo/single-html/mgr/dashboard/#enabling-iscsi-management' ); }); it('should return latest version URL for master', () => { expect(service.urlGenerator('orch', 'master')).toBe( - 'https://docs.ceph.com/en/latest/mgr/orchestrator' + 'https://documentation.suse.com/ses/master/single-html/mgr/orchestrator' ); }); @@ -66,7 +66,7 @@ describe('DocService', () => { nextSummary('foo'); expect(result).toEqual( - 'https://docs.ceph.com/en/foo/mgr/dashboard/#enabling-prometheus-alerting' + 'https://documentation.suse.com/ses/foo/single-html/mgr/dashboard/#enabling-prometheus-alerting' ); expect(i).toBe(1); expect(subscriber.closed).toBe(true); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts index 4cbb4cf185b..03d6421a87f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts @@ -23,9 +23,8 @@ export class DocService { }); } - urlGenerator(section: string, release = 'master'): string { - const docVersion = release === 'master' ? 'latest' : release; - const domain = `https://docs.ceph.com/en/${docVersion}/`; + urlGenerator(section: string, release = '7'): string { + const domain = `https://documentation.suse.com/ses/${release}/single-html/`; const domainCeph = `https://ceph.io/`; const sections = { diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png new file mode 100644 index 00000000000..5b8a8805c4a Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-500.png b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-500.png new file mode 100644 index 00000000000..a721946dd79 Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_Green-pos_sRGB-500.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_White-neg_sRGB-250.png b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_White-neg_sRGB-250.png new file mode 100644 index 00000000000..09a3fdd080c Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Chameleon_L_White-neg_sRGB-250.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB-250.png b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB-250.png new file mode 100644 index 00000000000..daabb08b165 Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB-250.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB.svg b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB.svg new file mode 100644 index 00000000000..04eb0996481 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-hor_L_White-neg_sRGB.svg @@ -0,0 +1,70 @@ + + diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-vert_L_Green-pos_sRGB-500.png b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-vert_L_Green-pos_sRGB-500.png new file mode 100644 index 00000000000..121ac86ab2b Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/SUSE_Logo-vert_L_Green-pos_sRGB-500.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Light.ttf b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Light.ttf new file mode 100644 index 00000000000..3e981fb370e Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Light.ttf differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Medium.ttf b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Medium.ttf new file mode 100644 index 00000000000..7a2645baf67 Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Medium.ttf differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Regular.ttf b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Regular.ttf new file mode 100644 index 00000000000..0ac4520a54e Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/WorkSans-Regular.ttf differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/apple-touch-icon.png b/src/pybind/mgr/dashboard/frontend/src/assets/apple-touch-icon.png new file mode 100644 index 00000000000..b298d51e337 Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/apple-touch-icon.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/favicon.png b/src/pybind/mgr/dashboard/frontend/src/assets/favicon.png new file mode 100644 index 00000000000..2925c2dbc45 Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/favicon.png differ diff --git a/src/pybind/mgr/dashboard/frontend/src/index.brand.html b/src/pybind/mgr/dashboard/frontend/src/index.brand.html new file mode 100644 index 00000000000..bf9e4742120 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/index.brand.html @@ -0,0 +1,30 @@ + + + + + SUSE Enterprise Storage + + + + + + + + + +

JavaScript required!

A browser with JavaScript enabled is required in order to use this service.

When using Internet Explorer, please check your security settings and add this address to your trusted sites.

+ + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss index 2fbea9824ac..2b075349e12 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss @@ -2,3 +2,385 @@ Custom styles, third-party libraries, frameworks, design systems, ... */ +@import 'variables'; + +@font-face { + font-family: 'WorkSansLight'; + src: url('assets/WorkSans-Light.ttf') format('truetype'); +} +@font-face { + font-family: 'WorkSansMedium'; + src: url('assets/WorkSans-Medium.ttf') format('truetype'); +} +@font-face { + font-family: 'WorkSansRegular'; + src: url('assets/WorkSans-Regular.ttf') format('truetype'); +} + +/* Body */ +body { + font-family: 'WorkSansRegular', 'Verdana', Helvetica, Arial, sans-serif; +} + +/* Header */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'WorkSansMedium', 'Verdana', Helvetica, Arial, sans-serif; +} +.subheader { + font-family: 'WorkSansLight', 'Verdana', Helvetica, Arial, sans-serif; +} + +/* Button */ +.btn-primary, +.btn-secondary { + background-color: $color-primary !important; + border-color: $color-primary !important; +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary, +.btn-secondary:hover, +.btn-secondary:focus, +.btn-secondary:active, +.btn-secondary.active, +.open .dropdown-toggle.btn-secondary { + background-color: lighten($color-primary, 10) !important; + border-color: lighten($color-primary, 10) !important; +} +.btn-secondary:focus { + box-shadow: 0 0 0 0.2rem rgba($color-primary, 0.5) !important; +} +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary, +.btn-secondary:active, +.btn-secondary.active, +.open .dropdown-toggle.btn-secondary { + &:hover, + &:focus { + background-color: lighten($color-primary, 10) !important; + border-color: lighten($color-primary, 10) !important; + } +} +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active, +.btn-secondary.disabled, +.btn-secondary[disabled], +fieldset[disabled] .btn-secondary, +.btn-secondary.disabled:hover, +.btn-secondary[disabled]:hover, +fieldset[disabled] .btn-secondary:hover, +.btn-secondary.disabled:focus, +.btn-secondary[disabled]:focus, +fieldset[disabled] .btn-secondary:focus, +.btn-secondary.disabled:active, +.btn-secondary[disabled]:active, +fieldset[disabled] .btn-secondary:active, +.btn-secondary.disabled.active, +.btn-secondary[disabled].active, +fieldset[disabled] .btn-secondary.active { + background-color: $color-primary !important; + border-color: $color-primary !important; +} + +/* Icons */ +.ceph-icon { + background: { + image: url('assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png'); + clip: padding-box; + size: contain; + repeat: no-repeat; + } + padding: 15px; + margin-right: 1em; +} + +/* Login */ +.login-suse { + font-family: 'WorkSansRegular', 'Verdana', Helvetica, Arial, sans-serif; + color: $color-soft-gray; + background-color: $color-login-background; + width: 100%; + margin: 0; + + header { + margin-bottom: 30px; + background-color: $color-secondary; + + .row { + margin: 0; + + @media screen and (max-width: $screen-sm-max) { + margin-left: -15px; + } + } + + .navbar { + border: 0; + margin: 0; + padding: 0 12px; + + .navbar-brand { + font-size: 2rem; + line-height: 2.5rem; + height: 60px; + padding: 15px 15px; + + span { + @media screen and (max-width: $screen-xs-max) { + display: none; + } + } + } + + .form-inline { + .dropdown-toggle { + display: block; + border: 0; + padding: 21px 15px; + + &:hover, + &:focus { + color: $color-black; + background-color: $color-primary; + text-decoration: none; + } + + @media screen and (max-width: $screen-sm-max) { + margin-left: 15px; + } + } + + .dropdown-menu { + @media screen and (max-width: $screen-sm-max) { + background-color: $color-white; + } + } + } + } + + cd-language-selector .form-control { + background-color: transparent; + border: 0; + padding: 10px 0; + } + } + + section { + display: inline-flex; + width: 100%; + min-height: 100vh; + margin: -90px auto -100px; + + h1 { + margin-bottom: 3rem; + font-size: 4rem; + color: $color-primary; + } + + p { + font-size: 1.2rem; + } + + .subheader { + display: block; + margin-bottom: 1rem; + font-size: 1.4rem; + font-weight: bold; + } + + h2 { + margin: 2.5rem 0; + font-size: 2.5rem; + } + + .form-group { + border-left: 0; + background-color: $color-login-background; + + &:focus-within { + border-left: 0; + } + + input { + background-color: $color-white; + border-color: $color-white; + color: $body-color; + font-size: 13px; + height: 2.5rem; + + &:focus { + border-color: rgba($color-primary, 0.8); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba($color-primary, 0.5); + outline: 0; + } + } + } + + .btn-password { + color: $body-color; + border-left: 1px solid $body-color; + background-color: $color-white; + + &:hover { + color: $color-white; + background-color: $color-secondary; + } + + &:focus { + color: $body-color; + background-color: $color-white; + border-color: rgba($color-primary, 0.8); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba($color-primary, 0.5); + outline: 0; + } + } + } + + footer { + margin-top: 30px; + height: 70px; + padding-top: 23px; + border-bottom: 16px solid $color-primary; + + .footer-logo { + width: 50px; + margin-top: -16px; + } + + .container { + padding-bottom: 10px; + } + } +} + +/* About */ +.suse-logo { + width: 140px; + margin-bottom: 1.5rem; +} + +.modal-content { + overflow: hidden; +} + +.modal-header, +.modal-body, +.modal-footer { + z-index: 1; +} + +.modal-footer { + position: relative; +} + +.green-background-1, +.green-background-2 { + width: 140%; + height: 400px; + left: -20%; + position: absolute; +} + +.green-background-1 { + background-color: $color-green-contrast-1; + bottom: -240px; + transform: rotate(-11deg); +} + +.green-background-2 { + background-color: $color-green-contrast-2; + bottom: -310px; + transform: rotate(-6deg); +} + +// Dashboard + +.dashboard { + background-color: #ffffff !important; + + .card { + background-color: #f5f5f5; + } +} + +// Navigation +@mixin suse-nav-link { + .nav-link, + a { + background-color: #f5f5f5 !important; + border-left: 5px solid transparent !important; + color: $body-color !important; + margin: 0 16px 0 0 !important; + padding: 8px 0 8px 21px !important; + + &:hover { + background-color: transparent !important; + border-left: 5px solid $color-primary !important; + } + } +} +@mixin suse-nav-link-active { + background-color: $color-primary !important; + border-radius: 0 2px 2px 0; + color: #ffffff !important; + + &:hover { + background-color: $color-primary !important; + border-left: 5px solid transparent !important; + } +} + +nav#sidebar { + background-color: #f5f5f5 !important; + padding-top: 1.5rem; + + .nav-item ul { + background-color: #f5f5f5 !important; + + @include suse-nav-link; + + a { + padding: 8px 0 8px 33px !important; + } + + .active a { + @include suse-nav-link-active; + } + } + + @include suse-nav-link; + .active .nav-link { + @include suse-nav-link-active; + } +} + +.nav-item.active .fa-heartbeat.health-ok { + color: #ffffff !important; +} + +// Logo + +.cd-navbar-top .cd-navbar-brand .navbar-brand > img { + height: 29px !important; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss index 1df7a90845c..27aa1b99d61 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss @@ -14,4 +14,23 @@ Example: ) ); */ -@forward '../defaults/bootstrap-defaults'; +@import '../defaults/bootstrap-defaults'; + +$body-color: #212529; + +$color-primary: #30ba78; +$color-secondary: #0c322c; +$color-accent: #ff6a52; + +$color-green-contrast-1: #e4f6ee; +$color-green-contrast-2: #139448; + +$color-soft-gray: #f2f2f2; +$color-white: #ffffff; + +$button-radius: 4px; + +$color-login-background: #0c322c; + +$breakpoint-mobile: 768px; +$breakpoint-mobile-max: calc(#{$breakpoint-mobile} - 1px);