]> git.apps.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: dashboard-v3: cluster-utilization card 50109/head
authorPedro Gonzalez Gomez <pegonzal@redhat.com>
Tue, 11 Oct 2022 17:43:34 +0000 (19:43 +0200)
committerPedro Gonzalez Gomez <pegonzal@redhat.com>
Wed, 15 Feb 2023 12:20:49 +0000 (13:20 +0100)
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 <pegonzal@redhat.com>
src/pybind/mgr/dashboard/controllers/prometheus.py
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.spec.ts [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.html [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.scss [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-time-selector/dashboard-time-selector.component.spec.ts [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/api/prometheus.service.ts
src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
src/pybind/mgr/dashboard/openapi.yaml

index ae4abfc1668859529111e9b4cc526981b39ca077..1c50cec45b52cb65bbcd3eb895b237098f3d254f 100644 (file)
@@ -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 (file)
index 0000000..0501ac7
--- /dev/null
@@ -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<DashboardAreaChartComponent>;
+
+  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 (file)
index 0000000..cd960d0
--- /dev/null
@@ -0,0 +1,11 @@
+<div class="timeSelector">
+  <select id="timepicker"
+          name="timepicker"
+          [(ngModel)]="time"
+          (ngModelChange)="emitTime()"
+          class="form-select">
+    <option *ngFor="let key of times"
+            [ngValue]="key.value">{{ key.name }}
+    </option>
+  </select>
+</div>
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 (file)
index 0000000..13572dc
--- /dev/null
@@ -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 (file)
index 0000000..9aeec4d
--- /dev/null
@@ -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<DashboardTimeSelectorComponent>;
+
+  configureTestBed({
+    schemas: [NO_ERRORS_SCHEMA],
+    declarations: [DashboardTimeSelectorComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardTimeSelectorComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
index c32c2a630a19d9dcfb308aa90fb95b594aa79a0d..466da56256959f231e36045024622ad4c4af73c5 100644 (file)
@@ -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 {}
index ec8f75a905d570834d1d9f313a85e37e380538a5..1c1db13bc56ce5bb5c3e9cffaa6de8b3889a0b38 100644 (file)
       </li>
     </cd-card>
 
-    <cd-card title="Capacity utilization"
+    <cd-card title="Cluster utilization"
              i18n-title
              class="col-sm-9 px-3 d-flex">
       <div class="ms-4 me-4 mt-0">
index ba6eccedff429a9d8b5f3dc2c220fe3619abb868..e19cac146358e93c482a36af7855daa47d0eb528 100644 (file)
@@ -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';
index 58191721953d57441f189218d94246f2aceff762..30d7d488649ae21dc7a3e8a5954219e4365b1012 100644 (file)
@@ -24,6 +24,10 @@ export class PrometheusService {
 
   constructor(private http: HttpClient, private settingsService: SettingsService) {}
 
+  getPrometheusData(params: any): any {
+    return this.http.get<any>(`${this.baseURL}/data`, { params });
+  }
+
   ifAlertmanagerConfigured(fn: (value?: string) => void, elseFn?: () => void): void {
     this.settingsService.ifSettingConfigured(this.settingsKey.alertmanager, fn, elseFn);
   }
index f871b4ff80f8ed6f84e87405925f418536761645..1272c3c77ce62a11d074f43eacb48aca4d0caab5 100644 (file)
@@ -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
 
index a85740ef56df68f801fe43476dfa18fb4de2ad80..8b11aa2480d8e50617fcb66c55268235a541bf4a 100644 (file)
@@ -7532,6 +7532,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: []