From 7310e15a9bb704c3b214b9b5373807b1167df009 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Alfonso=20Mart=C3=ADnez?= Date: Fri, 14 May 2021 17:01:17 +0200 Subject: [PATCH] mgr/dashboard: get SASS vars values in TS through CssHelper. MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Now SASS vendor variables' values can be retrieved by var name via CssHelper. We were relying on the angular webpack config that has changed in the latest v10.x and v11. See: https://github.com/angular/angular-cli/issues/19622#issuecomment-744395101 Fixes: https://tracker.ceph.com/issues/50800 Signed-off-by: Alfonso Martínez --- .../health-pie/health-pie.component.spec.ts | 3 +- .../health-pie/health-pie.component.ts | 25 ++++++++------ .../dashboard/health/health.component.spec.ts | 4 ++- .../ceph/dashboard/health/health.component.ts | 15 ++++++--- .../rgw-user-list/rgw-user-list.component.ts | 2 +- .../workbench-layout.component.spec.ts | 3 +- .../src/app/shared/classes/cd-helper.class.ts | 2 +- .../src/app/shared/classes/css-helper.ts | 5 +++ .../src/app/shared/enum/color.enum.ts | 8 ----- .../src/app/shared/enum/health-color.enum.ts | 5 +++ .../shared/pipes/health-color.pipe.spec.ts | 33 +++++++++++++++---- .../src/app/shared/pipes/health-color.pipe.ts | 9 +++-- .../shared/services/favicon.service.spec.ts | 3 +- .../app/shared/services/favicon.service.ts | 10 +++--- .../frontend/src/app/shared/shared.module.ts | 3 +- .../mgr/dashboard/frontend/src/setupJest.ts | 6 ++++ .../mgr/dashboard/frontend/src/styles.scss | 21 ------------ .../dashboard/frontend/src/styles.scss.d.ts | 25 -------------- .../styles/defaults/_bootstrap-defaults.scss | 19 ++++++++++- .../frontend/src/styles/vendor/_index.scss | 20 +++++++++++ 20 files changed, 133 insertions(+), 88 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/classes/css-helper.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/enum/color.enum.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/styles.scss.d.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts index 783e56155d4..b87f4bfb5d6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts @@ -1,6 +1,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe'; import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe'; import { FormatterService } from '~/app/shared/services/formatter.service'; @@ -14,7 +15,7 @@ describe('HealthPieComponent', () => { configureTestBed({ schemas: [NO_ERRORS_SCHEMA], declarations: [HealthPieComponent], - providers: [DimlessBinaryPipe, DimlessPipe, FormatterService] + providers: [DimlessBinaryPipe, DimlessPipe, FormatterService, CssHelper] }); beforeEach(() => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts index 7cce5ff5f38..fc119b6e290 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts @@ -13,10 +13,10 @@ import * as Chart from 'chart.js'; import _ from 'lodash'; import { PluginServiceGlobalRegistrationAndOptions } from 'ng2-charts'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { ChartTooltip } from '~/app/shared/models/chart-tooltip'; import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe'; import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe'; -import styles from '~/styles.scss'; @Component({ selector: 'cd-health-pie', @@ -53,11 +53,11 @@ export class HealthPieComponent implements OnChanges, OnInit { colors: [ { backgroundColor: [ - styles.chartHealthColorGreen, - styles.chartHealthColorYellow, - styles.chartHealthColorOrange, - styles.chartHealthColorRed, - styles.chartHealthColorBlue + this.cssHelper.propertyValue('chart-color-green'), + this.cssHelper.propertyValue('chart-color-yellow'), + this.cssHelper.propertyValue('chart-color-orange'), + this.cssHelper.propertyValue('chart-color-red'), + this.cssHelper.propertyValue('chart-color-blue') ] } ], @@ -78,7 +78,7 @@ export class HealthPieComponent implements OnChanges, OnInit { tooltips: { enabled: true, displayColors: false, - backgroundColor: styles.chartHealthTootlipBgColor, + backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'), cornerRadius: 0, bodyFontSize: 14, bodyFontStyle: '600', @@ -105,6 +105,7 @@ export class HealthPieComponent implements OnChanges, OnInit { { id: 'center_text', beforeDraw(chart: Chart) { + const cssHelper = new CssHelper(); const defaultFontFamily = 'Helvetica Neue, Helvetica, Arial, sans-serif'; Chart.defaults.global.defaultFontFamily = defaultFontFamily; const ctx = chart.ctx; @@ -121,12 +122,12 @@ export class HealthPieComponent implements OnChanges, OnInit { ctx.textBaseline = 'middle'; ctx.font = `24px ${defaultFontFamily}`; - ctx.fillStyle = styles.chartHealthCenterTextColor; + ctx.fillStyle = cssHelper.propertyValue('chart-color-center-text'); ctx.fillText(label[0], centerX, centerY - 10); if (label.length > 1) { ctx.font = `14px ${defaultFontFamily}`; - ctx.fillStyle = styles.chartHealthCenterTextDescriptionColor; + ctx.fillStyle = cssHelper.propertyValue('chart-color-center-text-description'); ctx.fillText(label[1], centerX, centerY + 10); } ctx.restore(); @@ -134,7 +135,11 @@ export class HealthPieComponent implements OnChanges, OnInit { } ]; - constructor(private dimlessBinary: DimlessBinaryPipe, private dimless: DimlessPipe) {} + constructor( + private dimlessBinary: DimlessBinaryPipe, + private dimless: DimlessPipe, + private cssHelper: CssHelper + ) {} ngOnInit() { const getStyleTop = (tooltip: any, positionY: number) => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts index e1de5f7f596..8f671f79113 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts @@ -8,6 +8,7 @@ import { of } from 'rxjs'; import { PgCategoryService } from '~/app/ceph/shared/pg-category.service'; import { HealthService } from '~/app/shared/api/health.service'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { Permissions } from '~/app/shared/models/permissions'; import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service'; @@ -61,7 +62,8 @@ describe('HealthComponent', () => { providers: [ { provide: AuthStorageService, useValue: fakeAuthStorageService }, PgCategoryService, - RefreshIntervalService + RefreshIntervalService, + CssHelper ] }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts index 79cfd8f7e91..d90e17e1f07 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts @@ -5,6 +5,7 @@ import { Subscription } from 'rxjs'; import { PgCategoryService } from '~/app/ceph/shared/pg-category.service'; import { HealthService } from '~/app/shared/api/health.service'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { Icons } from '~/app/shared/enum/icons.enum'; import { Permissions } from '~/app/shared/models/permissions'; import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe'; @@ -15,7 +16,6 @@ import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service'; import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service'; -import styles from '~/styles.scss'; @Component({ selector: 'cd-health', @@ -32,7 +32,10 @@ export class HealthComponent implements OnInit, OnDestroy { clientStatsConfig = { colors: [ { - backgroundColor: [styles.chartHealthColorCyan, styles.chartHealthColorPurple] + backgroundColor: [ + this.cssHelper.propertyValue('chart-color-cyan'), + this.cssHelper.propertyValue('chart-color-purple') + ] } ] }; @@ -40,7 +43,10 @@ export class HealthComponent implements OnInit, OnDestroy { rawCapacityChartConfig = { colors: [ { - backgroundColor: [styles.chartHealthColorBlue, styles.chartHealthColorGray] + backgroundColor: [ + this.cssHelper.propertyValue('chart-color-blue'), + this.cssHelper.propertyValue('chart-color-gray') + ] } ] }; @@ -58,7 +64,8 @@ export class HealthComponent implements OnInit, OnDestroy { private featureToggles: FeatureTogglesService, private refreshIntervalService: RefreshIntervalService, private dimlessBinary: DimlessBinaryPipe, - private dimless: DimlessPipe + private dimless: DimlessPipe, + private cssHelper: CssHelper ) { this.permissions = this.authStorageService.getPermissions(); this.enabledFeature$ = this.featureToggles.get(); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts index a2eacd9b9aa..e7f47298ecf 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts @@ -1,6 +1,6 @@ import { Component, NgZone, OnInit, TemplateRef, ViewChild } from '@angular/core'; -import * as _ from 'lodash'; +import _ from 'lodash'; import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs'; import { RgwUserService } from '~/app/shared/api/rgw-user.service'; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts index 8168917dd29..faf8c9cdf94 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts @@ -6,6 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing'; import { ToastrModule } from 'ngx-toastr'; import { RbdService } from '~/app/shared/api/rbd.service'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { PipesModule } from '~/app/shared/pipes/pipes.module'; import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; import { configureTestBed } from '~/testing/unit-test-helper'; @@ -19,7 +20,7 @@ describe('WorkbenchLayoutComponent', () => { imports: [RouterTestingModule, ToastrModule.forRoot(), PipesModule, HttpClientTestingModule], declarations: [WorkbenchLayoutComponent], schemas: [NO_ERRORS_SCHEMA], - providers: [AuthStorageService, RbdService] + providers: [AuthStorageService, CssHelper, RbdService] }); beforeEach(() => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/cd-helper.class.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/cd-helper.class.ts index 92e955ee4bd..5c872b42fd8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/cd-helper.class.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/cd-helper.class.ts @@ -1,4 +1,4 @@ -import * as _ from 'lodash'; +import _ from 'lodash'; export class CdHelperClass { /** diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/css-helper.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/css-helper.ts new file mode 100644 index 00000000000..e5caef761d4 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/classes/css-helper.ts @@ -0,0 +1,5 @@ +export class CssHelper { + propertyValue(propertyName: string): string { + return getComputedStyle(document.body).getPropertyValue(`--${propertyName}`); + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/color.enum.ts deleted file mode 100644 index 832eaf2bdc1..00000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/color.enum.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styles from '~/styles.scss'; - -export class Color { - // HEALTH - static HEALTH_ERR = styles.healthColorError; - static HEALTH_WARN = styles.healthColorWarning; - static HEALTH_OK = styles.healthColorHealthy; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts new file mode 100644 index 00000000000..04239422516 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts @@ -0,0 +1,5 @@ +export enum HealthColor { + HEALTH_ERR = 'health-color-error', + HEALTH_WARN = 'health-color-warning', + HEALTH_OK = 'health-color-healthy' +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts index 0039cf90eb7..f5e937ce377 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts @@ -1,23 +1,44 @@ -import styles from '~/styles.scss'; -import { HealthColorPipe } from './health-color.pipe'; +import { CssHelper } from '~/app/shared/classes/css-helper'; +import { HealthColorPipe } from '~/app/shared/pipes/health-color.pipe'; + +class CssHelperStub extends CssHelper { + propertyValue(propertyName: string) { + if (propertyName === 'health-color-healthy') { + return 'fakeGreen'; + } + if (propertyName === 'health-color-warning') { + return 'fakeOrange'; + } + if (propertyName === 'health-color-error') { + return 'fakeRed'; + } + return ''; + } +} describe('HealthColorPipe', () => { - const pipe = new HealthColorPipe(); + const pipe = new HealthColorPipe(new CssHelperStub()); it('create an instance', () => { expect(pipe).toBeTruthy(); }); it('transforms "HEALTH_OK"', () => { - expect(pipe.transform('HEALTH_OK')).toEqual({ color: styles.healthColorHealthy }); + expect(pipe.transform('HEALTH_OK')).toEqual({ + color: 'fakeGreen' + }); }); it('transforms "HEALTH_WARN"', () => { - expect(pipe.transform('HEALTH_WARN')).toEqual({ color: styles.healthColorWarning }); + expect(pipe.transform('HEALTH_WARN')).toEqual({ + color: 'fakeOrange' + }); }); it('transforms "HEALTH_ERR"', () => { - expect(pipe.transform('HEALTH_ERR')).toEqual({ color: styles.healthColorError }); + expect(pipe.transform('HEALTH_ERR')).toEqual({ + color: 'fakeRed' + }); }); it('transforms others', () => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.ts index 7da99de4b29..d046fa15a79 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.ts @@ -1,12 +1,17 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { Color } from '../enum/color.enum'; +import { CssHelper } from '~/app/shared/classes/css-helper'; +import { HealthColor } from '~/app/shared/enum/health-color.enum'; @Pipe({ name: 'healthColor' }) export class HealthColorPipe implements PipeTransform { + constructor(private cssHelper: CssHelper) {} + transform(value: any): any { - return Color[value] ? { color: Color[value] } : null; + return Object.keys(HealthColor).includes(value as HealthColor) + ? { color: this.cssHelper.propertyValue(HealthColor[value]) } + : null; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.spec.ts index f55bad43835..0c9e619ea1e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.spec.ts @@ -1,6 +1,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { configureTestBed } from '~/testing/unit-test-helper'; import { FaviconService } from './favicon.service'; @@ -9,7 +10,7 @@ describe('FaviconService', () => { configureTestBed({ imports: [HttpClientTestingModule], - providers: [FaviconService] + providers: [FaviconService, CssHelper] }); beforeEach(() => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.ts index adec0664f40..87ce8fcad91 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.ts @@ -3,7 +3,8 @@ import { Inject, Injectable, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs'; -import { Color } from '../enum/color.enum'; +import { CssHelper } from '~/app/shared/classes/css-helper'; +import { HealthColor } from '~/app/shared/enum/health-color.enum'; import { SummaryService } from './summary.service'; @Injectable() @@ -14,7 +15,8 @@ export class FaviconService implements OnDestroy { constructor( @Inject(DOCUMENT) private document: HTMLDocument, - private summaryService: SummaryService + private summaryService: SummaryService, + private cssHelper: CssHelper ) {} init() { @@ -48,7 +50,7 @@ export class FaviconService implements OnDestroy { // Draw Original Favicon as Background context.drawImage(img, 0, 0, faviconSize, faviconSize); - if (Color[status]) { + if (Object.keys(HealthColor).includes(status as HealthColor)) { // Cut notification circle area context.save(); context.globalCompositeOperation = 'destination-out'; @@ -61,7 +63,7 @@ export class FaviconService implements OnDestroy { context.beginPath(); context.arc(canvas.width - radius, radius, radius, 0, 2 * Math.PI); - context.fillStyle = Color[status]; + context.fillStyle = this.cssHelper.propertyValue(HealthColor[status]); context.fill(); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts index 0bffcf749e5..905721fa445 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts @@ -1,6 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { CssHelper } from '~/app/shared/classes/css-helper'; import { ComponentsModule } from './components/components.module'; import { DataTableModule } from './datatable/datatable.module'; import { DirectivesModule } from './directives/directives.module'; @@ -13,6 +14,6 @@ import { FormatterService } from './services/formatter.service'; imports: [CommonModule, PipesModule, ComponentsModule, DataTableModule, DirectivesModule], declarations: [], exports: [ComponentsModule, PipesModule, DataTableModule, DirectivesModule], - providers: [AuthStorageService, AuthGuardService, FormatterService] + providers: [AuthStorageService, AuthGuardService, FormatterService, CssHelper] }) export class SharedModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/setupJest.ts b/src/pybind/mgr/dashboard/frontend/src/setupJest.ts index 8fc004375a2..3f76543571a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/setupJest.ts +++ b/src/pybind/mgr/dashboard/frontend/src/setupJest.ts @@ -3,3 +3,9 @@ import '@angular/localize/init'; import 'jest-preset-angular'; import './jestGlobalMocks'; + +process.on('unhandledRejection', (error) => { + const stack = error['stack'] || ''; + // Avoid potential hang on test failure when running tests in parallel. + throw `WARNING: unhandled rejection: ${error} ${stack}`; +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index b4dcf0e431e..099433d3148 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -136,24 +136,3 @@ tags-input .tags { a { cursor: pointer; } - -:export { - chartHealthCenterTextColor: #151515; - chartHealthCenterTextDescriptionColor: #72767b; - chartHealthColorBlue: #06c; - chartHealthColorCyan: #73c5c5; - chartHealthColorGray: #ededed; - chartHealthColorGreen: #7cc674; - chartHealthColorLightBlue: #519de9; - chartHealthColorLightYellow: #f9e0a2; - chartHealthColorMagenta: #009596; - chartHealthColorOrange: #ef9234; - chartHealthColorPurple: #3c3d99; - chartHealthColorRed: #c9190b; - chartHealthColorYellow: #f6d173; - chartHealthTootlipBgColor: #000; - - healthColorError: #f00; - healthColorHealthy: #0b0; - healthColorWarning: #ffa500; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss.d.ts b/src/pybind/mgr/dashboard/frontend/src/styles.scss.d.ts deleted file mode 100644 index f805807c86c..00000000000 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -export interface Styles { - chartHealthColorRed: string; - chartHealthColorBlue: string; - chartHealthColorOrange: string; - chartHealthColorYellow: string; - chartHealthColorMagenta: string; - chartHealthColorGreen: string; - chartHealthColorGray: string; - chartHealthColorLightBlue: string; - chartHealthColorLightYellow: string; - chartHealthColorCyan: string; - chartHealthColorPurple: string; - - chartHealthCenterTextColor: string; - chartHealthCenterTextDescriptionColor: string; - chartHealthTootlipBgColor: string; - - healthColorError: string; - healthColorWarning: string; - healthColorHealthy: string; -} - -export const styles: Styles; - -export default styles; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss index b1a386a803a..1e203af7c8c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss @@ -46,12 +46,29 @@ $theme-colors: ( ) !default; // Body - $body-color-bright: $light !default; $body-bg: $white !default; $body-color: $gray-900 !default; $body-bg-alt: $gray-200 !default; +// Health colors. +$health-color-error: #f00 !default; +$health-color-healthy: $green !default; +$health-color-warning: #ffa500 !default; + +// Chart colors. +$chart-color-red: #c9190b !default; +$chart-color-blue: #06c !default; +$chart-color-orange: #ef9234 !default; +$chart-color-yellow: #f6d173 !default; +$chart-color-green: #7cc674 !default; +$chart-color-gray: #ededed !default; +$chart-color-cyan: #73c5c5 !default; +$chart-color-purple: #3c3d99 !default; +$chart-color-center-text: #151515 !default; +$chart-color-center-text-description: #72767b !default; +$chart-color-tooltip-background: $black !default; + // Typography $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif, diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss index 182e69f3155..fb6d03c9e8b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss @@ -1,2 +1,22 @@ @forward 'style-overrides'; @forward 'variables'; + +@use 'sass:meta'; +@use 'variables'; + +@function custom-property-name($name) { + @return '--' + $name; +} + +@mixin define-custom-property($name, $value) { + #{custom-property-name($name)}: meta.inspect($value); +} + +:root { + // Make vendor variables accessible to JS/TS code via CSS custom property definition. + @each $key_name, $value in meta.module-variables('variables') { + @if type-of($value) != 'map' { + @include define-custom-property($key_name, $value); + } + } +} -- 2.39.5