From 2a81c0775b750ee83b0826e470c1f244aff3a172 Mon Sep 17 00:00:00 2001 From: Pedro Gonzalez Gomez Date: Tue, 11 Oct 2022 19:43:34 +0200 Subject: [PATCH] mgr/dashboard: dashboard-v3: cluster-utilization card mgr/dashboard: some improvements mgr/dashboard: updated promqls and improved tooltips mgr/dashboard: some fixes and improvements mgr/dashboard: added square box plugin and improved/fixed code mgr/dashboard: added maxValue option for graphs and added tooltips to text mgr/dashboard: removed unnecessary variables mgr/dashboard: fix openapi tracker: https://tracker.ceph.com/issues/57863 Signed-off-by: Pedro Gonzalez Gomez (cherry picked from commit 7f7996fa55199ce0062612e89fc441467337e8c9) --- .../mgr/dashboard/controllers/prometheus.py | 5 +++ .../dashboard-area-chart.component.spec.ts | 36 +++++++++++++++++++ .../dashboard-time-selector.component.html | 11 ++++++ .../dashboard-time-selector.component.scss | 10 ++++++ .../dashboard-time-selector.component.spec.ts | 24 +++++++++++++ .../ceph/new-dashboard/dashboard.module.ts | 10 ++++-- .../dashboard/dashboard.component.html | 2 +- .../dashboard/dashboard.component.ts | 4 ++- .../src/app/shared/api/prometheus.service.ts | 4 +++ .../styles/defaults/_bootstrap-defaults.scss | 2 ++ src/pybind/mgr/dashboard/openapi.yaml | 22 ++++++++++++ 11 files changed, 125 insertions(+), 5 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.spec.ts diff --git a/src/pybind/mgr/dashboard/controllers/prometheus.py b/src/pybind/mgr/dashboard/controllers/prometheus.py index ae4abfc166885..1c50cec45b52c 100644 --- a/src/pybind/mgr/dashboard/controllers/prometheus.py +++ b/src/pybind/mgr/dashboard/controllers/prometheus.py @@ -86,6 +86,11 @@ class Prometheus(PrometheusRESTController): def rules(self, **params): return self.prometheus_proxy('GET', '/rules', params) + @RESTController.Collection(method='GET', path='/data') + def get_prometeus_data(self, **params): + params['query'] = params.pop('params') + return self.prometheus_proxy('GET', '/query_range', params) + @RESTController.Collection(method='GET', path='/silences') def get_silences(self, **params): return self.alert_proxy('GET', '/silences', params) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.spec.ts new file mode 100644 index 0000000000000..0501ac75dde6c --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.spec.ts @@ -0,0 +1,36 @@ +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CssHelper } from '~/app/shared/classes/css-helper'; +import { DimlessBinaryPerSecondPipe } from '~/app/shared/pipes/dimless-binary-per-second.pipe'; +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'; +import { configureTestBed } from '~/testing/unit-test-helper'; +import { DashboardAreaChartComponent } from './dashboard-area-chart.component'; + +describe('DashboardAreaChartComponent', () => { + let component: DashboardAreaChartComponent; + let fixture: ComponentFixture; + + configureTestBed({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DashboardAreaChartComponent], + providers: [ + CssHelper, + DimlessBinaryPipe, + DimlessBinaryPerSecondPipe, + DimlessPipe, + FormatterService + ] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardAreaChartComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.html new file mode 100644 index 0000000000000..cd960d07bd9d2 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.html @@ -0,0 +1,11 @@ +
+ +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.scss new file mode 100644 index 0000000000000..13572dc2f0b2d --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.scss @@ -0,0 +1,10 @@ +select#timepicker { + border: 0; +} + +.timeSelector { + position: absolute; + right: 18px; + top: 20px; + width: 12rem; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.spec.ts new file mode 100644 index 0000000000000..9aeec4dcb51e5 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.spec.ts @@ -0,0 +1,24 @@ +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { DashboardTimeSelectorComponent } from './dashboard-time-selector.component'; + +describe('DashboardTimeSelectorComponent', () => { + let component: DashboardTimeSelectorComponent; + let fixture: ComponentFixture; + + configureTestBed({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DashboardTimeSelectorComponent] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardTimeSelectorComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts index c32c2a630a19d..466da56256959 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts @@ -3,14 +3,16 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { ChartsModule } from 'ng2-charts'; import { SimplebarAngularModule } from 'simplebar-angular'; import { SharedModule } from '~/app/shared/shared.module'; import { CephSharedModule } from '../shared/ceph-shared.module'; import { CardComponent } from './card/card.component'; +import { DashboardAreaChartComponent } from './dashboard-area-chart/dashboard-area-chart.component'; import { DashboardPieComponent } from './dashboard-pie/dashboard-pie.component'; +import { DashboardTimeSelectorComponent } from './dashboard-time-selector/dashboard-time-selector.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { CardRowComponent } from './card-row/card-row.component'; import { PgSummaryPipe } from './pg-summary.pipe'; @@ -24,6 +26,7 @@ import { PgSummaryPipe } from './pg-summary.pipe'; ChartsModule, RouterModule, NgbPopoverModule, + NgbTooltipModule, FormsModule, ReactiveFormsModule, SimplebarAngularModule @@ -33,9 +36,10 @@ import { PgSummaryPipe } from './pg-summary.pipe'; DashboardComponent, CardComponent, DashboardPieComponent, - DashboardPieComponent, CardRowComponent, - PgSummaryPipe + PgSummaryPipe, + DashboardAreaChartComponent, + DashboardTimeSelectorComponent ] }) export class NewDashboardModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html index ec8f75a905d57..1c1db13bc56ce 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html @@ -180,7 +180,7 @@ -
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts index ba6eccedff429..e19cac146358e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts @@ -1,8 +1,9 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import _ from 'lodash'; -import { Observable, Subscription } from 'rxjs'; +import { Observable, Subscription, timer } from 'rxjs'; import { take } from 'rxjs/operators'; +import moment from 'moment'; import { ClusterService } from '~/app/shared/api/cluster.service'; import { ConfigurationService } from '~/app/shared/api/configuration.service'; @@ -10,6 +11,7 @@ import { HealthService } from '~/app/shared/api/health.service'; import { MgrModuleService } from '~/app/shared/api/mgr-module.service'; import { OsdService } from '~/app/shared/api/osd.service'; import { PrometheusService } from '~/app/shared/api/prometheus.service'; +import { Promqls as queries } from '~/app/shared/enum/dashboard-promqls.enum'; import { Icons } from '~/app/shared/enum/icons.enum'; import { DashboardDetails } from '~/app/shared/models/cd-details'; import { Permissions } from '~/app/shared/models/permissions'; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/prometheus.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/prometheus.service.ts index 58191721953d5..30d7d488649ae 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/prometheus.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/prometheus.service.ts @@ -24,6 +24,10 @@ export class PrometheusService { constructor(private http: HttpClient, private settingsService: SettingsService) {} + getPrometheusData(params: any): any { + return this.http.get(`${this.baseURL}/data`, { params }); + } + ifAlertmanagerConfigured(fn: (value?: string) => void, elseFn?: () => void): void { this.settingsService.ifSettingConfigured(this.settingsKey.alertmanager, fn, elseFn); } 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 f871b4ff80f8e..1272c3c77ce62 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 @@ -91,6 +91,8 @@ $chart-color-center-text: #151515 !default; $chart-color-center-text-description: #72767b !default; $chart-color-tooltip-background: $black !default; $chart-danger: #c9190b !default; +$chart-color-strong-blue: #0078c8 !default; +$chart-color-translucent-blue: #0096dc80 !default; // Typography diff --git a/src/pybind/mgr/dashboard/openapi.yaml b/src/pybind/mgr/dashboard/openapi.yaml index eda3c2925bf23..b780e6fd4cdad 100644 --- a/src/pybind/mgr/dashboard/openapi.yaml +++ b/src/pybind/mgr/dashboard/openapi.yaml @@ -7472,6 +7472,28 @@ paths: - jwt: [] tags: - Prometheus + /api/prometheus/data: + get: + parameters: [] + responses: + '200': + content: + application/vnd.ceph.api.v1.0+json: + type: object + description: OK + '400': + description: Operation exception. Please check the response body for details. + '401': + description: Unauthenticated access. Please login first. + '403': + description: Unauthorized access. Please check your permissions. + '500': + description: Unexpected error. Please check the response body for the stack + trace. + security: + - jwt: [] + tags: + - Prometheus /api/prometheus/notifications: get: parameters: [] -- 2.39.5