NOTE: Enabled TS compiler option esModuleInterop for the unit tests to pass, which is also highly recommended:
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop
This implied updating lodash & momentjs imports (unneeded ones have been removed).
Fixes: https://tracker.ceph.com/issues/47036
Signed-off-by: Alfonso Martínez <almartin@redhat.com>
"extends": "stylelint-config-sass-guidelines",
"plugins": [
"stylelint-declaration-use-variable"
- ],
+ ],
"rules": {
"function-parentheses-space-inside": null,
"indentation": null,
]
}
]
+ ],
+ "property-no-unknown": [
+ true,
+ {
+ "ignoreSelectors": [":export"]
+ }
]
- }
+ }
}
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
- "fsevents": {
- "dev": true,
- "optional": true,
- "version": "2.1.3"
- },
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
"dev": true
},
+ "harmony-reflect": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.1.tgz",
+ "integrity": "sha512-WJTeyp0JzGtHcuMsi7rw2VwtkvLa+JyfEKJCFyfcS0+CDkjQ5lHPu7zEhFZP+PDSRrEgXa5Ah0l1MbgbE41XjA==",
+ "dev": true
+ },
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"postcss": "^7.0.14"
}
},
+ "identity-obj-proxy": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+ "integrity": "sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=",
+ "dev": true,
+ "requires": {
+ "harmony-reflect": "^1.4.6"
+ }
+ },
"ieee754": {
"version": "1.1.13",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
}
},
"fsevents": {
- "dev": true,
- "optional": true,
"version": "2.1.3"
},
"glob-parent": {
}
},
"fsevents": {
- "dev": true,
- "optional": true,
"version": "2.1.3"
},
"glob-parent": {
}
},
"fsevents": {
- "dev": true,
- "optional": true,
"version": "2.1.3"
},
"glob-parent": {
},
"private": true,
"jest": {
+ "moduleNameMapper": {
+ "\\.scss$": "identity-obj-proxy"
+ },
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/src/setupJest.ts"
"cypress": "4.12.1",
"html-linter": "1.1.1",
"htmllint-cli": "0.0.7",
+ "identity-obj-proxy": "3.0.0",
"jest": "26.3.0",
"jest-canvas-mock": "2.2.0",
"jest-preset-angular": "8.2.1",
import { Injectable, NgModule } from '@angular/core';
import { ActivatedRouteSnapshot, PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CephfsListComponent } from './ceph/cephfs/cephfs-list/cephfs-list.component';
import { ConfigurationFormComponent } from './ceph/cluster/configuration/configuration-form/configuration-form.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeModel, TreeModule } from 'angular-tree-component';
-import * as _ from 'lodash';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { SharedModule } from '../../../shared/shared.module';
TreeNode,
TREE_ACTIONS
} from 'angular-tree-component';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { Icons } from '../../../shared/enum/icons.enum';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin } from 'rxjs';
import { IscsiService } from '../../../shared/api/iscsi.service';
import { AbstractControl, FormControl } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { IscsiService } from '../../../shared/api/iscsi.service';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { FormControl } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { IscsiService } from '../../../shared/api/iscsi.service';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Subscription } from 'rxjs';
import { IscsiService } from '../../../shared/api/iscsi.service';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { concat, forkJoin, Subscription } from 'rxjs';
import { last, tap } from 'rxjs/operators';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { concat, forkJoin, Observable, Subscription } from 'rxjs';
import { last } from 'rxjs/operators';
import { FormControl, ValidatorFn, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin, Observable, ReplaySubject } from 'rxjs';
import { first, switchMap } from 'rxjs/operators';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { RbdService } from '../../../shared/api/rbd.service';
import { ListWithDetails } from '../../../shared/classes/list-with-details.class';
import { Component, OnInit } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
import { forkJoin, Observable } from 'rxjs';
import { PoolService } from '../../../shared/api/pool.service';
-import * as _ from 'lodash';
-
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
+import moment from 'moment';
import { of } from 'rxjs';
import { RbdService } from '../../../shared/api/rbd.service';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
+import moment from 'moment';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { RbdService } from '../../../shared/api/rbd.service';
import { TableStatusViewCache } from '../../../shared/classes/table-status-view-cache';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbActiveModal, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
+import moment from 'moment';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
+import moment from 'moment';
import { RbdService } from '../../../shared/api/rbd.service';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
import { ChartDataSets, ChartOptions, ChartPoint, ChartType } from 'chart.js';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { ChartTooltip } from '../../../shared/models/chart-tooltip';
import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import * as _ from 'lodash';
-
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
TreeNode,
TREE_ACTIONS
} from 'angular-tree-component';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { CephfsService } from '../../../shared/api/cephfs.service';
import { ConfirmationModalComponent } from '../../../shared/components/confirmation-modal/confirmation-modal.component';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import { TreeModule } from 'angular-tree-component';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
import { Component, Input, NgZone, OnChanges, OnDestroy } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Subscription, timer } from 'rxjs';
import { CephfsService } from '../../../shared/api/cephfs.service';
import { Component, Input, OnChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Component({
selector: 'cd-configuration-details',
import { FormControl, FormGroup, ValidatorFn } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ConfigurationService } from '../../../../shared/api/configuration.service';
import { ConfigFormModel } from '../../../../shared/components/config-option/config-option.model';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
-import * as _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
import { Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { HostService } from '../../../shared/api/host.service';
import { OrchestratorService } from '../../../shared/api/orchestrator.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
-import * as _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed } from '../../../../../testing/unit-test-helper';
ViewChild
} from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Subscription } from 'rxjs';
import { OrchestratorService } from '../../../../shared/api/orchestrator.service';
import { ValidatorFn, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin } from 'rxjs';
import { MgrModuleService } from '../../../../shared/api/mgr-module.service';
import { Component } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { MonitorService } from '../../../shared/api/monitor.service';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { OsdService } from '../../../../shared/api/osd.service';
import { ActionLabelsI18n, URLVerbs } from '../../../../shared/constants/app.constants';
import { Component, Input, OnChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { OsdService } from '../../../../shared/api/osd.service';
import { Permission } from '../../../../shared/models/permissions';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../../../shared/enum/icons.enum';
import { CdTableColumnFiltersChange } from '../../../../shared/models/cd-table-column-filters-change';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { TableColumnProp } from '@swimlane/ngx-datatable';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ActionLabelsI18n } from '../../../../shared/constants/app.constants';
import { Icons } from '../../../../shared/enum/icons.enum';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed } from '../../../../../testing/unit-test-helper';
import { FormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { OsdService } from '../../../../shared/api/osd.service';
import { NotificationType } from '../../../../shared/enum/notification-type.enum';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CdTableColumnFiltersChange } from '../../../../shared/models/cd-table-column-filters-change';
import { FormatterService } from '../../../../shared/services/formatter.service';
import { FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { OrchestratorService } from '../../../../shared/api/orchestrator.service';
import { SubmitButtonComponent } from '../../../../shared/components/submit-button/submit-button.component';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { EMPTY, of } from 'rxjs';
import { Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin, Observable } from 'rxjs';
import { OrchestratorService } from '../../../../shared/api/orchestrator.service';
import { Component, Input, OnChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Component({
selector: 'cd-osd-performance-histogram',
import { RouterTestingModule } from '@angular/router/testing';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of as observableOf } from 'rxjs';
import { FormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ConfigurationService } from '../../../../shared/api/configuration.service';
import { OsdService } from '../../../../shared/api/osd.service';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { ToastrModule } from 'ngx-toastr';
import { of, throwError } from 'rxjs';
import { Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { PrometheusService } from '../../../../shared/api/prometheus.service';
import {
import { RouterTestingModule } from '@angular/router/testing';
import { NgbActiveModal, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { of } from 'rxjs';
import {
import { FormControl, Validators } from '@angular/forms';
import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { merge, Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { of } from 'rxjs';
import { configureTestBed } from '../../../../../testing/unit-test-helper';
ViewChildren
} from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, Subscription } from 'rxjs';
import { CephServiceService } from '../../../../shared/api/ceph-service.service';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed, FormHelper } from '../../../../../testing/unit-test-helper';
import { Router } from '@angular/router';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { merge, Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of as observableOf } from 'rxjs';
import { ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin } from 'rxjs';
import { MgrModuleService } from '../../../shared/api/mgr-module.service';
$canvas-height: 100%;
.chart-container {
- @each $key_name, $value in bd.$health-chart-colors {
- --color-#{$key_name}: #{$value};
- }
-
height: $canvas-height;
margin-left: auto;
margin-right: auto;
expect(component.chartConfig.dataset[0].data).toEqual(initialData);
});
- it('should set colors from css variables', () => {
- const cssVar = '--my-color';
- const cssVarColor = '#73c5c5';
- component['getCssVar'] = (name: string) => (name === cssVar ? cssVarColor : '');
- component.chartConfig.colors[0].backgroundColor = [cssVar, '#ffffff'];
- fixture.detectChanges();
-
- expect(component.chartConfig.colors[0].backgroundColor).toEqual([cssVarColor, '#ffffff']);
- });
-
describe('tooltip body', () => {
const tooltipBody = ['text: 10000'];
} from '@angular/core';
import * as Chart from 'chart.js';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { PluginServiceGlobalRegistrationAndOptions } from 'ng2-charts';
+import styles from '../../../../styles.scss';
import { ChartTooltip } from '../../../shared/models/chart-tooltip';
import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
colors: [
{
backgroundColor: [
- '--color-green',
- '--color-yellow',
- '--color-orange',
- '--color-red',
- '--color-blue'
+ styles.chartHealthColorGreen,
+ styles.chartHealthColorYellow,
+ styles.chartHealthColorOrange,
+ styles.chartHealthColorRed,
+ styles.chartHealthColorBlue
]
}
],
tooltips: {
enabled: true,
displayColors: false,
- backgroundColor: 'rgba(0,0,0,0.8)',
+ backgroundColor: styles.chartHealthTootlipBgColor,
cornerRadius: 0,
bodyFontSize: 14,
bodyFontStyle: '600',
{
id: 'center_text',
beforeDraw(chart: Chart) {
- const defaultFontColorA = '#151515';
- const defaultFontColorB = '#72767B';
const defaultFontFamily = 'Helvetica Neue, Helvetica, Arial, sans-serif';
Chart.defaults.global.defaultFontFamily = defaultFontFamily;
const ctx = chart.ctx;
ctx.textBaseline = 'middle';
ctx.font = `24px ${defaultFontFamily}`;
- ctx.fillStyle = defaultFontColorA;
+ ctx.fillStyle = styles.chartHealthCenterTextColor;
ctx.fillText(label[0], centerX, centerY - 10);
if (label.length > 1) {
ctx.font = `14px ${defaultFontFamily}`;
- ctx.fillStyle = defaultFontColorB;
+ ctx.fillStyle = styles.chartHealthCenterTextDescriptionColor;
ctx.fillText(label[1], centerX, centerY + 10);
}
ctx.restore();
_.merge(this.chartConfig, this.config);
- this.setColorsFromCssVars();
-
this.prepareFn.emit([this.chartConfig, this.data]);
}
this.setChartSliceBorderWidth();
}
- private setColorsFromCssVars() {
- this.chartConfig.colors.forEach(
- (colorEl: { backgroundColor: string[] }, colorIndex: number) => {
- colorEl.backgroundColor.forEach((bgColor: string, bgColorIndex: number) => {
- if (bgColor.startsWith('--')) {
- this.chartConfig.colors[colorIndex].backgroundColor[bgColorIndex] = this.getCssVar(
- bgColor
- );
- }
- });
- }
- );
- }
-
- private getCssVar(name: string): string {
- return getComputedStyle(document.querySelector('.chart-container')).getPropertyValue(name);
- }
-
private getChartTooltipBody(body: string[]) {
const bodySplit = body[0].split(': ');
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { of } from 'rxjs';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { Component, OnDestroy, OnInit } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Subscription } from 'rxjs';
+import styles from '../../../../styles.scss';
import { HealthService } from '../../../shared/api/health.service';
import { Icons } from '../../../shared/enum/icons.enum';
import { Permissions } from '../../../shared/models/permissions';
clientStatsConfig = {
colors: [
{
- backgroundColor: ['--color-cyan', '--color-purple']
+ backgroundColor: [styles.chartHealthColorCyan, styles.chartHealthColorPurple]
}
]
};
rawCapacityChartConfig = {
colors: [
{
- backgroundColor: ['--color-blue', '--color-gray']
+ backgroundColor: [styles.chartHealthColorBlue, styles.chartHealthColorGray]
}
]
};
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'mdsSummary'
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'mgrSummary'
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'osdSummary'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { SharedModule } from '../../../shared/shared.module';
import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormControl, NgForm, Validators } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { NfsService } from '../../../shared/api/nfs.service';
import { Icons } from '../../../shared/enum/icons.enum';
import { FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin, Observable, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, mergeMap } from 'rxjs/operators';
import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Subscription } from 'rxjs';
import { NfsService } from '../../../shared/api/nfs.service';
import { Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CrushRuleService } from '../../../shared/api/crush-rule.service';
import { CrushNodeSelectionClass } from '../../../shared/classes/crush.node.selection.class';
import { Component, Input, OnChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { PoolService } from '../../../shared/api/pool.service';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
NgbModalRef,
NgbNavModule
} from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbNav, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, Subscription } from 'rxjs';
import { CrushRuleService } from '../../../shared/api/crush-rule.service';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ConfigurationService } from '../../../shared/api/configuration.service';
import { PoolService } from '../../../shared/api/pool.service';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of as observableOf } from 'rxjs';
import { AbstractControl, AsyncValidatorFn, ValidationErrors, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin } from 'rxjs';
import { RgwBucketService } from '../../../shared/api/rgw-bucket.service';
ViewChild
} from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs';
import { RgwBucketService } from '../../../shared/api/rgw-bucket.service';
import { Component, Input, OnChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { RgwDaemonService } from '../../../shared/api/rgw-daemon.service';
import { Permission } from '../../../shared/models/permissions';
import { Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { RgwUserService } from '../../../shared/api/rgw-user.service';
import { Icons } from '../../../shared/enum/icons.enum';
import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { concat as observableConcat, forkJoin as observableForkJoin, Observable } from 'rxjs';
import { RgwUserService } from '../../../shared/api/rgw-user.service';
import { Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CephSharedModule } from './ceph-shared.module';
import { PgCategory } from './pg-category.model';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { of } from 'rxjs';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { HostService } from '../../../shared/api/host.service';
import { OsdService } from '../../../shared/api/osd.service';
import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin } from 'rxjs';
import { RoleService } from '../../../shared/api/role.service';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { forkJoin as observableForkJoin } from 'rxjs';
import { AuthService } from '../../../shared/api/auth.service';
);
const expirationDate = response['pwdExpirationDate'];
if (expirationDate) {
- const mom = moment(expirationDate * 1000);
- console.log(this.pwdExpirationFormat, mom.format(this.pwdExpirationFormat));
-
this.userForm
.get('pwdExpirationDate')
.setValue(moment(expirationDate * 1000).format(this.pwdExpirationFormat));
import { Validators } from '@angular/forms';
import { Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { UserService } from '../../../shared/api/user.service';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
import { Observable } from 'rxjs';
import { Daemon } from '../models/daemon.interface';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable } from 'rxjs';
import { cdEncode } from '../decorators/cd-encode';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, of as observableOf } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { map } from 'rxjs/operators';
import { CdDevice } from '../models/devices';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { map } from 'rxjs/operators';
import { cdEncode, cdEncodeNot } from '../decorators/cd-encode';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin, of as observableOf } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { forkJoin as observableForkJoin, Observable, of as observableOf } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { FormControl } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { configureTestBed, Mocks } from '../../../testing/unit-test-helper';
import { CrushNode } from '../models/crush-node';
import { AbstractControl } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CrushNode } from '../models/crush-node';
import { ReactiveFormsModule } from '@angular/forms';
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { of as observableOf } from 'rxjs';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { Component, Input, OnInit } from '@angular/core';
import { FormControl, NgForm } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../../shared/enum/icons.enum';
import { ConfigurationService } from '../../api/configuration.service';
import { Validators } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CdValidators } from '../../forms/cd-validators';
import { ConfigFormModel } from './config-option.model';
import { FormControl } from '@angular/forms';
import { NgbCalendar, NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
+import moment from 'moment';
import { Subscription } from 'rxjs';
@Component({
import { FormControl, ValidatorFn, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CdFormBuilder } from '../../forms/cd-form-builder';
import { CdFormGroup } from '../../forms/cd-form-group';
import { Component, OnInit } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { LanguageService } from '../../services/language.service';
import { SupportedLanguages } from './supported-languages.enum';
} from '@angular/core';
import { Mutex } from 'async-mutex';
-import * as _ from 'lodash';
-import * as moment from 'moment';
+import _ from 'lodash';
+import moment from 'moment';
import { Subscription } from 'rxjs';
import { Icons } from '../../enum/icons.enum';
-import * as _ from 'lodash';
+import _ from 'lodash';
export class SelectMessages {
empty: string;
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { FormControl, ValidatorFn } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../forms/cd-form-group';
import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../../shared/enum/icons.enum';
import { Component, Input, OnInit } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../models/cd-table-action';
ViewChild
} from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { CellTemplate } from '../../enum/cell-template.enum';
import { CdTableColumn } from '../../models/cd-table-column';
import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { ComponentsModule } from '../../components/components.module';
SortPropDir,
TableColumnProp
} from '@swimlane/ngx-datatable';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, Subject, Subscription, timer as observableTimer } from 'rxjs';
import { TableStatus } from '../../../shared/classes/table-status';
-import * as _ from 'lodash';
+import _ from 'lodash';
/**
* This decorator can be used in a class or method.
import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Directive({
selector: '[autofocus]' // tslint:disable-line
} from '@angular/core';
import { NgControl } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { DimlessBinaryPerSecondPipe } from '../pipes/dimless-binary-per-second.pipe';
import { FormatterService } from '../services/formatter.service';
} from '@angular/core';
import { NgControl } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { DimlessBinaryPipe } from '../pipes/dimless-binary.pipe';
import { FormatterService } from '../services/formatter.service';
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Directive({
selector: '[cdTrim]'
-export enum Color {
+import styles from '../../../styles.scss';
+
+export class Color {
// HEALTH
- HEALTH_ERR = '#ff0000',
- HEALTH_WARN = '#ffa500',
- HEALTH_OK = '#00bb00'
+ static HEALTH_ERR = styles.healthColorError;
+ static HEALTH_WARN = styles.healthColorWarning;
+ static HEALTH_OK = styles.healthColorHealthy;
}
Validators
} from '@angular/forms';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, of as observableOf, timer as observableTimer } from 'rxjs';
import { map, switchMapTo, take } from 'rxjs/operators';
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
/**
* Convert the given value to an array.
import { DatePipe } from '@angular/common';
-import * as moment from 'moment';
+import moment from 'moment';
import { CdDatePipe } from './cd-date.pipe';
-import * as moment from 'moment';
+import moment from 'moment';
import { DurationPipe } from './duration.pipe';
import { Pipe, PipeTransform } from '@angular/core';
-import * as moment from 'moment';
+import moment from 'moment';
@Pipe({
name: 'duration',
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'empty'
+import styles from '../../../styles.scss';
import { HealthColorPipe } from './health-color.pipe';
describe('HealthColorPipe', () => {
});
it('transforms "HEALTH_OK"', () => {
- expect(pipe.transform('HEALTH_OK')).toEqual({ color: '#00bb00' });
+ expect(pipe.transform('HEALTH_OK')).toEqual({ color: styles.healthColorHealthy });
});
it('transforms "HEALTH_WARN"', () => {
- expect(pipe.transform('HEALTH_WARN')).toEqual({ color: '#ffa500' });
+ expect(pipe.transform('HEALTH_WARN')).toEqual({ color: styles.healthColorWarning });
});
it('transforms "HEALTH_ERR"', () => {
- expect(pipe.transform('HEALTH_ERR')).toEqual({ color: '#ff0000' });
+ expect(pipe.transform('HEALTH_ERR')).toEqual({ color: styles.healthColorError });
});
it('transforms others', () => {
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'map'
-import * as moment from 'moment';
+import moment from 'moment';
import { RelativeDatePipe } from './relative-date.pipe';
import { Pipe, PipeTransform } from '@angular/core';
-import * as moment from 'moment';
+import moment from 'moment';
@Pipe({
name: 'relativeDate'
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'round'
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'truncate'
import { Pipe, PipeTransform } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Pipe({
name: 'upperFirst'
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { TestBed } from '@angular/core/testing';
-import * as moment from 'moment';
+import moment from 'moment';
import { CdDevice } from '../models/devices';
import { DeviceService } from './device.service';
import { Injectable } from '@angular/core';
-import * as moment from 'moment';
+import moment from 'moment';
import { CdDevice } from '../models/devices';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Injectable({
providedIn: 'root'
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ToastrService } from 'ngx-toastr';
import { configureTestBed } from '../../../testing/unit-test-helper';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { IndividualConfig, ToastrService } from 'ngx-toastr';
import { BehaviorSubject, Subject } from 'rxjs';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { Icons } from '../../shared/enum/icons.enum';
import { NotificationType } from '../enum/notification-type.enum';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { PrometheusService } from '../api/prometheus.service';
import {
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { PrometheusService } from '../api/prometheus.service';
import { CdNotificationConfig } from '../models/cd-notification';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import {
AlertmanagerSilenceMatcher,
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { filter, first } from 'rxjs/operators';
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { BehaviorSubject } from 'rxjs';
import { configureTestBed } from '../../../testing/unit-test-helper';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { ExecutingTask } from '../models/executing-task';
import { FinishedTask } from '../models/finished-task';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
-import * as _ from 'lodash';
+import _ from 'lodash';
import { configureTestBed } from '../../../testing/unit-test-helper';
import { RbdService } from '../api/rbd.service';
import { Injectable } from '@angular/core';
-import * as _ from 'lodash';
+import _ from 'lodash';
@Injectable({
providedIn: 'root'
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;
+}
--- /dev/null
+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;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
-$health-chart-colors: (
- 'red': #c9190b,
- 'blue': #06c,
- 'orange': #ef9234,
- 'yellow': #f6d173,
- 'magenta': #009596,
- 'green': #7cc674,
- 'gray': #ededed,
- 'light-blue': #519de9,
- 'light-yellow': #f9e0a2,
- 'cyan': #73c5c5,
- 'purple': #3c3d99
-);
-
$primary: #2b99a8;
$secondary: #374249;
$success: $green;
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
+ "esModuleInterop": true,
"importHelpers": true,
"module": "es2020",
"outDir": "./dist/out-tsc",