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 783e56155d44f..b87f4bfb5d66f 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 7cce5ff5f386b..fc119b6e2904b 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 e1de5f7f59640..8f671f791132b 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 79cfd8f7e916c..d90e17e1f07d3 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 a2eacd9b9aada..e7f47298ecffb 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 8168917dd2928..faf8c9cdf9400 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 92e955ee4bd64..5c872b42fd83a 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 0000000000000..e5caef761d46e --- /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 832eaf2bdc1ec..0000000000000 --- 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 0000000000000..042394225166b --- /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 0039cf90eb773..f5e937ce37757 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 7da99de4b297b..d046fa15a79b8 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 f55bad43835b1..0c9e619ea1e74 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 adec0664f406f..87ce8fcad9163 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 0bffcf749e5cb..905721fa445c4 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 8fc004375a2d3..3f76543571a4f 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 b4dcf0e431eb8..099433d3148cc 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 f805807c86c70..0000000000000 --- 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 b1a386a803ad8..1e203af7c8c48 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 182e69f315537..fb6d03c9e8bbe 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